155 lines
4.2 KiB
CSS
155 lines
4.2 KiB
CSS
|
/* ============================================================
|
||
|
|
STUDIO NOTEBOOK — Adalberto Tolosa
|
||
|
|
Cream paper, black ink, one warm accent. A magazine/editorial
|
||
|
|
frame cut for an artist who keeps one ledger for numbers
|
||
|
|
and another for paint.
|
||
|
|
============================================================ */
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--paper: #f5efe1; /* cream watercolor paper */
|
||
|
|
--paper-dark: #ece2ce;
|
||
|
|
--ink: #1f1b16; /* near-black ink */
|
||
|
|
--ink-soft: #57503f;
|
||
|
|
--accent: #c2542b; /* burnt sienna / sunrise coral */
|
||
|
|
--rule: #d6cbb3; /* hairline brown rule */
|
||
|
|
--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
|
||
|
|
--sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||
|
|
--mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
|
||
|
|
html { background: var(--paper); }
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='240' height='240' fill='transparent' filter='url(%23n)' opacity='0.03'/></svg>");
|
||
|
|
color: var(--ink);
|
||
|
|
font-family: var(--serif);
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 1.62;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- masthead / wordmark ---------- */
|
||
|
|
header {
|
||
|
|
border-bottom: 1px solid var(--rule);
|
||
|
|
padding: 1.4rem 2rem 1.1rem;
|
||
|
|
}
|
||
|
|
.fort-nav a {
|
||
|
|
font-family: var(--sans);
|
||
|
|
font-size: 0.78rem;
|
||
|
|
letter-spacing: 0.14em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--ink-soft);
|
||
|
|
padding-bottom: 0.4rem;
|
||
|
|
}
|
||
|
|
.fort-nav a:hover { color: var(--accent); }
|
||
|
|
.fort-nav a.active { color: var(--ink); border-bottom: 2px solid var(--accent); }
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 2.6rem;
|
||
|
|
line-height: 1.05;
|
||
|
|
font-weight: 600;
|
||
|
|
margin: 0.6rem 0 0.2rem;
|
||
|
|
max-width: 22ch;
|
||
|
|
}
|
||
|
|
header p { margin: 0; font-style: italic; color: var(--ink-soft); }
|
||
|
|
|
||
|
|
/* ---------- main column ---------- */
|
||
|
|
main {
|
||
|
|
max-width: 720px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 2.6rem 1.4rem 4rem;
|
||
|
|
}
|
||
|
|
main.wide { max-width: 960px; }
|
||
|
|
|
||
|
|
p { margin: 1.2em 0; }
|
||
|
|
em { font-style: italic; }
|
||
|
|
|
||
|
|
/* article typography */
|
||
|
|
.kicker {
|
||
|
|
font-family: var(--sans);
|
||
|
|
font-size: 0.72rem;
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--accent);
|
||
|
|
margin: 0 0 1.2rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
article h1 { font-size: 2.9rem; max-width: 18ch; margin-bottom: 0.4rem; }
|
||
|
|
.deck {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
font-style: italic;
|
||
|
|
color: var(--ink-soft);
|
||
|
|
border-left: 3px solid var(--accent);
|
||
|
|
padding-left: 1rem;
|
||
|
|
margin: 0 0 2rem;
|
||
|
|
}
|
||
|
|
article h2 {
|
||
|
|
font-family: var(--sans);
|
||
|
|
font-size: 0.85rem;
|
||
|
|
letter-spacing: 0.12em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
margin: 2.6rem 0 0.5rem;
|
||
|
|
color: var(--ink);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
article h2::after {
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
width: 3rem;
|
||
|
|
height: 2px;
|
||
|
|
background: var(--accent);
|
||
|
|
margin-top: 0.35rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
article img {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
display: block;
|
||
|
|
border: 1px solid var(--rule);
|
||
|
|
filter: sepia(0.12) contrast(1.02);
|
||
|
|
}
|
||
|
|
.caption {
|
||
|
|
font-family: var(--mono);
|
||
|
|
font-size: 0.74rem;
|
||
|
|
color: var(--ink-soft);
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
.caption a { color: var(--accent); }
|
||
|
|
|
||
|
|
article ul, article ol { padding-left: 1.3em; }
|
||
|
|
article li { margin: 0.5em 0; }
|
||
|
|
article li strong { font-family: var(--sans); font-weight: 600; }
|
||
|
|
|
||
|
|
article a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
|
||
|
|
article a:hover { text-decoration-thickness: 2px; }
|
||
|
|
|
||
|
|
/* Fortlets inherit the paper, not the dark default */
|
||
|
|
.fort-citizen {
|
||
|
|
border: 1px solid var(--rule);
|
||
|
|
background: var(--paper-dark);
|
||
|
|
padding: 1rem 1.2rem;
|
||
|
|
font-family: var(--sans);
|
||
|
|
font-size: 0.85rem;
|
||
|
|
}
|
||
|
|
.fort-citizen .fc-name { font-weight: 600; color: var(--ink); }
|
||
|
|
.fort-citizen a { color: var(--accent); }
|
||
|
|
|
||
|
|
/* ---------- footer ---------- */
|
||
|
|
footer {
|
||
|
|
border-top: 1px solid var(--rule);
|
||
|
|
text-align: center;
|
||
|
|
padding: 1.4rem 1rem 2.4rem;
|
||
|
|
font-family: var(--mono);
|
||
|
|
font-size: 0.75rem;
|
||
|
|
color: var(--ink-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* responsive */
|
||
|
|
@media (max-width: 640px) {
|
||
|
|
body { font-size: 17px; }
|
||
|
|
h1 { font-size: 2rem; }
|
||
|
|
article h1 { font-size: 2.1rem; }
|
||
|
|
}
|