mirror of
https://github.com/jaronpate/folio.git
synced 2026-10-18 17:06:56 +00:00
379 lines
7.2 KiB
CSS
379 lines
7.2 KiB
CSS
@import './fonts.css';
|
|
|
|
:root {
|
|
--font: 'Plantin MT Pro', Georgia, serif;
|
|
--font-plain: 'SohneBuch', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
|
|
|
/* paper + ink from the old site; accent/navy sampled from blend.jpeg */
|
|
--bg: #f6f7f9;
|
|
--bg-secondary: #e9ebef;
|
|
--text: #2e3140;
|
|
--muted: #6a6d7a;
|
|
--accent: #c45d52;
|
|
--accent-soft: #e78c88;
|
|
--navy: #2a2c61;
|
|
--hairline: #d8dbe2;
|
|
--code-bg: #f3e4e2;
|
|
--img-matte: #e9ebef;
|
|
|
|
--body-weight: 300;
|
|
--measure: 38rem;
|
|
--note-width: 13rem;
|
|
--note-gap: 2rem;
|
|
--page-pad: 1.25rem;
|
|
--col: min(var(--measure), calc(100vw - var(--page-pad) * 2));
|
|
--cluster: calc(var(--col) + var(--note-gap) + var(--note-width));
|
|
--col-left: max(var(--page-pad), calc((100vw - var(--cluster)) / 2));
|
|
--gap: 1rem;
|
|
--radius: 4px;
|
|
}
|
|
|
|
html.font-plantin {
|
|
--font: 'Plantin MT Pro', Georgia, serif;
|
|
--body-weight: 300;
|
|
}
|
|
|
|
html.font-alegreya {
|
|
--font: 'Alegreya', Georgia, serif;
|
|
--body-weight: 400;
|
|
}
|
|
|
|
html.font-redaction {
|
|
--font: 'Redaction', Georgia, serif;
|
|
--body-weight: 400;
|
|
}
|
|
|
|
html.font-redaction-35 {
|
|
--font: 'Redaction 35', Georgia, serif;
|
|
--body-weight: 400;
|
|
}
|
|
|
|
html.font-sohne {
|
|
--font: 'SohneBuch', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--body-weight: 400;
|
|
}
|
|
|
|
html.font-space {
|
|
--font: 'Space Mono', ui-monospace, Menlo, monospace;
|
|
--body-weight: 400;
|
|
}
|
|
|
|
html.font-georgia {
|
|
--font: Georgia, 'Times New Roman', Times, serif;
|
|
--body-weight: 400;
|
|
}
|
|
|
|
html.font-palatino {
|
|
--font: Palatino, 'Palatino Linotype', 'Book Antiqua', serif;
|
|
--body-weight: 400;
|
|
}
|
|
|
|
html.font-iowan {
|
|
--font: 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
|
|
--body-weight: 400;
|
|
}
|
|
|
|
html.font-system {
|
|
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
--body-weight: 400;
|
|
}
|
|
|
|
html.font-courier {
|
|
--font: 'Courier New', Courier, ui-monospace, monospace;
|
|
--body-weight: 400;
|
|
}
|
|
|
|
.dark-mode,
|
|
html.theme-navy,
|
|
html.theme-dusk,
|
|
html.theme-midnight,
|
|
html.theme-indigo,
|
|
html.theme-storm,
|
|
html.theme-slate,
|
|
html.theme-ink,
|
|
html.theme-pine,
|
|
html.theme-wine,
|
|
html.theme-cocoa {
|
|
--text: #fbfbf7;
|
|
--muted: #9aa4b8;
|
|
--accent: #e78c88;
|
|
--accent-soft: #c45d52;
|
|
--navy: #3c48a8;
|
|
}
|
|
|
|
html.theme-paper {
|
|
--bg: #f6f7f9;
|
|
--bg-secondary: #e9ebef;
|
|
--text: #2e3140;
|
|
--muted: #6a6d7a;
|
|
--accent: #c45d52;
|
|
--accent-soft: #e78c88;
|
|
--navy: #2a2c61;
|
|
--hairline: #d8dbe2;
|
|
--code-bg: #f3e4e2;
|
|
--img-matte: #e9ebef;
|
|
}
|
|
|
|
html.theme-navy {
|
|
--bg: #12192c;
|
|
--bg-secondary: #1a2238;
|
|
--hairline: #2a334c;
|
|
--code-bg: #221e34;
|
|
--img-matte: #1a2238;
|
|
}
|
|
|
|
html.theme-dusk {
|
|
--bg: #1a2236;
|
|
--bg-secondary: #252d44;
|
|
--hairline: #343e58;
|
|
--code-bg: #2c2840;
|
|
--img-matte: #252d44;
|
|
}
|
|
|
|
html.theme-midnight {
|
|
--bg: #0e1424;
|
|
--bg-secondary: #161d30;
|
|
--hairline: #242c42;
|
|
--code-bg: #1c1a2c;
|
|
--img-matte: #161d30;
|
|
}
|
|
|
|
html.theme-indigo {
|
|
--bg: #16142a;
|
|
--bg-secondary: #1f1c38;
|
|
--hairline: #2e2a4a;
|
|
--code-bg: #241e38;
|
|
--img-matte: #1f1c38;
|
|
}
|
|
|
|
html.theme-storm {
|
|
--bg: #1c2438;
|
|
--bg-secondary: #283044;
|
|
--hairline: #3a4458;
|
|
--code-bg: #2c2840;
|
|
--img-matte: #283044;
|
|
}
|
|
|
|
html.theme-slate {
|
|
--bg: #1e212b;
|
|
--bg-secondary: #2a2d3a;
|
|
--hairline: #3a3e4c;
|
|
--code-bg: #322833;
|
|
--img-matte: #2a2d3a;
|
|
}
|
|
|
|
html.theme-ink {
|
|
--bg: #0c0c0c;
|
|
--bg-secondary: #1c1c1c;
|
|
--hairline: #2a2a2a;
|
|
--code-bg: #221c20;
|
|
--img-matte: #1c1c1c;
|
|
}
|
|
|
|
html.theme-pine {
|
|
--bg: #121c22;
|
|
--bg-secondary: #1a262c;
|
|
--hairline: #2a3840;
|
|
--code-bg: #1c2428;
|
|
--img-matte: #1a262c;
|
|
}
|
|
|
|
html.theme-wine {
|
|
--bg: #1a1520;
|
|
--bg-secondary: #261c28;
|
|
--hairline: #3a2c38;
|
|
--code-bg: #2a1e28;
|
|
--img-matte: #261c28;
|
|
}
|
|
|
|
html.theme-cocoa {
|
|
--bg: #1c1814;
|
|
--bg-secondary: #2a241c;
|
|
--hairline: #3c3428;
|
|
--code-bg: #2c241c;
|
|
--img-matte: #2a241c;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
overflow-x: clip;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font);
|
|
font-size: 16px;
|
|
line-height: 1.65;
|
|
font-weight: var(--body-weight);
|
|
}
|
|
|
|
strong,
|
|
b {
|
|
font-weight: 700;
|
|
}
|
|
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
opacity: 0.05;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
mix-blend-mode: multiply;
|
|
}
|
|
|
|
html:not(.theme-paper) body::after,
|
|
.dark-mode body::after {
|
|
mix-blend-mode: screen;
|
|
opacity: 0.04;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
article {
|
|
position: relative;
|
|
width: var(--col);
|
|
margin-left: var(--col-left);
|
|
margin-right: auto;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
article h2,
|
|
article h3 {
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
color: var(--muted);
|
|
font-size: 1rem;
|
|
margin: 2.25rem 0 0.75rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
article > h3:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
article p {
|
|
margin: 0 0 1em;
|
|
}
|
|
|
|
article ul,
|
|
article ol {
|
|
margin: 0 0 1em;
|
|
padding-left: 1.2em;
|
|
}
|
|
|
|
article li {
|
|
margin: 0 0 0.35em;
|
|
}
|
|
|
|
article li p {
|
|
margin: 0;
|
|
}
|
|
|
|
article hr {
|
|
margin: 2.5rem 0;
|
|
border: none;
|
|
border-top: 1px solid var(--hairline);
|
|
}
|
|
|
|
article blockquote {
|
|
--hand-w: 2.35rem;
|
|
--hand-h: calc(var(--hand-w) * 44 / 100);
|
|
|
|
position: relative;
|
|
margin: 1.5rem 0;
|
|
padding: 0.15rem 0 0.15rem 3.15rem;
|
|
border: 0;
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: 1.08em;
|
|
line-height: 1.55;
|
|
color: var(--text);
|
|
}
|
|
|
|
article blockquote p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
article blockquote::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0.35em;
|
|
left: 0;
|
|
width: var(--hand-w);
|
|
height: var(--hand-h);
|
|
background: url('~/assets/images/L.png') center / contain no-repeat;
|
|
pointer-events: none;
|
|
}
|
|
|
|
html:not(.theme-paper) article blockquote::before,
|
|
.dark-mode article blockquote::before {
|
|
filter: invert(1);
|
|
}
|
|
|
|
article img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: var(--radius);
|
|
background: var(--img-matte);
|
|
}
|
|
|
|
article p:has(> img) {
|
|
margin: 1.25rem 0;
|
|
}
|
|
|
|
article .article-body > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.86em;
|
|
background: var(--code-bg);
|
|
padding: 0.12em 0.35em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
pre {
|
|
margin: 0 0 1em;
|
|
padding: 0.9rem 1rem;
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius);
|
|
overflow-x: auto;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
pre code {
|
|
padding: 0;
|
|
background: none;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
body {
|
|
font-size: 17px;
|
|
}
|
|
}
|