feat: prefer rem unit

Mister-Hope · Mister-Hope · commit 869e08cdd9a3 · 2025-02-27T22:28:30.000+08:00
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;

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ const routePath = useRoutePath()`
`44`	`44`	`& {`
`45`	`45`	`padding-top: calc(var(--navbar-height) + 1rem) !important;`
`46`	`46`	`padding-bottom: 0 !important;`
`47`		`- font-size: 14px;`
	`47`	`+ font-size: 0.875rem;`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`.route-link {`
Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@`
`80`	`80`
`81`	`81`	`.vp-notice-content {`
`82`	`82`	`margin: 1rem 0.75rem;`
`83`		`- font-size: 14px;`
	`83`	`+ font-size: 0.875rem;`
`84`	`84`	`line-height: 1.5;`
`85`	`85`	`}`
`86`	`86`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@`
`39`	`39`	`ol ol,`
`40`	`40`	`ol ul {`
`41`	`41`	`display: block;`
`42`		`- margin-left: 40px;`
	`42`	`+ margin-left: 2.5rem;`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`ul {`
`@@ -59,7 +59,7 @@`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`dd {`
`62`		`- margin-left: 40px;`
	`62`	`+ margin-left: 2.5rem;`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`blockquote {`
Original file line number	Diff line number	Diff line change
`@@ -273,7 +273,6 @@ onContentUpdated(() => {`
`273`	`273`	`}`
`274`	`274`
`275`	`275`	`.vp-navbar-dropdown-wrapper.mobile & > a {`
`276`		`- font-size: 15px;`
`277`	`276`	`line-height: 2rem;`
`278`	`277`	`}`
`279`	`278`	`}`
`@@ -290,7 +289,6 @@ onContentUpdated(() => {`
`290`	`289`	`padding-bottom: 0;`
`291`	`290`	`border-top: 0;`
`292`	`291`
`293`		`- font-size: 15px;`
`294`	`292`	`line-height: 2rem;`
`295`	`293`	`}`
`296`	`294`
`@@ -325,7 +323,6 @@ onContentUpdated(() => {`
`325`	`323`
`326`	`324`	`.vp-navbar-dropdown-wrapper.mobile & {`
`327`	`325`	`padding-left: 1rem;`
`328`		`- font-size: 14px;`
`329`	`326`	`}`
`330`	`327`	`}`
`331`	`328`	`</style>`