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