adb/adb.sh
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add background image

Browse Source
This commit is contained in:
adb-sh 2022-10-10 23:48:18 +02:00
parent 58025e24b5
commit a51f288601
3 changed files with 74 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/.vuepress/components/HomeContent.vue
View File

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

84
src/.vuepress/theme/Layout.vue
View File

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

19
src/.vuepress/theme/main.scss
View File

@ -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/scss/bootstrap";
@import "bootstrap-darkmode/scss/darktheme"; @import "bootstrap-darkmode/scss/darktheme";
@ -38,3 +42,16 @@ h1, h2, h3, h4, h5 {
border-radius: .4rem; border-radius: .4rem;
padding: .2rem .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;
}