website-cb-mirror/src/App.svelte

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