git.r.bdr.sh - rbdr/r.bdr.sh/blob - css/style.css

   1 html { scroll-behavior: smooth }
   2 body {
   3   font-size: 1em;
   4   font: -apple-system-body;
   5   font-family: "Hoefler Text", "Times New Roman", serif;
   6   font-feature-settings: "liga" 1, "dlig" 1, "pnum" 1;
   7   line-height: 1.6;
   8   letter-spacing: 0.02em;
   9 }
  10 aside {
  11   clear: both;
  12   padding: 2em;
  13 }
  14 ::selection {
  15   background-color: #e8e8e8;
  16   color: #00f;
  17 }
  18 @media only screen and (min-width: 500px) {
  19   body { overflow-x: auto }
  20   main { padding: 0 64px 0 124px }
  21   h1 a {
  22     display: block;
  23     width: 64px;
  24   }
  25   header {
  26     float: left;
  27     margin-top: 0.8em;
  28   }
  29   .columned {
  30     width: max-content;
  31
  32     .h2:not(:only-child) {
  33       float: left;
  34       margin: 0 60px 0 0;
  35
  36       h2 { max-width: 14.6em }
  37       .h3,
  38       li,
  39       p { max-width: 24em }
  40       pre { max-width: 25em }
  41     }
  42
  43     .h2:first-of-type {
  44       columns: 3;
  45       width: 24em;
  46
  47       pre[role="img"]:first-of-type { margin-top: 1.64em }
  48       h2:empty {display: none}
  49       h2,
  50       pre,
  51       ul,
  52       p:not(.a) { column-span: all }
  53       p { break-after: column }
  54       p.a { break-after: avoid }
  55     }
  56   }
  57 }
  58
  59 .a { margin: 0 0.3em }
  60 pre {
  61   background-color: #eee;
  62   font-family: courier, monospace;
  63   font-size: 0.875em;
  64   max-width: 55em;
  65   overflow-x: auto;
  66   padding: 1em;
  67 }
  68 pre[role="img"] { line-height: 1 }
  69 blockquote, p, article > div {
  70   max-width: 45em
  71 }
  72 blockquote {
  73   border-left: 4px solid #ccc;
  74   padding-left: 10px;
  75 }
  76 br { display: none }
  77 h1, h2, h3 { font-weight: normal }
  78 h1 { font-size: 2em }
  79 h2 { font-size: 1.65em }
  80 h3 { font-size: 1.25em }
  81 header h1 { font-size: 1em }
  82
  83 canvas {
  84   background-color: #000;
  85   border: 1px solid #000;
  86   display: block;
  87   height: 64px;
  88   width: 64px;
  89 }
  90
  91 @media (prefers-color-scheme: dark) {
  92   body {
  93     background: #000;
  94     color: #fff;
  95   }
  96   canvas {
  97     background-color: #fff;
  98     border: 1px solid #fff;
  99   }
 100   a { color: #5dc1fd }
 101   a:visited { color: #ed6eff }
 102   pre { background-color: #222 }
 103 }