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   margin-bottom: 4rem;
  50 }
  51
  52 body > main {
  53   width: calc(100% - 4rem);
  54   max-width: 40rem;
  55   min-height: 100%;
  56 }
  57
  58 body > footer {
  59   display: flex;
  60   flex-direction: column;
  61   align-items: center;
  62
  63   margin: 5rem 0;
  64 }
  65
  66 body > footer .licenses {
  67   display: flex;
  68   flex-direction: row;
  69   align-items: center;
  70   margin-top: 1rem;
  71 }
  72
  73 body > footer .licenses > div {
  74   display: flex;
  75   flex-direction: column;
  76   align-items: flex-start;
  77
  78   margin-left: 1rem;
  79 }
  80
  81 body > footer .licenses > div > span:not(:first-child) {
  82   margin-top: 1rem;
  83 }
  84
  85 article {
  86   display: flex;
  87   flex-direction: column;
  88
  89   margin-top: 2.75rem;
  90 }
  91
  92 article:first-of-type {
  93   margin-top: 0;
  94 }
  95
  96 article:not(:first-of-type) {
  97   border-top: 1px solid black;
  98   padding-top: 2rem;
  99 }
 100
 101 article > header h1 a,
 102 article > header h1 a:visited {
 103   text-decoration: none;
 104 }
 105
 106 article > header h1 a:hover,
 107 article > header h1 a:active{
 108   text-decoration: underline;
 109 }
 110
 111 article > header h1 {
 112   font-size: 2rem;
 113 }
 114
 115 article > main {
 116   margin: 1.6rem 0;
 117 }
 118
 119 article > main:last-child {
 120   margin-bottom: 0;
 121 }
 122
 123 nav.pagination:first-child {
 124   margin-bottom: 3rem;
 125 }
 126
 127 nav.pagination:last-child {
 128   margin-top: 3rem;
 129 }
 130
 131 @media (prefers-color-scheme: dark) {
 132   html {
 133     color: #dfdede;
 134     background: #121212;
 135   }
 136
 137   a {
 138     color: #dfdede;
 139   }
 140
 141   article:not(:first-of-type) {
 142     border-top: 1px solid #dfdddd;
 143   }
 144 }