60 lines
3.5 KiB
CSS
60 lines
3.5 KiB
CSS
/* Sansonnet — staging rewrite, history-spine */
|
|
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--paper: #f0ebe1; --paper-2: #ebe5d8;
|
|
--ink: #1a1a1a; --ink-2: #5a4a3a; --rule: #c8bfae;
|
|
--serif: 'EB Garamond', 'Caslon', 'Lora', Georgia, serif;
|
|
}
|
|
html, body { background: var(--paper); color: var(--ink); }
|
|
body { font-family: var(--serif); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; padding: 96px 24px 64px; }
|
|
.sheet { max-width: 600px; margin: 0 auto; }
|
|
.wordmark { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: .005em; margin-bottom: 6px; }
|
|
.wordmark a { color: inherit; text-decoration: none; border: 0; }
|
|
.wordmark-sub { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 64px; }
|
|
h1 { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: .005em; margin-bottom: 28px; }
|
|
p { margin-bottom: 18px; }
|
|
p:last-of-type { margin-bottom: 0; }
|
|
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .15s, color .15s; }
|
|
a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
|
|
.rule { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }
|
|
.ornament { text-align: center; font-size: 18px; color: var(--ink-2); margin: 32px 0; letter-spacing: .4em; }
|
|
.signoff { margin-top: 36px; font-style: italic; color: var(--ink-2); }
|
|
.address-block { font-variant-numeric: oldstyle-nums; letter-spacing: .04em; }
|
|
.address-block .lh { display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
|
|
.list-em { padding-left: 0; list-style: none; }
|
|
.list-em li { position: relative; padding-left: 22px; margin-bottom: 10px; }
|
|
.list-em li::before { content: "—"; position: absolute; left: 0; color: var(--ink-2); }
|
|
.lede { font-variant: small-caps; letter-spacing: .12em; font-weight: 500; color: var(--ink); margin-right: .2em; }
|
|
.year { font-variant-numeric: oldstyle-nums; font-variant: small-caps; letter-spacing: .14em; font-weight: 500; color: var(--ink); margin-right: .35em; }
|
|
.era { margin-bottom: 22px; }
|
|
.era:last-of-type { margin-bottom: 0; }
|
|
.nav-text { margin-top: 64px; font-size: 14px; color: var(--ink-2); }
|
|
.nav-text a { font-size: 14px; }
|
|
.page-footer { margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--rule); text-align: center; }
|
|
.colophon { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); line-height: 1.6; }
|
|
.colophon .sep { margin: 0 10px; opacity: .5; }
|
|
|
|
@media (max-width: 640px) {
|
|
body { padding: 56px 20px 40px; font-size: 17px; line-height: 1.6; }
|
|
.wordmark { font-size: 26px; }
|
|
.wordmark-sub { margin-bottom: 44px; font-size: 10px; }
|
|
h1 { font-size: 22px; margin-bottom: 22px; }
|
|
.ornament { margin: 24px 0; }
|
|
.signoff { margin-top: 28px; }
|
|
.nav-text { margin-top: 48px; font-size: 13px; }
|
|
.nav-text a { font-size: 13px; }
|
|
.page-footer { margin-top: 64px; padding-top: 20px; }
|
|
.colophon { line-height: 1.9; }
|
|
.colophon .sep { margin: 0 6px; }
|
|
.rule { margin: 28px 0; }
|
|
.era { margin-bottom: 18px; }
|
|
}
|
|
|
|
@media (max-width: 380px) {
|
|
body { padding: 44px 16px 32px; font-size: 16px; }
|
|
.wordmark { font-size: 24px; }
|
|
h1 { font-size: 20px; }
|
|
.colophon { font-size: 9px; letter-spacing: .18em; }
|
|
.colophon .sep { margin: 0 4px; }
|
|
}
|