quartznet/quartznet-info
Watch
2
0
Fork
You've already forked quartznet-info
 0
Code Issues Pull requests Packages Activity Actions

moved static files improved css

Browse source
This commit is contained in:
Ben Parsons 2020-08-20 15:42:54 +10:00
commit faf1fb29b8
15 changed files with 46 additions and 487 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/components/Nav.svelte
View file

@ -1,84 +1,42 @@
<script>
export let segment;
export let rightComponent;
export let segment;
export let rightComponent;
</script>
<style>
nav {
border-bottom: 1px solid rgba(255, 62, 0, 0.1);
font-weight: 300;
flex-flow: row nowrap;
position: relative;
justify-content: flex-start;
width: 100%;
margin-right: auto;
margin-left: auto;
}
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
align-items: flex-start;
}
/* clearfix */
ul::after {
content: '';
display: inline-block;
clear: both;
}
li {
font-size: 1rem;
text-align: center;
padding: 5px;
box-sizing: border-box;
list-style: none;
}
[aria-current] {
position: relative;
display: inline-block;
}
[aria-current]::after {
position: absolute;
content: '';
width: calc(100% - 1em);
height: 2px;
background-color: rgb(255, 62, 0);
display: block;
bottom: -1px;
}
a {
color: #CC99FF;
text-decoration: none;
padding: 1em 0.5em;
display: block;
}
/*
/*
.right {
margin-left: auto;
align-self: flex-end !important;
}
*/
a {
font-size: 1rem;
text-align: center;
}
</style>
<header>
<div class="container">
<nav class="navbar navbar-expand-md">
<div class="navbar-collapse order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">Quartznet</a></li>
<li><a aria-current="{segment === 'about' ? 'page' : undefined}" href="about">About</a></li>
<nav>
<ul>
<li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">Quartznet</a></li>
<li><a aria-current="{segment === 'about' ? 'page' : undefined}" 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 aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">Blog</a></li>
<li class="right">
<svelte:component this={rightComponent}/>
</li>
</ul>
</nav>
<!-- 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 aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">Blog</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li>
<svelte:component this={rightComponent}/>
</li>
</ul>
</div>
</nav>
</div>
</header>