<script> import { Router, Route } from "svelte-navigator" import Home from "./lib/routes/Home.svelte" import Contact from "./lib/routes/Contact.svelte" import Navbar from "./lib/Navbar.svelte"; import Recommendations from "./lib/routes/Recommendations.svelte"; import Blog from "./lib/routes/Blog.svelte"; import Projects from "./lib/routes/Projects.svelte"; import Links from "./lib/routes/Links.svelte"; import FirstPost from "./lib/posts/FirstPost.svelte"; import NotFound from "./lib/routes/NotFound.svelte"; </script> <Router> <h1>sofi web</h1> <img class="left-skeleton" alt="Esqueleto" src="/assets/skeleton.gif" /> <img class="right-skeleton" alt="Esqueleto" src="/assets/skeleton.gif" /> <div> <nav> <Navbar/> </nav> <main> <Route path="/" component={Home} primary={false}/> <Route path="/contact" component={Contact} primary={false}/> <Route path="/blog" component={Blog} primary={false}/> <Route path="/recommendations" component={Recommendations} primary={false}/> <Route path="/projects" component={Projects} primary={false}/> <Route path="/links" component={Links} primary={false}/> <Route path="/blog/first-post" component={FirstPost}/> <Route path="*" component={NotFound} primary={false}/> </main> </div> </Router> <style> h1 { font-size: 50px; text-align: center; text-decoration: underline; text-decoration-color: #d52c9c; } div { display: flex; margin: 0 10px; gap: 15px; justify-content: center; } main { width: 40vw; } @media only screen and (max-width: 600px) { div { display: block; width: 100%; } main { width: 90%; } } img { width: 200px; position: fixed; bottom: -10px; } .left-skeleton { left: -10px; } .right-skeleton { right: -10px; } @media only screen and (max-width: 1000px) { img { width: 70px; top: 0; } } </style>