Refactor homepage layout and styles

- Updated home_banner.html to increase image width from 1200 to 1280 pixels for better resolution.
- Modified home.css to remove unnecessary styles and added a new rule for .home-banner img to ensure responsive images.
- Adjusted horizontal_list.css to increase gap between items from 24px to 30px and removed padding for a cleaner layout.
- Changed news_list.css to update grid layout for news articles, including new flex properties for content alignment and added a gradient overlay for better readability.
- Refined home_page.html to use a full-bleed class for the hero band and simplified the structure by removing unnecessary divs.
- Enhanced news_list.html to improve the structure of the first news article display, including better content organization and styling.
- Updated mysite.css to refine container styles and improve header and footer layouts, ensuring better responsiveness and visual consistency.
- Adjusted base.html to wrap content in a main tag for better semantic structure.
- Improved footer.html to streamline social media links and added a new section for footer navigation links.
- Enhanced header.html to ensure consistent styling and layout with the new site container.

innovedus_cms/base/templates/base/includes/home_banner.html

@@ -5,7 +5,7 @@
   <div class="home-banner">
     {% if banner.link_url %}
       <a class="home-banner__link" href="{{ banner.link_url }}">
-        {% image banner.image width-1200 alt=banner.title %}
+        {% image banner.image width-1280 alt=banner.title %}
         {% if banner.title %}
           <span class="home-banner__title">{{ banner.title }}</span>
         {% endif %}
@@ -14,7 +14,7 @@
         {% endif %}
       </a>
     {% else %}
-      {% image banner.image width-1200 alt=banner.title %}
+      {% image banner.image width-1280 alt=banner.title %}
     {% endif %}
   </div>
 {% endif %}

innovedus_cms/home/static/css/home.css

@@ -1,9 +1,3 @@
-.home-page {
-  max-width: 890px;
-  margin: 0 auto;
-  padding: 0 16px;
-}
-
 .home-hero-band {
   background-color: #0e1b42;
   color: #ffffff;
@@ -19,12 +13,6 @@
   color: #ffffff;
 }
 
-.template-homepage .header-inner {
-  max-width: 1028px;
-  margin: 0 auto;
-  /* padding: 0 16px; */
-}
-
 .template-homepage .main-menu-link {
   color: #ffffff;
 }
@@ -42,6 +30,12 @@
   color: #ffffff;
 }
 
+.home-banner img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
 .list-title {
   align-items: center;
   margin: 10px 0;

innovedus_cms/home/static/css/horizontal_list.css

@@ -45,12 +45,12 @@
 .horizontal-list {
   display: flex;
   align-items: stretch;
-  gap: 24px;
+  gap: 30px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   list-style: none;
   margin: 24px 0;
-  padding: 12px 48px;
+  padding: 0;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }

innovedus_cms/home/static/css/news_list.css

@@ -5,13 +5,11 @@
 
 .news-hero {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 480px 1fr;
   grid-template-areas:
     "header header"
-    "image meta"
+    "image content";
-    "image intro"
+  gap: 16px 40px;
-    "image body";
-  gap: 16px;
   align-items: start;
 }
 
@@ -47,6 +45,7 @@
   position: relative;
   border-radius: 10px;
   overflow: hidden;
+  width: 480px;
 }
 
 .news-hero .first-news-image::after {
@@ -69,19 +68,47 @@
   border-radius: 10px;
 }
 
