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