Move more Docs pages to Pug

1 files changed, 267 insertions, 0 deletions

diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
new file mode 100644
index 0000000..47b980a
--- /dev/null
+++ b/docs/src/contents/typography.pug
@@ -0,0 +1,267 @@
+p
+  | Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
+
++docs-subheading('typography-headings', 'Headings')
+
+.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')
+
+.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')
+
+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.
+
+p(lang='ja')
+  u 祇園
+  u 精舎
+  | の鐘の声、諸行無常の響きあり。
+p(lang='ja')
+  del 祇園
+  del 精舎
+  | の鐘の声、諸行無常の響きあり。
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
+      <p class="cjk"><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-Hans" and lang="zh-Hant") targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "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')
+
+.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