Browse Source

Putting main nav both in header and footer

image-sizing
Logan McGrath 5 months ago
parent
commit
1326420e18
  1. 8
      site/_layouts/default.html
  2. 6
      site/_partials/main-nav.html
  3. 2
      site/css/_theme.scss
  4. 21
      site/css/layout/_header.scss
  5. 19
      site/css/layout/_main-nav.scss

8
site/_layouts/default.html

@ -5,12 +5,7 @@ layout: skeleton
<div class="content-bound">
<div class="logo-icon"><a href="/"></a></div>
<h1 class="logo"><a href="/">This Field Was Green</a></h1>
<nav class="header-nav">
<a href='$getRoute("index.html")$'>Home</a>
<a href='$getRoute("blog/index.html")$'>Blog</a>
<a href='$getRoute("resume.md")$'>Resume</a>
<a href='$getRoute("contact.md")$'>Contact</a>
</nav>
$partial("_partials/main-nav.html")$
</div>
</header>
@ -22,6 +17,7 @@ layout: skeleton
<footer>
<div class="content-bound">
$partial("_partials/main-nav.html")$
<p class="copyright">Copyright &copy; <span class="copyright-date">2012</span> Logan McGrath. All rights reserved.</p>
<p class="generated-by-hakyll">
Site proudly generated by <a href="http://jaspervdj.be/hakyll">Hakyll</a>.

6
site/_partials/main-nav.html

@ -0,0 +1,6 @@
<nav class="main-nav">
<a href='$getRoute("index.html")$'>Home</a>
<a href='$getRoute("blog/index.html")$'>Blog</a>
<a href='$getRoute("resume.md")$'>Resume</a>
<a href='$getRoute("contact.md")$'>Contact</a>
</nav>

2
site/css/_theme.scss

@ -6,7 +6,9 @@
@import "elements/headers";
@import "elements/asides";
@import "elements/code";
@import "layout/header";
@import "layout/main";
@import "layout/main-nav";
@import "layout/footer";
@import "layout/post";

21
site/css/layout/_header.scss

@ -34,28 +34,11 @@ body > header {
&, & > a {
width: $logo-icon-width;
height: $logo-icon-width;
display: block
display: block;
}
}
nav {
.main-nav {
grid-column: 1 / span 1;
font-size: 0;
margin: 0;
a {
font-size: 0.9rem;
line-height: 1.2;
display: inline-block;
& + a {
margin-left: 0.5rem;
padding-left: 0.5rem;
border-left: $border-thin;
@include media("<tablet") {
margin-left: 0.2rem;
padding-left: 0.2rem;
border-left: none
}
}
}
}
}

19
site/css/layout/_main-nav.scss

@ -0,0 +1,19 @@
.main-nav {
font-size: 0;
margin: 0;
a {
font-size: 0.9rem;
line-height: 1.2;
display: inline-block;
& + a {
margin-left: 0.5rem;
padding-left: 0.5rem;
border-left: $border-thin;
@include media("<tablet") {
margin-left: 0.2rem;
padding-left: 0.2rem;
border-left: none
}
}
}
}
Loading…
Cancel
Save