git.r.bdr.sh - rbdr/blog/blob - static/css/style.css

   1 * {
   2   margin: 0;
   3   padding: 0;
   4 }
   5
   6 body {
   7   background-image: url('/images/header_background.png');
   8   background-size: auto 300px;
   9   background-attachment: fixed;
  10   line-height: 1.45em;
  11
  12   font-family: Times, 'Times New Roman', serif;
  13 }
  14
  15 header {
  16   background-image: url('/images/header_foreground.png');
  17   background-repeat: no-repeat;
  18   background-size: auto 300px;
  19   height: 300px;
  20 }
  21
  22 header a {
  23   color: transparent;
  24   display: block;
  25   max-height: 500px;
  26 }
  27
  28 main {
  29   background-color: white;
  30   padding: 1.414em 4.53em;
  31   display: flex;
  32   flex-flow: column;
  33   align-items: center;
  34 }
  35
  36 h1, h2, h3 {
  37   font-weight: 400;
  38   width: 100%;
  39 }
  40 h1 {
  41   font-size: 2rem;
  42   line-height: 1.05em;
  43   max-width: 30rem;
  44   margin: 0.5em 0 0.5em;
  45   text-transform: uppercase;
  46 }
  47 h2, h3 {
  48   max-width: 30rem;
  49   font-size: 1rem;
  50   margin: 2em 0;
  51 }
  52
  53 h2 { font-variant: small-caps; }
  54 h3 { font-style: italic; }
  55
  56 ul, ol, img {
  57   width: 100%;
  58   margin: 1.414em 0;
  59   max-width: 30em;
  60 }
  61
  62 p {
  63   max-width: 30em;
  64   text-align: justify;
  65   text-indent: 1.5em;
  66 }
  67
  68 hr + p,
  69 h1 + p,
  70 h2 + p,
  71 h3 + p {
  72   text-indent: 0;
  73 }
  74
  75 ul, ol { margin-left: 1.414em; }
  76
  77 code {
  78   background-color: whitesmoke;
  79   padding: 0.2em 0.5em;
  80 }
  81
  82 pre {
  83   background-color: whitesmoke;
  84   padding: 1em;
  85   font-size: 1.231em;
  86   max-width: 30em;
  87   margin: 1.414em 0 1.414em -1em;
  88 }
  89
  90 hr {
  91   border: 0;
  92   border-bottom: 1px solid #666;
  93   width: 30em;
  94   margin: 1.414em 0;
  95 }
  96
  97 hr.separator {
  98   width: 100%;
  99   border-bottom: 10px solid #666;
 100 }
 101
 102 footer,
 103 footer a {
 104   color: #fff;
 105   background-color: blue;
 106 }
 107 footer p {
 108   font-family: arial, sans-serif;
 109   text-align: left;
 110   text-indent: 0;
 111   padding: 1.414em;
 112 }
 113
 114 /* Image and caption sttyles */
 115
 116 p img {
 117   margin-left: -1.125em;
 118 }
 119
 120 hr + p img,
 121 h1 + p img,
 122 h2 + p img,
 123 h3 + p img {
 124   margin-left: 0;
 125 }
 126
 127 img {
 128   width: 100%;
 129   max-width: 30em;
 130 }
 131
 132 img + em {
 133   color: #999;
 134   display: block;
 135   margin: -1.414em 0 1.414em;
 136   text-align: right;
 137 }
 138
 139 /* Dark Mode Support */
 140
 141 @media (prefers-color-scheme: dark) {
 142   main {
 143     background-color: black;
 144     color: white;
 145   }
 146
 147   code,
 148   pre {
 149     background-color: #444;
 150   }
 151
 152   a {
 153     color: #53FFFF;
 154   }
 155
 156   a:visited {
 157     color: #FF55FF;
 158   }
 159
 160   hr.separator {
 161     border-bottom: 10px solid #999;
 162   }
 163 }