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