diff --git a/public/index.html b/public/index.html index 9abfe26..9ebc2f7 100644 --- a/public/index.html +++ b/public/index.html @@ -24,14 +24,10 @@ - - Wordle + WORDLE // RETRO diff --git a/src/App.module.scss b/src/App.module.scss index 48368c4..261620a 100644 --- a/src/App.module.scss +++ b/src/App.module.scss @@ -8,48 +8,89 @@ } :root { - --color-absent: #405069; - --color-present: #e0c02b; - --color-correct: #31ad23; - --color-alert-success: #3fbf62; - --color-alert-error: #ea4e2c; - --color-toggle: #3fbf62; - - --color-background: #fff; - --color-cell: #afadb0; - --color-key: #e3e3e3; - --color-key-text: #333; - --color-key-secondary: #4f4f4f; - --color-text-primary: #000; - --color-text-secondary: #333; - --color-icon: #333; + --color-absent: #3a3a5c; + --color-present: #d4a017; + --color-correct: #00ff41; + --color-alert-success: #00ff41; + --color-alert-error: #ff003c; + --color-toggle: #00ff41; + + --color-background: #0a0a0a; + --color-cell: #1a1a2e; + --color-key: #1a1a2e; + --color-key-text: #00ff41; + --color-key-secondary: #00ff41; + --color-text-primary: #00ff41; + --color-text-secondary: #33cc33; + --color-icon: #00ff41; + --color-border: #00ff41; + --color-scanline: rgba(0, 255, 65, 0.03); [data-theme='dark'] { - --color-background: #191919; - --color-cell: #444444; - --color-key: #4f4f4f; - --color-key-text: #fff; - --color-key-secondary: #fff; - --color-text-primary: #fff; - --color-text-secondary: #adadad; - --color-icon: #fff; + --color-background: #0a0a0a; + --color-cell: #1a1a2e; + --color-key: #1a1a2e; + --color-key-text: #00ff41; + --color-key-secondary: #00ff41; + --color-text-primary: #00ff41; + --color-text-secondary: #33cc33; + --color-icon: #00ff41; } [data-mode='high-contrast'] { - --color-present: #06b6d4; - --color-correct: #f97316; + --color-present: #ff6ec7; + --color-correct: #00ffff; } } body { font-size: 62.5%; - font-family: 'Baloo 2', sans-serif; + font-family: 'Press Start 2P', monospace; background: var(--color-background); - color: #fff; + color: #00ff41; min-height: 100vh; scroll-behavior: smooth; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: none; + -moz-osx-font-smoothing: unset; + image-rendering: pixelated; + position: relative; + overflow-x: hidden; +} + +/* CRT Scanline overlay */ +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 9999; + background: repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + var(--color-scanline) 2px, + var(--color-scanline) 4px + ); +} + +/* CRT vignette effect */ +body::after { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 9998; + background: radial-gradient( + ellipse at center, + transparent 60%, + rgba(0, 0, 0, 0.4) 100% + ); } .container { diff --git a/src/components/Alert/Alert.module.scss b/src/components/Alert/Alert.module.scss index cb5c840..e296197 100644 --- a/src/components/Alert/Alert.module.scss +++ b/src/components/Alert/Alert.module.scss @@ -10,18 +10,25 @@ } .alert { - border-radius: 10px; + border: 2px solid; + border-radius: 0; padding: 0.5rem 0.75rem; - font-size: 1rem; - font-family: 'Poppins'; + font-size: 0.6rem; + font-family: 'Press Start 2P', monospace; font-weight: 500; text-align: center; + color: #000; + text-shadow: none; } .success { background-color: var(--color-alert-success); + border-color: var(--color-alert-success); + box-shadow: 0 0 15px var(--color-alert-success); } .error { background-color: var(--color-alert-error); + border-color: var(--color-alert-error); + box-shadow: 0 0 15px var(--color-alert-error); } diff --git a/src/components/Cell/Cell.module.scss b/src/components/Cell/Cell.module.scss index 62e7791..039a6b9 100644 --- a/src/components/Cell/Cell.module.scss +++ b/src/components/Cell/Cell.module.scss @@ -2,14 +2,20 @@ width: 60px; height: 60px; background-color: var(--color-cell); - border-radius: 10px; - font-size: 2.6rem; + border: 2px solid var(--color-border); + border-radius: 0; + font-size: 1.8rem; font-weight: 700; + font-family: 'Press Start 2P', monospace; text-transform: uppercase; display: flex; justify-content: center; align-items: center; cursor: default; + color: #fff; + text-shadow: 0 0 8px currentColor; + box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.05), + 0 0 5px rgba(0, 255, 65, 0.1); } .fill { @@ -60,16 +66,19 @@ 0% { transform: rotateX(0deg); background-color: var(--color-cell); + border-color: var(--color-border); } 50% { background-color: var(--color-cell); } 50.5% { background-color: var(--color-absent); + border-color: var(--color-absent); } 100% { transform: rotateX(180deg); background-color: var(--color-absent); + border-color: var(--color-absent); } } @@ -77,16 +86,19 @@ 0% { transform: rotateX(0deg); background-color: var(--color-cell); + border-color: var(--color-border); } 50% { background-color: var(--color-cell); } 50.5% { background-color: var(--color-present); + border-color: var(--color-present); } 100% { transform: rotateX(180deg); background-color: var(--color-present); + border-color: var(--color-present); } } @@ -94,16 +106,20 @@ 0% { transform: rotateX(0deg); background-color: var(--color-cell); + border-color: var(--color-border); } 50% { background-color: var(--color-cell); } 50.5% { background-color: var(--color-correct); + border-color: var(--color-correct); } 100% { transform: rotateX(180deg); background-color: var(--color-correct); + border-color: var(--color-correct); + box-shadow: 0 0 15px var(--color-correct); } } @@ -120,6 +136,6 @@ .cell { width: 55px; height: 55px; - font-size: 2.4rem; + font-size: 1.6rem; } } diff --git a/src/components/Grid/Grid.module.scss b/src/components/Grid/Grid.module.scss index 4ee9adb..285c0d7 100644 --- a/src/components/Grid/Grid.module.scss +++ b/src/components/Grid/Grid.module.scss @@ -9,8 +9,8 @@ .row { display: grid; grid-template-columns: repeat(5, 1fr); - grid-gap: 10px; - margin: 0.25rem; + grid-gap: 6px; + margin: 0.2rem; } .jiggle { diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 53cdd0d..542328e 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -13,7 +13,7 @@ const Header = ({ -

WORDLE

+

WORDLE ▶