From f93d56eb1b0ea5488dd3f2ba7e2f0c489c753ae2 Mon Sep 17 00:00:00 2001
From: Warren Chen <warrenchen@innovedus.com>
Date: Sat, 17 Jan 2026 03:13:46 +0900
Subject: [PATCH] Responsive for width 768 - 1023

---
 innovedus_cms/home/static/css/home.css        |  6 ++
 .../home/static/css/horizontal_list.css       | 33 ++++++++
 innovedus_cms/home/static/css/news_list.css   | 75 ++++++++++++++++++-
 .../home/includes/horizontal_list.html        |  4 +-
 innovedus_cms/mysite/static/css/mysite.css    | 17 ++++-
 5 files changed, 130 insertions(+), 5 deletions(-)

diff --git a/innovedus_cms/home/static/css/home.css b/innovedus_cms/home/static/css/home.css
index b781c0e..27ce532 100644
--- a/innovedus_cms/home/static/css/home.css
+++ b/innovedus_cms/home/static/css/home.css
@@ -92,3 +92,9 @@
 .section-o .list-title a{
   color: #f4a41c;
 }
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .list-title .category_title {
+    width: 142px;
+  }
+}
diff --git a/innovedus_cms/home/static/css/horizontal_list.css b/innovedus_cms/home/static/css/horizontal_list.css
index 12518bd..8d777cf 100644
--- a/innovedus_cms/home/static/css/horizontal_list.css
+++ b/innovedus_cms/home/static/css/horizontal_list.css
@@ -142,3 +142,36 @@
   border: 1px dashed #ddd;
   border-radius: 12px;
 }
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .horizontal-list {
+    gap: 16px;
+  }
+
+  .horizontal-list li {
+    flex: 0 0 145px;
+  }
+
+  .horizontal-list-thumb {
+    width: 139px;
+    height: 114px;
+  }
+
+  .section-b .horizontal-list-thumb::after {
+    background: url("../img/picfrm_b139.png") no-repeat left bottom / cover;
+    background-size: 139px 25px;
+  }
+
+  .section-o .horizontal-list-thumb::after {
+    background: url("../img/picfrm_o139.png") no-repeat left bottom / cover;
+    background-size: 139px 25px;
+  }
+
+  .horizontal-list .article-title {
+    width: 145px;
+  }
+  
+  .horizontal-list .article-intro {
+    display: none;
+  }
+}
diff --git a/innovedus_cms/home/static/css/news_list.css b/innovedus_cms/home/static/css/news_list.css
index 6d639fb..0ce1255 100644
--- a/innovedus_cms/home/static/css/news_list.css
+++ b/innovedus_cms/home/static/css/news_list.css
@@ -173,13 +173,14 @@
 }
 
 .more-news {
-  width: 200px;
+  flex: 1 1 200px;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
 .more-news .article-title {
+  max-width: 200px;
   font-size: 20px;
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -187,7 +188,46 @@
   overflow: hidden;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1023px) {
+  .more-news {
+    display: grid;
+    grid-template-columns: 200px 1fr 1fr;
+    gap: 8px 16px;
+    align-items: start;
+  }
+
+  .more-news .more-news-title {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    align-self: stretch;
+  }
+
+  .more-news .article-title {
+    max-width: none;
+  }
+
+  .more-news a:nth-of-type(1) {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .more-news a:nth-of-type(2) {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  .more-news a:nth-of-type(3) {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .more-news a:nth-of-type(4) {
+    grid-column: 3;
+    grid-row: 2;
+  }
+}
+
+@media (max-width: 767px) {
   .news-hero {
     grid-template-columns: 1fr;
     grid-template-areas:
@@ -205,3 +245,34 @@
     max-width: none;
   }
 }
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .news-hero {
+    grid-template-columns: 318px 1fr;
+  }
+
+  .news-hero .fist-news-title {
+    max-width: 320px;
+  }
+
+  .news-hero .first-news-image {
+    width: 318px;
+  }
+
+  .news-hero .first-news-image::after {
+    background-size: 318px 25px;
+  }
+
+  .news-hero .first-news-image img {
+    width: 318px;
+    height: 290px;
+  }
+
+  .news-hero .first-news-content {
+    height: 290px;
+  }
+
+  .news-list-lower {
+    gap: 16px;
+  }
+}
diff --git a/innovedus_cms/home/templates/home/includes/horizontal_list.html b/innovedus_cms/home/templates/home/includes/horizontal_list.html
index bfaf836..8bdfac2 100644
--- a/innovedus_cms/home/templates/home/includes/horizontal_list.html
+++ b/innovedus_cms/home/templates/home/includes/horizontal_list.html
@@ -13,9 +13,9 @@
           <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;"/>
+              <img src="{{ cover.url }}" alt="{{ article.title }}" height="133" width="194"/>
             {% 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;"/>
+              <img src="{% static 'img/default_cover.jpg' %}" alt="{{ article.title }}" height="133" width="194"/>
             {% endif %}
           </div>
           <div><span class="article-title">{{ article.title }}</span></div>
diff --git a/innovedus_cms/mysite/static/css/mysite.css b/innovedus_cms/mysite/static/css/mysite.css
index 52d52fa..b13e2fc 100644
--- a/innovedus_cms/mysite/static/css/mysite.css
+++ b/innovedus_cms/mysite/static/css/mysite.css
@@ -8,6 +8,12 @@ a {
   padding: 0 16px;
 }
 
+@media (max-width: 1023px) {
+  .site-container {
+    max-width: 640px;
+  }
+}
+
 .full-bleed {
   width: 100vw;
   margin-left: calc(50% - 50vw);
@@ -47,7 +53,7 @@ a {
 }
 
 .main-nav {
-  flex: 0 1 auto;
+  flex: 1 1 auto;
   margin-left: 16px;
 }
 
@@ -58,10 +64,13 @@ a {
   list-style: none;
   margin: 0;
   padding: 0;
+  width: 100%;
 }
 
 .menu-item {
   position: relative;
+  flex: 1 1 0;
+  text-align: left;
 }
 
 .main-menu-link {
@@ -182,6 +191,12 @@ a {
   width: 181px; /* 依需要調 */
 }
 
+@media (max-width: 1023px) {
+  .header-search input[type="search"] {
+    width: 90px;
+  }
+}
+
 @layer figreset {
     :root {
         font-family: var( --default-font-family,ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji' )