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; font-family: "Palatino Linotype", Palatino, serif; }
   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; background: #f5f2f0; }
  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 .youtube > iframe { border-radius: 4px; }
  33
  34 aside {
  35     border: 1px solid black;
  36     padding: 0.75em;
  37     margin: -0.5em;
  38     border-radius: 4px;
  39 }
  40 aside.warning { background: #ffecbf; }
  41
  42 /* Layout classes */
  43 .dim { color: #666; }
  44 .row { display: flex; flex-direction: row; }
  45 .col { display: flex; flex-direction: column; }
  46 .hgroup { display: flex; flex-direction: row; }
  47 @media (max-width: 500px) { .hgroup { flex-direction: column; } }
  48 .row.hcenter { justify-content: center; }
  49 .col.hcenter { align-items: center; }
  50 .rigid { flex-shrink: 0; }
  51 .baseline { align-items: baseline; }
  52 .spacer { flex-grow: 1; }
  53 .ls-none { list-style: none; padding: 0; margin: 0; }
  54 .im-icon { background: none; width: 2em; }
  55 .fwrap { flex-wrap: wrap; }
  56 .hov-fade:hover { filter: invert(50%); }
  57 .wide-1, .row > .block-1 { display: inline-block; width: 1em; }
  58 .tall-1, .col > .block-1 { display: inline-block; height: 1em; }
  59
  60 /* Barebones un-highlighted code blocks */
  61 pre > code {
  62     overflow: auto;
  63     width: calc(100% + 8em);
  64     margin: 0 -4em;
  65     display: inline-block;
  66     max-width: 100vw;
  67     font-size: 18px;
  68     box-sizing: border-box;
  69     padding: 1em;
  70     border-radius: 6px;
  71     background: #f5f2f0;
  72 }
  73
  74 @media (max-width: 825px) {
  75    pre > code { margin: 0 -1em; width: calc(100% + 2em); }
  76 }
  77
  78 .animated-decoration-alt { display: none; }
  79 @media (prefers-reduced-motion: reduce) {
  80     img.animated-decoration-alt { display: inline; }
  81     .animated-decoration { display: none; }
  82 }