css/default.css

   1 html {
   2   font-size: 0.6em;
   3   font-family: -apple-system, verdana, sans-serif;
   4 }
   5
   6 body {
   7   font-size: 1.6rem;
   8   color: #333;
   9 }
  10
  11 header {
  12   margin: 1rem 0;
  13 }
  14
  15 nav {
  16   text-align: left;
  17 }
  18
  19 nav a {
  20   color: inherit;
  21   font-size: 1.8rem;
  22   font-weight: bold;
  23   text-decoration: none;
  24   margin: 0 0 0 1.2rem;
  25   display: inline;
  26 }
  27
  28 .logo {
  29   margin: 0;
  30   text-align: left;
  31 }
  32
  33 .logo a {
  34   float: left;
  35   font-size: 1.8rem;
  36 }
  37
  38 pre {
  39   overflow-x: scroll;
  40 }
  41
  42 footer {
  43   margin-top: 3rem;
  44   padding: 1.2rem 0;
  45   font-size: 1.2rem;
  46   color: #555;
  47   text-align: right;
  48 }
  49
  50 h1 {
  51   font-size: 2.4rem;
  52 }
  53
  54 h2 {
  55   font-size: 2rem;
  56 }
  57
  58 article .header {
  59   font-size: 1.4rem;
  60   font-style: italic;
  61   color: #555;
  62 }
  63
  64 article img {
  65   max-width: 100%;
  66 }
  67
  68 .logo a {
  69   font-weight: bold;
  70   color: #000;
  71   text-decoration: none;
  72 }
  73
  74 /* on mobile prevent stupidly long inline code snippets */
  75 p code {
  76   word-break: break-word;
  77 }
  78
  79 @media (max-width: 319px) {
  80   body {
  81     width: 90%;
  82     margin: 0;
  83     padding: 0 5%;
  84   }
  85 }
  86
  87 @media (min-width: 320px) {
  88   body {
  89     width: 90%;
  90     margin: 0;
  91     padding: 0 5%;
  92   }
  93 }
  94
  95 @media (min-width: 640px) {
  96   body {
  97     width: 60rem;
  98     margin: 0 auto;
  99     padding: 0;
 100   }
 101 }