Zakaria/FancyWordle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX: dark mode is default now/Pressing enter

Browse Source
This commit is contained in:
Zakaria
2026-05-21 13:26:30 -04:00
parent 166eacdbfd
commit 08724192b3
4 changed files with 35 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CSS/styles.css
+17 -14
View File
@@ -58,14 +58,15 @@ body.intro-active .app-shell {
}
.intro-overlay {
--intro-bg: #111111;
--intro-fg: #fafafa;
--intro-border: #e5e5e5;
--intro-bg: oklch(18% 0.018 50);
--intro-surface: oklch(24% 0.018 50);
--intro-fg: oklch(96% 0.014 70);
--intro-border: oklch(33% 0.018 50);
--intro-accent: #2f6feb;
--intro-tile-empty: #3a3a3c;
--intro-tile-wrong: #787c7e;
--intro-tile-misplaced: #c9b458;
--intro-tile-correct: #6aaa64;
--intro-tile-empty: oklch(26% 0.018 50);
--intro-tile-wrong: var(--absent);
--intro-tile-misplaced: var(--present);
--intro-tile-correct: var(--correct);
--intro-font-mono: ui-monospace, "JetBrains Mono", monospace;
position: fixed;
@@ -75,7 +76,9 @@ body.intro-active .app-shell {
min-block-size: 100svh;
place-items: center;
overflow: hidden;
background: linear-gradient(180deg, #181818 0%, var(--intro-bg) 58%, #080808 100%);
background:
radial-gradient(circle at 12% 0%, oklch(88% 0.065 45 / 0.14), transparent 34rem),
var(--intro-bg);
color: var(--intro-fg);
font-family: var(--font-body);
opacity: 1;
@@ -96,12 +99,12 @@ body.intro-active .app-shell {
.intro-overlay::before {
inset-block-start: 0;
background: linear-gradient(180deg, rgba(17, 17, 17, 0.85), transparent);
background: linear-gradient(180deg, color-mix(in oklch, var(--intro-bg), transparent 12%), transparent);
}
.intro-overlay::after {
inset-block-end: 0;
background: linear-gradient(0deg, rgba(17, 17, 17, 0.88), transparent);
background: linear-gradient(0deg, color-mix(in oklch, var(--intro-bg), transparent 10%), transparent);
}
.intro-overlay.is-dismissing {
@@ -166,9 +169,9 @@ body.intro-active .app-shell {
inset: 0;
display: grid;
place-items: center;
border: 1px solid rgba(229, 229, 229, 0.18);
border: 1px solid color-mix(in oklch, var(--intro-border), transparent 35%);
background: var(--intro-tile-empty);
box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.08);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--intro-fg), transparent 92%);
color: var(--intro-fg);
font-family: var(--font-body);
font-size: clamp(28px, 6vw, 78px);
@@ -238,10 +241,10 @@ body.intro-active .app-shell {
inset-inline-end: 16px;
z-index: 10;
min-height: 40px;
border: 1px solid rgba(229, 229, 229, 0.22);
border: 1px solid color-mix(in oklch, var(--intro-border), transparent 20%);
border-radius: 999px;
padding: 0 16px;
background: rgba(17, 17, 17, 0.74);
background: color-mix(in oklch, var(--intro-surface), transparent 18%);
color: var(--intro-fg);
cursor: pointer;
font: 800 0.85rem/1 var(--font-body);