code.kerkeslager.com Git - styx.blog/blob - core/templates/core/style.css

   1 html {
   2   height: 100%;
   3   font-family: "Lucida Grande", Verdana, Arial, sans-serif;
   4 }
   5
   6 header, main, footer, p {
   7   margin: 0;
   8   padding: 0;
   9 }
  10
  11 h1, h2, h3, h4, h5, h6 {
  12   margin: 0;
  13   font-family: Palatino, serif;
  14 }
  15
  16 time {
  17   font-family: Verdana, sans-serif;
  18 }
  19
  20 p {
  21   line-height: 1.8;
  22   margin-bottom: 1.2rem;
  23 }
  24
  25 p:last-child {
  26   margin-bottom: 0;
  27 }
  28
  29 body {
  30   display: flex;
  31   flex-direction: column;
  32   align-items: center;
  33
  34   margin: 0;
  35   min-height: 100%;
  36 }
  37
  38 body > header {
  39   margin: 5rem 0;
  40 }
  41
  42 body > header > h1 {
  43   font-family: Geneva, sans-serif;
  44   font-weight: 100;
  45   font-size: 5rem;
  46 }
  47
  48 body > nav {
  49   display: flex;
  50   align-items: center;
  51   margin-bottom: 4rem;
  52 }
  53
  54 body > nav a:not(:first-child) {
  55   margin-left: 1.5rem;
  56 }
  57
  58 body > main {
  59   width: calc(100% - 4rem);
  60   max-width: 40rem;
  61   min-height: 100%;
  62 }
  63
  64 body > footer {
  65   display: flex;
  66   flex-direction: column;
  67   align-items: center;
  68
  69   margin: 5rem 0;
  70 }
  71
  72 body > footer .licenses {
  73   display: flex;
  74   flex-direction: row;
  75   align-items: center;
  76   margin-top: 1rem;
  77 }
  78
  79 body > footer .licenses > div {
  80   display: flex;
  81   flex-direction: column;
  82   align-items: flex-start;
  83
  84   margin-left: 1rem;
  85 }
  86
  87 body > footer .licenses > div > span:not(:first-child) {
  88   margin-top: 1rem;
  89 }
  90
  91 article {
  92   display: flex;
  93   flex-direction: column;
  94
  95   margin-top: 2.75rem;
  96 }
  97
  98 article:first-of-type {
  99   margin-top: 0;
 100 }
 101
 102 article:not(:first-of-type) {
 103   border-top: 1px solid black;
 104   padding-top: 2rem;
 105 }
 106
 107 article > header h1 a,
 108 article > header h1 a:visited {
 109   text-decoration: none;
 110 }
 111
 112 article > header h1 a:hover,
 113 article > header h1 a:active{
 114   text-decoration: underline;
 115 }
 116
 117 article > header h1 {
 118   font-size: 2rem;
 119 }
 120
 121 article > main {
 122   margin: 1.6rem 0;
 123 }
 124
 125 article > main:last-child {
 126   margin-bottom: 0;
 127 }
 128
 129 nav.pagination:first-child {
 130   margin-bottom: 3rem;
 131 }
 132
 133 nav.pagination:last-child {
 134   margin-top: 3rem;
 135 }
 136
 137 @media (prefers-color-scheme: dark) {
 138   html {
 139     color: #dfdede;
 140     background: #121212;
 141   }
 142
 143   a {
 144     color: #dfdede;
 145   }
 146
 147   article:not(:first-of-type) {
 148     border-top: 1px solid #dfdddd;
 149   }
 150 }