citrine
Version:
A typography library for stylus to make working with vertical rhythm a little bit easier (comes with a nice set of defaults too !).
139 lines (113 loc) • 5.47 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Citrine Typography library demo</title>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<header>
<h1>Citrine Typography</h1>
</header>
<main>
<h3>Headings</h3>
<h1>Ipsum veniam cupiditate!</h1>
<h2>Ipsum veniam cupiditate!</h2>
<h3>Ipsum veniam cupiditate!</h3>
<h4>Ipsum veniam cupiditate!</h4>
<h5>Ipsum veniam cupiditate!</h5>
<h6>Ipsum veniam cupiditate!</h6>
<h3>Paragraphs</h3>
<p>Amet <a href="http://www.frostwind.me">quo culpa quis dicta</a> corporis totam voluptatum nesciunt. Impedit labore nostrum esse velit eligendi error! Perferendis ducimus illo deserunt mollitia debitis. Sint nemo
explicabo cumque illum qui fugiat, nostrum. Quas itaque id tempore magni dolorem quod quo voluptate tenetur non, libero. Accusantium sequi dolorem consequatur odit aut quae!</p>
<p>Dolor voluptatum in necessitatibus animi temporibus! Sint ex labore eius ipsum iusto sit? Hic dignissimos unde dolor eius at facilis. Culpa quidem officia nemo doloribus harum. Atque
inventore fuga est harum cum sequi sequi architecto alias ipsum error? Quod et a ab corporis esse. Error odit dignissimos unde sed consectetur. Quos voluptates illo suscipit qui quo sint!
Fuga corporis illum cupiditate doloribus suscipit. Veritatis perferendis vitae veritatis officia dignissimos. Voluptate laudantium et doloribus eaque voluptatibus! Placeat molestias excepturi
dolorem cumque in quisquam quae. Ipsum ipsum velit excepturi possimus obcaecati? Voluptatibus amet dolor illo consectetur optio voluptatibus quo quos, sunt, quasi!</p>
<p>Consectetur quaerat accusantium magni nemo saepe facilis? Facere nemo ipsam quia odio dolorem iste labore id suscipit officia tenetur ipsam error placeat. Nisi ipsa harum impedit praesentium
saepe itaque. Adipisci quidem mollitia possimus assumenda voluptates at! Facilis distinctio blanditiis ipsam similique adipisci. Facere cupiditate corrupti rerum possimus sunt. Reiciendis
beatae consequuntur cupiditate labore sunt accusantium. Rerum provident in soluta beatae reiciendis minima! Cum nulla expedita molestiae labore possimus delectus debitis.</p>
<h3>Small text and bold text</h3>
<p>Elit <strong>rem atque dolore</strong> <small>unde laborum molestias</small>.</p>
<h3>Italic text</h3>
<p>Elit <em>rem atque dolore</em>.</p>
<h3>Deleted text</h3>
<p>Elit <s>rem atque dolore</s>.</p>
<h3>Unordered lists</h3>
<ul>
<li>Elit numquam vero laudantium exercitationem.</li>
<li>Consectetur minus odio tempore obcaecati doloribus!</li>
<li>Ipsum illum atque mollitia temporibus dicta labore dolore ea alias.</li>
<li>Amet debitis nam optio aliquid dolores iusto reiciendis beatae ullam, ad! Sit quaerat illum consequuntur.</li>
</ul>
<h3>Nested unordered lists</h3>
<ul>
<li>Sit earum ipsam aspernatur obcaecati consequatur minima nostrum. Non sunt.</li>
<li>Lorem atque accusantium!
<ul>
<li>Elit qui aspernatur!</li>
<li>Dolor nemo rerum voluptatum commodi?</li>
</ul>
</li>
<li>Sit neque fugiat animi deserunt cum provident nulla voluptas vitae.</li>
<li>Ipsum dolorem animi non aut.
<ul>
<li>Elit qui aspernatur!</li>
<li>Dolor nemo rerum voluptatum commodi?</li>
</ul>
</li>
<li>Adipisicing elit tenetur aspernatur?
<ul>
<li>Elit qui aspernatur!</li>
<li>Dolor nemo rerum voluptatum commodi?</li>
</ul>
</li>
</ul>
<h3>Ordered lists</h3>
<ol>
<li>Elit numquam vero laudantium exercitationem.</li>
<li>Consectetur minus odio tempore obcaecati doloribus!</li>
<li>Ipsum illum atque mollitia temporibus dicta labore dolore ea alias.</li>
<li>Amet debitis nam optio aliquid dolores iusto reiciendis beatae ullam, ad! Sit quaerat illum consequuntur.</li>
</ol>
<h3>Nested ordered lists</h3>
<ol>
<li>Sit earum ipsam aspernatur obcaecati consequatur minima nostrum. Non sunt.</li>
<li>Lorem eum earum?
<ol>
<li>Elit qui aspernatur!</li>
<li>Dolor nemo rerum voluptatum commodi?</li>
</ol>
</li>
<li>Sit neque fugiat animi deserunt cum provident nulla voluptas vitae.</li>
<li>Elit alias animi magni?
<ol>
<li>Elit qui aspernatur!</li>
<li>Dolor nemo rerum voluptatum commodi?</li>
</ol>
</li>
<li>Ipsum dicta asperiores.
<ol>
<li>Elit qui aspernatur!</li>
<li>Dolor nemo rerum voluptatum commodi?</li>
</ol>
</li>
</ol>
<h3>Definition lists</h3>
<dl>
<dt>Si?</dt>
<dd>Sit velit distinctio deserunt sint nulla.</dd>
<dt>Consectetur re.</dt>
<dd>Lorem aspernatur nobis tempore tenetur.</dd>
<dt>Sit</dt>
<dd>Lorem repellendus tenetur laborum doloremque.</dd>
</dl>
<h3>Block quotes</h3>
<blockquote>
<p>Lorem et aliquam saepe quasi possimus! Quibusdam vitae rem tempore officiis repudiandae quo totam rerum.</p>
<footer>Friedrich Nietzsche in <cite title="Thus Spoke Zarathustra">Thus Spoke Zarathustra</cite></footer>
</blockquote>
</main>
</body>
</html>