totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-13 10:45:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

experimental new structure

Browse Source
This commit is contained in:
Rich Harris
2018-05-04 22:36:17 -04:00
parent a08258c8da
commit 98813dd8fd
13 changed files with 71 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/Nav.html Normal file
View File

@@ -0,0 +1,56 @@
<nav>
<ul>
<li><a class='{page === "home" ? "selected" : ""}' href='.'>home</a></li>
<li><a class='{page === "about" ? "selected" : ""}' href='about'>about</a></li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li><a rel=prefetch class='{page === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
</ul>
</nav>
<style>
nav {
border-bottom: 1px solid rgba(170,30,30,0.1);
font-weight: 300;
padding: 0 1em;
}
ul {
margin: 0;
padding: 0;
}
/* clearfix */
ul::after {
content: '';
display: block;
clear: both;
}
li {
display: block;
float: left;
}
.selected {
position: relative;
display: inline-block;
}
.selected::after {
position: absolute;
content: '';
width: calc(100% - 1em);
height: 2px;
background-color: rgb(170,30,30);
display: block;
bottom: -1px;
}
a {
text-decoration: none;
padding: 1em 0.5em;
display: block;
}
</style>