diff options
1 files changed, 0 insertions, 257 deletions
| -rw-r--r-- | docs/src/contents/typography.pug | 257 |
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 |