411 lines
13 KiB
CSS
411 lines
13 KiB
CSS
/* ── Self-hosted fonts ──────────────────────────────────────────────────── */
|
|
|
|
@font-face {
|
|
font-family: 'Press Start 2P';
|
|
src: url('/fonts/PressStart2P.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* ── Modern micro-improvements ─────────────────────────────────────────── */
|
|
|
|
/* Smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Thin, modern scrollbar on WebKit */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(var(--color-neutral-500), 0.5);
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(var(--color-primary-400), 0.7);
|
|
}
|
|
|
|
/* ── Typography ─────────────────────────────────────────────────────────── */
|
|
|
|
/* Tighter, more confident headings */
|
|
h1, h2, h3 {
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* Slightly warmer body text contrast in dark mode */
|
|
.dark .prose {
|
|
color: rgba(var(--color-neutral-200), 0.92);
|
|
}
|
|
|
|
/* ── Cards ──────────────────────────────────────────────────────────────── */
|
|
|
|
/* Lift + glow on card hover */
|
|
article.cursor-pointer,
|
|
.cursor-pointer[class*="backdrop"] {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
article.cursor-pointer:hover,
|
|
.cursor-pointer[class*="backdrop"]:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 12px 32px rgba(var(--color-primary-400), 0.12);
|
|
}
|
|
|
|
/* ── Links ──────────────────────────────────────────────────────────────── */
|
|
|
|
/* Animated underline: grows from left on hover */
|
|
.prose a:not([class]) {
|
|
text-decoration: none;
|
|
background-image: linear-gradient(
|
|
rgba(var(--color-primary-400), 0.9),
|
|
rgba(var(--color-primary-400), 0.9)
|
|
);
|
|
background-size: 0 1.5px;
|
|
background-position: 0 100%;
|
|
background-repeat: no-repeat;
|
|
transition: background-size 0.2s ease;
|
|
}
|
|
.prose a:not([class]):hover {
|
|
background-size: 100% 1.5px;
|
|
}
|
|
|
|
/* ── Header ─────────────────────────────────────────────────────────────── */
|
|
|
|
/* Crisper blur on the fixed-fill-blur header */
|
|
#menu-blur {
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
background: rgba(var(--color-neutral-50), 0.85) !important;
|
|
}
|
|
.dark #menu-blur {
|
|
background: rgba(var(--color-neutral-900), 0.72) !important;
|
|
}
|
|
|
|
/* ── Hero / Background ──────────────────────────────────────────────────── */
|
|
|
|
/* Subtle gradient vignette over hero images */
|
|
.single_hero_background::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent 40%,
|
|
rgba(var(--color-neutral-200), 0.5) 100%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
.dark .single_hero_background::after {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent 40%,
|
|
rgba(var(--color-neutral-900), 0.6) 100%
|
|
);
|
|
}
|
|
|
|
/* ── Focus rings ────────────────────────────────────────────────────────── */
|
|
|
|
/* Modern, rounded focus ring */
|
|
:focus-visible {
|
|
outline: 2px solid rgba(var(--color-primary-400), 0.9);
|
|
outline-offset: 3px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* ── Buttons / Tags ─────────────────────────────────────────────────────── */
|
|
|
|
/* Pill-shaped tags with subtle glow on hover */
|
|
a[href*="/tags/"],
|
|
a[href*="/categories/"] {
|
|
border-radius: 9999px;
|
|
transition: box-shadow 0.2s ease, background 0.2s ease;
|
|
}
|
|
a[href*="/tags/"]:hover,
|
|
a[href*="/categories/"]:hover {
|
|
box-shadow: 0 0 0 3px rgba(var(--color-primary-400), 0.2);
|
|
}
|
|
|
|
/* ── Code blocks ────────────────────────────────────────────────────────── */
|
|
|
|
/* Rounded corners and a border on code blocks */
|
|
.dark .highlight {
|
|
border: 1px solid rgba(var(--color-neutral-700), 1);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Retro-terminal layer ───────────────────────────────────────────────── */
|
|
|
|
/* Monospace headings + neon glow in dark mode */
|
|
.dark .prose h1,
|
|
.dark .prose h2,
|
|
.dark .prose h3 {
|
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
|
|
text-shadow:
|
|
0 0 8px rgba(var(--color-primary-400), 0.55),
|
|
0 0 28px rgba(var(--color-primary-400), 0.2),
|
|
0 0 2px rgba(192, 132, 252, 0.35);
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
/* Scanline texture (dark mode only) */
|
|
.dark body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9998;
|
|
pointer-events: none;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.04) 0px,
|
|
rgba(0, 0, 0, 0.04) 1px,
|
|
transparent 1px,
|
|
transparent 4px
|
|
);
|
|
}
|
|
|
|
/* Terminal window chrome on code blocks (traffic-light dots via radial gradients) */
|
|
.dark .highlight::before {
|
|
content: "";
|
|
display: block;
|
|
height: 28px;
|
|
background-color: rgba(var(--color-neutral-800), 1);
|
|
background-image:
|
|
radial-gradient(circle 5px at 16px 14px, #ff5f56 0%, #ff5f56 100%),
|
|
radial-gradient(circle 5px at 32px 14px, #ffbd2e 0%, #ffbd2e 100%),
|
|
radial-gradient(circle 5px at 48px 14px, #27c93f 0%, #27c93f 100%);
|
|
background-repeat: no-repeat;
|
|
border-bottom: 1px solid rgba(var(--color-neutral-700), 0.8);
|
|
}
|
|
|
|
/* Phosphor glow on hovered prose links in dark mode */
|
|
.dark .prose a:not([class]):hover {
|
|
text-shadow: 0 0 8px rgba(var(--color-primary-400), 0.4);
|
|
}
|
|
|
|
/* Cyan glow on card hover in dark mode */
|
|
.dark article.cursor-pointer:hover,
|
|
.dark .cursor-pointer[class*="backdrop"]:hover {
|
|
box-shadow: 0 12px 40px rgba(var(--color-primary-400), 0.18),
|
|
0 0 0 1px rgba(var(--color-primary-400), 0.1);
|
|
}
|
|
|
|
/* Slide-in "> " prompt before nav items on hover (dark mode) */
|
|
.dark .main-menu a p::before {
|
|
content: "> ";
|
|
display: inline-block;
|
|
max-width: 0;
|
|
overflow: hidden;
|
|
color: rgba(var(--color-primary-400), 0.65);
|
|
font-family: ui-monospace, monospace;
|
|
font-weight: normal;
|
|
transition: max-width 0.15s ease;
|
|
vertical-align: bottom;
|
|
}
|
|
.dark .main-menu a:hover p::before {
|
|
max-width: 1.5em;
|
|
}
|
|
|
|
/* Blinking block cursor keyframe (reusable) */
|
|
@keyframes cursor-blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* ── Pixel font — site title ────────────────────────────────────────────── */
|
|
|
|
/* Navbar site title — only the first nav (space-x-3) holds the site title link;
|
|
the menu items live in the second nav (hidden md:flex) */
|
|
.main-menu .flex-1 nav:first-of-type a {
|
|
font-family: 'Press Start 2P', ui-monospace, monospace !important;
|
|
font-size: 0.6rem !important;
|
|
transform: scaleY(1.4);
|
|
display: inline-block;
|
|
letter-spacing: 0 !important;
|
|
transition: color 0.2s ease, text-shadow 0.2s ease;
|
|
}
|
|
|
|
/* Homepage hero h1 (font-extrabold is set only on the background layout h1) */
|
|
h1.font-extrabold {
|
|
font-family: 'Press Start 2P', ui-monospace, monospace !important;
|
|
letter-spacing: 0 !important;
|
|
transition: color 0.2s ease, text-shadow 0.2s ease;
|
|
}
|
|
|
|
/* Scale down the homepage h1 — pixel fonts read best smaller */
|
|
h1.font-extrabold {
|
|
font-size: clamp(1rem, 2.5vw, 1.6rem) !important;
|
|
line-height: 1.8 !important;
|
|
}
|
|
|
|
/* Purple glow on hover — navbar */
|
|
.main-menu .flex-1 nav:first-of-type a:hover {
|
|
color: #c084fc !important;
|
|
text-shadow:
|
|
0 0 6px rgba(192, 132, 252, 0.9),
|
|
0 0 18px rgba(168, 85, 247, 0.6),
|
|
0 0 40px rgba(139, 92, 246, 0.3);
|
|
}
|
|
|
|
/* Purple glow on hover — homepage h1 */
|
|
h1.font-extrabold:hover {
|
|
color: #c084fc !important;
|
|
text-shadow:
|
|
0 0 8px rgba(192, 132, 252, 0.9),
|
|
0 0 24px rgba(168, 85, 247, 0.6),
|
|
0 0 50px rgba(139, 92, 246, 0.3);
|
|
cursor: default;
|
|
}
|
|
|
|
/* ── Cyberpunk layer ─────────────────────────────────────────────────────── */
|
|
|
|
/* Text selection — neon cyan highlight */
|
|
.dark ::selection {
|
|
background: rgba(34, 211, 238, 0.2);
|
|
color: rgba(var(--color-neutral-50), 1);
|
|
}
|
|
|
|
/* Cyberpunk background: ambient glows + drifting grid (dark mode) */
|
|
@keyframes grid-drift {
|
|
from { background-position: 0 0, 0 0, 0 0, 0 0; }
|
|
to { background-position: 0 0, 0 0, 48px 48px, 48px 48px; }
|
|
}
|
|
|
|
.dark body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
radial-gradient(ellipse 55vw 55vh at 88% 4%, rgba(34, 211, 238, 0.07), transparent),
|
|
radial-gradient(ellipse 45vw 45vh at 8% 96%, rgba(192, 132, 252, 0.06), transparent),
|
|
linear-gradient(rgba(34, 211, 238, 0.018) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(34, 211, 238, 0.018) 1px, transparent 1px);
|
|
background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
|
|
animation: grid-drift 28s linear infinite;
|
|
}
|
|
|
|
/* Neon horizontal rule — cyan-to-magenta gradient */
|
|
.dark .prose hr {
|
|
border: none;
|
|
height: 1px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(34, 211, 238, 0.6) 20%,
|
|
rgba(192, 132, 252, 0.6) 50%,
|
|
rgba(34, 211, 238, 0.6) 80%,
|
|
transparent
|
|
);
|
|
box-shadow: 0 0 10px rgba(34, 211, 238, 0.25);
|
|
margin: 2em 0;
|
|
}
|
|
|
|
/* Glitch keyframes for site title */
|
|
@keyframes neon-glitch {
|
|
0%, 88%, 100% { text-shadow: inherit; }
|
|
89% {
|
|
text-shadow:
|
|
-2px 0 rgba(255, 0, 128, 0.85),
|
|
2px 0 rgba(34, 211, 238, 0.85);
|
|
}
|
|
91% {
|
|
text-shadow:
|
|
2px 0 rgba(255, 0, 128, 0.85),
|
|
-2px 0 rgba(34, 211, 238, 0.85);
|
|
}
|
|
93% { text-shadow: inherit; }
|
|
94% {
|
|
text-shadow:
|
|
-1px 0 rgba(255, 0, 128, 0.6),
|
|
1px 0 rgba(34, 211, 238, 0.6);
|
|
}
|
|
96% { text-shadow: inherit; }
|
|
}
|
|
|
|
/* Apply glitch to pixel-font site title in dark mode */
|
|
.dark .main-menu .flex-1 nav:first-of-type a {
|
|
animation: neon-glitch 9s infinite;
|
|
}
|
|
|
|
/* Neon card border glow — enhanced dual-color on hover */
|
|
.dark article.cursor-pointer:hover,
|
|
.dark .cursor-pointer[class*="backdrop"]:hover {
|
|
box-shadow:
|
|
0 12px 40px rgba(34, 211, 238, 0.22),
|
|
0 0 0 1px rgba(34, 211, 238, 0.18),
|
|
0 0 20px rgba(192, 132, 252, 0.08) inset;
|
|
}
|
|
|
|
/* Neon code-block border */
|
|
.dark .highlight {
|
|
border-color: rgba(34, 211, 238, 0.3);
|
|
box-shadow: 0 0 14px rgba(34, 211, 238, 0.07);
|
|
}
|
|
|
|
/* ── Fairydust rocket ───────────────────────────────────────────────────── */
|
|
|
|
.fairydust-wrapper {
|
|
position: fixed;
|
|
z-index: 9997;
|
|
pointer-events: none;
|
|
width: 40px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.fairydust-wrapper.go-right {
|
|
left: -100px;
|
|
animation: fairydust-fly-right var(--fly-duration, 5s) linear forwards;
|
|
}
|
|
.fairydust-wrapper.go-left {
|
|
right: -100px;
|
|
animation: fairydust-fly-left var(--fly-duration, 5s) linear forwards;
|
|
}
|
|
|
|
/* Comet trail */
|
|
.fairydust-wrapper::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 130px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
}
|
|
.fairydust-wrapper.go-right::after {
|
|
right: 100%;
|
|
background: linear-gradient(to right, transparent, rgba(232, 121, 249, 0.5));
|
|
}
|
|
.fairydust-wrapper.go-left::after {
|
|
left: 100%;
|
|
background: linear-gradient(to left, transparent, rgba(232, 121, 249, 0.5));
|
|
}
|
|
|
|
.fairydust-rocket {
|
|
width: 40px;
|
|
height: 80px;
|
|
animation: fairydust-glow 0.85s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes fairydust-glow {
|
|
from {
|
|
filter:
|
|
drop-shadow(0 0 5px rgba(232, 121, 249, 0.8))
|
|
drop-shadow(0 0 14px rgba(232, 121, 249, 0.4));
|
|
}
|
|
to {
|
|
filter:
|
|
drop-shadow(0 0 10px rgba(232, 121, 249, 1))
|
|
drop-shadow(0 0 26px rgba(168, 85, 247, 0.65));
|
|
}
|
|
}
|
|
|
|
@keyframes fairydust-fly-right {
|
|
from { left: -100px; }
|
|
to { left: calc(100vw + 100px); }
|
|
}
|
|
@keyframes fairydust-fly-left {
|
|
from { right: -100px; }
|
|
to { right: calc(100vw + 100px); }
|
|
}
|