+.news-hero .first-news-content {
+  grid-area: content;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: 293px;
+}
+
+.news-hero .fist-news-date,
+.news-hero .first-news-intro {
+  flex: 0 0 auto;
+}
+
 .news-hero .fist-news-date {
-  grid-area: meta;
   color: rgba(255, 255, 255, 0.4);
 }
 
 .news-hero .first-news-intro {
-  grid-area: intro;
   font-size: 20px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .news-hero .first-news-body {
-  grid-area: body;
   font: 12px;
+  flex: 1 1 auto;
+  overflow: hidden;
+  position: relative;
+}
+
+.news-hero .first-news-body::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100px;
+  background: linear-gradient(to bottom, rgba(14, 27, 66, 0), #0e1b42);
+  pointer-events: none;
 }
 
 .news-list-items {
@@ -92,7 +119,7 @@
   margin-top: 24px;
   display: flex;
   flex-wrap: wrap;
-  gap: 30px;
+  gap: 28px;
 }
 
 .news-list-items a {
@@ -167,9 +194,7 @@
       "title"
       "image"
       "head"
-      "meta"
+      "content";
-      "intro"
-      "body";
   }
 
   .news-hero .news-hero-header {

innovedus_cms/home/templates/home/home_page.html

@@ -8,8 +8,8 @@
   <link rel="stylesheet" type="text/css" href="{% static 'css/horizontal_list.css' %}">
 {% endblock %}
 {% block content %}
-  <div class="home-hero-band">
+  <div class="home-hero-band full-bleed">
-    <div class="home-page">
+    <div class="site-container">
       <div class="home-hero">
         {% include "base/includes/home_banner.html" %}
         {% with top_section=sections.top_section %}
@@ -21,12 +21,10 @@
     </div>
   </div>
 
-  <div class="home-page">
   {% for section in sections.category_sections %}
     {% 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 %}
 {% block extra_js %}
   <script type="text/javascript" src="{% static 'js/block_list.js' %}"></script>

innovedus_cms/home/templates/home/includes/news_list.html

@@ -22,9 +22,6 @@
       </div>
       {% with first_article=section.items|first %}
         {% if first_article %}
-          <div class="fist-news-date">
-            <span>{{ first_article.date|date:"Y.m.d" }}</span>
-          </div>
           <div class="first-news-image">
             <a href="{{ first_article.url }}">
               {% if first_article.cover_image %}
@@ -35,13 +32,18 @@
               {% endif %}
             </a>
           </div>
+          <div class="first-news-content">
+            <div class="fist-news-date">
+              <span>{{ first_article.date|date:"Y.m.d" }}</span>
+            </div>
             {% if first_article.intro %}
               <div class="first-news-intro">
                 <span>{{ first_article.intro }}</span>
               </div>
             {% endif %}
             <div class="first-news-body">
-            <span>{{ first_article.body_search_text|truncatechars:120 }}</span>
+              <span>{{ first_article.body_search_text|truncatechars:320 }}</span>
+            </div>
           </div>
         {% else %}
           <span class="empty">目前沒有文章</span>

innovedus_cms/mysite/static/css/mysite.css

@@ -2,6 +2,17 @@ a {
   text-decoration: none; 
 }
 
+.site-container {
+  max-width: 890px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+.full-bleed {
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+}
+
 .site-header {
   position: relative;
   z-index: 10;
@@ -11,7 +22,7 @@ a {
   display: flex;
   align-items: center;
   gap: 24px;
-  padding: 30px 105px;
+  padding: 30px 0;
 }
 
 .logo {
@@ -36,7 +47,8 @@ a {
 }
 
 .main-nav {
-  flex: 1;
+  flex: 0 1 auto;
+  margin-left: 16px;
 }
 
 .main-menu {
@@ -73,12 +85,17 @@ a {
   left: 50%;
   transform: translateX(-50%);
   margin-top: -2px;
-  min-width: 220px;
+  margin-left: 20px;
+  /* min-width: 220px; */
   list-style: none;
-  padding: 14px 0;
+  padding-inline-start: 0;
-  background: #fff;
+  /* padding: 14px 0; */
-  border-radius: 16px;
+  /* background: #fff; */
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
+  /* border-radius: 16px; */
+  /* box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); */
+  border-bottom: #ffffff;
+  border-style: solid;
+  border-width: 0 0 1px 0;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
@@ -93,10 +110,23 @@ a {
   transform: translateX(-50%) translateY(2px);
 }
 
+.submenu-item {
+  min-width: 94px;
+  height: 36px;
+  /* padding: 8px 16px; */
+  border: #ffffff;
+  border-style: solid;
+  border-width: 1px 1px 0 1px;
+  background-color: #0e1b42;
+  /* line-height: 36px; */
+  /* vertical-align: middle; */
+  /* align-items: center; */
+}
+
 .submenu-item a {
   display: block;
   font-variation-settings: normal;
-  color: #0e1b42;
+  color: #ffffff;
   font-family: "Inter:Regular", "Noto Sans JP:Regular", sans-serif;
   word-break: break-word;
   font-weight: 400;
@@ -105,7 +135,7 @@ a {
   letter-spacing: 0px;
   line-height: normal;
   --letter-spacing: 0px;
-  padding: 10px 18px;
+  padding: 8px 16px;
 }
 
 .submenu-item a:hover,
@@ -117,9 +147,13 @@ a {
 .header-search .search-input {
   display: flex;
   align-items: center;
-  border-style: solid;
+  /* border-style: solid; */
   /* border-color: #0e1b42; */
-  border-width: 1px;
+  /* border-width: 1px; */
+}
+
+.header-search {
+  margin-left: auto;
 }
 
 .header-search .search-icon {
@@ -136,16 +170,16 @@ a {
 }
 
 .header-search .search-icon svg {
-  width: 20px;
+  width: 28px;
-  height: 20px;
+  height: 28px;
 }
 
 .header-search input[type="search"] {
   border: 0;
   background: transparent;
   outline: none;
-  color: #fff;
+  /* color: rgba(0, 0, 0, 0.3); */
-  width: 160px; /* 依需要調 */
+  width: 181px; /* 依需要調 */
 }
 
 @layer figreset {
@@ -179,6 +213,9 @@ footer {
   color: #ffffff;
   padding: 24px 0;
   font-size: 14px;
+}
+
+.footer-inner {
   display: flex;
   justify-content: center;
   gap: 48px;
@@ -256,7 +293,7 @@ footer .footer-sections {
 }
 
 @media (max-width: 768px) {
-  footer {
+  .footer-inner {
     flex-direction: column;
     align-items: center;
     text-align: center;

innovedus_cms/mysite/templates/base.html

@@ -36,7 +36,11 @@
 
         {% include "includes/header.html" %}
 
+        <main class="site-main">
+            <div class="site-container">
                 {% block content %}{% endblock %}
+            </div>
+        </main>
 
         {% include "includes/footer.html" %}
         

innovedus_cms/mysite/templates/includes/footer.html

@@ -1,6 +1,7 @@
 {% load navigation_tags %}
 
 <footer>
+  <div class="site-container footer-inner">
     <div class="company-info">
       <div class="copyright">
         {% get_footer_text %}
@@ -70,4 +71,5 @@
         </div>
       {% endif %}
     </div>
+  </div>
 </footer>

innovedus_cms/mysite/templates/includes/header.html

@@ -2,6 +2,7 @@
 {% get_settings use_default_site=True as settings %}
 
 <header class="site-header{% if settings.base.HeaderSettings.logo_light and settings.base.HeaderSettings.logo_dark %} has-logo-variants{% endif %}">
+  <div class="site-container">
     <div class="header-inner">
     {% if settings.base.HeaderSettings.logo_light and settings.base.HeaderSettings.logo_dark %}
       <a href="/" class="logo logo--light">
@@ -113,4 +114,5 @@
       </div>
     </form>
     </div>
+  </div>
 </header>