add background image

src/.vuepress/components/HomeContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <BannerWrapperNetwork>
+  <div>
     <div>
       <CurrentlyListening />
       <StickyWrapper>
@@ -15,7 +15,7 @@
         </div>
       </StickyWrapper>
     </div>
-  </BannerWrapperNetwork>
+  </div>
 </template>
 
 <script>

src/.vuepress/theme/Layout.vue

@@ -1,38 +1,44 @@
 <template>
-  <section class="layout" data-theme="dark">
-    <header>
-      <div class="bg-darkmode-dark shadow">
-        <site-header class="container" />
-      </div>
-    </header>
+  <div class="app">
+    <div class="background">
+      <img src="../assets/background.jpg" alt="">
+    </div>
+    <section class="layout" data-theme="dark">
+      <header>
+        <div class="bg-dark-opacity1 shadow">
+          <site-header class="container" />
+        </div>
+      </header>
 
-    <main class="content">
-      <div v-if="$page.frontmatter?.sidebar" class="container">
-        <div class="row">
-          <div class="col-xl-4 p-4">
-            <div class="card toc">
-              <div class="card-header">
-                <router-link :to="`/${$page.path.split('/')[1]}/`"><b>/{{ $page.path.split('/')[1] }}/</b></router-link>
-              </div>
-              <div class="card-body">
-                <FolderList :path="`/${$page.path.split('/')[1]}/`" />
+      <main class="content">
+        <BannerWrapperNetwork v-if="!$page.frontmatter?.disableAnimation" class="background opacity-25" />
+        <div v-if="$page.frontmatter?.sidebar" class="container">
+          <div class="row">
+            <div class="col-xl-4 p-4">
+              <div class="card toc">
+                <div class="card-header">
+                  <router-link :to="`/${$page.path.split('/')[1]}/`"><b>/{{ $page.path.split('/')[1] }}/</b></router-link>
+                </div>
+                <div class="card-body">
+                  <FolderList :path="`/${$page.path.split('/')[1]}/`" />
+                </div>
               </div>
             </div>
+            <Content class="col-xl-8 p-4" />
           </div>
-          <Content class="col-xl-8 p-4" />
         </div>
-      </div>
-      <div v-else>
-        <div class="container">
-          <Content class="p-4" />
+        <div v-else>
+          <div class="container">
+            <Content class="p-4" />
+          </div>
         </div>
-      </div>
-    </main>
+      </main>
 
-    <footer class="footer my-3">
-      <site-footer class="container" />
-    </footer>
-  </section>
+      <footer class="footer py-3">
+        <site-footer class="container" />
+      </footer>
+    </section>
+  </div>
 </template>
 
 <script>
@@ -44,25 +50,43 @@ import "bootstrap-icons/font/bootstrap-icons.scss";
 import "./main.scss";
 
 import "@vuepress/theme-default/styles/code.styl";
+import BannerWrapperNetwork from "../components/BannerWrapperNetwork";
 
 export default {
-  components: { SiteFooter, SiteHeader, FolderList },
+  components: {BannerWrapperNetwork, SiteFooter, SiteHeader, FolderList },
 };
 </script>
 
 <style scoped lang="scss">
+.layout {
+  position: relative;
+  min-height: 100vh;
+}
 header {
   position: fixed;
   z-index: 10;
   width: 100%;
   font-size: 1.2rem;
 }
-main {
+main.content {
   padding: 5rem 0 2rem 0;
-  background-color: #1f262b;
   .toc {
     position: sticky;
     top: 5rem;
   }
+  .container {
+    position: relative;
+  }
+}
+.background {
+  height: 100vh;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
 }
 </style>

src/.vuepress/theme/main.scss

@@ -1,4 +1,8 @@
-$dark-body-bg: #1f262b;
+$dark: #1f262b;
+$dark-opacity1: #1f262bf4;
+$dark-opacity2: #1f262b80;
+
+$dark-body-bg: $dark-opacity1;
 
 @import "bootstrap/scss/bootstrap";
 @import "bootstrap-darkmode/scss/darktheme";
@@ -38,3 +42,16 @@ h1, h2, h3, h4, h5 {
   border-radius: .4rem;
   padding: .2rem .4rem;
 }
+[data-theme="dark"] .card {
+  background-color: $dark-opacity2 !important;
+}
+
+.bg-dark {
+  background-color: $dark !important;
+}
+.bg-dark-opacity1 {
+  background-color: $dark-opacity1 !important;
+}
+.bg-dark-opacity2 {
+  background-color: $dark-opacity2 !important;
+}