Merge pull request 'tailwind-4' (#2) from tailwind-4 into main

Reviewed-on: #2

.forgejo/workflows/deploy.yml

@@ -1,5 +1,9 @@
 name: deploy
-on: [push, workflow_dispatch]
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
 
 env:
   repo: website
@@ -12,7 +16,6 @@ jobs:
   deploy:
     name: deploy
     runs-on: docker
-    if: github.ref == 'refs/heads/main'
     container:
       image: quay.io/buildah/stable:latest
       env:

astro.config.ts

@@ -1,5 +1,5 @@
 import sitemap from "@astrojs/sitemap"
-import tailwind from "@astrojs/tailwind"
+import tailwindcss from "@tailwindcss/vite"
 import { defineConfig, passthroughImageService } from "astro/config"
 
 export default defineConfig({
@@ -8,7 +8,7 @@ export default defineConfig({
   server: {
     host: true,
   },
-  integrations: [tailwind(), sitemap()],
+  integrations: [sitemap()],
   image: {
     domains: ["directus.swablab.de", "files.mastodon.social"],
     service: passthroughImageService(),
@@ -16,4 +16,9 @@ export default defineConfig({
   redirects: {
     "/todo": "https://directus.swablab.de/admin/content/tasks_general",
   },
+  vite: {
+    plugins: [
+      tailwindcss(),
+    ],
+  },
 })

package.json

@@ -11,14 +11,13 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.3",
-    "@fontsource-variable/ubuntu-sans": "^5.1.0",
-    "@iconify-json/ph": "^1.2.1",
-    "@iconify/tailwind": "^1.1.3",
-    "@tailwindcss/typography": "^0.5.15",
-    "astro": "^5.0.3",
-    "daisyui": "^4.12.14",
-    "tailwindcss": "^3.4.16"
+    "@fontsource-variable/ubuntu-sans": "^5.2.5",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify/tailwind4": "^1.0.6",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.14",
+    "astro": "^5.5.2",
+    "daisyui": "^5.0.4"
   },
   "prettier": {
     "tabWidth": 2,

src/components/Card.astro

@@ -34,7 +34,7 @@ const { name, image, link, small } = Astro.props
         <span class="card-title">{name}</span>
       )
     }
-    <p>
+    <p class="text-lg">
       <slot />
     </p>
   </div>

src/components/Mastodon.astro

@@ -71,7 +71,7 @@ function replaceEmojis(content: string) {
         </figure>
       )}
 
-      <div class="card-body text-left">
+      <div class="card-body text-left text-lg">
         <h2 class="card-title justify-between">
           <a href={post.url}>@swablab</a>
           <time class="text-xs opacity-50">

src/components/Section.astro

@@ -7,7 +7,7 @@ const { title, jumpId }: Props = Astro.props
 ---
 
 <div class="text-center p-8 space-y-8 even:bg-base-200">
-  <a hidden class="block invisible relative -top-20" id={jumpId}></a>
+  <a class="invisible relative -top-24" id={jumpId}></a>
   <div class="text-3xl md:text-5xl">
     <a href={"#" + jumpId}>{title}</a>
   </div>

src/layouts/Header.astro

@@ -14,10 +14,14 @@ const links = [
 
 <nav class="fixed top-0 navbar z-30 glass bg-base-100/30">
   <div class="navbar-start">
-    <a class="btn btn-ghost text-xl font-normal" href="/">
-      <img class="w-8 h-8" src="/logo.svg" alt="swablab logo" />
-      <span>swablab</span></a
-    >
+    <ul class="menu menu-horizontal p-0">
+      <li>
+        <a class="text-xl" href="/">
+          <img class="w-8 h-8" src="/logo.svg" alt="" />
+          <span>swablab</span>
+        </a>
+      </li>
+    </ul>
   </div>
   <div class="navbar-center hidden lg:flex">
     <ul class="menu menu-horizontal p-0">

src/layouts/Presence.astro

@@ -1,13 +1,13 @@
 <div id="presence" class="hidden">
   <div class="xl:hidden">
     <div class="tooltip tooltip-left">
-      <button class="btn btn-square font-normal">
+      <button class="btn btn-square">
         <span class="icon-[ph--door-open-duotone] w-6 h-6"></span>
       </button>
     </div>
   </div>
   <div class="hidden xl:flex">
-    <button class="btn font-normal">
+    <button class="btn">
       <span id="presence-text"></span>
       <span class="icon-[ph--door-open-duotone] w-6 h-6"></span>
     </button>

src/pages/donate.astro

@@ -14,11 +14,11 @@ import Page from "../layouts/Page.astro"
       kannst du an folgendes Konto deinen Spendenbeitrag überweisen:
     </Text>
 
-    <div class="stats shadow">
+    <div class="stats shadow bg-base-300">
       <div class="stat">
-        <div class="stat-title">IBAN: DE18 6039 1310 0125 6340 05</div>
-        <div class="stat-title">BIC: GENODES1VBH</div>
-        <div class="stat-title">Bank: Volksbank in der Region</div>
+        <div class="stat-title text-xl">IBAN: DE18 6039 1310 0125 6340 05</div>
+        <div class="stat-title text-xl">BIC: GENODES1VBH</div>
+        <div class="stat-title text-xl">Bank: Volksbank in der Region</div>
       </div>
     </div>
 

src/pages/join.astro

@@ -24,11 +24,11 @@ import Page from "../layouts/Page.astro"
       oder ihn an folgende Adresse schicken:
     </Text>
 
-    <div class="stats shadow">
+    <div class="stats shadow bg-base-300">
       <div class="stat">
         <div class="stat-value">swablab e.V.</div>
-        <div class="stat-title">Katharinenstr. 1</div>
-        <div class="stat-title">72250 Freudenstadt</div>
+        <div class="stat-title text-xl">Katharinenstr. 1</div>
+        <div class="stat-title text-xl">72250 Freudenstadt</div>
       </div>
     </div>
   </Section>

src/style.css

@@ -1,6 +1,40 @@
-input {
-  color-scheme: dark;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@theme {
+  --font-sans: "Ubuntu", "sans-serif";
+  --font-serif: "Ubuntu", "sans-serif";
+  --font-mono: "Ubuntu Mono", "monospace";
 }
+@plugin "@iconify/tailwind4";
+
+@plugin "daisyui" {}
+@plugin "daisyui/theme" {
+  name: "swablab";
+  default: true;
+  prefersdark: true;
+  color-scheme: dark;
+
+  --color-base-100: "#171717";
+  --color-base-200: "#262626";
+  --color-base-300: "#404040";
+  --color-primary: "#A3FFF1";
+  --color-primary-content: black;
+  --color-secondary: "#FF7F50";
+  --color-primary-content: black;
+  --color-neutral: "#404040";
+
+  --radius-selector: 1rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+
+  --depth: 0;
+  --noise: 0;
+  --glass-reflect-opacity: 0.001;
+}
+
 @font-face {
   font-family: "Ubuntu";
   font-style: normal;

tailwind.config.ts

@@ -1,38 +0,0 @@
-module.exports = {
-  content: ["./src/**/*"],
-  theme: {
-    extend: {
-      colors: {
-        primary: "#A3FFF1",
-        secondary: "#FF7F50",
-      },
-      fontFamily: {
-        sans: ["Ubuntu", "sans-serif"],
-        serif: ["Ubuntu", "sans-serif"],
-        mono: ["Ubuntu Mono", "monospace"],
-      },
-    },
-  },
-  daisyui: {
-    themes: [
-      {
-        swablab: {
-          primary: "#A3FFF1",
-          secondary: "#FF7F50",
-          neutral: "#404040",
-          "base-100": "#171717",
-          "base-200": "#262626",
-          "base-300": "#404040",
-
-          "--glass-reflex-opacity": "0.001",
-        },
-      },
-    ],
-    logs: false,
-  },
-  plugins: [
-    require("@tailwindcss/typography"),
-    require("@iconify/tailwind").addDynamicIconSelectors(),
-    require("daisyui"),
-  ],
-}