Style adjustment

CollapseLauncher · Dec 24, 2024 · 0a18ea0 · 0a18ea0
1 parent 21e2f14
commit 0a18ea0
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 2 deletions.
diff --git a/home/index.css b/home/index.css
@@ -3,15 +3,99 @@
   --vp-c-bg-alt: #f6f6f7;
   --vp-c-bg-elv: #ffffff;
   --vp-c-bg-soft: #f6f6f7;
+  --vp-c-bg-none: rgba(255, 255, 255, 0);
+  --vp-c-bg-head-custom: rgba(255, 255, 255, 0.75);
+  --vp-s-head-show: 0px 0px 20px rgb(0 0 0 / 20%);
+  --vp-s-head-none: 0px 0px 0px rgb(0 0 0 / 0%);
+  --vp-s-feature-show: 0px 0px 10px var(--vp-c-brand-2);
+
+  --vp-anim-short: cubic-bezier(0.5, 0, 0, 1) 0.25s;
 }
 
 .dark {
   --vp-c-bg: #1b1b1f;
   --vp-c-bg-alt: #161618;
   --vp-c-bg-elv: #202127;
   --vp-c-bg-soft: #202127;
+  --vp-c-bg-none: rgba(27, 27, 31, 0);
+  --vp-c-bg-head-custom: rgba(27, 27, 31, 0.75);
+  --vp-s-head-show: 0px 0px 20px rgb(0 0 0 / 50%);
+  --vp-s-feature-show: 0px 0px 10px var(--vp-c-brand-2);
 }
 
-.title span, .main {
+/* 
+* Custom style adjustment on texts
+*/
+
+/* Font style on header text */
+.VPNavBarTitle .title span,
+.main .name span,
+.main .text,
+.VPFeature article .title,
+.vp-doc.container div div h1,
+.vp-doc.container div div h2,
+.vp-doc.container div div h3,
+.vp-doc.container div div h4,
+.vp-doc h1,
+.vp-doc h2 {
   font-family: Outfit;
+}
+
+.title > span {
+  font-weight: 600;
+}
+
+.VPFeature article .title {
+  font-weight: 700;
+}
+
+.main .text {
+  font-weight: 400;
+  padding: 16pt 0pt 4pt 0pt;
+}
+
+/* Box's Feature Title */
+.box > .title {
+  font-weight: 500;
+}
+
+.link .link-text, .link .link-text-icon {
+  transition: all cubic-bezier(0.5, 0, 0, 1) 0.2s;
+}
+
+.link:hover .link-text .link-text-icon {
+  margin-left: 8pt;
+}
+
+.divider,
+.divider-line
+{
+  background-color: var(--vp-c-bg-none)!important;
+}
+
+.VPNavBar {
+  transition: box-shadow var(--vp-anim-short)!important;
+}
+
+a.VPLink.VPFeature {
+  transition: box-shadow ease-out 0.125s;
+}
+
+.VPNavBar:not(.top) {
+  backdrop-filter: blur(16pt);
+  background-color: var(--vp-c-bg-head-custom)!important;
+  box-shadow: var(--vp-s-head-show);
+}
+
+a.VPLink.VPFeature:hover {
+  box-shadow: var(--vp-s-feature-show);
+}
+
+.vp-doc.container div div h2 {
+  font-size: 24pt;
+  padding-bottom: 8pt;
+}
+
+a:link {
+  text-decoration: none;
 }
diff --git a/home/scripts/index.logo.vue b/home/scripts/index.logo.vue
@@ -11,7 +11,7 @@
             <div style="text-align: center; margin: 10px;">
                 <img width="710px" height="auto" src="/img/banner.webp" style="margin: 10px;" />
                 <i class="art-annotation">
-                    <i>GI Nahida Background Credit: [Rafa on Pixiv](https://www.pixiv.net/en/users/3970196)</i>
+                    <i>GI Nahida Background Credit: <a href="https://www.pixiv.net/en/users/3970196"><b>Rafa on Pixiv</b></a></i>
                 </i>
             </div>
         </div>