website-cb-mirror/src/lib/Navbar.svelte

<script>
    import {Link} from "svelte-navigator";
</script>

<i>yo</i>
<ul>
    <li><Link to="/">inicio y sobre mí</Link></li>
    <li><Link to="/contact">contacto</Link></li>
</ul>

<i>mi cabeza</i>
<ul>
    <li><Link to="/blog">blog</Link></li>
    <li><Link to="/recommendations">recomendaciones</Link></li>
</ul>

<i>creaciones</i>
<ul>
    <li><Link to="/projects">proyectos</Link></li>
    <!--<li><Link to="/services">servicios</Link></li>-->
</ul>

<i>sitios</i>
<ul>
    <li><Link to="/links">enlaces</Link></li>
</ul>

<style>
    ul {
        padding: 0;
        list-style: none;
    }

    li {
        display: block;
        width: 175px;
        padding: 3px;
        margin: 10px 0;

        transition: all 150ms;
        background-color: #e74cac;
        border: solid 3px;
        border-color: #f38cc2 #dc158d #dc158d #f38cc2;
    }

    li:hover {
        border-color: #d76d9c #ff0088 #ff0088 #d76d9c;
    }

    li :global(a) {
        color: white;
    }
</style>