Optimize directory structure. Optimize Slogan.

src/assets/css/pages/header.scss

@@ -0,0 +1,93 @@
+@use "../mixins" as mixins;
+
+.nav {
+  display: flex;
+  position: fixed;
+  align-items: center;
+  z-index: 1;
+  width: 100%;
+  height: 70px;
+  min-width: 900px;
+  background-color: white;
+  border: {
+    bottom: {
+      width: 1px;
+      style: solid;
+      color: rgba(204, 204, 204, .33);
+    }
+  }
+  animation: .5s ease both;
+
+  @include mixins.unique-keyframes {
+    0% {
+      transform: translateY(-100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  .logo {
+    padding: 0 40px;
+
+    .title {
+      font-size: 2.8em;
+      font-family: century gothic, texgyreadventor, stheiti, sans-serif;
+    }
+  }
+
+  nav {
+    display: flex;
+    justify-content: end;
+    flex: 1;
+    transition: {
+      property: all;
+      duration: .5s;
+    };
+
+    .menu {
+      padding: 0 30px;
+
+      .item {
+        display: inline-block;
+        font-size: 1.5em;
+        transition: {
+          property: all;
+          duration: .3s;
+        };
+
+        a {
+          padding: 5px 20px;
+          color: rgba(102, 102, 102, .8);
+        }
+      }
+
+      .active {
+        border: {
+          bottom: {
+            width: 2px;
+            style: solid;
+            color: #CCC;
+          };
+        };
+      }
+
+      :hover {
+        transform: translateY(-5px);
+      }
+    }
+  }
+}
+
+.nav.hide {
+  animation: .5s ease both;
+
+  @include mixins.unique-keyframes {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-100%);
+    }
+  }
+}