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

71 lines
1.4 KiB
Svelte

<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><a href="https://weblog.sofiaritz.com/">weblog</a></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: #dc3f99;
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>