diff --git a/innovedus_cms/base/templates/base/includes/home_banner.html b/innovedus_cms/base/templates/base/includes/home_banner.html index 3490cd2..b77e214 100644 --- a/innovedus_cms/base/templates/base/includes/home_banner.html +++ b/innovedus_cms/base/templates/base/includes/home_banner.html @@ -5,7 +5,7 @@
{% if banner.link_url %} - {% image banner.image width-1200 alt=banner.title %} + {% image banner.image width-1280 alt=banner.title %} {% if banner.title %} {{ banner.title }} {% endif %} @@ -14,7 +14,7 @@ {% endif %} {% else %} - {% image banner.image width-1200 alt=banner.title %} + {% image banner.image width-1280 alt=banner.title %} {% endif %}
{% endif %} diff --git a/innovedus_cms/home/static/css/home.css b/innovedus_cms/home/static/css/home.css index 6f9eea4..b781c0e 100644 --- a/innovedus_cms/home/static/css/home.css +++ b/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; diff --git a/innovedus_cms/home/static/css/horizontal_list.css b/innovedus_cms/home/static/css/horizontal_list.css index a34f326..12518bd 100644 --- a/innovedus_cms/home/static/css/horizontal_list.css +++ b/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; } diff --git a/innovedus_cms/home/static/css/news_list.css b/innovedus_cms/home/static/css/news_list.css index 798d250..6d639fb 100644 --- a/innovedus_cms/home/static/css/news_list.css +++ b/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 intro" - "image body"; - gap: 16px; + "image content"; + gap: 16px 40px; 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" - "intro" - "body"; + "content"; } .news-hero .news-hero-header { diff --git a/innovedus_cms/home/templates/home/home_page.html b/innovedus_cms/home/templates/home/home_page.html index a7edee0..8e8ba60 100644 --- a/innovedus_cms/home/templates/home/home_page.html +++ b/innovedus_cms/home/templates/home/home_page.html @@ -8,8 +8,8 @@ {% endblock %} {% block content %} -
-
+
+
{% include "base/includes/home_banner.html" %} {% with top_section=sections.top_section %} @@ -21,12 +21,10 @@
-
- {% 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 %} -
+ {% 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 %} {% endblock content %} {% block extra_js %} diff --git a/innovedus_cms/home/templates/home/includes/news_list.html b/innovedus_cms/home/templates/home/includes/news_list.html index 6479bb0..fc9d111 100644 --- a/innovedus_cms/home/templates/home/includes/news_list.html +++ b/innovedus_cms/home/templates/home/includes/news_list.html @@ -22,26 +22,28 @@
{% with first_article=section.items|first %} {% if first_article %} -
- {{ first_article.date|date:"Y.m.d" }} -
- {% if first_article.intro %} -
- {{ first_article.intro }} +
+
+ {{ first_article.date|date:"Y.m.d" }} +
+ {% if first_article.intro %} +
+ {{ first_article.intro }} +
+ {% endif %} +
+ {{ first_article.body_search_text|truncatechars:320 }}
- {% endif %} -
- {{ first_article.body_search_text|truncatechars:120 }}
{% else %} 目前沒有文章 diff --git a/innovedus_cms/mysite/static/css/mysite.css b/innovedus_cms/mysite/static/css/mysite.css index fde066a..52d52fa 100644 --- a/innovedus_cms/mysite/static/css/mysite.css +++ b/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; - background: #fff; - border-radius: 16px; - box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); + padding-inline-start: 0; + /* padding: 14px 0; */ + /* background: #fff; */ + /* 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; - height: 20px; + width: 28px; + height: 28px; } .header-search input[type="search"] { border: 0; background: transparent; outline: none; - color: #fff; - width: 160px; /* 依需要調 */ + /* color: rgba(0, 0, 0, 0.3); */ + 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; diff --git a/innovedus_cms/mysite/templates/base.html b/innovedus_cms/mysite/templates/base.html index 1cf7e78..cbc0df6 100644 --- a/innovedus_cms/mysite/templates/base.html +++ b/innovedus_cms/mysite/templates/base.html @@ -35,8 +35,12 @@ {% wagtailuserbar %} {% include "includes/header.html" %} - - {% block content %}{% endblock %} + +
+
+ {% block content %}{% endblock %} +
+
{% include "includes/footer.html" %} diff --git a/innovedus_cms/mysite/templates/includes/footer.html b/innovedus_cms/mysite/templates/includes/footer.html index e01dbe0..b59cc80 100644 --- a/innovedus_cms/mysite/templates/includes/footer.html +++ b/innovedus_cms/mysite/templates/includes/footer.html @@ -1,73 +1,75 @@ {% load navigation_tags %} diff --git a/innovedus_cms/mysite/templates/includes/header.html b/innovedus_cms/mysite/templates/includes/header.html index febedd7..c0f0379 100644 --- a/innovedus_cms/mysite/templates/includes/header.html +++ b/innovedus_cms/mysite/templates/includes/header.html @@ -2,7 +2,8 @@ {% get_settings use_default_site=True as settings %}
-
+
+
{% if settings.base.HeaderSettings.logo_light and settings.base.HeaderSettings.logo_dark %}