fix: moved scss and css to seperate file, fixed overflow

chore: added folders to gitignore

Signed-off-by: moonleay <contact@moonleay.net>

src/components/Footer.astro

@@ -1,5 +1,5 @@
 ---
-
+import '../styles/components/Footer.scss'
 ---
 
 <footer>
@@ -70,101 +70,3 @@
     </p>
   </div>
 </footer>
-<style lang="scss">
-  footer {
-    align-items: center;
-    margin: 100px 1px 0 0;
-    background-color: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(5px);
-    bottom: 0;
-    width: 100%;
-    padding: 5px;
-
-    .footerIcon {
-      display: block;
-      text-align: center;
-
-      .footerImage {
-        max-width: initial;
-        max-height: initial;
-        width: 48px;
-        margin: 0.5rem auto;
-      }
-
-      .footerImageNote {
-        font-size: 0.75rem;
-      }
-    }
-
-    .footerTable {
-      padding: 20px 0;
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 20px;
-
-      h3 {
-        margin-bottom: 8px;
-      }
-    }
-
-    .footerLinks {
-      display: flex;
-      flex-direction: column;
-      align-items: baseline;
-
-      a {
-        position: relative;
-        color: #ffffff;
-        text-decoration: none;
-
-        &:hover {
-          color: #ffffff;
-        }
-
-        &::before {
-          content: "";
-          position: absolute;
-          display: block;
-          width: 100%;
-          height: 2px;
-          bottom: 0;
-          left: 0;
-          transform: scaleX(0);
-          transform-origin: left;
-          background-color: #ffffff;
-          transition: transform 0.3s ease;
-        }
-
-        &:hover::before {
-          transform: scaleX(1);
-        }
-      }
-    }
-
-    .footerNotice {
-      margin: 0 auto;
-      text-align: center;
-      font-size: 0.75rem;
-    }
-
-    @media (min-width: 768px) {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      column-gap: 0px;
-      margin: 0 auto;
-
-      .footerIcon {
-        grid-column: span 1;
-        justify-self: center;
-      }
-
-      .footerTable {
-        grid-column: span 3;
-      }
-
-      .footerNotice {
-        grid-column: span 4;
-      }
-    }
-  }
-</style>

src/components/NavBar.astro

@@ -1,3 +1,6 @@
+---
+import '../styles/components/NavBar.scss';
+---
 <nav>
   <ul>
     <li class="navElem">
@@ -30,55 +33,3 @@
     </li>
   </ul>
 </nav>
-<style lang="scss">
-  nav {
-    display: flex;
-    flex-direction: column;
-    background-color: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(5px);
-    position: sticky;
-    border-radius: 5px;
-
-    ul {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 0;
-
-      .navElem {
-        margin: 0.5rem 1rem;
-        transition: 0.5s;
-        color: white;
-
-        &:hover {
-          color: rgb(96 59 255) !important;
-        }
-
-        .textBx {
-          display: flex;
-          align-items: center;
-
-          #logo {
-            width: 32px;
-            height: 32px;
-            border-radius: 100%;
-            max-width: initial;
-            max-height: initial;
-            margin: 0.5rem;
-          }
-        }
-      }
-    }
-
-    @media (min-width: 768px) {
-      ul {
-        flex-direction: row;
-        padding: 0 2rem;
-
-        .navElem:last-child {
-          margin-left: auto;
-        }
-      }
-    }
-  }
-</style>