rename: header — to hero section (#70)

rename: `header` — to hero section

Author: EmptyWork

src/_includes/layouts/primary.njk

@@ -20,7 +20,7 @@
 
     {% include 'components/nav.njk' %}
 
-    {% include 'sections/header.njk' %}
+    {% include 'sections/hero.njk' %}
 
     {{ content | safe }}
 

src/_includes/sections/header.njk renamed to src/_includes/sections/hero.njk

@@ -1,4 +1,4 @@
-<header class="header">
+<header class="hero">
   <div class="decoration">
     <div class="relative"></div>
   </div>
@@ -135,7 +135,7 @@
       <img src="/images/top-header-image.png" alt="">
     </section>
   </section>
-  <div class="header-svg_bottom">
+  <div class="hero-svg_bottom">
     <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
       <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
       <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>

src/assets/scss/modules/_header.scss

@@ -1,27 +1,4 @@
 .header {
-  overflow: hidden;
-  display: flex;
-  isolation: isolate;
-  align-items: center;
-  justify-content: center;
-  max-height: 50em;
-  flex-direction: column;
-  background-color: var(--clr-background);
-  z-index: 3;
-  position: relative;
-
-  .decoration {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    user-select: none;
-    pointer-events: none;
-
-    .relative {
-      position: relative;
-    }
-  }
-
   &_article {
     all: unset;
     position: relative;
@@ -41,32 +18,4 @@
       height: auto;
     }
   }
-
-  &-svg {
-    &_bottom {
-      z-index: -1;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      overflow: hidden;
-      line-height: 0;
-      transform: rotate(180deg);
-
-      svg {
-        position: relative;
-        display: block;
-        width: calc(100% + 0.08125rem);
-        height: 9.375rem;
-
-        @include breakpoint-down("small") {
-          height: 3.125rem;
-        }
-      }
-
-      .shape-fill {
-        fill: var(--clr-background-900);
-      }
-    }
-  }
 }

src/assets/scss/modules/component/_hero.scss

@@ -0,0 +1,52 @@
+.hero {
+  overflow: hidden;
+  display: flex;
+  isolation: isolate;
+  align-items: center;
+  justify-content: center;
+  max-height: 50em;
+  flex-direction: column;
+  background-color: var(--clr-background);
+  z-index: 3;
+  position: relative;
+
+  .decoration {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    user-select: none;
+    pointer-events: none;
+
+    .relative {
+      position: relative;
+    }
+  }
+
+  &-svg {
+    &_bottom {
+      z-index: -1;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      overflow: hidden;
+      line-height: 0;
+      transform: rotate(180deg);
+
+      svg {
+        position: relative;
+        display: block;
+        width: calc(100% + 0.08125rem);
+        height: 9.375rem;
+
+        @include breakpoint-down("small") {
+          height: 3.125rem;
+        }
+      }
+
+      .shape-fill {
+        fill: var(--clr-background-900);
+      }
+    }
+  }
+}

src/assets/scss/style.scss

@@ -14,6 +14,7 @@
 @import "./modules/component/preload";
 
 @import "./modules/component/aboutme";
+@import "./modules/component/hero";
 @import "./modules/component/featured";
 @import "./modules/component/post";
 @import "./modules/component/article";