pages(media): add 320px device

module/comment.ftl

@@ -2,6 +2,7 @@
     <#if !post.disallowComment!false>
     <div id="comment" class="comment close">
         <script src="${theme_base!}/source/plugins/comment/vue.min.js"></script>
+        <script src="${theme_base!}/source/plugins/comment/halo-comment.min.js"></script>
         <script src="${options.comment_internal_plugin_js!'//cdn.jsdelivr.net/gh/halo-dev/halo-comment@latest/dist/halo-comment.min.js'}"></script>
         <halo-comment id="${target.id?c}" type="${type}""/>
     </div>

module/macro.ftl

@@ -28,7 +28,7 @@
             <footer>
 
                 <div class="copyright">
-                    <a href="https://www.7wate.com">Designed by 7Wate.</a>
+                    <a href="https://www.7wate.com">Designed by 7Wate</a>
                     <a href="https://halo.run">Proudly published with Halo</a>
                 </div>
                 <@global.footer />

source/css/Redemption.css

@@ -1,8 +1,13 @@
-body {
+@charset "UTF-8";
-  font-size: 16px;
+html {
   font-variant-numeric: tabular-nums;
   -webkit-font-smoothing: antialiased;
 }
+@media (max-width: 320px) {
+  html {
+    font-size: 18px;
+  }
+}
 
 [data-font=serif] {
   font-family: -apple-system, BlinksMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -60,9 +65,6 @@ main {
   flex-wrap: nowrap;
   flex-direction: column;
   align-items: center;
-  width: 52rem;
-  margin-top: 4rem;
-  padding-bottom: 3rem;
   background: #ffffff;
   box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.17);
 }
@@ -72,8 +74,16 @@ main {
     box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.34);
   }
 }
+@media (max-width: 320px) {
+  main {
+    width: 95%;
+    margin-top: 3%;
+    padding-bottom: 7%;
+  }
+}
 
