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[aria-label="rbdr"] { 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, p:empty { 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
 101 .h2 a {
 102   display: inline-block;
 103   padding: 0.25em 0;
 104   margin: 0.25em 0;
 105 }
 106
 107 header { position: relative }
 108 main {
 109   position: relative;
 110   z-index: 1
 111 }
 112 header h1 {
 113   font-size: min(7.5rem, 17vw);
 114   font-weight: 900;
 115   letter-spacing: -0.2em;
 116   line-height: 1em;
 117 }
 118 header h1 a {
 119   background: repeating-linear-gradient(
 120     0deg,
 121     black,
 122     black 1px,
 123     white 1px,
 124     white 2px
 125   );
 126   background-clip: text;
 127   color: transparent;
 128   display: inline-block;
 129   padding-right: 0.2em;
 130   text-decoration: none;
 131   -webkit-text-stroke: 1px #000;
 132 }
 133
 134 canvas {
 135   background-color: #000;
 136   border: 1px solid #000;
 137   display: inline-block;
 138   height: 64px;
 139   width: 64px;
 140 }
 141
 142 @media (prefers-color-scheme: dark) {
 143   body {
 144     background: #000;
 145     color: #fff;
 146   }
 147   canvas {
 148     background-color: #fff;
 149     border: 1px solid #fff;
 150   }
 151   h1, h2, h3, a { color: #5dc1fd }
 152   pre { background-color: #222 }
 153   header h1 a {
 154     -webkit-text-stroke: 1px #fff;
 155   }
 156 }