Summary Files Commits Branches @commit @diff @stats
path: root / docs / src / contents / typography.pug
diff options
context:
space:
mode:
Commitef6d8056d26fe952891e47660f1cb0d1ed7041f1 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2018-11-08 07:42:33 +0800
Committer
 GitHub <noreply@github.com>
2018-11-08 07:42:33 +0800
Files26e1a053ee953a570e54939ef30c2c89636a6acf /docs/src/contents/typography.pug
Spectre-Dark-Gruvbox-0.5.5.tar
Spectre-Dark-Gruvbox-0.5.5.tar.gz
Spectre-Dark-Gruvbox-0.5.5.zip
Parent0a6c76429b294c26d318479c05736537f3d95abb (diff)
Parenteb7fd9d2538accfe5d291ca93d2ce7dd6e62fefa (diff)
Merge pull request #522 from picturepan2/0.5.5 v0.5.5
0.5.5
1 files changed, 0 insertions, 257 deletions
-rw-r--r--docs/src/contents/typography.pug257
diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
deleted file mode 100644
index 0656f91..0000000
--- a/docs/src/contents/typography.pug
+++ /dev/null
@@ -1,257 +0,0 @@
-p
- | Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
-
-+docs-subheading('typography-headings', 'Headings')
-
-.docs-demo.columns
- .column.col-12
- h1
- | H1 Heading
- small.label 40px
- .column.col-12
- h2
- | H2 Heading
- small.label 32px
- .column.col-12
- h3
- | H3 Heading
- small.label 28px
- .column.col-12
- h4
- | H4 Heading
- small.label 24px
- .column.col-12
- h5
- | H5 Heading
- small.label 20px
- .column.col-12
- h6
- | H6 Heading
- small.label 16px
-
-//- headings
-pre.code(data-lang='HTML')
- code
- :highlight(lang="html")
- <h1>H1 Heading</h1>
- <h1>H1 Heading <small class="label">40px</small></h1>
- <span class="h1">H1 Heading</span>
-
-+docs-subheading('typography-paragraphs', 'Paragraphs')
-
-p
- | Lorem ipsum dolor sit amet, consectetur #[a(href='#typography') adipiscing elit].
- | Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
-p
- | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
-
-//- paragraphs
-pre.code(data-lang='HTML')
- code
- :highlight(lang="html")
- <p>Lorem ipsum dolor sit amet, ...</p>
- <p>...</p>
-
-+docs-subheading('typography-semantic-text', 'Semantic text elements')
-
-.docs-demo.columns
- .column.col-6.col-xs-12
- abbr(title='Internationalization') I18N
- code.ml-2 abbr
- .column.col-6.col-xs-12
- strong Bold
- code.ml-2 strong
- code.ml-2 b
- .column.col-6.col-xs-12
- cite Citation
- code.ml-2 cite
- .column.col-6.col-xs-12
- code Hello World!
- code.ml-2 code
- .column.col-6.col-xs-12
- del Deleted
- code.ml-2 del
- .column.col-6.col-xs-12
- em Emphasis
- code.ml-2 em
- .column.col-6.col-xs-12
- i Italic
- code.ml-2 i
- .column.col-6.col-xs-12
- ins Inserted
- code.ml-2 ins
- .column.col-6.col-xs-12
- kbd Ctrl + S
- code.ml-2 kbd
- .column.col-6.col-xs-12
- mark Highlighted
- code.ml-2 mark
- .column.col-6.col-xs-12
- ruby
- | 漢
- rt kan
- | 字
- rt ji
- code.ml-2 ruby
- .column.col-6.col-xs-12
- s Strikethrough
- code.ml-2 s
- .column.col-6.col-xs-12
- samp Sample
- code.ml-2 samp
- .column.col-6.col-xs-12
- | Text
- sub Subscripted
- code.ml-2 sub
- .column.col-6.col-xs-12
- | Text
- sup Superscripted
- code.ml-2 sup
- .column.col-6.col-xs-12
- time 20:00
- code.ml-2 time
- .column.col-6.col-xs-12
- u Underline
- code.ml-2 u
- .column.col-6.col-xs-12
- var x
- | =
- var y
- | + 2
- code.ml-2 var
-
-+docs-subheading('typography-east-asian', 'Optimized for East Asian fonts')
-
-.docs-demo.columns
- .column
- p.h5
- | #[small(lang='zh-Hans') 你好], #[small(lang='ja') こんにちは], #[small(lang='ko') 안녕하세요]
- p.h6 Chinese (Simplified)
- p(lang='zh-Hans') 革命不是请客吃饭,不是做文章,不是绘画绣花,不能那样雅致,那样从容不迫,“文质彬彬”,那样“温良恭俭让”。革命就是暴动,是一个阶级推翻一个阶级的暴烈的行动。
- p.h6 Chinese (Tranditional)
- p(lang='zh-Hant')
- | 山不在高,有仙則名;水不在深,有龍則靈。斯是陋室,惟吾德馨。苔痕上階綠,草色入簾青;談笑有鴻儒,往來無白丁。可以調素琴,閱金經。無絲竹之亂耳,無案牘之勞形。南陽諸葛廬,西蜀子雲亭。孔子云:「何陋之有?」
- p.h6 Japanese
- p(lang='ja')
- | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。
- p.h6 Korean
- p(lang='ko')
- | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
-
-p
- | Use the #[code lang] attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
-
-pre.code(data-lang='HTML')
- code
- :highlight(lang="html")
- <p lang="zh-Hans">革命不是请客吃饭,不是做文章……</p>
- <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
- <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
-
-p
- | And you can use the #[code cjk] class or the #[code lang] attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
-
-.docs-demo.columns
- .column
- p(lang='ja').
- <u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。
- p(lang='ja').
- <del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。
-
-pre.code(data-lang='HTML')
- code
- :highlight(lang="html")
- <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
- <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
-
-+docs-subheading('typography-fonts', 'Fonts')
-
-p
- | Spectre sets the most common and best #[code font-family] for each OS with fallback support in old systems.
- | There are also fonts targeted East Asian typography.
-
-pre.code
- code
- :highlight(lang="scss")
- /* Western typography targeted */
- font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
- /* Monospace typography targeted */
- font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
-
- /* Chinese (lang="zh" and lang="zh-Hans") targeted */
- font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
- /* Chinese (lang="zh-Hant") targeted */
- font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
- /* Japanese (lang="ja") targeted */
- font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
- /* Korean (lang="ko") targeted */
- font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
-
-+docs-subheading('typography-blockquote', 'Blockquote')
-
-blockquote
- p
- | The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
- cite - Bill Gates
-
-pre.code(data-lang='HTML')
- code
- :highlight(lang="html")
- <blockquote>
- <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
- <cite>- Bill Gates</cite>
- </blockquote>
-
-+docs-subheading('typography-lists', 'Lists')
-
-.docs-demo.columns
- .column.col-4.col-xs-12
- ul.list
- li list item 1
- li
- | list item 2
- ul
- li list item 2.1
- li list item 2.2
- li list item 2.3
- li list item 3
- .column.col-4.col-xs-12
- ol.list
- li list item 1
- li
- | list item 2
- ol
- li list item 2.1
- li list item 2.2
- li list item 2.3
- li list item 3
- .column.col-4.col-xs-12
- dl.list
- dt description list term 1
- dd description list description 1
- dt description list term 2
- dd description list description 2
- dt description list term 3
- dd description list description 3
-
-pre.code(data-lang='HTML')
- code
- :highlight(lang="html")
- <!-- unordered list -->
- <ul>
- <li>list item 1</li>
- <li>list item 2
- <ul>
- <li>list item 2.1</li>
- <li>list item 2.2</li>
- <li>list item 2.3</li>
- </ul>
- </li>
- <li>list item 3</li>
- </ul>
-
- <!-- description list -->
- <dl>
- <dt>description list term</dt>
- <dd>description list description</dd>
- </dl> \ No newline at end of file