santhoshj/astro-website
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Theming done
Some checks failed
ci / site (push) Has been cancelled
Details
publish-image / publish (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Santhosh Janardhanan
2026-02-10 20:10:06 -05:00
parent 6cb4d55241
commit 70710239c7
19 changed files with 1260 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

380
site/public/styles/global.css
View File

@@ -9,6 +9,85 @@
--accent: #ffcd4a;
--accent2: #5ee4ff;
--focus: rgba(94, 228, 255, 0.95);
--stroke-weak: rgba(255, 255, 255, 0.08);
--stroke-mid: rgba(255, 255, 255, 0.12);
--stroke-strong: rgba(255, 255, 255, 0.18);
--layer-1: rgba(255, 255, 255, 0.04);
--layer-2: rgba(255, 255, 255, 0.06);
--layer-3: rgba(255, 255, 255, 0.08);
--surface-0: rgba(10, 14, 28, 0.7);
--surface-1: rgba(10, 14, 28, 0.92);
--glow-a: rgba(94, 228, 255, 0.22);
--glow-b: rgba(255, 205, 74, 0.18);
--glow-c: rgba(140, 88, 255, 0.14);
--theme-notch-top: 84px;
}
html {
color-scheme: dark;
}
html[data-theme="light"] {
color-scheme: light;
--bg0: #f7f9fc;
--bg1: #e9eef6;
--fg: #0b1224;
--muted: rgba(11, 18, 36, 0.7);
--card: rgba(0, 0, 0, 0.03);
--card2: rgba(0, 0, 0, 0.05);
--stroke: rgba(0, 0, 0, 0.14);
--accent: #b45309;
--accent2: #0ea5b7;
--focus: rgba(14, 165, 183, 0.85);
--stroke-weak: rgba(0, 0, 0, 0.08);
--stroke-mid: rgba(0, 0, 0, 0.12);
--stroke-strong: rgba(0, 0, 0, 0.18);
--layer-1: rgba(0, 0, 0, 0.03);
--layer-2: rgba(0, 0, 0, 0.045);
--layer-3: rgba(0, 0, 0, 0.06);
--surface-0: rgba(255, 255, 255, 0.78);
--surface-1: rgba(255, 255, 255, 0.92);
--glow-a: rgba(14, 165, 183, 0.18);
--glow-b: rgba(180, 83, 9, 0.16);
--glow-c: rgba(37, 99, 235, 0.12);
}
html[data-theme="high-contrast"] {
color-scheme: dark;
--bg0: #000000;
--bg1: #000000;
--fg: #ffffff;
--muted: rgba(255, 255, 255, 0.92);
--card: rgba(0, 0, 0, 0.85);
--card2: rgba(0, 0, 0, 0.92);
--stroke: rgba(255, 255, 255, 0.85);
--accent: #ffcd4a;
--accent2: #5ee4ff;
--focus: rgba(255, 255, 255, 0.95);
--stroke-weak: rgba(255, 255, 255, 0.55);
--stroke-mid: rgba(255, 255, 255, 0.75);
--stroke-strong: rgba(255, 255, 255, 0.9);
--layer-1: rgba(255, 255, 255, 0.08);
--layer-2: rgba(255, 255, 255, 0.12);
--layer-3: rgba(255, 255, 255, 0.16);
--surface-0: rgba(0, 0, 0, 0.9);
--surface-1: rgba(0, 0, 0, 0.96);
--glow-a: transparent;
--glow-b: transparent;
--glow-c: transparent;
}
* {
@@ -48,9 +127,9 @@ body::before {
z-index: -1;
pointer-events: none;
background:
radial-gradient(1200px 800px at 10% 10%, rgba(94, 228, 255, 0.22), transparent 60%),
radial-gradient(1100px 800px at 90% 20%, rgba(255, 205, 74, 0.18), transparent 58%),
radial-gradient(1200px 900px at 30% 90%, rgba(140, 88, 255, 0.14), transparent 62%);
radial-gradient(1200px 800px at 10% 10%, var(--glow-a), transparent 60%),
radial-gradient(1100px 800px at 90% 20%, var(--glow-b), transparent 58%),
radial-gradient(1200px 900px at 30% 90%, var(--glow-c), transparent 62%);
}
a {
@@ -75,8 +154,8 @@ textarea:focus-visible {
z-index: 999;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(10, 14, 28, 0.92);
border: 1px solid var(--stroke-strong);
background: var(--surface-1);
color: var(--fg);
font-weight: 800;
transform: translateY(-220%);
@@ -98,8 +177,8 @@ textarea:focus-visible {
top: 0;
z-index: 10;
backdrop-filter: blur(10px);
background: rgba(10, 14, 28, 0.7);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: var(--surface-0);
border-bottom: 1px solid var(--stroke-weak);
padding: 14px 24px;
display: flex;
align-items: center;
@@ -135,8 +214,8 @@ textarea:focus-visible {
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--stroke-mid);
background: var(--layer-1);
color: var(--fg);
}
@@ -155,12 +234,12 @@ textarea:focus-visible {
right: 0;
height: 2px;
border-radius: 999px;
background: rgba(242, 244, 255, 0.92);
background: color-mix(in srgb, var(--fg) 92%, transparent);
}
.nav-toggle-icon::before {
top: 0;
box-shadow: 0 5px 0 rgba(242, 244, 255, 0.92);
box-shadow: 0 5px 0 color-mix(in srgb, var(--fg) 92%, transparent);
}
.nav-toggle-icon::after {
@@ -186,11 +265,11 @@ textarea:focus-visible {
flex-direction: column;
gap: 6px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(10, 14, 28, 0.92);
border: 1px solid var(--stroke-mid);
background: var(--surface-1);
box-shadow:
0 18px 60px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
0 0 0 1px color-mix(in srgb, var(--stroke-weak) 60%, transparent) inset;
transform-origin: top right;
transition:
opacity 160ms ease,
@@ -219,11 +298,224 @@ textarea:focus-visible {
.nav a {
padding: 12px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--layer-1);
border: 1px solid var(--stroke-weak);
}
}
.theme-notch {
position: fixed;
top: var(--theme-notch-top);
right: max(8px, env(safe-area-inset-right));
z-index: 12;
display: flex;
align-items: center;
gap: 10px;
pointer-events: none;
}
.theme-notch > * {
pointer-events: auto;
}
.theme-notch-handle {
height: 46px;
width: 60px;
border-radius: 16px 0 0 16px;
border: 1px solid var(--stroke-mid);
border-right: 0;
background: linear-gradient(180deg, var(--layer-3), var(--layer-1));
color: var(--fg);
cursor: pointer;
backdrop-filter: blur(10px);
box-shadow:
0 14px 42px rgba(0, 0, 0, 0.28),
0 0 0 1px color-mix(in srgb, var(--stroke-weak) 60%, transparent) inset;
transition:
transform 160ms ease,
box-shadow 160ms ease,
background 160ms ease;
}
.theme-notch-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-weight: 900;
letter-spacing: -0.02em;
font-size: 13px;
line-height: 1;
}
.theme-notch-panel {
position: absolute;
right: 60px;
top: 0;
display: grid;
gap: 6px;
padding: 12px;
border-radius: 16px;
border: 1px solid var(--stroke-mid);
background: var(--surface-1);
box-shadow:
0 18px 60px rgba(0, 0, 0, 0.32),
0 0 0 1px color-mix(in srgb, var(--stroke-weak) 60%, transparent) inset;
opacity: 0;
transform: translateX(10px) scale(0.98);
visibility: hidden;
pointer-events: none;
transition:
opacity 160ms ease,
transform 160ms ease,
visibility 0s linear 160ms;
}
.theme-notch:hover .theme-notch-panel,
.theme-notch[data-open="true"] .theme-notch-panel,
.theme-notch:focus-within .theme-notch-panel {
opacity: 1;
transform: translateX(0) scale(1);
visibility: visible;
pointer-events: auto;
transition:
opacity 160ms ease,
transform 160ms ease,
visibility 0s;
}
.theme-notch:hover .theme-notch-handle,
.theme-notch:focus-within .theme-notch-handle,
.theme-notch[data-open="true"] .theme-notch-handle {
transform: translateX(-4px);
}
.theme-notch-option {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: 160px;
min-height: 40px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--stroke-weak);
background: var(--layer-1);
color: var(--fg);
cursor: pointer;
font-weight: 800;
font-size: 13px;
line-height: 1.1;
letter-spacing: -0.01em;
transition:
transform 140ms ease,
background 140ms ease,
border-color 140ms ease;
}
.theme-notch-option:hover {
transform: translateY(-1px);
background: var(--layer-2);
border-color: var(--stroke-mid);
}
.theme-notch-dot {
width: 9px;
height: 9px;
border-radius: 999px;
border: 2px solid var(--stroke-mid);
background: transparent;
flex: 0 0 auto;
}
.theme-notch-option[aria-checked="true"] {
border-color: color-mix(in srgb, var(--accent2) 50%, var(--stroke-mid));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 18%, transparent);
}
.theme-notch-option[aria-checked="true"] .theme-notch-dot {
border-color: var(--accent2);
background: var(--accent2);
}
@media (max-width: 760px) {
.theme-notch {
right: max(10px, env(safe-area-inset-right));
}
.theme-notch-panel {
right: 60px;
width: min(80vw, 220px);
}
.theme-notch-option {
width: 100%;
}
}
@media (forced-colors: active) {
body {
background: Canvas;
color: CanvasText;
}
body::before {
display: none;
}
.site-header,
.nav,
.card,
.hero,
.theme-notch-panel,
.theme-notch-handle,
.theme-notch-option {
background: Canvas;
color: CanvasText;
border-color: CanvasText;
box-shadow: none;
}
.theme-notch-option[aria-checked="true"] {
outline: 2px solid Highlight;
outline-offset: 2px;
box-shadow: none;
}
.theme-notch-dot {
border-color: CanvasText;
}
}
html[data-theme-transition="on"] body {
transition:
background 220ms ease,
color 220ms ease;
}
html[data-theme-transition="on"] body::before {
transition: opacity 220ms ease;
}
html[data-theme-transition="on"] .site-header,
html[data-theme-transition="on"] .nav-toggle,
html[data-theme-transition="on"] .nav,
html[data-theme-transition="on"] .card,
html[data-theme-transition="on"] .cta,
html[data-theme-transition="on"] .subnav a,
html[data-theme-transition="on"] .pill,
html[data-theme-transition="on"] dialog,
html[data-theme-transition="on"] .theme-notch-panel,
html[data-theme-transition="on"] .theme-notch-handle,
html[data-theme-transition="on"] .theme-notch-option {
transition:
background-color 220ms ease,
color 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
@@ -242,15 +534,15 @@ textarea:focus-visible {
flex-wrap: wrap;
margin: 18px 0 8px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--stroke-weak);
color: var(--muted);
}
.subnav a {
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--stroke-mid);
background: var(--layer-1);
font-weight: 700;
font-size: 13px;
}
@@ -271,7 +563,7 @@ textarea:focus-visible {
.prose {
line-height: 1.75;
color: rgba(242, 244, 255, 0.9);
color: color-mix(in srgb, var(--fg) 90%, transparent);
}
.prose a {
@@ -282,11 +574,11 @@ textarea:focus-visible {
max-width: 100%;
height: auto;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--stroke-mid);
}
.site-footer {
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid var(--stroke-weak);
padding: 20px 24px;
text-align: center;
}
@@ -302,7 +594,7 @@ textarea:focus-visible {
align-items: start;
padding: 28px;
border: 1px solid var(--stroke);
background: rgba(255, 255, 255, 0.04);
background: var(--layer-1);
border-radius: 18px;
}
@@ -334,7 +626,7 @@ textarea:focus-visible {
padding: 10px 14px;
border-radius: 999px;
border: 1px solid var(--stroke);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
background: linear-gradient(180deg, var(--layer-3), color-mix(in srgb, var(--layer-1) 75%, transparent));
font-weight: 800;
letter-spacing: -0.01em;
}
@@ -378,8 +670,8 @@ textarea:focus-visible {
flex-direction: column;
height: 100%;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--stroke-mid);
background: var(--card);
overflow: hidden;
transition:
transform 120ms ease,
@@ -401,13 +693,13 @@ button.card {
.card:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.06);
background: var(--card2);
}
.card-media .img-shimmer-wrap {
width: 100%;
height: 180px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--stroke-weak);
}
.card-media img {
@@ -415,14 +707,14 @@ button.card {
height: 180px;
object-fit: cover;
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--stroke-weak);
}
.card-placeholder {
width: 100%;
height: 180px;
background: rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: var(--layer-2);
border-bottom: 1px solid var(--stroke-weak);
}
/* --- Image shimmer / lazy-load placeholder --- */
@@ -439,7 +731,7 @@ button.card {
.img-shimmer-wrap {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.08);
background: var(--layer-2);
}
.img-shimmer-wrap::before {
@@ -450,9 +742,9 @@ button.card {
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 35%,
rgba(255, 255, 255, 0.22) 50%,
rgba(255, 255, 255, 0.12) 65%,
color-mix(in srgb, var(--fg) 10%, transparent) 35%,
color-mix(in srgb, var(--fg) 18%, transparent) 50%,
color-mix(in srgb, var(--fg) 10%, transparent) 65%,
transparent 100%
);
animation: shimmer 1.6s ease-in-out infinite;
@@ -492,7 +784,11 @@ button.card {
.card-content {
flex: 1;
padding: 12px 12px 12px;
background: linear-gradient(180deg, rgba(15, 27, 56, 0.75), rgba(11, 16, 32, 0.32));
background: linear-gradient(
180deg,
color-mix(in srgb, var(--surface-1) 94%, transparent),
color-mix(in srgb, var(--surface-1) 68%, transparent)
);
}
.card-title {
@@ -516,8 +812,8 @@ button.card {
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(11, 16, 32, 0.45);
border-top: 1px solid var(--stroke-weak);
background: color-mix(in srgb, var(--surface-1) 78%, transparent);
font-size: 12px;
}
@@ -531,8 +827,8 @@ button.card {
font-weight: 800;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--stroke-mid);
background: var(--layer-1);
}
.pill-youtube {
@@ -554,9 +850,9 @@ button.card {
.empty {
padding: 16px;
border-radius: 14px;
border: 1px dashed rgba(255, 255, 255, 0.18);
border: 1px dashed var(--stroke-strong);
color: var(--muted);
background: rgba(255, 255, 255, 0.03);
background: var(--layer-1);
}
.instagram-media {

204
site/src/layouts/BaseLayout.astro
View File

@@ -50,6 +50,42 @@ const canonicalUrl = `${siteUrl}${canonicalPath.startsWith("/") ? canonicalPath
<link rel="stylesheet" href="/styles/global.css" />
<script is:inline>
(() => {
const THEME_KEY = "site.theme";
const validate = (v) => (v === "dark" || v === "light" || v === "high-contrast" ? v : null);
const readStored = () => {
try {
return validate(window.localStorage.getItem(THEME_KEY));
} catch {
return null;
}
};
const forcedColors = () => {
try {
return window.matchMedia && window.matchMedia("(forced-colors: active)").matches;
} catch {
return false;
}
};
const prefersLight = () => {
try {
return window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches;
} catch {
return false;
}
};
const stored = readStored();
const theme = stored || (forcedColors() ? "high-contrast" : prefersLight() ? "light" : "dark");
document.documentElement.dataset.theme = theme;
})();
</script>
{
cfg.umami ? (
<script async defer data-website-id={cfg.umami.websiteId} src={cfg.umami.scriptUrl} />
@@ -133,6 +169,44 @@ const canonicalUrl = `${siteUrl}${canonicalPath.startsWith("/") ? canonicalPath
</nav>
</header>
<aside class="theme-notch" aria-label="Theme" data-theme-notch data-open="false">
<div
class="theme-notch-panel"
id="theme-notch-panel"
role="radiogroup"
aria-label="Theme selector"
>
<button type="button" class="theme-notch-option" data-theme-option="dark" role="radio" aria-checked="false">
<span class="theme-notch-dot" aria-hidden="true"></span>
<span class="theme-notch-text">Dark</span>
</button>
<button type="button" class="theme-notch-option" data-theme-option="light" role="radio" aria-checked="false">
<span class="theme-notch-dot" aria-hidden="true"></span>
<span class="theme-notch-text">Light</span>
</button>
<button
type="button"
class="theme-notch-option"
data-theme-option="high-contrast"
role="radio"
aria-checked="false"
>
<span class="theme-notch-dot" aria-hidden="true"></span>
<span class="theme-notch-text">Contrast</span>
</button>
</div>
<button
type="button"
class="theme-notch-handle"
aria-label="Theme"
aria-controls="theme-notch-panel"
aria-expanded="false"
data-theme-notch-handle
>
<span class="theme-notch-glyph" aria-hidden="true">Theme</span>
</button>
</aside>
<main class="container" id="main-content">
<slot />
</main>
@@ -208,6 +282,136 @@ const canonicalUrl = `${siteUrl}${canonicalPath.startsWith("/") ? canonicalPath
})();
</script>
<script is:inline>
(() => {
const THEME_KEY = "site.theme";
const validate = (v) => (v === "dark" || v === "light" || v === "high-contrast" ? v : null);
const setTheme = (next, opts) => {
const theme = validate(next);
if (!theme) return;
if (opts && opts.withTransition) {
document.documentElement.dataset.themeTransition = "on";
}
document.documentElement.dataset.theme = theme;
try {
window.localStorage.setItem(THEME_KEY, theme);
} catch {
// ignore
}
if (opts && opts.withTransition) {
window.setTimeout(() => {
delete document.documentElement.dataset.themeTransition;
}, 260);
}
};
const notch = document.querySelector("[data-theme-notch]");
const handle = document.querySelector("[data-theme-notch-handle]");
const syncRadios = (theme) => {
const options = document.querySelectorAll(".theme-notch-option[data-theme-option]");
for (let i = 0; i < options.length; i++) {
const el = options[i];
const v = el.getAttribute("data-theme-option");
el.setAttribute("aria-checked", v === theme ? "true" : "false");
}
};
const setOpen = (open) => {
if (!notch || !handle) return;
notch.dataset.open = open ? "true" : "false";
handle.setAttribute("aria-expanded", open ? "true" : "false");
};
const updateNotchTop = () => {
const header = document.querySelector(".site-header");
const subnav = document.querySelector(".subnav");
const headerRect = header ? header.getBoundingClientRect() : null;
const headerH = headerRect ? headerRect.height : 0;
let top = headerH + 12;
if (subnav) {
const r = subnav.getBoundingClientRect();
if (r.top >= 0 && r.top < headerH + 140) {
top = Math.max(top, r.bottom + 12);
}
}
document.documentElement.style.setProperty("--theme-notch-top", `${Math.round(top)}px`);
};
const initialTheme = validate(document.documentElement.dataset.theme) || "dark";
syncRadios(initialTheme);
updateNotchTop();
window.addEventListener("resize", () => updateNotchTop());
window.addEventListener("scroll", () => updateNotchTop(), { passive: true });
if (handle) {
handle.addEventListener("click", () => {
const open = notch && notch.dataset.open === "true";
setOpen(!open);
if (!open) {
const first = notch && notch.querySelector(".theme-notch-option");
if (first instanceof HTMLElement) first.focus({ preventScroll: true });
}
});
}
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
setOpen(false);
if (handle) handle.focus({ preventScroll: true });
return;
}
const active = document.activeElement;
if (!active || !(active instanceof HTMLElement)) return;
if (!active.classList.contains("theme-notch-option")) return;
if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
e.preventDefault();
const options = Array.from(
document.querySelectorAll(".theme-notch-option[data-theme-option]"),
);
const idx = options.indexOf(active);
if (idx < 0) return;
const dir = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : -1;
const nextEl = options[(idx + dir + options.length) % options.length];
nextEl.focus({ preventScroll: true });
const v = nextEl.getAttribute("data-theme-option");
setTheme(v, { withTransition: true });
const theme = validate(document.documentElement.dataset.theme) || "dark";
syncRadios(theme);
});
document.addEventListener("click", (e) => {
const t = e.target;
if (!t || !t.closest) return;
const opt = t.closest(".theme-notch-option[data-theme-option]");
if (opt) {
const next = opt.getAttribute("data-theme-option");
setTheme(next, { withTransition: true });
const active = validate(document.documentElement.dataset.theme) || "dark";
syncRadios(active);
return;
}
if (notch && notch.dataset.open === "true") {
if (handle && t.closest("[data-theme-notch-handle]")) return;
if (t.closest("[data-theme-notch]")) return;
setOpen(false);
}
});
})();
</script>
<script is:inline>
(() => {
function reveal(img) {