Staging deploy 2026/1/21 #2
@ -5,7 +5,7 @@
|
|||||||
<div class="home-banner">
|
<div class="home-banner">
|
||||||
{% if banner.link_url %}
|
{% if banner.link_url %}
|
||||||
<a class="home-banner__link" href="{{ 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 %}
|
{% if banner.title %}
|
||||||
<span class="home-banner__title">{{ banner.title }}</span>
|
<span class="home-banner__title">{{ banner.title }}</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@ -14,7 +14,7 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
</a>
|
</a>
|
||||||
{% else %}
|
{% else %}
|
||||||
{% image banner.image width-1200 alt=banner.title %}
|
{% image banner.image width-1280 alt=banner.title %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
@ -1,9 +1,3 @@
|
|||||||
.home-page {
|
|
||||||
max-width: 890px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-hero-band {
|
.home-hero-band {
|
||||||
background-color: #0e1b42;
|
background-color: #0e1b42;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
@ -19,12 +13,6 @@
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.template-homepage .header-inner {
|
|
||||||
max-width: 1028px;
|
|
||||||
margin: 0 auto;
|
|
||||||
/* padding: 0 16px; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.template-homepage .main-menu-link {
|
.template-homepage .main-menu-link {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
@ -42,6 +30,12 @@
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.home-banner img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.list-title {
|
.list-title {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
|
|||||||
@ -45,12 +45,12 @@
|
|||||||
.horizontal-list {
|
.horizontal-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
gap: 24px;
|
gap: 30px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
scroll-snap-type: x mandatory;
|
scroll-snap-type: x mandatory;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 24px 0;
|
margin: 24px 0;
|
||||||
padding: 12px 48px;
|
padding: 0;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,13 +5,11 @@
|
|||||||
|
|
||||||
.news-hero {
|
.news-hero {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 480px 1fr;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"header header"
|
"header header"
|
||||||
"image meta"
|
"image content";
|
||||||
"image intro"
|
gap: 16px 40px;
|
||||||
"image body";
|
|
||||||
gap: 16px;
|
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,6 +45,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
width: 480px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-hero .first-news-image::after {
|
.news-hero .first-news-image::after {
|
||||||
@ -69,19 +68,47 @@
|
|||||||
border-radius: 10px;
|
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 {
|
.news-hero .fist-news-date {
|
||||||
grid-area: meta;
|
|
||||||
color: rgba(255, 255, 255, 0.4);
|
color: rgba(255, 255, 255, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-hero .first-news-intro {
|
.news-hero .first-news-intro {
|
||||||
grid-area: intro;
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-hero .first-news-body {
|
.news-hero .first-news-body {
|
||||||
grid-area: body;
|
|
||||||
font: 12px;
|
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 {
|
.news-list-items {
|
||||||
@ -92,7 +119,7 @@
|
|||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 30px;
|
gap: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-list-items a {
|
.news-list-items a {
|
||||||
@ -167,9 +194,7 @@
|
|||||||
"title"
|
"title"
|
||||||
"image"
|
"image"
|
||||||
"head"
|
"head"
|
||||||
"meta"
|
"content";
|
||||||
"intro"
|
|
||||||
"body";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-hero .news-hero-header {
|
.news-hero .news-hero-header {
|
||||||
|
|||||||
@ -8,8 +8,8 @@
|
|||||||
<link rel="stylesheet" type="text/css" href="{% static 'css/horizontal_list.css' %}">
|
<link rel="stylesheet" type="text/css" href="{% static 'css/horizontal_list.css' %}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block content %}
|
{% 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">
|
<div class="home-hero">
|
||||||
{% include "base/includes/home_banner.html" %}
|
{% include "base/includes/home_banner.html" %}
|
||||||
{% with top_section=sections.top_section %}
|
{% with top_section=sections.top_section %}
|
||||||
@ -21,12 +21,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="home-page">
|
{% for section in sections.category_sections %}
|
||||||
{% for section in sections.category_sections %}
|
{% cycle 'section-b' 'section-o' as section_color silent %}
|
||||||
{% cycle 'section-b' 'section-o' as section_color silent %}
|
{% include "home/includes/category_session.html" with section=section section_color=section_color %}
|
||||||
{% include "home/includes/category_session.html" with section=section section_color=section_color %}
|
{% endfor %}
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
{% block extra_js %}
|
{% block extra_js %}
|
||||||
<script type="text/javascript" src="{% static 'js/block_list.js' %}"></script>
|
<script type="text/javascript" src="{% static 'js/block_list.js' %}"></script>
|
||||||
|
|||||||
@ -22,26 +22,28 @@
|
|||||||
</div>
|
</div>
|
||||||
{% with first_article=section.items|first %}
|
{% with first_article=section.items|first %}
|
||||||
{% if first_article %}
|
{% if first_article %}
|
||||||
<div class="fist-news-date">
|
|
||||||
<span>{{ first_article.date|date:"Y.m.d" }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="first-news-image">
|
<div class="first-news-image">
|
||||||
<a href="{{ first_article.url }}">
|
<a href="{{ first_article.url }}">
|
||||||
{% if first_article.cover_image %}
|
{% if first_article.cover_image %}
|
||||||
{% image first_article.cover_image max-480x320 as cover %}
|
{% image first_article.cover_image max-480x320 as cover %}
|
||||||
<img src="{{ cover.url }}" alt="{{ first_article.title }}" height="293" width="480"/>
|
<img src="{{ cover.url }}" alt="{{ first_article.title }}" height="293" width="480"/>
|
||||||
{% else %}
|
{% else %}
|
||||||
<img src="{% static 'img/default_cover.jpg' %}" alt="{{ first_article.title }}" height="293" width="480"/>
|
<img src="{% static 'img/default_cover.jpg' %}" alt="{{ first_article.title }}" height="293" width="480"/>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{% if first_article.intro %}
|
<div class="first-news-content">
|
||||||
<div class="first-news-intro">
|
<div class="fist-news-date">
|
||||||
<span>{{ first_article.intro }}</span>
|
<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:320 }}</span>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
|
||||||
<div class="first-news-body">
|
|
||||||
<span>{{ first_article.body_search_text|truncatechars:120 }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<span class="empty">目前沒有文章</span>
|
<span class="empty">目前沒有文章</span>
|
||||||
|
|||||||
@ -2,6 +2,17 @@ a {
|
|||||||
text-decoration: none;
|
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 {
|
.site-header {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
@ -11,7 +22,7 @@ a {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
padding: 30px 105px;
|
padding: 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
@ -36,7 +47,8 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.main-nav {
|
.main-nav {
|
||||||
flex: 1;
|
flex: 0 1 auto;
|
||||||
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-menu {
|
.main-menu {
|
||||||
@ -73,12 +85,17 @@ a {
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
margin-top: -2px;
|
margin-top: -2px;
|
||||||
min-width: 220px;
|
margin-left: 20px;
|
||||||
|
/* min-width: 220px; */
|
||||||
list-style: none;
|
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;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@ -93,10 +110,23 @@ a {
|
|||||||
transform: translateX(-50%) translateY(2px);
|
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 {
|
.submenu-item a {
|
||||||
display: block;
|
display: block;
|
||||||
font-variation-settings: normal;
|
font-variation-settings: normal;
|
||||||
color: #0e1b42;
|
color: #ffffff;
|
||||||
font-family: "Inter:Regular", "Noto Sans JP:Regular", sans-serif;
|
font-family: "Inter:Regular", "Noto Sans JP:Regular", sans-serif;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -105,7 +135,7 @@ a {
|
|||||||
letter-spacing: 0px;
|
letter-spacing: 0px;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
--letter-spacing: 0px;
|
--letter-spacing: 0px;
|
||||||
padding: 10px 18px;
|
padding: 8px 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.submenu-item a:hover,
|
.submenu-item a:hover,
|
||||||
@ -117,9 +147,13 @@ a {
|
|||||||
.header-search .search-input {
|
.header-search .search-input {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-style: solid;
|
/* border-style: solid; */
|
||||||
/* border-color: #0e1b42; */
|
/* border-color: #0e1b42; */
|
||||||
border-width: 1px;
|
/* border-width: 1px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-search {
|
||||||
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-search .search-icon {
|
.header-search .search-icon {
|
||||||
@ -136,16 +170,16 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.header-search .search-icon svg {
|
.header-search .search-icon svg {
|
||||||
width: 20px;
|
width: 28px;
|
||||||
height: 20px;
|
height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-search input[type="search"] {
|
.header-search input[type="search"] {
|
||||||
border: 0;
|
border: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
outline: none;
|
outline: none;
|
||||||
color: #fff;
|
/* color: rgba(0, 0, 0, 0.3); */
|
||||||
width: 160px; /* 依需要調 */
|
width: 181px; /* 依需要調 */
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer figreset {
|
@layer figreset {
|
||||||
@ -179,6 +213,9 @@ footer {
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
padding: 24px 0;
|
padding: 24px 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 48px;
|
gap: 48px;
|
||||||
@ -256,7 +293,7 @@ footer .footer-sections {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
footer {
|
.footer-inner {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@ -36,7 +36,11 @@
|
|||||||
|
|
||||||
{% include "includes/header.html" %}
|
{% include "includes/header.html" %}
|
||||||
|
|
||||||
{% block content %}{% endblock %}
|
<main class="site-main">
|
||||||
|
<div class="site-container">
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
{% include "includes/footer.html" %}
|
{% include "includes/footer.html" %}
|
||||||
|
|
||||||
|
|||||||
@ -1,73 +1,75 @@
|
|||||||
{% load navigation_tags %}
|
{% load navigation_tags %}
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="company-info">
|
<div class="site-container footer-inner">
|
||||||
<div class="copyright">
|
<div class="company-info">
|
||||||
{% get_footer_text %}
|
<div class="copyright">
|
||||||
|
{% get_footer_text %}
|
||||||
|
</div>
|
||||||
|
{% with social_links=settings.base.SocialMediaSettings.links %}
|
||||||
|
{% if social_links %}
|
||||||
|
<div class="footer-socials" aria-label="social icons">
|
||||||
|
{% for item in social_links %}
|
||||||
|
<a href="{{ item.value.url }}" target="_blank" aria-label="{{ item.value.platform }}">
|
||||||
|
{% if item.value.platform|lower == "facebook" %}
|
||||||
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" aria-label="facebook" role="img">
|
||||||
|
<path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0ZM23.12 8.37H21.18C19.27 8.37 18.67 9.56 18.67 10.78V13.67H22.94L22.26 18.12H18.67V28.89H13.85V18.12H9.94V13.67H13.85V10.28C13.85 6.42 16.15 4.29 19.67 4.29C21.36 4.29 23.12 4.59 23.12 4.59V8.38V8.37Z" fill="var(--fill-0, #0E1B42)" id="Vector"/>
|
||||||
|
</svg>
|
||||||
|
{% elif item.value.platform|lower == "instagram" %}
|
||||||
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" aria-label="instagram" role="img">
|
||||||
|
<path d="M16.67 13.42C14.92 13.42 13.5 14.84 13.5 16.59C13.5 18.34 14.92 19.76 16.67 19.76C18.42 19.76 19.84 18.34 19.84 16.59C19.84 14.84 18.42 13.42 16.67 13.42Z" fill="var(--fill-0, #0E1B42)" id="Vector"/>
|
||||||
|
<path d="M20.6 8.42H12.57C10.28 8.42 8.42 10.28 8.42 12.57V20.6C8.42 22.89 10.28 24.75 12.57 24.75H20.6C22.89 24.75 24.75 22.89 24.75 20.6V12.57C24.75 10.28 22.89 8.42 20.6 8.42ZM16.67 21.54C13.94 21.54 11.72 19.32 11.72 16.59C11.72 13.86 13.94 11.64 16.67 11.64C19.4 11.64 21.62 13.86 21.62 16.59C21.62 19.32 19.4 21.54 16.67 21.54ZM21.91 12.48C21.26 12.48 20.73 11.95 20.73 11.3C20.73 10.65 21.26 10.12 21.91 10.12C22.56 10.12 23.09 10.65 23.09 11.3C23.09 11.95 22.56 12.48 21.91 12.48Z" fill="var(--fill-0, #0E1B42)" id="Vector_2"/>
|
||||||
|
<path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0ZM26.64 20.6C26.64 23.93 23.93 26.64 20.6 26.64H12.57C9.24 26.64 6.53 23.93 6.53 20.6V12.57C6.53 9.24 9.24 6.53 12.57 6.53H20.6C23.93 6.53 26.64 9.24 26.64 12.57V20.6Z" fill="var(--fill-0, #0E1B42)" id="Vector_3"/>
|
||||||
|
</svg>
|
||||||
|
{% elif item.value.platform|lower == "youtube" %}
|
||||||
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" aria-label="youtube" role="img">
|
||||||
|
<path d="M20.36 16.45L15.14 13.61C14.93 13.49 14.19 13.64 14.19 13.89V19.43C14.19 19.67 14.92 19.83 15.13 19.71L20.59 17.01C20.81 16.89 20.59 16.57 20.36 16.45Z" fill="var(--fill-0, #0E1B42)" id="Vector"/>
|
||||||
|
<path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0ZM27.74 19.42C27.74 22.05 25.61 24.18 22.98 24.18H10.81C8.18 24.18 6.05 22.05 6.05 19.42V13.76C6.05 11.13 8.18 9 10.81 9H22.98C25.61 9 27.74 11.13 27.74 13.76V19.42Z" fill="var(--fill-0, #0E1B42)" id="Vector_2"/>
|
||||||
|
</svg>
|
||||||
|
{% elif item.value.platform|lower == "threads" %}
|
||||||
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" aria-label="threads" role="img">
|
||||||
|
<path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0Z" fill="var(--fill-0, #0E1B42)"/>
|
||||||
|
<path class="icon-cutout" d="M6.321 6.016c-.27-.18-1.166-.802-1.166-.802.756-1.081 1.753-1.502 3.132-1.502.975 0 1.803.327 2.394.948s.928 1.509 1.005 2.644q.492.207.905.484c1.109.745 1.719 1.86 1.719 3.137 0 2.716-2.226 5.075-6.256 5.075C4.594 16 1 13.987 1 7.994 1 2.034 4.482 0 8.044 0 9.69 0 13.55.243 15 5.036l-1.36.353C12.516 1.974 10.163 1.43 8.006 1.43c-3.565 0-5.582 2.171-5.582 6.79 0 4.143 2.254 6.343 5.63 6.343 2.777 0 4.847-1.443 4.847-3.556 0-1.438-1.208-2.127-1.27-2.127-.236 1.234-.868 3.31-3.644 3.31-1.618 0-3.013-1.118-3.013-2.582 0-2.09 1.984-2.847 3.55-2.847.586 0 1.294.04 1.663.114 0-.637-.54-1.728-1.9-1.728-1.25 0-1.566.405-1.967.868ZM8.716 8.19c-2.04 0-2.304.87-2.304 1.416 0 .878 1.043 1.168 1.6 1.168 1.02 0 2.067-.282 2.232-2.423a6.2 6.2 0 0 0-1.528-.161" transform="translate(7.59 7.59) scale(1.125)"/>
|
||||||
|
</svg>
|
||||||
|
{% elif item.value.platform|lower == "linkedin" %}
|
||||||
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" aria-label="linkedin" role="img">
|
||||||
|
<path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0Z" fill="var(--fill-0, #0E1B42)"/>
|
||||||
|
<path class="icon-cutout" d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" transform="translate(7.59 7.59) scale(1.125)"/>
|
||||||
|
</svg>
|
||||||
|
{% elif item.value.platform|lower == "x" or item.value.platform|lower == "twitter" or item.value.platform|lower == "twitter-x" %}
|
||||||
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" aria-label="twitter-x" role="img">
|
||||||
|
<path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0Z" fill="var(--fill-0, #0E1B42)"/>
|
||||||
|
<path class="icon-cutout" d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" transform="translate(7.59 7.59) scale(1.125)"/>
|
||||||
|
</svg>
|
||||||
|
{% else %}
|
||||||
|
{{ item.value.platform }}
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endwith %}
|
||||||
</div>
|
</div>
|
||||||
{% with social_links=settings.base.SocialMediaSettings.links %}
|
|
||||||
{% if social_links %}
|
<div class="footer-divider" aria-hidden="true"></div>
|
||||||
<div class="footer-socials" aria-label="social icons">
|
|
||||||
{% for item in social_links %}
|
<div class="footer-links">
|
||||||
<a href="{{ item.value.url }}" target="_blank" aria-label="{{ item.value.platform }}">
|
{% if settings.base.NavigationSettings.footer_links %}
|
||||||
{% if item.value.platform|lower == "facebook" %}
|
<div class="footer-sections">
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" aria-label="facebook" role="img">
|
{% for section in settings.base.NavigationSettings.footer_links %}
|
||||||
<path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0ZM23.12 8.37H21.18C19.27 8.37 18.67 9.56 18.67 10.78V13.67H22.94L22.26 18.12H18.67V28.89H13.85V18.12H9.94V13.67H13.85V10.28C13.85 6.42 16.15 4.29 19.67 4.29C21.36 4.29 23.12 4.59 23.12 4.59V8.38V8.37Z" fill="var(--fill-0, #0E1B42)" id="Vector"/>
|
<div class="footer-section">
|
||||||
</svg>
|
{% if section.value.title %}
|
||||||
{% elif item.value.platform|lower == "instagram" %}
|
<h3>{{ section.value.title }}</h3>
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" aria-label="instagram" role="img">
|
|
||||||
<path d="M16.67 13.42C14.92 13.42 13.5 14.84 13.5 16.59C13.5 18.34 14.92 19.76 16.67 19.76C18.42 19.76 19.84 18.34 19.84 16.59C19.84 14.84 18.42 13.42 16.67 13.42Z" fill="var(--fill-0, #0E1B42)" id="Vector"/>
|
|
||||||
<path d="M20.6 8.42H12.57C10.28 8.42 8.42 10.28 8.42 12.57V20.6C8.42 22.89 10.28 24.75 12.57 24.75H20.6C22.89 24.75 24.75 22.89 24.75 20.6V12.57C24.75 10.28 22.89 8.42 20.6 8.42ZM16.67 21.54C13.94 21.54 11.72 19.32 11.72 16.59C11.72 13.86 13.94 11.64 16.67 11.64C19.4 11.64 21.62 13.86 21.62 16.59C21.62 19.32 19.4 21.54 16.67 21.54ZM21.91 12.48C21.26 12.48 20.73 11.95 20.73 11.3C20.73 10.65 21.26 10.12 21.91 10.12C22.56 10.12 23.09 10.65 23.09 11.3C23.09 11.95 22.56 12.48 21.91 12.48Z" fill="var(--fill-0, #0E1B42)" id="Vector_2"/>
|
|
||||||
<path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0ZM26.64 20.6C26.64 23.93 23.93 26.64 20.6 26.64H12.57C9.24 26.64 6.53 23.93 6.53 20.6V12.57C6.53 9.24 9.24 6.53 12.57 6.53H20.6C23.93 6.53 26.64 9.24 26.64 12.57V20.6Z" fill="var(--fill-0, #0E1B42)" id="Vector_3"/>
|
|
||||||
</svg>
|
|
||||||
{% elif item.value.platform|lower == "youtube" %}
|
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" aria-label="youtube" role="img">
|
|
||||||
<path d="M20.36 16.45L15.14 13.61C14.93 13.49 14.19 13.64 14.19 13.89V19.43C14.19 19.67 14.92 19.83 15.13 19.71L20.59 17.01C20.81 16.89 20.59 16.57 20.36 16.45Z" fill="var(--fill-0, #0E1B42)" id="Vector"/>
|
|
||||||
<path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0ZM27.74 19.42C27.74 22.05 25.61 24.18 22.98 24.18H10.81C8.18 24.18 6.05 22.05 6.05 19.42V13.76C6.05 11.13 8.18 9 10.81 9H22.98C25.61 9 27.74 11.13 27.74 13.76V19.42Z" fill="var(--fill-0, #0E1B42)" id="Vector_2"/>
|
|
||||||
</svg>
|
|
||||||
{% elif item.value.platform|lower == "threads" %}
|
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" aria-label="threads" role="img">
|
|
||||||
<path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0Z" fill="var(--fill-0, #0E1B42)"/>
|
|
||||||
<path class="icon-cutout" d="M6.321 6.016c-.27-.18-1.166-.802-1.166-.802.756-1.081 1.753-1.502 3.132-1.502.975 0 1.803.327 2.394.948s.928 1.509 1.005 2.644q.492.207.905.484c1.109.745 1.719 1.86 1.719 3.137 0 2.716-2.226 5.075-6.256 5.075C4.594 16 1 13.987 1 7.994 1 2.034 4.482 0 8.044 0 9.69 0 13.55.243 15 5.036l-1.36.353C12.516 1.974 10.163 1.43 8.006 1.43c-3.565 0-5.582 2.171-5.582 6.79 0 4.143 2.254 6.343 5.63 6.343 2.777 0 4.847-1.443 4.847-3.556 0-1.438-1.208-2.127-1.27-2.127-.236 1.234-.868 3.31-3.644 3.31-1.618 0-3.013-1.118-3.013-2.582 0-2.09 1.984-2.847 3.55-2.847.586 0 1.294.04 1.663.114 0-.637-.54-1.728-1.9-1.728-1.25 0-1.566.405-1.967.868ZM8.716 8.19c-2.04 0-2.304.87-2.304 1.416 0 .878 1.043 1.168 1.6 1.168 1.02 0 2.067-.282 2.232-2.423a6.2 6.2 0 0 0-1.528-.161" transform="translate(7.59 7.59) scale(1.125)"/>
|
|
||||||
</svg>
|
|
||||||
{% elif item.value.platform|lower == "linkedin" %}
|
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" aria-label="linkedin" role="img">
|
|
||||||
<path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0Z" fill="var(--fill-0, #0E1B42)"/>
|
|
||||||
<path class="icon-cutout" d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" transform="translate(7.59 7.59) scale(1.125)"/>
|
|
||||||
</svg>
|
|
||||||
{% elif item.value.platform|lower == "x" or item.value.platform|lower == "twitter" or item.value.platform|lower == "twitter-x" %}
|
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.18 33.18" aria-label="twitter-x" role="img">
|
|
||||||
<path d="M16.59 0C7.43 0 0 7.43 0 16.59C0 25.75 7.43 33.18 16.59 33.18C25.75 33.18 33.18 25.75 33.18 16.59C33.18 7.43 25.75 0 16.59 0Z" fill="var(--fill-0, #0E1B42)"/>
|
|
||||||
<path class="icon-cutout" d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" transform="translate(7.59 7.59) scale(1.125)"/>
|
|
||||||
</svg>
|
|
||||||
{% else %}
|
|
||||||
{{ item.value.platform }}
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</a>
|
<ul>
|
||||||
|
{% for link in section.value.links %}
|
||||||
|
<li><a href="{{ link.url }}" target="_blank">{{ link.label }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endwith %}
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer-divider" aria-hidden="true"></div>
|
|
||||||
|
|
||||||
<div class="footer-links">
|
|
||||||
{% if settings.base.NavigationSettings.footer_links %}
|
|
||||||
<div class="footer-sections">
|
|
||||||
{% for section in settings.base.NavigationSettings.footer_links %}
|
|
||||||
<div class="footer-section">
|
|
||||||
{% if section.value.title %}
|
|
||||||
<h3>{{ section.value.title }}</h3>
|
|
||||||
{% endif %}
|
|
||||||
<ul>
|
|
||||||
{% for link in section.value.links %}
|
|
||||||
<li><a href="{{ link.url }}" target="_blank">{{ link.label }}</a></li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@ -2,7 +2,8 @@
|
|||||||
{% get_settings use_default_site=True as settings %}
|
{% 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 %}">
|
<header class="site-header{% if settings.base.HeaderSettings.logo_light and settings.base.HeaderSettings.logo_dark %} has-logo-variants{% endif %}">
|
||||||
<div class="header-inner">
|
<div class="site-container">
|
||||||
|
<div class="header-inner">
|
||||||
{% if settings.base.HeaderSettings.logo_light and settings.base.HeaderSettings.logo_dark %}
|
{% if settings.base.HeaderSettings.logo_light and settings.base.HeaderSettings.logo_dark %}
|
||||||
<a href="/" class="logo logo--light">
|
<a href="/" class="logo logo--light">
|
||||||
{% if settings.base.HeaderSettings.site_name %}
|
{% if settings.base.HeaderSettings.site_name %}
|
||||||
@ -112,5 +113,6 @@
|
|||||||
aria-label="搜尋文章">
|
aria-label="搜尋文章">
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user