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 p { margin: 1em 0 }
  83 ul { padding-left: 2em }
  84 br { display: none }
  85 h1, h2, h3 {
  86   font-family: "Avenir Next", "Montserrat", "Segoe UI Variable Display", "Noto Sans", "Roboto", "Segoe UI", sans-serif;
  87   font-weight: 900
  88 }
  89 h1, h2 {
  90   font-size: 2em;
  91   text-transform: lowercase;
  92 }
  93 h3 {
  94   display: inline-block;
  95   font-weight: 600;
  96   margin-top: 1em
  97 }
  98
  99 h1, h2, h3, a { color: #00f }
 100 [data-title="/index.html"] {
 101   .h2:nth-of-type(n+5):nth-of-type(-n+6) {
 102     h2, h3, a { color: #EE0700 }
 103   }
 104
 105   .h2:nth-of-type(n+7):nth-of-type(-n+9) {
 106     h2, h3, a { color: #6A5ACD }
 107   }
 108
 109   .h2:nth-of-type(10) {
 110     h2, h3, a { color: #A76905 }
 111   }
 112
 113   .h2:nth-of-type(11) {
 114     h2, h3, a { color: #398557 }
 115   }
 116
 117   .h2:nth-of-type(n+12):nth-of-type(-n+16) {
 118     h2, h3, a { color: #D505C6 }
 119   }
 120
 121   .h2:nth-of-type(17) {
 122     h2, h3, a { color: #6A788A }
 123   }
 124 }
 125
 126 .h2 a {
 127   display: inline-block;
 128   padding: 0.25em 0;
 129   margin: 0.25em 0;
 130 }
 131
 132 header { position: relative }
 133 main {
 134   position: relative;
 135   z-index: 1
 136 }
 137 header h1 {
 138   font-size: min(7.5rem, 17vw);
 139   font-weight: 900;
 140   letter-spacing: -0.2em;
 141   line-height: 1em;
 142 }
 143 header h1 a {
 144   background: repeating-linear-gradient(
 145     0deg,
 146     black,
 147     black 1px,
 148     white 1px,
 149     white 2px
 150   );
 151   background-clip: text;
 152   color: transparent;
 153   display: inline-block;
 154   padding-right: 0.2em;
 155   text-decoration: none;
 156   -webkit-text-stroke: 1px #000;
 157 }
 158
 159 canvas {
 160   background-color: #000;
 161   border: 1px solid #000;
 162   display: inline-block;
 163   height: 64px;
 164   width: 64px;
 165 }
 166
 167 @media (prefers-color-scheme: dark) {
 168   body {
 169     background: #000;
 170     color: #fff;
 171   }
 172   canvas {
 173     background-color: #fff;
 174     border: 1px solid #fff;
 175   }
 176   h1, h2, h3, a { color: #5dc1fd }
 177   [data-title="/index.html"] .h2:nth-of-type(n+7):nth-of-type(-n+9) {
 178     h2, h3, a { color: #675CFB }
 179   }
 180   pre { background-color: #222 }
 181   header h1 a {
 182     -webkit-text-stroke: 1px #fff;
 183   }
 184 }