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

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