-
Notifications
You must be signed in to change notification settings - Fork 89
/
index.html
executable file
·243 lines (181 loc) · 14.4 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sassline</title>
<link rel="stylesheet" href="/assets/css/style.min.css">
<link rel="shortcut icon" href="/assets/img/favicon.ico">
<script src="/assets/js/responsive-nav.min.js"></script>
<script src="https://use.typekit.net/xxx1xxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<header class="global-header">
<h1 class="global-header__logo"><a href="http://sassline.com">Sassline</a></h1>
<nav class="main-nav">
<ul class="main-nav__list">
<li><span id="gridtoggle">Toggle Grid</span></li
><li><a href="https://github.com/designbyjake/sassline">Github</a></li>
</ul>
</nav>
</header>
<section id="baseline">
<div class="section typeset">
<div class="single-measure">
<h1>Lorem ipsum dolor sit amet</h1>
<p class="caption">Labore reprehenderit corporis ullam distinctio ex.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
<ol>
<li>Perferendis tempor</li>
<li>Minim eiusmod </li>
<li>Tempor</li>
<li>Minus quia sint</li>
</ol>
<h2>Voluptates mollitia quod tempore laboris commodi</h2>
<p>Proident dolores corrupti consequatur voluptatibus labore commodi quos. <b>Incidunt mollitia</b> tempora assumenda laborum voluptate accusamus dolore optio incididunt. Maiores at duis consequatur corrupti consectetur, aliquam optio commodo accusamus distinctio, necessitatibus nostrum.</p>
<p>Optio, nesciunt, quo, fugiat, blanditiis at quas excepturi quae maiores vel corrupti voluptate cupiditate nemo! In, eius quidem harum quibusdam ratione non. Iste, deleniti, fugit, voluptas aperiam qui adipisci provident ab accusantium possimus eveniet voluptate consectetur!</p>
<h2>Repellat optio</h2>
<h3>Ad perferendis omnis</h3>
<p>Pariatur animi quis. Dolorem cupiditate <a href="#">praesentium duis</a> iusto corrupti nobis nostrud, exercitation consequatur. Nulla minim dignissimos reprehenderit voluptatem. Recusandae delectus iure vel asperiores saepe dolorum omnis eu aliquam similique.</p>
<blockquote><p>Fuga rerum laboris officia cupidatat, excepteur aliquid ut quis facere, cumque harum optio dignissimos. Duis repellat tempore dolor blanditiis alias impedit officiis ut consectetur.</p></blockquote>
<pre><code>body {
color: blue;
}</code></pre>
<h4>Quibusdam illum quo</h4>
<p>Quos laboris eos, laborum animi. Ea blanditiis ducimus fugiat officia nostrud consectetur recusandae excepteur. Quis qui maiores distinctio facilis saepe eos.</p>
<h5>Consectetur nobis consequat voluptates eiusmod</h5>
<p>Iure vel nostrud repellendus. <b>Nostrud</b> autem consequatur, provident officiis qui, mollit exercitation. Veniam minus cillum suscipit aliqua, tenetur. Anim mollitia necessitatibus ad quos consectetur voluptatem do <a href="#">corporis</a>.</p>
<ul>
<li>Perferendis tempor</li>
<li>Minim eiusmod </li>
<li>Tempor</li>
<li>Minus quia sint</li>
</ul>
<p>Corporis eligendi minim, enim proident reprehenderit iusto. <i>Reprehenderit</i> commodo commodi, repudiandae voluptas saepe sint libero. Praesentium eius distinctio ullamco vero iusto praesentium eligendi animi. Consectetur dolore vero similique dolore, ut labore omnis.</p>
<h6>Maxime alias anim similique</h6>
<p>Omnis corporis assumenda nisi ullam dolores culpa repellat. Molestias praesentium necessitatibus minus, reiciendis officiis commodo incidunt. Consectetur nostrud odio numquam tenetur.</p>
<hr>
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
<p>Paragraph with <b>bold</b>, <i>italic</i>, <a href="#">link</a> and <code>code</code> styles.</p>
<blockquote><p>Blockquote</p></blockquote>
<p class="caption">Caption text</p>
<ol>
<li>Ordered list element one</li>
<li>Ordered list element two</li>
<li>Ordered list element three</li>
</ol>
<ul>
<li>Unordered list element one</li>
<li>Unordered list element two</li>
<li>Unordered list element three</li>
</ul>
<div class="button-align">
<button>Submit</button>
</div>
</div>
</div>
<div class="section typeset">
<div class="column column--duo">
<h1>Super long title which goes over a couple of lines</h1>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
</div>
<div class="column column--duo">
<h3>A second column</h3>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
</div>
</div>
<div class="section typeset">
<div class="column column--trio">
<h6>Column one</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
</div>
<div class="column column--trio">
<h6>Column two</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
</div>
<div class="column column--trio">
<h6>Column three</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
</div>
</div>
<div class="section typeset">
<div class="column column--quad">
<h6>Column one</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
</div>
<div class="column column--quad">
<h6>Column two</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
</div>
<div class="column column--quad">
<h6>Column three</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
</div>
<div class="column column--quad">
<h6>Column four</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
</div>
</div>
<div class="section typeset">
<div class="column column--main">
<h6>Main column</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
</div>
<div class="column column--sidebar">
<h6>Sidebar</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip.</p>
</div>
</div>
<div class="section typeset">
<div class="column column--sidebar">
<h6>Sidebar</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip.</p>
</div>
<div class="column column--main">
<h6>Main column</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
</div>
</div>
<div class="section typeset">
<div class="column column--main column--right">
<h6>Main column</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p class="caption sidenote">This is an inline caption.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
</div>
</div>
<div class="section typeset">
<div class="column column--main column--left">
<h6>Main column</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p class="caption sidenote">This is a long inline caption that will probably go across a couple of lines.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
</div>
</div>
</section>
<footer class="global-footer">
<p>Hodor</p>
</footer>
<script>
var navigation = responsiveNav(".main-nav");
// Grid toggle
function changeClass() {
if ( document.getElementById("baseline").className.match(/(?:^|\s)show-grid(?!\S)/) ) {
document.getElementById("baseline").className = document.getElementById("baseline").className.replace( /(?:^|\s)show-grid(?!\S)/g , '' )
} else { document.getElementById("baseline").className += " show-grid"; }
}
document.getElementById("gridtoggle").addEventListener( 'click' , changeClass );
</script>
</body>
</html>