txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add new background patterns for light and dark themes

Browse Source 
Light theme:
- Change background from #b8bbbe to #d6d6d6 (light gray)
- Add concentric squares pattern with 4 gradient layers
- Creates subtle geometric texture on gray background

Dark theme:
- Change background from rgb(82, 86, 89) to #3a3a3a (medium gray)
- Add diagonal grid pattern with green glow (rgba(0, 255, 128, 0.15))
- 45deg and -45deg crosshatch creates retro tech aesthetic

Both patterns use CSS custom properties (--page-bg-pattern) and are
applied via background-image in _reset.css. Patterns are fixed and
maintain visibility across theme switches.
This commit is contained in:
juanatsap
2025-11-20 13:50:53 +00:00
parent d2ee1074fc
commit 0671955280
2 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/01-foundation/_themes.css
+20 -6
View File
@@ -15,8 +15,14 @@
LIGHT THEME (DEFAULT)
============================================================================== */
:root {
/* Page Background - Softer version of dark theme */
--page-bg: #b8bbbe;
/* Page Background - Light gray for concentric squares pattern */
--page-bg: #d6d6d6;
/* Concentric Squares Pattern - Light */
--page-bg-pattern: repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(75, 85, 99, 0.06) 5px, rgba(75, 85, 99, 0.06) 6px, transparent 6px, transparent 15px),
repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(75, 85, 99, 0.06) 5px, rgba(75, 85, 99, 0.06) 6px, transparent 6px, transparent 15px),
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(107, 114, 128, 0.04) 10px, rgba(107, 114, 128, 0.04) 11px, transparent 11px, transparent 30px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(107, 114, 128, 0.04) 10px, rgba(107, 114, 128, 0.04) 11px, transparent 11px, transparent 30px);
/* Paper/Card Backgrounds */
--paper-bg: #ffffff;
@@ -65,8 +71,12 @@
DARK THEME
============================================================================== */
[data-color-theme="dark"] {
/* Page Background - Original background */
--page-bg: rgb(82, 86, 89);
/* Page Background - Medium gray for dark pattern visibility */
--page-bg: #3a3a3a;
/* Diagonal Grid with Green Glow - Dark */
--page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.15) 0, rgba(0, 255, 128, 0.15) 1px, transparent 1px, transparent 20px),
repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.15) 0, rgba(0, 255, 128, 0.15) 1px, transparent 1px, transparent 20px);
/* Paper/Card Backgrounds */
--paper-bg: #1a1a1a;
@@ -116,8 +126,12 @@
============================================================================== */
@media (prefers-color-scheme: dark) {
[data-color-theme="auto"] {
/* Page Background - Original background */
--page-bg: rgb(82, 86, 89);
/* Page Background - Medium gray for dark pattern visibility */
--page-bg: #3a3a3a;
/* Diagonal Grid with Green Glow - Dark */
--page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.15) 0, rgba(0, 255, 128, 0.15) 1px, transparent 1px, transparent 20px),
repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.15) 0, rgba(0, 255, 128, 0.15) 1px, transparent 1px, transparent 20px);
/* Paper/Card Backgrounds */
--paper-bg: #1a1a1a;
static/css/01-foundation/_variables.css
+7 -1
View File
@@ -15,7 +15,13 @@
/* Theme System - These get overridden by color-theme.css */
/* Page Background */
--page-bg: #b8bbbe;
--page-bg: #d6d6d6;
/* Page Background Pattern - Concentric Squares */
--page-bg-pattern: repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(75, 85, 99, 0.06) 5px, rgba(75, 85, 99, 0.06) 6px, transparent 6px, transparent 15px),
repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(75, 85, 99, 0.06) 5px, rgba(75, 85, 99, 0.06) 6px, transparent 6px, transparent 15px),
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(107, 114, 128, 0.04) 10px, rgba(107, 114, 128, 0.04) 11px, transparent 11px, transparent 30px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(107, 114, 128, 0.04) 10px, rgba(107, 114, 128, 0.04) 11px, transparent 11px, transparent 30px);
/* Paper/Card Backgrounds */
--paper-bg: #ffffff;