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

   1 * {
   2   padding: 0;
   3   margin: 0
   4 }
   5 html { scroll-behavior: smooth }
   6 body {
   7   font-size: 1em;
   8   font-family: "Hoefler Text", "Times New Roman", serif;
   9   font-feature-settings: "liga" 1, "dlig" 1, "pnum" 1;
  10   line-height: 1.6;
  11   letter-spacing: 0.02em;
  12   padding: 2em;
  13 }
  14 @supports (-webkit-touch-callout: none) {
  15   body {
  16     font-size: 1em;
  17     font: -apple-system-body;
  18     font-family: "Hoefler Text", "Times New Roman", serif;
  19     font-feature-settings: "liga" 1, "dlig" 1, "pnum" 1;
  20     line-height: 1.6;
  21     letter-spacing: 0.02em;
  22     padding: 2em;
  23   }
  24 }
  25 aside {
  26   clear: both;
  27   padding: 2em 0;
  28 }
  29 ::selection {
  30   background-color: #e8e8e8;
  31   color: #00f;
  32 }
  33 .h2 { margin-top: 1em }
  34 @media only screen and (min-width: 500px) {
  35   body { overflow-x: auto }
  36   .columned {
  37     width: max-content;
  38
  39     .h2:not(:only-child) {
  40       float: left;
  41       margin: 0 60px 0 0;
  42
  43       h2 { max-width: 14.6em }
  44       .h3,
  45       li,
  46       p { max-width: 24em }
  47       pre { max-width: 25em }
  48     }
  49
  50     .h2:first-of-type {
  51       columns: 3;
  52       width: 24em;
  53
  54       h2:empty {display: none}
  55       h2,
  56       pre,
  57       ul,
  58       p:not(.a) { column-span: all }
  59       p { break-after: column }
  60       p.a { break-after: avoid }
  61     }
  62   }
  63 }
  64
  65 .a { margin: 0 0.3em }
  66 pre {
  67   background-color: #eee;
  68   font-family: courier, monospace;
  69   font-size: 0.875em;
  70   max-width: 55em;
  71   overflow-x: auto;
  72   padding: 1em;
  73 }
  74 pre[role="img"] { display: none }
  75 blockquote, p, article > div {
  76   max-width: 45em
  77 }
  78 blockquote {
  79   border-left: 4px solid #ccc;
  80   padding-left: 10px;
  81 }
  82 br { display: none }
  83 h1, h2, h3 {
  84   font-family: "Avenir Next", "Segoe UI", "Fira Sans", "Roboto", sans-serif;
  85   font-weight: 900
  86 }
  87 h1 { font-size: 4em }
  88 h2 {
  89   font-size: 2em;
  90   text-transform: lowercase;
  91 }
  92 h3 {
  93   display: inline-block;
  94   font-weight: 600;
  95   margin-top: 1em
  96 }
  97
  98 h2, h3, a { color: #00f }
  99 [data-title="/index.html"] {
 100   .h2:nth-of-type(n+5):nth-of-type(-n+6) {
 101     h2, h3, a { color: #EE0700 }
 102   }
 103
 104   .h2:nth-of-type(n+7):nth-of-type(-n+9) {
 105     h2, h3, a { color: #6A5ACD }
 106   }
 107
 108   .h2:nth-of-type(10) {
 109     h2, h3, a { color: #A76905 }
 110   }
 111
 112   .h2:nth-of-type(11) {
 113     h2, h3, a { color: #398557 }
 114   }
 115
 116   .h2:nth-of-type(n+12):nth-of-type(-n+16) {
 117     h2, h3, a { color: #D505C6 }
 118   }
 119
 120   .h2:nth-of-type(17) {
 121     h2, h3, a { color: #6A788A }
 122   }
 123 }
 124
 125 .h2 a {
 126   display: inline-block;
 127   padding: 0.25em 0;
 128   margin: 0.25em 0;
 129 }
 130
 131 header { position: relative }
 132 main {
 133   position: relative;
 134   z-index: 1
 135 }
 136 header h1 {
 137   font-size: min(7.5rem, 17vw);
 138   font-weight: 900;
 139   letter-spacing: -0.2em;
 140   line-height: 1em;
 141 }
 142 header h1 a {
 143   background: repeating-linear-gradient(
 144     0deg,
 145     black,
 146     black 1px,
 147     white 1px,
 148     white 2px
 149   );
 150   background-clip: text;
 151   color: transparent;
 152   display: inline-block;
 153   padding-right: 0.2em;
 154   text-decoration: none;
 155   -webkit-text-stroke: 1px #000;
 156 }
 157
 158 canvas {
 159   background-color: #000;
 160   border: 1px solid #000;
 161   display: inline-block;
 162   height: 64px;
 163   width: 64px;
 164 }
 165
 166 @media (prefers-color-scheme: dark) {
 167   body {
 168     background: #000;
 169     color: #fff;
 170   }
 171   canvas {
 172     background-color: #fff;
 173     border: 1px solid #fff;
 174   }
 175   h2, h3, a { color: #5dc1fd }
 176   [data-title="/index.html"] .h2:nth-of-type(n+7):nth-of-type(-n+9) {
 177     h2, h3, a { color: #675CFB }
 178   }
 179   pre { background-color: #222 }
 180   header h1 a {
 181     -webkit-text-stroke: 1px #fff;
 182   }
 183 }