-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathshowcase-noto.html
111 lines (111 loc) · 8.14 KB
/
showcase-noto.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Noto Serif and Noto Sans | Typesettings.css</title>
<link rel="stylesheet" href="src/styles/typesettings.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,900|Noto+Serif+TC:900&display=swap&subset=chinese-traditional');
:root {
--ts-color-heading: darkred;
--ts-color-body: black;
--ts-color-background: ivory;
--ts-color-link: darkgoldenrod;
--ts-font-family-serif: 'Noto Serif TC', serif;
--ts-font-family-sans: 'Noto Sans TC', sans-serif;
--ts-font-family-sans-alt: 'Noto Sans TC', sans-serif;
--ts-font-weight-regular: 400;
--ts-font-weight-bold: 900;
}
</style>
<meta name="description" content="Example article with custom fonts (Noto Serif and Noto Sans) and colors.">
</head>
<body>
<a href="#content">
Skip to content
</a>
<div data-typesettings="indented sans-serif vertical-rl golden">
<nav>
<ul>
<li>
<h1 role="presentation">
<a href="index.html">排版CSS</a> • <a href="showcase.html">展示櫃</a>
</h1>
</li>
<li>
<ul>
<li>
<a href="https://mikemai.net/typesettings/css/typesettings-2.0-min.css" aria-label="Download the Typesettings.css file">下載</a>
</li>
</ul>
</li>
</ul>
</nav>
<main id="content">
<article>
<header>
<h1>
西遊記
</h1>
<h2>
作者：吳承恩
</h2>
<h3>
詩曰：
</h3>
<p>
混沌未分天地亂，茫茫渺渺無人見。<br>
自從盤古破鴻濛，開闢從茲清濁辨。<br>
覆載群生仰至仁，發明萬物皆成善。<br>
欲知造化會元功，須看西遊釋厄傳。
</p>
</header>
<section>
<aside>
<p>
<strong>《西遊記》</strong>是中國明代長篇神話小說，古代白話写成。全書20卷100回。吳承恩根據歷代民間傳說，對傳統題材加以改造。
</p>
</aside>
<p>
蓋聞天地之數，有十二萬九千六百歲為一元。將一元分為十二會，乃子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥之十二支也。每會該一萬八百歲。且就一日而論：子時得陽氣，而丑則雞鳴；寅不通光，而卯則日出；辰時食後，而巳則挨排；日午天中，而未則西蹉；申時晡，而日落酉，戌黃昏，而入定亥。譬於大數，若到戌會之終，則天地昏曚而萬物否矣。再去五千四百歲，交亥會之初，則當黑暗，而兩間人物俱無矣，故曰混沌。又五千四百歲，亥會將終，貞下起元，近子之會，而復逐漸開明。邵康節曰：<q>冬至子之半，天心無改移。一陽初動處，萬物未生時。</q>到此，天始有根。再五千四百歲，正當子會，輕清上騰，有日，有月，有星，有辰。日、月、星、辰，謂之四象。故曰，天開於子。又經五千四百歲，子會將終，近丑之會，而逐漸堅實。《易》曰：<q>大哉乾元！至哉坤元！萬物資生，乃順承天。</q>至此，地始凝結。再五千四百歲，正當丑會，重濁下凝，有水，有火，有山，有石，有土。水、火、山、石、土，謂之五形。故曰，地闢於丑。又經五千四百歲，丑會終而寅會之初，發生萬物。曆曰：<q>天氣下降，地氣上升；天地交合，群物皆生。</q>至此，天清地爽，陰陽交合。再五千四百歲，正當寅會，生人，生獸，生禽，正謂天地人，三才定位。故曰，人生於寅。
</p>
<p>
感盤古開闢，三皇治世，五帝定倫，世界之間，遂分為四大部洲：曰東勝神洲，曰西牛賀洲，曰南贍部洲，曰北俱蘆洲。這部書單表東勝神洲。海外有一國土，名曰傲來國。國近大海，海中有一座名山，喚為花果山。此山乃十洲之祖脈，三島之來龍，自開清濁而立，鴻濛判後而成。真個好山！有詞賦為證。賦曰：
</p>
<blockquote>
<p>
<q>勢鎮汪洋，威寧瑤海。<q>勢鎮汪洋</q>，潮湧銀山魚入穴；威寧瑤海，波翻雪浪蜃離淵。水火方隅高積上，東海之處聳崇巔。丹崖怪石，削壁奇峰。丹崖上，彩鳳雙鳴；削壁前，麒麟獨臥。峰頭時聽錦雞鳴，石窟每觀龍出入。林中有壽鹿仙狐，樹上有靈禽玄鶴。瑤草奇花不謝，青松翠柏長春。仙桃常結果，修竹每留雲。一條澗壑籐蘿密，四面原堤草色新。正是百川會處擎天柱，萬劫無移大地根。</q>
</p>
</blockquote>
<p>
那座山正當頂上，有一塊仙石。其石有三丈六尺五寸高，有二丈四尺圍圓。三丈六尺五寸高，按周天三百六十五度；二丈四尺圍圓，按政曆二十四氣。上有九竅八孔，按九宮八卦。四面更無樹木遮陰，左右倒有芝蘭相襯。蓋自開闢以來，每受天真地秀，日精月華，感之既久，遂有靈通之意。內育仙胞，一日迸裂，產一石卵，似圓毬樣大。因見風，化作一個石猴，五官俱備，四肢皆全。便就學爬學走，拜了四方。目運兩道金光，射沖斗府。驚動高天上聖大慈仁者玉皇大天尊玄穹高上帝，駕座金闕雲宮靈霄寶殿，聚集仙卿，見有金光燄燄，即命千里眼、順風耳開南天門觀看。二將果奉旨出門外，看的真，聽的明。須臾回報道：<q>臣奉旨觀聽金光之處，乃東勝神洲海東傲來小國之界，有一座花果山，山上有一仙石，石產一卵，見風化一石猴，在那裡拜四方，眼運金光，射沖斗府。如今服餌水食，金光將潛息矣。</q>玉帝垂賜恩慈曰：<q>下方之物，乃天地精華所生，不足為異。</q>
</p>
<p>
那猴在山中，卻會行走跳躍，食草木，飲澗泉，採山花，覓樹果；與狼蟲為伴，虎豹為群，獐鹿為友，獼猿為親；夜宿石崖之下，朝遊峰洞之中。真是：<q>山中無甲子，寒盡不知年。</q>
</p>
<p>
一朝天氣炎熱，與群猴避暑，都在松陰之下頑耍。你看他一個個：
</p>
<p>
跳樹攀枝，採花覓果；拋彈子，邷麼兒；跑沙窩，砌寶塔；趕蜻蜓，撲八蠟；參老天，拜菩薩；扯葛籐，編草帓；捉虱子，咬又掐；理毛衣，剔指甲。挨的挨，擦的擦；推的推，壓的壓；扯的扯，拉的拉：青松林下任他頑，綠水澗邊隨洗濯。
</p>
<p>
一群猴子耍了一會，卻去那山澗中洗澡。見那股澗水奔流，真個似滾瓜湧濺。古云：<q>禽有禽言，獸有獸語。</q>眾猴都道：<q>這股水不知是那裡的水。我們今日趕閑無事，順澗邊往上溜頭尋看源流，耍子去耶！</q>喊一聲，都拖男挈女，呼弟呼兄，一齊跑來，順澗爬山，直至源流之處，乃是一股瀑布飛泉。
</p>
<p>
⋮
</p>
<p>
<a href="https://zh.wikisource.org/wiki/%E8%A5%BF%E9%81%8A%E8%A8%98/%E7%AC%AC001%E5%9B%9E" target="_blank">繼續閱讀</a>
</p>
</section>
<section>
<h3>個人定制</h3>
<pre><code>@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,900|Noto+Serif+TC:900&display=swap&subset=chinese-traditional');<br><br>--ts-color-heading: darkred;<br>--ts-color-body: black;<br>--ts-color-background: ivory;<br>--ts-color-link: darkgoldenrod;<br>--ts-font-family-serif: 'Noto Serif TC', serif;<br>--ts-font-family-sans: 'Noto Sans TC', sans-serif;<br>--ts-font-family-sans-alt: 'Noto Sans TC', sans-serif;<br>--ts-font-weight-regular: 400;<br>--ts-font-weight-bold: 900;</code></pre>
</section>
</article>
</main>
</div>
</body>
</html>