Add more media query steps for small-screen devices.

src/components/article/CollectionSummary.astro

@@ -101,17 +101,6 @@ const categoriedPostListSortedByArticleAmount: Array<CategoriedPosts> =
 </div>
 
 <style>
-  @media screen and (max-width: 125ex) {
-    .collection-desc-item {
-      width: 100%;
-    }
-  }
-  @media screen and (min-width: 125ex) {
-    .collection-desc-item {
-      width: 50%;
-      float: left;
-    }
-  }
   .collection-desc::after {
     display: block;
     content: "";

src/pages/article/blog/index.astro

@@ -15,7 +15,18 @@ import DefaultLayout from '../../../layouts/DefaultLayout.astro';
 </DefaultLayout>
 
 <style>
+  :global(@media screen and (max-width: 768px)) {
+    .collection-desc-item {
+      width: 100%;
+    }
+  }
+  :global(@media screen and (min-width: 768px)) {
+    .collection-desc-item {
+      width: 50%;
+      float: left;
+    }
+  }
   .options {
-    margin: 1em 0 0 0;
+    margin: 0.5em 0 0 0;
   }
 </style>

src/pages/article/blog/sort_by_name.astro

@@ -15,7 +15,18 @@ import DefaultLayout from '../../../layouts/DefaultLayout.astro';
 </DefaultLayout>
 
 <style>
+  :global(@media screen and (max-width: 768px)) {
+    .collection-desc-item {
+      width: 100%;
+    }
+  }
+  :global(@media screen and (min-width: 768px)) {
+    .collection-desc-item {
+      width: 50%;
+      float: left;
+    }
+  }
   .options {
-    margin: 1em 0 0 0;
+    margin: 0.5em 0 0 0;
   }
 </style>

src/pages/article/note/index.astro

@@ -15,7 +15,18 @@ import DefaultLayout from '../../../layouts/DefaultLayout.astro';
 </DefaultLayout>
 
 <style>
+  :global(@media screen and (max-width: 768px)) {
+    .collection-desc-item {
+      width: 100%;
+    }
+  }
+  :global(@media screen and (min-width: 768px)) {
+    .collection-desc-item {
+      width: 50%;
+      float: left;
+    }
+  }
   .options {
-    margin: 1em 0 0 0;
+    margin: 0.5em 0 0 0;
   }
 </style>

src/pages/article/note/sort_by_timeline.astro

@@ -15,7 +15,18 @@ import DefaultLayout from '../../../layouts/DefaultLayout.astro';
 </DefaultLayout>
 
 <style>
+  :global(@media screen and (max-width: 768px)) {
+    .collection-desc-item {
+      width: 100%;
+    }
+  }
+  :global(@media screen and (min-width: 768px)) {
+    .collection-desc-item {
+      width: 50%;
+      float: left;
+    }
+  }
   .options {
-    margin: 1em 0 0 0;
+    margin: 0.5em 0 0 0;
   }
 </style>

src/pages/article/translation/index.astro

@@ -15,7 +15,18 @@ import DefaultLayout from '../../../layouts/DefaultLayout.astro';
 </DefaultLayout>
 
 <style>
+  :global(@media screen and (max-width: 1024px)) {
+    .collection-desc-item {
+      width: 100%;
+    }
+  }
+  :global(@media screen and (min-width: 1024px)) {
+    .collection-desc-item {
+      width: 50%;
+      float: left;
+    }
+  }
   .options {
-    margin: 1em 0 0 0;
+    margin: 0.5em 0 0 0;
   }
 </style>

src/pages/article/translation/sort_by_timeline.astro

@@ -15,7 +15,18 @@ import DefaultLayout from '../../../layouts/DefaultLayout.astro';
 </DefaultLayout>
 
 <style>
+  :global(@media screen and (max-width: 1024px)) {
+    .collection-desc-item {
+      width: 100%;
+    }
+  }
+  :global(@media screen and (min-width: 1024px)) {
+    .collection-desc-item {
+      width: 50%;
+      float: left;
+    }
+  }
   .options {
-    margin: 1em 0 0 0;
+    margin: 0.5em 0 0 0;
   }
 </style>

src/styles/global.css

@@ -1,12 +1,12 @@
-@media screen and (max-width: 125ex) {
+@media screen and (max-width: 1024px) {
   body {
     width: 95%;
   }
 }
 
-@media screen and (min-width: 125ex) {
+@media screen and (min-width: 1024px) {
   body {
-    width: 125ex;
+    width: 954px;
   }
 }