Added sass and migrated styles

2023-11-09 15:53:13 +01:00 · 2023-11-09 15:53:13 +01:00 · 906ca7806e
commit 906ca7806e
parent ea5a815c2c
7 changed files with 162 additions and 160 deletions
--- a/package.json
+++ b/package.json
@ -10,7 +10,8 @@
    "astro": "astro"
  },
  "dependencies": {
-    "astro": "^3.4.4"
+    "astro": "^3.4.4",
+    "sass": "^1.69.5"
  },
  "devDependencies": {
    "prettier": "^3.0.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -7,7 +7,10 @@ settings:
 dependencies:
  astro:
    specifier: ^3.4.4
-    version: 3.4.4(typescript@5.2.2)
+    version: 3.4.4(sass@1.69.5)(typescript@5.2.2)
+  sass:
+    specifier: ^1.69.5
+    version: 1.69.5

 devDependencies:
  prettier:
@ -48,7 +51,7 @@ packages:
      astro: ^3.3.0
    dependencies:
      '@astrojs/prism': 3.0.0
-      astro: 3.4.4(typescript@5.2.2)
+      astro: 3.4.4(sass@1.69.5)(typescript@5.2.2)
      github-slugger: 2.0.0
      import-meta-resolve: 3.1.1
      mdast-util-definitions: 6.0.0
@ -907,7 +910,7 @@ packages:
    resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}
    dev: false

-  /astro@3.4.4(typescript@5.2.2):
+  /astro@3.4.4(sass@1.69.5)(typescript@5.2.2):
    resolution: {integrity: sha512-Xyhif8RtKpNLo/TXN0Klxt0uq/2xNzbJ1tZ2udn/QguT9a6iGeO+N1iRSU5a4FrZNKb5jyg7koLpwfEVJjj7cw==}
    engines: {node: '>=18.14.1', npm: '>=6.14.0'}
    hasBin: true
@ -965,7 +968,7 @@ packages:
      tsconfck: 3.0.0(typescript@5.2.2)
      unist-util-visit: 4.1.2
      vfile: 5.3.7
-      vite: 4.5.0
+      vite: 4.5.0(sass@1.69.5)
      vitefu: 0.2.5(vite@4.5.0)
      which-pm: 2.1.1
      yargs-parser: 21.1.1
@ -1801,6 +1804,10 @@ packages:
    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
    dev: false

+  /immutable@4.3.4:
+    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
+    dev: false
+
  /import-meta-resolve@3.1.1:
    resolution: {integrity: sha512-qeywsE/KC3w9Fd2ORrRDUw6nS/nLwZpXgfrOc2IILvZYnCaEMd+D56Vfg9k4G29gIeVi3XKql1RQatME8iYsiw==}
    dev: false
@ -3044,6 +3051,16 @@ packages:
      suf-log: 2.5.3
    dev: true

+  /sass@1.69.5:
+    resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.4
+      source-map-js: 1.0.2
+    dev: false
+
  /sax@1.3.0:
    resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
    dev: false
@ -3540,7 +3557,7 @@ packages:
      vfile-message: 4.0.2
    dev: false

-  /vite@4.5.0:
+  /vite@4.5.0(sass@1.69.5):
    resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
    engines: {node: ^14.18.0 || >=16.0.0}
    hasBin: true
@ -3571,6 +3588,7 @@ packages:
      esbuild: 0.18.20
      postcss: 8.4.31
      rollup: 3.29.4
+      sass: 1.69.5
    optionalDependencies:
      fsevents: 2.3.3
    dev: false
@ -3583,7 +3601,7 @@ packages:
      vite:
        optional: true
    dependencies:
-      vite: 4.5.0
+      vite: 4.5.0(sass@1.69.5)
    dev: false

  /web-namespaces@2.0.1:
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@ -2,7 +2,7 @@

 ---

-<footer class="footer">
+<footer>
  <div class="footerIcon">
    <img
      class="footerImage"
@ -57,7 +57,8 @@
        >
      </div>
    </div>
-  </div><div class="footerNotice">
+  </div>
+  <div class="footerNotice">
    <p>
      This website is NOT affiliated with Nintendo or any other party. All
      product names, logos, and brands are property of their respective owners.
@ -69,8 +70,8 @@
    </p>
  </div>
 </footer>
