From f390eed402e68679fc8671d3183afb242ebef2f9 Mon Sep 17 00:00:00 2001
From: dm <dm@dariuszm.eu>
Date: Fri, 19 Dec 2025 12:18:20 +0100
Subject: [PATCH] Optymalizacja Css

---
 astro.config.mjs                   |  6 +++
 src/components/layout/Header.astro |  2 +-
 src/islands/Cookie.jsx             |  1 +
 src/layouts/BaseHead.astro         | 18 +++++--
 src/layouts/DefaultLayout.astro    | 13 ++---
 src/pages/kontakt/index.astro      |  1 +
 src/styles/base.css                | 42 ----------------
 src/styles/contact.css             |  2 +-
 src/styles/cookie.css              |  2 -
 src/styles/footer.css              |  4 +-
 src/styles/global.css              | 31 ++++++++++++
 src/styles/global.js               |  9 ++++
 src/styles/hero.css                |  4 +-
 src/styles/sections.css            |  4 +-
 src/styles/theme.css               | 80 +++---------------------------
 15 files changed, 83 insertions(+), 136 deletions(-)
 delete mode 100644 src/styles/base.css
 create mode 100644 src/styles/global.css
 create mode 100644 src/styles/global.js

diff --git a/astro.config.mjs b/astro.config.mjs
index 7794ac5..5b74eac 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -13,6 +13,12 @@ export default defineConfig({
     host: process.env.HOST || '0.0.0.0',
     port: parseInt(process.env.PORT || '4321'),
   },
+  vite: {
+    build: {
+      minify: "esbuild",
+      cssMinify: "esbuild",
+    },
+  },
   integrations: [
     preact(),
     tailwind({
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index 2c23bfb..f5e9cd0 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -47,6 +47,6 @@ const links = [
       }
     </div>
 
-    <MobileMenu client:load links={links} />
+    <MobileMenu client:idle links={links} />
   </div>
 </nav>
diff --git a/src/islands/Cookie.jsx b/src/islands/Cookie.jsx
index 2b58aea..7fdd22f 100644
--- a/src/islands/Cookie.jsx
+++ b/src/islands/Cookie.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "preact/hooks";
 import Markdown from "./Markdown.jsx";
+import "../styles/cookie.css";
 
 export default function Cookie({ config }) {
   const [visible, setVisible] = useState(false);
diff --git a/src/layouts/BaseHead.astro b/src/layouts/BaseHead.astro
index ef4b1fc..95a4e8d 100644
--- a/src/layouts/BaseHead.astro
+++ b/src/layouts/BaseHead.astro
@@ -93,8 +93,18 @@ const jsonExtra = extraSchema ? JSON.stringify(extraSchema) : null;
   <title>{title}</title>
   <meta name="description" content={description} />
 
-  {keywords.length > 0 && <meta name="keywords" content={keywords.join(", ")} />}
+  {
+    keywords.length > 0 && (
+      <meta name="keywords" content={keywords.join(", ")} />
+    )
+  }
 
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap"
+  />
   <link rel="canonical" href={canonical} />
 
   <!-- OpenGraph -->
@@ -117,13 +127,13 @@ const jsonExtra = extraSchema ? JSON.stringify(extraSchema) : null;
   <meta name="twitter:image" content={image} />
 
   <!-- JSON-LD: Website -->
-  <script type="application/ld+json" set:html={jsonWebsite}></script>
+  <script type="application/ld+json" set:html={jsonWebsite} />
 
   <!-- JSON-LD: LocalBusiness -->
-  <script type="application/ld+json" set:html={jsonBusiness}></script>
+  <script type="application/ld+json" set:html={jsonBusiness} />
 
   <!-- JSON-LD: Extra schema -->
-  {jsonExtra && <script type="application/ld+json" set:html={jsonExtra}></script>}
+  {jsonExtra && <script type="application/ld+json" set:html={jsonExtra} />}
 
   <slot />
 </head>
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
index ef50866..6f9161e 100644
--- a/src/layouts/DefaultLayout.astro
+++ b/src/layouts/DefaultLayout.astro
@@ -1,20 +1,21 @@
 ---
 import yaml from "yaml";
-import "../styles/base.css";
+import "../styles/global.css";
+import "../styles/global.js";
+
 import BaseHead from "./BaseHead.astro";
 import Header from "../components/layout/Header.astro";
 import Footer from "../components/layout/Footer.astro";
 import ThemeToggle from "../islands/ThemeToggle.jsx";
 import Cookie from "../islands/Cookie.jsx";
 
-
 import rawCookie from "../content/site/cookie.yaml?raw";
 const cookieCfg = yaml.parse(rawCookie);
 const { seo } = Astro.props;
 ---
 
 <html lang="pl" class="scroll-smooth">
-    <head>
+  <head>
     <BaseHead seo={seo} />
   </head>
 
@@ -23,12 +24,12 @@ const { seo } = Astro.props;
 
     <main class="flex-1">
       <slot />
-      <Cookie client:load config={cookieCfg} />
+      <Cookie client:idle config={cookieCfg} />
     </main>
 
     <Footer />
     <div class="fixed right-4 bottom-4 z-50">
-      <ThemeToggle client:load />
-    </div>   
+      <ThemeToggle client:idle />
+    </div>
   </body>
 </html>
diff --git a/src/pages/kontakt/index.astro b/src/pages/kontakt/index.astro
index d590276..f106e40 100644
--- a/src/pages/kontakt/index.astro
+++ b/src/pages/kontakt/index.astro
@@ -4,6 +4,7 @@ import DefaultLayout from "../../layouts/DefaultLayout.astro";
 import MapGoogle from "../../components/maps/MapGoogle.astro";
 import Markdown from "../../islands/Markdown.jsx";
 import { loadYamlFile } from "../../lib/loadYaml";
+import "../../styles/contact.css";
 
 type SeoYaml = any;
 const seo = loadYamlFile<SeoYaml>(
diff --git a/src/styles/base.css b/src/styles/base.css
deleted file mode 100644
index a6a4174..0000000
--- a/src/styles/base.css
+++ /dev/null
@@ -1,42 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');
-/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */
-/* @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap'); */
-
-@import "./tailwind.css";
-@import "./theme.css";
-@import "./navbar.css";
-@import "./hero.css";
-@import "./buttons.css";
-@import "./sections.css";
-@import "./markdown.css";
-@import "./footer.css";
-@import "./cookie.css";
-@import "./contact.css";
-@import "./switches.css";
-
-html {
-  font-family: 'Nunito', sans-serif;
-  /* font-family: "Lora", sans-serif; */
-  font-optical-sizing: auto;
-  font-weight: 500;
-  scroll-behavior: smooth;
-}
-
-/* Body */
-body {
-  background-color: var(--f-background);
-  color: var(--f-text);
-}
-
-.grecaptcha-badge {
-  display: none !important;
-}
-
-a {
-  @apply text-[--f-link-text];
-}
-
-a:hover {
-  @apply text-[--f-link-text-hover];
-}
-
diff --git a/src/styles/contact.css b/src/styles/contact.css
index 90e9e5d..d919405 100644
--- a/src/styles/contact.css
+++ b/src/styles/contact.css
@@ -1,4 +1,4 @@
-@tailwind base;
+/* @tailwind base; */
 
 .f-contact-item {
 
diff --git a/src/styles/cookie.css b/src/styles/cookie.css
index d0bdb67..87a94a3 100644
--- a/src/styles/cookie.css
+++ b/src/styles/cookie.css
@@ -1,4 +1,3 @@
-@layer components {
   #cookie-banner {
     @apply fixed bottom-0 left-0 w-full translate-y-full transition-transform duration-500 ease-in-out bg-[--f-cookie-background];
   }
@@ -23,4 +22,3 @@
   .f-cookie-reject {
     @apply bg-[--f-cookie-reject-background] text-[--f-cookie-reject-text]
   }
-}
\ No newline at end of file
diff --git a/src/styles/footer.css b/src/styles/footer.css
index b0381e8..b97d4ac 100644
--- a/src/styles/footer.css
+++ b/src/styles/footer.css
@@ -1,4 +1,4 @@
-@layer components {
+/* @layer components { */
     .f-footer {
         @apply mt-2 border-t border-[--f-input-border] bg-[--f-footer-background] text-[--f-text] pt-2;
     }
@@ -31,4 +31,4 @@
     .f-footer-recaptcha {
         @apply text-base;
     }
-}
\ No newline at end of file
+/* } */
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..973e460
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,31 @@
+/* src/styles/global.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* bazowe rzeczy, które masz w base.css */
+@layer base {
+    html {
+        font-family: 'Nunito', sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 500;
+        scroll-behavior: smooth;
+    }
+
+    body {
+        background-color: var(--f-background);
+        color: var(--f-text);
+    }
+
+    a {
+        @apply text-[--f-link-text];
+    }
+
+    a:hover {
+        @apply text-[--f-link-text-hover];
+    }
+}
+
+.grecaptcha-badge {
+    display: none !important;
+}
\ No newline at end of file
diff --git a/src/styles/global.js b/src/styles/global.js
new file mode 100644
index 0000000..f9bd95e
--- /dev/null
+++ b/src/styles/global.js
@@ -0,0 +1,9 @@
+import "./theme.css";
+import "./navbar.css";
+import "./hero.css";
+import "./buttons.css";
+import "./sections.css";
+import "./markdown.css";
+import "./footer.css";
+import "./switches.css";
+
diff --git a/src/styles/hero.css b/src/styles/hero.css
index 84e9c1d..607175f 100644
--- a/src/styles/hero.css
+++ b/src/styles/hero.css
@@ -1,4 +1,4 @@
-@layer components {
+/* @layer components { */
   .f-hero {
     @apply relative flex items-center overflow-hidden;
     @apply min-h-[600px] md:min-h-[700px] lg:min-h-[700px];
@@ -132,4 +132,4 @@
       transform: translateY(0);
     }
   }
-}
+/* } */
diff --git a/src/styles/sections.css b/src/styles/sections.css
index f9bd618..0e1767f 100644
--- a/src/styles/sections.css
+++ b/src/styles/sections.css
@@ -1,4 +1,4 @@
-@layer components {
+/* @layer components { */
 
   .f-section-header {
     @apply text-4xl md:text-5xl font-bold mb-3 text-[--f-header];
@@ -42,7 +42,7 @@
     @apply mt-0 flex justify-center;
   }
 
-}
+/* } */
 
 .f-section-channel {
   @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-2;
diff --git a/src/styles/theme.css b/src/styles/theme.css
index ed06a18..8c7bde7 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -1,15 +1,13 @@
-* {
-  --f-navbar-height: 84px;
+:root {
+  /* --f-navbar-height: 84px; */
 
   --brand-hue: 200;
   --brand-saturation: 100%;
   --brand-lightness: 50%;
   --brand-dark: hsl(200 calc(100% / 0.2) calc(50% / 1.5));
 
-
-}
-
-:root {
+  --f-navbar-height: 84px;
+  /* -------------------------- */
   --f-hero-text: #d1d6d9;
   --f-hero-header: #d1d6d9;
 
@@ -64,74 +62,8 @@
   --f-premium-border: #adb5bd;
 }
 
-:root.dark2 {
-  --header: #f4442e;
-  --text: #adb5bd;
-  --text-link: #f48c06;
-  /* #ffd60a; */
 
-  --f-hero-header: var(--header);
-  --f-hero-text: var(--text);
-
-  --f-background: #171a1a;
-  --f-header: var(--header);
-  --f-text: var(--text);
-
-  /*--- Navbar --- */
-  --f-navbar-background: #343a40;
-  --f-navbar-link: var(--text-link);
-  --f-navbar-link-hover: #ff9f1c;
-
-  /*--- Footer --- */
-  --f-footer-background: #343a40;
-  --f-footer-link-text: var(--text-link);
-
-  --f-link-text: var(--text-link);
-  --f-link-text-hover: #f2e6b3;
-
-  /* Buttons Input */
-  --btn-background: #343a40;
-  --btn-text: var(--text-link);
-  --btn-background-hover: var(--btn-text);
-  --btn-text-hover: var(--btn-background);
-
-  --f-background-switch: #343a40;
-  --f-switcher-background: var(--text-link);
-  --f-switcher-text: #343a40;
-  /* --f-switcher-background-hover: #3d3f40;
-  --f-switcher-text-hover: var(--f-link-text-hover); */
-
-  /* --- Offers --- */
-  --f-offers-border: #3d3f40;
-  --f-offers-price: #eae2b7;
-
-  --f-background-toast: #22262b;
-
-  --f-input-border: #3d3f40;
-  --f-autocomplete-hover-bg: #2d3133;
-  --f-autocomplete-hover-text: #d1d6d9;
-
-
-  /* --- Cookie --- */
-  --f-cookie-background: #3d3f40;
-  --f-cookie-text: #fcfcfd;
-  --f-cookie-accept-background: var(--f-link-text);
-  --f-cookie-accept-text: #171a1a;
-  --f-cookie-reject-background: #2d3133;
-  --f-cookie-reject-text: var(--f-link-text);
-
-  /* --- Offers --- */
-
-  --f-offers-popular: var(--brand-dark);
-  --f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
-
-  --f-addons-text: #fffae6;
-  --f-addons-background: #1a6655;
-
-  --f-premium-border: #adb5bd;
-}
-
-:root.dark {
+html.dark {
   --f-hero-text: #d1d6d9;
   --f-hero-header: #d1d6d9;
 
@@ -188,5 +120,5 @@
   --f-addons-text: #fffae6;
   --f-addons-background: #1a6655;
 
-    --f-premium-border: #3d3f40;
+  --f-premium-border: #3d3f40;
 }
\ No newline at end of file