feat: add index injections

vuesence · Dec 12, 2023 · fff18bd · fff18bd
1 parent 9ef1ea3
commit fff18bd
Show file tree

Hide file tree

Showing 22 changed files with 114 additions and 147 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import MainLayout from "./layouts/MainLayout.vue";
+import AppLayout from "./layouts/MainLayout.vue";
 import { useScreenWidth } from "@/composables/useScreenWidth";
 import { useSplashScreen } from "@/composables/useSplashScreen";
 
@@ -14,7 +14,7 @@ useSplashScreen();
 </script>
 
 <template>
-  <MainLayout />
+  <AppLayout />
 </template>
 
 <style lang="scss">

diff --git a/src/assets/styles/base.scss b/src/assets/styles/base.scss
@@ -1,7 +1,9 @@
 @import "./vars.css";
 // @import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap");
+// @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 
 :root {
+  // font-family: 'Roboto', sans-serif;
   // font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   // line-height: 1.5;
   // font-weight: 400;
@@ -17,6 +19,14 @@
   // -webkit-text-size-adjust: 100%;
 }
 
+@media screen and (min-width: 960px) {
+  html {
+    overflow-x: hidden;
+    margin-right: calc(-1 * (100vw - 100%));
+  }
+}
+
+
 *,
 ::before,
 ::after {
@@ -97,7 +107,7 @@ input,
 optgroup,
 select,
 textarea {
-  border: 0;
+  border: 1px solid var(--vp-c-border);
   padding: 0;
   line-height: inherit;
   color: inherit;
@@ -164,8 +174,8 @@ select {
 
 #app {
   // min-height: 100vh;
-  width: 1280px;
-  max-width: 1280px;
+  width: var(--vp-layout-max-width);
+  max-width: var(--vp-layout-max-width);
   margin: 0 auto;
   // padding: 2em 2em 0;
   // text-align: center;

diff --git a/src/assets/styles/custom.scss b/src/assets/styles/custom.scss
@@ -0,0 +1,2 @@
+
+// layout-placeholder
diff --git a/src/assets/styles/vars.css b/src/assets/styles/vars.css
@@ -1,3 +1,16 @@
+/**
+ * Typography
+ * -------------------------------------------------------------------------- */
+
+ @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+ :root {
+  --vp-font-family-base: 'Roboto', sans-serif;
+  --vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
+    Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+
 /**
  * Colors: Solid
  * -------------------------------------------------------------------------- */
@@ -207,9 +220,6 @@
   --vp-c-brand-3: var(--vp-c-indigo-3);
   --vp-c-brand-soft: var(--vp-c-indigo-soft);
 
-  /* DEPRECATED: Use `--vp-c-brand-1` instead. */
-  --vp-c-brand: var(--vp-c-brand-1);
-
   --vp-c-tip-1: var(--vp-c-brand-1);
   --vp-c-tip-2: var(--vp-c-brand-2);
   --vp-c-tip-3: var(--vp-c-brand-3);
@@ -226,18 +236,6 @@
   --vp-c-danger-soft: var(--vp-c-red-soft);
 }
 
-/**
- * Typography
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-font-family-base: 'Chinese Quotes', 'Inter var', 'Inter', ui-sans-serif,
-    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
-    Consolas, 'Liberation Mono', 'Courier New', monospace;
-}
 
 /**
  * Shadows
@@ -278,7 +276,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-layout-max-width: 1440px;
+  --vp-layout-max-width: 1280px;
 }
 
 /**
@@ -289,51 +287,6 @@
   --vp-header-anchor-symbol: '#';
 }
 
-/**
- * Component: Code
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-code-line-height: 1.7;
-  --vp-code-font-size: 0.875em;
-  --vp-code-color: var(--vp-c-brand-1);
-  --vp-code-link-color: var(--vp-c-brand-1);
-  --vp-code-link-hover-color: var(--vp-c-brand-2);
-  --vp-code-bg: var(--vp-c-default-soft);
-
-  --vp-code-block-color: var(--vp-c-text-2);
-  --vp-code-block-bg: var(--vp-c-bg-alt);
-  --vp-code-block-divider-color: var(--vp-c-gutter);
-
-  --vp-code-lang-color: var(--vp-c-text-3);
-
-  --vp-code-line-highlight-color: var(--vp-c-default-soft);
-  --vp-code-line-number-color: var(--vp-c-text-3);
-
-  --vp-code-line-diff-add-color: var(--vp-c-green-soft);
-  --vp-code-line-diff-add-symbol-color: var(--vp-c-green-1);
-
-  --vp-code-line-diff-remove-color: var(--vp-c-red-soft);
-  --vp-code-line-diff-remove-symbol-color: var(--vp-c-red-1);
-
-  --vp-code-line-warning-color: var(--vp-c-yellow-soft);
-  --vp-code-line-error-color: var(--vp-c-red-soft);
-
-  --vp-code-copy-code-border-color: var(--vp-c-divider);
-  --vp-code-copy-code-bg: var(--vp-c-bg-soft);
-  --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
-  --vp-code-copy-code-hover-bg: var(--vp-c-bg);
-  --vp-code-copy-code-active-text: var(--vp-c-text-2);
-  --vp-code-copy-copied-text-content: 'Copied';
-
-  --vp-code-tab-divider: var(--vp-code-block-divider-color);
-  --vp-code-tab-text-color: var(--vp-c-text-2);
-  --vp-code-tab-bg: var(--vp-code-block-bg);
-  --vp-code-tab-hover-text-color: var(--vp-c-text-1);
-  --vp-code-tab-active-text-color: var(--vp-c-text-1);
-  --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
-}
-
 /**
  * Component: Button
  * -------------------------------------------------------------------------- */

diff --git a/src/components/AppContentPane.vue b/src/components/AppContentPane.vue
@@ -3,7 +3,9 @@
 
 <template>
   <main class="content-pane">
-    <router-view />
+    <Transition>
+      <router-view />
+    </Transition>
 
     <div class="content">
     </div>
@@ -14,4 +16,13 @@
 .content-pane {
   padding: 1em 2em;
 }
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
 </style>
diff --git a/src/components/drawers/SimpleDrawer.vue b/src/components/drawers/SimpleDrawer.vue
@@ -20,14 +20,14 @@ const isDrawerOpen = defineModel<boolean>();
   // top: 0;
   left: 0;
   height: 100%;
-  min-height: 500px;
+  // min-height: 500px;
   // min-width: 270px;
   translate: -300px 0;
   transition: translate 0.2s ease;
   // background-color: #eee;
   // background-color: white;
-  // background-color: var(--vp-sidebar-bg-color);
-  border-bottom: var(--vp-c-border) 1px solid;
+  background-color: var(--vp-c-bg);
+  // border-bottom: var(--vp-c-border) 1px solid;
   border-right: 1px solid var(--vp-c-divider);
   .notebook &,
   .desktop & {

diff --git a/src/components/drawers/TouchSlideoutDrawer.vue b/src/components/drawers/TouchSlideoutDrawer.vue
@@ -232,6 +232,7 @@ onUnmounted(() => {
   will-change: transform;
   transition-property: transform;
   transition-timing-function: ease;
+  background-color: var(--vp-c-bg);
   .notebook &,
   .desktop & {
     position: initial;
@@ -243,7 +244,7 @@ onUnmounted(() => {
     position: absolute;
     top: 0;
     left: 0;
-    background-color: var(--vp-sidebar-bg-color);
+    background-color: var(--vp-c-bg-alt);
     .notebook &,
     .desktop & {
       position: initial;

diff --git a/src/components/footers/DistributedFooter.vue b/src/components/footers/DistributedFooter.vue
@@ -61,7 +61,7 @@
     font-size: 36px;
     margin: 0 0 10px;
     span {
-      color: #5383d3;
+      color: var(--vp-c-brand-1);
     }
   }
   .footer-links {
@@ -91,7 +91,7 @@
       background-color: var(--vp-c-bg-alt);
       border-radius: 2px;
       font-size: 20px;
-      color: #777;
+      color: var(--vp-c-text-2);
       text-align: center;
       line-height: 35px;
       margin-right: 3px;

diff --git a/src/components/headers/MantineLayeredHeader.vue b/src/components/headers/MantineLayeredHeader.vue
@@ -64,7 +64,7 @@ const sublinks = [
   top: 0;
   height: 6em;
   padding: 0 20px 0;
-  // background-color: #fff;
+  background-color: var(--vp-c-bg);
   z-index: 3;
   justify-content: space-between;
   border-bottom: 1px solid var(--vp-c-border);

diff --git a/src/components/headers/MantineSimpleHeader.vue b/src/components/headers/MantineSimpleHeader.vue
@@ -42,7 +42,7 @@ const links = [
   top: 0;
   height: 4em;
   padding: 15px 20px;
-  // background-color: #fff;
+  background-color: var(--vp-c-bg);
   z-index: 3;
   justify-content: space-between;
   border-bottom: 1px solid var(--vp-c-divider);

diff --git a/src/components/headers/SimpleHeader.vue b/src/components/headers/SimpleHeader.vue
@@ -22,10 +22,10 @@ const { isDrawerOpen } = useAppConfig();
   display: flex;
   align-items: center;
   justify-content: space-between;
-  // top: 0;
+  top: 0;
   height: 4em;
   padding: 15px 20px;
-  // background-color: #eee;
+  background-color: var(--vp-c-bg);
   z-index: 3;
   .drawer-toggle {
     .notebook &, .desktop & {

diff --git a/src/components/headers/SlidingHeader.vue b/src/components/headers/SlidingHeader.vue
@@ -41,22 +41,22 @@ onUnmounted(() => {
 .header {
   position: sticky;
   z-index: 3;
-  background-color: #eee;
+  background-color: var(--vp-c-bg-alt);
   top: 0;
   transition: 0.3s;
 
   &.first-header {
-    background-color: #eee;
+    background-color: var(--vp-c-bg-alt);
     height: 60px;
   }
 
   &.second-header {
-    background-color: #e5e6ef;
+    background-color: var(--vp-c-bg-soft);
     opacity: 0.8;
     height: 100px;
     // just for the demo
     :deep(.header) {
-      background-color: #e5e6ef !important;
+      background-color: var(--vp-c-bg-alt) !important;
     }
   }
 

diff --git a/src/components/navbars/MantineSimpleNavbar.vue b/src/components/navbars/MantineSimpleNavbar.vue
@@ -75,11 +75,11 @@ const footerLinks = [
           cursor: pointer;
           display: block;
           padding: 0 2em 0 1em;
-          color: #888;
+          color: var(--vp-c-text-2);
           text-wrap: nowrap;
         }
         // .icon {
-        //   color: #444;
+        //   color: var(--vp-c-text-1)
         // }
       }
 
@@ -91,6 +91,7 @@ const footerLinks = [
   .footer {
     // padding-top: 1em;
     margin-top: 1em;
+    padding-top: 0.7rem;
     border-top: 1px solid var(--vp-c-divider);
 
   }

diff --git a/src/components/navbars/SimpleNavbar.vue b/src/components/navbars/SimpleNavbar.vue
@@ -44,9 +44,9 @@ nav {
         cursor: pointer;
         display: block;
         padding: 0 2em;
-        color: #888;
+        color: var(--vp-c-text-2)
         &:hover {
-          color: #444;
+          color: var(--vp-c-text-1)
         }
       }
     }

diff --git a/src/components/ui/HamburgerIcon.vue b/src/components/ui/HamburgerIcon.vue
@@ -10,10 +10,8 @@ const modelValue = defineModel();
 
 <style lang="scss" scoped>
 button {
-  color: black;
-  // background-color: white;
-  width: 34px;
-  height: 34px;
+  width: 2rem;
+  height: 2rem;
   cursor: pointer;
   padding: 5px;
   border: 0px;
@@ -23,14 +21,14 @@ button {
     // outline: 0px solid transparent;
     transition: all .3s ease;
     position: relative;
-    width: 24px;
+    width: 1.7rem;
     height: 2px;
-    background-color: black;
+    background-color: var(--vp-c-text-1);
     &:before, &:after {
-      width: 24px;
+      width: 1.7rem;
       height: 2px;
       transition: all .3s ease;
-      background-color: black;
+      background-color: var(--vp-c-text-1);
       content: "";
       left: 0;
       position: absolute;