/* 這個檔案是站台頁尾（AJ 標準 Footer）的專用樣式， 負責版權列的配色、字級、漸層分隔線與手機版縮放。 規格來源：halfmemo.com blog（2026-07-20 版），由 /add-footer-only 產生。 所有 class 用 aj- 前綴、變數用 --aj-footer-* 命名， 刻意與專案既有樣式完全隔離，互不影響。 */ /* ── 淺色模式（= blog global.css :root 的同名變數值）── */ :root { --aj-footer-surface: #ffffff; /* blog --color-surface */ --aj-footer-muted: #888888; /* blog --color-text-muted */ } /* ── 深色模式 ── 本專案由 src/main.js 在 掛上 data-theme="dark" 來切換， 所以這裡跟著同一個機制走；不使用 prefers-color-scheme， 避免使用者在深色系統下手動切淺色時，只有 footer 還是深色。 */ :root[data-theme="dark"] { --aj-footer-surface: #1c1d1f; --aj-footer-muted: #9aa0a6; } /* ── Footer 本體 ── 字級基準說明：blog 的根字級是 17px（手機 16px），區塊內尺寸都是 rem。 這裡把基準字級直接設在區塊上（px），內部改用 em， 所以不管專案根字級是多少，算出來的尺寸都跟 blog 一模一樣。 */ .aj-site-footer { width: 100%; /* 防呆：萬一被塞進置中版面，也不會被夾成小方塊 */ margin-top: 4rem; /* 與上方內容留白 */ background-color: var(--aj-footer-surface); font-size: 17px; line-height: 1.75; /* blog body 的行高，footer 繼承同值 */ font-family: "Segoe UI", "Inter", "PingFang TC", "Microsoft JhengHei", "微軟正黑體", "Noto Sans TC", system-ui, -apple-system, sans-serif; transition: background-color 0.2s, color 0.2s; } /* 品牌色漸層分隔線，貼在 footer 上緣 */ .aj-site-footer::before { content: ""; display: block; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgb(26, 122, 212) 25%, rgb(26, 122, 212) 75%, transparent 100% ); } /* 內容容器：置中並限制最大寬度（= blog 的 80rem，17px 基準約 1360px） */ .aj-footer-inner { max-width: 80em; margin: 0 auto; padding: 1em 1.5em; text-align: center; } /* 版權文字 */ .aj-footer-copy { font-size: 0.875em; /* 17px × 0.875 = 14.875px，同 blog */ color: var(--aj-footer-muted); margin: 0; } /* 版權文字裡「半桶水的AI筆記」連到 halfmemo.com： 顏色沿用父層的 muted 色，預設不加底線，滑鼠移過去才顯示底線 */ .aj-footer-link { color: inherit; text-decoration: none; } .aj-footer-link:hover { text-decoration: underline; } /* ── RWD：blog 在 ≤767px 時根字級 17px → 16px，這裡等比縮小 ── */ @media (max-width: 767px) { .aj-site-footer { font-size: 16px; } }