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

   1 /* Basic reset */
   2 * { box-sizing: border-box; }
   3 :root {
   4     --background: ;
   5     --hl-background: #f5f2f0;
   6     --text: #444;
   7     --dim-text: #666;
   8     --highlight: #f78123;
   9 }
  10
  11 /* Page container */
  12 html { font-size: 1.4em; line-height: 1.5; color: var(--text); font-family: "Palatino Linotype", Palatino, serif; }
  13 body { padding: 1rem; max-width: 700px; margin: 0 auto; min-height: 100vh; }
  14 header { margin-bottom: 1rem; }
  15 footer { margin-top: 1rem; }
  16
  17 /* Typography */
  18 h1 { margin: 0; }
  19 h1, h2, h3, h4, h5, h6 { margin-bottom: 0; line-height: 1.2; }
  20 code { font-size: 1.2em; word-spacing: -0.2em; }
  21 p {
  22     /* leaving out because Safari doesn't do hyphens well */
  23     /* text-align: justify; */
  24     /* Firefox's & Chrome's hyphenation is too agressive for no justification,
  25        Safari's is too relaxed for justification enabled. */
  26     /* hyphens: auto; */
  27     /* Currently only supported on Safari. Looks nice tho. */
  28     hanging-punctuation: first allow-end last;
  29 }
  30 /* Links */
  31 .c-sun { color: var(--highlight); }
  32 .dec-none { text-decoration: none; }
  33 @media (min-width: 825px) { .header-anchor { margin-left: -1rem; } }
  34
  35 blockquote {
  36     border-left: solid 10px #bbb;
  37     padding-left: 1rem;
  38     margin-left: 1rem;
  39     font-style: italic;
  40 }
  41
  42 /* Page structure */
  43 article.post header h2 a { color: var(--highlight); }
  44 article.post header .info { font-size: 0.75rem; color: var(--dim-text); }
  45 /* Links in the header don't need color */
  46 article.post header a { color: inherit; }
  47
  48 img.avatar { width: 64px; }
  49 img.avatar.square { border-radius: 8px; }
  50
  51 article.post header { position: relative; }
  52 article.post header img.avatar {
  53     position: absolute;
  54     /* Optical alignment, eyeballed */
  55     top: 4px;
  56     right: calc(100% + 0.5rem);
  57 }
  58
  59 /* Figures */
  60 /* @TODO: Make this width managing simpler? */
  61 img { max-width: 800px; border-radius: 4px; background: #f5f2f0; }
  62 @media (max-width: 825px) { img { max-width: calc(100vw - 1rem); } }
  63 figure { margin: 0; }
  64 figcaption > :first-child, aside > :first-child { margin-top: 0; }
  65 figcaption > :last-child, aside > :first-child { margin-bottom: 0; }
  66 figcaption { font-style: italic; }
  67 .youtube > iframe { border-radius: 4px; }
  68
  69 aside {
  70     border: 1px solid black;
  71     padding: 0.75rem;
  72     margin: -0.5rem;
  73     border-radius: 4px;
  74 }
  75 aside.warning { background: #ffecbf; }
  76
  77 /* Layout classes */
  78 .dim { color: var(--dim-text); }
  79 .row { display: flex; flex-direction: row; }
  80 .col { display: flex; flex-direction: column; }
  81 .hgroup { display: flex; flex-direction: row; }
  82 @media (max-width: 500px) { .hgroup { flex-direction: column; } }
  83 .row.hcenter { justify-content: center; }
  84 .col.hcenter { align-items: center; }
  85 .rigid { flex-shrink: 0; }
  86 .baseline { align-items: baseline; }
  87 .spacer { flex-grow: 1; }
  88 .ls-none { list-style: none; padding: 0; margin: 0; }
  89 .im-icon { background: none; width: 2rem; }
  90 .fwrap { flex-wrap: wrap; }
  91 .hov-fade:hover { filter: invert(50%); }
  92 .wide-1, .row > .block-1 { display: inline-block; width: 1rem; }
  93 .tall-1, .col > .block-1 { display: inline-block; height: 1rem; }
  94
  95 /* Barebones un-highlighted code blocks */
  96 pre > code {
  97     overflow: auto;
  98     width: calc(100% + 8rem);
  99     margin: 0 -4rem;
 100     display: inline-block;
 101     max-width: 100vw;
 102     font-size: 18px;
 103     box-sizing: border-box;
 104     padding: 1rem;
 105     border-radius: 6px;
 106     background: var(--hl-background);
 107 }
 108
 109 @media (max-width: 825px) {
 110    pre > code { margin: 0 -1rem; width: calc(100% + 2rem); }
 111 }
 112
 113 .animated-decoration-alt { display: none; }
 114 @media (prefers-reduced-motion: reduce) {
 115     img.animated-decoration-alt { display: inline; }
 116     .animated-decoration { display: none; }
 117 }