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

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