From fcfaba52c0313018f2e45ac75cfbdcc9e8ab7671 Mon Sep 17 00:00:00 2001
From: Warren Chen <warrenchen@innovedus.com>
Date: Thu, 15 Jan 2026 16:38:52 +0900
Subject: [PATCH] Enhance styling and structure for list titles and horizontal
 list items; add section-specific colors and new date display.

---
 innovedus_cms/home/static/css/home.css        | 28 ++++++++++++-
 .../home/static/css/horizontal_list.css       | 40 +++++++++++++++++--
 .../home/templates/home/home_page.html        |  3 +-
 .../home/includes/category_session.html       |  6 +--
 .../home/includes/horizontal_list.html        | 19 +++++----
 5 files changed, 79 insertions(+), 17 deletions(-)

diff --git a/innovedus_cms/home/static/css/home.css b/innovedus_cms/home/static/css/home.css
index e92c9f7..6f9eea4 100644
--- a/innovedus_cms/home/static/css/home.css
+++ b/innovedus_cms/home/static/css/home.css
@@ -71,4 +71,30 @@
 .more-link {
   text-decoration: none;
   font-size: 16px;
-}
\ No newline at end of file
+}
+
+.section-b .list-title {
+  color: #00abf5;
+}
+
+.section-b .list-title .category_title {
+  background-color: #00abf5;
+  color: #ffffff;
+}
+
+.section-b .list-title a{
+  color: #00abf5;
+}
+
+.section-o .list-title {
+  color: #f4a41c;
+}
+
+.section-o .list-title .category_title {
+  background-color: #f4a41c;
+  color: #ffffff;
+}
+
+.section-o .list-title a{
+  color: #f4a41c;
+}
diff --git a/innovedus_cms/home/static/css/horizontal_list.css b/innovedus_cms/home/static/css/horizontal_list.css
index b548f5e..a34f326 100644
--- a/innovedus_cms/home/static/css/horizontal_list.css
+++ b/innovedus_cms/home/static/css/horizontal_list.css
@@ -73,11 +73,39 @@
   text-decoration: none;
 }
 
+.horizontal-list-thumb {
+  position: relative;
+  width: 194px;
+  height: 133px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.horizontal-list-thumb::after {
+  content: "";
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  height: 25px;
+  pointer-events: none;
+}
+
+.section-b .horizontal-list-thumb::after {
+  background: url("../img/picfrm_b194.png") no-repeat left bottom / cover;
+  background-size: 194px 25px;
+}
+
+.section-o .horizontal-list-thumb::after {
+  background: url("../img/picfrm_o194.png") no-repeat left bottom / cover;
+  background-size: 194px 25px;
+}
+
 .horizontal-list li img {
-  width: 100%;
-  height: 200px;
   display: block;
-  margin: 0 3px;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .horizontal-list li a:hover,
@@ -90,7 +118,6 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  font-size: 20px;
 }
 
 .horizontal-list .article-title {
@@ -101,6 +128,11 @@
   font-size: 16px;
 }
 
+.horizontal-list .article-date {
+  color: #0e1b4266;
+  font-size: 16px;
+}
+
 .horizontal-list .empty {
   flex: 1 0 auto;
   text-align: center;
diff --git a/innovedus_cms/home/templates/home/home_page.html b/innovedus_cms/home/templates/home/home_page.html
index 6af0092..a7edee0 100644
--- a/innovedus_cms/home/templates/home/home_page.html
+++ b/innovedus_cms/home/templates/home/home_page.html
@@ -23,7 +23,8 @@
 
   <div class="home-page">
     {% for section in sections.category_sections %}
-      {% include "home/includes/category_session.html" with section=section %}
+      {% cycle 'section-b' 'section-o' as section_color silent %}
+      {% include "home/includes/category_session.html" with section=section section_color=section_color %}
     {% endfor %}
   </div>
 {% endblock content %}
diff --git a/innovedus_cms/home/templates/home/includes/category_session.html b/innovedus_cms/home/templates/home/includes/category_session.html
index 177941d..b8ec3aa 100644
--- a/innovedus_cms/home/templates/home/includes/category_session.html
+++ b/innovedus_cms/home/templates/home/includes/category_session.html
@@ -1,7 +1,7 @@
 {% load wagtailimages_tags static %}
 
-<section class="article-section article-section--{{ section.layout }}">
-  <div class="list-title">
+<section class="article-section article-section--{{ section.layout }} {{ section_color }}">
+  <div class="list-title {{ title_variant }}">
     <div class="block-title category_title"><span>{{ section.title }}</span></div>
       <span class="block-title-divider" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="100%" overflow="visible" preserveAspectRatio="none" viewBox="0 0 28 1" width="100%">
@@ -16,4 +16,4 @@
     {% include "home/includes/horizontal_list.html" with items=section.items %}
   {% endif %}
 </section>
-  
\ No newline at end of file
+  
diff --git a/innovedus_cms/home/templates/home/includes/horizontal_list.html b/innovedus_cms/home/templates/home/includes/horizontal_list.html
index 8f6c7f6..bfaf836 100644
--- a/innovedus_cms/home/templates/home/includes/horizontal_list.html
+++ b/innovedus_cms/home/templates/home/includes/horizontal_list.html
@@ -10,14 +10,17 @@
     {% for article in items %}
       <li>
         <a href="{{ article.url }}">
-          {% if article.cover_image %}
-            {% image article.cover_image max-194x133 as cover %}
-            <img src="{{ cover.url }}" alt="{{ article.title }}" height="133" width="194" style="width:194px;height:133px;object-fit:cover;display:block;"/>
-          {% else %}
-            <img src="{% static 'img/default_cover.jpg' %}" alt="{{ article.title }}" height="133" width="194" style="width:194px;height:133px;object-fit:cover;display:block;"/>
-          {% endif %}
-          <span class="article-title">{{ article.title }}</span>
-          <span class="article-intro">{{ article.intro }}</span>
+          <div class="horizontal-list-thumb">
+            {% if article.cover_image %}
+              {% image article.cover_image max-194x133 as cover %}
+              <img src="{{ cover.url }}" alt="{{ article.title }}" height="133" width="194" style="width:194px;height:133px;object-fit:cover;display:block;"/>
+            {% else %}
+              <img src="{% static 'img/default_cover.jpg' %}" alt="{{ article.title }}" height="133" width="194" style="width:194px;height:133px;object-fit:cover;display:block;"/>
+            {% endif %}
+          </div>
+          <div><span class="article-title">{{ article.title }}</span></div>
+          <div><span class="article-intro">{{ article.intro }}</span></div>
+          <div><span class="article-date">{{ article.date|date:"Y.m.d" }}</span></div>
         </a>
       </li>
     {% empty %}