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; line-height: 1.2; }
  13 code { font-size: 1.2em; word-spacing: -0.2em; }
  14 p {
  15     /* leaving out because Safari doesn't do hyphens well */
  16     /* text-align: justify; */
  17     /* Firefox's & Chrome's hyphenation is too agressive for no justification,
  18        Safari's is too relaxed for justification enabled. */
  19     /* hyphens: auto; */
  20     /* Currently only supported on Safari. Looks nice tho. */
  21     hanging-punctuation: first allow-end last;
  22 }
  23 /* Links */
  24 .c-sun { color: #f78123; }
  25 .dec-none { text-decoration: none; }
  26 @media (min-width: 825px) { .header-anchor { margin-left: -1em; } }
  27
  28 blockquote {
  29     border-left: solid 10px #bbb;
  30     padding-left: 1em;
  31     margin-left: 1em;
  32     font-style: italic;
  33 }
  34
  35 /* Figures */
  36 /* @TODO: Make this width managing simpler? */
  37 img { max-width: 800px; border-radius: 4px; background: #f5f2f0; }
  38 @media (max-width: 825px) { img { max-width: calc(100vw - 1em); } }
  39 figure { margin: 0; }
  40 figcaption > :first-child, aside > :first-child { margin-top: 0; }
  41 figcaption > :last-child, aside > :first-child { margin-bottom: 0; }
  42 figcaption { font-style: italic; }
  43 .youtube > iframe { border-radius: 4px; }
  44
  45 aside {
  46     border: 1px solid black;
  47     padding: 0.75em;
  48     margin: -0.5em;
  49     border-radius: 4px;
  50 }
  51 aside.warning { background: #ffecbf; }
  52
  53 /* Layout classes */
  54 .dim { color: #666; }
  55 .row { display: flex; flex-direction: row; }
  56 .col { display: flex; flex-direction: column; }
  57 .hgroup { display: flex; flex-direction: row; }
  58 @media (max-width: 500px) { .hgroup { flex-direction: column; } }
  59 .row.hcenter { justify-content: center; }
  60 .col.hcenter { align-items: center; }
  61 .rigid { flex-shrink: 0; }
  62 .baseline { align-items: baseline; }
  63 .spacer { flex-grow: 1; }
  64 .ls-none { list-style: none; padding: 0; margin: 0; }
  65 .im-icon { background: none; width: 2em; }
  66 .fwrap { flex-wrap: wrap; }
  67 .hov-fade:hover { filter: invert(50%); }
  68 .wide-1, .row > .block-1 { display: inline-block; width: 1em; }
  69 .tall-1, .col > .block-1 { display: inline-block; height: 1em; }
  70
  71 /* Barebones un-highlighted code blocks */
  72 pre > code {
  73     overflow: auto;
  74     width: calc(100% + 8em);
  75     margin: 0 -4em;
  76     display: inline-block;
  77     max-width: 100vw;
  78     font-size: 18px;
  79     box-sizing: border-box;
  80     padding: 1em;
  81     border-radius: 6px;
  82     background: #f5f2f0;
  83 }
  84
  85 @media (max-width: 825px) {
  86    pre > code { margin: 0 -1em; width: calc(100% + 2em); }
  87 }
  88
  89 .animated-decoration-alt { display: none; }
  90 @media (prefers-reduced-motion: reduce) {
  91     img.animated-decoration-alt { display: inline; }
  92     .animated-decoration { display: none; }
  93 }