Skip to content

Commit 209a2a0

Browse files
chcunninghamchcunningham
authored
Merge pull request #214 from dalecurtis/demos
Add beginnings of samples directory.
2 parents f5a294b + 3df352b commit 209a2a0

File tree

2 files changed

+110
-0
lines changed

2 files changed

+110
-0
lines changed

‎samples/index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
<!-- Inspired by https://webaudioapi.com/samples/ -->
3+
<head>
4+
<title>WebCodecs API Samples</title>
5+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans"/>
6+
<link rel="stylesheet" href="samples.css" type="text/css" media="screen"/>
7+
</head>
8+
<body>
9+
<div id="container">
10+
<div id="nav"><ul><li><a href="/samples">Samples</a></li></ul></div>
11+
<div id="header"><h1><a href="/">WebCodecs API</a></h1></div>
12+
<div id="wrapper">
13+
<div id="content">
14+
<article onclick="window.location.href='/';">
15+
<h1><a href="/">Sample Demo 1</a></h1>
16+
<p>A sample that shows cool WebCodecs stuff.</p>
17+
</article>
18+
<article onclick="window.location.href='/';">
19+
<h1><a href="/">Sample Demo 2</a></h1>
20+
<p>A sample that shows cool WebCodecs stuff.</p>
21+
</article>
22+
<article onclick="window.location.href='/';">
23+
<h1><a href="/">Sample Demo 3</a></h1>
24+
<p>A sample that shows cool WebCodecs stuff.</p>
25+
</article>
26+
<article onclick="window.location.href='/';">
27+
<h1><a href="/">Sample Demo 4</a></h1>
28+
<p>A sample that shows cool WebCodecs stuff.</p>
29+
</article>
30+
<article onclick="window.location.href='/';">
31+
<h1><a href="/">Sample Demo 5</a></h1>
32+
<p>A sample that shows cool WebCodecs stuff.</p>
33+
</article>
34+
</div>
35+
</div>
36+
</body>
37+
</html>

‎samples/samples.css

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
body {
2+
background: black;
3+
font-family: 'Open Sans', sans-serif;
4+
color: #ccc;
5+
}
6+
7+
#container {
8+
margin: 0 auto;
9+
width: 70%;
10+
background: #111;
11+
padding: 20px;
12+
border: 1px #222 solid;
13+
}
14+
15+
#header h1 { margin: 0; }
16+
#nav ul { margin: 0; }
17+
#nav li {
18+
font-weight: bold;
19+
float: right;
20+
list-style: none;
21+
margin-left: 10px;
22+
}
23+
24+
#header a, #nav a {
25+
color: rgb(28, 161, 202);
26+
text-decoration: none;
27+
}
28+
29+
#header a:hover, #nav a:hover {
30+
color: rgb(157, 204, 255);
31+
text-decoration: underline;
32+
}
33+
34+
article a {
35+
color: #FEFEF2;
36+
text-decoration: none;
37+
}
38+
article a:hover {
39+
color: white;
40+
text-decoration: underline;
41+
}
42+
43+
a { color: #FEF0C9; text-decoration: none; }
44+
a:hover { color: #FEF6E4; text-decoration: underline; }
45+
46+
article {
47+
font-weight: bold;
48+
margin: 20px;
49+
padding: 20px;
50+
text-align: center;
51+
cursor: pointer;
52+
color: black;
53+
}
54+
55+
#content article:nth-child(5n+1) { background: #1768AC; }
56+
#content article:nth-child(5n+2) { background: #D64045; }
57+
#content article:nth-child(5n+3) { background: #44CF6C; }
58+
#content article:nth-child(5n+4) { background: #32A287; }
59+
#content article:nth-child(5n+5) { background: #6C464E; }
60+
61+
.sample .name {
62+
font-size: 22px;
63+
padding-bottom: 5px;
64+
color: #fee;
65+
}
66+
67+
.sample .info {
68+
color: #B0F0F8;
69+
}
70+
71+
blockquote {
72+
font-style: italic;
73+
}

0 commit comments

Comments
 (0)