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">
|
<div class="l-wrapper">
|
||||||
<nav>
|
<nav class="nav">
|
||||||
<ul class="u-no-list l-flex l-flex-row">
|
<ul class="l-flex-list-row nav__item">
|
||||||
<li><a href="{{ .Site.BaseURL }}">Home</a></li>
|
<li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
|
||||||
<li><a href="#about">About</a></li>
|
</ul>
|
||||||
<li><a href="#services">Services</a></li>
|
<ul class="l-flex-list-row nav__item">
|
||||||
<li><a href="#contact">Contact</a></li>
|
<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>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,6 +15,15 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.l-underlay {
|
||||||
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
// #sizes
|
// #sizes
|
||||||
|
|
||||||
.l-screen-min-full {
|
.l-screen-min-full {
|
||||||
|
@ -54,3 +63,15 @@
|
||||||
flex-wrap: wrap;
|
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 "imports/reset.css";
|
||||||
@import "milligram";
|
@import "milligram";
|
||||||
|
|
||||||
|
@import "imports/variables.scss";
|
||||||
|
|
||||||
@import "imports/layout.scss";
|
@import "imports/layout.scss";
|
||||||
@import "imports/utility.scss";
|
@import "imports/utility.scss";
|
||||||
@import "imports/mixins.scss";
|
@import "imports/mixins.scss";
|
||||||
|
@ -29,4 +31,52 @@ html.is-animating .transition-fade {
|
||||||
height: 30em;
|
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:
|
// vim:set filetype=scss:
|
||||||
|
|
Reference in New Issue