mirror of
https://github.com/andwati/andwati.com.git
synced 2026-11-09 10:25:12 +00:00
redesign site as "case file" theme
- new paper/ink palette with single red accent, replacing catppuccin - self-hosted IBM Plex Serif (display) + Source Serif 4 (body), drop Outfit - rebuilt homepage masthead, numbered post index, navbar with active states - switch syntax highlighting + utterances to gruvbox, synced via postMessage - remove terminal/404 easter egg chrome, clean up remaining inline styles - fix stray syntax.css link causing a 404
This commit is contained in:
+30
-154
@@ -1,174 +1,50 @@
|
||||
// 404 Terminal Page
|
||||
// Scoped custom properties switch with html.dark
|
||||
|
||||
.term-window {
|
||||
// Dark mode values (default — site defaults to dark)
|
||||
--tw-bg: #0d0d0d;
|
||||
--tw-bar: #1c1c1c;
|
||||
--tw-border: #2a2a2a;
|
||||
--tw-text: #cdd6f4;
|
||||
--tw-prompt: #10b981;
|
||||
--tw-error: #f38ba8;
|
||||
--tw-muted: #6c7086;
|
||||
--tw-link: #89b4fa;
|
||||
--tw-cursor: #10b981;
|
||||
}
|
||||
|
||||
html:not(.dark) .term-window {
|
||||
// Light mode: Catppuccin Latte palette
|
||||
--tw-bg: #eff1f5;
|
||||
--tw-bar: #e6e9ef;
|
||||
--tw-border: #ccd0da;
|
||||
--tw-text: #4c4f69;
|
||||
--tw-prompt: #40a02b;
|
||||
--tw-error: #d20f39;
|
||||
--tw-muted: #7c7f93;
|
||||
--tw-link: #1e66f5;
|
||||
--tw-cursor: #40a02b;
|
||||
}
|
||||
|
||||
// 404 — Document Not Found
|
||||
.notfound-wrap {
|
||||
min-height: 70dvh;
|
||||
min-height: 60dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
.term-window {
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
background: var(--tw-bg);
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--tw-border);
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
font-family: var(--font-mono);
|
||||
font-size: clamp(0.78rem, 1.5vw, 0.9rem);
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.term-titlebar {
|
||||
background: var(--tw-bar);
|
||||
padding: 0.7rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
border-bottom: 1px solid var(--tw-border);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.term-dots {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dot-red {
|
||||
background: #ff5f57;
|
||||
}
|
||||
.dot-yellow {
|
||||
background: #febc2e;
|
||||
}
|
||||
.dot-green {
|
||||
background: #28c840;
|
||||
}
|
||||
}
|
||||
|
||||
.term-titlebar-label {
|
||||
flex: 1;
|
||||
.case-notice {
|
||||
max-width: 480px;
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
color: var(--tw-muted);
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.term-body {
|
||||
padding: 1.5rem;
|
||||
line-height: 1.65;
|
||||
color: var(--tw-text);
|
||||
min-height: 260px;
|
||||
.case-notice-ref {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.term-row {
|
||||
.case-notice-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.case-notice-body {
|
||||
color: var(--text-muted);
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.case-notice-links {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.term-ps1 {
|
||||
color: var(--tw-prompt);
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.term-input {
|
||||
color: var(--tw-text);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.term-out {
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
.term-out-error {
|
||||
color: var(--tw-error);
|
||||
}
|
||||
|
||||
.term-out-muted {
|
||||
color: var(--tw-muted);
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
.term-out-ls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1.5rem;
|
||||
margin-bottom: 0.9rem;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
|
||||
a {
|
||||
color: var(--tw-link);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
|
||||
&::before {
|
||||
content: '→ ';
|
||||
color: var(--tw-prompt);
|
||||
}
|
||||
color: var(--text-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--tw-prompt);
|
||||
text-decoration: underline;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.term-cursor {
|
||||
display: inline-block;
|
||||
width: 0.55em;
|
||||
height: 1.1em;
|
||||
background: var(--tw-cursor);
|
||||
vertical-align: text-bottom;
|
||||
animation: blink-cursor 1s step-end infinite;
|
||||
margin-left: 0.15ch;
|
||||
}
|
||||
|
||||
@keyframes blink-cursor {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+7
-22
@@ -15,7 +15,6 @@
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background-color: var(--accent-color);
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); /* Glowing emerald accent */
|
||||
transition: width 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
@@ -103,7 +102,6 @@
|
||||
background: var(--surface-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-left: 3px solid var(--accent-color);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@@ -138,7 +136,6 @@
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 99px;
|
||||
padding: 0.1em 0.6em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -192,7 +189,6 @@
|
||||
background: var(--surface-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 3rem;
|
||||
|
||||
summary {
|
||||
@@ -251,15 +247,6 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
|
||||
.tag {
|
||||
background: var(--surface-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 99px;
|
||||
font-size: 0.85rem;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
}
|
||||
|
||||
.social-share {
|
||||
@@ -429,7 +416,6 @@
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -492,7 +478,6 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
margin: 2rem 0;
|
||||
@@ -514,7 +499,6 @@
|
||||
.callout {
|
||||
margin: 2rem 0;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid var(--callout-color, var(--border-color));
|
||||
background: var(--surface-color);
|
||||
color: var(--text-color);
|
||||
@@ -564,8 +548,8 @@
|
||||
}
|
||||
|
||||
&.callout-tip {
|
||||
--callout-color: #10b981; // Emerald
|
||||
background: rgba(16, 185, 129, 0.05);
|
||||
--callout-color: #16a34a; // Green
|
||||
background: rgba(22, 163, 74, 0.05);
|
||||
}
|
||||
|
||||
&.callout-danger {
|
||||
@@ -574,13 +558,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
.comments {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
// ──────────────────────────────────────────
|
||||
// Related Posts
|
||||
// ──────────────────────────────────────────
|
||||
.related-posts-section {
|
||||
margin-top: 4rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px dashed var(--border-color);
|
||||
border-top: 1px solid var(--border-color);
|
||||
|
||||
h3 {
|
||||
margin-bottom: 2rem;
|
||||
@@ -605,7 +593,6 @@
|
||||
padding-bottom: 0 !important;
|
||||
background: var(--surface-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem !important;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -614,8 +601,6 @@
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-color);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.item-snippet {
|
||||
|
||||
+139
-6
@@ -8,15 +8,22 @@
|
||||
.post-feed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
margin-top: 2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.post-feed .feed-item {
|
||||
padding: 2rem 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Homepage "View all posts" CTA
|
||||
.view-all-posts {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 3rem auto 0;
|
||||
margin-top: 3rem;
|
||||
max-width: var(--content-width);
|
||||
}
|
||||
|
||||
@@ -26,7 +33,7 @@
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 1.5rem;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: 6px;
|
||||
border-radius: 2px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875rem;
|
||||
color: var(--accent-color);
|
||||
@@ -54,13 +61,133 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Homepage post list (post-card.html) — a numbered index of entries
|
||||
.feed-eyebrow {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
max-width: var(--content-width);
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.post-feed-list {
|
||||
max-width: var(--content-width);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.feed-item.card {
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 2rem 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
|
||||
a {
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .item-title a {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.item-index {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
padding-top: 0.3rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.item-meta-sep {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.item-snippet {
|
||||
color: var(--text-color);
|
||||
opacity: 0.9;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.item-readmore {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
color: var(--accent-color);
|
||||
|
||||
.readmore-arrow {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover .readmore-arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.item-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.item-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.item-date-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.item-date {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
@@ -68,6 +195,12 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.item-reading-time {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.item-title {
|
||||
margin: 0;
|
||||
font-size: clamp(1.5rem, 2vw, 2rem);
|
||||
@@ -112,7 +245,7 @@
|
||||
min-width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
padding: 0 0.5rem;
|
||||
border-radius: 6px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--surface-color);
|
||||
color: var(--text-muted);
|
||||
|
||||
+4
-3
@@ -1,9 +1,10 @@
|
||||
// Footer
|
||||
.site-footer {
|
||||
padding: 3rem 0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 2rem 0 3rem;
|
||||
border-top: 3px solid var(--text-color);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
font-family: var(--font-mono);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
+47
-16
@@ -5,9 +5,7 @@
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background-color: var(--bg-color);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-bottom: 2px solid var(--text-color);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
@@ -92,18 +90,28 @@
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: none !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 0 !important;
|
||||
width: 100%;
|
||||
order: 10; // push below nav-controls
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin-top: 0.5rem;
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
border-top: 1px solid transparent;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
opacity 0.2s ease;
|
||||
|
||||
&.is-open {
|
||||
display: flex !important;
|
||||
padding: 1rem 0;
|
||||
margin-top: 0.5rem;
|
||||
border-top-color: var(--border-color);
|
||||
max-height: 320px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@@ -118,35 +126,58 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Brand reads like a running header on a printed document — quiet,
|
||||
// small, letter-spaced — not competing with the masthead title below it.
|
||||
.brand-text {
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: -0.01em;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.brand-link:hover .brand-text {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
gap: 1.75rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-color);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
background-color: var(--accent-color);
|
||||
transition: var(--transition-smooth);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.nav-item:hover::after {
|
||||
width: 100%;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav-item.is-active {
|
||||
color: var(--accent-color);
|
||||
|
||||
&::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,6 +4,10 @@
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.hero-compact {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
color: var(--text-color);
|
||||
}
|
||||
@@ -12,3 +16,49 @@
|
||||
font-size: clamp(1.1rem, 1.5vw, 1.3rem);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
// Homepage masthead
|
||||
.masthead {
|
||||
padding: 4rem 0 3rem;
|
||||
max-width: var(--content-width);
|
||||
border-bottom: 3px solid var(--text-color);
|
||||
}
|
||||
|
||||
.masthead-kicker {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.masthead-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Colophon-style contact line — quiet, small, middot-separated
|
||||
.masthead-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 0.4rem;
|
||||
margin-top: 2rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
a {
|
||||
color: var(--text-muted);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: '·';
|
||||
margin: 0 0.75rem;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
// Archive & Tags list pages
|
||||
|
||||
.list-page-header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.list-page-title {
|
||||
font-size: clamp(2.5rem, 5vw, 4.5rem);
|
||||
}
|
||||
|
||||
.term-hash {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.archive-list {
|
||||
max-width: 65ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.archive-year {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.archive-year-title {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.archive-items {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.archive-item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.archive-date {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.archive-link {
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
// Tags index
|
||||
.tags-page {
|
||||
max-width: 65ch;
|
||||
margin: 0 auto;
|
||||
padding-top: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tags-page-header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tag-link {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-color);
|
||||
font-weight: 400;
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-count {
|
||||
font-size: 0.7em;
|
||||
color: var(--text-muted);
|
||||
margin-left: 0.15rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
@@ -8,7 +8,7 @@
|
||||
justify-content: center;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
border-radius: 2px;
|
||||
background: var(--bg-color);
|
||||
color: var(--accent-color);
|
||||
border: 1px solid var(--accent-color);
|
||||
@@ -19,7 +19,11 @@
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(1rem);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
|
||||
opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
|
||||
visibility 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
|
||||
box-shadow 0.2s ease-out;
|
||||
|
||||
// Visible state triggered by JS
|
||||
&.visible {
|
||||
@@ -33,7 +37,7 @@
|
||||
background: var(--accent-color);
|
||||
color: var(--bg-color);
|
||||
transform: translateY(-0.25rem);
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); // Emerald glow matching accent
|
||||
box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 20%, transparent);
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
|
||||
+6
-8
@@ -5,9 +5,7 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -34,8 +32,8 @@
|
||||
max-width: 600px;
|
||||
background: var(--bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 12px 32px var(--shadow-color);
|
||||
transform: translateY(-20px) scale(0.98);
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
display: flex;
|
||||
@@ -61,8 +59,8 @@
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1.1rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
|
||||
&::placeholder {
|
||||
@@ -112,7 +110,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
border-radius: 2px;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
+12
-11
@@ -5,9 +5,10 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.01em;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 0.75em;
|
||||
overflow-wrap: break-word;
|
||||
@@ -114,11 +115,11 @@ pre {
|
||||
pre {
|
||||
position: relative;
|
||||
padding: 1.25rem;
|
||||
border-radius: 8px;
|
||||
border-radius: 2px;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
border: 1px solid var(--border-color);
|
||||
background: #1e1e2e;
|
||||
background: #282828; // Gruvbox Dark bg0 (matches [markdown.highlighting] theme)
|
||||
// Scrollbars visible on desktop, hidden on mobile
|
||||
@media (max-width: 640px) {
|
||||
scrollbar-width: none;
|
||||
@@ -138,10 +139,10 @@ pre {
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #cdd6f4;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
background: rgba(235, 219, 178, 0.1);
|
||||
color: #ebdbb2;
|
||||
border: 1px solid rgba(235, 219, 178, 0.2);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
transition:
|
||||
@@ -154,8 +155,8 @@ pre {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #ffffff;
|
||||
background: rgba(235, 219, 178, 0.2);
|
||||
color: #fbf1c7;
|
||||
}
|
||||
|
||||
&.copied {
|
||||
@@ -170,7 +171,7 @@ pre {
|
||||
code {
|
||||
background: var(--surface-color);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
color: var(--accent-color);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
+32
-1
@@ -1,6 +1,37 @@
|
||||
// Tag chip — a small filed label, shared by post-card and post-tags
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background: var(--surface-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 2px;
|
||||
font-size: 0.8rem;
|
||||
font-family: var(--font-mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--text-muted);
|
||||
transition: var(--transition-smooth);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Heavy hairline rule — the site's one recurring structural device
|
||||
// (masthead, between list entries, above case-reference blocks)
|
||||
.rule {
|
||||
border: none;
|
||||
border-top: 3px solid var(--text-color);
|
||||
}
|
||||
|
||||
// Utilities / Interactions
|
||||
.hover-scale {
|
||||
transition: var(--transition-spring);
|
||||
transition: transform 140ms ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
|
||||
+36
-25
@@ -1,35 +1,46 @@
|
||||
// Premium Design Variables
|
||||
// Design Variables — "Case File": a declassified incident-report aesthetic.
|
||||
// One accent only; flat colors + hairline borders, no gradients or glass blur.
|
||||
:root {
|
||||
--bg-color: #f9fafb;
|
||||
--text-color: #1a1a1a;
|
||||
--text-muted: #6b7280;
|
||||
--accent-color: #10b981; // Emerald
|
||||
--accent-hover: #059669; // Emerald darker
|
||||
--surface-color: #ffffff;
|
||||
--border-color: rgba(0, 0, 0, 0.05);
|
||||
--shadow-color: rgba(0, 0, 0, 0.05);
|
||||
--bg-color: #e9e9e2; // paper (cool bone, not warm cream)
|
||||
--surface-color: #dedecf; // slightly recessed paper — cards, code blocks
|
||||
--text-color: #17181c; // ink
|
||||
--text-muted: #68675f; // faded ink
|
||||
--accent-color: #b42318; // classified-stamp red
|
||||
--accent-hover: #8e1b12;
|
||||
--border-color: rgba(23, 24, 28, 0.16);
|
||||
--shadow-color: rgba(23, 24, 28, 0.08);
|
||||
|
||||
--font-sans: 'Outfit', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
--font-sans: 'Source Serif 4', Georgia, serif; // body copy
|
||||
--font-display: 'IBM Plex Serif', Georgia, serif; // headings, masthead
|
||||
--font-mono: 'JetBrains Mono', monospace; // case-reference lines, tags, code
|
||||
|
||||
--transition-spring: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
--transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--transition-smooth:
|
||||
transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
|
||||
--scrollbar-track: #e5e7eb;
|
||||
--scrollbar-thumb: #9ca3af;
|
||||
--scrollbar-thumb-hover: #10b981;
|
||||
--scrollbar-track: #dedecf;
|
||||
--scrollbar-thumb: #b0afa2;
|
||||
--scrollbar-thumb-hover: #b42318;
|
||||
|
||||
// Shared reading column — keeps the masthead rule, eyebrow, and post
|
||||
// list aligned to the same right edge instead of drifting per-component.
|
||||
--content-width: 700px;
|
||||
}
|
||||
|
||||
// Dark Mode Overrides
|
||||
// Dark mode — same document, read at night
|
||||
html.dark {
|
||||
--bg-color: #0a0a0a;
|
||||
--text-color: #f9fafb;
|
||||
--text-muted: #a1a1aa;
|
||||
--surface-color: #141414;
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
--bg-color: #131311;
|
||||
--surface-color: #1b1a17;
|
||||
--text-color: #e9e7de;
|
||||
--text-muted: #8b8a80;
|
||||
--accent-color: #ff5a46;
|
||||
--accent-hover: #ff7c6b;
|
||||
--border-color: rgba(233, 231, 222, 0.14);
|
||||
--shadow-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
--scrollbar-track: #0f0f0f;
|
||||
--scrollbar-thumb: #2a2a2a;
|
||||
--scrollbar-thumb-hover: #10b981;
|
||||
--scrollbar-track: #1b1a17;
|
||||
--scrollbar-thumb: #3a382f;
|
||||
--scrollbar-thumb-hover: #ff5a46;
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
@import 'theme';
|
||||
@import 'hero';
|
||||
@import 'feed';
|
||||
@import 'lists';
|
||||
@import 'article';
|
||||
@import 'footer';
|
||||
@import 'search';
|
||||
|
||||
Reference in New Issue
Block a user