Add more media query steps for small-screen devices.

src/components/Nav.astro

@@ -1,48 +1,34 @@
 ---
+
 ---
 
 <div class="nav" id="nav">
-  <span class="nav-item site-title" id="site-title">
+  <div class="global-nav">
-    <a class="nav-link" href="/">李守中</a>
+    <span class="site-title"><a class="nav-link" href="/">李守中</a></span>
-  </span>
+    <span class="category-item">
-  <span class="nav-item" id="category">
+      <a class="nav-link" href="/article/blog/">博客</a>
-    <ul class="nav-list">
+    </span>
-      <li class="nav-list-item">
+    <span class="category-item">
-        <a class="nav-link" href="/article/blog/">博客</a>
+      <a class="nav-link" href="/article/note/">笔记</a>
-      </li>
+    </span>
-      <li class="nav-list-item">
+    <span class="category-item">
-        <a class="nav-link" href="/article/note/">笔记</a>
+      <a class="nav-link" href="/article/translation/">翻译</a>
-      </li>
+    </span>
-      <li class="nav-list-item">
+  </div>
-        <a class="nav-link" href="/article/translation/">翻译</a>
-      </li>
-    </ul>
-  </span>
 </div>
 
 <style>
   .nav {
-    font-size: 1em;
+    margin: 0.2em 0 0 0;
-    margin: 10px 0 0 0;
-    display: flex;
-    align-items: flex-end;
   }
-  #site-title {
+  .site-title {
     font-size: 1.8em;
-    margin: 0 20px 0 0;
+    margin: 0 10px 0 0;
-    padding: 0 0 2px 0;
-    line-height: 100%;
   }
-  .nav-list {
+  .category-item {
-    padding: 0;
+    margin: 0 10px 0 0;
-    margin: 6px 0 0 0;
   }
-  .nav-list .nav-list-item {
+  .global-nav:last-child {
-    float: left;
-    list-style-type: none;
-    margin: 0 20px 0 0;
-  }
-  .nav-list .nav-list-item:last-child {
     margin: 0;
   }
   .nav-link {

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;
   }
 }