Text Here. Link is opacity 50%
Text Here. Link is opacity 50% Clicked Link is opacity 25%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
響應式 12 欄網格與基準單位測試
我們將整個 <article> 容器實作為 12 欄 (12-Column Grid) 排版,寬度為 100%。左右兩側的留空與內容寬度會根據不同的裝置(電腦、平板、手機)自動調整:
- 電腦版 (Desktop >= 1024px):基準單位為 20px。左右留空 3 欄,內容佔中段 6 欄。
- 平板版 (Tablet 768px - 1023px):基準單位為 16px。左右留空 2 欄,內容佔 8 欄。
- 手機版 (Mobile < 768px):基準單位為 8px。左右留空 1 欄,內容佔 10 欄。
Markdown 標題層級預覽 (h1 至 h6)
h1. アセットのダウンロードとライセンスの理解について (5x)
這是 h1 下方的說明段落,與標題的間隔皆依循規格配置。
h2. アセットのダウンロードとライセンスの理解について (4x)
這是 h2 下方的說明段落。
h3. アセットのダウンロードとライセンスの理解について (3x)
這是 h3 下方的說明段落。
h4. アセットのダウンロードとライセンスの理解について (2.5x)
這是 h4 下方的說明段落。
h5. アセットのダウンロードとライセンスの理解について (2x)
這是 h5 下方的說明段落。
2.a h6. アセットのダウンロードとライセンスの理解について (1x, Bold)
這是 h6 下方的說明段落,注意只有 h6 為粗體字。
其它標準 Markdown 元素預覽
引言 blockquote
這是 Markdown 標準引言元素展示。所有的間距、左邊框線條與縮格均由 CSS 變數與 calc() 運算。
代碼區塊 pre & code
1. 預設代碼區塊 (佔中段 6 欄):
article {
--grid-unit: 4px;
--base-unit: calc(var(--grid-unit) * 5); /* Desktop base size 20px */
}
2. 寬版大代碼區塊 (pre.big-code - 比文字大一格,左右多寬出一格,電腦版佔中段 8 欄):
article {
--grid-unit: 4px;
--base-unit: calc(var(--grid-unit) * 5); /* Desktop base size 20px */
}
標準圖片 vs. 寬版大圖 (.big-img) 預覽
以下展示預設大圖片 (佔中段 6 欄) 與客製化寬版大圖 (比文字大一格,左右多寬出一格,佔中段 8 欄) 的排版對比:
1. 預設圖片 (figure)
2. 寬版大圖片 (figure.big-img)