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

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

css/search-tag.css

@@ -1,5 +1,5 @@
 #search-tag {
-  width: 1200px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 #search-tag .label-title {
@@ -125,6 +125,7 @@
   align-items: flex-start;
 }
 #search-tag .matter .matter-content {
+  min-width: 0;
   margin-right: 12px;
   position: sticky;
   z-index: 1;
@@ -215,3 +216,72 @@
   height: 24px;
   margin-right: 8px;
 }
+@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;
+  }
+  #search-tag .classify {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  #search-tag .matter .matter-content {
+    margin: 0;
+  }
+  #search-tag .matter .sidebar-box {
+    display: none;
+  }
+  #search-tag .matter .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;
+  }
+  .head-top.flexacenter .input-box .input {
+    display: none;
+  }
+  .head-top.flexacenter .input-box .placeholder {
+    display: none;
+  }
+  .head-top.flexacenter .input-box .icon {
+    margin-left: 0;
+  }
+}
+@media screen and (max-width: 450px) {
+  #search-tag .classify .item {
+    padding: 0 5px;
+  }
+}