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

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