Fixes performance

Netcentric · Dec 10, 2024 · 31d64b7 · 31d64b7
1 parent caa39ef
commit 31d64b7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 19 deletions.
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -2,7 +2,17 @@
 header {
   --header-border-bottom-size: 2px;
 
+  display: flex;
+  align-items: center;
   border-bottom: var(--header-border-bottom-size) solid var(--col-neutral20);
+
+  @media (min-width: 1280px) {
+    align-items: flex-end;
+  }
+}
+
+.header {
+  flex: 1;
 }
 
 .nav-wrapper {
@@ -11,24 +21,19 @@ header {
 }
 
 .nav {
-  --nav-padding-block: 26px;
+  --nav-gap: 0 26px;
 
+  box-sizing: border-box;
   display: grid;
   grid-template:
-    'brand tools hamburger' var(--nav-height) / auto 1fr auto;
+    'brand tools hamburger' 1fr / auto 1fr auto;
   align-items: center;
-  gap: 26px;
+  gap: var(--nav-gap);
   margin: auto;
   max-width: var(--content-max-width);
-  height: var(--nav-height);
-  padding-block: var(--nav-padding-block);
   padding-inline: var(--content-padding-inline);
   font-family: var(--body-font-family);
 
-  @media (min-width: 1280px) {
-    --nav-padding-block: 26px 0;
-  }
-
   &[aria-expanded='true'] {
     grid-template:
       'brand hamburger' var(--nav-height)
@@ -44,10 +49,11 @@ header {
     }
 
     @media (min-width: 1280px) {
+      --nav-gap: 16px;
+
       grid-template:
-        'brand tools' var(--nav-height)
+        'brand tools' auto
         'sections sections' 1fr / 1fr auto;
-      min-height: 0;
       overflow: visible;
     }
   }
@@ -361,11 +367,15 @@ header {
 /* tools */
 .nav-tools {
   --nav-tools-gap: 12px;
+  --nav-tools-padding-block: 20px;
 
   display: none;
   grid-area: tools;
+  padding-block: var(--nav-tools-padding-block);
 
   @media (min-width: 768px) {
+    --nav-tools-padding-block: 0;
+
     display: block;
   }
 
@@ -412,5 +422,9 @@ header {
   nav[aria-expanded='true'] & {
     display: block;
     align-self: flex-start;
+
+    @media (min-width: 768px) {
+      align-self: auto;
+    }
   }
 }
diff --git a/styles/styles.css b/styles/styles.css
@@ -76,7 +76,7 @@
   }
 
   /* nav height */
-  --nav-height: auto;
+  --nav-height: 80px;
 
   /* DN Theme variables */
 
@@ -139,8 +139,11 @@ body.appear {
 }
 
 header {
-  height: var(--nav-height);
-  min-height: 84px;
+  min-height: var(--nav-height);
+
+  @media (min-width: 1280px) {
+    --nav-height: 105px;
+  }
 }
 
 header .header,
@@ -390,11 +393,7 @@ button.button--tertiary:disabled:hover {
 
 main img {
   max-width: 100%;
-
-  /* width: auto; */
-  /* height: auto; */
-
-  height: 100%;
+  height: auto;
 }
 
 main {