feat: update style

vuepress-theme-hope · Jun 4, 2022 · d7b44a5 · d7b44a5
1 parent bbc6af3
commit d7b44a5
Show file tree

Hide file tree

Showing 37 changed files with 379 additions and 415 deletions.
diff --git a/demo/src/layout.md b/demo/src/layout.md
@@ -25,7 +25,7 @@ This is just a demo, you should add styles according to your own needs.
   text-align center
 
 .content__page-top, .content__page-bottom, .content__content-top, .content__content-bottom
-  @extend $wrapper
+  wrapper()
   padding-top 0
   padding-bottom 0
   text-align center

diff --git a/demo/src/zh/layout.md b/demo/src/zh/layout.md
@@ -25,7 +25,7 @@ icon: layout
   text-align center
 
 .content__page-top, .content__page-bottom, .content__content-top, .content__content-bottom
-  @extend $wrapper
+  wrapper()
   padding-top 0
   padding-bottom 0
   text-align center

diff --git a/docs/theme/src/config/stylus.md b/docs/theme/src/config/stylus.md
@@ -33,7 +33,7 @@ $navbarMobileHorizontalPadding ?= 1rem
 $navbarVerticalPadding ?= 0.7rem
 $navbarMobileVerticalPadding ?= 0.4rem
 $sidebarWidth ?= 18rem
-$mobileSidebarWidth ?= $sidebarWidth
+$sidebarMobileWidth ?= $sidebarWidth
 $contentWidth ?= 740px
 $homePageWidth ?= 960px
 ```
@@ -77,7 +77,7 @@ $badgeErrorColor ?= #DA5961
 $contentClass ?= '.theme-default-content'
 
 /* code block */
-$lineNumbersWrapperWidth ?= 2.5rem
+$lineNumbersWidth ?= 2.5rem
 $codeLang ?= js ts html md vue css sass scss less stylus go java c sh yaml py docker dockerfile makefile
 ```
 

diff --git a/docs/theme/src/zh/config/stylus.md b/docs/theme/src/zh/config/stylus.md
@@ -33,7 +33,7 @@ $navbarMobileHorizontalPadding ?= 1rem
 $navbarVerticalPadding ?= 0.7rem
 $navbarMobileVerticalPadding ?= 0.4rem
 $sidebarWidth ?= 18rem
-$mobileSidebarWidth ?= $sidebarWidth
+$sidebarMobileWidth ?= $sidebarWidth
 $contentWidth ?= 740px
 $homePageWidth ?= 960px
 ```
@@ -77,7 +77,7 @@ $badgeErrorColor ?= #DA5961
 $contentClass ?= '.theme-default-content'
 
 /* code block */
-$lineNumbersWrapperWidth ?= 2.5rem
+$lineNumbersWidth ?= 2.5rem
 $codeLang ?= js ts html md vue css sass scss less stylus go java c sh yaml py docker dockerfile makefile
 ```
 

