dm/fuz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optymalizacja Css

Browse Source
This commit is contained in:
dm
2025-12-19 12:18:20 +01:00
parent 9027ade4ad
commit f390eed402
15 changed files with 83 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
astro.config.mjs
View File

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

2
src/components/layout/Header.astro
View File

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

1
src/islands/Cookie.jsx
View File

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

18
src/layouts/BaseHead.astro
View File

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

11
src/layouts/DefaultLayout.astro
View File

@@ -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 />
<ThemeToggle client:idle />
</div>
</body>
</html>

1
src/pages/kontakt/index.astro
View File

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

42
src/styles/base.css
View File

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

2
src/styles/contact.css
View File

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

2
src/styles/cookie.css
View File

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

4
src/styles/footer.css
View File

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

31
src/styles/global.css Normal file
View File

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

9
src/styles/global.js Normal file
View File

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

4
src/styles/hero.css
View File

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

4
src/styles/sections.css
View File

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

80
src/styles/theme.css
View File

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