add basic header styling

This commit is contained in:
Ray Elliott 2020-03-30 16:54:55 +00:00
parent 7599b5ecbf
commit d965ec4c75
4 changed files with 87 additions and 7 deletions

View File

@ -1,11 +1,15 @@
<header>
<header class="header">
<div class="l-underlay page-bg header-bg"></div>
<div class="l-wrapper">
<nav>
<ul class="u-no-list l-flex l-flex-row">
<li><a href="{{ .Site.BaseURL }}">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
<nav class="nav">
<ul class="l-flex-list-row nav__item">
<li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
</ul>
<ul class="l-flex-list-row nav__item">
<li><a class="nav__link nav-link" href="{{ .Site.BaseURL }}">Home</a></li>
<li><a class="nav__link nav-link" href="#about">About</a></li>
<li><a class="nav__link nav-link" href="#services">Services</a></li>
<li><a class="nav__link nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</div>

View File

@ -15,6 +15,15 @@
position: relative;
}
.l-underlay {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
// #sizes
.l-screen-min-full {
@ -54,3 +63,15 @@
flex-wrap: wrap;
}
.l-flex-list-row {
display: flex;
flex-direction: row;
justify-content: center;
padding-left: 0;
list-style: none;
> li {
margin-bottom: 0;
}
}

View File

@ -0,0 +1,5 @@
$z-index__header: 100;
:root {
--color__bg: #eee;
}

View File

@ -1,6 +1,8 @@
@import "imports/reset.css";
@import "milligram";
@import "imports/variables.scss";
@import "imports/layout.scss";
@import "imports/utility.scss";
@import "imports/mixins.scss";
@ -29,4 +31,52 @@ html.is-animating .transition-fade {
height: 30em;
}
// header
.header-bg {
opacity: 0.6;
}
.header {
z-index: $z-index__header;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.nav__item {
margin: 0;
}
.nav__link {
display: block;
padding: 0.6em 1.5em;
&:last-child {
padding-right: 0;
}
}
.nav-item {
}
// global
.site-title {
text-transform: capitalize;
}
.page-bg {
background-color: var(--color__bg);
}
// vim:set filetype=scss: