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

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