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