Witch of Git - web/blog/blob - _includes/style.css

   1 /* Basic reset */
   2 * { box-sizing: border-box; }
   3
   4 /* Page structure */
   5 html { font-size: 1.4em; line-height: 1.5; color: #444; }
   6 body { padding: 1em; max-width: 700px; margin: 0 auto; min-height: 100vh; }
   7 header { margin-bottom: 1em; }
   8 footer { margin-top: 1em; }
   9
  10 /* Typography */
  11 h1 { margin: 0; }
  12 h1, h2, h3, h4, h5, h6 { margin-bottom: 0; }
  13 /* Links */
  14 .c-sun { color: #f78123; }
  15 .dec-none { text-decoration: none; }
  16
  17 blockquote {
  18     border-left: solid 10px #bbb;
  19     padding-left: 1em;
  20     margin-left: 1em;
  21     font-style: italic;
  22 }
  23
  24 /* Figures */
  25 /* @TODO: Make this width managing simpler? */
  26 img { max-width: 800px; border-radius: 4px; }
  27 @media (max-width: 825px) { img { max-width: calc(100vw - 1em); } }
  28 figure { margin: 0; }
  29 figcaption > :first-child, aside > :first-child { margin-top: 0; }
  30 figcaption > :last-child, aside > :first-child { margin-bottom: 0; }
  31 figcaption { font-style: italic; }
  32
  33 aside {
  34     border: 1px solid black;
  35     padding: 0.75em;
  36     margin: -0.5em;
  37     border-radius: 4px;
  38 }
  39 aside.warning { background: #ffecbf; }
  40
  41 /* Layout classes */
  42 .dim { color: #666; }
  43 .row { display: flex; flex-direction: row; }
  44 .col { display: flex; flex-direction: column; }
  45 .hgroup { display: flex; flex-direction: row; }
  46 @media (max-width: 500px) { .hgroup { flex-direction: column; } }
  47 .row.hcenter { justify-content: center; }
  48 .col.hcenter { align-items: center; }
  49 .baseline { align-items: baseline; }
  50 .spacer { flex-grow: 1; }
  51 .ls-none { list-style: none; padding: 0; margin: 0; }
  52
  53 /* Barebones un-highlighted code blocks */
  54 pre > code {
  55     overflow: auto;
  56     width: calc(100% + 8em);
  57     margin: 0 -4em;
  58     display: inline-block;
  59     max-width: 100vw;
  60     font-size: 18px;
  61     box-sizing: border-box;
  62     padding: 1em;
  63     border-radius: 6px;
  64     background: #f5f2f0;
  65 }
  66
  67 @media (max-width: calc(700px + 9em)) {
  68    pre > code { margin: 0 -1em; width: calc(100% + 2em); }
  69 }