Refactor CSS styles for improved consistency and readability across various components

This commit is contained in:
Warren Chen 2026-01-27 15:02:33 +09:00
parent 4d17999359
commit 07e082f826
8 changed files with 32 additions and 62 deletions

View File

@ -29,13 +29,16 @@
} }
.first-article .first-article-content { .first-article .first-article-content {
max-height: 293px;
overflow: hidden;
position: relative;
}
.first-article .first-article-content a {
grid-area: content; grid-area: content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
max-height: 293px;
overflow: hidden;
position: relative;
} }
.first-article .first-article-title { .first-article .first-article-title {
@ -122,7 +125,6 @@
.article-title { .article-title {
font-size: 40px; font-size: 40px;
font-weight: 400; font-weight: 400;
color: #0e1b42;
margin: 0; margin: 0;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
@ -185,7 +187,6 @@
.pagination-pages a, .pagination-pages a,
.pagination-current, .pagination-current,
.pagination-ellipsis { .pagination-ellipsis {
color: #0e1b42;
line-height: 44px; line-height: 44px;
} }

View File

@ -28,13 +28,16 @@
} }
.block-first-article .first-article-content { .block-first-article .first-article-content {
max-height: 293px;
overflow: hidden;
position: relative;
}
.block-first-article .first-article-content a {
grid-area: content; grid-area: content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
max-height: 293px;
overflow: hidden;
position: relative;
} }
.block-first-article .first-article-title { .block-first-article .first-article-title {
@ -140,5 +143,4 @@
.block-first-article .first-article-intro { .block-first-article .first-article-intro {
font-size: 16px; font-size: 16px;
} }
} }

View File

@ -70,7 +70,6 @@
.block-list-more-article span { .block-list-more-article span {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: #0e1b42;
text-decoration: underline; text-decoration: underline;
} }

View File

@ -21,7 +21,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin: 24px 0; margin: 24px 0;
color: #0e1b42;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
} }

View File

@ -36,7 +36,6 @@
.more-link { .more-link {
text-decoration: none; text-decoration: none;
font-size: 16px;
} }
.section-b .list-title { .section-b .list-title {

View File

@ -124,12 +124,10 @@
} }
.horizontal-list .article-intro { .horizontal-list .article-intro {
font-size: 16px;
} }
.horizontal-list .article-date { .horizontal-list .article-date {
color: #0e1b4266; color: #0e1b4266;
font-size: 16px;
} }
.horizontal-list .empty { .horizontal-list .empty {

View File

@ -1,8 +1,3 @@
/* .news-title, .more-news-title {
background-color: #ffffff;
color: #0e1b42;
}
*/
.news-hero { .news-hero {
display: grid; display: grid;
grid-template-columns: 480px 1fr; grid-template-columns: 480px 1fr;
@ -69,11 +64,14 @@
} }
.news-hero .first-news-content { .news-hero .first-news-content {
max-height: 293px;
}
.news-hero .first-news-content a {
grid-area: content; grid-area: content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
max-height: 293px;
} }
.news-hero .fist-news-date, .news-hero .fist-news-date,

View File

@ -1,3 +1,8 @@
body {
color: #0e1b42;
font-size: 16px;
}
a { a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
@ -14,16 +19,6 @@ a {
margin-left: calc(50% - 50vw); margin-left: calc(50% - 50vw);
} }
.template-darkbackground .site-hero-band {
background-color: #0e1b42;
color: #ffffff;
}
.template-darkbackground .site-hero-band .block-title {
background-color: #ffffff;
color: #0e1b42;
}
.site-header { .site-header {
position: relative; position: relative;
z-index: 10; z-index: 10;
@ -164,7 +159,6 @@ a {
display: inline-block; display: inline-block;
padding: 12px 4px; padding: 12px 4px;
font-variation-settings: normal; font-variation-settings: normal;
color: #0e1b42;
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;
@ -175,10 +169,6 @@ a {
--letter-spacing: 0px; --letter-spacing: 0px;
} }
.template-darkbackground .main-menu-link {
color: #ffffff;
}
.submenu { .submenu {
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -230,7 +220,6 @@ a {
.submenu-item a { .submenu-item a {
display: block; display: block;
font-variation-settings: normal; font-variation-settings: normal;
color: #0e1b42;
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;
@ -242,10 +231,6 @@ a {
padding: 8px 16px; padding: 8px 16px;
} }
.template-darkbackground .submenu-item a {
color: #ffffff;
}
.submenu-item a:hover, .submenu-item a:hover,
.submenu-item a:focus { .submenu-item a:focus {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
@ -274,10 +259,6 @@ a {
color: #1b2140; color: #1b2140;
} }
.template-darkbackground .header-search .search-icon {
color: #ffffff;
}
.header-search .search-icon svg { .header-search .search-icon svg {
width: 28px; width: 28px;
height: 28px; height: 28px;
@ -371,7 +352,6 @@ footer .footer-links li {
footer .footer-links a { footer .footer-links a {
font-size: 14px; font-size: 14px;
color: #ffffff;
} }
footer .footer-divider { footer .footer-divider {
@ -389,6 +369,16 @@ footer .footer-sections {
flex-wrap: wrap; flex-wrap: wrap;
} }
.template-darkbackground .site-hero-band {
background-color: #0e1b42;
color: #ffffff;
}
.template-darkbackground .site-hero-band .block-title {
background-color: #ffffff;
color: #0e1b42;
}
@media (max-width: 1023px) { @media (max-width: 1023px) {
.site-container { .site-container {
max-width: 640px; max-width: 640px;
@ -437,8 +427,7 @@ footer .footer-sections {
} }
.site-header .site-container { .site-header .site-container {
padding: 0 44px; transform: translateX(-30px);
margin: 0;
} }
.main-menu { .main-menu {
@ -512,22 +501,12 @@ footer .footer-sections {
background: #0e1b42; background: #0e1b42;
} }
.main-menu-link {
color: #0e1b42;
}
.template-darkbackground .main-menu-link { .template-darkbackground .main-menu-link {
color: #ffffff;
font-size: 14px; font-size: 14px;
} }
.submenu-toggle { .submenu-toggle {
display: inline-flex; display: inline-flex;
color: #0e1b42;
}
.template-darkbackground .submenu-toggle {
color: #ffffff;
} }
.menu-divider { .menu-divider {
@ -572,13 +551,8 @@ footer .footer-sections {
.submenu-item a { .submenu-item a {
padding: 6px 0 6px 18px; padding: 6px 0 6px 18px;
color: #0e1b42;
font-size: 14px; font-size: 14px;
} }
.template-darkbackground .submenu-item a {
color: #ffffff;
}
} }
@media (max-width: 574px) { @media (max-width: 574px) {