diff --git a/components/Meta.js b/components/Meta.js index 15e23ec..4b42c3b 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -5,6 +5,7 @@ export default () => (
+ { THEMES.map((theme, i) => ( diff --git a/static/type-system.css b/static/type-system.css new file mode 100644 index 0000000..04ed45c --- /dev/null +++ b/static/type-system.css @@ -0,0 +1,89 @@ + +:root { + --h0: 4.5rem; + --h1: 3rem; + --h2: 2.25rem; + --h3: 1.5rem; + --h4: 1.125rem; + --h5: .75rem; + + --lh: calc(4/3); + --mx: 32em; + + --m1: calc(2/3 * 1em); + --m2: calc(4/3 * 1em); + --m3: calc(8/3 * 1em); + --m4: calc(16/3 * 1em); + --x1: .5rem; + --x2: 1rem; + --x3: 2rem; + --x4: 4rem; + --x5: 8rem; + --x6: 16rem; +} + +body { + font-family: -apple-system, sans-serif; + font-size: var(--h4); + line-height: var(--lh); + margin: 2rem; +} + +h1, h2, h3 { + margin-top: var(--m1); + margin-bottom: 0; +} + +h4, h5, h6, +p, dl, ol, ul, blockquote { + margin-top: var(--m2); + margin-bottom: var(--m2); +} + +h1 { font-size: var(--h2) } +h2, h3 { font-size: var(--h3) } +h4 { font-size: var(--h4) } +h5, h6 { font-size: var(--h5) } + +.h0 { font-size: var(--h0) } +.h1 { font-size: var(--h1) } +.h2 { font-size: var(--h2) } +.h3 { font-size: var(--h3) } +.h4 { font-size: var(--h4) } +.h5 { font-size: var(--h5) } +.h6 { font-size: var(--h5) } + +@media screen and (min-width: 40em) { + .xh0 { font-size: var(--h0) } + .xh1 { font-size: var(--h1) } + .xh2 { font-size: var(--h2) } + .xh3 { font-size: var(--h3) } + .xh4 { font-size: var(--h4) } + .xh5 { font-size: var(--h5) } + .xh6 { font-size: var(--h5) } +} + +.lh1 { line-height: 1 } +/* h0, h1, h3 */ +.lh2 { line-height: calc(7/6 * 1em) } +/* For body copy */ +.lh3 { line-height: calc(16/9 * 1em) } + +.mt0 { margin-top: 0 } +.mb0 { margin-bottom: 0 } +.mt1 { margin-top: var(--x1) } +.mb1 { margin-bottom: var(--x1) } +.mt2 { margin-top: var(--x2) } +.mb2 { margin-bottom: var(--x2) } +.mt3 { margin-top: var(--x3) } +.mb3 { margin-bottom: var(--x3) } +.mt4 { margin-top: var(--x4) } +.mb4 { margin-bottom: var(--x4) } +.mt5 { margin-top: var(--x5) } +.mb5 { margin-bottom: var(--x5) } +.mt6 { margin-top: var(--x6) } +.mb6 { margin-bottom: var(--x6) } + +.mx { max-width: var(--mx) } +.bold { font-weight: bold } +