diff --git a/package-lock.json b/package-lock.json index 752078f..9afaff2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "cimaprogetti", "version": "1.0.0", + "dependencies": { + "svelte-spa-router": "^4.0.0" + }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^7.0.0", "svelte": "^5.55.5", @@ -970,6 +973,15 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/regexparam": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz", + "integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/rolldown": { "version": "1.0.0-rc.17", "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.17.tgz", @@ -1042,6 +1054,18 @@ "node": ">=18" } }, + "node_modules/svelte-spa-router": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-4.0.2.tgz", + "integrity": "sha512-T1WYYk+ymwCr5m5U+n91k4dRAT6cw5HgmoPaI/TpKgAmuugymFoSBlfzkcKIK83QH4H8gUMn4tdQ0B9enFBM6g==", + "license": "MIT", + "dependencies": { + "regexparam": "2.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/ItalyPaleAle" + } + }, "node_modules/tinyglobby": { "version": "0.2.16", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz", diff --git a/src/App.svelte b/src/App.svelte index c5f0096..8cfb4d9 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -3,30 +3,80 @@ import Hero from "./components/Hero/Hero.svelte"; import Services from "./components/Services/Services.svelte"; import Footer from "./components/Footer/Footer.svelte"; - import "./styles/App.css"; import Header from "./components/Header/Header.svelte"; + import Contacts from "./pages/Contacts.svelte"; + import Forbidden from "./pages/403.svelte"; + import ServerError from "./pages/500.svelte"; + import ErrorGeneric from "./pages/errore.svelte"; + import NotFound from "./pages/404.svelte"; + + let pathname = '/' + + const normalizePath = (path) => { + if (!path) return '/' + const trimmed = path.trim() + return trimmed.endsWith('/') && trimmed.length > 1 + ? trimmed.slice(0, -1) + : trimmed + } + + const getRoute = (path) => { + const normalized = normalizePath(path) + + if (normalized === '/') return 'home' + if (normalized === '/contatti' || normalized === '/contacts') return 'contacts' + if (normalized === '/403') return '403' + if (normalized === '/500') return '500' + if (normalized === '/errore') return 'error' + return '404' + } + + $: currentRoute = getRoute(pathname) + $: isCenteredMain = ['403', '404', '500', 'error'].includes(currentRoute) onMount(() => { try { const saved = localStorage.getItem('theme') if (saved) { document.documentElement.setAttribute('data-theme', saved) - return + } else { + const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches + const theme = prefersDark ? 'dark' : 'light' + document.documentElement.setAttribute('data-theme', theme) + localStorage.setItem('theme', theme) } - const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches - const theme = prefersDark ? 'dark' : 'light' - document.documentElement.setAttribute('data-theme', theme) - localStorage.setItem('theme', theme) } catch (e) { document.documentElement.setAttribute('data-theme', 'light') } + + pathname = window.location.pathname + + const handlePopstate = () => { + pathname = window.location.pathname + } + + window.addEventListener('popstate', handlePopstate) + return () => window.removeEventListener('popstate', handlePopstate) })
-
- +
+ {#if currentRoute === 'home'} + + + {:else if currentRoute === 'contacts'} + + {:else if currentRoute === '403'} + + {:else if currentRoute === '500'} + + {:else if currentRoute === 'error'} + + {:else} + + {/if}
\ No newline at end of file diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css index d216c04..7972986 100644 --- a/src/components/Button/Button.css +++ b/src/components/Button/Button.css @@ -2,7 +2,6 @@ display: inline-flex; align-items: center; justify-content: center; - border: none; background-color: var(--button-color); color: var(--button-text-color); padding: var(--button-padding); @@ -10,7 +9,10 @@ font: inherit; cursor: pointer; font-weight: bold; - transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease; + transition: transform 0.2s, opacity 0.2s, background-color 0.2s, box-shadow 0.2s; + text-decoration: none; + border: none; + box-shadow: inset 0 0 0 var(--button-border-width) var(--primary-color); } .button:hover { @@ -23,6 +25,6 @@ } .button:focus-visible { - outline: 2px solid rgba(255, 255, 255, 0.85); + outline: 2px solid var(--primary-color); outline-offset: 3px; } \ No newline at end of file diff --git a/src/components/Button/Button.svelte b/src/components/Button/Button.svelte index e1b1c8a..c6226ed 100644 --- a/src/components/Button/Button.svelte +++ b/src/components/Button/Button.svelte @@ -1,16 +1,28 @@ - \ No newline at end of file +{#if href} + + {text} + +{:else} + +{/if} \ No newline at end of file diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 63c5a91..7ec4375 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -1,7 +1,6 @@ -p, a, h4 { +.footer p, .footer a, .footer h4 { font-size: 0.7rem; margin: 0; - transition: color 0.2s; } .footer { diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 45b2c3a..bd50965 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -1,7 +1,15 @@ .header { - position: sticky; + position: fixed; top: 0; + left: 0; + width: 100%; z-index: 100; + transform: translateY(0); + transition: transform 0.28s ease; +} + +.header.hidden { + transform: translateY(calc(-100% - 8px)); } .header-container { @@ -10,7 +18,7 @@ padding: 0 20px; display: flex; align-items: center; - height: 140px; + height: var(--navbar-height); } .logo-img{ diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte index 5067cfd..786552a 100644 --- a/src/components/Header/Header.svelte +++ b/src/components/Header/Header.svelte @@ -1,15 +1,45 @@ -
+