Keith Solomon
0613e33411
Sync TODOs with Issues / sync_todos (push) Successful in 6s
- Added methods in Projects class to determine if a project is a website, retrieve its URL, platform, and screenshot. - Updated single-project template to display website-specific information and actions. - Modified project card component to show website details and adjust action buttons accordingly. - Improved CSS for project cards and buttons to align with new website features.
70 lines
3.7 KiB
CSS
70 lines
3.7 KiB
CSS
/* Theme color definitions */
|
|
|
|
@theme static {
|
|
--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-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);
|
|
|
|
/* 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);
|
|
|
|
/* Carbon Blue / dark surface tokens (Portfolio 2026) */
|
|
--color-surface: oklch(18.79% 0.0103 276.4);
|
|
--color-surface-dim: oklch(18.79% 0.0103 276.4);
|
|
--color-surface-bright: oklch(34.59% 0.0105 278.3);
|
|
--color-surface-container-lowest: oklch(16.51% 0.0106 276.3);
|
|
--color-surface-container-low: oklch(22.37% 0.0117 277.9);
|
|
--color-surface-container: oklch(24.08% 0.0115 278);
|
|
--color-surface-container-high: oklch(28.6% 0.0092 276.8);
|
|
--color-surface-container-highest: oklch(32.74% 0.0105 285.8);
|
|
--color-on-surface: oklch(91.36% 0.011 297.6);
|
|
--color-on-surface-variant: oklch(82.77% 0.0194 286);
|
|
--color-outline: oklch(65.68% 0.0192 282.3);
|
|
--color-outline-variant: oklch(39.65% 0.0187 277.4);
|
|
--color-page-base: oklch(16.5% 0.007 78.1);
|
|
--color-backlight: oklch(71.37% 0.1434 254.6 / 0.2);
|
|
|
|
--color-primary-fixed: oklch(91.52% 0.0412 278.1);
|
|
--color-primary-fixed-dim: oklch(83.03% 0.0845 274.1);
|
|
--color-on-primary: oklch(32.02% 0.1432 262.8);
|
|
--color-on-primary-fixed: oklch(23.06% 0.1072 262.1);
|
|
--color-on-primary-fixed-variant: oklch(40.35% 0.1363 266.3);
|
|
|
|
--color-primary-12: oklch(83.03% 0.0845 274.1 / 0.12);
|
|
--color-primary-87: oklch(91.52% 0.0412 278.1);
|
|
|
|
--color-success: oklch(77.17% 0.1386 157.2);
|
|
--color-warning: oklch(91.37% 0.1234 97.2);
|
|
--color-danger: oklch(54.12% 0.1456 29.8);
|
|
--color-info: oklch(45.67% 0.1345 210.3);
|
|
}
|