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 @media only screen and (min-width: 500px) {
  14   body {
  15     overflow-x: auto;
  16   }
  17
  18   .columned {
  19     height: calc(100vh - 200px);
  20     width: max-content;
  21   }
  22
  23   .columned .h2:not(:only-child) {
  24     float: left;
  25     margin: 0 40px;
  26     height: calc(100vh - 200px);
  27   }
  28
  29   .columned .h2:not(:only-child) h2 {
  30     width: 14.6em;
  31   }
  32
  33   .columned .h2:not(:only-child) .h3,
  34   .columned .h2:not(:only-child) li,
  35   .columned .h2:not(:only-child) p {
  36     width: 22em;
  37   }
  38
  39   .columned .h2:not(:only-child) pre { width: 25em }
  40 }
  41
  42 .columned .h2:first-of-type pre {
  43   line-height: 1;
  44 }
  45
  46 blockquote, p { max-width: 45em }
  47 pre { max-width: 55em }
  48 blockquote {
  49   border-left: 4px solid #ccc;
  50   padding-left: 10px;
  51 }
  52
  53 h1, h2, h3 { font-weight: normal }
  54 br { display: none }
  55 pre {
  56   font-family: courier, monospace;
  57   font-size: 0.875em;
  58   background-color: #eee;
  59   overflow-x: auto;
  60 }
  61
  62 canvas {
  63   width: 64px;
  64   height: 64px;
  65   display: inline-block;
  66   background-color: #000;
  67   border: 1px solid #000;
  68 }
  69
  70 @media (prefers-color-scheme: dark) {
  71   body {
  72     color: #fff;
  73     background: #000;
  74   }
  75
  76   canvas {
  77     background-color: #fff;
  78     border: 1px solid #fff;
  79   }
  80
  81   a {
  82     color: #5dc1fd;
  83     display: inline-block;
  84     min-height: 48px;
  85   }
  86
  87   a:visited {
  88     color: #ed6eff;
  89   }
  90
  91   pre {
  92     background-color: #222;
  93   }
  94 }