cleanup: Move simple styles to it's component file

aplosdev · Apr 24, 2024 · 22dffff · 22dffff
1 parent a2559f5
commit 22dffff
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 148 deletions.
diff --git a/components/Footer.vue b/components/Footer.vue
@@ -39,3 +39,57 @@ const { theme } = useData();
     </small>
   </footer>
 </template>
+
+<style lang="scss">
+
+footer {
+  position: relative;
+  bottom: 0;
+  max-width: 100%;
+  right: 0;
+  padding: 20px;
+  margin: 0 10px 10px 10px;
+  border-top: 1px solid var(--color-border);
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 963px;
+
+  a {
+    text-decoration: underline 1.4px;
+    color: var(--color-accent);
+    font-weight: 700;
+  }
+
+  p {
+    margin: 0;
+
+    &:first-child {
+      margin-top: 10px;
+    }
+  }
+
+  #copyright,
+  #copyleft,
+  #powered {
+    font-weight: 500;
+
+    b {
+      font-weight: 700;
+    }
+  }
+
+  #powered {
+    color: var(--color-text-secondary);
+    font-weight: 500;
+  }
+
+  small {
+    margin-top: 0.625rem;
+  }
+
+  #author {
+    font-weight: 900;
+  }
+}
+</style>
diff --git a/components/Navigation.vue b/components/Navigation.vue
@@ -39,6 +39,105 @@
   </header>
 </template>
 
+<style lang="scss">
+header {
+  nav {
+    background-color: none;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    overflow: hidden;
+    position: fixed;
+    top: 3rem;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 2.5rem;
+    background-color: var(--color-header);
+    border: 0.4px solid var(--color-border);
+    z-index: 9999;
+    padding: 0.0625rem 1.5625rem;
+    text-align: center;
+
+    ul {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      li {
+        display: inline-block;
+
+        a {
+          display: block;
+          text-align: center;
+          color: var(--color-text-secondary);
+          text-decoration: none;
+          font-weight: 600;
+          font-size: 14px;
+          letter-spacing: -0.015rem;
+          margin: 0 0.3125rem;
+          transform: scale(1);
+          transition: color 0.7s ease, transform 100ms ease;
+
+          &:hover {
+            color: var(--color-accent);
+          }
+
+          &:active {
+            color: var(--color-accent);
+            transform: scale(0.9);
+          }
+
+          &.active {
+            color: var(--color-accent);
+          }
+        }
+      }
+    }
+  }
+
+  #title {
+    margin-right: 2.1875rem;
+    position: relative;
+
+    * {
+      font-size: 16px;
+      letter-spacing: -0.0325rem;
+      font-weight: 800;
+      color: var(--color-text);
+      margin: 0.5rem 0.3125rem 0.5rem 0.3125rem;
+      transform: scale(1);
+      transition: transform 100ms ease text-decoration 0.4s ease;
+
+      &:hover {
+        text-decoration: underline 0.075rem solid var(--color-accent);
+      }
+
+      &:active {
+        transform: scale(0.9);
+      }
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      height: 110%;
+      margin: 0;
+      width: 0.0625rem;
+      background-color: var(--color-border);
+      top: 0;
+      right: -1.25rem;
+    }
+  }
+
+  .fa-brands {
+    font-size: 15px;
+  }
+}
+</style>
+
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useData } from "vitepress";

diff --git a/styles/index.scss b/styles/index.scss
@@ -83,154 +83,6 @@ html {
   scroll-behavior: smooth;
 }
 
-header {
-  nav {
-    background-color: none;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    overflow: hidden;
-    position: fixed;
-    top: 3rem;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 2.5rem;
-    background-color: var(--color-header);
-    border: 0.4px solid var(--color-border);
-    z-index: 9999;
-    padding: 0.0625rem 1.5625rem;
-    text-align: center;
-
-    ul {
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      li {
-        display: inline-block;
-
-        a {
-          display: block;
-          text-align: center;
-          color: var(--color-text-secondary);
-          text-decoration: none;
-          font-weight: 600;
-          font-size: 14px;
-          letter-spacing: -0.015rem;
-          margin: 0 0.3125rem;
-          transform: scale(1);
-          transition: color 0.7s ease, transform 100ms ease;
-
-          &:hover {
-            color: var(--color-accent);
-          }
-
-          &:active {
-            color: var(--color-accent);
-            transform: scale(0.9);
-          }
-
-          &.active {
-            color: var(--color-accent);
-          }
-        }
-      }
-    }
-  }
-
-  #title {
-    margin-right: 2.1875rem;
-    position: relative;
-
-    * {
-      font-size: 16px;
-      letter-spacing: -0.0325rem;
-      font-weight: 800;
-      color: var(--color-text);
-      margin: 0.5rem 0.3125rem 0.5rem 0.3125rem;
-      transform: scale(1);
-      transition: transform 100ms ease text-decoration 0.4s ease;
-
-      &:hover {
-        text-decoration: underline 0.075rem solid var(--color-accent);
-      }
-
-      &:active {
-        transform: scale(0.9);
-      }
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      height: 110%;
-      margin: 0;
-      width: 0.0625rem;
-      background-color: var(--color-border);
-      top: 0;
-      right: -1.25rem;
-    }
-  }
-
-  .fa-brands {
-    font-size: 15px;
-  }
-}
-
-footer {
-  position: relative;
-  bottom: 0;
-  max-width: 100%;
-  right: 0;
-  padding: 20px;
-  margin: 0 10px 10px 10px;
-  border-top: 1px solid var(--color-border);
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 963px;
-
-  a {
-    text-decoration: underline 1.4px;
-    color: var(--color-accent);
-    font-weight: 700;
-  }
-
-  p {
-    margin: 0;
-
-    &:first-child {
-      margin-top: 10px;
-    }
-  }
-
-  #copyright,
-  #copyleft,
-  #powered {
-    font-weight: 500;
-
-    b {
-      font-weight: 700;
-    }
-  }
-
-  #powered {
-    color: var(--color-text-secondary);
-    font-weight: 500;
-  }
-
-  small {
-    margin-top: 0.625rem;
-  }
-
-  #author {
-    font-weight: 900;
-  }
-}
-
 .lang {
   color: var(--color-text-secondary);
   font-family: "Geist Mono", monospace;