diff --git a/README.md b/README.md index fe2d555..77e4c8d 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,24 @@ # Cima Progetti - Sito Aziendale -Sito web moderno e responsivo sviluppato con **Svelte + Vite** per presentare servizi, metodologia e contatti aziendali. +Sito web moderno, performante e accessibile sviluppato con **Svelte 5 + Vite** per presentare servizi, metodologia e contatti aziendali. Completamente responsivo con supporto completo per telefoni e tablet. ## ✨ FunzionalitΓ  principali -- πŸŒ“ **Tema light/dark** con persistenza locale -- πŸ“± **Design completamente responsivo** -- ⬆️ **Navbar collapsibile** con hide/show al scroll -- 🎨 **Sistema di componenti riusabili** -- πŸš€ **Routing client-side** con pagine dedicate e fallback 404 -- β™Ώ **AccessibilitΓ ** e buone pratiche web +- πŸŒ“ **Tema light/dark** con persistenza dual-storage (localStorage + cookie backup) +- πŸ“± **Design completamente responsivo** con breakpoint intelligenti +- ⬆️ **Header smart** β€” trasparente all'inizio, sfondo blur opaco dopo scroll +- πŸ” **Menu hamburger** con animazione fluida di apertura/chiusura +- 🎨 **Sistema di componenti riusabili** e theme-aware +- πŸš€ **Routing client-side** con History API e fallback 404 per pagine non create +- πŸ” **Cookie consent** con personalizzazione categorie +- β™Ώ **AccessibilitΓ ** β€” focus-visible preservato, tap highlight rimosso su touch +- ⚑ **Svelte 5 Runes** β€” reattivitΓ  state-driven con $state(), $derived() +- πŸ› **Global error handling** β€” trap di SyntaxError visibile su dev server ## πŸ› οΈ Requisiti -- `Node.js` 18+ (consigliato LTS) -- `npm` 9+ +- **Node.js** 18+ (consigliato LTS) +- **npm** 9+ ## πŸš€ Avvio rapido @@ -23,76 +27,201 @@ npm install npm run dev ``` -Applicazione disponibile su `http://localhost:5173`. +Applicazione disponibile su `http://localhost:5173` (accesso locale) e `http://192.168.XX.XXX:5173` (rete locale). ## πŸ“ Script disponibili -- `npm run dev` - avvia il server di sviluppo con hot reload -- `npm run build` - genera la build di produzione -- `npm run preview` - avvia un'anteprima della build +| Script | Descrizione | +|--------|-------------| +| `npm run dev` | Avvia il server di sviluppo con hot reload (esposto su 0.0.0.0:5173) | +| `npm run build` | Genera la build di produzione ottimizzata in `dist/` | +| `npm run preview` | Avvia preview della build (simula produzione in locale) | ## πŸ“ Struttura del progetto ``` -src/ -β”œβ”€β”€ App.svelte # Componente root con routing -β”œβ”€β”€ main.js # Punto di ingresso -β”œβ”€β”€ styles/ -β”‚ β”œβ”€β”€ global.css # Stili globali e variabili tema -β”‚ β”œβ”€β”€ App.css # Layout principale app -β”‚ └── error-pages.css # Stili pagine errore -β”œβ”€β”€ components/ -β”‚ β”œβ”€β”€ Header/ # Navbar con scroll hide/show -β”‚ β”œβ”€β”€ Hero/ # Sezione hero principale -β”‚ β”œβ”€β”€ Services/ # Griglia servizi -β”‚ β”œβ”€β”€ Footer/ # Footer con info aziendali -β”‚ β”œβ”€β”€ Button/ # Componente button riusabile -β”‚ └── ThemeToggle/ # Toggle tema light/dark -└── pages/ - β”œβ”€β”€ Contacts.svelte # Pagina contatti - β”œβ”€β”€ 403.svelte # Accesso negato - β”œβ”€β”€ 404.svelte # Pagina non trovata - β”œβ”€β”€ 500.svelte # Errore server - └── ErrorGeneric.svelte # Errore generico +cimaprogetti/ +β”œβ”€β”€ index.html # Template HTML entry point +β”œβ”€β”€ package.json # Dependencies e scripts +β”œβ”€β”€ vite.config.js # Configurazione Vite (SPA + host 0.0.0.0) +β”œβ”€β”€ svelte.config.js # Configurazione Svelte +β”‚ +β”œβ”€β”€ src/ +β”‚ β”œβ”€β”€ main.js # Entry point con error trap globale +β”‚ β”œβ”€β”€ App.svelte # Root component con routing e layout +β”‚ β”‚ +β”‚ β”œβ”€β”€ components/ +β”‚ β”‚ β”œβ”€β”€ Header/ +β”‚ β”‚ β”‚ β”œβ”€β”€ Header.svelte # Navbar sticky con tema + scroll detection +β”‚ β”‚ β”‚ └── Header.css # Stili header (blur backdrop, absolute menu) +β”‚ β”‚ β”‚ +β”‚ β”‚ β”œβ”€β”€ Button/ +β”‚ β”‚ β”‚ β”œβ”€β”€ Button.svelte # Button/link riusabile (16 prop) +β”‚ β”‚ β”‚ └── Button.css # Stili + focus-visible + no tap highlight +β”‚ β”‚ β”‚ +β”‚ β”‚ β”œβ”€β”€ CookiePopUp/ +β”‚ β”‚ β”‚ β”œβ”€β”€ CookiePopUp.svelte # Cookie consent con toggle personalizzato +β”‚ β”‚ β”‚ β”œβ”€β”€ CookiePopUp.css # Dialog mobile + desktop +β”‚ β”‚ β”‚ └── assets/ # SVG cookie icon +β”‚ β”‚ β”‚ +β”‚ β”‚ β”œβ”€β”€ Toggle/ +β”‚ β”‚ β”‚ β”œβ”€β”€ Toggle.svelte # Switch accessibile +β”‚ β”‚ β”‚ └── Toggle.css # Stili toggle (animated knob) +β”‚ β”‚ β”‚ +β”‚ β”‚ β”œβ”€β”€ ThemeToggle/ +β”‚ β”‚ β”‚ β”œβ”€β”€ ThemeToggle.svelte +β”‚ β”‚ β”‚ └── ThemeToggle.css +β”‚ β”‚ β”‚ +β”‚ β”‚ β”œβ”€β”€ Footer/ +β”‚ β”‚ β”‚ β”œβ”€β”€ Footer.svelte +β”‚ β”‚ β”‚ └── Footer.css +β”‚ β”‚ β”‚ +β”‚ β”‚ └── Hero/, Services/ # Componenti home +β”‚ β”‚ +β”‚ β”œβ”€β”€ pages/ +β”‚ β”‚ β”œβ”€β”€ index.svelte # Home page +β”‚ β”‚ β”œβ”€β”€ Contacts.svelte # Pagina contatti con team profiles +β”‚ β”‚ β”œβ”€β”€ 403.svelte, 404.svelte, 500.svelte, errore.svelte # Error pages +β”‚ β”‚ +β”‚ β”œβ”€β”€ lib/ +β”‚ β”‚ β”œβ”€β”€ theme.js # Theme persistence (localStorage + cookie) +β”‚ β”‚ β”œβ”€β”€ navigation.js # Client-side routing utilities +β”‚ β”‚ β”œβ”€β”€ cookieConsent.js # Cookie storage & consent management +β”‚ β”‚ └── errorRouting.js # Path normalization & aliases +β”‚ β”‚ +β”‚ └── styles/ +β”‚ β”œβ”€β”€ global.css # CSS variables, typography, resets +β”‚ β”œβ”€β”€ App.css # Layout principale +β”‚ β”œβ”€β”€ contacts.css # Pagina contatti (flex + absolute positioning) +β”‚ └── error-pages.css # Pagine errore (clamp typography) +β”‚ +└── public/ + └── images/ + β”œβ”€β”€ background/ # Background patterns + β”œβ”€β”€ icons/ # Logo, UI icons + └── contacts/ # Hero images (light/dark theme) ``` +## 🌐 Configurazione Network + +Il server Vite Γ¨ configurato per essere **accessibile dalla rete locale**: + +```js +// vite.config.js +server: { + host: '0.0.0.0', // Ascolta su tutte le interfacce + port: 5173, +} +``` + +### Accesso dal telefono sulla stessa Wi-Fi + +1. Avvia il dev server: `npm run dev` +2. Nel terminale vedrai l'indirizzo IP locale (es. `192.168.68.119`) +3. Dal telefono apri: `http://192.168.68.119:5173` + +**Nota:** Per produzione, usa `npm run build && npm run preview` per servire la versione compilata su `http://192.168.68.119:4173` (compatibile con browser vecchi). + ## πŸ—ΊοΈ Routing -Il routing Γ¨ gestito in `src/App.svelte` leggendo `window.location.pathname` e reagendo ai cambi di History API. +Il routing Γ¨ **client-side only** β€” nessuna pagina server. Gestito in `App.svelte` leggendo `window.location.pathname` e reagendo ai cambi di History API. -| Route | Componente | Descrizione | -|-------|-----------|-------------| -| `/` | `Hero` + `Services` | Home page | -| `/contatti`, `/contacts` | `Contacts` | Pagina contatti | -| `/403` | `Forbidden` | Accesso negato | -| `/404` | `NotFound` | Pagina non trovata | -| `/500` | `ServerError` | Errore server | -| `/errore` | `ErrorGeneric` | Errore generico | -| qualsiasi altra route | `NotFound` | Fallback 404 per pagine non ancora create | +### Tabella rotte -Le voci della navbar puntano a route reali come `/servizi`, `/metodo`, `/progetti` e `/chi-siamo`: se una pagina non esiste ancora, il contenuto mostrato Γ¨ il 404 ma l'URL resta quello richiesto. +| Route | Pagina | Comportamento | +|-------|--------|---------------| +| `/` | `index.svelte` | Home page (Hero + Services) | +| `/contatti` o `/contacts` | `Contacts.svelte` | Info contatti + team profiles | +| `/servizi`, `/metodo`, `/progetti`, `/chi-siamo` | `404.svelte` | Non create β€” mostra 404 ma mantiene URL | +| `/403`, `/404`, `/500`, `/errore` | Error pages | Pagine errore dedicate | +| Qualsiasi altra rotta | `404.svelte` | Fallback automatico | -## 🎨 Tema e Stili +### Meccanismo di routing -### Variabili CSS globali +```js +// src/App.svelte +const getRoute = (path) => { + const normalized = resolvePathname(path) // Normalizza trailing slash + if (normalized === '/') return 'home' + if (normalized === '/contatti' || normalized === '/contacts') return 'contacts' + // ... + return '404' // Fallback +} + +let currentRoute = $derived(getRoute(pathname)) +``` + +### Come aggiungere una nuova pagina + +1. **Crea il componente** in `src/pages/MyPage.svelte` +2. **Importa in App.svelte**: + ```svelte + import MyPage from "./pages/MyPage.svelte" + ``` +3. **Aggiungi la route** in `getRoute()`: + ```js + if (normalized === '/my-page') return 'mypage' + ``` +4. **Renderizza nel template**: + ```svelte + {:else if currentRoute === 'mypage'} + + ``` + +## 🎨 Sistema di Tema + +### Tema Persistente Dual-Storage + +Il tema viene salvato su **localStorage** (primario) e **cookie** (backup) simultaneamente. Questo assicura che il tema sopravviva anche se l'utente cancella parte dello storage del browser. + +```js +// src/lib/theme.js + +export const getSavedTheme = () => { + // Prova localStorage prima, poi cookie come fallback + return localStorage.getItem('theme') || getCookie('theme') +} + +export const saveTheme = (theme) => { + localStorage.setItem('theme', theme) + setCookie('theme', theme) // Backup redundante +} + +export const applyTheme = (theme) => { + document.documentElement.setAttribute('data-theme', theme) +} +``` + +### Variabili CSS Globali Tutte le variabili tema sono in `src/styles/global.css`: ```css :root { - --primary-color: #1343F0; /* Colore primario */ - --text-color: #111827; /* Testo light mode */ - --surface: #ffffff; /* Sfondo light mode */ + --navbar-height: 140px; + --primary-color: #1343F0; /* Blu Cima */ + --text-color: #111827; /* Grigio scuro */ + --surface: #ffffff; /* Background carta */ --background: rgba(246, 249, 255, 0.5); - /* ... altre variabili */ + --background-opaque: #00000033; + --muted-color: #6b7280; + --lateral-margin: 12rem; } :root[data-theme='dark'] { - --primary-color: #4983F2; - --text-color: #e6eef8; + --primary-color: #4983F2; /* Blu chiaro */ + --text-color: #e6eef8; /* Grigio molto chiaro */ --surface: #000; --background: rgba(0, 0, 0, 0.8); - /* ... altre variabili */ + --background-opaque: rgba(255, 255, 255, 0.2); +} + +/* Mobile breakpoint */ +@media (max-width: 900px) { + :root { + --navbar-height: 110px; + --lateral-margin: 1.5rem; + } } ``` @@ -100,126 +229,362 @@ Tutte le variabili tema sono in `src/styles/global.css`: ```svelte
- Contenuto che segue il tema + Contenuto automaticamente theme-aware
``` -## 🧩 Componenti principali +## 🧩 Componenti Principali -### Button +### Header (Navbar Intelligente) -Componente button/link riusabile con tema integrato. +La navbar è **sticky** e reagisce allo scroll con una transizione elegante: + +- **Trasparente all'inizio** (`background-color: transparent`) +- **Sfondo blur dopo 100px di scroll** (`backdrop-filter: blur(8px)`) +- **Scompare al scroll verso il basso** (nascosto con `translateY(-100%)`) +- **Riappare al scroll verso l'alto** (velocità rilevata) ```svelte - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/src/components/Hero/Hero.css b/src/components/Hero/Hero.css deleted file mode 100644 index d94f7a5..0000000 --- a/src/components/Hero/Hero.css +++ /dev/null @@ -1,111 +0,0 @@ -.hero { - background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%); - color: white; - padding: 120px 20px; - text-align: center; -} - -.hero-container { - max-width: 1200px; - margin: 0 auto; -} - -.hero-content h1 { - font-size: 48px; - margin: 0 0 20px 0; -} - -.hero-content p { - font-size: 24px; - margin: 0 0 40px 0; - opacity: 0.9; -} - -.cta-button { - background-color: #ff6b35; - color: white; - border: none; - padding: 14px 40px; - font-size: 18px; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; -} - -.cta-button:hover { - background-color: #e55a24; -} - -@media (max-width: 768px) { - .hero { - padding: 80px 20px; - } - - .hero-content h1 { - font-size: 32px; - } - - .hero-content p { - font-size: 18px; - } - - .cta-button { - padding: 12px 30px; - font-size: 16px; - } -}.hero { - background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%); - color: white; - padding: 120px 20px; - text-align: center; -} - -.hero-container { - max-width: 1200px; - margin: 0 auto; -} - -.hero-content h1 { - font-size: 48px; - margin: 0 0 20px 0; -} - -.hero-content p { - font-size: 24px; - margin: 0 0 40px 0; - opacity: 0.9; -} - -.cta-button { - background-color: #ff6b35; - color: white; - border: none; - padding: 14px 40px; - font-size: 18px; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; -} - -.cta-button:hover { - background-color: #e55a24; -} - -@media (max-width: 768px) { - .hero { - padding: 80px 20px; - } - - .hero-content h1 { - font-size: 32px; - } - - .hero-content p { - font-size: 18px; - } - - .cta-button { - padding: 12px 30px; - font-size: 16px; - } -} diff --git a/src/components/Hero/Hero.svelte b/src/components/Hero/Hero.svelte deleted file mode 100644 index 5a44f57..0000000 --- a/src/components/Hero/Hero.svelte +++ /dev/null @@ -1,11 +0,0 @@ - - -
-
-
- -
-
-
\ No newline at end of file diff --git a/src/components/Services/Services.css b/src/components/Services/Services.css deleted file mode 100644 index c3b76c0..0000000 --- a/src/components/Services/Services.css +++ /dev/null @@ -1,68 +0,0 @@ -.services { - padding: 80px 20px; - background-color: #ffffff; -} - -.services-container { - max-width: 1200px; - margin: 0 auto; -} - -.services h2 { - text-align: center; - font-size: 36px; - margin-bottom: 50px; - color: #333; -} - -.services-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 30px; -} - -.service-card { - background: #f9f9f9; - padding: 30px; - border-radius: 8px; - text-align: center; - transition: transform 0.3s, box-shadow 0.3s; -} - -.service-card:hover { - transform: translateY(-5px); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); -} - -.icon { - font-size: 48px; - margin-bottom: 15px; -} - -.service-card h3 { - font-size: 20px; - margin: 15px 0; - color: #0066cc; -} - -.service-card p { - color: #666; - line-height: 1.6; - margin: 0; -} - -@media (max-width: 768px) { - .services { - padding: 60px 20px; - } - - .services h2 { - font-size: 28px; - margin-bottom: 30px; - } - - .services-grid { - grid-template-columns: 1fr; - gap: 20px; - } -} diff --git a/src/components/Services/Services.svelte b/src/components/Services/Services.svelte deleted file mode 100644 index 3f9eb18..0000000 --- a/src/components/Services/Services.svelte +++ /dev/null @@ -1,45 +0,0 @@ - - -
-
-

I Nostri Servizi

-
- {#each services as service (service.id)} -
-
{service.icon}
-

{service.title}

-

{service.description}

-
- {/each} -
-
-
\ No newline at end of file diff --git a/src/main.js b/src/main.js index 008075d..fd0c16b 100644 --- a/src/main.js +++ b/src/main.js @@ -2,8 +2,24 @@ import './styles/global.css' import { mount } from 'svelte' import App from './App.svelte' -const app = mount(App, { - target: document.getElementById('app'), -}) +// Global error trap to catch syntax errors before app mount +window.addEventListener('error', (event) => { + const msg = `ERROR: ${event.error?.message || event.message}`; + console.error(msg, event.error); + alert(msg); +}, true); + +console.log("main.js is starting!"); + +try { + const app = mount(App, { + target: document.getElementById('app'), + }) + console.log("App mounted successfully!"); +} catch (e) { + const msg = `Mount Error: ${e.message}`; + alert(msg); + console.error("Error mounting App:", e); +} export default app diff --git a/src/pages/Contacts.svelte b/src/pages/Contacts.svelte index 5c2c9bd..75f3843 100644 --- a/src/pages/Contacts.svelte +++ b/src/pages/Contacts.svelte @@ -1,26 +1,110 @@
-

Contatti

-

Pagina contatti - contenuto da aggiungere

+
+
+
+

Contattaci

+ +
+

+ Siamo qui per ascoltarti. +

+
+
+

EMAIL

+ info@cimaprogetti.it +
+
+

WHATSAPP

+ +39 338 245 1171 +
+
+
+
+
+
+

PEOPLE BEHIND CIMA

+
+
+

Nicola Leone CIARDI

+
+ +

CO-FOUNDER & CEO

+
+

Management and computer science

+
+
+

EMAIL

+ nicolaleone.ciardi@cimaprogetti.it +
+
+

WHATSAPP

+ +39 338 245 1178 +
+
+
+ +
+

Valentina MADAUDO

+
+ +

CO-FOUNDER & CFO

+
+

Jr Engineer & economist for sustainable development

+
+
+

EMAIL

+ valentina.madaudo@cimaprogetti.it +
+
+

WHATSAPP

+ +39 339 358 0805 +
+
+
+
+
- - diff --git a/src/pages/index.svelte b/src/pages/index.svelte new file mode 100644 index 0000000..2638372 --- /dev/null +++ b/src/pages/index.svelte @@ -0,0 +1,9 @@ + + +
+

Home

+
\ No newline at end of file diff --git a/src/styles/App.css b/src/styles/App.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/styles/contacts.css b/src/styles/contacts.css new file mode 100644 index 0000000..47a6d81 --- /dev/null +++ b/src/styles/contacts.css @@ -0,0 +1,169 @@ +.contacts-page { + margin: 0 var(--lateral-margin) ; + padding-bottom: var(--lateral-margin); +} + +.contact-us { + display: flex; + gap: 40px; +} + +.contact-us-container { + display: flex; + flex-direction: row; + justify-content: center; + flex-direction: column; + flex: 1 1 30%; + min-height: 100vh; + min-height: 100dvh; + gap: 20px; +} + +.contact-us-container p { + margin: 0 0 20px 0; +} + +.contact-title { + width: fit-content; +} + +.contact-title span { + color: var(--primary-color); +} + +h4.contact-info-type { + color: var(--primary-color); + margin: 0; +} + +.contact-info-container { + display: flex; + flex-direction: column; + gap: 50px; +} + +.contact-info-item a { + color: var(--text-color); + text-decoration: none; + margin-top: 5px; + display: inline-block; + font-size: clamp(1.25rem, 2.5vw, 2rem); + font-family: 'IBM Plex Mono', monospace; + font-weight: bold; +} + +.contact-image { + flex: 0 0 clamp(240px, 24vw, 400px); + width: clamp(240px, 24vw, 400px); + aspect-ratio: 500 / 657; + background-image: url("/images/contacts/hero-lighttheme.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + align-self: center; +} + +:root[data-theme="dark"] .contact-image { + background-image: url("/images/contacts/hero-blacktheme.svg"); +} + +.contact-button { + margin-top: 50px; +} + +.contact-button:hover { + background-color: var(--background-opaque); + color: var(--surface); +} + +.behind-cima { + display: flex; + flex-direction: column; + gap: 50px; +} + +.profiles-container { + display: flex; + gap: clamp(20px, 3vw, 40px); + width: 100%; +} + +.behind-cima-profile { + display: flex; + flex-direction: column; + min-width: 0; + flex: 1 1 0; +} + +.profile-role { + display: flex; + align-items: center; +} + +.profile-role span { + margin: 0 1rem 0 0; + width: 5rem;; +} + +a.personal { + font-size: clamp(0.9rem, 2vw, 1.25rem); +} + +.behind-cima-profile p { + margin: 0 0 50px; +} + +.contact-info-container-personal { + display: flex; + flex-direction: column; + gap: 30px; +} + + + +@media (max-width: 1280px) { + +} + +@media (max-width: 1024px) { + +} + +@media (max-width: 900px) { + .contact-us { + position: relative; + flex-direction: column; + } + + .contact-us-container { + flex: 1 1 auto; + } + + .contact-image { + position: absolute; + top: 50%; + left: 80%; + transform: translate(-50%, -50%); + flex: none; + width: clamp(120px, 30vw, 400px); + z-index: 1; + } + + .profiles-container { + flex-direction: column; + gap: 8rem; + } + + .behind-cima-profile { + flex: 1 1 auto; + } +} + +@media (max-width: 600px) { + .contact-image { + top: 80%; + left: 80%; + transform: translate(-50%, -50%); + width: clamp(120px, 15vw, 180px); + } +} \ No newline at end of file diff --git a/src/styles/error-pages.css b/src/styles/error-pages.css index bd593c8..0b64c38 100644 --- a/src/styles/error-pages.css +++ b/src/styles/error-pages.css @@ -1,16 +1,12 @@ .error-page { min-height: 100vh; + min-height: 100dvh; display: flex; justify-content: center; align-items: center; position: relative; } -.error-page h1 { - margin: 0; - font-size: 3rem; -} - .error-content { display: flex; flex-direction: column; @@ -41,6 +37,7 @@ flex-direction: column; align-items: flex-start; line-height: 0.9; + transform: translateX(1rem); } .error-page .title-top { @@ -52,15 +49,6 @@ position: relative; } -.divider { - display: block; - position: relative; - width: 50%; - height: 5px; - background-color: var(--primary-color); - margin-top: 8px; -} - .error-message, .error-solution { text-align: center; @@ -79,12 +67,32 @@ } .error-code { - font-size: 4rem; + font-size: clamp(1rem, 5vw, 4rem); line-height: 0.4; } .error-text { - font-size: 15rem !important; + font-size: clamp(5rem, 20vw, 15rem) !important; opacity: 0.2; line-height: 0.8; -} \ No newline at end of file +} + +/* ============================================================ + MEDIA QUERIES + ============================================================ */ + +@media (max-width: 1280px) {} + +@media (max-width: 1024px) { + +} + +@media (max-width: 900px) { + .error-content { + margin: 0 var(--lateral-margin); + } +} + +@media (max-width: 480px) {} + +@media (max-width: 360px) {} \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index c2c6d0f..1a4098b 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -5,7 +5,14 @@ --muted-color: #6b7280; --surface: #ffffff; --background: rgba(246, 249, 255, 0.5); - --background-opaque: rgba(0, 0, 0, 0.2); + --background-opaque: #00000033; + --background-header: rgba(249, 249, 249, 0.5); + --lateral-margin: 12rem; +} + +/* Fix mobile overscroll area color (rubber-band / bounce effect) */ +html { + background-color: #f6f9ff; } /* Dark theme overrides (toggle by setting attribute on ) */ @@ -16,6 +23,15 @@ --surface: #000; --background: rgba(0, 0, 0, 0.8); --background-opaque: rgba(255, 255, 255, 0.2); + --background-header: rgba(51, 51, 51, 0.5); + background-color: #000; +} + +@media (max-width: 900px) { + :root { + --navbar-height: 110px; + --lateral-margin: 1.5rem; + } } * { @@ -29,7 +45,7 @@ body { font-family: Helvetica, 'Segoe UI'; color: var(--text-color); background-color: var(--surface); - background-image: url('/images/background/paper.png'); + background-image: linear-gradient(var(--background), var(--background)), url('/images/background/paper.png'); background-repeat: repeat; position: relative; } @@ -37,19 +53,15 @@ body { html, body, #app { - height: 100%; position: relative; z-index: 1; } -/* Background overlay layer that follows theme color */ -body::before { - content: ""; - position: fixed; - inset: 0; - background-color: var(--background); - pointer-events: none; - z-index: 0; +main { + min-height: 100vh; + min-height: 100dvh; + display: flow-root; + } /* Reusable theme asset helpers: @@ -84,6 +96,8 @@ html[data-theme='dark'] { } h1 { + margin: 0; + font-size: 3rem; font-family: 'IBM Plex Mono', monospace; } @@ -107,7 +121,42 @@ p, a { transition: background-color 0.2s ease; } -/* Usage: add data attribute with SVG path - Example:
- Then use inline style: -webkit-mask-image: var(--mask-url); mask-image: var(--mask-url); - OR use a specific class that sets the mask-image */ \ No newline at end of file +.divider { + display: block; + position: relative; + width: 50%; + height: 5px; + background-color: var(--primary-color); + margin-top: 8px; +} + +/* ============================================================ + MEDIA QUERIES + ============================================================ */ + +@media (max-width: 1280px) { + :root { + --lateral-margin: 8rem; + } + +} + +@media (max-width: 1024px) { + :root { + --lateral-margin: 5rem; + } +} + +@media (max-width: 900px) { + :root { + --lateral-margin: 1.5rem; + } +} + +@media (max-width: 480px) { + +} + +@media (max-width: 360px) { + +} \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000..14635f6 --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,7 @@ +.index-page { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + text-decoration: underline; +} \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index ddcce96..2ce689b 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,16 +3,9 @@ import { svelte } from '@sveltejs/vite-plugin-svelte' export default defineConfig(() => ({ plugins: [svelte()], + appType: 'spa', server: { + host: '0.0.0.0', port: 5173, - middlewares: [ - (req, res, next) => { - if (req.url === '/' || req.url.match(/\.\w+$/) || req.url.includes('/public/')) { - return next() - } - req.url = '/' - next() - } - ] } }))