Optymalizacja Css

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({

src/components/layout/Header.astro

@@ -47,6 +47,6 @@ const links = [
       }
     </div>
 
-    <MobileMenu client:load links={links} />
+    <MobileMenu client:idle links={links} />
   </div>
 </nav>

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);

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>

src/layouts/DefaultLayout.astro

@@ -1,13 +1,14 @@
 ---
 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;
@@ -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 />
+      <ThemeToggle client:idle />
     </div>
   </body>
 </html>

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>(

src/styles/base.css

@@ -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];
-}
-

src/styles/contact.css

@@ -1,4 +1,4 @@
-@tailwind base;
+/* @tailwind base; */
 
 .f-contact-item {
 

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]
   }
-}

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;
     }
-}
+/* } */

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;
+}

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";
+

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);
     }
   }
-}
+/* } */

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;

src/styles/theme.css

@@ -1,15 +1,13 @@
-* {
+:root {
-  --f-navbar-height: 84px;
+  /* --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));
 
-
+  --f-navbar-height: 84px;
-}
+  /* -------------------------- */
-
-:root {
   --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);
+html.dark {
-  --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 {
   --f-hero-text: #d1d6d9;
   --f-hero-header: #d1d6d9;