update page head and overlay design

Author: piotrkulpinski

header.php

@@ -23,4 +23,3 @@
     <?php wp_body_open(); ?>
 
     <?php Chipmunk\Helpers::get_template_part('partials/page-head'); ?>
-    <?php Chipmunk\Helpers::get_template_part('partials/page-overlay'); ?>

static/dist/css/theme.css

@@ -3,17 +3,21 @@
 ** ----------------------------------------------------------------------------- */
 
 .c-overlay {
-  position: fixed;
-  inset: 0;
+  @extend %bordered-box;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
   z-index: var(--chipmunk--layer--overlay);
   display: flex;
-  background-color: var(--chipmunk--color--background);
+  max-height: calc(100dvh - var(--chipmunk--logo-height) - #{spacer-clamped(3)});
+  background-color: var(--chipmunk--color--section);
   opacity: 0;
-  transform: translate3d(0, 2rem, 0);
+  transform: translate3d(0, 1rem, 0);
   pointer-events: none;
   backface-visibility: hidden;
   transition: opacity, transform;
-  transition-duration: var(--chipmunk--transition-duration);
+  transition-duration: 150ms;
 
   .has-nav-open & {
     opacity: 1;
@@ -32,21 +36,18 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  height: calc(100% - var(--header-height, 0px));
-  margin-top: var(--header-height, 0);
-  padding-top: spacer-clamped(5);
-  padding-bottom: spacer-clamped(5);
+  padding-top: spacer-clamped(2);
+  padding-bottom: spacer-clamped(2.5);
 }
 
 .c-overlay__menu {
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow: auto;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
 }
 
 .c-overlay__bottom {
-  &:not(:first-child) {
-    margin-top: 5vh;
-  }
+  padding-top: spacer-clamped(1.5);
 }

static/src/styles/components/_overlay.scss

@@ -16,7 +16,8 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--chipmunk--layout--column-gutter);
+  column-gap: var(--chipmunk--layout--column-gutter);
+  row-gap: spacer-clamped(1);
 
   @include bp(md) {
     flex-direction: row;

static/src/styles/components/_page-foot.scss

@@ -23,6 +23,8 @@
 }
 
 .c-page-head__inner {
+  position: relative;
+  z-index: var(--chipmunk--layer--head);
   padding-top: spacer-clamped(1.5);
   padding-bottom: spacer-clamped(1.5);
   position: relative;
@@ -31,8 +33,6 @@
   justify-content: space-between;
   gap: spacer-clamped(2);
   min-height: var(--chipmunk--logo-height);
-  transition-property: padding;
-  transition-duration: var(--chipmunk--transition-duration);
 }
 
 .c-page-head__logo {

static/src/styles/components/_page-head.scss

@@ -4,9 +4,9 @@
 
 .u-hamburger {
   // Variables
-  --hamburger-width: 1.75em;
-  --hamburger-height: 0.66em;
-  --hamburger-weight: 2px;
+  --hamburger-width: 1.25em;
+  --hamburger-height: 0.6em;
+  --hamburger-weight: 1.5px;
   --hamburger-color: currentColor;
   --hamburger-duration: 0.25s;
   --hamburger-radius: 3px;

static/src/styles/utilities/_hamburger.scss

@@ -88,4 +88,6 @@
             <?php endif; ?>
         </div>
     </div>
+
+    <?php Chipmunk\Helpers::get_template_part('partials/page-overlay'); ?>
 </header>