Update about page

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <NuxtLoadingIndicator />
+  <NuxtLoadingIndicator color="#FBDCFB"/>
   <NuxtLayout>
     <NuxtPage keepalive />
   </NuxtLayout>
@@ -12,7 +12,11 @@ import "aos/dist/aos.css";
 AOS.init();
 </script>
 
-<style>
+<style lang="scss">
+.app-background { 
+  background: rgba(41, 31, 68, 0.875);
+}
+
 .page-enter-active,
 .page-leave-active {
   transition: all 0.2s;
@@ -51,16 +55,6 @@ html {
   z-index: 0;
 }
 
-html::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-}
-
 body {
   position: relative;
   background-color: transparent;
@@ -104,8 +98,7 @@ table > tbody > tr:hover > * {
 }
 
 ul.dropdown-menu {
-  background: transparent;
+  @extend .app-background
-  backdrop-filter: blur(0.4rem);
 }
 
 .dropdown-menu {
@@ -119,44 +112,6 @@ ul.dropdown-menu {
   position: absolute;
 }
 
-.background-screen {
-  background-color: #0008;
-  z-index: -1;
-}
-
-.bg-screen {
-  background-color: #0004 !important;
-}
-
-.background-transparent {
-  background-color: transparent;
-  z-index: -1;
-}
-
-.background-blur {
-  backdrop-filter: blur(0.2rem);
-}
-
-.bg-blur {
-  backdrop-filter: blur(0.2rem);
-}
-
-.background-blur-2 {
-  backdrop-filter: blur(0.4rem);
-}
-
-.bg-blur-2 {
-  backdrop-filter: blur(0.4rem);
-}
-
-.bg-blur-3 {
-  backdrop-filter: blur(0.6rem);
-}
-
-.bg-blur-4 {
-  backdrop-filter: blur(0.8rem);
-}
-
 .z-index--10 {
   z-index: -10;
 }

components/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded py-2 px-4 border border-1 border-light border-opacity-25" style="background: rgba(41, 31, 68, 0.8)">
+  <div class="rounded py-2 px-4 app-background">
     <slot></slot>
   </div>
 </template>

layouts/default.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="h-100">
     <header class="container">

package.json

@@ -18,6 +18,6 @@
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
-    "sass": "^1.76.0"
+    "sass": "^1.79.4"
   }
 }

pages/about.vue

@@ -3,6 +3,7 @@
     <div class="row mb-4" data-aos="fade-down" data-aos-duration="1000">
         <div class="d-flex align-items-center flex-column">
             <div class="col-md-6">
+               <Card>
                     <h1 class="display-4">About <TheTitle /> </h1>
                     <p class="lead">The <TheTitle /> project was started after experiencing stumbling blocks
                         with a shelved project.
@@ -10,15 +11,16 @@
                     <p>Our purpose is to provide League of Legends game data that is easy 
                         to view for the common person. This game data is provided by CommunityDragon, another community resource. :3
                     </p>
+               </Card>
             </div>
         </div>
     </div>
 
     <div class="row">
         <div class="col-md-6 d-flex justify-content-center" data-aos="fade-right" data-aos-duration="1000">
-            <div style="width: 250px !important;" class="d-flex flex-column justify-content-center align-items-center gap-1 border border-light border-opacity-25 bg-blur-3 rounded">
+            <div style="width: 250px !important;" class="d-flex flex-column justify-content-center align-items-center rounded">
-                <img class="img-fluid rounded mb-2" src="/img/avatar.png"/>
+                <img class="img-fluid rounded" src="/img/avatar.png"/>
-                <div class="px-3">
+                <Card>
                     <div class="d-flex gap-2">
                         <NuxtLink class="text-decoration-none d-inline-block text-light m-0" to="https://blossomishymae.github.io"><h5 class="text-light mb-0">Blossomi Shymae</h5></NuxtLink>
                         <NuxtLink class="text-decoration-none d-inline-block text-light m-0" to="https://github.com/BlossomiShymae"><span><MaterialIcon name="github" :size="20" /> </span></NuxtLink>
@@ -26,26 +28,21 @@
                     <h5 class="fw-bold m-0 mb-2">Shy elf girl</h5>
                     <p>She likes to chat with her friends and do random programming projects, such as this one.
                     </p>
-                </div>
+                </Card>
             </div>
         </div>
 
         <div class="col-md-6 d-flex flex-column justify-content-around" data-aos="fade-left" data-aos-duration="1000"   >
-            <div>
+            <Card>
-                <h3 class="fw-light">Technology stack</h3>
+                <h3 class="fw-bold d-inline-flex align-items-center"><span class="me-2"><MaterialIcon name="cog" :size=32></MaterialIcon></span>Technology stack</h3>
-                <p>This website uses Nuxt.js, the meta-framework of universal application.</p>
+                <p>This website uses Nuxt.js, the meta-framework of universal applications.</p>
-                <p >Other libraries used include Bootstrap, the CSS framework, and Material Design for icons.</p>
+                <p>Other libraries used include AOS (Animate on Scroll), Bootstrap, and Material Design icons.</p>
-            </div>
+            </Card>
-            <div>
+            <Card>
-                <h3 class="fw-light">Contact</h3>
+                <h3 class="fw-bold d-inline-flex align-items-center"><span class="me-2"><MaterialIcon name="mail" :size=32></MaterialIcon></span>Contact</h3>
-                <p><a href="https://discord.gg/chEvEX5J4E">Blossomi Shymae can be reached via her Discord server.</a></p>
+                <p><a href="https://discord.gg/chEvEX5J4E" class="text-decoration-none text-light">Blossomi Shymae can be reached via her Discord server.</a></p>
-            </div>
+            </Card>
         </div>
     </div>
   </div>
 </template>
-
-<script>
-import MaterialIcon from '~/components/MaterialIcon.vue';
-import TheTitle from '~/components/TheTitle.vue';
-</script>