+
diff --git a/site/layouts/partials/contact.html b/site/layouts/partials/contact.html
index 19a4e0d..a222595 100644
--- a/site/layouts/partials/contact.html
+++ b/site/layouts/partials/contact.html
@@ -1,4 +1,4 @@
-
+
diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index eca40fb..9340239 100644
--- a/site/layouts/partials/header.html
+++ b/site/layouts/partials/header.html
@@ -1,17 +1,17 @@
-
+
diff --git a/site/layouts/partials/services.html b/site/layouts/partials/services.html
index 0d054e7..d02d74e 100644
--- a/site/layouts/partials/services.html
+++ b/site/layouts/partials/services.html
@@ -1,4 +1,4 @@
-
+
diff --git a/src/css/imports/components/base.scss b/src/css/imports/components/base.scss
index c8f2259..7febbd4 100644
--- a/src/css/imports/components/base.scss
+++ b/src/css/imports/components/base.scss
@@ -1,3 +1,2 @@
-@import "block";
@import "card";
@import "menu-toggle";
diff --git a/src/css/imports/components/menu-toggle.scss b/src/css/imports/components/menu-toggle.scss
index a1f3bb7..78a20e2 100644
--- a/src/css/imports/components/menu-toggle.scss
+++ b/src/css/imports/components/menu-toggle.scss
@@ -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;
}
}
diff --git a/src/css/imports/header.scss b/src/css/imports/header.scss
index ffce01c..9647617 100644
--- a/src/css/imports/header.scss
+++ b/src/css/imports/header.scss
@@ -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;
}
diff --git a/src/css/imports/layout.scss b/src/css/imports/layout.scss
index caa76ac..25e2418 100644
--- a/src/css/imports/layout.scss
+++ b/src/css/imports/layout.scss
@@ -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;