multiple updates
This commit is contained in:
parent
05122d4048
commit
5a12828f17
|
|
@ -1,5 +1,5 @@
|
|||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<header class="header">
|
||||
<header class="header is-fixed">
|
||||
<div class="l-underlay body-bg header-bg"></div>
|
||||
<div class="l-wrapper">
|
||||
<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>
|
||||
</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>
|
||||
<input id="menu-toggle" class="c-menu-toggle__toggle" type="checkbox">
|
||||
<ul class="l-flex-list-row nav__item c-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="#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>
|
||||
<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="menu-toggle-input" type="checkbox">
|
||||
<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="#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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,2 @@
|
|||
@import "block";
|
||||
@import "card";
|
||||
@import "menu-toggle";
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.c-menu-toggle {
|
||||
.menu-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input.c-menu-toggle__toggle[type="checkbox"],
|
||||
input.c-menu-toggle__toggle[type="radio"] {
|
||||
input.menu-toggle-input[type="checkbox"],
|
||||
input.menu-toggle-input[type="radio"] {
|
||||
// display: none;
|
||||
|
||||
position: fixed;
|
||||
|
|
@ -20,24 +20,24 @@ input.c-menu-toggle__toggle[type="radio"] {
|
|||
}
|
||||
|
||||
@media (max-width: $bp-menu-collpase) {
|
||||
.c-menu-toggle {
|
||||
.menu-toggle {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.c-menu-toggle__menu {
|
||||
.menu-toggle-menu {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c-menu-toggle__toggle:checked ~ .c-menu-toggle__menu {
|
||||
.menu-toggle-input:checked ~ .menu-toggle-menu {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $bp-menu-collpase) {
|
||||
.c-menu-toggle {
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,25 @@
|
|||
.header-bg {
|
||||
background-color: rgba(pink, 0.5);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.header {
|
||||
z-index: $z-index__header;
|
||||
|
||||
position: fixed;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
&.is-fixed {
|
||||
position: fixed;
|
||||
|
||||
.header-bg {
|
||||
}
|
||||
}
|
||||
|
||||
&.is-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
|
|
@ -22,11 +33,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nav__item {
|
||||
.nav-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 0.6em 1.5em;
|
||||
|
||||
|
|
@ -36,7 +47,7 @@
|
|||
}
|
||||
|
||||
.site-nav {
|
||||
&__menu-btn {
|
||||
&-menu-btn {
|
||||
@media (max-width: $bp-s) {
|
||||
margin: 0;
|
||||
padding: 6px 0 6px;
|
||||
|
|
@ -46,7 +57,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__nav-list {
|
||||
&-nav-list {
|
||||
@media (max-width: $bp-s) {
|
||||
position: fixed;
|
||||
top: 4rem;
|
||||
|
|
@ -65,11 +76,10 @@
|
|||
|
||||
.menu-icon {
|
||||
display: block;
|
||||
height: 1.1em;
|
||||
width: 1.1em;
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
|
||||
border-radius: 3px;
|
||||
background-color: pink;
|
||||
opacity: 0.5;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
padding-top: $padding-vertical-xs;
|
||||
padding-bottom: $padding-vertical-xs;
|
||||
|
|
@ -57,6 +69,14 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.l-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.l-underlay {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
|
|
|
|||
Reference in New Issue