refactor(theme-default): tweak style variables and page padding

Author: meteorlxy

packages/@vuepress/theme-default/src/client/styles/_variables.scss

@@ -1,6 +1,6 @@
 @import '@vuepress/plugin-palette/palette';
 
-// colors
+// base colors
 $accentColor: #3eaf7c !default;
 $textColor: #2c3e50 !default;
 $borderColor: #eaecef !default;
@@ -9,11 +9,6 @@ $tipColor: #42b983 !default;
 $warningColor: #e7c000 !default;
 $dangerColor: #cc0000 !default;
 
-// code colors
-$codeBgColor: #282c34 !default;
-$highlightLineBgColor: rgba(0, 0, 0, 66%) !default;
-$lineNumbersColor: rgba(255, 255, 255, 0.3) !default;
-
 // badge component colors
 $badgeTipColor: $tipColor !default;
 $badgeWarningColor: $warningColor !default;
@@ -22,6 +17,7 @@ $badgeDangerColor: $dangerColor !default;
 // layout
 $navbarHeight: 3.6rem !default;
 $sidebarWidth: 20rem !default;
+$mobileSidebarWidth: $sidebarWidth * 0.82 !default;
 $contentWidth: 740px !default;
 $homePageWidth: 960px !default;
 
@@ -30,11 +26,11 @@ $MQNarrow: 959px !default;
 $MQMobile: 719px !default;
 $MQMobileNarrow: 419px !default;
 
-// code
+// code blocks
+$codeBgColor: #282c34 !default;
+$highlightLineBgColor: rgba(0, 0, 0, 66%) !default;
+$lineNumbersColor: rgba(255, 255, 255, 0.3) !default;
 $lineNumbersWrapperWidth: 3.5rem !default;
 $codeLang: 'c' 'cpp' 'cs' 'css' 'dart' 'docker' 'fs' 'go' 'html' 'java' 'js'
   'json' 'kt' 'less' 'makefile' 'md' 'php' 'py' 'rb' 'rs' 'sass' 'scss' 'sh'
   'styl' 'ts' 'toml' 'vue' 'yml' !default;
-
-// other
-$contentClass: '.theme-default-content' !default;

packages/@vuepress/theme-default/src/client/styles/code.scss

@@ -123,7 +123,7 @@ pre[class*='language-'] {
 
 // ===============================
 
-#{$contentClass} {
+.theme-default-content {
   code {
     color: color.scale($textColor, $lightness: 20%);
     padding: 0.25rem 0.5rem;
@@ -134,7 +134,7 @@ pre[class*='language-'] {
   }
 }
 
-#{$contentClass} {
+.theme-default-content {
   pre,
   pre[class*='language-'] {
     line-height: 1.4;
@@ -266,7 +266,7 @@ div[class*='language-'] {
 
 // narrow mobile
 @media (max-width: $MQMobileNarrow) {
-  #{$contentClass} {
+  .theme-default-content {
     div[class*='language-'] {
       margin: 0.85rem -1.5rem;
       border-radius: 0;

packages/@vuepress/theme-default/src/client/styles/layout.scss

@@ -1,9 +1,8 @@
 @import '_variables';
 @import '_wrapper';
 
-$mobileSidebarWidth: $sidebarWidth * 0.82;
-
 .page {
+  padding-top: $navbarHeight;
   padding-left: $sidebarWidth;
 }
 
@@ -63,7 +62,7 @@ $mobileSidebarWidth: $sidebarWidth * 0.82;
   }
 
   &.no-navbar {
-    #{$contentClass}:not(.custom) > h1,
+    .theme-default-content:not(.custom) > h1,
     h2,
     h3,
     h4,
@@ -73,6 +72,10 @@ $mobileSidebarWidth: $sidebarWidth * 0.82;
       padding-top: 0;
     }
 
+    .page {
+      padding-top: 0;
+    }
+
     .sidebar {
       top: 0;
     }
@@ -97,13 +100,12 @@ h3,
 h4,
 h5,
 h6 {
-  #{$contentClass}:not(.custom) > & {
+  .theme-default-content:not(.custom) > & {
     margin-top: 0.5rem - $navbarHeight;
     padding-top: ($navbarHeight + 1rem);
     margin-bottom: 0;
 
     &:first-child {
-      margin-top: -1.5rem;
       margin-bottom: 1rem;
 
       + p,
@@ -115,12 +117,10 @@ h6 {
   }
 }
 
-#{$contentClass}:not(.custom) {
+.theme-default-content:not(.custom) {
   @extend %wrapper;
 
-  > *:first-child {
-    margin-top: $navbarHeight;
-  }
+  padding-top: 0;
 
   a:hover {
     text-decoration: underline;
@@ -137,7 +137,7 @@ h6 {
   }
 }
 
-#{$contentClass}.custom {
+.theme-default-content.custom {
   padding: 0;
   margin: 0;