From 37f035709daf93fcbf4180afc97a31c8d670debc Mon Sep 17 00:00:00 2001
From: liding <ld.sino@outlook.com>
Date: Sat, 15 Jun 2024 17:48:45 +0800
Subject: [PATCH] Add more media query steps for small-screen devices.

---
 src/components/article/CollectionSummary.astro      | 11 -----------
 src/pages/article/blog/index.astro                  | 13 ++++++++++++-
 src/pages/article/blog/sort_by_name.astro           | 13 ++++++++++++-
 src/pages/article/note/index.astro                  | 13 ++++++++++++-
 src/pages/article/note/sort_by_timeline.astro       | 13 ++++++++++++-
 src/pages/article/translation/index.astro           | 13 ++++++++++++-
 .../article/translation/sort_by_timeline.astro      | 13 ++++++++++++-
 src/styles/global.css                               |  6 +++---
 8 files changed, 75 insertions(+), 20 deletions(-)

diff --git a/src/components/article/CollectionSummary.astro b/src/components/article/CollectionSummary.astro
index 35da1e5..4f7d816 100644
--- a/src/components/article/CollectionSummary.astro
+++ b/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: "";
diff --git a/src/pages/article/blog/index.astro b/src/pages/article/blog/index.astro
index 7f1a806..bdef22f 100644
--- a/src/pages/article/blog/index.astro
+++ b/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>
diff --git a/src/pages/article/blog/sort_by_name.astro b/src/pages/article/blog/sort_by_name.astro
index 382bafe..81bfb35 100644
--- a/src/pages/article/blog/sort_by_name.astro
+++ b/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>
diff --git a/src/pages/article/note/index.astro b/src/pages/article/note/index.astro
index 15b0fe5..be31c5b 100644
--- a/src/pages/article/note/index.astro
+++ b/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>
diff --git a/src/pages/article/note/sort_by_timeline.astro b/src/pages/article/note/sort_by_timeline.astro
index 09fc2c1..665701d 100644
--- a/src/pages/article/note/sort_by_timeline.astro
+++ b/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>
diff --git a/src/pages/article/translation/index.astro b/src/pages/article/translation/index.astro
index 1791329..b07b4f4 100644
--- a/src/pages/article/translation/index.astro
+++ b/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>
diff --git a/src/pages/article/translation/sort_by_timeline.astro b/src/pages/article/translation/sort_by_timeline.astro
index fc6999e..94190e3 100644
--- a/src/pages/article/translation/sort_by_timeline.astro
+++ b/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>
diff --git a/src/styles/global.css b/src/styles/global.css
index 73da1dc..ad7730d 100644
--- a/src/styles/global.css
+++ b/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;
   }
 }