pages(media): add 320px device

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: 1.75rem;
+            line-height: 2rem;
 
             >a {
-                // 浅色
                 color: #595959;
 
                 &:hover {
                     color: #59595980;
                 }
+            }
 
-                // 深色
-                @include darkmode {
+            >span {
+                color: #8c8c8c;
+            }
+        }
+    }
+
+    // =========== 深色 ===========
+    @include darkmode {
+        >ul {
+            >.name {
+                color: #dbdbdb;
+            }
+
+            >li {
+                >a {
                     color: #dbdbdb;
 
                     &:hover {
                         color: #dbdbdb80;
                     }
                 }
-            }
-            >span{
-                color:#8c8c8c;
-                @include darkmode{
+
+                >span {
                     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%;
+            }
+        }
+    }
 }