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

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