andwati/andwati.com
1
0
Fork 0
mirror of https://github.com/andwati/andwati.com.git synced 2026-11-11 19:35:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

redesign site as "case file" theme

Browse Source 
- 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:
andwati
2026-07-16 12:28:34 +03:00
parent 57462869ec
commit a51671d7e4
62 changed files with 2116 additions and 2806 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sass/_header.scss
+47 -16
View File
@@ -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);
}
}