article description update

content/maincategories/example-article1/index.md

@@ -6,6 +6,7 @@ type: "blog"
 url: "/maincategories/example-article1"
 image: "/img/blog/boutique_hotel_slightly_drunk_chill_house_2.webp"
 categories: ["認識裝修裝潢"]
+description: "「客變」是許多人在成家過程中遇到的第一個考題，對新手買房的屋主來說，要在短時間決定影響未來生活機能的客變項目，甚至在對格局、生活需求沒有想像時，決定要做哪些更動，是有難度的。"
 ---
 <div class="container-fluid blog_article p-0">
   <div class="blog-banner"></div>

content/maincategories/example-article2/index.md

@@ -6,6 +6,7 @@ type: "blog"
 url: "/maincategories/example-article2"
 image: "/img/blog/boutique_hotel_slightly_drunk_chill_house_2.webp"
 categories: ["認識裝修裝潢"]
+description: "「客變」是許多人在成家過程中遇到的第一個考題，對新手買房的屋主來說，要在短時間決定影響未來生活機能的客變項目，甚至在對格局、生活需求沒有想像時，決定要做哪些更動，是有難度的。"
 ---
 <div class="container-fluid blog_article p-0">
   <div class="blog-banner"></div>

content/maincategories/example-article3/index.md

@@ -6,6 +6,7 @@ type: "blog"
 url: "/maincategories/example-article3"
 image: "/img/blog/boutique_hotel_slightly_drunk_chill_house_2.webp"
 categories: ["認識裝修裝潢"]
+description: "一般說到工業風，大家腦海中都會浮現一個有點粗獷又有個性的畫面，感覺生活在當中很自在、很有自己的品味，但工業風是從哪個國家起源、又是什麼時候開始流行呢？每一種居家風格都有其獨特的意涵，復古而率性的工業風格，背後又有什麼樣的精神呢？"
 ---
 ### **工業風是什麼？工業風的由來與演變**
 

content/maincategories/pre-sale_tenants_become_lazy_packs/index.md

@@ -6,6 +6,8 @@ type: "blog"
 url: "/maincategories/pre-sale_tenants_become_lazy_packs/"
 image: "/img/blog/boutique_hotel_slightly_drunk_chill_house_2.webp"
 categories: ["認識裝修裝潢"]
+description: "「我買了預售屋，有很多客變的想法！建設公司通知我要客變了，但我不知道這樣做好不好？」"
+
 ---
 <div class="container-fluid blog_article p-0">
   <div class="blog-banner"></div>

layouts/maincategories/list.html

@@ -67,7 +67,10 @@
           <a href="{{ .RelPermalink }}">
             <h4>{{ .Title }}</h4>
           </a>
-          <p class="mt-auto mb-0">{{ .PublishDate.Format "2006-01-02" }}</p>
+          <p class="mt-auto my-2 fw-bold">{{ .PublishDate.Format "2006-01-02" }}</p>
+          <a href="{{ .RelPermalink }}" class="description">
+            <p style="letter-spacing: 1px;">{{.Params.description }}</p>
+          </a>
           <!-- <p style="color:#4D4D4D;">{{ .Summary }}</p> -->
         </div>
       </div>

themes/hugo-universal-theme-master/static/css/style.bhouse.css

@@ -1683,6 +1683,9 @@ img {
   margin: 25px 0;
   padding-bottom: 50px;
   border-bottom: 1px solid var(--dark-gray);
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 
 .blog-categories .article .article-item h4 {
@@ -1696,6 +1699,14 @@ img {
   opacity: 0.8;
 }
 
+.blog-categories .article .article-item .description {
+  color: var(--dark-color);
+}
+
+.blog-categories .article .article-item .description:hover {
+  opacity: .8;
+}
+
 .blog-categories .article .article-item img {
   width: 240px;
   height: auto;

themes/hugo-universal-theme-master/static/css/style.bhouse.scss

@@ -1756,6 +1756,7 @@ img {
   margin: 25px 0;
   padding-bottom: 50px;
   border-bottom: 1px solid var(--dark-gray);
+  align-items: center;
 }
 
 .blog-categories .article .article-item h4 {
@@ -1769,6 +1770,14 @@ img {
   opacity: 0.8;
 }
 
+.blog-categories .article .article-item .description {
+  color: var(--dark-color);
+}
+
+.blog-categories .article .article-item .description:hover {
+  opacity: .8;
+}
+
 // .blog-categories .article .article-item h4,
 // .blog-categories .article .article-item p {
 //   font-weight: bold;