Design pass: visual alignment with the Ghost blog
Fixed-dark theme matching blog.c0smere.net (Source theme + injections): bg #0b0d12, white/64%-white text, accent green #218107 (links lifted to #2fa50f for contrast). Self-hosted JetBrains Mono + Libre Baskerville — the same woff2 files the blog serves. Site header with logo + nav mirroring gh-head; serif-italic quotes; blog-style borderless tables; single dark shiki/mermaid theme; homepage styled as a typographic feed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
+2
-3
@@ -13,8 +13,7 @@ export default defineConfig({
|
|||||||
markdown: {
|
markdown: {
|
||||||
remarkPlugins: [[remarkObsidian, { slugMap }], remarkMath],
|
remarkPlugins: [[remarkObsidian, { slugMap }], remarkMath],
|
||||||
rehypePlugins: [rehypeKatex],
|
rehypePlugins: [rehypeKatex],
|
||||||
shikiConfig: {
|
// single dark theme — the site is fixed-dark to match blog.c0smere.net
|
||||||
themes: { light: 'github-light', dark: 'github-dark' },
|
shikiConfig: { theme: 'github-dark' },
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+411
-163
@@ -22,17 +22,41 @@ const showToc = headings.filter((h) => h.depth <= 3).length >= 2;
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>{title}{isHome ? '' : ' // Wesley Ray'}</title>
|
<title>{title}{isHome ? '' : ' // Wesley Ray'}</title>
|
||||||
|
<meta name="theme-color" content="#0b0d12" />
|
||||||
{description && <meta name="description" content={description} />}
|
{description && <meta name="description" content={description} />}
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/fonts/jetbrains-mono-v13-latin-regular.woff2"
|
||||||
|
as="font"
|
||||||
|
type="font/woff2"
|
||||||
|
crossorigin
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/fonts/jetbrains-mono-v13-latin-700.woff2"
|
||||||
|
as="font"
|
||||||
|
type="font/woff2"
|
||||||
|
crossorigin
|
||||||
|
/>
|
||||||
<script
|
<script
|
||||||
defer
|
defer
|
||||||
data-domain="garden.c0smere.net"
|
data-domain="garden.c0smere.net"
|
||||||
src="https://plausible.io/js/script.js"></script>
|
src="https://plausible.io/js/script.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class={isHome ? 'home' : undefined}>
|
||||||
<div class="layout">
|
<div class="layout">
|
||||||
<div class="content-col">
|
<div class="content-col">
|
||||||
<header>
|
<header>
|
||||||
{!isHome && <nav><a href="/">← home</a></nav>}
|
<div class="site-head">
|
||||||
|
<a class="site-logo" href="/">Wesley Ray</a>
|
||||||
|
<nav class="site-nav">
|
||||||
|
<a href="https://blog.c0smere.net">blog</a>
|
||||||
|
<a href="https://git.c0smere.net/wes">git</a>
|
||||||
|
<a href="https://resume.c0smere.net/raywes88/wesley-ray-default"
|
||||||
|
>resume</a
|
||||||
|
>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
<div id="hq" class="header-quote" hidden>
|
<div id="hq" class="header-quote" hidden>
|
||||||
<span id="hq-text"></span>
|
<span id="hq-text"></span>
|
||||||
<span id="hq-attr" class="hq-attr"></span>
|
<span id="hq-attr" class="hq-attr"></span>
|
||||||
@@ -153,35 +177,94 @@ const showToc = headings.filter((h) => h.depth <= 3).length >= 2;
|
|||||||
pre.textContent = code.textContent ?? '';
|
pre.textContent = code.textContent ?? '';
|
||||||
code.parentElement?.replaceWith(pre);
|
code.parentElement?.replaceWith(pre);
|
||||||
});
|
});
|
||||||
mermaid.initialize({
|
mermaid.initialize({ startOnLoad: false, theme: 'dark' });
|
||||||
startOnLoad: false,
|
|
||||||
theme: matchMedia('(prefers-color-scheme: dark)').matches
|
|
||||||
? 'dark'
|
|
||||||
: 'default',
|
|
||||||
});
|
|
||||||
await mermaid.run();
|
await mermaid.run();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style is:global>
|
<style is:global>
|
||||||
:root {
|
/* Same font files the Ghost blog (Source theme) serves — one property,
|
||||||
--bg: #faf8f8;
|
one set of faces: JetBrains Mono everywhere, Libre Baskerville for
|
||||||
--fg: #2b2b2b;
|
quoted matter. */
|
||||||
--muted: #4e4e4e;
|
@font-face {
|
||||||
--faint: #e5e5e5;
|
font-family: 'JetBrains Mono';
|
||||||
--accent: #284b63;
|
font-style: normal;
|
||||||
--accent2: #84a59d;
|
font-weight: 400;
|
||||||
color-scheme: light dark;
|
font-display: swap;
|
||||||
|
src: url('/fonts/jetbrains-mono-v13-latin-regular.woff2') format('woff2');
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@font-face {
|
||||||
:root {
|
font-family: 'JetBrains Mono';
|
||||||
--bg: #161618;
|
font-style: normal;
|
||||||
--fg: #ebebec;
|
font-weight: 700;
|
||||||
--muted: #d4d4d4;
|
font-display: swap;
|
||||||
--faint: #393639;
|
src: url('/fonts/jetbrains-mono-v13-latin-700.woff2') format('woff2');
|
||||||
--accent: #7b97aa;
|
}
|
||||||
--accent2: #84a59d;
|
@font-face {
|
||||||
}
|
font-family: 'JetBrains Mono';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 800;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('/fonts/jetbrains-mono-v13-latin-800.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'JetBrains Mono';
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('/fonts/jetbrains-mono-v13-latin-italic.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'JetBrains Mono';
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 700;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('/fonts/jetbrains-mono-v13-latin-700italic.woff2')
|
||||||
|
format('woff2');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Libre Baskerville';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('/fonts/libre-baskerville-v14-latin-regular.woff2')
|
||||||
|
format('woff2');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Libre Baskerville';
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('/fonts/libre-baskerville-v14-latin-italic.woff2')
|
||||||
|
format('woff2');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Libre Baskerville';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('/fonts/libre-baskerville-v14-latin-700.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tokens lifted from blog.c0smere.net (Ghost Source theme + code
|
||||||
|
injection): bg #0b0d12, white text, 64%-white secondary, accent
|
||||||
|
#218107. --link is the same green lifted for AA contrast on the
|
||||||
|
dark ground; --accent stays the blog's exact brand green for
|
||||||
|
borders and fills. Fixed dark — the blog has no light mode. */
|
||||||
|
:root {
|
||||||
|
--bg: #0b0d12;
|
||||||
|
--fg: #ffffff;
|
||||||
|
--muted: hsla(0, 0%, 100%, 0.64);
|
||||||
|
--faint: hsla(0, 0%, 100%, 0.16);
|
||||||
|
--hair: hsla(0, 0%, 100%, 0.08);
|
||||||
|
--accent: #218107;
|
||||||
|
--link: #2fa50f;
|
||||||
|
--link-bright: #46c421;
|
||||||
|
--mono:
|
||||||
|
'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas,
|
||||||
|
monospace;
|
||||||
|
--serif: 'Libre Baskerville', Georgia, serif;
|
||||||
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -190,8 +273,11 @@ const showToc = headings.filter((h) => h.depth <= 3).length >= 2;
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
font-family: var(--mono);
|
||||||
line-height: 1.6;
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
::selection {
|
||||||
|
background: rgba(33, 129, 7, 0.45);
|
||||||
}
|
}
|
||||||
.layout {
|
.layout {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -202,7 +288,7 @@ const showToc = headings.filter((h) => h.depth <= 3).length >= 2;
|
|||||||
.sidebar {
|
.sidebar {
|
||||||
margin-top: 2.5rem;
|
margin-top: 2.5rem;
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
border-top: 1px solid var(--faint);
|
border-top: 1px solid var(--hair);
|
||||||
}
|
}
|
||||||
/* TOC only exists as a right column on wide screens */
|
/* TOC only exists as a right column on wide screens */
|
||||||
.toc-col {
|
.toc-col {
|
||||||
@@ -243,17 +329,159 @@ const showToc = headings.filter((h) => h.depth <= 3).length >= 2;
|
|||||||
padding: 1.5rem 0 1.5rem 0.5rem;
|
padding: 1.5rem 0 1.5rem 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---- links ---- */
|
||||||
|
a {
|
||||||
|
color: var(--link);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
|
||||||
|
text-underline-offset: 3px;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: var(--link-bright);
|
||||||
|
text-decoration-color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- site header (mirrors the blog's gh-head) ---- */
|
||||||
|
.site-head {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem 1.5rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
.site-logo {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
color: var(--fg);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.site-logo:hover {
|
||||||
|
color: var(--link-bright);
|
||||||
|
}
|
||||||
|
.site-nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.2rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.site-nav a {
|
||||||
|
color: var(--muted);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.site-nav a:hover {
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
.header-quote {
|
||||||
|
margin-bottom: 1.75rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 1px solid var(--hair);
|
||||||
|
font-family: var(--serif);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.header-quote .hq-attr {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-style: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- headings ---- */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
line-height: 1.3;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
scroll-margin-top: 1rem;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 2.4em;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
h4, h5, h6 {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- sidebar ---- */
|
||||||
|
.sidebar-title {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
.sidebar-title a {
|
||||||
|
color: var(--fg);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.sidebar ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 0.85rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
.sidebar > ul,
|
||||||
|
.sidebar-title + ul {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.sidebar li {
|
||||||
|
margin: 0.15rem 0;
|
||||||
|
}
|
||||||
|
.sidebar a {
|
||||||
|
color: var(--muted);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.sidebar a:hover {
|
||||||
|
color: var(--fg);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.sidebar a[aria-current='page'] {
|
||||||
|
color: var(--link);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.sidebar summary {
|
||||||
|
cursor: pointer;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.sidebar summary::before {
|
||||||
|
content: '▸';
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.9em;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.8em;
|
||||||
|
transition: transform 0.15s;
|
||||||
|
}
|
||||||
|
.sidebar details[open] > summary::before {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
.sidebar summary a {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- table of contents ---- */
|
||||||
.toc-title {
|
.toc-title {
|
||||||
margin: 0 0 0.5rem;
|
margin: 0 0 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
font-size: 0.85rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
.toc ul {
|
.toc ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 0.8rem;
|
font-size: 0.75rem;
|
||||||
border-left: 1px solid var(--faint);
|
border-left: 1px solid var(--hair);
|
||||||
}
|
}
|
||||||
.toc li {
|
.toc li {
|
||||||
margin: 0.2rem 0;
|
margin: 0.2rem 0;
|
||||||
@@ -273,100 +501,111 @@ const showToc = headings.filter((h) => h.depth <= 3).length >= 2;
|
|||||||
padding-left: 2.25rem;
|
padding-left: 2.25rem;
|
||||||
}
|
}
|
||||||
.toc li a:hover {
|
.toc li a:hover {
|
||||||
color: var(--accent);
|
color: var(--fg);
|
||||||
}
|
}
|
||||||
.toc li a.toc-active {
|
.toc li a.toc-active {
|
||||||
color: var(--accent);
|
color: var(--link);
|
||||||
border-left-color: var(--accent);
|
border-left-color: var(--link);
|
||||||
}
|
}
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
scroll-margin-top: 1rem;
|
/* ---- content ---- */
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
.sidebar-title {
|
pre {
|
||||||
margin: 0 0 0.5rem;
|
padding: 1rem 1.1rem;
|
||||||
font-weight: 600;
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--hair);
|
||||||
|
overflow-x: auto;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
line-height: 1.55;
|
||||||
}
|
}
|
||||||
.sidebar-title a {
|
:not(pre) > code {
|
||||||
color: var(--fg);
|
background: var(--hair);
|
||||||
text-decoration: none;
|
padding: 0.1em 0.35em;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.92em;
|
||||||
}
|
}
|
||||||
.sidebar ul {
|
/* tables: transparent with hairline row borders, matching the blog's
|
||||||
list-style: none;
|
table code injection */
|
||||||
margin: 0;
|
table {
|
||||||
padding-left: 0.85rem;
|
border-collapse: collapse;
|
||||||
font-size: 0.85rem;
|
display: block;
|
||||||
}
|
overflow-x: auto;
|
||||||
.sidebar > ul,
|
max-width: 100%;
|
||||||
.sidebar-title + ul {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
.sidebar li {
|
|
||||||
margin: 0.15rem 0;
|
|
||||||
}
|
|
||||||
.sidebar a {
|
|
||||||
color: var(--muted);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.sidebar a:hover {
|
|
||||||
color: var(--accent);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.sidebar a[aria-current='page'] {
|
|
||||||
color: var(--accent);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.sidebar summary {
|
|
||||||
cursor: pointer;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
.sidebar summary::before {
|
|
||||||
content: '▸';
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.9em;
|
|
||||||
color: var(--muted);
|
|
||||||
font-size: 0.8em;
|
|
||||||
transition: transform 0.15s;
|
|
||||||
}
|
|
||||||
.sidebar details[open] > summary::before {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
.sidebar summary a {
|
|
||||||
font-weight: 550;
|
|
||||||
color: var(--fg);
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
h1, h2, h3, h4 {
|
|
||||||
line-height: 1.25;
|
|
||||||
}
|
|
||||||
header nav {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
.header-quote {
|
th, td {
|
||||||
margin-bottom: 1.75rem;
|
border: 0;
|
||||||
padding-bottom: 0.75rem;
|
|
||||||
border-bottom: 1px solid var(--faint);
|
border-bottom: 1px solid var(--faint);
|
||||||
font-size: 0.85rem;
|
padding: 0.5em 0.85em;
|
||||||
font-style: italic;
|
text-align: left;
|
||||||
color: var(--muted);
|
|
||||||
}
|
}
|
||||||
.header-quote .hq-attr {
|
hr {
|
||||||
font-style: normal;
|
border: 0;
|
||||||
white-space: nowrap;
|
|
||||||
margin-left: 0.4rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
margin-top: 3rem;
|
|
||||||
padding-top: 1rem;
|
|
||||||
border-top: 1px solid var(--faint);
|
border-top: 1px solid var(--faint);
|
||||||
font-size: 0.85rem;
|
margin: 2.5rem 0;
|
||||||
|
}
|
||||||
|
.katex-display {
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
/* quoted matter goes serif-italic, like the blog's serif accents */
|
||||||
|
blockquote {
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
padding: 0.1rem 0 0.1rem 1.25rem;
|
||||||
|
border-left: 3px solid var(--accent);
|
||||||
|
font-family: var(--serif);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.8;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
|
/* Obsidian callouts are blockquotes too — keep them mono/upright */
|
||||||
|
.callout {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: var(--fg);
|
||||||
|
border-left: 4px solid var(--accent);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(33, 129, 7, 0.1);
|
||||||
|
padding: 0.1rem 1rem;
|
||||||
|
}
|
||||||
|
.callout-title {
|
||||||
|
color: var(--link);
|
||||||
|
}
|
||||||
|
.callout-warning, .callout-attention, .callout-important {
|
||||||
|
border-left-color: #c9803a;
|
||||||
|
background: rgba(201, 128, 58, 0.1);
|
||||||
|
}
|
||||||
|
.callout-warning .callout-title,
|
||||||
|
.callout-attention .callout-title,
|
||||||
|
.callout-important .callout-title {
|
||||||
|
color: #d89a55;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- footer ---- */
|
||||||
|
footer {
|
||||||
|
margin-top: 4rem;
|
||||||
|
padding-top: 1.25rem;
|
||||||
|
border-top: 1px solid var(--hair);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
footer a {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
footer a:hover {
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
.footer-quotes {
|
.footer-quotes {
|
||||||
|
font-family: var(--serif);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
font-size: 0.85rem;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
.footer-quotes p {
|
.footer-quotes p {
|
||||||
@@ -376,7 +615,7 @@ const showToc = headings.filter((h) => h.depth <= 3).length >= 2;
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
font-family: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', monospace;
|
font-family: var(--mono);
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
@@ -385,9 +624,10 @@ const showToc = headings.filter((h) => h.depth <= 3).length >= 2;
|
|||||||
min-width: 1.3ch;
|
min-width: 1.3ch;
|
||||||
padding: 0.12em 0.08em;
|
padding: 0.12em 0.08em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #1c1c1e;
|
background: #11150e;
|
||||||
color: #f2f2f3;
|
color: #56dd33;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
border: 1px solid var(--hair);
|
||||||
border-bottom: 2px solid #000;
|
border-bottom: 2px solid #000;
|
||||||
}
|
}
|
||||||
.odo-display .odo-sep {
|
.odo-display .odo-sep {
|
||||||
@@ -395,63 +635,71 @@ const showToc = headings.filter((h) => h.depth <= 3).length >= 2;
|
|||||||
}
|
}
|
||||||
.odo-caption {
|
.odo-caption {
|
||||||
margin-top: 0.35rem;
|
margin-top: 0.35rem;
|
||||||
font-size: 0.75rem;
|
font-size: 0.72rem;
|
||||||
}
|
}
|
||||||
img {
|
|
||||||
max-width: 100%;
|
/* ---- homepage: typographic feed, like the blog's index ---- */
|
||||||
height: auto;
|
.home main h1 {
|
||||||
|
font-size: 1.35rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 2.4rem 0 0.75rem;
|
||||||
}
|
}
|
||||||
pre {
|
/* the vault-authored links row at the very top: render as a small
|
||||||
padding: 0.9rem 1rem;
|
uppercase link bar, not a display heading */
|
||||||
border-radius: 6px;
|
.home main > h1:first-child {
|
||||||
overflow-x: auto;
|
margin: 0 0 0.5rem;
|
||||||
font-size: 0.88rem;
|
font-size: 0.8rem;
|
||||||
}
|
font-weight: 400;
|
||||||
:not(pre) > code {
|
letter-spacing: 0.08em;
|
||||||
background: var(--faint);
|
text-transform: uppercase;
|
||||||
padding: 0.1em 0.35em;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
th, td {
|
|
||||||
border: 1px solid var(--faint);
|
|
||||||
padding: 0.35rem 0.6rem;
|
|
||||||
}
|
|
||||||
blockquote {
|
|
||||||
margin: 1rem 0;
|
|
||||||
padding: 0.1rem 1rem;
|
|
||||||
border-left: 3px solid var(--accent2);
|
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
.callout {
|
.home main > h1:first-child a {
|
||||||
border-left-width: 4px;
|
color: var(--muted);
|
||||||
border-radius: 4px;
|
text-decoration: none;
|
||||||
background: color-mix(in srgb, var(--accent2) 8%, transparent);
|
|
||||||
}
|
}
|
||||||
.callout-title {
|
.home main > h1:first-child a:hover {
|
||||||
color: var(--accent);
|
color: var(--link-bright);
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.callout-warning, .callout-attention, .callout-important {
|
.home main h2 {
|
||||||
border-left-color: #c9803a;
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.07em;
|
||||||
|
color: var(--muted);
|
||||||
|
margin: 1.9rem 0 0.4rem;
|
||||||
}
|
}
|
||||||
.callout-warning .callout-title,
|
.home main hr {
|
||||||
.callout-attention .callout-title,
|
margin: 2rem 0;
|
||||||
.callout-important .callout-title {
|
|
||||||
color: #c9803a;
|
|
||||||
}
|
}
|
||||||
/* dark-mode-aware shiki dual themes */
|
.home main > ul {
|
||||||
@media (prefers-color-scheme: dark) {
|
list-style: none;
|
||||||
.astro-code,
|
margin: 0.5rem 0 1.5rem;
|
||||||
.astro-code span {
|
padding: 0;
|
||||||
color: var(--shiki-dark) !important;
|
}
|
||||||
background-color: var(--shiki-dark-bg) !important;
|
.home main > ul > li {
|
||||||
}
|
padding: 0.6rem 0;
|
||||||
|
border-bottom: 1px solid var(--hair);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.home main > ul > li:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
.home main > ul > li > a {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.home main ul ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0.4rem 0 0;
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.home main ul ul li {
|
||||||
|
padding: 0.15rem 0;
|
||||||
|
border: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user