視覺進化論內容潤飾、小黃文章典藏改連站內全文、全站補上 section-copy 排版類別

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-27 16:25:02 +08:00
co-authored by Claude Sonnet 5
parent 0faebc8e88
commit 782cf3637e
5 changed files with 132 additions and 88 deletions
+15 -7
View File
@@ -12,14 +12,20 @@
margin: 0 auto; margin: 0 auto;
} }
.fan-article-card {
border-left: 4px solid var(--color-brand);
}
.fan-article-card__meta { .fan-article-card__meta {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 0.82rem; font-size: 0.82rem;
color: #9a9a9a; color: var(--color-text-muted);
letter-spacing: 0.5px; letter-spacing: 0.5px;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(255, 204, 0, 0.25);
} }
.fan-article-card__board { .fan-article-card__board {
@@ -29,19 +35,21 @@
} }
.fan-article-card__title { .fan-article-card__title {
margin: 0 0 0.3rem; margin: 0 0 0.5rem;
font-size: 1.2rem; font-size: 1.35rem;
color: #2e2e2e; font-weight: 700;
color: var(--color-text-dark);
} }
.fan-article-card__author { .fan-article-card__author {
margin: 0 0 0.8rem; margin: 0 0 0.9rem;
font-size: 0.9rem; font-size: 0.9rem;
color: #7e7e7e; font-style: italic;
color: var(--color-text-muted);
} }
.fan-article-card p:not(.fan-article-card__author) { .fan-article-card p:not(.fan-article-card__author) {
color: #4a4a4a; color: var(--color-text);
line-height: 1.75; line-height: 1.75;
margin: 0 0 1rem; margin: 0 0 1rem;
} }
+3 -2
View File
@@ -92,9 +92,10 @@
/* albums/albums.html.archive-block 已改為 <section>,沿用 style.css 的 section 卡片版型 */ /* albums/albums.html.archive-block 已改為 <section>,沿用 style.css 的 section 卡片版型 */
section.archive-block p { section.archive-block p {
font-size: 1.0625rem;
color: #4a4a4a; color: #4a4a4a;
line-height: 1.7; line-height: 1.75;
margin: 0 0 0.75rem; margin: 0 0 1.125rem;
} }
section.archive-block p:last-child { section.archive-block p:last-child {
+46 -14
View File
@@ -1027,6 +1027,51 @@ footer {
margin: 15px auto 0; margin: 15px auto 0;
} }
/* 全站共用:跟首頁 #start 對齊的正文間距(h2.section-title 後接的敘述段落/列表)。
可套在包住多個 <p> 的容器上,也可直接加在單一 <p> 上。 */
.section-copy {
max-width: 42rem;
margin-inline: auto;
}
.section-copy p,
p.section-copy {
font-size: 1.0625rem;
line-height: 1.75;
color: #4a4a4a;
/* margin: 0 0 1.125rem; */
}
.section-copy p:last-child,
p.section-copy:last-child {
margin-bottom: 0;
}
.section-copy ul {
margin: 0.5rem 0 0;
padding-left: 1.2rem;
color: #4a4a4a;
line-height: 1.75;
font-size: 1.0625rem;
}
.section-copy ul li {
margin-bottom: 0.75rem;
}
.section-copy ul li:last-child {
margin-bottom: 0;
}
@media (max-width: 640px) {
.section-copy p,
p.section-copy,
.section-copy ul {
font-size: 1rem;
}
}
.subtitle-wrap { .subtitle-wrap {
margin: 4px auto 28px; margin: 4px auto 28px;
display: flex; display: flex;
@@ -4082,25 +4127,12 @@ body.minister-page .minister-hero-lead .mark_b {
color: var(--color-brand-light); color: var(--color-brand-light);
} }
body.minister-page .variety-block .intro-text {
color: #333;
line-height: 1.9;
margin: 0 0 10px;
}
body.minister-page .variety-block .slogan-quote--awakening+.intro-text { body.minister-page .variety-block .slogan-quote--awakening+.intro-text {
margin-top: 1rem; margin-top: 1rem;
} }
body.minister-page .minister-skill-list { body.minister-page .minister-skill-list {
margin: 0.75rem 0 0; list-style: none;
padding-left: 1.2rem;
color: #333;
line-height: 1.75;
}
body.minister-page .minister-skill-list li {
margin-bottom: 0.85rem;
} }
/* hashtag 膠囊:minister.html 與 home-pageminister_ge .hashtag-chip)共用 */ /* hashtag 膠囊:minister.html 與 home-pageminister_ge .hashtag-chip)共用 */
+1 -2
View File
@@ -42,8 +42,7 @@
<p> <p>
回歸浪潮剛掀起時的深度長文:從 DSP 娛樂當年「專輯只賣 50 萬張」的解散說法談起,逐一點評六人各自的魅力——隊長殷志源的領導力、張水院的獨特氣質、李宰鎮的四次元思維、隱藏成員高志溶的溫暖、主唱姜成勳的顏值歌聲、金在德的忠誠,並向《無限挑戰》讓水晶男孩重回舞台致謝。 回歸浪潮剛掀起時的深度長文:從 DSP 娛樂當年「專輯只賣 50 萬張」的解散說法談起,逐一點評六人各自的魅力——隊長殷志源的領導力、張水院的獨特氣質、李宰鎮的四次元思維、隱藏成員高志溶的溫暖、主唱姜成勳的顏值歌聲、金在德的忠誠,並向《無限挑戰》讓水晶男孩重回舞台致謝。
</p> </p>
<a href="https://www.ptt.cc/bbs/KoreaStar/M.1462808417.A.424.html" class="story-external-inline" <a href="fan-articles/水晶男孩-六人六色.html" class="story-external-inline">
target="_blank" rel="noopener noreferrer">
<span class="story-external-inline__label">閱讀原文</span> <span class="story-external-inline__label">閱讀原文</span>
<i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i> <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
</a> </a>
+15 -11
View File
@@ -25,24 +25,23 @@
<canvas id="particles"></canvas> <canvas id="particles"></canvas>
<main class="content-container variety-page-main chronicle-reader minister-main"> <main class="content-container variety-page-main chronicle-reader minister-main">
<p class="minister-hero-lead">
關於我:<span class="mark_b">從「好奇」到「全端」的進化之路</span>
</p>
<section id="intro" class="variety-block"> <section id="intro" class="variety-block">
<h2 class="section-title">跨越時空的開端</h2> <h2 class="section-title">跨越時空的開端</h2>
<p class="intro-text"> <p class="intro-text section-copy">
這段旅程始於 2016 年 4 月,透過《無限挑戰》的回歸企劃,讓原本不認識這組傳奇團體的我,因一時好奇點開節目。即便錯過了 2000 年巔峰解散的時代,我依然被那份真誠且專業的魅力所震撼。</p> 這段旅程始於 2016 年 4 月,透過《無限挑戰》的回歸企劃,讓原本不認識這組傳奇團體的我,因一時好奇點開節目。即便錯過了 2000 年巔峰解散的時代,我依然被那份真誠且專業的魅力所震撼。</p>
<p class="slogan-quote slogan-quote--awakening"><span class="slogan-quote__inner">對我而言,這不只是追星的開始,更是自我覺醒的起點。</span></p> <p class="slogan-quote slogan-quote--awakening"><span
class="slogan-quote__inner">對我而言,這不只是追星的開始,更是自我覺醒的起點。</span></p>
</section> </section>
<section id="slant" class="variety-block"> <section id="slant" class="variety-block">
<h2 class="section-title">為了熱愛而進化的斜槓精神</h2> <h2 class="section-title">為了熱愛而進化的斜槓精神</h2>
<p class="intro-text"> <p class="intro-text section-copy">
始於「水晶廢人」的自嘲,卻在熱愛中長成了各個領域的策劃者: 始於「水晶廢人字幕組」出現的名詞「水晶廢人」,在熱愛中長成了各個領域的策劃者:
</p> </p>
<ul class="minister-skill-list"> <ul class="minister-skill-list section-copy">
<li><span class="minister-hashtag">#水晶推廣部</span>身為品牌設計師,我堅持「不看醜東西」的原則,親自操刀所有視覺,將這份能量轉化為專業策劃。</li> <li><span class="minister-hashtag">#水晶推廣部</span>身為設計總監,我堅持「美感」,親自操刀所有視覺,將這份能量轉化為專業策劃。</li>
<li><span class="minister-hashtag">#水晶訓練營</span>為了聽懂歐巴的每一句話,我開始學韓文、考韓檢、健身、跳舞,證明追星是自我提升最強大的動力。</li> <li><span class="minister-hashtag">#水晶訓練營</span>為了聽懂歐巴的每一句話,我開始學韓文、考韓檢、健身、跳舞,證明追星是自我提升最強大的動力。</li>
<li><span class="minister-hashtag">#全端開發者</span>這是我當下最重要的挑戰,將設計專業與程式技術結合,搭建一個專屬於這份熱愛的數位平台。</li> <li><span class="minister-hashtag">#全端開發者</span>這是我當下最重要的挑戰,將設計專業與程式技術結合,搭建一個專屬於這份熱愛的數位平台。</li>
</ul> </ul>
@@ -62,7 +61,11 @@
<article class="story-node" data-era="2016.08" data-photo-pending="true"> <article class="story-node" data-era="2016.08" data-photo-pending="true">
<h3>螢幕後的參與</h3> <h3>螢幕後的參與</h3>
<p>以「<a href="https://www.youtube.com/channel/UCJnhlm_t9C7BmcILcjHDk_w" class="story-external-inline" target="_blank" rel="noopener noreferrer"><span class="story-external-inline__label">水晶廢人字幕組</span><i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>」粉絲身分,用手繪應援板與勾針作品參與應援影片籌備。</p> <p>以「<a href="https://www.youtube.com/channel/UCJnhlm_t9C7BmcILcjHDk_w"
class="story-external-inline" target="_blank" rel="noopener noreferrer"><span
class="story-external-inline__label">水晶廢人字幕組</span><i
class="fa-solid fa-arrow-up-right-from-square"
aria-hidden="true"></i></a>」粉絲身分,用手繪應援板與勾針作品參與應援影片籌備。</p>
</article> </article>
<article class="story-node" data-era="2016.09" data-photo-pending="true"> <article class="story-node" data-era="2016.09" data-photo-pending="true">
@@ -99,7 +102,8 @@
<h3>415 天健身挑戰</h3> <h3>415 天健身挑戰</h3>
<p>7/13 李宰鎮生日這天,自發性展開為期 415 天的每日健身計畫。也因為知道李宰鎮、張水院都有重訓健身的習慣,這條「水晶健身重訓」的自我要求就更沒有鬆懈的理由。</p> <p>7/13 李宰鎮生日這天,自發性展開為期 415 天的每日健身計畫。也因為知道李宰鎮、張水院都有重訓健身的習慣,這條「水晶健身重訓」的自我要求就更沒有鬆懈的理由。</p>
<figure class="minister-photo"> <figure class="minister-photo">
<img src="../assets/images/minister/fitness-calendar.png" alt="健身重訓行事曆" width="1040" height="780" loading="lazy"> <img src="../assets/images/minister/fitness-calendar.png" alt="健身重訓行事曆" width="1040"
height="780" loading="lazy">
</figure> </figure>
</article> </article>