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 {