feat: prefer rem unit

vuepress · Feb 27, 2025 · 869e08c · 869e08c
1 parent cb18654
commit 869e08c
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 43 deletions.
diff --git a/e2e/docs/.vuepress/layouts/Category.vue b/e2e/docs/.vuepress/layouts/Category.vue
@@ -44,7 +44,7 @@ const routePath = useRoutePath()
   & {
     padding-top: calc(var(--navbar-height) + 1rem) !important;
     padding-bottom: 0 !important;
-    font-size: 14px;
+    font-size: 0.875rem;
   }
 
   .route-link {

diff --git a/e2e/docs/.vuepress/layouts/Tag.vue b/e2e/docs/.vuepress/layouts/Tag.vue
@@ -44,7 +44,7 @@ const routePath = useRoutePath()
   & {
     padding-top: calc(var(--navbar-height) + 1rem) !important;
     padding-bottom: 0 !important;
-    font-size: 14px;
+    font-size: 0.875rem;
   }
 
   .route-link {

diff --git a/plugins/blog/plugin-feed/templates/atom.xsl b/plugins/blog/plugin-feed/templates/atom.xsl
@@ -44,10 +44,6 @@
             background: var(--c-bg);
           }
 
-          html {
-            font-size: 16px;
-          }
-
           body {
             min-height: 100vh;
             color: var(--c-text);
@@ -254,7 +250,7 @@
             margin: 0.5rem auto;
             border: 1px solid #fff;
             border-collapse: collapse;
-            border-radius: 8px;
+            border-radius: 0.5rem;
 
             text-align: start;
           }
@@ -334,13 +330,13 @@
           }
 
           .atom-info {
-            margin-top: 4px;
-            font-size: 14px;
+            margin-top: 0.25rem;
+            font-size: 0.875rem;
           }
 
           .atom-info > span {
             display: inline-block;
-            margin: 4px 8px 4px 0;
+            margin: 0.25em 0.5em 0.25em 0;
           }
 
           .atom-info > span:last-child {
@@ -353,14 +349,14 @@
           }
 
           .atom-body {
-            padding: 4px 16px;
+            padding: 0.25rem 1rem;
           }
 
           .atom-footer {
             display: flex;
             justify-content: space-between;
-            padding: 8px 16px;
-            font-size: 14px;
+            padding: 0.5rem 1rem;
+            font-size: 0.875rem;
           }
 
           .atom-footer label {
@@ -370,20 +366,20 @@
           .atom-link {
             display: inline-block;
 
-            padding: 6px 12px;
-            border-radius: 8px;
+            padding: 0.375em 0.75em;
+            border-radius: 0.5em;
 
             background: var(--c-accent);
             color: var(--c-bg-elv);
           }
 
           footer {
-            margin-top: 10px;
-            padding: 4px;
+            margin-top: 0.75rem;
+            padding: 0.25rem;
 
             color: #888;
 
-            font-size: 12px;
+            font-size: 0.75rem;
             text-align: center;
           }
         </style>

diff --git a/plugins/features/plugin-notice/src/client/styles/notice.scss b/plugins/features/plugin-notice/src/client/styles/notice.scss
@@ -80,7 +80,7 @@
 
 .vp-notice-content {
   margin: 1rem 0.75rem;
-  font-size: 14px;
+  font-size: 0.875rem;
   line-height: 1.5;
 }
 

diff --git a/plugins/markdown/plugin-revealjs/src/client/styles/_normalize.scss b/plugins/markdown/plugin-revealjs/src/client/styles/_normalize.scss
@@ -39,7 +39,7 @@
   ol ol,
   ol ul {
     display: block;
-    margin-left: 40px;
+    margin-left: 2.5rem;
   }
 
   ul {
@@ -59,7 +59,7 @@
   }
 
   dd {
-    margin-left: 40px;
+    margin-left: 2.5rem;
   }
 
   blockquote {

diff --git a/plugins/search/plugin-slimsearch/src/client/styles/search-modal.scss b/plugins/search/plugin-slimsearch/src/client/styles/search-modal.scss
@@ -191,13 +191,13 @@
   float: right;
 
   margin: 0 0.5rem;
-  padding: 4px;
+  padding: 0.25rem;
   border: 1px solid var(--vp-c-border);
-  border-radius: 4px;
+  border-radius: 0.25rem;
 
   box-shadow: 1px 1px 4px 0 var(--vp-c-shadow);
 
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1;
 
   .slimsearch-suggestion.active & {
@@ -228,7 +228,7 @@
     padding: 1.5rem;
 
     font-weight: 600;
-    font-size: 22px;
+    font-size: 1.3rem;
     text-align: center;
   }
 }

diff --git a/plugins/seo/plugin-sitemap/templates/sitemap.xsl b/plugins/seo/plugin-sitemap/templates/sitemap.xsl
@@ -67,7 +67,7 @@
 
           table {
             width: 100%;
-            border-radius: 8px;
+            border-radius: 0.5rem;
             border-collapse: collapse;
             text-align: center;
             overflow: hidden;
@@ -80,7 +80,7 @@
           }
 
           th {
-            min-width: 56px;
+            min-width: 3.5em;
             padding: 0.6em 1em;
 
             background-color: var(--brand-color);

diff --git a/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss b/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
@@ -32,7 +32,7 @@
 
   max-width: 80vw;
   padding: 1rem 2rem;
-  border-radius: 8px;
+  border-radius: 0.5rem;
 
   background: var(--redirect-c-bg);
   box-shadow: 0 2px 6px 0 var(--redirect-c-shadow);
@@ -41,7 +41,7 @@
 .redirect-modal-hint {
   margin-top: 0.5rem;
   color: var(--vp-c-text-mute);
-  font-size: 14px;
+  font-size: 0.875rem;
   text-align: start;
 
   input[type='checkbox'] {
@@ -115,7 +115,7 @@
   margin: 1rem 0;
   padding: 0.5rem 0.75rem;
   border: none;
-  border-radius: 8px;
+  border-radius: 0.5rem;
 
   background-color: var(--redirect-c-control);
   color: inherit;

diff --git a/themes/theme-default/src/client/components/VPNavbarDropdown.vue b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
@@ -273,7 +273,6 @@ onContentUpdated(() => {
   }
 
   .vp-navbar-dropdown-wrapper.mobile & > a {
-    font-size: 15px;
     line-height: 2rem;
   }
 }
@@ -290,7 +289,6 @@ onContentUpdated(() => {
     padding-bottom: 0;
     border-top: 0;
 
-    font-size: 15px;
     line-height: 2rem;
   }
 
@@ -325,7 +323,6 @@ onContentUpdated(() => {
 
   .vp-navbar-dropdown-wrapper.mobile & {
     padding-left: 1rem;
-    font-size: 14px;
   }
 }
 </style>
diff --git a/themes/theme-default/src/client/components/VPPageMeta.vue b/themes/theme-default/src/client/components/VPPageMeta.vue
@@ -103,7 +103,7 @@ const contributors = useContributors()
     margin-top: 0.25rem;
     margin-right: 0.5rem;
     margin-bottom: 0.25rem;
-    font-size: 14px;
+    font-size: 0.875em;
 
     @media print {
       display: none;
@@ -123,10 +123,10 @@ const contributors = useContributors()
   .contributors {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
-    font-size: 14px;
+    font-size: 0.875em;
 
     @media (max-width: $MQMobile) {
-      font-size: 13px;
+      font-size: 0.825em;
       text-align: start;
     }
   }

diff --git a/themes/theme-default/src/client/components/VPSidebar.vue b/themes/theme-default/src/client/components/VPSidebar.vue
@@ -39,7 +39,7 @@ defineSlots<{
 
   background-color: var(--vp-sidebar-c-bg);
 
-  font-size: 16px;
+  font-size: 1rem;
 
   transition:
     transform var(--vp-t-transform),
@@ -52,7 +52,7 @@ defineSlots<{
   // narrow desktop / iPad
   @media (max-width: $MQNarrow) {
     width: var(--sidebar-width-mobile);
-    font-size: 15px;
+    font-size: 0.9rem;
   }
 
   // wide mobile

diff --git a/themes/theme-default/src/client/components/global/Badge.vue b/themes/theme-default/src/client/components/global/Badge.vue
@@ -45,15 +45,15 @@ defineSlots<{
   display: inline-block;
   vertical-align: top;
 
-  height: 18px;
+  height: 1.3em;
   padding: 0 6px;
   border-radius: 3px;
 
   background: var(--vp-c-accent-soft);
   color: var(--vp-c-accent);
 
-  font-size: 14px;
-  line-height: 18px;
+  font-size: 0.875em;
+  line-height: 1.3;
 
   transition:
     background var(--vp-t-color),

diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
@@ -41,7 +41,7 @@ const routePath = useRoutePath()
 
   padding-top: calc(var(--navbar-height) + 1rem) !important;
   padding-bottom: 0 !important;
-  font-size: 14px;
+  font-size: 0.875em;
 
   .route-link {
     color: inherit;

diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
@@ -41,7 +41,7 @@ const routePath = useRoutePath()
 
   padding-top: calc(var(--navbar-height) + 1rem) !important;
   padding-bottom: 0 !important;
-  font-size: 14px;
+  font-size: 0.875em;
 
   .route-link {
     color: inherit;