-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathindex.html
45 lines (45 loc) · 3.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<!--[if lt IE 9]><html class="no-js ie" lang="en"><![endif]-->
<!--[if IE 9]><html class="no-js ie9" lang="en"><![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Scale.css</title>
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/scale.css">
<script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<article>
<h1>Typography</h1>
<h2 class="dropcap">I have id dolor id nibh ultricies vehicula ut id elitsed diam eget risus varius blandit sit amet non magna cras mattis consectetur purus sit amet fermentum.</h2>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere—erat a ante venenatis dapibus—posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur.</p>
<p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. <a href="#" rel="external">Cras mattis</a> consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget. Praesent’s commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget.</p>
<ol>
<li>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</li>
<li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
<li>Fusce dapibus tellus ac cursus commodo.</li>
</ol>
<h3>Eget urna mollis</h3>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere—erat a ante venenatis dapibus—posuere <em>velit aliquet</em>. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur.</p>
<blockquote>
<p>Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna vel scelerisque. <sup>[<a href="#cite1">1</a>]</sup></p>
</blockquote>
<pre><code>body {
font: 75%/1.5em "PTSerifCustom", Georgia, serif;
max-width: 40.49984em;
color: rgb(0,0,0);
margin: 0 auto;
padding: 1em;
}</code></pre>
<h3>Scale.css template</h3>
<ul>
<li>Read the original post from <a href="https://arie.ls/2012/on-typography/" class="highlight" rel="external">arie.ls</a>.</li>
<li>Get the template from <a href="https://github.com/arielsalminen/Scale" class="highlight" rel="external">GitHub</a>.</li>
<li>If you have questions <a href="https://social.design.systems/@ariel" class="highlight" rel="external">send me a message</a>.</li>
</ul>
</article>
<script src="js/scripts.js"></script>
</body>
</html>