src/components/Nav.astro

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

src/pages/article/blog/sort_by_name.astro

@@ -15,18 +15,7 @@ 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: 0.5em 0 0 0;
+    margin: 1em 0 0 0;
   }
 </style>

src/pages/article/note/index.astro

@@ -15,18 +15,7 @@ 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: 0.5em 0 0 0;
+    margin: 1em 0 0 0;
   }
 </style>

src/pages/article/note/sort_by_timeline.astro

@@ -15,18 +15,7 @@ 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: 0.5em 0 0 0;
+    margin: 1em 0 0 0;
   }
 </style>

src/pages/article/translation/index.astro

@@ -15,18 +15,7 @@ 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: 0.5em 0 0 0;
+    margin: 1em 0 0 0;
   }
 </style>

src/pages/article/translation/sort_by_timeline.astro

@@ -15,18 +15,7 @@ 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: 0.5em 0 0 0;
+    margin: 1em 0 0 0;
   }
 </style>

src/styles/global.css

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