-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(deps): upgrade tailwindcss to 4.0.0
- Loading branch information
Showing
13 changed files
with
248 additions
and
258 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -142,3 +142,6 @@ dist | |
| .svelte-kit | ||
|
|
||
| # End of https://www.toptal.com/developers/gitignore/api/node | ||
|
|
||
| .vite | ||
| dist | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,217 @@ | ||
| @import "tailwindcss"; | ||
|
|
||
| /* | ||
| The plugin iconify is not working (yet?) with the plugin system of tailwindcss v4 => use the config file instead. | ||
| ``` | ||
| @plugin "@iconify/tailwind"; | ||
| ``` | ||
| */ | ||
| @config "./tailwind.config.cjs"; | ||
|
|
||
| @custom-variant dark (&:where(.dark, .dark *)); | ||
|
|
||
| @font-face { | ||
| font-family: "Droid Sans", system-ui, sans-serif; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| font-display: swap; | ||
| src: | ||
| url("./assets/fonts/droid-sans/DroidSans-webfont.woff2") format("woff2"), | ||
| url("./assets/fonts/droid-sans/DroidSans-webfont.woff") format("woff"); | ||
| } | ||
|
|
||
| @theme { | ||
| /* see [Perfect Ratios & How to Find Them - YouTube](https://www.youtube.com/watch?v=r1DANFZYJDw) */ | ||
| --spacing-2xs: 0.3rem; | ||
| --spacing-xs: 0.486rem; | ||
| --spacing-sm: 0.7862rem; | ||
| --spacing-md: 1.272rem; /* "1rem", the base */ | ||
| --spacing-lg: 2.058rem; | ||
| --spacing-xl: 3.330rem; | ||
| --spacing-2xl: 5.388rem; | ||
| --spacing-4xl: 8.778rem; | ||
| /* | ||
| // theme build with: | ||
| // - https://www.realtimecolors.com/?colors=0e151b-c9d2de-f29107-a294c2-725190&fonts=DroidSans-DroidSans | ||
| // - alternative: https://www.realtimecolors.com/?colors=0e0d0b-f9f8f6-fbbd23-abbfb9-8d9daa&fonts=DroidSans-DroidSans | ||
| // - manually set `DEFAULT` when export in Tailwind CSS + Themes + Shades | ||
| // - export in Tailwind CSS + Themes in HSL (to be able to use opacity `/5`) | ||
| // - in source of realtime the number suffixing the color is the opacity | ||
| // fontSize: { | ||
| // sm: "0.750rem", | ||
| // base: "1rem", | ||
| // xl: "1.333rem", | ||
| // "2xl": "1.777rem", | ||
| // "3xl": "2.369rem", | ||
| // "4xl": "3.158rem", | ||
| // "5xl": "4.210rem", | ||
| // }, | ||
| */ | ||
| --font-sans: ["Droid Sans", var(--font-sans)]; | ||
| --font-heading: "Droid Sans"; | ||
| --font-body: "Droid Sans"; | ||
| --font-weight-normal: "400"; | ||
| --font-weight-bold: "700"; | ||
| --color-text: var(--text); | ||
| --color-background: var(--background); | ||
| --color-primary: var(--primary); | ||
| --color-secondary: var(--secondary); | ||
| --color-accent: var(--accent); | ||
| } | ||
|
|
||
| :root { | ||
| --text: oklch(19.15% 0.016 244.65); | ||
| --background: oklch(86.05% 0.019 255.54); | ||
| --primary: oklch(74.22% 0.166 64.29); | ||
| --secondary: oklch(69.49% 0.068 298.56); | ||
| --accent: oklch(49.68% 0.104 307.15); | ||
| } | ||
|
|
||
| .dark { | ||
| --text: oklch(93.65% 0.011 243.66); | ||
| --background: oklch(28.19% 0.026 255.73); | ||
| --primary: oklch(75.84% 0.168 64.71); | ||
| --secondary: oklch(39.60% 0.077 296.74); | ||
| --accent: oklch(59.84% 0.100 307.64); | ||
| } | ||
|
|
||
| h1 { | ||
| @apply text-4xl font-bold leading-[3.2rem] tracking-tight; | ||
| @apply md:text-6xl md:leading-[4.2rem]; | ||
| @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent; | ||
| } | ||
|
|
||
| h2 { | ||
| @apply mb-lg text-center text-3xl font-bold tracking-tight; | ||
| @apply md:text-5xl; | ||
| @apply relative; | ||
| } | ||
|
|
||
| h3 { | ||
| @apply mb-md text-xl font-bold tracking-tight; | ||
| } | ||
|
|
||
| /* @layer components { */ | ||
| .clickable { | ||
| @apply cursor-pointer transition-all duration-300; | ||
| @apply hover:scale-105 hover:cursor-pointer hover:shadow-lg; | ||
| } | ||
|
|
||
| .btn { | ||
| @apply rounded-lg bg-secondary px-6 py-3 text-text; | ||
| @apply focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2; | ||
| @apply active:bg-secondary/80; | ||
| @apply font-semibold; | ||
| } | ||
|
|
||
| .btn-primary { | ||
| @apply bg-primary text-background; | ||
| @apply focus:ring-primary; | ||
| @apply shadow-md hover:shadow-primary/20; | ||
| } | ||
|
|
||
| .isDisabled { | ||
| color: currentColor; | ||
| cursor: not-allowed; | ||
| opacity: 0.5; | ||
| text-decoration: none; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .font-outline { | ||
| -webkit-text-stroke-width: 1px; | ||
| -webkit-text-stroke-color: var(--text); | ||
| color: transparent; | ||
| } | ||
|
|
||
| .check-circle { | ||
| background-image: url("assets/icons/check-circle.svg"); | ||
| background-position: 0em 0.2em; | ||
| background-repeat: no-repeat; | ||
| } | ||
|
|
||
| /* Glass effect for cards */ | ||
| @utility glass-card { | ||
| @apply border border-white/20 bg-white/10 backdrop-blur-md; | ||
| @apply dark:border-white/10 dark:bg-black/10; | ||
| @apply rounded-xl shadow-xl; | ||
| } | ||
|
|
||
| /* Modern section styling */ | ||
| section { | ||
| @apply px-4 py-16; | ||
| @apply transition-all duration-300; | ||
| } | ||
|
|
||
| body { | ||
| @apply bg-gradient-to-r from-primary/10 to-accent/10; | ||
| } | ||
| /* Enhanced hero section */ | ||
| #hero { | ||
| @apply relative overflow-hidden; | ||
| /*@apply before:absolute before:inset-0 before:bg-gradient-to-r before:from-primary/10 before:to-accent/10;*/ | ||
| } | ||
|
|
||
| /* Modern feature cards */ | ||
| .feature-card { | ||
| @apply glass-card p-6; | ||
| @apply transform transition-all duration-300; | ||
| @apply hover:scale-105 hover:shadow-2xl; | ||
| } | ||
|
|
||
| /* technics from https://iconify.design/docs/usage/css/ */ | ||
| .svg-mask { | ||
| /* Add dimensions to span */ | ||
| display: inline-block; | ||
| /* width: 32px; | ||
| height: 32px; */ | ||
| /* Add background color */ | ||
| background-color: currentColor; | ||
| /* Add mask image, use variable to reduce duplication */ | ||
| --svg: url("https://api.iconify.design/bi/bell-fill.svg"); | ||
| -webkit-mask-image: var(--svg); | ||
| mask-image: var(--svg); | ||
| -webkit-mask-repeat: no-repeat; | ||
| mask-repeat: no-repeat; | ||
| -webkit-mask-size: 100% 100%; | ||
| mask-size: 100% 100%; | ||
| } | ||
|
|
||
| .svg-cdevents { | ||
| /* width: 444px; | ||
| height: 184px; */ | ||
| --svg: url("./assets/logos/cdevents_monochrome.svg"); | ||
| } | ||
| /* } */ | ||
|
|
||
| /* New animations */ | ||
| @keyframes float { | ||
| 0% { | ||
| transform: translateY(0px); | ||
| } | ||
| 50% { | ||
| transform: translateY(-20px); | ||
| } | ||
| 100% { | ||
| transform: translateY(0px); | ||
| } | ||
| } | ||
|
|
||
| .float-animation { | ||
| animation: float 6s ease-in-out infinite; | ||
| } | ||
|
|
||
| /* Enhanced scrollbar */ | ||
| ::-webkit-scrollbar { | ||
| width: 8px; | ||
| } | ||
|
|
||
| ::-webkit-scrollbar-track { | ||
| @apply bg-background; | ||
| } | ||
|
|
||
| ::-webkit-scrollbar-thumb { | ||
| @apply rounded-full bg-primary/50; | ||
| @apply hover:bg-primary; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| const { addDynamicIconSelectors } = require("@iconify/tailwind"); | ||
|
|
||
| /** @type {import('tailwindcss').Config} */ | ||
| module.exports = { | ||
| plugins: [ | ||
| // https://iconify.design/docs/usage/css/tailwind/#installation | ||
| // Iconify plugin, requires writing list of icon sets to load | ||
| // addIconSelectors(["simple-icons" /*, 'logos'*/]), | ||
| addDynamicIconSelectors(), | ||
| ], | ||
| }; |
Oops, something went wrong.