extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'typography'
  - var parent = 'elements'
  - var title = 'Typography - Elements - Spectre.css CSS Framework'
  - var description = 'Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('typography', 'Typography')
    include ../_layout/_ad-g.pug

    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
      | Add the #[code lang] attribute to the #{'<html>'} element or use the class #[code lang-zh], #[code lang-zh-hans], #[code lang-zh-hant], #[code lang-ja] or #[code lang-ko] to have better Asian CJK (Chinese, Japanese and Korean) font support.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <html lang="zh-Hans">……</html>

          <p class="lang-zh-hans">革命不是请客吃饭，不是做文章……</p>
          <p class="lang-ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
          <p class="lang-ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>

    p
      | And you can use the #[code lang-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="lang-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>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug