Update theme

app.vue

@@ -32,4 +32,136 @@ AOS.init();
 .layout-leave-to {
   transform: translateX(-100%);
 }
+
+* {
+  color: white;
+}
+
+html {
+  font-size: 14px;
+
+  background-image: none;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: center;
+  min-height: 100%;
+
+  position: relative;
+  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;
+  z-index: 10;
+}
+
+@media (min-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+}
+
+.btn:focus, 
+.btn:active:focus, 
+.btn-link.nav-link:focus, 
+.form-control:focus, 
+.form-check-input:focus,
+a:focus-visible {
+  box-shadow: 0.05rem 0.05rem 0.375rem 0.1rem rgba(255, 255, 255, 0.744) !important;
+  outline: none;
+}
+
+svg {
+  filter: invert(100%);
+}
+
+table {
+  background-color: #0004 !important;
+}
+
+thead, tbody, th, td {
+  background-color: transparent !important;
+}
+
+table > tbody > tr:nth-of-type(2n+1) > * {
+  background-color: #0004 !important;
+}
+
+table > tbody > tr:hover > * {
+  background-color: #0008 !important;
+}
+
+ul.dropdown-menu {
+  background: transparent;
+  backdrop-filter: blur(0.4rem);
+}
+
+.dropdown-menu {
+  width: 200px; 
+}
+
+.background {
+  height: 100%;
+  width: 100%;
+
+  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;
+}
+
+.z-index-10 {
+  z-index: 10;
+}
 </style>

components/Card.vue

@@ -0,0 +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)">
+    <slot></slot>
+  </div>
+</template>

layouts/default.vue

@@ -1,10 +1,9 @@
 
 <template>
   <div class="h-100">
-    <header>
+    <header class="container">
-        <div class="background background-transparent background-blur-2"></div>
+        <Card>
-        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom border-light border-opacity-25 border-2 box-shadow">
+          <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light m-0 p-0">
-            <div class="container">
             <NuxtLink class="navbar-brand fw-light" to="/" >
               <img class="me-1" src="/favicon.png" width="24" height="24"/>
               <TheTitle />
@@ -109,8 +108,8 @@
                     </div>
                 </ul>
             </div>
-            </div>
           </nav>
+        </Card>
     </header>
     <div class="container">
         <main role="main" class="pt-3 pb-3">
@@ -118,7 +117,8 @@
         </main>
     </div>
 
-    <footer class="container border border-light border-opacity-25 rounded p-4 pb-2 mt-2 mb-4 bg-blur-4">
+    <footer class="container">
+        <Card>
           <div class="d-flex justify-content-around align-items-center gap-2 mb-3 flex-wrap">
               <NuxtLink class="text-decoration-none text-light" to="/about">About</NuxtLink>
               <a class="text-decoration-none text-light" href="https://challenges.darkintaqt.com" referrerpolicy="no-referrer">Challenge Tracker</a>
@@ -130,39 +130,15 @@
               <!-- <a class="text-decoration-none text-light" href="https://discord.com/invite/riotgamesdevrel" referrerpolicy="no-referrer">DevRel Discord</a> -->
           </div>
 
-        <div class="d-flex justify-content-center align-items-center pt-2 border-top border-light border-opacity-25">
+          <div class="d-flex flex-column justify-content-center align-items-center pt-2 border-top border-light border-opacity-25">
-            <p class="text-muted fw-light" style="font-size: 0.8rem;"><TheTitle/> was created under Riot Games' "Legal Jibber Jabber" policy using assets owned by Riot Games. Riot Games does not endorse or sponsor this project. </p>
+              <p class="text-muted fw-light mb-1" style="font-size: 0.8rem;"><TheTitle/> was created under Riot Games' "Legal Jibber Jabber" policy using assets owned by Riot Games. Riot Games does not endorse or sponsor this project. </p>
+              <a class="text-decoration-none text-light" href="https://www.artstation.com/sundownpink"><p class="fw-light mb-1" style="font-size: 0.8rem;">Artwork by Chao Liu.</p></a>
           </div>
+        </Card>
     </footer>
   </div>
 </template>
 
-<script>
-import MaterialIcon from '~/components/MaterialIcon.vue';
-import TheTitle from '~/components/TheTitle.vue';
-
-// Hardcode splash art links for performance reasons. This is the layout after all.
-const splashes = [
-  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498000.jpg", // Xayah - Sunday
-  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498001.jpg", // Cosmic Dusk - Monday
-  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498002.jpg", // Sweetheart - Tuesday
-  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498004.jpg", // Star Guardian - Wednesday
-  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498028.jpg", // Arcana - Thursday
-  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498037.jpg", // Broken Convenant - Friday
-  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498038.jpg", // Redeemed Star Guardian - Saturday
-];
-
-const date = new Date();
-const day = date.getDay();
-
-useHead({
-  htmlAttrs: {
-    "data-bs-theme": "dark",
-    "style": `background-image: url('${splashes[day]}')` // Use splash of corresponding day
-  }
-});
-</script>
-
 <style lang="scss">
 a.navbar-brand {
   white-space: normal;

nuxt.config.ts

@@ -15,7 +15,7 @@ export default defineNuxtConfig({
     head: {
       htmlAttrs: {
         "data-bs-theme": "dark",
-        "style": "background-image: url('https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498000.jpg');"
+        "style": "background-image: url('/clean-cuts/img/background.jpg');"
       },
       bodyAttrs: {
         class: "h-100"
@@ -36,10 +36,6 @@ export default defineNuxtConfig({
             "sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM",
           crossorigin: "anonymous",
         },
-        {
-          rel: "stylesheet",
-          href: "/clean-cuts/css/app.css",
-        },
         {
           rel: "icon",
           type: "image/png",

pages/index.vue

@@ -2,13 +2,13 @@
   <div>
     <div class="d-flex flex-column justify-content-center align-items-center gap-2" style="margin-top: 25%;"
       data-aos="fade-down" data-aos-duration="1000">
-        <div class="d-flex flex-column justify-content-center align-items-center">
+        <Card class="d-flex flex-column justify-content-center align-items-center">
             <h1 class="display-4">
               <img class="me-4" src="/favicon.png"/>
               <TheTitle />
             </h1>
             <p>Your local League of Legends companion index.</p>
-        </div>
+        </Card>
     </div>
   </div>
 </template>

public/css/app.css

@@ -1,143 +0,0 @@
-* {
-  color: white;
-}
-
-html {
-  font-size: 14px;
-
-  background-image: none;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-attachment: fixed;
-  background-position: center;
-  min-height: 100%;
-
-  position: relative;
-  z-index: 0;
-}
-
-html::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: #000B;
-  z-index: 1;
-
-  backdrop-filter: blur(0.2rem);
-}
-
-body {
-  position: relative;
-  background-color: transparent;
-  z-index: 10;
-}
-
-@media (min-width: 768px) {
-  html {
-    font-size: 16px;
-  }
-}
-
-.btn:focus, 
-.btn:active:focus, 
-.btn-link.nav-link:focus, 
-.form-control:focus, 
-.form-check-input:focus,
-a:focus-visible {
-  box-shadow: 0.05rem 0.05rem 0.375rem 0.1rem rgba(255, 255, 255, 0.744) !important;
-  outline: none;
-}
-
-header {
-  top: 0;
-  position: sticky;
-  z-index: 1000;
-  background-color: #0004;
-
-}
-
-svg {
-  filter: invert(100%);
-}
-
-table {
-  background-color: #0004 !important;
-}
-
-thead, tbody, th, td {
-  background-color: transparent !important;
-}
-
-table > tbody > tr:nth-of-type(2n+1) > * {
-  background-color: #0004 !important;
-}
-
-table > tbody > tr:hover > * {
-  background-color: #0008 !important;
-}
-
-ul.dropdown-menu {
-  background: transparent;
-  backdrop-filter: blur(0.4rem);
-}
-
-.dropdown-menu {
-  width: 200px; 
-}
-
-.background {
-  height: 100%;
-  width: 100%;
-
-  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;
-}
-
-.z-index-10 {
-  z-index: 10;
-}
-