Responsive for width 768 - 1023

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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>

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' )