-main > .index,
+@media (max-width: 320px) {
+  main > .index,
 main > .archives,
 main > .categories,
 main > .category,
@@ -81,21 +91,29 @@ main > .links,
 main > .post,
 main > .tag,
 main > .journals {
-  width: 45rem;
+    width: 90%;
-  padding: 1rem 0.1rem 1rem 0.1rem;
+    padding: 2.5% 5%;
+  }
+  main > .index > ul,
+main > .archives > ul,
+main > .categories > ul,
+main > .category > ul,
+main > .links > ul,
+main > .post > ul,
+main > .tag > ul,
+main > .journals > ul {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
 }
 
 .menu {
   position: fixed;
   right: 0.5rem;
   bottom: 10rem;
+  font-size: 0.5rem;
 }
 
-.close {
-  display: none;
-}
-
-/*animation starts*/
 @-webkit-keyframes fadeInDown {
   0% {
     opacity: 0;
@@ -136,18 +154,8 @@ main > .journals {
     transform: translateY(0);
   }
 }
-/*animation ends*/
 .header {
-  width: 45rem;
-  padding: 7rem 0 3rem 0;
-  -webkit-background-size: cover;
-  background-size: cover;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.header > .title {
-  width: 6rem;
 }
 .header > .title > a {
   font-size: 2.2rem;
@@ -160,26 +168,10 @@ main > .journals {
 .header > .title > a > span:hover {
   color: #26262680;
 }
-@media (prefers-color-scheme: dark) {
-  .header > .title > a > span {
-    color: #dbdbdb;
-  }
-  .header > .title > a > span:hover {
-    color: #dbdbdb80;
-  }
-}
 .header > .description {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
   font-size: 0.9rem;
   color: #8c8c8c;
 }
-@media (prefers-color-scheme: dark) {
-  .header > .description {
-    color: #7d7d7d;
-  }
-}
 .header > .description > .socials {
   display: flex;
   justify-content: flex-end;
@@ -194,6 +186,15 @@ main > .journals {
   color: #8c8c8c80;
 }
 @media (prefers-color-scheme: dark) {
+  .header > .title > a > span {
+    color: #dbdbdb;
+  }
+  .header > .title > a > span:hover {
+    color: #dbdbdb80;
+  }
+  .header > .description {
+    color: #7d7d7d;
+  }
   .header > .description > .socials > a {
     color: #7d7d7d;
   }
@@ -201,33 +202,49 @@ main > .journals {
     color: #7d7d7d80;
   }
 }
-
+@media (max-width: 320px) {
-footer {
+  .header {
-  padding: 2rem 0;
+    flex-direction: column;
+    align-items: center;
+    width: 90%;
+    padding: 17% 5% 5% 5%;
+  }
+  .header > .description {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }
+
 footer .copyright {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   font-size: 0.8rem;
 }
 footer .copyright a {
-  margin: 0 0.125rem;
   color: #bfbfbf;
 }
 footer .copyright a:hover {
   color: #262626;
 }
 @media (prefers-color-scheme: dark) {
-  footer .copyright a {
+  footer .copyright > > a {
     color: #262626;
   }
-  footer .copyright a:hover {
+  footer .copyright > > a:hover {
     color: #bfbfbf;
   }
 }
+@media (max-width: 320px) {
+  footer {
+    padding: 5% 0;
+  }
+}
 
 .pagenav {
   display: flex;
   justify-content: space-between;
-  padding: 2rem 0;
 }
 .pagenav > a {
   text-decoration: none;
@@ -245,25 +262,24 @@ footer .copyright a:hover {
     color: #434343;
   }
 }
+@media (max-width: 320px) {
+  .pagenav {
+    padding: 5% 0 7% 0;
+  }
+}
 
-.comment {
+@media (max-width: 320px) {
-  width: 52rem;
+  .comment {
-  margin: 1rem 0rem;
+    width: 90%;
+    margin: 5% 0;
+  }
 }
 
 .post-bottom-menu {
   display: flex;
   justify-content: space-around;
-  margin-top: 2rem;
-  padding-top: 2rem;
-  width: 40rem;
   border-top: 1px solid #e7e7e7;
 }
-@media (prefers-color-scheme: dark) {
-  .post-bottom-menu {
-    border-top: 1px solid #e7e7e7;
-  }
-}
 .post-bottom-menu > a {
   color: #262626;
 }
@@ -271,6 +287,11 @@ footer .copyright a:hover {
   color: #595959;
 }
 @media (prefers-color-scheme: dark) {
+  .post-bottom-menu {
+    border-top: 1px solid #e7e7e7;
+  }
+}
+@media (prefers-color-scheme: dark) and (prefers-color-scheme: dark) {
   .post-bottom-menu > a {
     color: #b6b6b6;
   }
@@ -278,25 +299,36 @@ footer .copyright a:hover {
     color: #434343;
   }
 }
-
+@media (max-width: 320px) {
-.archives > ul {
+  .post-bottom-menu {
-  padding: 0.625rem 0.1rem;
+    margin-top: 7%;
+    padding-top: 7%;
+    width: 80%;
+  }
 }
+
+.close {
+  display: none;
+}
+
+/* 
+ *
+ * 归档页面
+ * 
+ * 按照顺序
+ * 1.默认
+ * 2.深色
+ * 3.媒体查询
+ *   - 320px
+*/
 .archives > ul > .year {
   font-size: 1.5rem;
   font-weight: bold;
   line-height: 2.2rem;
-  padding: 0.5rem 0;
   color: #262626;
 }
-@media (prefers-color-scheme: dark) {
-  .archives > ul > .year {
-    color: #dbdbdb;
-  }
-}
 .archives > ul > li {
   display: flex;
-  justify-content: space-between;
   font-size: 0.875rem;
   padding-bottom: 0.3rem;
   line-height: 1.75rem;
@@ -307,44 +339,63 @@ footer .copyright a:hover {
 .archives > ul > li > a:hover {
   color: #59595980;
 }
+.archives > ul > li > span {
+  color: #8c8c8c;
+}
 @media (prefers-color-scheme: dark) {
+  .archives > ul > .year {
+    color: #dbdbdb;
+  }
   .archives > ul > li > a {
     color: #acacac;
   }
   .archives > ul > li > a:hover {
     color: #acacac80;
   }
-}
-.archives > ul > li > span {
-  color: #8c8c8c;
-}
-@media (prefers-color-scheme: dark) {
   .archives > ul > li > span {
     color: #7d7d7d;
   }
 }
-
+@media (max-width: 320px) {
-.category > ul {
+  .archives > ul {
-  padding: 0.625rem 0.1rem;
+    padding: 2.5% 1%;
+  }
+  .archives > ul > .year {
+    padding: 2.5% 0;
+    text-align: center;
+  }
+  .archives > ul > .title {
+    padding: 2.5% 0;
+    text-align: center;
+  }
+  .archives > ul > li {
+    justify-content: center;
+  }
+  .archives > ul > li > span {
+    display: none;
+  }
 }
+
+/* 
+ *
+ * 分类页面
+ * 
+ * 按照顺序
+ * 1.默认
+ * 2.深色
+ * 3.媒体查询
+ *   - 320px
+*/
 .category > ul > .name {
   font-size: 1.5rem;
   font-weight: bold;
   line-height: 2.2rem;
-  padding: 0.5rem 0;
   color: #262626;
 }
-@media (prefers-color-scheme: dark) {
-  .category > ul > .name {
-    color: #dbdbdb;
-  }
-}
 .category > ul > li {
   display: flex;
-  justify-content: space-between;
   font-size: 0.875rem;
-  padding-bottom: 0.3rem;
+  line-height: 2rem;
-  line-height: 1.75rem;
 }
 .category > ul > li > a {
   color: #595959;
@@ -352,36 +403,46 @@ footer .copyright a:hover {
 .category > ul > li > a:hover {
   color: #59595980;
 }
+.category > ul > li > span {
+  color: #8c8c8c;
+}
 @media (prefers-color-scheme: dark) {
+  .category > ul > .name {
+    color: #dbdbdb;
+  }
   .category > ul > li > a {
     color: #dbdbdb;
   }
   .category > ul > li > a:hover {
     color: #dbdbdb80;
   }
-}
-.category > ul > li > span {
-  color: #8c8c8c;
-}
-@media (prefers-color-scheme: dark) {
   .category > ul > li > span {
     color: #7d7d7d;
   }
 }
-
+@media (max-width: 320px) {
-.categories {
+  .category > ul {
-  margin: 5rem 0;
+    padding: 2.5% 1%;
+  }
+  .category > ul > .name {
+    padding: 2.5% 0;
+    text-align: center;
+  }
+  .category > ul > li {
+    justify-content: center;
+  }
+  .category > ul > li > span {
+    display: none;
+  }
 }
+
 .categories > ul {
   display: flex;
   flex-direction: row;
   justify-content: center;
-  align-items: center;
-  align-content: center;
   flex-wrap: wrap;
 }
 .categories > ul > li {
-  margin: 0.5rem 1rem;
   font-size: 1rem;
 }
 .categories > ul > li > a {
@@ -390,14 +451,6 @@ footer .copyright a:hover {
 .categories > ul > li > a:hover {
   color: #26262680;
 }
-@media (prefers-color-scheme: dark) {
-  .categories > ul > li > a {
-    color: #dbdbdb;
-  }
-  .categories > ul > li > a:hover {
-    color: #dbdbdb80;
-  }
-}
 .categories > ul > li > a > span {
   color: #8c8c8c;
 }
@@ -408,6 +461,22 @@ footer .copyright a:hover {
   right: -0.125rem;
   font-size: 0.75rem;
 }
+@media (prefers-color-scheme: dark) {
+  .categories > ul > li > a {
+    color: #dbdbdb;
+  }
+  .categories > ul > li > a:hover {
+    color: #dbdbdb80;
+  }
+}
+@media (max-width: 320px) {
+  .categories {
+    margin: 7% 0;
+  }
+  .categories > ul > li {
+    margin: 2.5% 2.5%;
+  }
+}
 
 .index > h1 > a {
   letter-spacing: 0.0625rem;
@@ -418,42 +487,22 @@ footer .copyright a:hover {
 .index > h1 > a:hover {
   color: #26262680;
 }
-@media (prefers-color-scheme: dark) {
-  .index > h1 > a {
-    color: #dbdbdb;
-  }
-  .index > h1 > a:hover {
-    color: #dbdbdb80;
-  }
-}
 .index > p {
   line-height: 1.5rem;
   text-indent: 2rem;
   color: #595959;
 }
-@media (prefers-color-scheme: dark) {
-  .index > p {
-    color: #acacac;
-  }
-}
 .index > .info {
   display: flex;
   justify-content: flex-end;
   flex-wrap: wrap;
   flex-direction: row;
-  padding: 0.5rem 0 2rem 0;
   border-bottom: 1px solid #d9d9d9;
 }
-@media (prefers-color-scheme: dark) {
-  .index > .info {
-    border-bottom: 1px solid #434343;
-  }
-}
 .index > .info > .date,
 .index > .info > .tag {
   font-weight: 400;
   font-size: 0.75rem;
-  margin: 0 0.5rem;
 }
 .index > .info > .date > i,
 .index > .info > .tag > i {
@@ -461,12 +510,6 @@ footer .copyright a:hover {
   top: 0.1rem;
   color: #8c8c8c;
 }
-@media (prefers-color-scheme: dark) {
-  .index > .info > .date > i,
-.index > .info > .tag > i {
-    color: #7d7d7d;
-  }
-}
 .index > .info > .date > a,
 .index > .info > .tag > a {
   font-size: 0.75rem;
@@ -477,6 +520,22 @@ footer .copyright a:hover {
   color: #8c8c8c80;
 }
 @media (prefers-color-scheme: dark) {
+  .index > h1 > a {
+    color: #dbdbdb;
+  }
+  .index > h1 > a:hover {
+    color: #dbdbdb80;
+  }
+  .index > p {
+    color: #acacac;
+  }
+  .index > .info {
+    border-bottom: 1px solid #434343;
+  }
+  .index > .info > .date > i,
+.index > .info > .tag > i {
+    color: #7d7d7d;
+  }
   .index > .info > .date > a,
 .index > .info > .tag > a {
     color: #7d7d7d;
@@ -486,32 +545,29 @@ footer .copyright a:hover {
     color: #7d7d7d80;
   }
 }
+@media (max-width: 320px) {
+  .index > h1 {
+    margin-block-start: 0;
+    text-align: center;
+  }
+  .index > .info {
+    padding: 1% 0 2% 0;
+  }
+  .index > .info > span {
+    margin: 1% 1%;
+  }
+}
 
 .journals > .name {
   font-size: 1.5rem;
   font-weight: bold;
   line-height: 2.2rem;
-  padding: 0.5rem 0;
   color: #262626;
 }
-@media (prefers-color-scheme: dark) {
-  .journals > .name {
-    color: #dbdbdb;
-  }
-}
-.journals > ul > li {
-  padding: 1rem 0.1rem;
-}
 .journals > ul > li > .content {
-  padding: 0.25rem 0.25rem;
   font-size: 1rem;
   color: #595959;
 }
-@media (prefers-color-scheme: dark) {
-  .journals > ul > li > .content {
-    color: #acacac;
-  }
-}
 .journals > ul > li > .info {
   display: flex;
   justify-content: flex-end;
@@ -519,26 +575,35 @@ footer .copyright a:hover {
   color: #8c8c8c;
 }
 @media (prefers-color-scheme: dark) {
+  .journals > .name {
+    color: #dbdbdb;
+  }
+  .journals > ul > li > .content {
+    color: #acacac;
+  }
   .journals > ul > li > .info {
     color: #7d7d7d;
   }
 }
-
+@media (max-width: 320px) {
-.links > ul {
+  .journals > .name {
-  padding: 0.625rem 0.1rem;
+    padding: 2.5% 0;
+    text-align: center;
+  }
+  .journals > ul > li {
+    padding: 2.5% 0;
+  }
+  .journals > ul > li > .info {
+    padding: 1% 0;
+  }
 }
+
 .links > ul > .friend {
   font-size: 1.5rem;
   font-weight: bold;
   line-height: 2.2rem;
-  padding: 0.5rem 0;
   color: #262626;
 }
-@media (prefers-color-scheme: dark) {
-  .links > ul > .friend {
-    color: #dbdbdb;
-  }
-}
 .links > ul > li {
   display: flex;
   justify-content: space-between;
@@ -553,6 +618,9 @@ footer .copyright a:hover {
   color: #59595980;
 }
 @media (prefers-color-scheme: dark) {
+  .links > ul > .friend {
+    color: #dbdbdb;
+  }
   .links > ul > li > a {
     color: #dbdbdb;
   }
@@ -560,81 +628,79 @@ footer .copyright a:hover {
     color: #dbdbdb80;
   }
 }
-
+@media (max-width: 320px) {
-.post > .title {
+  .links > ul {
-  margin-top: 4rem;
+    padding: 2.5% 1%;
+  }
+  .links > ul > .friend {
+    padding: 2.5% 0;
+    text-align: center;
+  }
+  .links > ul > li {
+    justify-content: center;
+    padding-bottom: 1%;
+  }
 }
+
 .post > .title > h1 > a {
   letter-spacing: 0.0625rem;
   font-size: 2rem;
   line-height: 2rem;
   color: #262626;
 }
-@media (prefers-color-scheme: dark) {
-  .post > .title > h1 > a {
-    color: #dbdbdb;
-  }
-}
 .post > .title > h1 > a:hover {
   color: #26262680;
 }
-@media (prefers-color-scheme: dark) {
-  .post > .title > h1 > a:hover {
-    color: #dbdbdb80;
-  }
-}
 .post > .title > .info {
-  padding-bottom: 1rem;
+  display: flex;
-  margin-bottom: 1rem;
+  flex-direction: column;
   border-bottom: 1px solid #d9d9d9;
 }
-@media (prefers-color-scheme: dark) {
-  .post > .title > .info {
-    border-bottom: 1px solid #434343;
-  }
-}
 .post > .title > .info > span {
-  margin: 0 0.25rem;
   font-weight: 400;
   font-size: 0.75rem;
   color: #8c8c8c;
 }
-@media (prefers-color-scheme: dark) {
-  .post > .title > .info > span {
-    color: #7d7d7d;
-  }
-}
 .post > .title > .info > span i {
   position: relative;
   top: 0.125rem;
   color: #8c8c8c;
 }
 @media (prefers-color-scheme: dark) {
-  .post > .title > .info > span i {
+  .post > .title > h1 > a {
+    color: #dbdbdb;
+  }
+  .post > .title > h1 > a :hover {
+    color: #dbdbdb80;
+  }
+  .post > .title > .info {
+    border-bottom: 1px solid #434343;
+  }
+  .post > .title > .info span {
+    color: #7d7d7d;
+  }
+  .post > .title > .info span i {
     color: #7d7d7d;
   }
 }
-
+@media (max-width: 320px) {
-.tag > ul {
+  .post > .title {
-  padding: 0.625rem 0.1rem;
+    margin-top: 10%;
+  }
+  .post > .title > .info > span {
+    padding: 1% 1%;
+  }
 }
+
 .tag > ul > .name {
   font-size: 1.5rem;
   font-weight: bold;
   line-height: 2.2rem;
-  padding: 0.5rem 0;
   color: #262626;
 }
-@media (prefers-color-scheme: dark) {
-  .tag > ul > .name {
-    color: #dbdbdb;
-  }
-}
 .tag > ul > li {
   display: flex;
-  justify-content: space-between;
   font-size: 0.875rem;
-  padding-bottom: 0.3rem;
   line-height: 1.75rem;
 }
 .tag > ul > li > a {
@@ -644,6 +710,9 @@ footer .copyright a:hover {
   color: #59595980;
 }
 @media (prefers-color-scheme: dark) {
+  .tag > ul > .name {
+    color: #dbdbdb;
+  }
   .tag > ul > li > a {
     color: #dbdbdb;
   }
@@ -651,20 +720,30 @@ footer .copyright a:hover {
     color: #dbdbdb80;
   }
 }
-
+@media (max-width: 320px) {
-.tags {
+  .tag > ul {
-  margin: 5rem 0;
+    padding: 2.5% 1%;
+  }
+  .tag > ul > .name {
+    padding: 2.5% 0;
+    text-align: center;
+  }
+  .tag > ul > li {
+    justify-content: center;
+    padding-bottom: 1%;
+  }
+  .tag > ul > li > span {
+    display: none;
+  }
 }
+
 .tags > ul {
   display: flex;
   flex-direction: row;
   justify-content: center;
-  align-items: center;
-  align-content: center;
   flex-wrap: wrap;
 }
 .tags > ul > li {
-  margin: 0.5rem 1rem;
   font-size: 1rem;
 }
 .tags > ul > li > a {
@@ -673,14 +752,6 @@ footer .copyright a:hover {
 .tags > ul > li > a:hover {
   color: #26262680;
 }
-@media (prefers-color-scheme: dark) {
-  .tags > ul > li > a {
-    color: #dbdbdb;
-  }
-  .tags > ul > li > a:hover {
-    color: #dbdbdb80;
-  }
-}
 .tags > ul > li > a > span {
   color: #8c8c8c;
 }
@@ -691,5 +762,21 @@ footer .copyright a:hover {
   right: -0.125rem;
   font-size: 0.75rem;
 }
+@media (prefers-color-scheme: dark) {
+  .tags > ul > li > a {
+    color: #dbdbdb;
+  }
+  .tags > ul > li > a:hover {
+    color: #dbdbdb80;
+  }
+}
+@media (max-width: 320px) {
+  .tags {
+    margin: 7% 0;
+  }
+  .tags > ul > li {
+    margin: 2.5% 2.5%;
+  }
+}
 
 /*# sourceMappingURL=redemption.css.map */

source/css/Redemption.scss

@@ -3,6 +3,7 @@
 @import "base/variables";
 @import "base/font";
 @import "base/base";
+// @import "base/media";
 
 // 组件
 @import "pages/layout/header";

source/css/base/_base.scss

@@ -10,7 +10,6 @@ html {
   ::-webkit-scrollbar-thumb {
     height: 40px;
     border-radius: 16px;
-    // 浅色
     background-color: rgba(0, 0, 0, 0.249);
 
     @include darkmode {
@@ -21,11 +20,9 @@ html {
 
   ::-webkit-scrollbar-thumb {
     &:hover {
-      // 浅色
       background-color: rgba(0, 0, 0, 0.249);
 
       @include darkmode {
-        // 深色
         background-color: blue;
       }
     }
@@ -34,18 +31,16 @@ html {
 
 // body
 body {
-  // 浅色
   background-color: #f7f7f7;
   color: #333333;
 
-  // 深色
   @include darkmode {
     background-color: #3d3d3d;
     color: #a3a3a3;
   }
 }
 
-// container
+// container 主容器
 .container {
   display: flex;
   flex-wrap: nowrap;
@@ -53,98 +48,114 @@ body {
   align-items: center;
 }
 
-// main
+// main 
 main {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: column;
   align-items: center;
-  width: 52rem;
-  margin-top: 4rem;
-  padding-bottom: 3rem;
-  // 浅色
   background: #ffffff;
-  box-shadow: 0 0.375rem 1rem -0.5rem rgb(0, 0, 0,0.17);
+  box-shadow: 0 0.375rem 1rem -0.5rem rgb(0, 0, 0, 0.17);
 
-  // 深色
+  // 深色模式 
   @include darkmode {
     background: #292929;
-    box-shadow: 0 0.375rem 1rem -0.5rem rgb(0, 0, 0,0.34);
+    box-shadow: 0 0.375rem 1rem -0.5rem rgb(0, 0, 0, 0.34);
+  }
+
+  // 320px 设备
+  @media (max-width: 320px) {
+    width: 95%;
+    margin-top: 3%;
+    padding-bottom: 7%;
   }
 }
 
-// pages
+// 页面宽度
-main > .index,
+main>.index,
-main > .archives,
+main>.archives,
-main > .categories,
+main>.categories,
-main > .category,
+main>.category,
-main > .links,
+main>.links,
-main > .post,
+main>.post,
-main > .tag,
+main>.tag,
-main > .journals {
+main>.journals {
-  width: 45rem;
+
-  padding: 1rem 0.1rem 1rem 0.1rem;
+  // 320px 设备
+  @media (max-width: 320px) {
+    >ul {
+      margin-block-start: 0;
+      margin-block-end: 0;
+    }
+
+    width: 90%;
+    padding: 2.5% 5%;
+  }
 }
 
-.menu{
+
-    position: fixed;
+// 菜单 临时使用
-    right: 0.5rem;
+.menu {
-    bottom: 10rem;
+  position: fixed;
+  right: 0.5rem;
+  bottom: 10rem;
+  font-size: 0.5rem;
 }
 
-.close {
-  display: none;
-}
 
-/*animation starts*/
+
+
+
+
+
+
+
+// 全局动画
 
 @-webkit-keyframes fadeInDown {
-    0% {
+  0% {
-        opacity: 0;
+    opacity: 0;
-        -webkit-transform: translateY(-3px);
+    -webkit-transform: translateY(-3px);
-    }
+  }
 
-    100% {
+  100% {
-        opacity: 1;
+    opacity: 1;
-        -webkit-transform: translateY(0);
+    -webkit-transform: translateY(0);
-    }
+  }
 }
 
 @-moz-keyframes fadeInDown {
-    0% {
+  0% {
-        opacity: 0;
+    opacity: 0;
-        -moz-transform: translateY(-3px);
+    -moz-transform: translateY(-3px);
-    }
+  }
 
-    100% {
+  100% {
-        opacity: 1;
+    opacity: 1;
-        -moz-transform: translateY(0);
+    -moz-transform: translateY(0);
-    }
+  }
 }
 
 @-o-keyframes fadeInDown {
-    0% {
+  0% {
-        opacity: 0;
+    opacity: 0;
-        -o-transform: translateY(-3px);
+    -o-transform: translateY(-3px);
-    }
+  }
 
-    100% {
+  100% {
-        opacity: 1;
+    opacity: 1;
-        -o-transform: translateY(0);
+    -o-transform: translateY(0);
-    }
+  }
 }
 
 @keyframes fadeInDown {
-    0% {
+  0% {
-        opacity: 0;
+    opacity: 0;
-        transform: translateY(-3px);
+    transform: translateY(-3px);
-    }
+  }
 
-    100% {
+  100% {
-        opacity: 1;
+    opacity: 1;
-        transform: translateY(0);
+    transform: translateY(0);
-    }
+  }
-}
+}
-
-
-/*animation ends*/

source/css/base/_font.scss

@@ -1,17 +1,23 @@
 @charset "UTF-8";
 
-body {
+html {
-    font-size: 16px;
     font-variant-numeric: tabular-nums;
     -webkit-font-smoothing: antialiased;
+    // 320px 设备
+    @media (max-width: 320px) {
+        font-size: 18px;
+    }
 }
 
+// 衬线字体
 [data-font="serif"]{
     font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
         'Noto Sans', serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
         'Noto Color Emoji';
     font-weight: 500;
 }
+
+// 无衬线字体
 [data-font="sans"]{
     font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
     'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',

source/css/base/_media.scss

@@ -0,0 +1,35 @@
+@media (max-width: 320px) {
+
+
+    
+
+
+
+
+}
+
+    // // 超小屏幕（手机，小于 768px）
+    // @media (min-width: 320px) and (max-width: 768px) {
+
+
+
+
+
+
+
+
+    // }
+
+    // // 小屏幕（平板，大于等于 768px）
+    // @media (min-width: 768px) and (max-width: 768px) { 
+
+    //  }
+
+    // // 中等屏幕（桌面显示器，大于等于 992px）
+    // @media (min-width: 992px) and (max-width: 992px) { 
+
+    //  }
+
+    // // 大屏幕（大桌面显示器，大于等于 1200px）
+    // @media (min-width: 1200px) { 
+    //      }

source/css/base/_variables.scss

@@ -1,11 +1,10 @@
+// 自动 浅色、暗色 模式
+// 默认跟随系统自动开启
+
 $darkmode: true !default; // true | false | 'manual'
 $manualmode-auto-selector: '[data-darkmode="auto"] &' !default;
 $manualmode-dark-selector: '[data-darkmode="dark"] &' !default;
 
-
-
-
-
 @mixin darkmode($darkmode: $darkmode, $dark-selector: $manualmode-dark-selector, $auto-selector: $manualmode-auto-selector) {
     // darkmode = ture  : 跟随系统
     // darkmode = false : 不跟随系统
@@ -31,19 +30,6 @@ $manualmode-dark-selector: '[data-darkmode="dark"] &' !default;
 
 
 
-// 超小屏幕（手机，小于 768px）
-// @media (max-width: 768px) { ... }
- 
-// 小屏幕（平板，大于等于 768px）
-// @media (min-width: 768px) and (max-width: 768px) { ... }
- 
-// 中等屏幕（桌面显示器，大于等于 992px）
-// @media (min-width: 992px) and (max-width: 992px) { ... }
- 
-// 大屏幕（大桌面显示器，大于等于 1200px）
-// @media (min-width: 1200px) { ... }
-
-
 
 
 

source/css/pages/_archives.scss

@@ -1,51 +1,91 @@
- // 归档
+/* 
-
+ *
+ * 归档页面
+ * 
+ * 按照顺序
+ * 1.默认
+ * 2.深色
+ * 3.媒体查询
+ *   - 320px
+*/
 @import "../base/variables";
 
 .archives {
     >ul {
-        padding: 0.625rem 0.1rem;
-
         >.year {
             font-size: 1.5rem;
             font-weight: bold;
             line-height: 2.2rem;
-            padding: 0.5rem 0;
-            // 浅色
             color: #262626;
-            // 深色
-            @include darkmode{
-                color: #dbdbdb;
-            }
         }
 
         >li {
             display: flex;
-            justify-content: space-between;
             font-size: 0.875rem;
             padding-bottom: 0.3rem;
             line-height: 1.75rem;
 
-            > a {
+            >a {
-                // 浅色
+                color: #595959;
-                color:#595959;
+
                 &:hover {
                     color: #59595980;
                 }
-                // 深色
+            }
-                @include darkmode{
+
+            >span {
+                color: #8c8c8c;
+            }
+        }
+    }
+
+    // =========== 深色 ===========
+    @include darkmode {
+        >ul {
+
+            >.year {
+                color: #dbdbdb;
+            }
+
+            >li {
+                >a {
                     color: #acacac;
+
                     &:hover {
                         color: #acacac80;
                     }
                 }
-            }
+
-            >span{
+                >span {
-                color:#8c8c8c;
-                @include darkmode{
                     color: #7d7d7d;
                 }
             }
         }
     }
-}
+
+    // =========== 320px 设备 ===========
+    @media (max-width: 320px) {
+
+        >ul {
+            padding: 2.5% 1%;
+
+            >.year {
+                padding: 2.5% 0;
+                text-align: center;
+            }
+
+            >.title {
+                padding: 2.5% 0;
+                text-align: center;
+            }
+
+            >li {
+                justify-content: center;
+
+                >span {
+                    display: none;
+                }
+            }
+        }
+    }
+}

source/css/pages/_category.scss

@@ -1,91 +1,107 @@
+/* 
+ *
+ * 分类页面
+ * 
+ * 按照顺序
+ * 1.默认
+ * 2.深色
+ * 3.媒体查询
+ *   - 320px
+*/
 @import "../base/variables";
 
-// 分类
 .category {
     >ul {
-        padding: 0.625rem 0.1rem;
-
         >.name {
             font-size: 1.5rem;
             font-weight: bold;
             line-height: 2.2rem;
-            padding: 0.5rem 0;
-            // 浅色
             color: #262626;
-
-            // 深色
-            @include darkmode {
-                color: #dbdbdb;
-            }
         }
 
         >li {
             display: flex;
-            justify-content: space-between;
             font-size: 0.875rem;
-            padding-bottom: 0.3rem;
+            line-height: 2rem;
-            line-height: 1.75rem;
 
             >a {
-                // 浅色
                 color: #595959;
 
                 &:hover {
                     color: #59595980;
                 }
+            }
 
-                // 深色
+            >span {
-                @include darkmode {
+                color: #8c8c8c;
+            }
+        }
+    }
+
+    // =========== 深色 ===========
+    @include darkmode {
+        >ul {
+            >.name {
+                color: #dbdbdb;
+            }
+
+            >li {
+                >a {
                     color: #dbdbdb;
 
                     &:hover {
                         color: #dbdbdb80;
                     }
                 }
-            }
+
-            >span{
+                >span {
-                color:#8c8c8c;
-                @include darkmode{
                     color: #7d7d7d;
                 }
             }
         }
     }
+
+    // =========== 320px 设备 ===========
+    @media (max-width: 320px) {
+        >ul {
+            padding: 2.5% 1%;
+
+            >.name {
+                padding: 2.5% 0;
+                text-align: center;
+            }
+
+            >li {
+                justify-content: center;
+
+                >span {
+                    display: none;
+                }
+            }
+        }
+    }
 }
 
+
+
 // 分类目录
 .categories {
-    margin: 5rem 0;
-
     >ul {
         display: flex;
         flex-direction: row;
         justify-content: center;
-        align-items: center;
-        align-content: center;
         flex-wrap: wrap;
 
         >li {
-            margin: 0.5rem 1rem;
             font-size: 1rem;
 
             >a {
-                // 浅色
                 color: #262626;
 
                 &:hover {
                     color: #26262680;
                 }
 
-                // 深色
-                @include darkmode {
-                    color: #dbdbdb;
-
-                    &:hover {
-                        color: #dbdbdb80;
-                    }
-                }
-
                 >span {
                     color: #8c8c8c;
                 }
@@ -100,4 +116,31 @@
             font-size: 0.75rem;
         }
     }
+
+    // =========== 深色 ===========
+    @include darkmode {
+        >ul {
+            >li {
+                >a {
+                    color: #dbdbdb;
+
+                    &:hover {
+                        color: #dbdbdb80;
+                    }
+                }
+            }
+        }
+
+    }
+
+    // =========== 320px 设备 ===========
+    @media (max-width: 320px) {
+        margin: 7% 0;
+
+        >ul {
+            >li {
+                margin: 2.5% 2.5%;
+            }
+        }
+    }
 }

source/css/pages/_index.scss

@@ -9,21 +9,11 @@
             letter-spacing: 0.0625rem;
             font-size: 1.375rem;
             line-height: 1.75rem;
-            // 浅色
             color: #262626;
 
             &:hover {
                 color: #26262680;
             }
-
-            // 深色
-            @include darkmode {
-                color: #dbdbdb;
-
-                &:hover {
-                    color: #dbdbdb80;
-                }
-            }
         }
     }
 
@@ -31,14 +21,7 @@
     >p {
         line-height: 1.5rem;
         text-indent: 2rem;
-
-        // 浅色
         color: #595959;
-
-        // 深色
-        @include darkmode {
-            color: #acacac;
-        }
     }
 
     // 徽标
@@ -47,30 +30,17 @@
         justify-content: flex-end;
         flex-wrap: wrap;
         flex-direction: row;
-        padding: 0.5rem 0 2rem 0;
-
-        // 浅色
         border-bottom: 1px solid #d9d9d9;
 
-        // 深色
-        @include darkmode {
-            border-bottom: 1px solid #434343;
-        }
-
         >.date,
         >.tag {
             font-weight: 400;
             font-size: 0.75rem;
-            margin: 0 0.5rem;
 
             >i {
                 position: relative;
                 top: 0.1rem;
                 color: #8c8c8c;
-
-                @include darkmode {
-                    color: #7d7d7d;
-                }
             }
 
             >a {
@@ -80,8 +50,36 @@
                 &:hover {
                     color: #8c8c8c80;
                 }
+            }
+        }
+    }
 
-                @include darkmode {
+    // =========== 深色 ===========
+    @include darkmode {
+        >h1 {
+            >a {
+                color: #dbdbdb;
+
+                &:hover {
+                    color: #dbdbdb80;
+                }
+            }
+        }
+
+        >p {
+            color: #acacac;
+        }
+
+        >.info {
+            border-bottom: 1px solid #434343;
+
+            >.date,
+            >.tag {
+                >i {
+                    color: #7d7d7d;
+                }
+
+                >a {
                     color: #7d7d7d;
 
                     &:hover {
@@ -89,7 +87,22 @@
                     }
                 }
             }
+        }
 
+    }
+
+    // =========== 320px 设备 ===========
+    @media (max-width: 320px) {
+        >h1{
+            margin-block-start: 0;
+            text-align: center;
+        }
+        >.info {
+            padding: 1% 0 2% 0;
+
+            >span {
+                margin: 1% 1%;
+            }
         }
     }
 }

source/css/pages/_journals.scss

@@ -6,30 +6,14 @@
         font-size: 1.5rem;
         font-weight: bold;
         line-height: 2.2rem;
-        padding: 0.5rem 0;
-        // 浅色
         color: #262626;
-
-        // 深色
-        @include darkmode {
-            color: #dbdbdb;
-        }
     }
 
     >ul {
         >li {
-            padding: 1rem 0.1rem;
-
             >.content {
-                padding: 0.25rem 0.25rem;
                 font-size: 1rem;
-                // 浅色
                 color: #595959;
-
-                // 深色
-                @include darkmode {
-                    color: #acacac;
-                }
             }
 
             >.info {
@@ -37,11 +21,44 @@
                 justify-content: flex-end;
                 font-size: 0.75rem;
                 color: #8c8c8c;
+            }
+        }
+    }
 
-                @include darkmode {
+    // =========== 深色 ===========
+    @include darkmode {
+        >.name {
+            color: #dbdbdb;
+        }
+
+        >ul {
+            >li {
+                >.content {
+                    color: #acacac;
+                }
+
+                >.info {
                     color: #7d7d7d;
                 }
             }
         }
     }
+
+    // =========== 320px 设备 ===========
+    @media (max-width: 320px) {
+        >.name {
+            padding: 2.5% 0;
+            text-align: center;
+        }
+
+        >ul {
+            >li {
+                padding: 2.5% 0;
+
+                >.info {
+                    padding: 1% 0;
+                }
+            }
+        }
+    }
 }

source/css/pages/_links.scss

@@ -3,21 +3,11 @@
 // 友链
 .links {
     >ul {
-        padding: 0.625rem 0.1rem;
-
         >.friend {
             font-size: 1.5rem;
             font-weight: bold;
             line-height: 2.2rem;
-            padding: 0.5rem 0;
-
-            // 浅色
             color: #262626;
-
-            // 深色
-            @include darkmode {
-                color: #dbdbdb;
-            }
         }
 
         >li {
@@ -28,15 +18,24 @@
             line-height: 1.5rem;
 
             >a {
-                // 浅色
                 color: #595959;
 
                 &:hover {
                     color: #59595980;
                 }
+            }
+        }
+    }
 
-                // 深色
+    // =========== 深色 ===========
-                @include darkmode {
+    @include darkmode {
+        >ul {
+            >.friend {
+                color: #dbdbdb;
+            }
+
+            >li {
+                >a {
                     color: #dbdbdb;
 
                     &:hover {
@@ -44,6 +43,25 @@
                     }
                 }
             }
+
+        }
+
+    }
+
+    // =========== 320px 设备 ===========
+    @media (max-width: 320px) {
+        >ul {
+            padding: 2.5% 1%;
+
+            >.friend {
+                padding: 2.5% 0;
+                text-align: center;
+            }
+
+            >li {
+                justify-content: center;
+                padding-bottom: 1%;
+            }
         }
     }
 }

source/css/pages/_post.scss

@@ -3,8 +3,6 @@
 // 文章
 .post {
     >.title {
-        margin-top: 4rem;
-
         >h1 {
             >a {
                 letter-spacing: 0.0625rem;
@@ -12,49 +10,72 @@
                 line-height: 2rem;
                 color: #262626;
 
-                @include darkmode {
-                    color: #dbdbdb;
-                }
-
                 &:hover {
                     color: #26262680;
-
-                    @include darkmode {
-                        color: #dbdbdb80;
-                    }
                 }
             }
         }
 
         >.info {
-            padding-bottom: 1rem;
+            display: flex;
-            margin-bottom: 1rem;
+            flex-direction: column;
             border-bottom: 1px solid #d9d9d9;
 
-            @include darkmode {
-                border-bottom: 1px solid #434343;
-            }
-
             >span {
-                margin: 0 0.25rem;
                 font-weight: 400;
                 font-size: 0.75rem;
                 color: #8c8c8c;
 
-                @include darkmode {
+
-                    color: #7d7d7d;
-                }
 
                 i {
                     position: relative;
                     top: 0.125rem;
                     color: #8c8c8c;
 
-                    @include darkmode {
+
+                }
+            }
+        }
+    }
+    // =========== 深色 ===========
+    @include darkmode {
+        >.title {
+            >h1 {
+                >a {
+                    color: #dbdbdb;
+
+                    :hover {
+                        color: #dbdbdb80;
+                    }
+                }
+            }
+
+            >.info {
+                border-bottom: 1px solid #434343;
+
+                span {
+                    color: #7d7d7d;
+
+                    i {
                         color: #7d7d7d;
                     }
                 }
             }
         }
     }
+
+    // =========== 320px 设备 ===========
+    @media (max-width: 320px) {
+        >.title {
+            margin-top: 10%;
+            >.info{
+                >span{
+                    padding: 1% 1%;
+                }
+                
+            }
+        }
+        
+    }
 }

source/css/pages/_tag.scss

@@ -3,39 +3,38 @@
 // 标签
 .tag {
     >ul {
-        padding: 0.625rem 0.1rem;
-
         >.name {
             font-size: 1.5rem;
             font-weight: bold;
             line-height: 2.2rem;
-            padding: 0.5rem 0;
-            // 浅色
             color: #262626;
-
-            // 深色
-            @include darkmode {
-                color: #dbdbdb;
-            }
         }
 
         >li {
             display: flex;
-            justify-content: space-between;
             font-size: 0.875rem;
-            padding-bottom: 0.3rem;
             line-height: 1.75rem;
 
-            > a {
+            >a {
                 // 浅色
                 color: #595959;
 
                 &:hover {
                     color: #59595980;
                 }
+            }
+        }
+    }
 
-                // 深色
+    // =========== 深色 ===========
-                @include darkmode {
+    @include darkmode {
+        >ul {
+            >.name {
+                color: #dbdbdb;
+            }
+
+            >li {
+                >a {
                     color: #dbdbdb;
 
                     &:hover {
@@ -44,23 +43,40 @@
                 }
             }
         }
+
+    }
+
+    // =========== 320px 设备 ===========
+    @media (max-width: 320px) {
+        >ul {
+            padding: 2.5% 1%;
+
+            >.name {
+                padding: 2.5% 0;
+                text-align: center;
+            }
+
+            >li {
+                justify-content: center;
+                padding-bottom: 1%;
+
+                >span {
+                    display: none;
+                }
+            }
+        }
     }
 }
 
 // 标签目录
 .tags {
-    margin: 5rem 0;
-
     >ul {
         display: flex;
         flex-direction: row;
         justify-content: center;
-        align-items: center;
-        align-content: center;
         flex-wrap: wrap;
 
         >li {
-            margin: 0.5rem 1rem;
             font-size: 1rem;
 
             >a {
@@ -71,15 +87,6 @@
                     color: #26262680;
                 }
 
-                // 深色
-                @include darkmode {
-                    color: #dbdbdb;
-
-                    &:hover {
-                        color: #dbdbdb80;
-                    }
-                }
-
                 >span {
                     color: #8c8c8c;
                 }
@@ -94,4 +101,31 @@
             font-size: 0.75rem;
         }
     }
+
+    // =========== 深色 ===========
+    @include darkmode {
+        >ul {
+            >li {
+                >a {
+                    color: #dbdbdb;
+
+                    &:hover {
+                        color: #dbdbdb80;
+                    }
+                }
+            }
+        }
+    }
+
+    // =========== 320px 设备 ===========
+    @media (max-width: 320px) {
+        margin: 7% 0;
+
+        >ul {
+            >li {
+                margin: 2.5% 2.5%;
+            }
+        }
+    }
+
 }

source/css/pages/layout/_comment.scss

@@ -1,23 +1,19 @@
-// 评论组件
+// 评论容器
 .comment {
-    width: 52rem;
+
-    margin: 1rem 0rem;
+    // 320px 设备
+    @media (max-width: 320px) {
+        width: 90%;
+        margin: 5% 0;
+    }
 }
 
+// 评论 首页 按钮
 .post-bottom-menu {
-
     display: flex;
     justify-content: space-around;
-    margin-top: 2rem;
-    padding-top: 2rem;
-    width: 40rem;
-
     border-top: 1px solid #e7e7e7;
 
-    @include darkmode {
-        border-top: 1px solid #e7e7e7;
-    }
-
     >a {
         color: #262626;
 
@@ -25,16 +21,36 @@
             color: #595959;
         }
 
-        @include darkmode {
-            color: #b6b6b6;
 
-            &:hover {
+    }
-                color: #434343;
+
+    // 深色
+    @include darkmode {
+        border-top: 1px solid #e7e7e7;
+
+        >a {
+
+            // 深色
+            @include darkmode {
+                color: #b6b6b6;
+
+                &:hover {
+                    color: #434343;
+                }
             }
         }
     }
+
+    // 320px 设备
+    @media (max-width: 320px) {
+
+        margin-top: 7%;
+        padding-top: 7%;
+        width: 80%;
+
+    }
 }
 
-
+.close {
-
+    display: none;
-
+}

source/css/pages/layout/_footer.scss

@@ -2,29 +2,37 @@
 @import "../../base/variables";
 
 footer {
-    padding: 2rem 0;
-
     .copyright {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         font-size: 0.8rem;
 
         a {
-            margin: 0 0.125rem;
-
-            // 浅色
             color: #bfbfbf;
+
             &:hover {
                 color: #262626;
             }
 
-            // 深色
+        }
-            @include darkmode{
+    }
+
+    // 深色
+    @include darkmode {
+        .copyright> {
+            >a {
                 color: #262626;
 
                 &:hover {
                     color: #bfbfbf;
                 }
             }
-
         }
     }
+
+    // 320px 设备
+    @media (max-width: 320px) {
+        padding: 5% 0;
+    }
 }

source/css/pages/layout/_header.scss

@@ -1,64 +1,31 @@
 // Header 头部
-
 @import "../../base/variables";
+
 .header {
-    width: 45rem;
-    padding: 7rem 0 3rem 0;
-
-    -webkit-background-size: cover;
-    background-size: cover;
-
     display: flex;
-    justify-content: space-between;
-    align-items: center;
 
     // 站点标题
     >.title {
-        width: 6rem;
-
         >a {
             font-size: 2.2rem;
             letter-spacing: 0.2rem;
             line-height: 2.4rem;
 
             >span {
-
+                color: #262626;
-                // 浅色
-                color:#262626;
 
                 &:hover {
                     color: #26262680;
                 }
-
-                // 深色
-                @include darkmode {
-                    color: #dbdbdb;
-
-                    &:hover {
-                        color: #dbdbdb80;
-                    }
-                }
-
             }
         }
     }
 
     // 二级标题
     >.description {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-
         font-size: 0.9rem;
-
-        // 浅色
         color: #8c8c8c;
 
-        // 深色
-        @include darkmode {
-            color: #7d7d7d;
-        }
-
         >.socials {
             display: flex;
             justify-content: flex-end;
@@ -68,16 +35,34 @@
                 margin-left: 0.5rem;
                 cursor: pointer;
 
-
-                // 浅色
                 color: #8c8c8c;
 
                 &:hover {
                     color: #8c8c8c80;
                 }
+            }
+        }
+    }
 
-                // 深色
+    // 深色
-                @include darkmode {
+    @include darkmode {
+        >.title {
+            >a {
+                >span {
+                    color: #dbdbdb;
+
+                    &:hover {
+                        color: #dbdbdb80;
+                    }
+                }
+            }
+        }
+
+        >.description {
+            color: #7d7d7d;
+
+            >.socials {
+                >a {
                     color: #7d7d7d;
 
                     &:hover {
@@ -86,5 +71,20 @@
                 }
             }
         }
+
+    }
+
+    // 320px 设备
+    @media (max-width: 320px) {
+        flex-direction: column;
+        align-items: center;
+        width: 90%;
+        padding: 17% 5% 5% 5%;
+
+        >.description {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
     }
 }

source/css/pages/layout/_pagenav.scss

@@ -2,7 +2,6 @@
 .pagenav {
     display: flex;
     justify-content: space-between;
-    padding: 2rem 0;
 
     >a {
         text-decoration: none;
@@ -12,8 +11,11 @@
         &:hover {
             color: #595959;
         }
+    }
 
-        @include darkmode {
+    // =========== 深色 ===========
+    @include darkmode {
+        >a {
             color: #b6b6b6;
 
             &:hover {
@@ -21,4 +23,9 @@
             }
         }
     }
+
+    // =========== 320px 设备 ===========
+    @media (max-width: 320px) {
+        padding: 5% 0 7% 0;
+    }
 }

source/css/redemption.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["base/_font.scss","base/_base.scss","base/_variables.scss","pages/layout/_header.scss","pages/layout/_footer.scss","pages/layout/_pagenav.scss","pages/layout/_comment.scss","pages/_archives.scss","pages/_category.scss","pages/_index.scss","pages/_journals.scss","pages/_links.scss","pages/_post.scss","pages/_tag.scss"],"names":[],"mappings":"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","file":"redemption.css"}
+{"version":3,"sourceRoot":"","sources":["base/_font.scss","base/_base.scss","base/_variables.scss","pages/layout/_header.scss","pages/layout/_footer.scss","pages/layout/_pagenav.scss","pages/layout/_comment.scss","pages/_archives.scss","pages/_category.scss","pages/_index.scss","pages/_journals.scss","pages/_links.scss","pages/_post.scss","pages/_tag.scss"],"names":[],"mappings":"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","file":"redemption.css"}