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: -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 .h2 { margin-top: 1em }
  24 @media only screen and (min-width: 500px) {
  25   body { overflow-x: auto }
  26   .columned {
  27     width: max-content;
  28
  29     .h2:not(:only-child) {
  30       float: left;
  31       margin: 0 60px 0 0;
  32
  33       h2 { max-width: 14.6em }
  34       .h3,
  35       li,
  36       p { max-width: 24em }
  37       pre { max-width: 25em }
  38     }
  39
  40     .h2:first-of-type {
  41       columns: 3;
  42       width: 24em;
  43
  44       h2:empty {display: none}
  45       h2,
  46       pre,
  47       ul,
  48       p:not(.a) { column-span: all }
  49       p { break-after: column }
  50       p.a { break-after: avoid }
  51     }
  52   }
  53 }
  54
  55 .a { margin: 0 0.3em }
  56 pre {
  57   background-color: #eee;
  58   font-family: courier, monospace;
  59   font-size: 0.875em;
  60   max-width: 55em;
  61   overflow-x: auto;
  62   padding: 1em;
  63 }
  64 pre[role="img"] { display: none }
  65 blockquote, p, article > div {
  66   max-width: 45em
  67 }
  68 blockquote {
  69   border-left: 4px solid #ccc;
  70   padding-left: 10px;
  71 }
  72 br { display: none }
  73 h1, h2, h3 {
  74   font-family: "Avenir Next";
  75   font-weight: 900
  76 }
  77 h1 { font-size: 2em }
  78 h3 {
  79   font-weight: 600;
  80   margin-top: 1em
  81 }
  82
  83 h2, h3, a { color: #00f }
  84 [data-title="/index.html"] {
  85   .h2:nth-of-type(n+2):nth-of-type(-n+4) {
  86     h2, h3, a { color: #EE0700 }
  87   }
  88
  89   .h2:nth-of-type(n+5):nth-of-type(-n+6) {
  90     h2, h3, a { color: #398557 }
  91   }
  92
  93   .h2:nth-of-type(n+7):nth-of-type(-n+9) {
  94     h2, h3, a { color: #6A5ACD }
  95   }
  96
  97   .h2:nth-of-type(10) {
  98     h2, h3, a { color: #A76905 }
  99   }
 100
 101   .h2:nth-of-type(11) {
 102     h2, h3, a { color: #1D76DB }
 103   }
 104
 105   .h2:nth-of-type(n+12):nth-of-type(-n+16) {
 106     h2, h3, a { color: #D505C6 }
 107   }
 108
 109   .h2:nth-of-type(17) {
 110     h2, h3, a { color: #6A788A }
 111   }
 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, h3, a { color: #5dc1fd }
 160   [data-title="/index.html"] .h2:nth-of-type(n+7):nth-of-type(-n+9) {
 161     h2, h3, a { color: #675CFB }
 162   }
 163   pre { background-color: #222 }
 164   header h1 a {
 165     -webkit-text-stroke: 1px #fff;
 166   }
 167 }