update css

news_templates/themes/hugo-bootstrap-5/layouts/partials/head.html

@@ -8,7 +8,7 @@
 <!-- Google Font -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500&family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500&family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
 
 {{ with .Site.Params.style }}
 <link href="{{ "/css/style" | relURL }}.{{ . }}.css" rel="stylesheet" id="theme-stylesheet">

static/css/style.css

@@ -8,7 +8,7 @@
 
 * {
   letter-spacing: 1px;
-  font-weight: 300;
+  font-weight: 400;
   font-family: "Noto Sans TC", sans-serif !important;
 }
 
@@ -62,6 +62,12 @@ body {
   color: var(--sub-color);
   transition: all 0.3s;
 }
+@media (max-width: 575px) {
+  .navbar .navbar-brand {
+    padding-left: 1rem;
+    font-size: 35px;
+  }
+}
 .navbar .navbar-brand:hover {
   opacity: 0.9;
   color: var(--sub-color);
@@ -192,6 +198,15 @@ body {
   opacity: 1;
 }
 
+.blog-header .nav-item {
+  padding: 0 0.3rem;
+}
+@media (max-width: 575px) {
+  .blog-header .nav-item {
+    padding: 0 1rem;
+  }
+}
+
 /* sidebar.html Start */
 .news-sidebar {
   position: sticky;
@@ -230,8 +245,9 @@ body {
 /* sidebar.html End */
 /* single.html Start */
 .blog-post.content h4 {
-  font-size: 16px;
-  font-weight: 300;
+  margin-top: 3rem;
+  font-size: 1.25rem;
+  font-weight: 500;
   line-height: 32px;
 }
 .blog-post.content h4 a {
@@ -264,6 +280,11 @@ body {
 .news-main .post-title a {
   font-size: 34px;
 }
+@media (max-width: 991px) {
+  .news-main .post-title a {
+    font-size: 22px;
+  }
+}
 .news-main img {
   height: 100%;
   -o-object-fit: cover;
@@ -286,6 +307,12 @@ body {
   -o-object-fit: cover;
      object-fit: cover;
 }
+@media (max-width: 991px) {
+  .focus-content img,
+  .news-featured img {
+    height: 50vw;
+  }
+}
 .focus-content .post-title,
 .news-featured .post-title {
   overflow: hidden;
@@ -340,6 +367,11 @@ body {
   background-position: center center;
   cursor: pointer;
 }
+@media (max-width: 991px) {
+  .tab-content .bg-img {
+    height: 50vw;
+  }
+}
 .tab-content .bg-img section {
   padding: 10px 25px;
   position: absolute;
@@ -365,6 +397,26 @@ body {
 .news-all .post-title a {
   font-size: 36px;
   line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* 限制最多兩行 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  transition: all 0.3s;
+}
+@media (max-width: 575px) {
+  .news-all .post-title a {
+    font-size: 30px;
+  }
+}
+.news-all .post-description a {
+  color: #727272;
+  text-decoration: none;
+  transition: all 0.3s;
+}
+.news-all .post-description a:hover {
+  opacity: 0.7;
 }
 .news-all .news-info a {
   font-size: 18px;
@@ -377,6 +429,11 @@ body {
   -o-object-fit: cover;
      object-fit: cover;
 }
+@media (max-width: 991px) {
+  .news-all .first-img {
+    height: 50vw;
+  }
+}
 .news-all .line {
   padding: 0 12px;
 }
@@ -386,6 +443,11 @@ body {
   -o-object-fit: cover;
      object-fit: cover;
 }
+@media (max-width: 575px) {
+  .news-all .cover-img {
+    height: 50vw;
+  }
+}
 
 /* news-all.html End */
 /* news-featured.html Start */

static/css/style.scss

@@ -8,7 +8,7 @@
 
 * {
   letter-spacing: 1px;
-  font-weight: 300;
+  font-weight: 400;
   font-family: "Noto Sans TC", sans-serif !important;
 }
 
@@ -63,6 +63,11 @@ body {
     color: var(--sub-color);
     transition: all 0.3s;
 
+    @media (max-width: 575px) {
+      padding-left: 1rem;
+      font-size: 35px;
+    }
+
     &:hover {
       opacity: 0.9;
       color: var(--sub-color);
@@ -196,7 +201,7 @@ body {
   right: 15px;
   z-index: 10;
   opacity: 0; // scrollTop = 0
-  transition: all .5s;
+  transition: all 0.5s;
 
   button {
     border: none;
@@ -211,6 +216,16 @@ body {
   opacity: 1; // scrollTop > 100
 }
 
+.blog-header {
+  .nav-item {
+    padding: 0 0.3rem;
+
+    @media (max-width: 575px) {
+      padding: 0 1rem;
+    }
+  }
+}
+
 /* sidebar.html Start */
 
 .news-sidebar {
@@ -258,8 +273,9 @@ body {
 
 .blog-post.content {
   h4 {
-    font-size: 16px;
-    font-weight: 300;
+    margin-top: 3rem;
+    font-size: 1.25rem;
+    font-weight: 500;
     line-height: 32px;
 
     a {
@@ -299,6 +315,10 @@ body {
   .post-title {
     a {
       font-size: 34px;
+
+      @media (max-width: 991px) {
+        font-size: 22px;
+      }
     }
   }
 
@@ -328,6 +348,10 @@ body {
   img {
     height: 175px;
     object-fit: cover;
+
+    @media (max-width: 991px) {
+      height: 50vw;
+    }
   }
 
   .post-title {
@@ -384,7 +408,7 @@ body {
   }
 
   .nav-pills .nav-link.active,
-  .nav-pills .show>.nav-link {
+  .nav-pills .show > .nav-link {
     color: var(--sub-color);
     background-color: var(--main-color);
   }
@@ -400,6 +424,10 @@ body {
     background-position: center center;
     cursor: pointer;
 
+    @media (max-width: 991px) {
+      height: 50vw;
+    }
+
     section {
       padding: 10px 25px;
       position: absolute;
@@ -435,6 +463,29 @@ body {
     a {
       font-size: 36px;
       line-height: 1.5;
+      display: -webkit-box;
+      -webkit-line-clamp: 2; /* 限制最多兩行 */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-word;
+      transition: all 0.3s;
+
+      @media (max-width: 575px) {
+        font-size: 30px;
+      }
+    }
+  }
+
+  .post-description {
+    a {
+      color: #727272;
+      text-decoration: none;
+      transition: all 0.3s;
+
+      &:hover {
+        opacity: 0.7;
+      }
     }
   }
 
@@ -451,6 +502,10 @@ body {
   .first-img {
     height: 50vh;
     object-fit: cover;
+
+    @media (max-width: 991px) {
+      height: 50vw;
+    }
   }
 
   .line {
@@ -461,6 +516,10 @@ body {
     width: 100%;
     height: 220px;
     object-fit: cover;
+
+    @media (max-width: 575px) {
+      height: 50vw;
+    }
   }
 }
 
@@ -473,4 +532,4 @@ body {
   top: 20px;
 }
 
-/* news-featured.html End */
+/* news-featured.html End */

themes/hugo-bootstrap-5/layouts/index.html

@@ -44,7 +44,7 @@
     {{ partial "news-all.html" . }}
     {{ partial "paginator" . }}
   </div>
-  <div class="col-12 col-lg-3">
+  <div class="col-12 col-lg-3 d-none d-lg-block">
     {{ partial "news-featured.html" . }}
   </div>
  </div>

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

@@ -20,7 +20,7 @@
 <!-- Google Font -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500&family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500&family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
 
 {{ with .Site.Params.style }}
 <link href="{{ "/css/style" | relURL }}.{{ . }}.css" rel="stylesheet" id="theme-stylesheet">

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

@@ -14,7 +14,7 @@
 
     <nav class="navbar navbar-expand-sm navbar-dark bg-dark flex-column align-items-stretch"
         style="padding-top: 0;padding-bottom: 0;">
-        <div class="d-flex">
+        <div class="d-flex justify-content-between">
             <a class="navbar-brand mx-sm-auto mr-auto" href="{{ .Site.BaseURL | relLangURL }}">
                 {{ partial "brand" . }}
             </a>
@@ -39,8 +39,6 @@
                 <li class="nav-item">
                     <a href="/categories/影音新聞/" class="nav-link" style="color: white;">影音新聞</a>
                 </li>
-            </ul>
-            <ul class="navbar-nav ml-auto">
                 <li class="nav-item">
                     <a href="/tags/室內設計/" class="nav-link" style="color: white;">民生消費</a>
                 </li>

themes/hugo-bootstrap-5/layouts/partials/news-all.html

@@ -47,6 +47,9 @@
           <h2 class="post-title">
             <a href="{{ .Params.url }}">{{ .Params.title }}</a>
           </h2>
+          <!-- <p class="post-description">
+            <a href="{{ .Permalink }}">{{ .Summary | plainify | truncate 100 }}</a>
+          </p> -->
         </article>
       </div>
       <span class="line">

themes/hugo-bootstrap-5/layouts/partials/news-main.html

@@ -1,6 +1,6 @@
-<div class="news-main">
+<div class="news-main mt-3 mt-lg-0">
   {{ range first 2 (where .Site.Pages "Params.type" "main") }}
-  <div class="col-12 mb-3">
+  <div class="col-12 mb-3 d-flex flex-column-reverse flex-lg-column">
     <div>
       <section class="news-info">
         {{ range (.GetTerms "categories") }}