style minister_ge.html樣式調整
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
---
|
||||
description: 變更範圍與全站樣式：未點名的檔案與 class 預設不碰；跨頁／共用 CSS 須先確認。
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# AI 變更邊界（sechskies）
|
||||
|
||||
## 預設只做「被點名」的範圍
|
||||
|
||||
- 使用者若只提某頁（例如 **`minister_ge.html`**）、某區塊、某句文案：**只改該處**，不順手改 `index.html`、`minister.html`、`portal-nav.js`、`style.css` 全站區、或 **`index.css`** 裡與首頁共用的規則。
|
||||
- **未寫到的檔案＝不開、不刪、不重構**；需要動到時，先用**一句話**說明「為何必須動」並等使用者確認，或改在回覆裡列出將被波及的檔案請使用者選是否要做。
|
||||
|
||||
## 共用樣式（`style.css`、全站 class）
|
||||
|
||||
- **禁止**因為某一頁要對齊視覺，就擅自改掉全站 class（例如 `.slogan-quote`、`.mark_b`、`section` 預設）在**其他頁**的呈現。
|
||||
- **金句已分流**：覺醒稿用 **`slogan-quote slogan-quote--awakening`**（副標語彙：雙線＋中置小字），首頁使命稿用 **`slogan-quote slogan-quote--mission`**（獨立奶油卡）；基底 **`.slogan-quote` 不帶視覺**，**禁止**再只改基底就套兩種金句。
|
||||
- 若使用者說「參考某區塊的樣式」：只代表**該次交辦的那一段／那一頁**可以長得像它；**不要**在未說明下把既有全站 class 整組換成另一套語彙。應優先：**該頁專用 wrapper class**、或**只加在該頁父層下的選取器**（例如 `.home-page #某區 …`），且仍須落在使用者允許的檔案範圍內。
|
||||
|
||||
## 一句話可避免的誤會
|
||||
|
||||
- 若需求可能影響多檔（導覽、首頁、共用 CSS）：**先問**「是否只改 A，還是 B/C 也要一起？」再改。
|
||||
|
||||
## 文件與規則檔
|
||||
|
||||
- **不要**主動新增或長篇修改 `README`、`docs/*.md`、規則檔，除非使用者明講要寫入文件或規範。
|
||||
|
||||
（與導覽開放、頂欄 vs `site-guide` 相關條文以 **`user-scope-and-nav.mdc`** 為準。）
|
||||
@@ -24,3 +24,5 @@ alwaysApply: true
|
||||
|
||||
- **頂部橫列導覽（常稱 navbar）**：`portal-nav.js` 注入的 `<nav class="portal-nav" data-portal-nav>`，每一頁頂端黑底那一條。**備份稿／未公開頁**除非使用者**明講要上這條**，否則不要寫進 `PORTAL_NAV_INNER_HTML`。
|
||||
- **全站頁面索引**：`site-guide.html`（自行開網址），用來列檔案與錨點；**不影響**頂欄是否出現該連結。使用者說「留在全站導覽」常指保留在 **site-guide** 或站內說明，**不等於**要掛進頂欄。
|
||||
|
||||
（變更哪些檔、可否動共用 CSS：見 **`ai-change-boundaries.mdc`**。）
|
||||
|
||||
@@ -220,6 +220,10 @@ section.archive-block p:last-child {
|
||||
color: var(--light-yellow);
|
||||
}
|
||||
|
||||
.home-page #intro .intro-text .slogan-quote--awakening + .core-description {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* 頁尾 CTA 區（首頁 landing-actions 延伸） */
|
||||
.home-page .container>.landing-actions {
|
||||
text-align: center;
|
||||
@@ -240,17 +244,57 @@ section.archive-block p:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* 推廣部進化史：副標白票。2016 僅用你提供的三個數值；年分黃票不改（沿用 style.css 的 ::after） */
|
||||
.home-page #journey .merged-storyline .story-node:has(.journey-sublabel) {
|
||||
padding-top: 42px;
|
||||
}
|
||||
|
||||
/* 疊序（僅此區）：軸點鑽石 < 副標白票 < 年分黃標（標題在上） */
|
||||
.home-page #journey .merged-storyline .story-node::before {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.home-page #journey .merged-storyline .story-node::after {
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.home-page #journey .merged-storyline .story-node .journey-sublabel {
|
||||
display: inline-block;
|
||||
margin: 0 0 0.5rem;
|
||||
padding: 0.22rem 0.65rem 0.24rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.72rem;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
margin: 0;
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
color: #4a3d10;
|
||||
background: rgba(255, 204, 0, 0.22);
|
||||
border: 1px solid rgba(255, 204, 0, 0.45);
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 1.25;
|
||||
color: #2a2a2a;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, #fffef6 0%, #fff3d6 100%);
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.12);
|
||||
max-width: 8rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 2016 基準（奇，靠軸角在右上）：你給的 right / top / 角 */
|
||||
.home-page #journey .merged-storyline .story-node:nth-of-type(odd):has(.journey-sublabel) .journey-sublabel {
|
||||
right: 45px;
|
||||
top: -8px;
|
||||
transform: rotate(-10deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* 2017 鏡像（偶，靠軸角在左上）：角度 +10°；left 依實機微調 */
|
||||
.home-page #journey .merged-storyline .story-node:nth-of-type(even):has(.journey-sublabel) .journey-sublabel {
|
||||
left: 40px;
|
||||
top: 2px;
|
||||
transform: rotate(10deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.home-page #journey .merged-storyline .story-node .journey-sublabel + .journey-month {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.home-page #journey .merged-storyline .story-node .journey-month {
|
||||
@@ -266,10 +310,6 @@ section.archive-block p:last-child {
|
||||
background: linear-gradient(270deg, rgba(255, 204, 0, 0.14) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.home-page #journey .merged-storyline .story-node .journey-sublabel + .journey-month {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.home-page #journey .merged-storyline .story-node .journey-month + p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.35rem;
|
||||
@@ -298,6 +338,24 @@ section.archive-block p:last-child {
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
/* 主軸在左：僅微調副標橫向；年分仍用全站 merged-storyline 規則 */
|
||||
.home-page #journey .merged-storyline .story-node:nth-of-type(odd):has(.journey-sublabel) .journey-sublabel {
|
||||
left: 48px;
|
||||
right: auto;
|
||||
top: -8px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.home-page #journey .merged-storyline .story-node:nth-of-type(even):has(.journey-sublabel) .journey-sublabel {
|
||||
left: 58px;
|
||||
right: auto;
|
||||
top: 2px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
.home-page .container {
|
||||
|
||||
+1
-1
@@ -93,7 +93,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slogan-quote">
|
||||
<div class="slogan-quote slogan-quote--mission">
|
||||
<span class="slogan-quote__inner">我們要用這座<span class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
|
||||
class="mark_b">守護的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!</span>
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -33,7 +33,7 @@
|
||||
<h2 class="section-title">跨越時空的開端</h2>
|
||||
<p class="intro-text">
|
||||
這段旅程始於 2016 年 4 月，透過《無限挑戰》的回歸企劃，讓原本不認識這組傳奇團體的我，因一時好奇點開節目。即便錯過了 2000 年巔峰解散的時代，我依然被那份真誠且專業的魅力所震撼。</p>
|
||||
<p class="slogan-quote"><span class="slogan-quote__inner">對我而言，這不只是追星的開始，更是自我覺醒的起點。</span></p>
|
||||
<p class="slogan-quote slogan-quote--awakening"><span class="slogan-quote__inner">對我而言，這不只是追星的開始，更是自我覺醒的起點。</span></p>
|
||||
</section>
|
||||
|
||||
<section id="slant" class="variety-block">
|
||||
|
||||
+1
-1
@@ -41,7 +41,7 @@
|
||||
這段旅程始於 2016 年 4 月，透過國民綜藝《無限挑戰》六六歌 2 的回歸企劃，讓原本不認識這組傳奇元祖偶像的我，因一時好奇點開節目。當我回頭回溯那段歷史，才發現他們在 2000
|
||||
年巔峰解散時，我還未曾參與過那個屬於他們的世紀末。即便如此，隨著節目的鋪陳，我依然被那份熱血、真誠且專業的魅力所震撼，那些搞笑又感動的內容結束了我原本的低潮期，從此深陷其中。
|
||||
</p>
|
||||
<div class="slogan-quote">
|
||||
<div class="slogan-quote slogan-quote--awakening">
|
||||
<span class="slogan-quote__inner">這不只是追星的開始，更成為我自我覺醒的起點。</span>
|
||||
</div>
|
||||
<p class="core-description">
|
||||
|
||||
@@ -536,8 +536,19 @@ section {
|
||||
}
|
||||
}
|
||||
|
||||
/* 全站：金句 — 語彙對齊 .subtitle-wrap（兩側金線）＋ .sub-title（字距、灰色階） */
|
||||
/* 金句：基底只放結構：視覺請用 --mission / --awakening，兩句互不覆寫 */
|
||||
.slogan-quote {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.slogan-quote__inner {
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* 覺醒金句：語彙與 .subtitle-wrap / .sub-title 一致（雙短線＋中置小字），勿與 --mission 混用 */
|
||||
.slogan-quote--awakening {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -550,8 +561,8 @@ section {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.slogan-quote::before,
|
||||
.slogan-quote::after {
|
||||
.slogan-quote--awakening::before,
|
||||
.slogan-quote--awakening::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
@@ -560,8 +571,9 @@ section {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.slogan-quote__inner {
|
||||
.slogan-quote--awakening .slogan-quote__inner {
|
||||
display: block;
|
||||
flex: 0 1 auto;
|
||||
margin: 0 18px;
|
||||
max-width: 40rem;
|
||||
text-align: center;
|
||||
@@ -573,6 +585,40 @@ section {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* 首頁「成立的初衷」金句：與覺醒款分檔，勿互換 */
|
||||
.slogan-quote--mission {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: min(48rem, 100%);
|
||||
margin: 2rem auto 0;
|
||||
padding: 1.45rem 1.65rem 1.55rem;
|
||||
text-align: center;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.78;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.035em;
|
||||
color: #2f2610;
|
||||
background:
|
||||
linear-gradient(185deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 42%),
|
||||
linear-gradient(168deg, #fffef8 0%, #fff6d2 52%, #fffce8 100%);
|
||||
border: 1px solid rgba(220, 185, 90, 0.42);
|
||||
border-left: 5px solid var(--primary);
|
||||
border-radius: 14px;
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.92) inset,
|
||||
0 12px 32px rgba(35, 28, 0, 0.08);
|
||||
}
|
||||
|
||||
.slogan-quote--mission .slogan-quote__inner {
|
||||
max-width: 44rem;
|
||||
margin: 0 auto;
|
||||
font: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.mission-visual {
|
||||
align-self: start;
|
||||
}
|
||||
@@ -1898,7 +1944,7 @@ body.minister-page .variety-block .intro-text {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
body.minister-page .variety-block .slogan-quote + .intro-text {
|
||||
body.minister-page .variety-block .slogan-quote--awakening + .intro-text {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user