migrated to astro 5 and tailwind 4
This commit is contained in:
parent
2d6851f448
commit
a40f65950b
GPG key ID:
4B6F6A83178F595E
|
|
@ -1,14 +1,12 @@
|
||||||
import { defineConfig, squooshImageService } from 'astro/config';
|
import {defineConfig} from 'astro/config';
|
||||||
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
import tailwind from "@astrojs/tailwind";
|
|
||||||
|
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
publicDir: "static",
|
publicDir: "static",
|
||||||
outDir: "public",
|
outDir: "public",
|
||||||
|
|
||||||
integrations: [tailwind()],
|
vite: {
|
||||||
image:{
|
plugins: [tailwindcss()]
|
||||||
service: squooshImageService()
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
7071
package-lock.json
generated
7071
package-lock.json
generated
File diff suppressed because it is too large
Load diff
11
package.json
11
package.json
|
|
@ -1,5 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "",
|
"name": "winter-software.com",
|
||||||
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
@ -10,11 +11,11 @@
|
||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/check": "^0.7.0",
|
"@astrojs/check": "^0.9.6",
|
||||||
"@astrojs/tailwind": "^5.1.0",
|
|
||||||
"@fontsource/inclusive-sans": "^5.0.3",
|
"@fontsource/inclusive-sans": "^5.0.3",
|
||||||
"astro": "^4.9.2",
|
"@tailwindcss/vite": "^4.1.18",
|
||||||
"tailwindcss": "^3.4.3",
|
"astro": "^5.16.5",
|
||||||
|
"tailwindcss": "^4.1.18",
|
||||||
"typescript": "^5.4.5"
|
"typescript": "^5.4.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<button id="ThemeToggle" class="absolute top-4 right-4 bg-primary text-primary-content p-2 rounded-full" title="toggle website dark theme">
|
<button id="ThemeToggle" class="absolute top-4 right-4 bg-primary text-primary-content p-2 rounded-full cursor-pointer" title="toggle website dark theme">
|
||||||
<span class="inline dark:hidden">
|
<span class="inline dark:hidden">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
||||||
<path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
|
<path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,71 @@
|
||||||
@tailwind base;
|
@import 'tailwindcss';
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
@config '../../tailwind.config.mjs';
|
||||||
|
|
||||||
|
/*
|
||||||
|
secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
|
||||||
|
'secondary-content': 'rgb(var(--color-secondary-content) / <alpha-value>)',
|
||||||
|
neutral: 'rgb(var(--color-neutral) / <alpha-value>)',
|
||||||
|
'neutral-content': 'rgb(var(--color-neutral-content) / <alpha-value>)',
|
||||||
|
*/
|
||||||
|
|
||||||
|
@source inline("bg-primary");
|
||||||
|
@source inline("text-primary-content");
|
||||||
|
@source inline("bg-secondary");
|
||||||
|
@source inline("text-secondary-content");
|
||||||
|
@source inline("bg-neutral");
|
||||||
|
@source inline("text-neutral-content");
|
||||||
|
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--font-sans: "Inclusive Sans", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--text-sm: 0.750rem;
|
||||||
|
--text-sm--line-height: inherit;
|
||||||
|
--text-base: 1rem;
|
||||||
|
--text-base--line-height: inherit;
|
||||||
|
--text-lg: 1.1rem;
|
||||||
|
--text-lg--line-height: inherit;
|
||||||
|
--text-xl: 1.333rem;
|
||||||
|
--text-xl--line-height: inherit;
|
||||||
|
--text-2xl: 1.777rem;
|
||||||
|
--text-2xl--line-height: inhert;
|
||||||
|
--text-3xl: 2.369rem;
|
||||||
|
--text-3xl--line-height: inherit;
|
||||||
|
--text-4xl: 3.158rem;
|
||||||
|
--text-4xl--line-height: inherit;
|
||||||
|
--text-5xl: 4.210rem;
|
||||||
|
--text-5xl--line-height: 1.5;
|
||||||
|
}
|
||||||
|
@theme inline {
|
||||||
|
--color-primary: var(--color-primary);
|
||||||
|
--color-primary-content: var(--color-primary-content);
|
||||||
|
--color-secondary: var(--color-secondary);
|
||||||
|
--color-secondary-content: var(--color-secondary-content);
|
||||||
|
--color-neutral: var(--color-neutral);
|
||||||
|
--color-neutral-content: var(--color-neutral-content);
|
||||||
|
--color-base-100: var(--color-base-100);
|
||||||
|
--color-base-200: var(--color-base-200);
|
||||||
|
--color-base-300: var(--color-base-300);
|
||||||
|
--color-base-content: var(--color-base-content);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||||||
|
so we've added these compatibility styles to make sure everything still
|
||||||
|
looks the same as it did with Tailwind CSS v3.
|
||||||
|
|
||||||
|
If we ever want to remove these styles, we need to add an explicit border
|
||||||
|
color utility to any element that depends on these defaults.
|
||||||
|
*/
|
||||||
|
@layer base {
|
||||||
|
*,
|
||||||
|
::after,
|
||||||
|
::before,
|
||||||
|
::backdrop,
|
||||||
|
::file-selector-button {
|
||||||
|
border-color: var(--color-gray-200, currentcolor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
html, body {
|
html, body {
|
||||||
|
|
@ -14,60 +79,60 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--color-primary: 117 0 174;
|
--color-primary: oklch(0.44 0.225 308.029);
|
||||||
--color-primary-content: 255 255 255;
|
--color-primary-content: white;
|
||||||
--color-secondary: 174 171 0;
|
--color-secondary: oklch(0.72 0.156 108.484);
|
||||||
--color-secondary-content: 0 0 0;
|
--color-secondary-content: black;
|
||||||
--color-neutral: 227 213 246;
|
--color-neutral: oklch(0.894 0.047 304.647);
|
||||||
--color-neutral-content: 0 0 0;
|
--color-neutral-content: black;
|
||||||
|
|
||||||
--color-base-100: 15 15 10;
|
--color-base-100: oklch(0.166 0.01 107.442);
|
||||||
--color-base-200: 25 25 20;
|
--color-base-200: oklch(0.212 0.01 107.187);
|
||||||
--color-base-300: 50 50 45;
|
--color-base-300: oklch(0.315 0.009 106.888);
|
||||||
--color-base-content: 255 255 255;
|
--color-base-content: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="light"] {
|
[data-theme="light"] {
|
||||||
--color-primary: 197 82 255;
|
--color-primary: oklch(0.662 0.252 311.98);
|
||||||
--color-primary-content: 0 0 0;
|
--color-primary-content: black;
|
||||||
--color-secondary: 255 252 82;
|
--color-secondary: oklch(0.965 0.182 108.376);
|
||||||
--color-secondary-content: 0 0 0;
|
--color-secondary-content: black;
|
||||||
--color-neutral: 23 9 42;
|
--color-neutral: oklch(0.183 0.064 299.534);
|
||||||
--color-neutral-content: 255 255 255;
|
--color-neutral-content: white;
|
||||||
|
|
||||||
--color-base-100: 240 240 230;
|
--color-base-100: oklch(0.952 0.013 106.649);
|
||||||
--color-base-200: 225 225 215;
|
--color-base-200: oklch(0.907 0.013 106.664);
|
||||||
--color-base-300: 205 205 195;
|
--color-base-300: oklch(0.846 0.014 106.688);
|
||||||
--color-base-content: 0 0 0;
|
--color-base-content: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
--color-primary: 197 82 255;
|
--color-primary: oklch(0.662 0.252 311.98);
|
||||||
--color-primary-content: 0 0 0;
|
--color-primary-content: black;
|
||||||
--color-secondary: 255 252 82;
|
--color-secondary: oklch(0.965 0.182 108.376);
|
||||||
--color-secondary-content: 0 0 0;
|
--color-secondary-content: black;
|
||||||
--color-neutral: 23 9 42;
|
--color-neutral: oklch(0.183 0.064 299.534);
|
||||||
--color-neutral-content: 255 255 255;
|
--color-neutral-content: white;
|
||||||
|
|
||||||
--color-base-100: 240 240 230;
|
--color-base-100: oklch(0.952 0.013 106.649);
|
||||||
--color-base-200: 225 225 215;
|
--color-base-200: oklch(0.907 0.013 106.664);
|
||||||
--color-base-300: 205 205 195;
|
--color-base-300: oklch(0.846 0.014 106.688);
|
||||||
--color-base-content: 0 0 0;
|
--color-base-content: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] {
|
[data-theme="dark"] {
|
||||||
--color-primary: 117 0 174;
|
--color-primary: oklch(0.44 0.225 308.029);
|
||||||
--color-primary-content: 255 255 255;
|
--color-primary-content: white;
|
||||||
--color-secondary: 174 171 0;
|
--color-secondary: oklch(0.72 0.156 108.484);
|
||||||
--color-secondary-content: 0 0 0;
|
--color-secondary-content: black;
|
||||||
--color-neutral: 227 213 246;
|
--color-neutral: oklch(0.894 0.047 304.647);
|
||||||
--color-neutral-content: 0 0 0;
|
--color-neutral-content: black;
|
||||||
|
|
||||||
--color-base-100: 15 15 10;
|
--color-base-100: oklch(0.166 0.01 107.442);
|
||||||
--color-base-200: 25 25 20;
|
--color-base-200: oklch(0.212 0.01 107.187);
|
||||||
--color-base-300: 50 50 45;
|
--color-base-300: oklch(0.315 0.009 106.888);
|
||||||
--color-base-content: 255 255 255;
|
--color-base-content: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,45 +1,7 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
import defaultTheme from 'tailwindcss/defaultTheme'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
darkMode: ['selector', '[data-theme="dark"]'],
|
|
||||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||||
safelist: [
|
|
||||||
"bg-primary", "text-primary-content",
|
|
||||||
"bg-secondary", "text-secondary-content",
|
|
||||||
"bg-neutral", "text-neutral-content"
|
|
||||||
],
|
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
primary: 'rgb(var(--color-primary) / <alpha-value>)',
|
|
||||||
'primary-content': 'rgb(var(--color-primary-content) / <alpha-value>)',
|
|
||||||
secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
|
|
||||||
'secondary-content': 'rgb(var(--color-secondary-content) / <alpha-value>)',
|
|
||||||
neutral: 'rgb(var(--color-neutral) / <alpha-value>)',
|
|
||||||
'neutral-content': 'rgb(var(--color-neutral-content) / <alpha-value>)',
|
|
||||||
|
|
||||||
base: {
|
|
||||||
100: 'rgb(var(--color-base-100) / <alpha-value>)',
|
|
||||||
200: 'rgb(var(--color-base-200) / <alpha-value>)',
|
|
||||||
300: 'rgb(var(--color-base-300) / <alpha-value>)',
|
|
||||||
},
|
|
||||||
'base-content': 'rgb(var(--color-base-content) / <alpha-value>)',
|
|
||||||
},
|
|
||||||
fontSize: {
|
|
||||||
sm: '0.750rem',
|
|
||||||
base: '1rem',
|
|
||||||
lg: '1.1rem',
|
|
||||||
xl: '1.333rem',
|
|
||||||
'2xl': '1.777rem',
|
|
||||||
'3xl': '2.369rem',
|
|
||||||
'4xl': '3.158rem',
|
|
||||||
'5xl': '4.210rem'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fontFamily: {
|
|
||||||
sans: ["Inclusive Sans", ...defaultTheme.fontFamily.sans]
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue