fix css

static/css/style.css

@@ -21,6 +21,10 @@ ul {
   list-style: none;
 }
 
+ol {
+  padding: 0;
+}
+
 img {
   width: 100%;
   height: auto;
@@ -49,17 +53,25 @@ body {
   font-weight: 400 !important;
 }
 
+.w-90 {
+  width: 95%;
+  margin: 0 auto;
+}
+
 .navbar {
-  background-color: var(--main-color) !important;
+  background-color: #000 !important;
+}
+.navbar .navbar-nav .nav-item .nav-link {
+  color: #fff;
 }
 .navbar .navbar-collapse {
   flex-grow: 0;
 }
 .navbar .navbar-brand {
-  font-size: 50px;
-  font-weight: 500;
+  font-size: 24px;
+  font-weight: 100;
   font-family: "Roboto Slab", serif !important;
-  color: var(--sub-color);
+  color: #fff;
   transition: all 0.3s;
 }
 .navbar .navbar-brand:hover {
@@ -73,7 +85,6 @@ body {
 .blog-post-tags .badge:hover {
   color: var(--main-color);
   background-color: #fff;
-  border: 1px solid var(--main-color);
 }
 
 .blog-post-title {
@@ -103,7 +114,7 @@ body {
 }
 
 .post-title {
-  line-height: 30px;
+  line-height: 24px;
 }
 .post-title a {
   color: #000;
@@ -135,6 +146,8 @@ body {
 
 .news-info {
   margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
   line-height: 20px;
 }
 .news-info a {
@@ -148,6 +161,7 @@ body {
   opacity: 0.8;
 }
 .news-info small {
+  margin-left: 10px;
   color: var(--gray-color);
 }
 
@@ -269,7 +283,6 @@ body {
 /* single.html End */
 /* content.html Start */
 .news-main {
-  height: 100%;
   overflow: hidden;
 }
 @media (max-width: 991px) {
@@ -296,22 +309,11 @@ body {
   }
 }
 .news-main img {
-  height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
-.news-main .news-info a {
-  font-size: 16px;
-}
 
 /* content.html End */
-/* focus.html Start */
-.focus-content {
-  position: sticky;
-  top: 20px;
-}
-
-/* focus.html End */
 /* recent.html Start */
 .recent-content .news-list {
   margin: 0;
@@ -386,6 +388,12 @@ body {
   }
 }
 .news-all .post-title a {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
   font-size: 28px;
 }
 @media (max-width: 767px) {
@@ -399,11 +407,6 @@ body {
 .news-all hr {
   margin: 1.5rem 0;
 }
-.news-all .first-img {
-  max-height: 50vh;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
 .news-all .line {
   padding: 0 12px;
 }
@@ -439,4 +442,33 @@ body {
   }
 }
 
+.post-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.post-title {
+  margin: 0;
+  /* 可以消除標題的預設邊距 */
+}
+
+.news-post {
+  display: flex;
+  justify-content: end;
+}
+.news-post a {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--gray-color);
+  text-decoration: none;
+  transition: all 0.3s;
+}
+.news-post a:hover {
+  opacity: 0.8;
+}
+.news-post small {
+  margin-left: 10px;
+}
+
 /* news-featured.html End *//*# sourceMappingURL=style.css.map */

static/css/style.scss

@@ -21,6 +21,10 @@ ul {
   list-style: none;
 }
 
+ol {
+  padding: 0;
+}
+
 img {
   width: 100%;
   height: auto;
@@ -49,18 +53,27 @@ body {
   font-weight: 400 !important;
 }
 
+.w-90 {
+  width: 95%;
+  margin: 0 auto;
+}
+
 .navbar {
-  background-color: var(--main-color) !important;
+  background-color: #000 !important;
+
+  .navbar-nav .nav-item .nav-link {
+    color: #fff;
+  }
 
   .navbar-collapse {
     flex-grow: 0;
   }
 
   .navbar-brand {
-    font-size: 50px;
-    font-weight: 500;
+    font-size: 24px;
+    font-weight: 100;
     font-family: "Roboto Slab", serif !important;
-    color: var(--sub-color);
+    color: #fff;
     transition: all 0.3s;
 
     &:hover {
@@ -77,7 +90,7 @@ body {
     &:hover {
       color: var(--main-color);
       background-color: #fff;
-      border: 1px solid var(--main-color);
+      // border: 1px solid var(--main-color);
     }
   }
 }
@@ -111,7 +124,7 @@ body {
 }
 
 .post-title {
-  line-height: 30px;
+  line-height: 24px;
 
   a {
     color: #000;
@@ -146,6 +159,8 @@ body {
 
 .news-info {
   margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
   line-height: 20px;
 
   a {
@@ -161,6 +176,7 @@ body {
   }
 
   small {
+    margin-left: 10px;
     color: var(--gray-color);
   }
 }
@@ -303,7 +319,7 @@ body {
 /* content.html Start */
 
 .news-main {
-  height: 100%;
+  // height: 100%;
   overflow: hidden;
 
   @media (max-width: 991px) {
@@ -329,28 +345,13 @@ body {
   }
 
   img {
-    height: 100%;
+    // height: 100%;
     object-fit: cover;
   }
-
-  .news-info {
-    a {
-      font-size: 16px;
-    }
-  }
 }
 
 /* content.html End */
 
-/* focus.html Start */
-
-.focus-content {
-  position: sticky;
-  top: 20px;
-}
-
-/* focus.html End */
-
 /* recent.html Start */
 
 .recent-content {
@@ -445,6 +446,13 @@ body {
     }
 
     a {
+      // 超過兩行則省略
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      line-break: after-white-space;
       font-size: 28px;
 
       @media (max-width: 767px) {
@@ -463,11 +471,6 @@ body {
     margin: 1.5rem 0;
   }
 
-  .first-img {
-    max-height: 50vh;
-    object-fit: cover;
-  }
-
   .line {
     padding: 0 12px;
   }
@@ -502,4 +505,36 @@ body {
   }
 }
 
+.post-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.post-title {
+  margin: 0;
+  /* 可以消除標題的預設邊距 */
+}
+
+.news-post {
+  display: flex;
+  justify-content: end;
+
+  a {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--gray-color);
+    text-decoration: none;
+    transition: all .3s;
+
+    &:hover {
+      opacity: .8;
+    }
+  }
+
+  small {
+    margin-left: 10px;
+  }
+}
+
 /* news-featured.html End */

themes/hugo-bootstrap-5/layouts/partials/focus.html

@@ -1,5 +1,4 @@
 <div class="focus-content">
-
     <h3 class="post-block-title">
         <span>焦點新聞</span>
     </h3>
@@ -12,26 +11,10 @@
         <a href="{{ .Permalink }}">{{ .Params.title }}</a>
     </h2>
     <section class="news-info mb-5">
-        {{ range (.GetTerms "categories") }}
-        <div href="{{ .Permalink }}">{{ .LinkTitle }}</div>
-        {{ end }}
-        <div>{{ .Date | time.Format ":date_long" }}</div>
-    </section>
-    {{ end }}
-
-    <!-- {{ $t := $.Site.GetPage "/focus" }}
-    {{ range $index, $element := first 3 ( where $t.Pages "Params.display" true) }}
-    <a href="{{ .Permalink }}">
-        <img class="img-fluid" src="{{ .Params.image | relURL }}" alt="" />
-    </a>
-    <section class="news-info">
         {{ range (.GetTerms "categories") }}
         <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
         {{ end }}
         <small>{{ .Date | time.Format ":date_long" }}</small>
     </section>
-    <h2 class="post-title mb-3">
-        <a href="{{ .Permalink }}">{{ .Params.title }}</a>
-    </h2>
-    {{ end }} -->
+    {{ end }}
 </div>