fix: relative font sizes instead of px defined

assets/css/style.css

@@ -47,12 +47,13 @@ html[data-theme='dark'] {
 html {
   background-color: var(--bg-color);
   -webkit-font-smoothing: antialiased;
+  font-size: 62.5%;
 }
 
 body {
   color: var(--body-color);
   font-family: 'PingHei', 'PingFang SC', 'Helvetica Neue', 'Work Sans', 'Hiragino Sans GB', sans-serif;
-  font-size: 15px;
+  font-size: 1.5rem;
   width: 100%;
   margin: 0 auto;
   background-color: var(--bg-color);
@@ -61,7 +62,7 @@ body {
 p {
   line-height: 1.9em;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 1.4rem;
 }
 
 a {
@@ -91,7 +92,7 @@ blockquote {
 .tag,
 .category {
   display: inline-block;
-  font-size: 15px;
+  font-size: 1.5rem;
   line-height: 1;
   margin: 5px 8px 5px 0;
 }
@@ -210,7 +211,7 @@ header {
 header .nav__list {
   list-style: none;
   padding: 20px 30px;
-  font-size: 12px;
+  font-size: 1.2rem;
 }
 
 header .nav__list li {
@@ -235,7 +236,7 @@ header .nav__list a.current {
 .theme-switch {
   margin-top: -5px;
   color: var(--nav-text-color);
-  font-size: 1rem;
+  font-size: 1.75rem;
 }
 
 header .information {
@@ -285,7 +286,7 @@ aside {
 }
 
 .sidebar .logo-title .description {
-  font-size: 14px;
+  font-size: 1.4rem;
   margin: 0 1em;
 }
 
@@ -301,7 +302,7 @@ aside {
 
 .sidebar .logo-title .title h3 {
   text-transform: uppercase;
-  font-size: 2rem;
+  font-size: 2.2rem;
   font-weight: bold;
   letter-spacing: 2px;
   line-height: 1;
@@ -311,14 +312,14 @@ aside {
 .sidebar .logo-title .title a {
   text-decoration: none;
   color: var(--heading-color);
-  font-size: 2rem;
+  font-size: 3rem;
   font-weight: bold;
 }
 
 .sidebar .social-links {
   list-style: none;
   padding: 0;
-  font-size: 14px;
+  font-size: 1.4rem;
   text-align: center;
 }
 
@@ -355,7 +356,7 @@ aside {
 .post .post-title h2 {
   text-transform: uppercase;
   letter-spacing: 1px;
-  font-size: 28px;
+  font-size: 2.6rem;
   line-height: 1;
   font-weight: 600;
   color: var(--heading-color);
@@ -366,9 +367,8 @@ aside {
   letter-spacing: 1px;
   line-height: 1;
   font-weight: 600;
-  /* color: #464646; */
   color: var(--heading-color);
-  font-size: 22px;
+  font-size: 2.2rem;
   margin: 0;
 }
 
@@ -395,13 +395,13 @@ aside {
 }
 
 .post .post-content h3 {
-  font-size: 22px;
+  font-size: 2.2rem;
   font-weight: 600;
 }
 
 .post .post-content h4 {
   /* color: var(--heading-color); */
-  font-size: 16px;
+  font-size: 1.6rem;
 }
 
 .post .post-content img {
@@ -411,13 +411,13 @@ aside {
 .post .post-content ul {
   line-height: 1.9em;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 1.4rem;
 }
 
 .post .post-content ol {
   line-height: 1.9em;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 1.4rem;
 }
 
 .post .post-footer {
@@ -433,7 +433,7 @@ aside {
 
 .post .post-footer .meta .info {
   float: left;
-  font-size: 12px;
+  font-size: 1.2rem;
   margin-bottom: 1em;
   color: var(--body-color);
 }
@@ -493,7 +493,7 @@ aside {
 
 .post .post-footer .tags {
   padding-bottom: 15px;
-  font-size: 13px;
+  font-size: 1.3rem;
 }
 
 .post .post-footer .tags ul {
@@ -597,7 +597,7 @@ aside {
 .footer {
   clear: both;
   text-align: center;
-  font-size: 10px;
+  font-size: 1rem;
   margin: 0 auto;
   bottom: 0;
   width: 100%;
@@ -632,7 +632,7 @@ aside {
 }
 
 .list-with-title {
-  font-size: 14px;
+  font-size: 1.4rem;
   margin: 30px;
   padding: 0;
 }
@@ -643,7 +643,7 @@ aside {
 }
 
 .list-with-title .listing-title {
-  font-size: 24px;
+  font-size: 2.4rem;
   color: #666666;
   font-weight: 600;
   line-height: 2.2em;
@@ -692,7 +692,7 @@ aside {
 .evernote a {
   color: #fff;
   padding: 11px;
-  font-size: 12px;
+  font-size: 1.2rem;
 }
 
 .evernote a:hover {
@@ -740,7 +740,7 @@ aside {
 }
 
 .about h3 {
-  font-size: 22px;
+  font-size: 2.2rem;
 }
 
 /* links*/
@@ -749,7 +749,7 @@ aside {
 }
 
 .links h3 {
-  font-size: 22px;
+  font-size: 2.2rem;
 }
 
 .links a {
@@ -766,7 +766,7 @@ aside {
 }
 
 .read_more {
-  font-size: 14px;
+  font-size: 1.4rem;
 }
 
 .back-button {
@@ -797,7 +797,7 @@ a.btn {
   outline: 0;
   color: var(--post-color);
   background: transparent;
-  font-size: 14px;
+  font-size: 1.4rem;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -814,7 +814,7 @@ a.btn {
   outline: 0px;
   color: #464545;
   background: transparent;
-  font-size: 14px;
+  font-size: 1.4rem;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -866,7 +866,7 @@ a.btn {
   outline: 0;
   color: var(--post-color);
   background: transparent;
-  font-size: 14px;
+  font-size: 1.4rem;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -884,7 +884,7 @@ a.btn {
   outline: 0;
   color: #fff;
   background: #3cbd10;
-  font-size: 14px;
+  font-size: 1.4rem;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -982,7 +982,7 @@ a.btn {
   }
 
   .sidebar .logo-title .title h3 {
-    font-size: 20px;
+    font-size: 2.2rem;
   }
 
   header {
@@ -1182,7 +1182,7 @@ a.btn {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
-  font-size: 14px;
+  font-size: 1.4rem;
   padding: 8px;
   outline: none;
   background-color: var(--bg-color);