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

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