-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
380 lines (346 loc) · 23.2 KB
/
index.html
File metadata and controls
380 lines (346 loc) · 23.2 KB
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
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel='stylesheet' href='css/style.css'>
<title>Blog</title>
</head>
<body>
<div class="blog">
<div class="container">
<main class="wrapper">
<p id='maxHeightDiv'></p>
<aside class="sidebar">
<h1 class="logo">my blog</h1>
<h2 class="section-title">All posts</h2>
<ul class="list titles">
</ul>
<h2 class="section-title">Tags</h2>
<ul class="list tags">
</ul>
<h2 class="section-title">Authors</h2>
<ul class="list authors">
</ul>
</aside>
<section class="posts">
<article class="post active" id="article-1" data-tags="cat cactus scissors sky" data-author='Marion Berry'>
<div class="post-img"> <img
src='https://images.pexels.com/photos/707676/pexels-photo-707676.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt='photo-1' >
</div>
<div class='post-inner'>
<h3 class="post-title">Article 1</h3>
<p class="post-author">by </p>
<div class="post-content">
<p>Duis non dolor efficitur erat interdum fringilla a lobortis dolor. Aenean in massa
viverra, pretium augue et, imperdiet diam. Proin varius vitae lectus ut suscipit.
Etiam
metus lacus, molestie at ante eget, gravida tristique metus. Morbi finibus elit mi,
ut
aliquam libero tempor eu.</p>
<p>Curabitur a arcu ut nunc ornare tempor. Vestibulum et augue purus. Sed mattis auctor
iaculis. Duis placerat tempus nisl, et commodo sem varius sed. Ut ac ultrices leo.
Aliquam efficitur augue a scelerisque lacinia. Donec sit amet justo lacus.</p>
<p>Duis tincidunt tellus non lorem molestie lobortis. Ut nec mauris consectetur,
convallis
nisl vel, venenatis magna. Sed efficitur egestas purus, eu fermentum leo sodales in.
</p>
</div>
<div class="post-tags">
<p><strong>Tags:</strong></p>
<ul class="list list-horizontal">
</ul>
</div>
</div>
</article>
<article class="post" id="article-2" data-tags="paper rock scissors sky" data-author='Theo Tabby'>
<div class="post-img"> <img
src='https://images.pexels.com/photos/962312/pexels-photo-962312.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt='photo-2'>
</div>
<div class='post-inner'>
<h3 class="post-title">Article 2</h3>
<p class="post-author">by</p>
<div class="post-content">
<p>Phasellus sollicitudin, arcu vel iaculis ullamcorper, quam leo viverra orci, et
faucibus
quam sapien vel est. Maecenas ac suscipit elit. Nullam interdum, lorem vitae
venenatis
pulvinar, ex dui malesuada nunc, tempus cursus enim metus vel nulla.</p>
<p>Integer hendrerit, eros id efficitur dapibus, ante arcu ullamcorper orci, a iaculis
felis
turpis at purus. Quisque sodales posuere sapien vel consectetur. Duis dui urna,
commodo
non ante nec, mattis dictum enim. Donec aliquam erat sed diam lobortis, vel gravida
lacus laoreet. Phasellus pretium maximus mi, eu posuere justo suscipit vel.</p>
<p>Nam magna nisl, varius in malesuada vitae, facilisis vel metus. Proin rhoncus euismod
leo
dictum lobortis. Suspendisse non ante sapien.</p>
</div>
<div class="post-tags">
<p><strong>Tags:</strong></p>
<ul class="list list-horizontal">
</ul>
</div>
</div>
</article>
<article class="post" id="article-3" data-tags="cat dog rabbit" data-author='Marion Berry'>
<div class="post-img"> <img
src='https://images.pexels.com/photos/34435/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt='photo-3'>
</div>
<div class='post-inner'>
<h3 class="post-title">Article 3</h3>
<p class="post-author">by</p>
<div class="post-content">
<p>Mauris vel pellentesque turpis, ac sodales nisl. Quisque iaculis mi velit, ut
convallis
tellus accumsan a. Quisque iaculis, nisi et dignissim tincidunt, nisl eros euismod
nulla, finibus laoreet erat enim posuere elit.</p>
<p>Aenean at semper urna. Duis vel sapien molestie, egestas diam consequat, molestie
nulla.
Praesent a malesuada metus. Praesent et tempus leo.</p>
<p>Mauris in eleifend neque, vitae eleifend velit. Maecenas purus est, bibendum eget
imperdiet id, dictum sed ante. Aenean a magna et eros sagittis aliquet.</p>
</div>
<div class="post-tags">
<p><strong>Tags:</strong></p>
<ul class="list list-horizontal">
</ul>
</div>
</div>
</article>
<article class="post" id="article-4" data-tags="flower cactus rose sky" data-author='Kitty Toebean'>
<div class="post-img"> <img
src='https://images.pexels.com/photos/760728/pexels-photo-760728.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt='photo-4'>
</div>
<div class='post-inner'>
<h3 class="post-title">Article 4</h3>
<p class="post-author">by </p>
<div class="post-content">
<p>Morbi vel cursus nulla, vel varius mauris. Suspendisse sed elit sit amet risus
faucibus
vestibulum ut sit amet purus. Donec orci est, condimentum ut quam quis, scelerisque
fringilla ligula.</p>
<p>Quisque bibendum nisl id quam sagittis, id pretium dolor scelerisque. Suspendisse non
odio nec velit dapibus placerat non a libero.</p>
<p>Vivamus at tristique ex, feugiat sagittis ex. Cras cursus, ipsum et efficitur
commodo,
urna sapien rutrum magna, quis sodales justo ligula eget nunc. In hac habitasse
platea
dictumst.</p>
</div>
<div class="post-tags">
<p><strong>Tags:</strong></p>
<ul class="list list-horizontal">
</ul>
</div>
</div>
</article>
<article class="post" id="article-5" data-tags="cat tiger" data-author='Marion Berry'>
<div class="post-img"> <img
src='https://images.pexels.com/photos/48794/boy-walking-teddy-bear-child-48794.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt='photo-5'>
</div>
<div class='post-inner'>
<h3 class="post-title">Article 5</h3>
<p class="post-author">by </p>
<div class="post-content">
<p>Suspendisse sem eros, euismod condimentum arcu ac, consequat fermentum orci. Nam
convallis lacus nec interdum vestibulum. Vestibulum luctus, quam eu tristique
ornare,
lorem nibh sodales enim, vitae tempor dolor ante vitae tortor.</p>
<p>Duis venenatis metus quis luctus lobortis. In porttitor ipsum eget ligula aliquam
ornare.
Cras malesuada urna id volutpat sodales.</p>
<p>Donec lobortis ultricies turpis, eu viverra magna gravida quis. Fusce sit amet
pretium
nulla. Duis rutrum metus vel libero sodales, pellentesque varius ex pulvinar.</p>
</div>
<div class="post-tags">
<p><strong>Tags:</strong></p>
<ul class="list list-horizontal">
</ul>
</div>
</div>
</article>
<article class="post" id="article-6" data-tags="red cat yellow green" data-author='George Tuxedo'>
<div class="post-img"> <img
src='https://images.pexels.com/photos/416135/pexels-photo-416135.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt='photo-6'>
</div>
<div class='post-inner'>
<h3 class="post-title">Article 6</h3>
<p class="post-author">by </p>
<div class="post-content">
<p>Donec posuere iaculis ante sed hendrerit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque hendrerit neque nec urna tincidunt, quis vehicula dui
vulputate. Morbi est sapien, auctor ut lectus eu, placerat viverra lorem.</p>
<p>Cras consectetur at erat id accumsan. Suspendisse lacinia in nulla quis vulputate.
Nunc
vitae consectetur augue. Nam ut vehicula mi. Aliquam tristique, purus in hendrerit
porta, elit lectus finibus mi, vel malesuada nisl lectus a libero.</p>
<p>Nam quis efficitur ante. Sed eget purus quis ex commodo porta eu sit amet dolor.
Mauris
tellus nisl, dictum nec est vitae, condimentum ornare ante. Fusce ornare hendrerit
maximus. In maximus rhoncus justo.</p>
</div>
<div class="post-tags">
<p><strong>Tags:</strong></p>
<ul class="list list-horizontal">
</ul>
</div>
</div>
</article>
<article class="post" id="article-7" data-tags="summer sun blue lake" data-author='Kitty Toebean'>
<div class="post-img"> <img
src='https://images.pexels.com/photos/164357/pexels-photo-164357.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt='photo-7'>
</div>
<div class='post-inner'>
<h3 class="post-title">Article 7</h3>
<p class="post-author">by </p>
<div class="post-content">
<p>Donec eleifend mauris ac nisl fermentum, ac fermentum turpis dignissim. Aliquam diam
nisl, imperdiet a varius eget, lobortis sed nisi. Nullam suscipit ipsum sed magna
blandit, sed pellentesque urna malesuada.</p>
<p>Duis vestibulum arcu et lectus viverra porta. Praesent tempor lacus eget quam mattis,
sit
amet venenatis diam ultrices. Morbi gravida sapien quis ligula tincidunt, vel
sagittis
erat ultrices.</p>
<p>Ut orci tellus, laoreet ac diam ut, tempus bibendum nisi. Nam egestas sagittis nibh.
Curabitur tristique dui quis egestas pretium. Duis eu felis orci.</p>
</div>
<div class="post-tags">
<p><strong>Tags:</strong></p>
<ul class="list list-horizontal">
</ul>
</div>
</div>
</article>
<article class="post" id="article-8" data-tags="winter blue snowman cold" data-author='Theo Tabby'>
<div class="post-img"> <img
src='https://images.pexels.com/photos/37524/cube-six-gambling-play-37524.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt='photo-8'>
</div>
<div class='post-inner'>
<h3 class="post-title">Article 8</h3>
<p class="post-author">by </p>
<div class="post-content">
<p>Praesent quis imperdiet erat. Curabitur tempor sapien a interdum malesuada. Proin
libero
erat, sagittis a sollicitudin eget, pulvinar nec risus. Cras et suscipit sem.</p>
<p>Maecenas consequat diam nec sollicitudin congue. Aenean porttitor porttitor quam,
condimentum interdum metus congue sed. Donec at nulla ipsum.</p>
<p>Mauris non congue dui. Aenean ac eros vitae massa vulputate aliquet ut ac elit. Morbi
iaculis auctor nunc aliquet luctus. Nunc tincidunt sem dui, quis interdum leo
pellentesque eget. Fusce id leo varius, imperdiet nunc vitae, tristique mi. Mauris
quis
interdum justo. Mauris auctor purus eu leo faucibus feugiat. Nulla at odio vitae leo
semper blandit.</p>
</div>
<div class="post-tags">
<p><strong>Tags:</strong></p>
<ul class="list list-horizontal">
</ul>
</div>
</div>
</article>
<article class="post" id="article-9" data-tags="leaf tree grass" data-author='Marion Berry'>
<div class="post-img"> <img
src='https://images.pexels.com/photos/220357/pexels-photo-220357.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt='photo-9'>
</div>
<div class='post-inner'>
<h3 class="post-title">Article 9</h3>
<p class="post-author">by </p>
<div class="post-content">
<p>Tam et facilisis purus. Donec vulputate est quis lobortis posuere. Nunc vitae lorem
ut
odio faucibus pulvinar nec in justo. Ut ut ante ac tellus ornare tempus. Nunc
maximus,
tortor et dictum convallis, nunc libero posuere leo, scelerisque ultrices arcu
sapien ut
tellus.</p>
<p>Fusce lacinia augue massa, non tincidunt tortor auctor quis. Vestibulum ut pretium
nisl.
Etiam id tellus tempus, commodo ligula vehicula, porta magna.</p>
<p>Donec fringilla blandit dolor vel aliquet. Fusce tortor sapien, lobortis eu vehicula
sit
amet, dignissim et lectus. In ullamcorper metus vel massa fermentum, at fermentum
dui
sollicitudin. Nullam lacinia elit vel tortor ullamcorper pulvinar.</p>
</div>
<div class="post-tags">
<p><strong>Tags:</strong></p>
<ul class="list list-horizontal">
</ul>
</div>
</div>
</article>
<article class="post" id="article-10" data-tags="blue sky plane" data-author='George Tuxedo'>
<div class="post-img"> <img
src='https://images.pexels.com/photos/262488/pexels-photo-262488.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt='photo-10'>
</div>
<div class='post-inner'>
<h3 class="post-title">Article 10</h3>
<p class="post-author">by </p>
<div class="post-content">
<p>Aliquam erat volutpat. Ut non eleifend lectus. Donec suscipit tellus tempor, ornare
dui
id, hendrerit neque. Phasellus lacinia laoreet dui in luctus. Sed hendrerit, magna
sit
amet varius tempor, augue augue scelerisque est, non scelerisque mauris libero eu
sapien.</p>
<p>Sed at sapien in quam sollicitudin aliquam. In interdum metus a mi porttitor luctus.
Sed
commodo, arcu id lacinia posuere, felis elit pharetra urna, at feugiat est orci sit
amet
libero. arQuisque in nisl est. Nullam vehicula at lectus non luctus. Cras aliquam
neque
magna, at varius nisi egestas ut.</p>
<p>Rhoncus purus nulla, non auctor lacus placerat ut. Aliquam condimentum eget magna ac
gravida. Etiam egestas faucibus urna et finibus. Cras vel tellus vel magna suscipit
euismod. Maecenas id arcu ante. Duis iaculis scelerisque erat, at ullamcorper arcu
consectetur eu. Fusce aliquam diam at arcu pharetra, vel fermentum nunc lobortis.
</p>
<p>Rhoncus purus nulla, non auctor lacus placerat ut. Aliquam condimentum eget magna ac
gravida. Etiam egestas faucibus urna et finibus. Cras vel tellus vel magna suscipit
euismod. Maecenas id arcu ante. Duis iaculis scelerisque erat, at ullamcorper arcu
consectetur eu. Fusce aliquam diam at arcu pharetra, vel fermentum nunc lobortis.
</p>
<p>Rhoncus purus nulla, non auctor lacus placerat ut. Aliquam condimentum eget magna ac
gravida. Etiam egestas faucibus urna et finibus. Cras vel tellus vel magna suscipit
euismod. Maecenas id arcu ante. Duis iaculis scelerisque erat, at ullamcorper arcu
consectetur eu. Fusce aliquam diam at arcu pharetra, vel fermentum nunc lobortis.
</p>
</div>
<div class="post-tags">
<p><strong>Tags:</strong></p>
<ul class="list list-horizontal">
</ul>
</div>
</div>
</article>
</section>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.0/handlebars.min.js"></script>
<script id='template-article-link' type='text/x-handlebars-template'>
<li><a href="#{{id}}"><span>{{title}}</span></a></li>
</script>
<script id='template-tag-link' type='text/x-handlebars-template'>
<li><a href="#tag-{{articleTag}}"><span>{{articleTag}}</span></a></li>
</script>
<script id='template-authors' type='text/x-handlebars-template'>
by <a href="#authors-{{authorName}}"><span>{{authorName}}</span></a>
</script>
<script id='template-tagCloudLink' type='text/x-handlebars-template'>
{{#each tags}}
<li><a class="{{className}}" href="#tag-{{tag}}">{{tag}} ({{count}})</a></li>
{{/each}}
</script>
<script id='template-authorCloudLink' type='text/x-handlebars-template'>
{{#each authors}}
<li><a href="#authors-{{author}}"> {{author}} ({{count}})</a></li>
{{/each}}
</script>
<script src="js/script.js"></script>
</body>
</html>