feat(theme): improve line number

vuepress-theme-hope · Nov 7, 2023 · 9f1721e · 9f1721e
1 parent 607bb68
commit 9f1721e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/theme/src/client/styles/code/base.scss b/packages/theme/src/client/styles/code/base.scss
@@ -168,7 +168,6 @@ div[class*="language-"] {
 
       display: flex;
       flex-direction: column;
-      justify-content: space-evenly;
 
       width: var(--line-numbers-width);
       padding: 1rem 0;
@@ -188,11 +187,21 @@ div[class*="language-"] {
     .line-number {
       position: relative;
       z-index: 4;
+
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+
       user-select: none;
 
       &::before {
         content: counter(line-number);
+
+        display: block;
+
         font-size: 0.8em;
+        line-height: 1;
         counter-increment: line-number;
       }
     }

diff --git a/packages/theme/src/client/styles/layout.scss b/packages/theme/src/client/styles/layout.scss
@@ -1,6 +1,8 @@
 @use "@sass-palette/hope-config";
 
 :root {
+  scrollbar-width: thin;
+
   @media (prefers-reduced-motion: no-preference) {
     scroll-behavior: smooth;
   }