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