/* anoni.net 新聞導讀。規則見 SPEC.md「頁面」一節。 樣式從手機寬度開始寫，桌機再放寬。不載入任何站外資源，字型只用系統字型。 --c-* 是實際使用的顏色，build.py --check 會檢查這幾組文字與背景的對比度。 版面的兩個主軸： - 列表是依發布日分組的時間軸，日期在捲動時停在頂端（position: sticky，不需要 JS） - 文章頁把原文與導讀分成兩條，桌機時原文條在右欄，手機時在內文上方 標題用明體、字色用品牌墨色 cyan-900，跟文件站的黑體黑字分開。 */ :root { /* 品牌色票，照抄文件站 docs/zh-TW/stylesheets/extra.css，不自己調 */ --brand-cyan-50: #e0f4ff; --brand-cyan-100: #b3e3ff; --brand-cyan-200: #80d1ff; --brand-cyan-300: #4dbfff; --brand-cyan-400: #26b3ff; --brand-cyan-500: #00aeff; --brand-cyan-600: #009ee6; --brand-cyan-700: #0089bf; --brand-cyan-800: #006d99; --brand-cyan-900: #003e57; --c-bg: #ffffff; --c-surface: #eef6f9; --c-border: #cfe0e7; --c-text: #1d2b31; --c-muted: #52646b; --c-headline: var(--brand-cyan-900); --c-link: var(--brand-cyan-800); --c-rule: var(--brand-cyan-500); --c-header-bg: var(--brand-cyan-900); --c-header-text: #ffffff; --c-header-link: var(--brand-cyan-50); --font-sans: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --font-serif: "Noto Serif TC", "Noto Serif CJK TC", "Source Han Serif TC", "Songti TC", "PMingLiU", "MingLiU", serif; --touch: 2.75rem; /* 內文欄。扣掉左右留白約 40rem，桌機 18px 的字級下一行大約 36 個中文字 */ --measure: 42rem; /* 列表的時間軸與文章頁的原文條需要更寬的外框 */ --frame: 64rem; } /* 依整頁的語系換字型，只看 ，頁面裡標了 lang 的原文標題不受影響。簡體頁先找簡體字型， 避免用正體字型的字形顯示簡體字。英文頁的標題用西文襯線體，中文字型排在後面備用 */ html:lang(zh-Hans), .not-found:lang(zh-Hans) { --font-sans: system-ui, -apple-system, "Segoe UI", "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-serif: "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "SimSun", serif; } html:lang(en) { --font-serif: Georgia, "Times New Roman", "Noto Serif", "Noto Serif TC", "Songti TC", serif; } /* 中文標題的字距拉開是為了方塊字的節奏，放在拉丁字母上會散開 */ html:lang(en) .masthead__title, html:lang(en) .site-header__product { letter-spacing: 0; } /* 404 三種語言各一段，簡體那一段要自己套上面換過的字型 */ .not-found { font-family: var(--font-sans); } @media (prefers-color-scheme: dark) { :root { --c-bg: #0c1b22; --c-surface: #132a34; --c-border: #24414d; --c-text: #e8f9ff; --c-muted: #a3bcc6; --c-headline: var(--brand-cyan-100); --c-link: var(--brand-cyan-300); --c-rule: var(--brand-cyan-600); --c-header-bg: var(--brand-cyan-900); --c-header-text: #ffffff; --c-header-link: var(--brand-cyan-50); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.85; font-variant-numeric: tabular-nums; } a { color: var(--c-link); text-underline-offset: 0.22em; text-decoration-thickness: 1px; } a:focus-visible { outline: 2px solid var(--c-rule); outline-offset: 2px; border-radius: 2px; } p { margin: 0 0 1.1em; } .wrap, .story-wrap, .list-wrap { margin: 0 auto; padding: 1.5rem 1rem 3rem; } .wrap, .story-wrap { max-width: var(--measure); } .list-wrap { max-width: var(--frame); } /* ---------------------------------------------------------------- 頁首與刊頭 */ .site-header { background: var(--c-header-bg); color: var(--c-header-text); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; max-width: var(--frame); margin: 0 auto; padding: 0 1rem; } .site-header a { color: var(--c-header-text); text-decoration: none; } .site-header__inner a { display: inline-flex; align-items: center; min-height: var(--touch); } /* flex 會吞掉標誌與產品名之間的空格，用 gap 補回跟分隔線的距離 */ .site-header__home { gap: 1rem; } .site-header__logo { display: block; height: 1.625rem; width: auto; } .site-header__product { font-family: var(--font-serif); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.08em; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, 0.35); } .site-header a:hover, .site-header a:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; } /* 首頁的刊頭，跟頁首接在同一塊墨色底上 */ .masthead { max-width: var(--frame); margin: 0 auto; padding: 1.75rem 1rem 1.5rem; } .masthead__title { font-family: var(--font-serif); font-size: 2.75rem; font-weight: 900; line-height: 1.1; letter-spacing: 0.12em; margin: 0 0 0.75rem; } /* 標語只在標點後換行，「國際隱私」這類詞組不會被拆到兩行，每行長度再平均分配。 標語裡最長的一段是十個字，320px 也放得下 */ .masthead__tagline { color: var(--c-header-link); max-width: 32em; margin: 0 0 1rem; word-break: keep-all; text-wrap: balance; } .masthead__tagline a { color: var(--c-header-text); text-decoration: underline; text-underline-offset: 0.22em; } /* 刊頭最底下一列：左邊是最後更新，右邊是訂閱。窄螢幕放不下時訂閱換到下一行 */ .masthead__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.25rem 1.5rem; } .masthead__subscribe { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; } .masthead__subscribe a { display: inline-flex; align-items: center; gap: 0.3em; min-height: var(--touch); padding: 0 0.25rem; color: var(--c-header-text); text-decoration: none; text-underline-offset: 0.3em; } .masthead__updated { display: inline-block; margin: 0; padding-top: 0.6rem; border-top: 3px solid var(--c-rule); color: var(--c-header-link); font-size: 0.9375rem; } /* ---------------------------------------------------------------- 列表：頭條與時間軸 */ .list-heading { font-family: var(--font-serif); color: var(--c-headline); font-size: 1.75rem; line-height: 1.35; margin: 0.25rem 0 1.5rem; } /* 焦點：維護者用 front matter 的 pin 指定一篇放在首頁最上方。 同一篇也照樣出現在時間軸自己的日期底下，日期分組不會被拆開 */ .featured { padding-bottom: 1.75rem; margin-bottom: 0.5rem; border-bottom: 3px solid var(--c-headline); } .featured__label { display: inline-block; margin: 0 0 0.75rem; padding-top: 0.4rem; border-top: 3px solid var(--c-rule); color: var(--c-headline); font-size: 1rem; line-height: 1.4; } .featured__image { display: block; width: 100%; height: auto; margin-bottom: 1rem; background: var(--c-surface); } .featured__title { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 700; line-height: 1.35; margin: 0 0 0.75rem; } .featured__title a, .brief__title a { color: var(--c-headline); text-decoration: none; } .featured__title a:hover, .brief__title a:hover, .featured__title a:focus-visible, .brief__title a:focus-visible { text-decoration: underline; } .featured__dek { font-size: 1.125rem; margin-bottom: 0.75rem; } .featured__meta { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; color: var(--c-muted); font-size: 0.9375rem; } .day { border-top: 1px solid var(--c-border); } /* 焦點底下已經有一條粗線，緊接的第一天不再疊一條細線 */ .featured + .day { border-top: 0; } /* 日期標題在捲動時停在頂端，讀者隨時知道自己讀到哪一天 */ .day__date { position: sticky; top: 0; z-index: 1; margin: 0; padding: 0.6rem 0; background: var(--c-bg); color: var(--c-headline); font-size: 1rem; line-height: 1.4; } .day__date time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; } .day__md { font-size: 1.25rem; font-weight: 700; } .day__meta { color: var(--c-muted); font-size: 0.875rem; font-weight: 400; } .brief { padding: 0.5rem 0 1.25rem; } .brief + .brief { border-top: 1px dashed var(--c-border); padding-top: 1rem; } .brief__title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; line-height: 1.45; margin: 0 0 0.4rem; } .brief__dek { margin: 0 0 0.35rem; } .brief__source { margin: 0; color: var(--c-muted); font-size: 0.875rem; } .empty { padding: 2rem 0; font-size: 1.125rem; } /* ---------------------------------------------------------------- 文章頁 */ .story__date { margin: 0 0 0.5rem; color: var(--c-muted); font-size: 0.9375rem; } .story__title { font-family: var(--font-serif); color: var(--c-headline); font-size: 1.875rem; font-weight: 700; line-height: 1.35; margin: 0 0 0.75rem; } .story__dek { font-size: 1.1875rem; line-height: 1.7; margin-bottom: 1rem; } .story__byline { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding-bottom: 1.25rem; border-bottom: 3px solid var(--c-headline); color: var(--c-muted); font-size: 0.9375rem; } /* 原文清單：外文原文的標題、出處與日期。手機放在文末，桌機移到右欄。 頂端署名旁有一行出處連到這裡 */ .source-slip { margin: 2rem 0 1.5rem; scroll-margin-top: 1rem; padding: 1rem 1rem 0.25rem; background: var(--c-surface); border-top: 3px solid var(--c-rule); font-size: 0.9375rem; line-height: 1.6; } .source-slip__heading { margin: 0 0 0.5rem; color: var(--c-headline); font-size: 1rem; } .source-slip__item { padding-bottom: 0.75rem; } .source-slip__item + .source-slip__item { border-top: 1px solid var(--c-border); padding-top: 0.75rem; } .source-slip__title { margin: 0 0 0.35rem; font-weight: 600; } .source-slip__meta { margin: 0; color: var(--c-muted); font-size: 0.875rem; } .source-slip__meta div { display: flex; gap: 0.5rem; } .source-slip__meta dt { flex: none; } .source-slip__meta dd { margin: 0; color: var(--c-text); } .story__body { margin-top: 1.5rem; } /* ---------------------------------------------------------------- 內文 */ /* 原文標題與網址常是一長串英文，沒寫成連結、直接貼在內文裡的網址也一樣， 整段都允許在任何位置斷行，不然手機上會把整頁撐寬 */ .content, .source-slip, .brief__title, .featured__title { overflow-wrap: anywhere; } .content h2 { font-family: var(--font-serif); color: var(--c-headline); font-size: 1.375rem; line-height: 1.45; margin: 2.25rem 0 0.75rem; } .content h3 { color: var(--c-headline); font-size: 1.125rem; margin: 1.75rem 0 0.5rem; } /* 表格改成 display: block 才能自己捲動，代價是欄寬會被壓到最小，一欄只剩一個字寬。 每欄給最小寬度，放不下時讓表格在自己的範圍內橫向捲動 */ .content table, .content pre { display: block; max-width: 100%; overflow-x: auto; } .content table { border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.9375rem; line-height: 1.6; } .content th, .content td { min-width: 6em; border-bottom: 1px solid var(--c-border); padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; vertical-align: top; overflow-wrap: normal; } .content th { color: var(--c-headline); border-bottom: 2px solid var(--c-headline); } /* 手機上畫面外的欄位如果照樣換行，會把每一列撐高，看起來像一片空白。 窄螢幕改成不換行，讀者左右滑動看表格 */ @media (max-width: 47.99em) { .content th, .content td { white-space: nowrap; } } .content pre { background: var(--c-surface); padding: 0.75rem 1rem; line-height: 1.5; } .content code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.9em; } /* 圖片最寬到內文欄，寬高由建置程式補上，載入時版面不跳動 */ .content figure { margin: 1.75rem 0; } .content figure img { display: block; max-width: 100%; height: auto; background: var(--c-surface); } .content figcaption { margin-top: 0.5rem; color: var(--c-muted); font-size: 0.875rem; line-height: 1.6; } .content blockquote { margin: 0 0 1.1em; padding-left: 1rem; border-left: 3px solid var(--c-rule); color: var(--c-muted); } /* 署名下方列出另外兩個語系的同一篇。有這一行時，署名下方的粗線移到這一行 */ .story__byline:not(:last-child) { padding-bottom: 0.25rem; border-bottom: 0; } .story__langs { margin: 0; padding-bottom: 1.25rem; border-bottom: 3px solid var(--c-headline); color: var(--c-muted); font-size: 0.9375rem; } /* 語言名稱夾在句子裡，跟訂閱提示一樣只加上下的留白放大觸控範圍 */ .story__langs a, .site-footer__langs a { display: inline-block; padding: 0.375rem 0; } /* 文章頁最後的訂閱提示 */ .subscribe { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--c-border); } /* 連結夾在句子裡，只加上下的留白放大觸控範圍，左右不留，頓號才不會被隔開 */ .subscribe a { display: inline-block; padding: 0.5rem 0; } .subscribe + .pager { margin-top: 0; padding-top: 0; border-top: 0; } /* ---------------------------------------------------------------- 圖示 */ /* templates/icons/ 內嵌的 SVG，大小跟字級、顏色跟文字。 圖示跟文字之間的距離靠 HTML 裡的空格，閱讀器模式、複製文字或 CSS 沒載入時一樣分得開。 flex 版面會吞掉空白字元，那幾處（刊頭與頁尾的連結）另外用 gap 補回同樣的距離 */ .icon { display: inline-block; flex: none; width: 1.1em; height: 1.1em; vertical-align: -0.2em; position: relative; } /* 外框對齊之後，中文與英文字母的筆畫重心仍比圖示低（放大四倍截圖量筆畫範圍的結果）。 行內文字裡偏高約 1.3px，頁尾的 flex 連結偏高約 0.5px，各自往下移補回。 刊頭與前後篇本來就在 ±0.5px 內，不動 */ .subscribe .icon, .story__sources .icon, .story__langs .icon, .site-footer__langs .icon { top: 0.08em; } /* 行內文字裡的連結，圖示與文字之間的空格也會畫到底線，底線改畫在文字的 span 上 */ .subscribe a, .story__sources a { text-decoration: none; } .subscribe a > span, .story__sources a > span { text-decoration: underline; text-underline-offset: 0.22em; } .site-footer__links .icon { top: 0.03em; } /* ---------------------------------------------------------------- 分頁與頁尾 */ /* 文章頁的前後篇：手機上下排，桌機較新在左、較舊在右，「所有文章」自成一列 */ /* 跟下方通用的 .pager 同一個權重會被它的 display: flex 蓋掉，所以寫成兩個 class */ .pager.pager--story { display: grid; grid-template-columns: 1fr; gap: 0.25rem 1.5rem; } .pager .pager__item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; padding: 0.5rem 0; text-decoration: none; } .pager__label { color: var(--c-muted); font-size: 0.875rem; } .pager__title { font-family: var(--font-serif); color: var(--c-headline); font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; } .pager__item:hover .pager__title, .pager__item:focus-visible .pager__title { text-decoration: underline; } .pager--story .pager__all { justify-self: start; padding: 0; } @media (min-width: 48em) { .pager.pager--story { grid-template-columns: 1fr 1fr; } .pager .pager__item--older { grid-column: 2; align-items: flex-end; text-align: right; } .pager--story .pager__all { grid-column: 1 / -1; } } .pager { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--c-border); } .pager a, /* 獨立成列的導覽連結：刊頭與頁尾的連結、所有文章、列表頁的翻頁。排成一列又帶著圖示， 不靠底線也看得出能點，平常不畫，滑過或鍵盤選到時才出現，跟文章標題的做法一致。 夾在句子裡的連結（內文、原文、訂閱行、署名旁的原文、頁尾說明）維持底線。 前後篇整塊是一個連結，底線只畫在標題上，另外處理 */ .site-footer__links a, .pager a:not(.pager__item) { text-decoration: none; } .masthead__subscribe a:hover, .masthead__subscribe a:focus-visible, .site-footer__links a:hover, .site-footer__links a:focus-visible, .pager a:not(.pager__item):hover, .pager a:not(.pager__item):focus-visible { text-decoration: underline; } .site-footer__links a { display: inline-flex; align-items: center; gap: 0.3em; min-height: var(--touch); padding: 0 0.25rem; } .site-footer { border-top: 3px solid var(--c-headline); color: var(--c-muted); font-size: 0.9375rem; line-height: 1.6; } /* 頁尾的說明文字是短短的附註，不用內文的行高與段距 */ .site-footer p { margin: 0 0 0.5rem; } .site-footer .wrap { max-width: var(--frame); padding-top: 1rem; padding-bottom: 2rem; } /* 連結高度維持觸控範圍。四個連結加上圖示約需 413px，手機放不下一行， 窄螢幕排成兩列兩欄，避免最後一個單獨掉到下一行，30em 以上排成一行。 連結左右各有 0.25rem 的留白，整列往左移同樣的距離，跟下面的文字對齊 */ .site-footer__links { display: grid; /* 右欄可以縮，英文的「Newsletter (in Chinese)」在 320px 放不下一行時在格子裡換行 */ grid-template-columns: max-content minmax(0, max-content); gap: 0 1rem; margin: 0 0 0.25rem -0.25rem; } @media (min-width: 30em) { .site-footer__links { display: flex; flex-wrap: wrap; gap: 0 0.75rem; } } /* ---------------------------------------------------------------- 寬螢幕 */ @media (min-width: 48em) { body { font-size: 1.125rem; } .masthead { padding: 2.5rem 1rem 2rem; } .masthead__title { font-size: 4rem; } .featured__title { font-size: 2.25rem; } /* 有圖時文字在左、圖在右，圖約佔三分之一 */ .featured--image { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "label label" "text image"; gap: 0 2rem; } .featured--image .featured__label { grid-area: label; justify-self: start; } .featured--image .featured__image { grid-area: image; margin-bottom: 0; } .featured--image .featured__text { grid-area: text; } .story__title { font-size: 2.375rem; } /* 時間軸：日期在左欄，停在頂端跟著捲動 */ .day { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0 2rem; } .day__date { align-self: start; top: 1rem; padding-top: 1.1rem; } .day__date time { flex-direction: column; gap: 0.2rem; } .day__md { font-size: 1.5rem; } .day__briefs { padding-top: 0.75rem; max-width: var(--measure); } } @media (min-width: 64em) { /* 文章頁：導讀在左、原文條在右，兩條並排 */ .story-wrap { max-width: var(--frame); } .story { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; grid-template-areas: "head head" "body slip"; gap: 0 3rem; } .story__head { grid-area: head; max-width: 48rem; } .story__body { grid-area: body; max-width: 40rem; } /* 原文多的時候區塊會比畫面高，停在頂端就看不到下半部，超過畫面高度改在區塊內捲動 */ .source-slip { grid-area: slip; align-self: start; margin-top: 1.5rem; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; } .story ~ .subscribe, .story ~ .pager { max-width: 40rem; } }