feat: 添加推荐主题和标签搜索页面

refactor: 优化CSS媒体查询和响应式布局
fix: 移除重复的媒体查询规则
style: 调整搜索框和侧边栏样式
docs: 更新HTML文档结构和元信息

css/search-tag.less

@@ -1,5 +1,5 @@
 #search-tag {
-    width: 1200px;
+    max-width: 1200px;
     margin: 0 auto;
 
     .label-title {
@@ -7,7 +7,6 @@
 
         .icon {
             width: 25px;
-            // height: 20px;
             margin-right: 12px;
         }
 
@@ -148,6 +147,7 @@
         align-items: flex-start;
 
         .matter-content {
+            min-width: 0;
             margin-right: 12px;
             position: sticky;
             z-index: 1;
@@ -256,3 +256,89 @@
         }
     }
 }
+
+@media screen and (max-width: 805px) {
+    .item-box .bottom .bottom-item:not(:last-child) {
+        margin-right: 40px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    #search-tag {
+        .search-box {
+            width: auto !important;
+            margin: 0 10px 20px;
+            height: 40px !important;
+        }
+        .classify {
+            margin-left: 10px;
+            margin-right: 10px;
+        }
+
+        .matter {
+            .matter-content {
+                margin: 0;
+            }
+            .sidebar-box {
+                display: none;
+            }
+
+            .search-box {
+                margin-left: 10px;
+                margin-right: 10px;
+            }
+        }
+    }
+
+    #search-tag {
+        padding: 0 10px;
+    }
+}
+
+@media screen and (max-width: 630px) {
+    .sign-in.flexacenter {
+        display: none !important;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    #search-tag .classify .item {
+        min-width: inherit;
+        font-size: 13px;
+        height: 28px;
+        line-height: 28px;
+        border-radius: 8px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .item-box .bottom .bottom-item:not(:last-child) {
+        margin-right: 0;
+    }
+
+    .head-top.flexacenter .input-box {
+        width: inherit;
+        height: inherit;
+        background: none;
+        border: none;
+        padding: 5px;
+
+        .input {
+            display: none;
+        }
+
+        .placeholder {
+            display: none;
+        }
+
+        .icon {
+            margin-left: 0;
+        }
+    }
+}
+
+@media screen and (max-width: 450px) {
+    #search-tag .classify .item {
+        padding: 0 5px;
+    }
+}