multiple updates
This commit is contained in:
parent
05122d4048
commit
5a12828f17
|
@ -1,5 +1,5 @@
|
||||||
<article id="about">
|
<article id="about">
|
||||||
<div class="l-relative l-screen-min-full">
|
<div class="l-section l-relative l-screen-min-full">
|
||||||
|
|
||||||
<div class="l-underlay about-bg"></div>
|
<div class="l-underlay about-bg"></div>
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<article id="contact" class="l-relative l-screen-min-full">
|
<article id="contact" class="l-section l-relative l-screen-min-full">
|
||||||
|
|
||||||
<div class="l-underlay contact-bg"></div>
|
<div class="l-underlay contact-bg"></div>
|
||||||
|
|
||||||
|
|
|
@ -1,17 +1,17 @@
|
||||||
<header class="header">
|
<header class="header is-fixed">
|
||||||
<div class="l-underlay body-bg header-bg"></div>
|
<div class="l-underlay body-bg header-bg"></div>
|
||||||
<div class="l-wrapper">
|
<div class="l-wrapper">
|
||||||
<nav class="nav site-nav">
|
<nav class="nav site-nav">
|
||||||
<ul class="l-flex-list-row site-nav__title">
|
<ul class="l-flex-list-row site-nav-title">
|
||||||
<li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
|
<li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<label class="c-menu-toggle site-nav__menu-btn" for="menu-toggle"><span class="site-nav__menu-btn-text menu-text a">Menu</span><span class="menu-icon"></span></label>
|
<label class="menu-toggle site-nav-menu-btn" for="menu-toggle"><span class="site-nav-menu-btn-text menu-text a">Menu</span><span class="menu-icon"></span></label>
|
||||||
<input id="menu-toggle" class="c-menu-toggle__toggle" type="checkbox">
|
<input id="menu-toggle" class="menu-toggle-input" type="checkbox">
|
||||||
<ul class="l-flex-list-row nav__item c-menu-toggle__menu site-nav__nav-list">
|
<ul class="l-flex-list-row nav-item menu-toggle-menu site-nav-nav-list">
|
||||||
<li><a class="nav__link nav-link" href="{{ .Site.BaseURL }}">Home</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="#about">About</a></li>
|
||||||
<li><a class="nav__link nav-link" href="#services">Services</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>
|
<li><a class="nav-link nav-link" href="#contact">Contact</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<article id="services" class="l-relative l-screen-min-full">
|
<article id="services" class="l-section l-relative l-screen-min-full">
|
||||||
|
|
||||||
<div class="l-underlay services-bg"></div>
|
<div class="l-underlay services-bg"></div>
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,2 @@
|
||||||
@import "block";
|
|
||||||
@import "card";
|
@import "card";
|
||||||
@import "menu-toggle";
|
@import "menu-toggle";
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
.c-menu-toggle {
|
.menu-toggle {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
input.c-menu-toggle__toggle[type="checkbox"],
|
input.menu-toggle-input[type="checkbox"],
|
||||||
input.c-menu-toggle__toggle[type="radio"] {
|
input.menu-toggle-input[type="radio"] {
|
||||||
// display: none;
|
// display: none;
|
||||||
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -20,24 +20,24 @@ input.c-menu-toggle__toggle[type="radio"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $bp-menu-collpase) {
|
@media (max-width: $bp-menu-collpase) {
|
||||||
.c-menu-toggle {
|
.menu-toggle {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-menu-toggle__menu {
|
.menu-toggle-menu {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-menu-toggle__toggle:checked ~ .c-menu-toggle__menu {
|
.menu-toggle-input:checked ~ .menu-toggle-menu {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: $bp-menu-collpase) {
|
@media (min-width: $bp-menu-collpase) {
|
||||||
.c-menu-toggle {
|
.menu-toggle {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,25 @@
|
||||||
.header-bg {
|
.header-bg {
|
||||||
|
background-color: rgba(pink, 0.5);
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
z-index: $z-index__header;
|
z-index: $z-index__header;
|
||||||
|
position: relative;
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
&.is-fixed {
|
||||||
|
position: fixed;
|
||||||
|
|
||||||
|
.header-bg {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-absolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
|
@ -22,11 +33,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__item {
|
.nav-item {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__link {
|
.nav-link {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0.6em 1.5em;
|
padding: 0.6em 1.5em;
|
||||||
|
|
||||||
|
@ -36,7 +47,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav {
|
.site-nav {
|
||||||
&__menu-btn {
|
&-menu-btn {
|
||||||
@media (max-width: $bp-s) {
|
@media (max-width: $bp-s) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 6px 0 6px;
|
padding: 6px 0 6px;
|
||||||
|
@ -46,7 +57,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__nav-list {
|
&-nav-list {
|
||||||
@media (max-width: $bp-s) {
|
@media (max-width: $bp-s) {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 4rem;
|
top: 4rem;
|
||||||
|
@ -65,11 +76,10 @@
|
||||||
|
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
display: block;
|
display: block;
|
||||||
height: 1.1em;
|
height: 1.2em;
|
||||||
width: 1.1em;
|
width: 1.2em;
|
||||||
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background-color: pink;
|
background-color: currentColor;
|
||||||
opacity: 0.5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -27,6 +27,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO - need to move .l-section-pad rules into .l-section - so there is
|
||||||
|
// only the .l-section rules. Then that needs to be applied ONLY to the actual
|
||||||
|
// top level of a page section.
|
||||||
|
// then sub sections can have a margin-bottom on them to sort out the margins
|
||||||
|
// for them
|
||||||
|
// sub sections with individual backgrounds will have a padding applied to them
|
||||||
|
// that padding will be top, bottom and left, right
|
||||||
|
|
||||||
|
.l-section {
|
||||||
|
padding-top: 3.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.l-section-pad {
|
.l-section-pad {
|
||||||
padding-top: $padding-vertical-xs;
|
padding-top: $padding-vertical-xs;
|
||||||
padding-bottom: $padding-vertical-xs;
|
padding-bottom: $padding-vertical-xs;
|
||||||
|
@ -57,6 +69,14 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.l-overlay {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.l-underlay {
|
.l-underlay {
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
Reference in New Issue