-<style>
-  .footer {
+<style lang="scss">
+  footer {
    align-items: center;
    margin: 100px 1px 0 0;
    background-color: rgba(0, 0, 0, 0.4);
@ -78,12 +79,10 @@
    bottom: 0;
    width: 100%;
    padding: 5px;
-  }

    .footerIcon {
      display: block;
      text-align: center;
-  }

      .footerImage {
        max-width: initial;
@ -95,35 +94,34 @@
      .footerImageNote {
        font-size: 0.75rem;
      }
+    }

    .footerTable {
      padding: 20px 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
-  }

-  .footerTable h3 {
+      h3 {
        margin-bottom: 8px;
      }
+    }

    .footerLinks {
      display: flex;
      flex-direction: column;
      align-items: baseline;
-  }

-  .footerLinks a {
+      a {
        position: relative;
        color: #ffffff;
        text-decoration: none;
-  }

-  .footerLinks a:hover {
+        &:hover {
          color: #ffffff;
        }

-  .footerLinks a::before {
+        &::before {
          content: "";
          position: absolute;
          display: block;
@ -137,9 +135,11 @@
          transition: transform 0.3s ease;
        }

-  .footerLinks a:hover::before {
+        &:hover::before {
          transform: scaleX(1);
        }
+      }
+    }

    .footerNotice {
      margin: 0 auto;
@ -148,12 +148,10 @@
    }

    @media (min-width: 768px) {
-    .footer {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      column-gap: 0px;
      margin: 0 auto;
-    }

      .footerIcon {
        grid-column: span 1;
@ -168,4 +166,5 @@
        grid-column: span 4;
      }
    }
+  }
 </style>
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@ -1,111 +1,84 @@
-<nav class="navMenu">
-  <ul class="grid">
+<nav>
+  <ul>
    <li class="navElem">
-      <div class="logoWtxt">
-        <a class:list={["pad3px", "textBx"]} href="/" target="_self"
-          ><img
-            class:list={["logo", "pad3px"]}
+      <a class="textBx" href="/" target="_self">
+        <img
+          id="logo"
          src="https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"
          alt="The Bots Logo"
-          />li'l Judd</a
-        >
-      </div>
+        />
+         li'l Judd
+      </a>
    </li>
    <li class="navElem">
-      <a class="navLink" href="/features" target="_self">Features</a>
+      <a href="/features" target="_self">Features</a>
    </li>
    <li class="navElem">
-      <a class="navLink" href="/how-do-i" target="_self">How do I...?</a>
+      <a href="/how-do-i" target="_self">How do I...?</a>
    </li>
    <li class="navElem">
-      <a class="navLink" href="/stack" target="_self">The Stack</a>
+      <a href="/stack" target="_self">The Stack</a>
    </li>
    <li class="navElem">
-      <a class="navLink" href="/about" target="_self">About</a>
+      <a href="/about" target="_self">About</a>
    </li>
-    <li class="navElemR">
+    <li class="navElem">
      <a
-        class="navLink"
        href="https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"
        target="_blank">Invite to your server</a
      >
    </li>
  </ul>
 </nav>
-<style>
-  .navMenu {
+<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;
-  }

-  .logo {
-    width: 32px;
-    height: 32px;
-    border-radius: 100%;
-    max-width: initial;
-    max-height: initial;
-    margin: 0.35rem;
-  }
-
-  .navElem {
+    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
-    justify-content: center;
-    transition: 0.5s;
-  }
-
-  .navElem:hover {
-    color: rgb(96 59 255) !important;
-  }
-
-  .navElemR {
-    transition: 0.5s;
-  }
-
-  .navElemR:hover {
-    color: rgb(96 59 255) !important;
-  }
-
-  .logoWtxt {
-    display: flex;
-    align-items: center;
-    margin: 0;
      padding: 0;
-  }

-  .pad3px {
-    padding: 3px;
+      .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) {
-    .grid {
-      display: grid;
-      /*grid-template-columns: repeat(6, 1fr);*/
-      grid-template-columns: repeat(8, 1fr);
-    }
+      ul {
+        flex-direction: row;
+        padding: 0 2rem;

-    .navElem {
-      grid-column: span 1;
-      margin: 0.5rem 0.5rem 0.5rem 0.5rem;
-      align-items: center;
-      text-align: center;
+        .navElem:last-child {
+          margin-left: auto;
+        }
      }
-
-    .navElemR {
-      grid-column: 8;
-      margin: 0.5rem 0.5rem 0.5rem 0.5rem;
-      align-items: center;
-      text-align: center;
    }
  }
 </style>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -24,7 +24,7 @@ import NavBar from "@components/NavBar.astro";
    <Footer />
  </body>
 </html>
-<style>
+<style lang="scss">
  .contentDiv {
    display: flex;
    flex-direction: column;
@ -72,4 +72,13 @@ import NavBar from "@components/NavBar.astro";
  ul {
    font-family: "Splatoon", sans-serif;
  }
+
+  li {
+    list-style-type: none;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
 </style>
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@ -8,6 +8,8 @@ import Layout from "@layouts/Layout.astro";
    <p>
      EMail: <a href="mailto:contact@moonleay.net">contact@moonleay.net</a>
    </p>
-    <p>Discord: <a>@moonleay</a></p>
+    <p>
+      Discord: <a>@moonleay</a>
+    </p>
  </section>
 </Layout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -14,7 +14,7 @@ import Layout from "@layouts/Layout.astro";
    </div>
  </section>
 </Layout>
-<style>
+<style lang="scss">
  .section {
    display: flex;
    flex-direction: column;