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,12 +1,17 @@
 <template>
+  <div class="app">
+    <div class="background">
+      <img src="../assets/background.jpg" alt="">
+    </div>
     <section class="layout" data-theme="dark">
       <header>
-      <div class="bg-darkmode-dark shadow">
+        <div class="bg-dark-opacity1 shadow">
           <site-header class="container" />
         </div>
       </header>
 
       <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">
@@ -29,10 +34,11 @@
         </div>
       </main>
 
-    <footer class="footer my-3">
+      <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;
+}