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