mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-04-26 17:11:21 +00:00
feat: added gradient for logo text
This commit is contained in:
parent
4b1259bc6f
commit
6fab5b64b5
4 changed files with 38 additions and 101 deletions
|
|
@ -1,4 +1,21 @@
|
|||
html,
|
||||
body {
|
||||
@apply h-full overflow-hidden
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<img width="32" height="24" src="./icon.svg" alt="Logo" srcset="" class="" />
|
||||
<h1 class="h6">
|
||||
<span
|
||||
class="bg-gradient-to-br logo-text-gradient bg-clip-text text-transparent box-decoration-clone font-mono pl-3"
|
||||
class="bg-gradient-to-br logo-text-gradient bg-clip-text text-transparent box-decoration-clone font-mono font-bold tracking-tighter pl-3"
|
||||
>hellob.art</span
|
||||
>
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
||||
}
|
||||
|
|
@ -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')()
|
||||
|
|
|
|||
Loading…
Reference in a new issue