keith/Portfolio-2026
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

🐞 fix: Update styles for proper background
Sync TODOs with Issues / sync_todos (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Keith Solomon
2026-08-18 16:37:55 -05:00
parent 81547254fc
commit d4df6d8678
12 changed files with 401 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/base/colors.css
+56 -56
View File
@@ -1,69 +1,69 @@
/* Theme color definitions */
@theme {
--color-black: oklch(0% 0 0);
--color-white: oklch(100% 0 0);
--color-black: oklch(0% 0 0);
--color-white: oklch(100% 0 0);
--color-background: oklch(89.75% 0 0);
--color-text: var(--color-black);
--color-background: oklch(89.75% 0 0);
--color-text: var(--color-black);
--color-primary: oklch(0.57 0.203362 257.1706);
--color-primary-100: color-mix(in oklch, var(--color-primary) 10%, white);
--color-primary-200: color-mix(in oklch, var(--color-primary) 20%, white);
--color-primary-300: color-mix(in oklch, var(--color-primary) 30%, white);
--color-primary-400: color-mix(in oklch, var(--color-primary) 40%, white);
--color-primary-500: color-mix(in oklch, var(--color-primary) 50%, white);
--color-primary-600: color-mix(in oklch, var(--color-primary) 60%, white);
--color-primary-700: color-mix(in oklch, var(--color-primary) 70%, white);
--color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white);
--color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);
--color-primary: oklch(0.57 0.203362 257.1706);
--color-primary-100: color-mix(in oklch, var(--color-primary) 10%, white);
--color-primary-200: color-mix(in oklch, var(--color-primary) 20%, white);
--color-primary-300: color-mix(in oklch, var(--color-primary) 30%, white);
--color-primary-400: color-mix(in oklch, var(--color-primary) 40%, white);
--color-primary-500: color-mix(in oklch, var(--color-primary) 50%, white);
--color-primary-600: color-mix(in oklch, var(--color-primary) 60%, white);
--color-primary-700: color-mix(in oklch, var(--color-primary) 70%, white);
--color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white);
--color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);
--color-secondary: oklch(0.56 0.0176 257.23);
--color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
--color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
--color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
--color-secondary-400: color-mix(in oklch, var(--color-secondary) 40%, white);
--color-secondary-500: color-mix(in oklch, var(--color-secondary) 50%, white);
--color-secondary-600: color-mix(in oklch, var(--color-secondary) 60%, white);
--color-secondary-700: color-mix(in oklch, var(--color-secondary) 70%, white);
--color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white);
--color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white);
--color-secondary: oklch(0.56 0.0176 257.23);
--color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
--color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
--color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
--color-secondary-400: color-mix(in oklch, var(--color-secondary) 40%, white);
--color-secondary-500: color-mix(in oklch, var(--color-secondary) 50%, white);
--color-secondary-600: color-mix(in oklch, var(--color-secondary) 60%, white);
--color-secondary-700: color-mix(in oklch, var(--color-secondary) 70%, white);
--color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white);
--color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white);
/* WCAG AA on --color-page-base (#100e0b): ~7:1 contrast, also visually
* distinct from surrounding --color-on-surface (#e3e1e9) for inline links. */
--color-bodylinks: oklch(0.68 0.16 250);
--color-footlinks: oklch(0.68 0.16 250);
/* WCAG AA on --color-page-base (#100e0b): ~7:1 contrast, also visually
* distinct from surrounding --color-on-surface (#e3e1e9) for inline links. */
--color-bodylinks: oklch(0.68 0.16 250);
--color-footlinks: oklch(0.68 0.16 250);
--color-light: oklch(98.16% 0.0017 247.8);
--color-dark: oklch(34.51% 0.0133 248.2);
--color-light: oklch(98.16% 0.0017 247.8);
--color-dark: oklch(34.51% 0.0133 248.2);
/* Carbon Blue / dark surface tokens (Portfolio 2026) */
--color-surface: #121318;
--color-surface-dim: #121318;
--color-surface-bright: #38393f;
--color-surface-container-lowest: #0d0e13;
--color-surface-container-low: #1a1b21;
--color-surface-container: #1e1f25;
--color-surface-container-high: #292a2f;
--color-surface-container-highest:#34343a;
--color-on-surface: #e3e1e9;
--color-on-surface-variant:#c5c5d3;
--color-outline: #8f909d;
--color-outline-variant: #444651;
--color-page-base: #100e0b;
--color-backlight: rgba(96, 165, 250, 0.20);
/* Carbon Blue / dark surface tokens (Portfolio 2026) */
--color-surface: #121318;
--color-surface-dim: #121318;
--color-surface-bright: #38393f;
--color-surface-container-lowest: #0d0e13;
--color-surface-container-low: #1a1b21;
--color-surface-container: #1e1f25;
--color-surface-container-high: #292a2f;
--color-surface-container-highest: #34343a;
--color-on-surface: #e3e1e9;
--color-on-surface-variant: #c5c5d3;
--color-outline: #8f909d;
--color-outline-variant: #444651;
--color-page-base: #100e0b;
--color-backlight: rgba(96, 165, 250, 0.20);
--color-primary-fixed: #dce1ff;
--color-primary-fixed-dim: #b6c4ff;
--color-on-primary: #05297a;
--color-on-primary-fixed: #00164e;
--color-on-primary-fixed-variant: #264191;
--color-primary-fixed: #dce1ff;
--color-primary-fixed-dim: #b6c4ff;
--color-on-primary: #05297a;
--color-on-primary-fixed: #00164e;
--color-on-primary-fixed-variant: #264191;
--color-primary-12: rgba(182, 196, 255, 0.12);
--color-primary-87: #dce1ff;
--color-primary-12: rgba(182, 196, 255, 0.12);
--color-primary-87: #dce1ff;
--color-success: #5ccf91;
--color-warning: #f4e04d;
--color-danger: #cc3b3b;
--color-info: #3d7ab0;
--color-success: #5ccf91;
--color-warning: #f4e04d;
--color-danger: #cc3b3b;
--color-info: #3d7ab0;
}
styles/base/global.css
+9 -4
View File
@@ -84,12 +84,17 @@ main#maincontent {
.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.embed iframe, .embed object, .embed embed, .embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Carbon Blue atmospheric field (decorative — content must sit in z-index: 1) */
/* Carbon Blue atmospheric field — rendered once globally (in header.php)
* as a fixed-position layer behind all content. Decorative only; content
* stays clickable thanks to pointer-events: none. The body carries
* `background-color: #100e0b` so the gradient's mix-blend-mode layers
* have something to composite against. */
.aura-bg {
position: relative;
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
min-height: 100vh;
isolation: isolate;
}
.aura-layer-1 {
styles/base/typography.css
+30 -32
View File
@@ -40,40 +40,40 @@
*/
@theme {
--font-sans: "Raleway", sans-serif;
--font-headings: var(--font-sans);
--line-height: 1.6;
--font-sans: "Raleway", sans-serif;
--font-headings: var(--font-sans);
--line-height: 1.6;
--text-base: 1rem;
--text-14px: clamp(0.75rem, calc(0.7212rem + 0.1282vw), 0.875rem);
--text-16px: clamp(0.875rem, calc(0.8462rem + 0.1282vw), 1rem);
--text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem);
--text-20px: clamp(1rem, calc(0.9423rem + 0.2564vw), 1.25rem);
--text-22px: clamp(1.1rem, calc(1.0365rem + 0.2821vw), 1.375rem);
--text-25px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5625rem);
--text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem);
--text-35px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2.1875rem);
--text-38px: clamp(1.4rem, calc(1.175rem + 1vw), 2.375rem);
--text-40px: clamp(1.5rem, calc(1.2692rem + 1.0256vw), 2.5rem);
--text-45px: clamp(1.6rem, calc(1.3202rem + 1.2436vw), 2.8125rem);
--text-50px: clamp(1.7rem, calc(1.3712rem + 1.4615vw), 3.125rem);
--text-70px: clamp(1.9rem, calc(1.3288rem + 2.5385vw), 4.375rem);
--text-75px: clamp(2rem, calc(1.3798rem + 2.7564vw), 4.6875rem);
--text-base: 1rem;
--text-14px: clamp(0.75rem, calc(0.7212rem + 0.1282vw), 0.875rem);
--text-16px: clamp(0.875rem, calc(0.8462rem + 0.1282vw), 1rem);
--text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem);
--text-20px: clamp(1rem, calc(0.9423rem + 0.2564vw), 1.25rem);
--text-22px: clamp(1.1rem, calc(1.0365rem + 0.2821vw), 1.375rem);
--text-25px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5625rem);
--text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem);
--text-35px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2.1875rem);
--text-38px: clamp(1.4rem, calc(1.175rem + 1vw), 2.375rem);
--text-40px: clamp(1.5rem, calc(1.2692rem + 1.0256vw), 2.5rem);
--text-45px: clamp(1.6rem, calc(1.3202rem + 1.2436vw), 2.8125rem);
--text-50px: clamp(1.7rem, calc(1.3712rem + 1.4615vw), 3.125rem);
--text-70px: clamp(1.9rem, calc(1.3288rem + 2.5385vw), 4.375rem);
--text-75px: clamp(2rem, calc(1.3798rem + 2.7564vw), 4.6875rem);
--h1: calc(var(--text-base) * 2.25);
--h2: calc(var(--text-base) * 1.75);
--h3: calc(var(--text-base) * 1.5);
--h4: calc(var(--text-base) * 1.25);
--h5: calc(var(--text-base) * 1.125);
--h6: calc(var(--text-base) * 1.05);
--h1: calc(var(--text-base) * 2.25);
--h2: calc(var(--text-base) * 1.75);
--h3: calc(var(--text-base) * 1.5);
--h4: calc(var(--text-base) * 1.25);
--h5: calc(var(--text-base) * 1.125);
--h6: calc(var(--text-base) * 1.05);
}
body {
background-color: #100e0b;
color: var(--color-on-surface, #e3e1e9);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--line-height);
background-color: #100e0b;
color: var(--color-on-surface, #e3e1e9);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--line-height);
}
::selection { background: var(--color-warning); }
@@ -169,9 +169,7 @@ pre code {
padding: 0;
}
code {
@apply bg-black/30 px-[3px] py-0.5 font-mono text-black text-xs rounded-sm;
}
code { @apply bg-black/30 px-0.25 py-0.5 font-mono text-black text-xs rounded-sm; }
hr {
background-color: black;