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

test: Add new background patterns for light and dark themes

Browse Source 
**TESTING** - These patterns can be easily reverted or modified

Light Theme (Woven Fabric Pattern):
- Subtle gray crosshatch pattern
- Multiple gradients creating woven texture
- Professional and clean appearance

Dark Theme (Diagonal Grid with Green Glow):
- 45° and -45° diagonal lines
- Green glow (rgba(0, 255, 128, 0.1))
- Cyberpunk/tech aesthetic
- 40px grid spacing

Implementation:
- Added --page-bg-pattern CSS variables to color-theme.css
- Applied patterns via body background-image in _reset.css
- OLD pattern commented out and preserved for easy restoration
- Patterns work with light, dark, and auto themes

Files changed:
- static/css/color-theme.css: Added pattern variables
- static/css/01-foundation/_reset.css: Applied patterns to body

To revert: Uncomment old pattern and remove --page-bg-pattern usage
This commit is contained in:
juanatsap
2025-11-20 13:10:11 +00:00
parent 9c5f0b20d8
commit efdc4bd88d
2 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/01-foundation/_reset.css
+8 -2
View File
@@ -12,12 +12,18 @@
/* Body base */
body {
background-color: var(--page-bg);
background-image:
/* OLD PATTERN - Keep for reference (can be restored anytime) */
/* background-image:
linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(180deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
linear-gradient(180deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; */
/* NEW TEST PATTERNS - Theme-specific (woven fabric for light, diagonal grid for dark) */
background-image: var(--page-bg-pattern);
background-size: 40px 40px; /* For dark theme diagonal grid */
background-attachment: fixed;
overflow-x: auto;
}
static/css/color-theme.css
+14
View File
@@ -18,6 +18,12 @@
/* Page Background - Softer version of dark theme */
--page-bg: #b8bbbe;
/* TEST: Woven Fabric Pattern - Light (TESTING - can be removed later) */
--page-bg-pattern: repeating-linear-gradient(0deg, rgba(75, 85, 99, 0.08), rgba(75, 85, 99, 0.08) 2px, transparent 2px, transparent 6px),
repeating-linear-gradient(90deg, rgba(107, 114, 128, 0.06), rgba(107, 114, 128, 0.06) 2px, transparent 2px, transparent 6px),
repeating-linear-gradient(0deg, rgba(55, 65, 81, 0.04), rgba(55, 65, 81, 0.04) 1px, transparent 1px, transparent 12px),
repeating-linear-gradient(90deg, rgba(55, 65, 81, 0.04), rgba(55, 65, 81, 0.04) 1px, transparent 1px, transparent 12px);
/* Paper/Card Backgrounds */
--paper-bg: #ffffff;
--paper-secondary-bg: #f5f5f5;
@@ -66,6 +72,10 @@
/* Page Background - Original background */
--page-bg: rgb(82, 86, 89);
/* TEST: Diagonal Grid with Green Glow (TESTING - can be removed later) */
--page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px),
repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px);
/* Paper/Card Backgrounds */
--paper-bg: #1a1a1a;
--paper-secondary-bg: #2a2a2a;
@@ -115,6 +125,10 @@
/* Page Background - Original background */
--page-bg: rgb(82, 86, 89);
/* TEST: Diagonal Grid with Green Glow (TESTING - can be removed later) */
--page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px),
repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px);
/* Paper/Card Backgrounds */
--paper-bg: #1a1a1a;
--paper-secondary-bg: #2a2a2a;