更新

assets/css/joe.index.scss

@@ -83,11 +83,10 @@
     &__hot {
         padding-top: 15px;
         &-list {
-            display: flex;
-            margin: 0 -5px;
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            column-gap: 15px;
             .item {
-                width: 25%;
-                padding: 0 5px;
                 .link {
                     display: block;
                     .inner {

assets/css/joe.live.scss

@@ -86,7 +86,7 @@
     }
     &__list {
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(3, 1fr);
         gap: 15px;
         &-item {
             display: block;

assets/css/joe.mode.css

@@ -0,0 +1 @@
+html{--theme: #409eff;--background: #fff;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--radius-wrap: 8px;--radius-inner: 4px;--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22)}html[data-night='night']{--background: #333;--theme: #54b5db;--main: #808080;--routine: #7b7b7b;--minor: #6d6d6d;--seat: #666;--classA: #444;--classB: #444;--classC: #444;--classD: #444;--text-shadow: none;--box-shadow: none}html[data-night='night'] body::before{background:#202122;z-index:-500}html[data-night='night'] .joe_header__above-logo img{display:none}html[data-night='night'] .joe_header__above-logo svg{display:block}

assets/css/joe.mode.scss

@@ -0,0 +1,48 @@
+/* 昼夜模式专用css */
+/* 以下配色为全球公认的一套色彩值，如无必要，无需修改下方色彩值（主题色可以修改） */
+html {
+    --theme: #409eff;
+    --background: #fff;
+    --main: #303133;
+    --routine: #606266;
+    --minor: #909399;
+    --seat: #c0c4cc;
+    --classA: #dcdfe6;
+    --classB: #e4e7ed;
+    --classC: #ebeef5;
+    --classD: #f2f6fc;
+    --radius-wrap: 8px;
+    --radius-inner: 4px;
+    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
+}
+
+/* 黑夜模式的配色方案是我随便写的一套，您可以修改配色成您的一套方案 */
+html[data-night='night'] {
+    --background: #333;
+    --theme: #54b5db;
+    --main: #808080;
+    --routine: #7b7b7b;
+    --minor: #6d6d6d;
+    --seat: #666;
+    --classA: #444;
+    --classB: #444;
+    --classC: #444;
+    --classD: #444;
+    --text-shadow: none;
+    --box-shadow: none;
+}
+
+/* 此处用于修改黑夜模式下没有覆盖到的小地方的样式 */
+html[data-night='night'] {
+    body::before {
+        background: #202122;
+        z-index: -500;
+    }
+    .joe_header__above-logo img {
+        display: none;
+    }
+    .joe_header__above-logo svg {
+        display: block;
+    }
+}

assets/css/joe.responsive.css

@@ -0,0 +1 @@
+@media (max-width: 1760px){html #live2d-widget{visibility:hidden}}@media (max-width: 1400px){html .joe_live__play-player{height:520px}html .joe_detail__friends{grid-template-columns:repeat(3, 1fr)}html .joe_video__source-list{grid-template-columns:repeat(7, 1fr)}}@media (max-width: 1200px){html .joe_live__list-item .thumb{height:125px}}html .noaside .joe_live__list{grid-template-columns:repeat(4, 1fr)}html .noaside .joe_video__list-item{grid-template-columns:repeat(7, 1fr)}html .noaside .joe_wallpaper__list{grid-template-columns:repeat(5, 1fr)}@media (max-width: 1400px){html .noaside .joe_detail__friends{grid-template-columns:repeat(4, 1fr)}html .noaside .joe_video__list-item{grid-template-columns:repeat(6, 1fr)}}

assets/css/joe.responsive.scss

@@ -0,0 +1,61 @@
+/* 基类：基于 最大屏幕 + 有侧边栏 下进行适配 */
+
+/* 有侧边栏时候的样式 */
+html {
+    @media (max-width: 1760px) {
+        #live2d-widget {
+            visibility: hidden;
+        }
+    }
+    @media (max-width: 1400px) {
+        .joe_live__play-player {
+            height: 520px;
+        }
+        .joe_detail__friends {
+            grid-template-columns: repeat(3, 1fr);
+        }
+        .joe_video__source-list {
+            grid-template-columns: repeat(7, 1fr);
+        }
+    }
+    @media (max-width: 1200px) {
+        .joe_live__list-item .thumb {
+            height: 125px;
+        }
+    }
+    @media (max-width: 992px) {
+    }
+    @media (max-width: 768px) {
+    }
+    @media (max-width: 576px) {
+    }
+}
+
+/* 没有侧边栏时候的样式 */
+html .noaside {
+    .joe_live__list {
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .joe_video__list-item {
+        grid-template-columns: repeat(7, 1fr);
+    }
+    .joe_wallpaper__list {
+        grid-template-columns: repeat(5, 1fr);
+    }
+    @media (max-width: 1400px) {
+        .joe_detail__friends {
+            grid-template-columns: repeat(4, 1fr);
+        }
+        .joe_video__list-item {
+            grid-template-columns: repeat(6, 1fr);
+        }
+    }
+    @media (max-width: 1200px) {
+    }
+    @media (max-width: 992px) {
+    }
+    @media (max-width: 768px) {
+    }
+    @media (max-width: 576px) {
+    }
+}

assets/css/joe.video.scss

@@ -75,7 +75,7 @@
         &-item {
             display: grid;
             gap: 15px;
-            grid-template-columns: repeat(6, 1fr);
+            grid-template-columns: repeat(5, 1fr);
             border-top: 1px solid var(--classC);
             padding-top: 15px;
             .item {
@@ -263,7 +263,7 @@
             .description {
                 overflow: hidden;
                 dt {
-                    font-size: 24px;
+                    font-size: 22px;
                     color: var(--main);
                     max-width: 100%;
                     overflow: hidden;

assets/css/joe.wallpaper.scss

@@ -71,7 +71,7 @@
 	}
 	&__list {
 		display: grid;
-		grid-template-columns: repeat(5, 1fr);
+		grid-template-columns: repeat(4, 1fr);
 		.item {
 			position: relative;
 			display: block;