-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
148 lines (129 loc) · 7.45 KB
/
index.html
File metadata and controls
148 lines (129 loc) · 7.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<title>Web Animations API | WAAPI.org</title>
<meta property="og:type" content="website">
<meta property="og:url" content="http://waapi.org/">
<meta property="og:title" content="WAAPI.org">
<meta property="og:description" content="Humans love stories. Animations are stories. Lets move the worlds' information.">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Nexii">
<meta name="twitter:title" value="WAAPI.org">
<meta name="twitter:description" value="Humans love stories. Animations are stories. Lets move the worlds' information.">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<meta name="theme-color" content="#1a7bc5">
<link rel="stylesheet" href="css/unstyle.css">
<link rel="stylesheet" href="css/org.css">
<!-- Hello there! -->
<body>
<header class="page">
<h1 class="logo"><span class="cube">WAAPI</span> org</h1>
</header>
<article class="why">
<p>
We believe that humans love stories.
</p>
<p>
Stories turn the complex into the obvious.<br>
Learning & teaching into fun.<br>
And most importantly make the worlds' information accessible.
</p>
<p>
Animations are stories.
</p>
<p>
Our mission is to contribute to & promote the <a href="http://w3c.github.io/web-animations/">Web Animations API</a>.
</p>
<ul class="contact">
<li>• Feel free to get in touch on twitter <a href="https://twitter.com/Nexii">@Nexii</a>
<li>• Chat at <a href="http://slack.animationatwork.com">slack.animationatwork.com</a>
<li>• Check out the <a href="https://github.com/waapi">WAAPI organisation on GitHub</a>
</p>
<!--
Obviously figure out how to turn the statements above into an animation.
Kinetic typography maybe?
Need some visuals, or iconography to help
-->
</article>
<article class="network">
<p>
Here is our network of sites:
</p>
<nav class="mega">
<a class="guide" href="http://waapi.guide">
<header>.guide</header>
<small>to all the things</small>
</a>
<a class="io" href="http://waapi.io">
<header>.i/o</header>
<small>Technical Reference</small>
<!--
Kind of like MDN, devdocs.io, etc
-->
</a>
<a class="org" href="http://waapi.org">
<header>.org</header>
<small>This Central Hub</small>
</a>
<div class="upcoming">
Upcoming Sites:
</div>
<a class="rocks" href="http://waapi.rocks">
<header>.rocks</header>
<small>...and here is why</small>
<!--
IDEAS:
Maybe play out like a puppet or origami/paper craft (material design? hah!) show,
e.g. kind of like that game with the box head antagonist and other inspirations.
Some kind of leading mascot(s)? Line-figures? [CSS is awes]ome?
Lights: The stage is your website!
Camera: Enter the actors, they are the elements of your website!
Action!
Use CSS 3D to build a theatre stage
-->
<svg class="note1" width="40" viewBox="0 0 100 100">
<path fill="white" d="M64.4 11.6l-9.4-2c-2.8-.5-5.3 1.7-5.3 4.5v54.3s.4 4.5-5.4 4.5H38C32 72.8 27.2 77.3 27 83c0 5.8 4.6 10.6 10.4 10.6h6c6.8 0 11.4-3.8 11.4-11.2V33.7c0-3.4 2.6-3.5 4-3.3l5.2 1c1.4.4 2.7-.7 2.7-2V14.5c-.2-1.4-1.2-2.7-2.6-3z"/>
</svg>
<svg class="note2" width="40" viewBox="0 0 100 100">
<path fill="white" d="M84.5 10c0-2.8-2.6-5-5.3-4.4l-42.8 8.7c-2 .4-3.6 2.3-3.6 4.4v50.5s.4 4.5-5.4 4.5h-6.8c-5.7 0-10.4 4.7-10.4 10.4S15 94.6 20.6 94.6h6c6.8 0 11.4-3.8 11.4-11.2V37c0-1.2.7-3.3 4-4l33.3-6.6c1.4-.2 4 0 4 3.3V61s.4 4.5-5.4 4.5h-7c-5.6 0-10.3 4.7-10.3 10.4 0 5.6 4.7 10.3 10.4 10.3h6.2c6.7 0 11.3-3.8 11.3-11.2V18v-8z"/>
</svg>
<svg class="speaker" width="110" viewBox="0 0 100 100">
<path fill="white" d="M44.2 27.53c.9 0 1.8.18 2.6.54.8.36 1.53.88 2.14 1.53.6.65 1.1 1.43 1.46 2.3.34.86.53 1.8.53 2.8s-.2 1.96-.53 2.82c-.35.87-.85 1.64-1.46 2.3-.6.64-1.34 1.17-2.14 1.52-.8.36-1.7.56-2.6.55-.93-.02-1.8-.23-2.6-.6s-1.5-.9-2.1-1.55c-.6-.65-1.1-1.42-1.42-2.27-.33-.86-.52-1.8-.52-2.77s.2-1.9.52-2.76c.33-.86.82-1.63 1.4-2.28.6-.65 1.32-1.18 2.12-1.54.8-.37 1.67-.58 2.6-.6zm0 12.95c.73 0 1.43-.15 2.08-.44.65-.3 1.23-.7 1.72-1.23.5-.5.9-1.14 1.17-1.83.27-.7.43-1.46.43-2.26s-.16-1.56-.43-2.25c-.28-.7-.68-1.32-1.17-1.84-.5-.5-1.07-.93-1.72-1.22-.64-.3-1.35-.45-2.1-.44-.73 0-1.44.17-2.08.47-.64.3-1.2.73-1.7 1.25-.47.52-.86 1.14-1.13 1.83-.27.7-.42 1.44-.42 2.23s.15 1.55.42 2.24c.27.7.66 1.3 1.14 1.83.5.52 1.07.94 1.7 1.24s1.35.47 2.1.48M44.2 46.65c1.75-.03 3.44.32 4.98 1 1.55.67 2.96 1.66 4.14 2.9 1.2 1.24 2.15 2.73 2.8 4.4.7 1.65 1.05 3.48 1.05 5.4 0 1.93-.37 3.76-1.04 5.42-.66 1.66-1.62 3.15-2.8 4.4-1.2 1.24-2.6 2.23-4.15 2.9-1.54.67-3.23 1.03-5 1-1.75-.04-3.42-.45-4.92-1.17-1.5-.7-2.86-1.73-4-2.97-1.1-1.24-2.02-2.7-2.65-4.33-.62-1.6-.96-3.4-.96-5.24s.34-3.63.97-5.25c.64-1.6 1.55-3.08 2.67-4.3 1.13-1.26 2.48-2.27 4-3 1.5-.7 3.16-1.12 4.92-1.15zm0 24.6c1.4.02 2.73-.27 3.95-.8 1.23-.55 2.34-1.33 3.27-2.32.94-1 1.7-2.17 2.23-3.48.53-1.32.82-2.77.82-4.3 0-1.5-.3-2.97-.82-4.28s-1.3-2.5-2.23-3.5c-.93-.97-2.04-1.76-3.27-2.3-1.22-.54-2.56-.82-3.96-.8-1.4.02-2.74.34-3.94.9-1.2.57-2.27 1.38-3.17 2.36-.9 1-1.64 2.15-2.14 3.44-.5 1.3-.78 2.7-.78 4.2 0 1.47.28 2.88.78 4.17.5 1.3 1.23 2.46 2.13 3.44.9 1 1.96 1.8 3.16 2.36 1.2.56 2.53.9 3.93.9"/>
<path fill="white" d="M74.57 24.46c-.1-.3-.23-.57-.4-.8-.17-.26-.38-.47-.6-.65-.25-.17-.5-.32-.8-.42l-10.36-3.7-.47-.16.04.02c-.38-.15-.8-.22-1.23-.2l-32.4 1.35c-.43 0-.83.12-1.2.3-.36.2-.7.45-.96.76-.28.32-.5.7-.65 1.1s-.24.85-.24 1.3v53.28c0 .46.07.9.23 1.3.15.4.37.78.65 1.1.27.3.6.57.97.76.36.18.76.3 1.2.3l32.4 1.36c.43.02.84-.05 1.22-.2l-.04.02 10.85-3.86c.28-.1.54-.24.78-.42.23-.18.44-.4.6-.65.18-.24.32-.52.4-.8s.15-.62.15-.95V25.4c0-.32-.04-.64-.13-.94zM62.73 78.02c0 .3-.06.56-.16.8s-.25.47-.43.65c-.18.18-.4.32-.63.42-.22.08-.48.13-.76.12l-32.4-1.3c-.25 0-.5-.06-.7-.17-.22-.1-.42-.26-.58-.45-.16-.18-.3-.4-.4-.64-.08-.24-.13-.5-.13-.78V23.32c0-.28.05-.54.14-.78.1-.24.23-.45.4-.64.15-.2.35-.34.56-.45.22-.1.46-.17.7-.18l32.4-1.3c.3 0 .55.05.78.14s.46.25.64.43.33.4.43.65.16.5.16.8v56.04z"/>
<path fill="white" d="M44.4 54.76c-.27 0-.55.02-.8.06 1.87.35 3.3 2 3.3 3.98 0 2.24-1.8 4.05-4.05 4.05-1.98 0-3.64-1.44-3.98-3.32-.04.27-.06.54-.06.83 0 3.1 2.5 5.6 5.6 5.6s5.6-2.5 5.6-5.6-2.5-5.6-5.6-5.6z"/>
</svg>
</a>
<a class="news" href="http://waapi.news">
<header>.news</header>
<small>Rumour Mill</small>
<!--
I can't find anyone willing to pick this up,
maybe just instead pull in news from various sources,
mailing lists, twitter etc.
-->
</a>
<a class="space" href="http://waapi.space">
<header>.space</header>
<small>WAAPI in … <i>space!</i></small>
<!--
A space-themed game to teach WAAPI
-->
</a>
<a class="tools" href="http://waapi.tools">
<header>.tools</header>
<small>Curated list of tools</small>
</a>
</nav>
</article>
<!--
Need a footer here ultimately, but needs to be useful and practical
A footer usually has a nice sitemap (although network above is sitemappy already?)
Contact details, FAQ, …? People behind this?
-->
<footer class="page">
<span class="cube">WAAPI</span> are unofficial community sites and not endorsed by the W3C in any way
</footer>