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

Fix light hero mock double outline and theme toggle icons

Browse Source 
Strip nested mock-window border/ring inside the hero frame so light
mode has a single clean edge. Show moon in dark mode and sun in light.
This commit is contained in:
Raven Scott
2026-07-16 18:01:40 -04:00
parent ff3399f551
commit 2e9cf6725f
3 changed files with 40 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+6 -6
View File
@@ -854,17 +854,17 @@ tr:hover td {
display: block;
}
/* Show sun in dark mode (click → light); moon in light mode (click → dark) */
.theme-toggle .icon-sun {
/* Icon reflects current theme: moon = dark/night, sun = light/day */
.theme-toggle .icon-moon {
display: block;
}
.theme-toggle .icon-moon {
display: none;
}
html[data-theme='light'] .theme-toggle .icon-sun {
.theme-toggle .icon-sun {
display: none;
}
html[data-theme='light'] .theme-toggle .icon-moon {
display: none;
}
html[data-theme='light'] .theme-toggle .icon-sun {
display: block;
}
src/styles/home.css
+2 -3
View File
@@ -1029,9 +1029,8 @@ body.lightbox-open {
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg-card);
box-shadow:
var(--shadow-lg),
0 0 0 1px var(--accent-dim);
/* Single outer edge via border; drop extra 1px ring (double outline in light) */
box-shadow: var(--shadow-lg);
text-align: left;
color: var(--text);
font-size: 12px;
src/styles/theme-light.css
+32 -19
View File
@@ -243,7 +243,6 @@ html[data-theme='light'] section.hero {
color: var(--text);
}
html[data-theme='light'] .hero-frame,
html[data-theme='light'] .shot-frame,
html[data-theme='light'] .screenshot-card,
html[data-theme='light'] [data-lightbox] {
@@ -252,6 +251,14 @@ html[data-theme='light'] [data-lightbox] {
box-shadow: var(--shadow-md);
}
/* Hero mock: single outer edge only (no double ring with nested .mock-window) */
html[data-theme='light'] .hero-frame,
html[data-theme='light'] .hero-frame.mock-frame {
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: 0 28px 64px rgba(15, 23, 42, 0.12);
}
html[data-theme='light'] .job-panel,
html[data-theme='light'] .hero-float-job .job-panel,
html[data-theme='light'] .mock-panel,
@@ -428,28 +435,44 @@ html[data-theme='light'] .pd-app-main .dash-metric-label {
color: #64748b !important;
}
html[data-theme='light'] .mock-window,
html[data-theme='light'] .mock-frame {
/* Standalone mocks (not nested in hero frame) */
html[data-theme='light'] .mock-window {
background: linear-gradient(168deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%) !important;
border: 1px solid rgba(15, 23, 42, 0.1) !important;
/* One soft shadow only — no extra 0 0 0 1px accent ring */
box-shadow: 0 28px 64px rgba(15, 23, 42, 0.12) !important;
color: var(--text) !important;
}
html[data-theme='light'] .mock-frame:not(.hero-frame) {
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 28px 64px rgba(15, 23, 42, 0.12) !important;
}
/* Nested hero window: strip chrome so only .hero-frame draws the outline */
html[data-theme='light'] .hero-frame.mock-frame .mock-window,
html[data-theme='light'] .hero-frame .mock-window {
border: none !important;
box-shadow: none !important;
background: linear-gradient(168deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%) !important;
border-color: var(--border-color) !important;
box-shadow: 0 12px 36px rgba(15, 23, 42, 0.1) !important;
}
html[data-theme='light'] .mock-titlebar {
background: #f8fafc !important;
border-color: var(--border-color) !important;
color: var(--pd-text-2) !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
}
html[data-theme='light'] .mock-sidebar {
background: #ffffff !important;
border-color: var(--border-color) !important;
border-color: var(--border) !important;
}
html[data-theme='light'] .mock-content,
html[data-theme='light'] .mock-body {
background: #f3f5f8 !important;
color: var(--pd-text) !important;
color: var(--text) !important;
}
/* Docs hard-coded code blocks */
@@ -590,16 +613,6 @@ html[data-theme='light'] .hero-job-track {
background: rgba(15, 23, 42, 0.08) !important;
}
/* Hero mock window — full light chrome */
html[data-theme='light'] .mock-window {
background: linear-gradient(168deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%) !important;
border: 1px solid var(--border) !important;
box-shadow:
0 28px 64px rgba(15, 23, 42, 0.12),
0 0 0 1px rgba(15, 118, 110, 0.06) !important;
color: var(--text) !important;
}
html[data-theme='light'] .mock-titlebar {
background: #f8fafc !important;
border-bottom: 1px solid var(--border) !important;