fix: 解决移动端下文章标题会被日期遮挡的问题 (#496)

* fix: 解决移动端下文章列表会被日期遮挡的问题
LIlGG · Apr 22, 2024 · 4557063 · 4557063
1 parent 504cd2f
commit 4557063
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 52 deletions.
diff --git a/src/css/common/components/post/post-list-standard.css b/src/css/common/components/post/post-list-standard.css
@@ -78,27 +78,44 @@
     }
   }
 
-  & .entry-title {
-    &h1 {
-      font-size: 1.25rem;
-      font-weight: 400;
-      line-height: 3.125rem;
-      position: relative;
-      z-index: 1;
-      display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      max-width: 65%;
-      margin-left: 1.25rem;
+  & .entry-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-      &:hover {
-        color: var(--theme-color);
+    & .entry-title {
+      &h1 {
+        font-size: 1.25rem;
+        font-weight: 400;
+        line-height: 3.125rem;
+        position: relative;
+        z-index: 1;
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 65%;
+        margin-left: 1.25rem;
+
+        &:hover {
+          color: var(--theme-color);
+        }
+      }
+
+      & a {
+        color: var(--post-list-thumb-title-color);
       }
     }
 
-    & a {
-      color: var(--post-list-thumb-title-color);
+    & .p-time {
+      font-size: 0.75rem;
+      color: #999;
+      letter-spacing: 0;
+
+      & .iconify {
+        scale: 1.2;
+        margin-right: 5px;
+      }
     }
   }
 
@@ -145,20 +162,6 @@
         width: 100%;
       }
     }
-
-    & .p-time {
-      position: absolute;
-      right: 0;
-      top: 1rem;
-      font-size: 0.75rem;
-      color: #999;
-      letter-spacing: 0;
-
-      & .iconify {
-        scale: 1.2;
-        margin-right: 5px;
-      }
-    }
   }
 
   @mixin screens-md {
@@ -168,6 +171,8 @@
     }
 
     & .feature {
+      margin-left: 1.25rem;
+
       & img {
         width: 3.25rem;
         height: 3.25rem;
@@ -178,10 +183,18 @@
       }
     }
 
-    & .entry-title {
-      &h1 {
-        font-size: 1rem;
-        line-height: 1.875rem;
+    & .entry-header {
+      flex-direction: column;
+      align-items: baseline;
+      margin-bottom: 0.67rem;
+
+      & .entry-title {
+        &h1 {
+          font-size: 1rem;
+          line-height: 1.875rem;
+          max-width: 90%;
+          margin-left: 1rem;
+        }
       }
     }
 

diff --git a/templates/assets/dist/css/main.min.css b/templates/assets/dist/css/main.min.css
diff --git a/templates/macro/content.html b/templates/macro/content.html
@@ -66,14 +66,29 @@
     </a>
   </div>
 
-  <header>
+  <header class="entry-header">
     <h1 class="entry-title">
-      <a data-pjax
+      <a
+        data-pjax
         th:href="@{${post.status.permalink}}"
         th:text="${post.spec.title}"
         aria-label="viewing the article details"
       ></a>
     </h1>
+    <div class="p-time">
+      <span th:if="${post.spec.pinned}" class="iconify hotpost" data-icon="solar:fire-outline"></span>
+      <span class="iconify" data-icon="solar:clock-circle-linear"></span>
+      <time
+        data-i18n="postlist.time"
+        th:i18n-options="|{
+          'time': '${post.spec.publishTime}', 
+          'params': { 'separator': '-' }
+        }|"
+        th:datetime="${post.spec.publishTime}"
+        itemprop="dateCreated datePublished"
+      >
+      </time>
+    </div>
   </header>
 
   <section>
@@ -106,20 +121,6 @@ <h1 class="entry-title">
         </span>
       </div>
     </div>
-    <div class="p-time">
-      <span th:if="${post.spec.pinned}" class="iconify hotpost" data-icon="solar:fire-outline"></span>
-      <span class="iconify" data-icon="solar:clock-circle-linear"></span>
-      <time
-        data-i18n="postlist.time"
-        th:i18n-options="|{
-          'time': '${post.spec.publishTime}', 
-          'params': { 'separator': '-' }
-        }|"
-        th:datetime="${post.spec.publishTime}"
-        itemprop="dateCreated datePublished"
-      >
-      </time>
-    </div>
   </footer>
   <hr />
 </article>