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

Porządkowanie css, i usuwanie radiowego

Browse Source
This commit is contained in:
dm
2025-11-25 09:52:02 +01:00
parent 0bcc1aeefc
commit 665b787c5c
22 changed files with 202 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/hero/Hero.astro
View File

@@ -14,7 +14,6 @@ const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/hero/*.
eager: true
});
// Przygotowanie zmiennej ImageMetadata | null
let imageAsset: ImageMetadata | null = null;
if (imageUrl) {
@@ -25,18 +24,16 @@ if (imageUrl) {
imageAsset = mod.default;
}
}
// Obraz HERO jest LCP
const isLCP = true;
---
<section class="fuz-hero">
<section class="f-hero">
{imageAsset && (
<Image
src={imageAsset}
alt="Światłowód FUZ – szybki internet w Wyszkowie"
class="fuz-hero-bg"
alt="Światłowód FUZ, szybki internet w Wyszkowie"
class="f-hero-bg"
loading="eager"
fetchpriority={isLCP ? "high" : "auto"}
decoding="async"
@@ -46,35 +43,35 @@ const isLCP = true;
/>
)}
<div class="fuz-hero-inner">
<div class="f-hero-inner">
{Array.isArray(title)
? title.map(line => (
<h1 class="fuz-hero-title">{line}</h1>
<h1 class="f-hero-header">{line}</h1>
))
: <h1 class="fuz-hero-title">{title}</h1>
: <h1 class="f-hero-header">{title}</h1>
}
{subtitle && Array.isArray(subtitle) && (
<div class="fuz-hero-subtitles">
<h2 class="fuz-hero-subtitle" style={`--delay:0`}>
<div class="f-hero-subtitles">
<h2 class="f-hero-header-2" style={`--delay:0`}>
{subtitle[0]}
</h2>
{subtitle.slice(1).map((line, i) => (
<p class="fuz-hero-subline" style={`--delay:${i + 1}`}>
<p class="f-hero-header-items" style={`--delay:${i + 1}`}>
{line}
</p>
))}
</div>
)}
<!-- TODO: Przerobić ewentualnie na pojedyncze linie -->
{description && (
<p class="fuz-hero-description">{description}</p>
<p class="f-hero-description">{description}</p>
)}
{ctas.length > 0 && (
<div class="fuz-hero-cta gap-4">
<div class="f-hero-cta">
{ctas.map((cta: { primary: any; href: string | URL | null | undefined; label: unknown; title: string }) => {
const cls = cta.primary ? "btn btn-primary" : "btn btn-outline";
return (
@@ -87,4 +84,4 @@ const isLCP = true;
)}
</div>
</section>
</section>

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

@@ -18,18 +18,18 @@ const links = [
];
---
<nav class="fuz-navbar">
<div class="fuz-navbar-inner">
<nav class="f-navbar">
<div class="f-navbar-inner">
<a href="/" class="flex items-center gap-2 font-semibold">
<img src="/assets/logo.webp" alt="FUZ Logo" class="my-0" />
</a>
<div class="hidden md:flex fuz-navbar-links">
<div class="hidden md:flex f-navbar-links">
{
links.map((link) => (
<a
href={link.href}
class="fuz-navbar-link"
class="f-navbar-link"
target={link.target}
rel={link.target === "_blank" ? "noopener noreferrer" : undefined}
>

6
src/components/maps/CitiesList.astro
View File

@@ -18,8 +18,8 @@ const sorted = cities.sort((a: string, b: any) => a.localeCompare(b, "pl"));
<style>
.fuz-cities-box {
background: var(--fuz-bg);
color: var(--fuz-text);
background: var(--f-background);
color: var(--f-text);
padding: 16px;
@@ -40,6 +40,6 @@ const sorted = cities.sort((a: string, b: any) => a.localeCompare(b, "pl"));
}
.fuz-city-item {
color: var(--fuz-text);
color: var(--f-text);
}
</style>

16
src/content/home/hero.yaml
View File

@@ -1,25 +1,25 @@
title:
- "Internet światłowodowy i radiowy w Wyszkowie i okolicach FUZ"
- "Internet światłowodowy w Wyszkowie i okolicach FUZ"
subtitle:
- DLACZEGO FUZ
- "Lokalny operator, znamy Twoją okolicę"
- "Realny serwis, szybkie wsparcie"
- "Stabilna infrastruktura światłowodowa i radiowa"
- DLACZEGO FUZ?
- "Lokalny operator, znamy Twoją okolicę,"
- "Realny serwis, szybkie wsparcie,"
- "Stabilna infrastruktura światłowodowa,"
description: |
Szybki i stabilny Internet światłowodowy i radiowy w Wyszkowie oraz okolicach.
Szybki i stabilny Internet światłowodowy w Wyszkowie oraz okolicach.
Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
imageUrl: "fiber2.webp"
ctas:
- label: "Zobacz ofertę Internetu Światłowodowego"
href: "/internet-swiatlowodowy"
title: "Przejdź do oferty Internetu światłowodowego"
primary: true
primary: false
- label: "Zobacz ofertę Internetu + Telewizja"
href: "/internet-telewizja"
title: "Przejdź do oferty Internet + Telewizja w FUZ"
primary: false
- label: "Sprawdź dostępność"
href: "/mapa-zasiegu"
title: "Sprawdź zasięg Internetu światłowodowego i radiowego FUZ"
title: "Sprawdź zasięg Internetu światłowodowego FUZ"
primary: false

9
src/islands/MobileMenu.jsx
View File

@@ -3,6 +3,7 @@ import { useState } from "preact/hooks";
* @typedef {{ name: string; href: string }} MenuLink
* @param {{ links: MenuLink[] }} props
*/
export default function MobileMenu({ links = [] }) {
const [open, setOpen] = useState(false);
@@ -10,21 +11,19 @@ export default function MobileMenu({ links = [] }) {
return (
<>
{/* Ikona hamburgera */}
<button
onClick={toggle}
class="fuz-mobile-toggle md:hidden"
class="f-mobile-toggle md:hidden"
aria-label="Menu mobilne"
>
{open ? "✖" : "☰"}
</button>
{/* Panel mobilny */}
<div class={`fuz-mobile-menu ${open ? "open" : ""}`}>
<div class={`f-mobile-menu ${open ? "open" : ""}`}>
{links.map(link => (
<a
href={link.href}
class="fuz-mobile-link"
class="f-mobile-link"
onClick={() => setOpen(false)}
>
{link.name}

2
src/pages/mapa-zasiegu/index.astro
View File

@@ -29,7 +29,7 @@ const mapStyleId = "8e0a97af9476f2d3";
<section class="flex flex-col md:flex-row h-full min-h-[80vh]">
<!-- PANEL -->
<aside
class="w-full md:w-[340px] bg-[var(--fuz-bg)] text-[var(--fuz-text)]
class="w-full md:w-[340px] bg-[var(--f-background)] text-[var(--f-text)]
border-r border-gray-200 dark:border-slate-700 pt-6 px-6
flex flex-col gap-6 overflow-y-auto z-40"
>

25
src/styles/buttons.css
View File

@@ -6,7 +6,8 @@
}
.btn-primary {
background-color: var(--btn-bg);
@apply border-none;
background: var(--btn-background);
color: var(--btn-text);
}
@@ -15,13 +16,15 @@
}
.btn-outline {
background-color: transparent;
border: 2px solid var(--btn-outline-border);
@apply border border-solid;
border-color: var(--btn-outline-border);
color: var(--btn-outline-text);
background: var(--btn-outline-background);
}
.btn-outline:hover {
background-color: var(--btn-outline-bg-hover);
background-color: var(--btn-outline-background-hover);
color: var(--btn-outline-text-hover);
}
.btn-ghost {
@@ -39,8 +42,8 @@
border-radius: 0.75rem;
/* Kolory z theme.css */
background-color: var(--fuz-bg);
color: var(--fuz-text);
background-color: var(--f-background);
color: var(--f-text);
border: 1px solid var(--fuz-border, #d1d5db); /* fallback dla bezpieczeństwa */
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
@@ -50,13 +53,13 @@
/* Hover odcien zależny od border, nie od Tailwind */
.fuz-input:hover {
border-color: var(--fuz-text);
border-color: var(--f-text);
opacity: 0.9;
}
/* Placeholder — używa fuz-text ale jaśniejszy */
/* Placeholder — używa f-text ale jaśniejszy */
.fuz-input::placeholder {
color: color-mix(in srgb, var(--fuz-text) 40%, transparent);
color: color-mix(in srgb, var(--f-text) 40%, transparent);
}
/* Focus — używa accent */
@@ -76,7 +79,7 @@
.fuz-input:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: color-mix(in srgb, var(--fuz-bg) 80%, #888);
background-color: color-mix(in srgb, var(--f-background) 80%, #888);
}
/* Textarea */
@@ -104,7 +107,7 @@
/* Dropdown */
.autocomplete-list {
@apply absolute left-0 right-0 z-50 bg-[var(--fuz-bg)] text-[var(--fuz-text)]
@apply absolute left-0 right-0 z-50 bg-[var(--f-background)] text-[var(--f-text)]
border border-gray-300 dark:border-slate-700
rounded-b-xl shadow-xl max-h-56 overflow-auto;

12
src/styles/contact.css
View File

@@ -4,23 +4,23 @@
.fuz-contact-box {
background-color: var(--fuz-bg);
color: var(--fuz-text);
background-color: var(--f-background);
color: var(--f-text);
}
.fuz-contact-description h3 {
@apply text-xl font-semibold mb-2;
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-contact-description h4 {
@apply text-xl font-semibold mb-1;
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-contact-description p {
@apply text-xl mt-4 leading-relaxed;
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-contact-form {
@@ -30,7 +30,7 @@
/* --- RODO --- */
.fuz-rodo {
@apply flex items-start gap-3 text-sm;
color: var(--fuz-text);
color: var(--f-text);
}
/* .fuz-rodo a {

4
src/styles/cookie.css
View File

@@ -1,8 +1,8 @@
@layer components {
#cookie-banner {
@apply fixed bottom-0 left-0 w-full translate-y-full transition-transform duration-500 ease-in-out;
background: var(--fuz-bg-invert);
color: var(--fuz-text-invert);
background: var(--f-background-invert);
color: var(--f-text-invert);
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

4
src/styles/footer.css
View File

@@ -1,6 +1,6 @@
@layer components {
.f-footer {
@apply mt-0 border-t border-[var(--fuz-border)] bg-[var(--fuz-bg)] text-[var(--fuz-text)] pt-2;
@apply mt-0 border-t border-[var(--fuz-border)] bg-[var(--f-background)] text-[var(--f-text)] pt-2;
}
.f-footer-inner {
@@ -21,7 +21,7 @@
}
.f-footer-copyright {
@apply text-center py-4 text-base text-[var(--fuz-text)];
@apply text-center py-4 text-base text-[var(--f-text)];
/* text-center py-0 text-sm */
}

48
src/styles/hero.css
View File

@@ -1,4 +1,4 @@
.fuz-hero {
.f-hero {
@apply relative overflow-hidden text-center py-32 px-6;
background: linear-gradient(
@@ -6,58 +6,44 @@
var(--fuz-hero-from),
var(--fuz-hero-to)
);
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-hero-bg {
@apply absolute top-0 left-0 w-full h-full object-cover;
opacity: 0.3;
.f-hero-bg {
@apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.7];
}
.fuz-hero-inner {
@apply relative max-w-7xl mx-auto;
color: var(--fuz-text);
.f-hero-inner {
@apply relative max-w-7xl mx-auto text-[var(--f-text)];
}
.fuz-hero-title {
@apply text-5xl md:text-7xl font-extrabold leading-tight mb-6;
color: var(--fuz-text);
.f-hero-header {
@apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[var(--f-header)];
}
.fuz-hero-subtitle {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
color: var(--fuz-text-subtle);
/* Animacja główna */
.f-hero-header-2 {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-2)];
animation-name: fade-in;
animation-duration: 0.8s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
/* Opóźnienie zależne od numeru elementu */
/* animation-delay: calc(var(--delay) * 0.3s); */
}
.fuz-hero-subline {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
color: var(--fuz-text-subtle);
.f-hero-header-items {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-items)];
/* color: var(--f-text-subtle); */
animation: fade-in 0.3s ease-out forwards;
animation-delay: calc(var(--delay) * 0.4s);
}
.fuz-hero-description {
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-relaxed;
color: var(--fuz-text-subtle);
.f-hero-description {
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[var(--f-text)];
}
.fuz-hero-cta {
@apply flex justify-center items-center flex-wrap gap-4 mt-8;
.f-hero-cta {
@apply flex justify-center items-center flex-wrap gap-3 mt-8;
}
.fuz-hero-cta .btn-primary {
background-color: var(--fuz-accent);
color: white;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }

2
src/styles/map-google.css
View File

@@ -35,7 +35,7 @@
}
.map-range-switch {
background: var(--fuz-bg);
background: var(--f-background);
}
.map-range-switch .fuz-switch-group {

2
src/styles/markdown.css
View File

@@ -47,7 +47,7 @@
.fuz-markdown button.modal-link {
@apply no-underline hover:no-underline mt-2;
background: var(--fuz-bg);
background: var(--f-background);
color: var(--fuz-accent);
}
.fuz-markdown blockquote {

8
src/styles/modal.css
View File

@@ -10,7 +10,7 @@
/* CLOSE BUTTON */
.fuz-modal-close {
@apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity;
color: var(--fuz-text);
color: var(--f-text);
opacity: 0.7;
}
@@ -22,8 +22,8 @@
.fuz-modal-panel {
@apply w-full h-full overflow-y-auto;
@apply px-6 py-8 md:px-12 md:py-12;
background: var(--fuz-bg);
color: var(--fuz-text);
background: var(--f-background);
color: var(--f-text);
}
/* INNER LAYOUT */
@@ -33,7 +33,7 @@
.fuz-modal-title {
@apply text-4xl font-bold mb-8 text-center;
color: var(--fuz-text);
color: var(--f-text);
}
/* CONTENT STYLE */

40
src/styles/navbar.css
View File

@@ -1,43 +1,33 @@
.fuz-navbar {
@apply w-full bg-[var(--fuz-bg)] text-[var(--fuz-text)] shadow-sm sticky top-0 z-50;
.f-navbar {
@apply w-full shadow-sm sticky top-0 z-50 bg-[var(--f-background)] text-[var(--f-text)];
}
.fuz-navbar-inner {
.f-navbar-inner {
@apply max-w-7xl mx-auto flex items-center justify-between py-4 px-4;
}
.fuz-navbar-logo {
@apply text-2xl font-bold text-[var(--fuz-text)];
}
.fuz-accent {
color: var(--fuz-accent);
}
.fuz-navbar-links {
.f-navbar-links {
@apply gap-6;
}
.fuz-navbar-link {
.f-navbar-link{
@apply text-base hover:text-[var(--fuz-accent)] transition-colors;
}
.fuz-mobile-toggle {
@apply text-3xl p-2 text-[var(--fuz-text)];
.f-mobile-toggle {
@apply text-3xl p-2 text-[var(--f-text)];
}
/* Panel mobilny */
.fuz-mobile-menu {
@apply fixed top-0 right-0 h-full w-64 bg-[var(--fuz-bg)] shadow-lg
transform translate-x-full transition-transform duration-300
flex flex-col gap-4 p-6;
.f-mobile-menu {
@apply fixed top-0 right-0 h-full w-64 bg-[var(--f-background)] shadow-lg transform translate-x-full transition-transform duration-300 flex flex-col gap-4 p-6;
}
.fuz-mobile-menu.open {
.f-mobile-menu.open {
@apply translate-x-0;
}
.fuz-mobile-link {
@apply text-lg py-2 border-b border-gray-300 dark:border-gray-700
text-[var(--fuz-text)] hover:text-[var(--fuz-accent)];
}
.f-mobile-link {
@apply text-lg py-2 border-b text-[var(--f-text)] hover:text-[var(--fuz-accent)];
border-color: var(--f-border-color);
}

4
src/styles/offers/offers-extra.css
View File

@@ -1,11 +1,11 @@
.fuz-extra-services {
@apply mt-16;
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-title-small {
@apply text-xl font-semibold mb-4;
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-expand-details {

6
src/styles/offers/offers-main.css
View File

@@ -1,7 +1,7 @@
.fuz-offers-section {
@apply py-12;
background: var(--fuz-bg);
color: var(--fuz-text);
background: var(--f-background);
color: var(--f-text);
}
.fuz-offers-container {
@@ -10,5 +10,5 @@
.fuz-offers-description {
@apply mb-10 text-base leading-relaxed;
color: var(--fuz-text);
color: var(--f-text);
}

2
src/styles/offers/offers-switches.css
View File

@@ -15,7 +15,7 @@
.fuz-switch {
@apply px-6 py-2 text-sm font-semibold cursor-pointer select-none transition-all;
color: var(--fuz-text);
color: var(--f-text);
/* opacity: 0.7; */
}

20
src/styles/offers/offers-table.css
View File

@@ -4,7 +4,7 @@
.fuz-table-wrapper {
@apply overflow-x-auto rounded-3xl shadow-lg mb-0;
background: var(--fuz-bg);
background: var(--f-background);
border: 1px solid rgba(0,0,0,0.07);
}
@@ -14,7 +14,7 @@
.fuz-table {
@apply min-w-full border-collapse;
color: var(--fuz-text);
color: var(--f-text);
}
@@ -24,16 +24,16 @@
========================================= */
.fuz-table-head {
background: color-mix(in srgb, var(--fuz-text) 6%, transparent);
background: color-mix(in srgb, var(--f-text) 6%, transparent);
}
:root.dark .fuz-table-head {
background: color-mix(in srgb, var(--fuz-text) 12%, transparent);
background: color-mix(in srgb, var(--f-text) 12%, transparent);
}
.fuz-table-heading {
@apply text-center font-semibold py-4 px-4 text-lg;
color: var(--fuz-text);
color: var(--f-text);
}
@@ -49,7 +49,7 @@
.fuz-plan-title {
@apply text-lg font-semibold mb-1;
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-plan-price {
@@ -77,11 +77,11 @@
========================================= */
.fuz-row-even {
background: color-mix(in srgb, var(--fuz-text) 4%, transparent);
background: color-mix(in srgb, var(--f-text) 4%, transparent);
}
:root.dark .fuz-row-even {
background: color-mix(in srgb, var(--fuz-text) 10%, transparent);
background: color-mix(in srgb, var(--f-text) 10%, transparent);
}
.fuz-row-odd {
@@ -90,7 +90,7 @@
.fuz-feature-name {
@apply py-3 px-4 text-lg font-medium;
color: var(--fuz-text);
color: var(--f-text);
border-top: 1px solid rgba(0,0,0,0.07);
}
@@ -100,7 +100,7 @@
.fuz-feature-cell {
@apply py-3 px-4 text-center text-lg;
color: var(--fuz-text);
color: var(--f-text);
border-top: 1px solid rgba(0,0,0,0.07);
}

27
src/styles/tailwind.css
View File

@@ -8,29 +8,4 @@ html {
body {
@apply bg-white text-gray-900 dark:bg-slate-900 dark:text-gray-100 antialiased;
}
/* Simple FUZ section helpers */
/* .fuz-section {
@apply py-16 md:py-24;
} */
/* .fuz-container {
@apply container mx-auto px-4;
}
.fuz-hero-title {
@apply text-3xl md:text-5xl font-bold tracking-tight;
}
.fuz-hero-subtitle {
@apply mt-4 text-lg md:text-xl text-gray-600 dark:text-gray-300;
}
.fuz-header {
@apply border-b border-slate-200/60 dark:border-slate-700/60 bg-white/70 dark:bg-slate-900/70 backdrop-blur;
}
.fuz-footer {
@apply border-t border-slate-200/60 dark:border-slate-700/60 py-6 mt-10 text-sm text-gray-500 dark:text-gray-400;
} */
}

126
src/styles/theme.css
View File

@@ -1,15 +1,60 @@
* {
--brand: #0af;
--brand: hsl(200 100% 50%);
--brand-hue: 200;
--brand-saturation: 100%;
--brand-lightness: 50%;
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
--border1-light: hsl(var(--brand-hue) 5% 80%);
--brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 0.2) calc(var(--brand-lightness) / 1.5));
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
--border1-dark: hsl(var(--brand-hue) 40% 70%);
}
:root {
--fuz-bg: #ffffff;
--fuz-text: #0d0d0d;
--f-background: var(--surface2-light);
--f-header: var(--brand-light);
--f-header-2: var(--text1-light);
--f-header-items: (var(--text2-light));
--f-text: var(--text2-light);
--btn-background: var(--surface2-light);
--btn-text: var(--text1-light);
--btn-outline-background: transparent;
--btn-outline-border: var(--border1-light);
--btn-outline-text: var(--text1-light);
--btn-outline-background-hover: var(--surface4-light);
--btn-outline-text-hover: var(--brand-light);
/* Invert Color */
--fuz-bg-invert: #0d1117;
--fuz-text-invert: #e6edf3;
--btn-bg-invert: #58a6ff;
--btn-text-invert: #0d1117;
--f-background-invert: #0d1117;
--f-text-invert: #e6edf3;
--btn-bg-invert: #58a6ff;
--btn-text-invert: #0d1117;
--btn-outline-invert: #58a6ff;
--btn-outline-bg-invert: rgba(88, 166, 255, 0.15);
/* Links */
--fuz-link: #0050c8;
--fuz-link-hover: #003f9a;
@@ -19,57 +64,66 @@
--fuz-accent-hover: #004bcc;
--fuz-accent-text: #ffffff;
/* Buttons */
--btn-bg: var(--fuz-accent);
--btn-text: var(--fuz-accent-text);
--btn-outline-border: var(--fuz-link);
--btn-outline-text: var(--fuz-link);
--btn-outline-bg-hover: rgba(0, 80, 200, 0.08);
--btn-ghost-text: var(--fuz-text);
--btn-ghost-text: var(--f-text);
--btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);
--fuz-border: rgb(229, 231, 235);
---f-border-color: rgb(209 213 219);
/* / var(--tw-border-opacity, 1)); */
}
:root.dark {
--fuz-bg: #0d1117;
--fuz-text: #e6edf3;
--f-background: var(--surface1-dark);
--f-header: var(--brand-dark);
--f-header-2: var(--text1-dark);
--f-header-items: (var(--text2-dark));
--f-text: var(--text1-dark);
--btn-background: var(--surface4-dark);
--btn-text: var(--text1-dark);
--btn-outline-background: transparent;
--btn-outline-border: var(--border1-dark);
--btn-outline-text: var(--text1-dark);
--btn-outline-background-hover: var(--surface4-dark);
--btn-outline-text-hover: var(--brand-dark);
/* Invert Color */
--fuz-bg-invert: #ffffff;
--fuz-text-invert: #0d0d0d;
--btn-bg-invert: #0066ff;
--f-background-invert: #ffffff;
--f-text-invert: #0d0d0d;
--btn-bg-invert: #0066ff;
--btn-text-invert: #ffffff;
--btn-outline-invert: #0066ff;
/* Links (GitHub Dark palette) */
--fuz-link: #58a6ff;
--fuz-link: var(--brand-dim);
--fuz-link-hover: #79b7ff;
/* Accent */
--fuz-accent: #58a6ff;
--fuz-accent: hsl(var(--hue) calc(var(--saturation) / 1.25) calc(var(--lightness) / 1.25));
--fuz-accent-hover: #79b7ff;
--fuz-accent-text: #0d1117;
/* Buttons */
--btn-bg: var(--fuz-accent);
--btn-text: var(--fuz-accent-text);
--btn-outline-border: var(--fuz-accent);
--btn-outline-text: var(--fuz-accent);
--btn-outline-bg-hover: rgba(88, 166, 255, 0.15);
--btn-ghost-text: var(--fuz-text);
--btn-ghost-hover-bg: rgba(255,255,255,0.08);
--fuz-border: rgb(229, 231, 235);
--btn-ghost-text: var(--f-text);
--btn-ghost-hover-bg: rgba(255, 255, 255, 0.08);
--f-border-color: rgb(209 213 219);
/* / var(--tw-border-opacity, 1)) */
}
/* Body */
body {
background-color: var(--fuz-bg);
color: var(--fuz-text);
background-color: var(--f-background);
color: var(--f-text);
}
/* Links */
@@ -84,9 +138,9 @@ a:hover {
/* Theme Toggle */
.theme-toggle-btn {
@apply text-xl p-2 rounded-full cursor-pointer transition-colors;
color: var(--fuz-text);
color: var(--f-text);
}
.theme-toggle-btn:hover {
opacity: 0.8;
}
}