quartznet/quartznet-info
2
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Remove container from nav

Browse Source 
- Replaced container for the nav component with a custom style instead using
max-width and margin: 0 auto.
This commit is contained in:
Chris Dill 2020-12-13 12:33:13 +00:00
parent f9e112d468
commit 0581f7aa7b
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Nav.svelte
View File

@ -17,26 +17,24 @@
}
</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 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>
<!-- 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>
<!-- 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>
</header>

5
static/css/global.css
View File

@ -44,6 +44,11 @@ hr {
background-color: var(--line-color);
}
nav {
max-width: 1200px;
margin: 0 auto;
}
li a:hover {
border-bottom: 3px solid var(--line-color);
text-decoration: none;