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> </style>
<header> <header>
<div class="container"> <nav class="navbar navbar-expand-md">
<nav class="navbar navbar-expand-md"> <div class="navbar-collapse order-1 order-md-0 dual-collapse2">
<div class="navbar-collapse order-1 order-md-0 dual-collapse2"> <ul class="navbar-nav mr-auto">
<ul class="navbar-nav mr-auto"> <li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">Quartznet</a></li>
<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>
<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 <!-- 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 --> 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><a rel=prefetch aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">Blog</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2"> <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li> <li>
<svelte:component this={rightComponent}/> <svelte:component this={rightComponent}/>
</li> </li>
</ul> </ul>
</div> </div>
</nav> </nav>
</div>
</header> </header>

5
static/css/global.css
View File

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