-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
96 lines (80 loc) · 2.96 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
<!DOCTYPE html>
<html lang="en-US" class="roots sea-blood sea-wet sea-breeze">
<meta charset="utf-8">
<meta name="theme-color" content="HotPink">
<title>blank-182</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="The web needs more blink-182">
<!-- https://github.com/blank-182/blank-182.github.io/issues/2 -->
<meta property="og:image" content="https://user-images.githubusercontent.com/949985/60404066-d6398800-9b59-11e9-9c0b-37908c32a10f.png">
<meta property="og:image:alt" content="blink-182 web color stripes: seashell, turquoise, hotpink">
<link rel="shortcut icon" href="https://user-images.githubusercontent.com/949985/60404066-d6398800-9b59-11e9-9c0b-37908c32a10f.png">
<style>
.sea-wet:not(.sea-dry),
.sea-wet :not(.sea-dry) { background: none; color: inherit }
.sea-blood { background: var(--sea-vibe) !important; color: var(--sea-ink) !important }
.sea-bleed { background: var(--sea-ink) !important; color: var(--sea-vibe) !important }
.sea-amber { --sea-vibe: Coral; --sea-ink: Black }
.sea-breeze { --sea-vibe: Seashell; --sea-ink: #222 }
.sea-foam { --sea-vibe: Turquoise; --sea-ink: Black }
.sea-fume { --sea-vibe: HotPink; --sea-ink: Black }
.sea-glow { --sea-vibe: Gold; --sea-ink: Black }
.sea-gush { --sea-vibe: Violet; --sea-ink: Black }
.sea-lava { --sea-vibe: RosyBrown; --sea-ink: Black }
.sea-storm { --sea-vibe: Gainsboro; --sea-ink: Black }
.sea-tide { --sea-vibe: DeepSkyBlue; --sea-ink: Black }
.roots {
font-family: sans-serif;
font-size: calc(1em + 1vw + 1vh);
line-height: 1.33333;
}
.cuerpo {
margin: 0;
padding: 0;
overflow-wrap: break-word;
}
.hella { line-height: inherit; font-size: 2rem }
.nah {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
font-style: inherit;
}
.blurb {
max-width: 20em;
}
.pads {
padding: calc(1rem + 1vh) calc(1rem + 1vw);
}
.inhale { margin-top: 1rem }
.exhale { margin-bottom: 2rem }
</style>
<body class="cuerpo">
<header class="nah pads sea-blood sea-breeze">
<h1 class="nah hella">blank-182</h1>
</header>
<section class="nah pads sea-blood sea-foam">
<h2 class="nah hella">wtf???</h2>
<p class="nah blurb">
blank-182 is a web project about blink-182.
It turns blink-182 lyrics into web quizzes and web posters while
inspiring simple inclusive web design :)
</section>
<section class="nah pads sea-blood sea-fume">
<h2 class="nah hella">goals</h2>
<ul class="blurb">
<li>showcase blink-182 lyrics
<li>have meaningful fun with lyric quizzes
<li>inspire pure simple web design
<li>exemplify inclusive web design
<li>teach HTML thru examples
<li>opensource the code
<li>rep California with love
</ul>
</section>
<footer class="nah pads sea-bleed sea-fume">
<h2 class="nah hella">deets</h2>
<p class="nah">Coming to Kickstarter in July 2019
<p class="nah">Creator is <a href="https://twitter.com/ryanve">@ryanve</a> from <a href="https://s9a.github.io">feels.ink</a>
</footer>