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   padding-top: 2em;
  18 }
  19
  20 ::selection {
  21   color: #00f;
  22   background-color: #e8e8e8;
  23 }
  24
  25 @media only screen and (min-width: 500px) {
  26   body {
  27     overflow-x: auto;
  28   }
  29
  30   main {
  31     padding: 0 0 0 66px
  32   }
  33
  34   .columned {
  35     width: max-content;
  36   }
  37
  38   .columned .h2:not(:only-child) {
  39     float: left;
  40     margin: 0 40px;
  41   }
  42
  43   .columned .h2:not(:only-child) h2 {
  44     width: 14.6em;
  45   }
  46
  47   .columned .h2:not(:only-child) .h3,
  48   .columned .h2:not(:only-child) li,
  49   .columned .h2:not(:only-child) p {
  50     width: 24em;
  51   }
  52
  53   .columned .h2:not(:only-child) pre { width: 25em }
  54
  55   header {
  56     float: left;
  57     margin-top: 1.2em;
  58   }
  59 }
  60
  61 .columned .h2:first-of-type pre {
  62   line-height: 1;
  63 }
  64
  65 blockquote, p, article > div {
  66   margin: 0 0.3em;
  67   max-width: 45em
  68 }
  69 pre { max-width: 55em }
  70 blockquote {
  71   border-left: 4px solid #ccc;
  72   padding-left: 10px;
  73 }
  74
  75 br { display: none }
  76 h1, h2, h3 { font-weight: normal }
  77 h1 { font-size: 2em }
  78 h2 { font-size: 1.65em }
  79 h3 { font-size: 1.25em }
  80 header h1 { font-size: 1em }
  81 pre {
  82   font-family: courier, monospace;
  83   font-size: 0.875em;
  84   background-color: #eee;
  85   overflow-x: auto;
  86   padding: 1em;
  87 }
  88
  89 canvas {
  90   width: 64px;
  91   height: 64px;
  92   display: block;
  93   background-color: #000;
  94   border: 1px solid #000;
  95 }
  96
  97 @media (prefers-color-scheme: dark) {
  98   body {
  99     color: #fff;
 100     background: #000;
 101   }
 102
 103   canvas {
 104     background-color: #fff;
 105     border: 1px solid #fff;
 106   }
 107
 108   h1 a {
 109     display: block;
 110     width: 64px;
 111   }
 112
 113   a {
 114     color: #5dc1fd;
 115     display: inline-block;
 116     min-height: 48px;
 117   }
 118
 119   a:visited {
 120     color: #ed6eff;
 121   }
 122
 123   pre {
 124     background-color: #222;
 125   }
 126 }