miawinter/winter-software.com
miawinter/winter-software.com
1
0
Fork 0
Code Actions Activity

migrated to astro 5 and tailwind 4

Browse source
This commit is contained in:
Mia Rose Winter 2025-12-15 15:18:43 +01:00
parent 2d6851f448
commit a40f65950b
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
6 changed files with 3273 additions and 4030 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
astro.config.mjs
View file

@ -1,14 +1,12 @@
import { defineConfig, squooshImageService } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import {defineConfig} from 'astro/config';
import tailwindcss from "@tailwindcss/vite";
// https://astro.build/config
export default defineConfig({
publicDir: "static",
outDir: "public",
integrations: [tailwind()],
image:{
service: squooshImageService()
vite: {
plugins: [tailwindcss()]
}
});

7071
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

11
package.json
View file

@ -1,5 +1,6 @@
{
"name": "",
"name": "winter-software.com",
"private": true,
"type": "module",
"version": "0.0.1",
"scripts": {
@ -10,11 +11,11 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.7.0",
"@astrojs/tailwind": "^5.1.0",
"@astrojs/check": "^0.9.6",
"@fontsource/inclusive-sans": "^5.0.3",
"astro": "^4.9.2",
"tailwindcss": "^3.4.3",
"@tailwindcss/vite": "^4.1.18",
"astro": "^5.16.5",
"tailwindcss": "^4.1.18",
"typescript": "^5.4.5"
}
}

2
src/components/ThemeToggle.astro
View file

@ -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">
<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" />

151
src/styles/style.css
View file

@ -1,6 +1,71 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
@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 {
html, body {
@ -14,60 +79,60 @@
}
:root {
--color-primary: 117 0 174;
--color-primary-content: 255 255 255;
--color-secondary: 174 171 0;
--color-secondary-content: 0 0 0;
--color-neutral: 227 213 246;
--color-neutral-content: 0 0 0;
--color-primary: oklch(0.44 0.225 308.029);
--color-primary-content: white;
--color-secondary: oklch(0.72 0.156 108.484);
--color-secondary-content: black;
--color-neutral: oklch(0.894 0.047 304.647);
--color-neutral-content: black;
--color-base-100: 15 15 10;
--color-base-200: 25 25 20;
--color-base-300: 50 50 45;
--color-base-content: 255 255 255;
--color-base-100: oklch(0.166 0.01 107.442);
--color-base-200: oklch(0.212 0.01 107.187);
--color-base-300: oklch(0.315 0.009 106.888);
--color-base-content: white;
}
[data-theme="light"] {
--color-primary: 197 82 255;
--color-primary-content: 0 0 0;
--color-secondary: 255 252 82;
--color-secondary-content: 0 0 0;
--color-neutral: 23 9 42;
--color-neutral-content: 255 255 255;
--color-primary: oklch(0.662 0.252 311.98);
--color-primary-content: black;
--color-secondary: oklch(0.965 0.182 108.376);
--color-secondary-content: black;
--color-neutral: oklch(0.183 0.064 299.534);
--color-neutral-content: white;
--color-base-100: 240 240 230;
--color-base-200: 225 225 215;
--color-base-300: 205 205 195;
--color-base-content: 0 0 0;
--color-base-100: oklch(0.952 0.013 106.649);
--color-base-200: oklch(0.907 0.013 106.664);
--color-base-300: oklch(0.846 0.014 106.688);
--color-base-content: black;
}
@media (prefers-color-scheme: light) {
:root {
--color-primary: 197 82 255;
--color-primary-content: 0 0 0;
--color-secondary: 255 252 82;
--color-secondary-content: 0 0 0;
--color-neutral: 23 9 42;
--color-neutral-content: 255 255 255;
--color-primary: oklch(0.662 0.252 311.98);
--color-primary-content: black;
--color-secondary: oklch(0.965 0.182 108.376);
--color-secondary-content: black;
--color-neutral: oklch(0.183 0.064 299.534);
--color-neutral-content: white;
--color-base-100: 240 240 230;
--color-base-200: 225 225 215;
--color-base-300: 205 205 195;
--color-base-content: 0 0 0;
--color-base-100: oklch(0.952 0.013 106.649);
--color-base-200: oklch(0.907 0.013 106.664);
--color-base-300: oklch(0.846 0.014 106.688);
--color-base-content: black;
}
[data-theme="dark"] {
--color-primary: 117 0 174;
--color-primary-content: 255 255 255;
--color-secondary: 174 171 0;
--color-secondary-content: 0 0 0;
--color-neutral: 227 213 246;
--color-neutral-content: 0 0 0;
--color-primary: oklch(0.44 0.225 308.029);
--color-primary-content: white;
--color-secondary: oklch(0.72 0.156 108.484);
--color-secondary-content: black;
--color-neutral: oklch(0.894 0.047 304.647);
--color-neutral-content: black;
--color-base-100: 15 15 10;
--color-base-200: 25 25 20;
--color-base-300: 50 50 45;
--color-base-content: 255 255 255;
--color-base-100: oklch(0.166 0.01 107.442);
--color-base-200: oklch(0.212 0.01 107.187);
--color-base-300: oklch(0.315 0.009 106.888);
--color-base-content: white;
}
}
}

38
tailwind.config.mjs
View file

@ -1,45 +1,7 @@
/** @type {import('tailwindcss').Config} */
import defaultTheme from 'tailwindcss/defaultTheme'
export default {
darkMode: ['selector', '[data-theme="dark"]'],
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: {
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: [],
}