-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
331 lines (298 loc) · 18.2 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112510520-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-112510520-1');
</script>
<title>Year in Review: 2017</title>
<meta name="description" content="Alec's favorite stuff from 2017. Designed by Alec, coded by Logan Pendergrass.">
<meta name="subject" content="Alec's favorite stuff from 2017. Designed by Alec, coded by Logan Pendergrass.">
<meta name="robots" content="index,follow"><!-- All Search Engines -->
<meta name="googlebot" content="index,follow"><!-- Google Specific -->
<meta name="google" content="notranslate">
<meta property="og:url" content="http://www.2017.media" />
<meta property="og:title" content="Year in Review: 2017" />
<meta property="og:description" content="Alec's favorite stuff from 2017. Designed by Alec, coded by Logan Pendergrass." />
<meta property="og:image" content="http://www.2017.media/img/main.png" />
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://www.2017.media/img/main-t.png">
<meta name="theme-color" content="#f4a589">
<link rel="icon" type="image/x-icon" sizes="16x16" href="img/favicon-3.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/vrq3mua.css">
<!-- build:css css/main.min.css -->
<link rel="stylesheet" href="bulma/bulma.min.css">
<!-- /build -->
<!-- This is a test change -->
</head>
<body>
<!-- Rotator Begin -->
<div class="rotator-container unload">
<svg class="default" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><defs></defs><path class="cls-1" d="M27.23 72.29l.3 8.73 3.68 1.23.08 2.21-18.43-6.26-.07-2.08 18-7.51.08 2.21zm-1.87.77l-9.62 4 9.87 3.31zM14.11 61.12l.66-2 15.39 5L33.42 54l1.93.62-3.92 12.11zM22.39 41.28l7.53-9.61 1.6 1.24-6.2 7.92 4.59 3.59 5.75-7.34 1.53 1.2-5.75 7.35 5 3.92 6.21-7.92 1.59 1.25-7.52 9.62zM40.81 33.75c-3-4.83-2.43-9.67 1.37-12 3.06-1.91 6.66-1.25 9.16 1.76l-1.6 1.46c-2.09-2.31-4.35-2.84-6.49-1.5-2.78 1.73-3 5.28-.61 9.18s5.72 5.22 8.52 3.48c2.27-1.42 2.74-3.8 1.25-6.83l2-.93c2 3.8 1.1 7.41-2.21 9.48-3.81 2.35-8.33.8-11.39-4.1zM76 12.32l2.21.31-.39 14.91h.06l4.24-9.9 2 .28 1.31 10.69h.05l3.74-14.41 2.21.31-4.93 17.68-2.44-.35-1.52-10h-.06L78.24 31l-2.45-.35zM98.83 17.21l1.91 1-3.7 7 7 3.71 3.7-6.95 1.91 1L101.07 39l-1.9-1 4-7.44-7-3.71-4 7.43-1.91-1zM120.48 35.57L110 45l3.18 3.54-1.51 1.35-7.82-8.7 1.51-1.36 3.2 3.56L119 34l-3.2-3.56 1.51-1.36 7.82 8.71-1.51 1.35zM130.41 51.49l-2.43-6 1.88-.76 5.65 14-1.88.76-2.42-6-15 6.06-.81-2zM137 66.51l.09 2.52-10.5 4.18v.05l10.76 3.46.08 2.53-18.19.6-.08-2.15 13.67-.46-10.41-3.4v-.83l10.17-4.06v-.06l-13.67.46-.07-2.18zM127.7 84.63c5.47 1.77 8.16 5.6 6.82 9.73s-5.76 5.64-11.23 3.87-8.16-5.6-6.82-9.73 5.77-5.64 11.23-3.87zM124 96.18c4.28 1.38 7.66.54 8.63-2.45s-1.28-5.66-5.55-7-7.67-.54-8.64 2.45 1.24 5.61 5.56 7zM127.76 108.51L123.5 114c-2.34 3-5.34 3.54-8 1.48a5 5 0 0 1-1.34-6.86l-8.36-1.46 1.55-2 8.2 1.5 2.39-3-5.83-4.66 1.33-1.7zm-11.06-.11c-1.66 2.1-1.62 3.95.15 5.33s3.5 1 5.17-1.17l2.82-3.6-5.32-4.17zM112.87 124.68l-10.37 6.47-1.07-1.72 8.54-5.32-3.09-5L99 124.1l-1-1.65 7.92-4.94-3.37-5.41-8.55 5.33-1.08-1.72 10.37-6.47z"/></svg>
</div>
<!-- Rotator End -->
<div class="curtain"></div>
<main>
<div class="month-bg">
<!-- Month Background Begin -->
<!-- Introduction Begin -->
<section class="intro">
<div class="container safety-padding">
<p class="s-size-7">
Year in review
</p>
<h1 class="title">
2017
</h1>
</div>
<hr>
<div class="container safety-padding">
<div class="columns is-multiline is-mobile">
<div class="column month is-2-mobile" onmouseover="monthBgHover(0)" >JAN</div>
<div class="column month is-2-mobile" onmouseover="monthBgHover(1)" >FEB</div>
<div class="column month is-2-mobile" onmouseover="monthBgHover(2)" >MAR</div>
<div class="column month is-2-mobile" onmouseover="monthBgHover(3)" >APR</div>
<div class="column month is-2-mobile" onmouseover="monthBgHover(4)" >MAY</div>
<div class="column month is-2-mobile" onmouseover="monthBgHover(5)" >JUN</div>
<div class="column month is-2-mobile" onmouseover="monthBgHover(6)" >JUL</div>
<div class="column month is-2-mobile" onmouseover="monthBgHover(7)" >AUG</div>
<div class="column month is-2-mobile" onmouseover="monthBgHover(8)" >SEP</div>
<div class="column month is-2-mobile" onmouseover="monthBgHover(9)" >OCT</div>
<div class="column month is-2-mobile" onmouseover="monthBgHover(10)">NOV</div>
<div class="column month is-2-mobile" onmouseover="monthBgHover(11)">DEC</div>
</div>
</div>
</section>
<!-- End Introduction -->
<div class="container introspace safety-padding">
<div class="columns">
<div class="column is-9-tablet is-half-desktop">
<p class="is-size-7-mobile">
Presented in no particular order, a look at some of the media bites that got stuck in my teeth this year.
Take a look, <em>fling</em> some of the ones you didn't like out of the way, or <em>collect</em> all of the ones you did.
<br><br>Cheers to another year of being able to watch, listen, and play.
</p>
</div>
</div>
</div>
<!-- Menu Spacer Begin -->
<div class="spacer hide"></div>
<!-- Menu Spacer End -->
<!-- Begin Menu -->
<section class="media-menu default" id="nav-bar">
<div class="container safety-padding">
<ul class="columns is-mobile">
<li class="menuitem column is-narrow"><span class="default active"><a href="#music">MUSIC</a></span></li>
<li class="menuitem column is-narrow"><span class="films"><a href="#films">FILM</a></span></li>
<li class="menuitem column is-narrow"><span class="television"><a href="#television">TELEVISION</a></span></li>
<li class="menuitem column is-narrow"><span class="game"><a href="#games">GAMES</a></span></li>
</ul>
</div>
</section>
<!-- End Menu -->
<div class="introspace"></div>
</div>
<!-- End Month Background -->
<!-- Begin Album Section -->
<section class="music-container">
<div class="menu-target" id="music"></div>
<section class="music container safety-padding">
<div class="columns is-multiline introduction">
<h2 class="column is-11 is-offset-1 is-size-4">Album Awards</h2>
<h3 class="subtitle is-size-7 column is-3-dsektop is-two-fifths-tablet is-offset-1">A little something something for the works that dislodged time and repainted it with their own hues.</h3>
</div>
</section>
<section class="music subsection">
<div class="container sticker-area sticker-area-album">
<div class="sticker sticker-music"><img src="img/svg/album_1.svg" alt="SOUNDSCAPE EXPLORER: The War on Drugs, A Deeper Understanding"></div>
<div class="sticker sticker-music"><img src="img/svg/album_2.svg" alt="PERFECT LIGHT ULTRA: Lorde, Melodrama"></div>
<div class="sticker sticker-music"><img src="img/svg/album_3.svg" alt="MICROSTORM AWARD: Broken Social Scene, Hug of Thunder"></div>
<div class="sticker sticker-music"><img src="img/svg/album_4.svg" alt="UNDER-AQUATIC BOYFRIEND: Rostam, Half Light"></div>
<div class="sticker sticker-music"><img src="img/svg/album_5.svg" alt="MY PRETEND EMOTIONS: Ryan Adams, Prisoner"></div>
<div class="sticker sticker-music"><img src="img/svg/album_6.svg" alt="DARK AND STORMY: (Sandy) Alex G, Rocket"></div>
<div class="sticker sticker-music"><img src="img/svg/album_7.svg" alt="IT GREW ON ME A LOT: Bleachers, Gone Now"></div>
<div class="sticker sticker-music"><img src="img/svg/album_8.svg" alt="MIRROR WORLD SOUNDTRACK: Sampha, Process"></div>
</div>
</section>
<section class="music subsection container safety-padding">
<div class="columns is-multiline introduction">
<h2 class="column is-11 is-offset-1 is-size-4">All you need is 8 killer tracks</h2>
<h3 class="subtitle is-size-7 column is-3-dsektop is-two-fifths-tablet is-offset-1">A ragtag yet tidy handful of bangers, gushers, and sing-a-longs that accompanied the year as sonic stand-outs.</h3>
</div>
</section>
<section class="music subsection">
<div class="container sticker-area sticker-area-songs">
<div class="sticker sticker-music"><img src="img/svg/song_1.svg" alt="Courtney + Kurt, Over Everything"></div>
<div class="sticker sticker-music"><img src="img/svg/song_2.svg" alt="Dirty Projectors, Up In Hudson"></div>
<div class="sticker sticker-music"><img src="img/svg/song_3.svg" alt="Big Thief, Shark Smile"></div>
<div class="sticker sticker-music"><img src="img/svg/song_4.svg" alt="Frank Ocean, Biking"></div>
<div class="sticker sticker-music"><img src="img/svg/song_5.svg" alt="CRJ, Cut To The Feeling"></div>
<div class="sticker sticker-music"><img src="img/svg/song_6.svg" alt="Charlie XCX, Boys"></div>
<div class="sticker sticker-music"><img src="img/svg/song_7.svg" alt="Japandroids, Near to the Wild Heart of Life"></div>
<div class="sticker sticker-music"><img src="img/svg/song_8.svg" alt="Phoebe Bridgers, Motion Sickness"></div>
</div>
</section>
</section>
<section class="films-container">
<section class="transition container safety-padding section-negative-margin">
<div class="columns">
<h1 class="column is-offset-1">Onto Films</h1>
</div>
</section>
<section class="films container safety-padding">
<div class="menu-target" id="films"></div>
<div class="columns is-multiline introduction">
<h2 class="column is-11 is-offset-1 is-size-4">The movies were good:</h2>
<h3 class="subtitle is-size-7 column is-3-dsektop is-two-fifths-tablet is-offset-1">JOKES ABOUT JUSTICE LEAGUE OR Wonder Woman. THE GOOD MOVIES</h3>
</div>
</section>
<section class="films subsection">
<div class="container sticker-area sticker-area-films">
<div class="sticker sticker-film"><img src="img/svg/movie_1_b.svg" alt="BEST MOVIE BREAKER: Get Out"></div>
<div class="sticker sticker-film"><img src="img/svg/movie_2_b.svg" alt="BEST NEIGHBORHOOD DAYDREAM: Lady Bird"></div>
<div class="sticker sticker-film"><img src="img/svg/movie_3_b.svg" alt="BEST CHILDREN: The Florida Project"></div>
<div class="sticker sticker-film"><img src="img/svg/movie_4_b.svg" alt="BEST CHARACTER CARE AND FRESHETS: Okja"></div>
<div class="sticker sticker-film"><img src="img/svg/movie_5_b.svg" alt="BEST PRODUCTION DESIGN TO DIE IN: Blade Runner 2049"></div>
<div class="sticker sticker-film"><img src="img/svg/movie_6_b.svg" alt="BEST PRETEND HUMANS: Three Billboards Outside Long Name"></div>
<div class="sticker sticker-film"><img src="img/svg/movie_7_b.svg" alt="BEST ANIMATED FILM: War of the Planet of Apes"></div>
<div class="sticker sticker-film"><img src="img/svg/movie_8_b.svg" alt="BEST SUPER HERO MOVIE: Spider-Man: Homecoming"></div>
</div>
</section>
<section class="container safety-padding">
<div class="mentions columns is-multiline">
<h3 class="column title movie-mentions is-11 is-offset-1 is-size-4">Haven't Seen Yet</h3>
<div class="column list movie-mentions is-offset-1">
<p>Call me by Your Name</p>
<p>A Ghost Story</p>
<p>Brawl in Cellblock 99</p>
</div>
<div class="column list movie-mentions">
<p>Good Time</p>
<p>Logan Lucky</p>
<p>Super Dark Times</p>
</div>
<div class="column list movie-mentions">
<p>Colombus</p>
<p>Wind River</p>
</div>
<div class="column is-hidden-touch is-2"></div>
</div>
</section>
</section>
<section class="television-container">
<section class="transition container safety-padding section-negative-margin">
<div class="columns">
<h1 class="column is-offset-1">Onto Television</h1>
</div>
</section>
<section class="television container safety-padding">
<div class="menu-target" id="television"></div>
<div class="columns is-multiline introduction">
<h2 class="column is-11 is-offset-1 is-size-4">No Game of Thrones</h2>
<h3 class="subtitle is-size-7 column is-3-dsektop is-two-fifths-tablet is-offset-1">That season was a lifeless affiar of decisions no one would have ever made. Instead, here were the good decisions i made.</h3>
</div>
</section>
<section class="container sticker-area sticker-area-television subsection">
<div class="sticker sticker-television"><img src="img/svg/tv_1.svg" alt="S4 Nathan For You"></div>
<div class="sticker sticker-television"><img src="img/svg/tv_2.svg" alt="S1 American Vandal"></div>
<div class="sticker sticker-television"><img src="img/svg/tv_3.svg" alt="S2 Master of None"></div>
<div class="sticker sticker-television"><img src="img/svg/tv_4.svg" alt="S1 The Handmaid's Tale"></div>
<div class="sticker sticker-television"><img src="img/svg/tv_5.svg" alt="S2 The Expanse"></div>
<div class="sticker sticker-television"><img src="img/svg/tv_6.svg" alt="S2 Love"></div>
<div class="sticker sticker-television"><img src="img/svg/tv_7.svg" alt="S3 Fargo"></div>
</section>
<section class="container subsection safety-padding">
<div class="mentions columns is-multiline">
<h3 class="column title television-mentions is-11 is-offset-1 is-size-4">Still watching or still<br>planning on watching</h3>
<div class="column list television-mentions is-offset-1">
<p>Call me by Your Name</p>
<p>A Ghost Story</p>
<p>Brawl in Cellblock 99</p>
</div>
<div class="column list television-mentions">
<p>Good Time</p>
<p>Logan Lucky</p>
<p>Super Dark Times</p>
</div>
<div class="column is-hidden-touch">
</div>
<div class="column is-hidden-touch is-2"></div>
</div>
</section>
</section>
<section class="game-container">
<section class="transition container safety-padding section-negative-margin">
<div class="columns">
<h1 class="column is-offset-1">Onto Games</h1>
</div>
</section>
<section class="game container safety-padding">
<div class="menu-target" id="games"></div>
<div class="columns is-multiline introduction">
<h2 class="column is-11 is-offset-1 is-size-4">Gamer Only Section</h2>
<h3 class="subtitle is-size-7 column is-3-dsektop is-two-fifths-tablet is-offset-1">Besides the fact that the witcher 3 ate up three straight months of my life, here are the games that devoured me after</h3>
</div>
</section>
<section class="container sticker-area sticker-area-game subsection">
<div class="sticker sticker-game"><img src="img/svg/game_1.svg" alt="BEST BREEZE AND SWORD: Breath of the Wild"></div>
<div class="sticker sticker-game"><img src="img/svg/game_2.svg" alt="BEST DEPRESSION CAT SIM: Night in the Wood"></div>
<div class="sticker sticker-game"><img src="img/svg/game_3.svg" alt="OHOHOHOHOOOOHOOHOHOHOOO: Arms"></div>
<div class="sticker sticker-game"><img src="img/svg/game_4.svg" alt="STALEMATE EUPHORIA: Nidhogg II"></div>
<div class="sticker sticker-game"><img src="img/svg/game_5.svg" alt="THE EMOTIONAL JUNGLE ACTION: Uncharted: The Lost Legacy"></div>
<div class="sticker sticker-game"><img src="img/svg/game_6.svg" alt="FEROCITY AND CUTSCENES: Wolfenstein II"></div>
<div class="sticker sticker-game"><img src="img/svg/game_7.svg" alt="SMOKY CRIME FRIENDS: Hidden Agenda"></div>
<div class="sticker sticker-game"><img src="img/svg/game_8.svg" alt="THE PLAYGROUND AWARD: Super Mario Odyssey"></div>
<div class="sticker sticker-game"><img src="img/svg/game_9.svg" alt="BEST SQUID CUTIES FOREVER: Splatoon 2"></div>
</section>
<section class="container subsection safety-padding">
<div class="mentions columns is-multiline">
<h3 class="column title game-mentions is-11 is-offset-1 is-size-4">Haven't played yet</h3>
<div class="column list game-mentions is-offset-1">
<p>Horizon Zero Dawn</p>
<p>Hellblade</p>
<p>Resident Evil 7</p>
</div>
<div class="column list game-mentions">
<p>Cuphead</p>
<p>Neir Automata</p>
<p>Edith Finch</p>
</div>
<div class="column is-hidden-touch">
</div>
<div class="column is-hidden-touch is-2"></div>
</div>
</section>
</section>
<section class="outro container safety-padding">
<div class="columns is-multiline">
<h2 class="column is-offset-1 is-11 is-size-4">It's over, forward onto</h2>
<h1 class="column title is-offset-1">2018</h1>
</div>
<div class="container is-fluid subsection">
<p class="colophon has-text-centered is-uppercase"><a href="http://alec-whitmore.com/">Alec Whitmore</a> and <a href="http://loganpendergrass.com/">Logan Pendergrass</a> made this</p>
</div>
<div class="container subsection">
<p class="is-size-7 has-text-centered has-text-white">
This <a href="http://2017.media/">website</a> is available on <a href="https://github.com/ljpendergrass/media2017">Github</a> under the <a href="https://en.wikipedia.org/wiki/MIT_License">MIT License</a>. It was built on top of <a href="https://bulma.io">Bulma</a> and <a href="https://jquery.com/">jQuery</a> and uses <a href="https://gruntjs.com/">gruntjs</a> for bundling automation.
<br>
In addition, <a href="https://typekit.com/">Adobe Typekit</a> and <a href="https://fonts.google.com/">Google Fonts</a> provide webfonts.
<br><br>
All media imagery is owned by their respective copyright holders.
</p>
</div>
</section>
</main>
<!-- Script Calls -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="js/media.js"></script>
</body>
</html>