diff --git a/packages/comment/src/client/components/Valine.vue b/packages/comment/src/client/components/Valine.vue
@@ -11,7 +11,7 @@
 
 .page {
   .valine-wrapper {
-    @extend $wrapper;
+    wrapper();
 
     .v[data-class=v] {
       * {

diff --git a/packages/comment/src/client/styles/waline.styl b/packages/comment/src/client/styles/waline.styl
@@ -3,15 +3,15 @@
 
 .page {
   .waline-wrapper {
-    @extend $wrapper;
+    wrapper();
     --waline-accent-color: var(--accent-color);
     --waline-text-color: var(--text-color);
-    --waline-active-color: var(--accent-color-l10);
+    --waline-active-color: var(--accent-color-light);
     --waline-border: none;
     --waline-box-shadow: 0 12px 40px rgba(134, 151, 168, 0.25);
 
     html.dark & {
-      --waline-active-color: var(--accent-color-d10);
+      --waline-active-color: var(--accent-color-dark);
       --waline-box-shadow: 0 12px 40px #0f0e0d;
     }
   }

diff --git a/packages/components/src/client/BreadCrumb.vue b/packages/components/src/client/BreadCrumb.vue
@@ -48,7 +48,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .breadcrumb {
-  @extend $wrapper;
+  wrapper();
   position: relative;
   margin-top: $navbarHeight + 0.5rem;
   margin-bottom: 0.5rem - $navbarHeight;
@@ -113,10 +113,10 @@ h1, h2, h3, h4, h5, h6 {
     }
 
     &:hover {
-      color: var(--accent-color-l10, lighten($accentColor, 10%));
+      color: var(--accent-color-light, lighten($accentColor, 10%));
 
       html.dark & {
-        color: var(--accent-color-d10, darken($accentColor, 10%));
+        color: var(--accent-color-dark, darken($accentColor, 10%));
       }
     }
   }

diff --git a/packages/components/src/client/PageInfo.vue b/packages/components/src/client/PageInfo.vue
@@ -34,7 +34,7 @@ $pageInfoTextSize ?= 14px;
 
 .page {
   .page-title {
-    @extend $wrapper;
+    wrapper();
     padding-bottom: 0.2rem;
     position: relative;
     z-index: 1;

diff --git a/packages/copy-code/src/client/style/code.styl b/packages/copy-code/src/client/style/code.styl
@@ -52,7 +52,7 @@
   outline: none;
 
   &:hover {
-    background-color: var(--code-hl-bg-color, rgb(0 0 0 / 66%));
+    background-color: var(--code-hl-bg-color, rgba(0, 0, 0, 66%));
     cursor: pointer !important;
   }
 

diff --git a/packages/create/template/layout.md b/packages/create/template/layout.md
@@ -25,7 +25,7 @@ This is just a demo, you should add styles according to your own needs.
   text-align center
 
 .content__page-top, .content__page-bottom, .content__content-top, .content__content-bottom
-  @extend $wrapper
+  wrapper()
   padding-top 0
   padding-bottom 0
   text-align center

diff --git a/packages/create/template/zh/layout.md b/packages/create/template/zh/layout.md
@@ -25,7 +25,7 @@ icon: layout
   text-align center
 
 .content__page-top, .content__page-bottom, .content__content-top, .content__content-bottom
-  @extend $wrapper
+  wrapper()
   padding-top 0
   padding-bottom 0
   text-align center

diff --git a/packages/pwa/src/client/components/PWAInstallModal.vue b/packages/pwa/src/client/components/PWAInstallModal.vue
@@ -406,7 +406,7 @@
     color: var(--white, #fff);
 
     &:hover, &:focus {
-      background: var(--accent-color-l10, $accentColor);
+      background: var(--accent-color-light, $accentColor);
     }
 
     @media (max-width: $MQMobileNarrow) {
@@ -421,7 +421,7 @@
     color: var(--accent-color, $accentColor);
 
     &:hover, &:focus {
-      background: var(--accent-color-l10, $accentColor);
+      background: var(--accent-color-light, $accentColor);
       color: var(--white, #fff);
     }
   }

diff --git a/packages/shared/styles/wrapper.styl b/packages/shared/styles/wrapper.styl
@@ -1,4 +1,4 @@
-$wrapper {
+wrapper() {
   max-width: $contentWidth;
   margin: 0 auto;
   padding: 2rem 2.5rem;
@@ -12,7 +12,7 @@ $wrapper {
   }
 }
 
-$horizontal-wrapper {
+horizontal-wrapper() {
   max-width: var(--content-width);
   margin-right: auto;
   margin-left: auto;

diff --git a/packages/theme/components/Blog/ArticleItem.vue b/packages/theme/components/Blog/ArticleItem.vue
@@ -128,7 +128,7 @@
     // line number fix
     .line-numbers-mode {
       pre {
-        padding-left: ($lineNumbersWrapperWidth + 1) rem;
+        padding-left: ($lineNumbersWidth + 1) rem;
       }
     }
 

diff --git a/packages/theme/components/Blog/BlogInfoList.vue b/packages/theme/components/Blog/BlogInfoList.vue
@@ -164,11 +164,11 @@
 
         &.active {
           html.light & {
-            background: var(--accent-color-l10);
+            background: var(--accent-color-light);
           }
 
           html.dark & {
-            background: var(--accent-color-d10);
+            background: var(--accent-color-dark);
           }
         }
 

diff --git a/packages/theme/components/Blog/CategoryList.vue b/packages/theme/components/Blog/CategoryList.vue
@@ -91,7 +91,7 @@ for $color, $index in $colors {
       }
 
       &.active {
-        background: var(--accent-color-d10);
+        background: var(--accent-color-dark);
         color: var(--white);
       }
     }

diff --git a/packages/theme/components/Home.vue b/packages/theme/components/Home.vue
@@ -20,20 +20,15 @@
 <style lang="stylus">
 .home {
   display: block;
-  max-width: $homePageWidth;
-  min-height: 100vh - $navbarHeight;
-  padding: $navbarHeight 2rem 0;
-  margin: 0px auto;
-  overflow-x: hidden;
 
-  @media (max-width: $MQNarrow) {
-    min-height: 100vh - $navbarMobileHeight;
-    padding-top: $navbarMobileHeight;
-  }
+  max-width: var(--home-page-width);
+  min-height: calc(100vh - var(--navbar-height));
+  margin: 0 auto;
+  padding: var(--navbar-height) 2rem 0;
 
   @media (max-width: $MQMobileNarrow) {
-    padding-left: 1.5rem;
     padding-right: 1.5rem;
+    padding-left: 1.5rem;
   }
 
   {$contentClass} {

diff --git a/packages/theme/components/HomeFeatures.vue b/packages/theme/components/HomeFeatures.vue
@@ -115,7 +115,7 @@
       margin: 0.25rem 0;
       border-bottom: none;
 
-      color: var(--text-color-l10);
+      color: var(--text-color-light);
 
       font-weight: bold;
       font-size: 1.25rem;
@@ -127,7 +127,7 @@
 
     p {
       margin: 0;
-      color: var(--text-color-l25);
+      color: var(--text-color-lighter);
       line-height: 1.4;
     }
   }

diff --git a/packages/theme/components/HomeHero.vue b/packages/theme/components/HomeHero.vue
@@ -136,7 +136,7 @@
     .description {
       max-width: 35rem;
 
-      color: var(--text-color-l40);
+      color: var(--text-color-bright);
 
       font-size: 1.6rem;
       font-family: var(--font-family-fancy);
@@ -187,8 +187,8 @@
         color: var(--white);
 
         &:hover {
-          border-color: var(--accent-color-l10);
-          background-color: var(--accent-color-l10);
+          border-color: var(--accent-color-light);
+          background-color: var(--accent-color-light);
         }
       }
     }

diff --git a/packages/theme/components/Navbar/NavLinks.vue b/packages/theme/components/Navbar/NavLinks.vue
@@ -34,7 +34,7 @@
         right: 50%;
         bottom: 0px;
         height: 2px;
-        background: var(--accent-color-l10);
+        background: var(--accent-color-light);
         border-radius: 1px;
         visibility: hidden;
         transition: left 0.2s ease-in-out, right 0.2s ease-in-out;

diff --git a/packages/theme/components/Page.vue b/packages/theme/components/Page.vue
@@ -78,7 +78,7 @@
 
   // narrow desktop / iPad
   @media (max-width: $MQNarrow) {
-    padding-left: $mobileSidebarWidth;
+    padding-left: $sidebarMobileWidth;
   }
 
   // wide mobile

diff --git a/packages/theme/components/PageMeta.vue b/packages/theme/components/PageMeta.vue
@@ -40,7 +40,7 @@
 @require '~vuepress-shared/styles/wrapper';
 
 .page-meta {
-  @extend $wrapper;
+  wrapper();
   padding-top: 12px;
   padding-bottom: 12px;
   font-family: Arial, Helvetica, sans-serif;
@@ -49,7 +49,7 @@
   .meta-item {
     .label {
       font-weight: 500;
-      color: var(--text-color-l25);
+      color: var(--text-color-lighter);
     }
 
     .info {
@@ -75,7 +75,7 @@
     }
 
     a {
-      color: var(--accent-color-l10);
+      color: var(--accent-color-light);
     }
   }
 

diff --git a/packages/theme/components/PageNav.vue b/packages/theme/components/PageNav.vue
@@ -46,7 +46,7 @@
 @require '~vuepress-shared/styles/wrapper';
 
 .page-nav {
-  @extend $wrapper;
+  wrapper();
   padding-top: 12px;
   padding-bottom: 0;
   font-family: Arial, Helvetica, sans-serif;

diff --git a/packages/theme/components/Password.vue b/packages/theme/components/Password.vue
@@ -27,7 +27,7 @@
   @media (max-width: $MQNarrow) {
     height: 90vh - $navbarMobileHeight;
     margin-top: $navbarMobileHeight;
-    padding-left: $mobileSidebarWidth;
+    padding-left: $sidebarMobileWidth;
   }
 
   @media (max-width: $MQMobile) {

diff --git a/packages/theme/components/Sidebar/Sidebar.vue b/packages/theme/components/Sidebar/Sidebar.vue
@@ -79,7 +79,7 @@
 
   // narrow desktop / iPad
   @media (max-width: $MQNarrow) {
-    width: $mobileSidebarWidth;
+    width: $sidebarMobileWidth;
     font-size: 15px;
   }
 

diff --git a/packages/theme/layouts/404.vue b/packages/theme/layouts/404.vue
@@ -1,6 +1,6 @@
 <template>
   <Common :sidebar="false">
-    <main class="page not-found">
+    <main id="main-content" class="page not-found">
       <Page404Icon />
       <blockquote v-text="msg" />
       <button class="action-button" @click="back">{{ locales.back }}</button>
@@ -15,18 +15,13 @@
 .page.not-found {
   display: block;
 
-  max-width: $homePageWidth;
-
+  max-width: var(--home-page-width);
   min-height: 80vh;
   margin: 0 auto;
-  padding: ($navbarHeight + 1rem) 2rem 0 2rem !important;
+  padding: calc(var(--navbar-height) + 1rem) 2rem 0 2rem !important;
 
   text-align: center;
 
-  @media (max-width: $MQMobile) {
-    padding-top: $navbarMobileHeight + 1rem;
-  }
-
   .page-404-icon {
     max-width: 600px;
     margin: 0 1.5rem;
@@ -40,8 +35,9 @@
     margin: 0 0.25rem;
     padding: 0.5rem 1rem;
     border-width: 0;
-    border-bottom: 1px solid var(--accent-color-d10);
+    border-bottom: 1px solid var(--accent-color-dark);
     border-radius: 0.25rem;
+
     background: var(--accent-color);
     color: var(--white);
     outline: none;
@@ -51,7 +47,7 @@
     transition: background 0.1s ease;
 
     &:hover {
-      background: var(--accent-color-l10);
+      background: var(--accent-color-light);
       cursor: pointer;
     }
   }