diff --git a/src/app.postcss b/src/app.postcss index a9da514..d78b61d 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -1,4 +1,21 @@ html, body { @apply h-full overflow-hidden -} \ No newline at end of file +} + +.dark .logo-text-gradient-dark { + @apply from-logo-blue-start-dark to-logo-blue-stop-dark; +} + +.logo-text-gradient-light { + @apply from-logo-blue-start-light to-logo-blue-stop-light; +} + +.logo-text-gradient { + @apply bg-clip-text text-transparent box-decoration-clone; + /* Direction */ + @apply bg-gradient-to-br; + /* Color Stops */ + @apply logo-text-gradient-light logo-text-gradient-dark; +} + diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 056f6ce..1150eda 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -25,7 +25,7 @@ Logo

hellob.art

diff --git a/src/theme.postcss b/src/theme.postcss deleted file mode 100644 index 0ce6f86..0000000 --- a/src/theme.postcss +++ /dev/null @@ -1,98 +0,0 @@ - -:root { - /* =~= Theme Properties =~= */ - --theme-font-family-base: system-ui; - --theme-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --theme-font-color-base: 0 0 0; - --theme-font-color-dark: 255 255 255; - --theme-rounded-base: 4px; - --theme-rounded-container: 12px; - --theme-border-base: 2px; - /* =~= Theme On-X Colors =~= */ - --on-primary: 0 0 0; - --on-secondary: 255 255 255; - --on-tertiary: 0 0 0; - --on-success: 0 0 0; - --on-warning: 0 0 0; - --on-error: 255 255 255; - --on-surface: 255 255 255; - /* =~= Theme Colors =~= */ - /* primary | #67a1ba */ - --color-primary-50: 232 241 245; /* ⬅ #e8f1f5 */ - --color-primary-100: 225 236 241; /* ⬅ #e1ecf1 */ - --color-primary-200: 217 232 238; /* ⬅ #d9e8ee */ - --color-primary-300: 194 217 227; /* ⬅ #c2d9e3 */ - --color-primary-400: 149 189 207; /* ⬅ #95bdcf */ - --color-primary-500: 103 161 186; /* ⬅ #67a1ba */ - --color-primary-600: 93 145 167; /* ⬅ #5d91a7 */ - --color-primary-700: 77 121 140; /* ⬅ #4d798c */ - --color-primary-800: 62 97 112; /* ⬅ #3e6170 */ - --color-primary-900: 50 79 91; /* ⬅ #324f5b */ - /* secondary | #4F46E5 */ - --color-secondary-50: 229 227 251; /* ⬅ #e5e3fb */ - --color-secondary-100: 220 218 250; /* ⬅ #dcdafa */ - --color-secondary-200: 211 209 249; /* ⬅ #d3d1f9 */ - --color-secondary-300: 185 181 245; /* ⬅ #b9b5f5 */ - --color-secondary-400: 132 126 237; /* ⬅ #847eed */ - --color-secondary-500: 79 70 229; /* ⬅ #4F46E5 */ - --color-secondary-600: 71 63 206; /* ⬅ #473fce */ - --color-secondary-700: 59 53 172; /* ⬅ #3b35ac */ - --color-secondary-800: 47 42 137; /* ⬅ #2f2a89 */ - --color-secondary-900: 39 34 112; /* ⬅ #272270 */ - /* tertiary | #0EA5E9 */ - --color-tertiary-50: 219 242 252; /* ⬅ #dbf2fc */ - --color-tertiary-100: 207 237 251; /* ⬅ #cfedfb */ - --color-tertiary-200: 195 233 250; /* ⬅ #c3e9fa */ - --color-tertiary-300: 159 219 246; /* ⬅ #9fdbf6 */ - --color-tertiary-400: 86 192 240; /* ⬅ #56c0f0 */ - --color-tertiary-500: 14 165 233; /* ⬅ #0EA5E9 */ - --color-tertiary-600: 13 149 210; /* ⬅ #0d95d2 */ - --color-tertiary-700: 11 124 175; /* ⬅ #0b7caf */ - --color-tertiary-800: 8 99 140; /* ⬅ #08638c */ - --color-tertiary-900: 7 81 114; /* ⬅ #075172 */ - /* success | #84cc16 */ - --color-success-50: 237 247 220; /* ⬅ #edf7dc */ - --color-success-100: 230 245 208; /* ⬅ #e6f5d0 */ - --color-success-200: 224 242 197; /* ⬅ #e0f2c5 */ - --color-success-300: 206 235 162; /* ⬅ #ceeba2 */ - --color-success-400: 169 219 92; /* ⬅ #a9db5c */ - --color-success-500: 132 204 22; /* ⬅ #84cc16 */ - --color-success-600: 119 184 20; /* ⬅ #77b814 */ - --color-success-700: 99 153 17; /* ⬅ #639911 */ - --color-success-800: 79 122 13; /* ⬅ #4f7a0d */ - --color-success-900: 65 100 11; /* ⬅ #41640b */ - /* warning | #EAB308 */ - --color-warning-50: 252 244 218; /* ⬅ #fcf4da */ - --color-warning-100: 251 240 206; /* ⬅ #fbf0ce */ - --color-warning-200: 250 236 193; /* ⬅ #faecc1 */ - --color-warning-300: 247 225 156; /* ⬅ #f7e19c */ - --color-warning-400: 240 202 82; /* ⬅ #f0ca52 */ - --color-warning-500: 234 179 8; /* ⬅ #EAB308 */ - --color-warning-600: 211 161 7; /* ⬅ #d3a107 */ - --color-warning-700: 176 134 6; /* ⬅ #b08606 */ - --color-warning-800: 140 107 5; /* ⬅ #8c6b05 */ - --color-warning-900: 115 88 4; /* ⬅ #735804 */ - /* error | #d31922 */ - --color-error-50: 248 221 222; /* ⬅ #f8ddde */ - --color-error-100: 246 209 211; /* ⬅ #f6d1d3 */ - --color-error-200: 244 198 200; /* ⬅ #f4c6c8 */ - --color-error-300: 237 163 167; /* ⬅ #eda3a7 */ - --color-error-400: 224 94 100; /* ⬅ #e05e64 */ - --color-error-500: 211 25 34; /* ⬅ #d31922 */ - --color-error-600: 190 23 31; /* ⬅ #be171f */ - --color-error-700: 158 19 26; /* ⬅ #9e131a */ - --color-error-800: 127 15 20; /* ⬅ #7f0f14 */ - --color-error-900: 103 12 17; /* ⬅ #670c11 */ - /* surface | #063142 */ - --color-surface-50: 218 224 227; /* ⬅ #dae0e3 */ - --color-surface-100: 205 214 217; /* ⬅ #cdd6d9 */ - --color-surface-200: 193 204 208; /* ⬅ #c1ccd0 */ - --color-surface-300: 155 173 179; /* ⬅ #9badb3 */ - --color-surface-400: 81 111 123; /* ⬅ #516f7b */ - --color-surface-500: 6 49 66; /* ⬅ #063142 */ - --color-surface-600: 5 44 59; /* ⬅ #052c3b */ - --color-surface-700: 5 37 50; /* ⬅ #052532 */ - --color-surface-800: 4 29 40; /* ⬅ #041d28 */ - --color-surface-900: 3 24 32; /* ⬅ #031820 */ - -} \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 235d328..4e1bc3e 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -10,7 +10,25 @@ module.exports = { ) ], theme: { - extend: {}, + extend: { + colors: { + 'logo-blue-start': { + light: '#314755', + DEFAULT: '#314755', + dark: '#7196AD', + }, + 'logo-blue-stop': { + light: '#26a0da', + DEFAULT: '#26a0da', + dark: '#7CC6E9', + }, + }, + dark: { // <-- Add this section for dark mode classes + 'logo-text-gradient-dark': { + '@apply': 'from-logo-blue-start-dark to-logo-blue-stop-dark', + }, + }, + }, }, plugins: [ ...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()