183 lines
4 KiB
CSS
183 lines
4 KiB
CSS
/* Self-hosted fonts (no CDN). Latin subsets, same files as asxp.io. */
|
|
@font-face {
|
|
font-family: 'IBM Plex Sans';
|
|
src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'IBM Plex Sans';
|
|
src: url('/fonts/ibm-plex-sans-latin-400-italic.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'IBM Plex Sans';
|
|
src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'IBM Plex Sans';
|
|
src: url('/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'IBM Plex Mono';
|
|
src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* Design tokens — kept in sync with asxp.io's public/style.css (source of truth) */
|
|
:root {
|
|
--bg: #121212;
|
|
--surface: #1A1A1A;
|
|
--surface-alt: #222222;
|
|
--surface-hover: #333333;
|
|
--border-subtle: #1E1E1E;
|
|
--border: #2A2A2A;
|
|
--border-strong: #3A3A3A;
|
|
--text: #AAAAAA;
|
|
--text-bright: #EEEEEE;
|
|
--text-strong: #DDDDDD;
|
|
--text-soft: #CCCCCC;
|
|
--text-link: #BBBBBB;
|
|
--text-dim: #999999;
|
|
--text-dimmer: #888888;
|
|
--text-faint: #777777;
|
|
--text-muted: #666666;
|
|
--text-ghost: #555555;
|
|
--text-hover: #FFFFFF;
|
|
--link-underline: #444444;
|
|
--danger: #C97070;
|
|
--danger-border: #4A1F1F;
|
|
--danger-bg: #2A1414;
|
|
--pending: #C9A86A;
|
|
--pending-border: #4A3E1F;
|
|
--pending-bg: #2A2414;
|
|
--paid: #7AB97A;
|
|
--paid-border: #234A23;
|
|
--paid-bg: #142A14;
|
|
--font-sans: 'IBM Plex Sans', sans-serif;
|
|
--font-mono: 'IBM Plex Mono', monospace;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font-sans);
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
}
|
|
main {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px 80px;
|
|
}
|
|
.site-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 12px;
|
|
margin-bottom: 36px;
|
|
}
|
|
.site-title {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.1rem;
|
|
color: var(--text-bright);
|
|
text-decoration: none;
|
|
}
|
|
.site-header nav a {
|
|
color: var(--text-faint);
|
|
text-decoration: none;
|
|
margin-left: 18px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.site-header nav a:hover,
|
|
.site-title:hover {
|
|
color: var(--text-bright);
|
|
}
|
|
a {
|
|
color: var(--text-soft);
|
|
}
|
|
a:hover {
|
|
color: var(--text-hover);
|
|
}
|
|
h1 {
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
color: var(--text-bright);
|
|
letter-spacing: -0.01em;
|
|
margin: 0 0 4px;
|
|
}
|
|
article h2 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text-strong);
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 6px;
|
|
margin: 32px 0 14px;
|
|
}
|
|
.post-meta {
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
margin: 0 0 28px;
|
|
}
|
|
ul.post-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
ul.post-list li {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: baseline;
|
|
padding: 6px 0;
|
|
}
|
|
ul.post-list time {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.92em;
|
|
background: var(--surface-alt);
|
|
padding: 1px 5px;
|
|
}
|
|
pre {
|
|
background: #1B1B1B;
|
|
padding: 12px;
|
|
font-size: 14px;
|
|
border: 1px solid #020202;
|
|
margin: 14px 0;
|
|
overflow-x: auto;
|
|
}
|
|
pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
blockquote {
|
|
border-left: 3px solid var(--border);
|
|
margin: 14px 0;
|
|
padding: 0 0 0 16px;
|
|
color: var(--text-dimmer);
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
.footer {
|
|
text-align: center;
|
|
color: var(--text-ghost);
|
|
font-size: 0.8rem;
|
|
padding: 20px 0 40px;
|
|
}
|