add basic header styling
This commit is contained in:
parent
7599b5ecbf
commit
d965ec4c75
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
$z-index__header: 100;
|
||||
|
||||
:root {
|
||||
--color__bg: #eee;
|
||||
}
|
|
@ -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:
|
||||
|
|
Reference in New Issue