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

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

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

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

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

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

    @media only screen and (max-width: 600px) {
        .top {
            display: flex;
            gap: 10px;
            overflow: scroll;
        }
    }
</style>