/
index.html.literal
executable file
·68 lines (58 loc) · 3.29 KB
/
index.html.literal
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
<!DOCTYPE html>
<html lang="en">
<head>
${ include("../literal/templates/head.literal", "./package.json") }
<script title="site">
window.slideshowStylesheet = 'https://stephen.band/slide-show/build/slide-show-shadow.css';
</script>
<link rel="stylesheet" href="./build/module.css" />
</head>
<body class="8x-grid @s-12x-grid @m-15x-grid @l-18x-grid grid">
${ include("./templates/slide-show.literal", {
class: "8x @s-12x @m-15x @l-18x x-flood",
controls: "pagination fullscreen",
slides: await fetch("http://sound.stephen.band/photos/Iceland/index.json")
.then((r) => r.json())
.catch((error) => {
console.log(error);
return {};
})
}) }
<section class="8x x1 @s-6x @m-x2 @l-x3 beige1-fg">
<h3 class="beige-fg">The Night Is Still Young</h3>
<p><span class="beige-fg">Words</span> Vanessa Sin<br/><span class="beige-fg">Music</span> Stephen Band/Vanessa Sin</p>
<audio src="./audio/The Night Is Still Young.m4a" controls="" preload="none"></audio>
</section>
<section class="8x x1 @m-x2 @l-x3">
<blockquote>
<p>Merci pour ta disponibilité et pour ton super et efficace travail. Ton
aide a été vraiment précieuse et notre spectacle a eu un super son grâce à toi.</p>
<p class="text-09 beige-fg" style="font-style: normal;">
<span class="beige1-fg">Ramaya Tegegne</span><br/>
Director de <span class="beige1-fg">Framer Framed</span>,
<a class="beige1-fg" href="https://www.theatredelusine.ch/spectacle/seme-la-greve/">Seme de Grève</a>
</p>
</blockquote>
</section>
<section class="8x x1 @s-6x @m-x2 @l-x3">
<h3>Custom Elements</h3>
<a class="block" href="https://stephen.band/slide-show/"><code><slide-show></code></a>
<a class="block" href="https://stephen.band/details-toggle/"><code><details-toggle></code></a>
<a class="block" href="https://stephen.band/form-elements/rotary-input/"><code><rotary-input></code></a>
<a class="block" href="https://stephen.band/form-elements/range-input/"><code><range-input></code></a>
<a class="block" href="https://stephen.band/form-elements/y-input/"><code><y-input></code></a>
<a class="block" href="https://stephen.band/form-elements/xy-input/"><code><xy-input></code></a>
<a class="block" href="https://stephen.band/form-elements/number-control/"><code><number-control></code></a>
<a class="block" href="https://stephen.band/form-elements/select-control/"><code><select-control></code></a>
<a class="block" href="https://stephen.band/literal/element-template/"><code><element-template></code></a>
<a class="block" href="https://stephen.band/literal/literal-include/"><code><literal-include></code></a>
</section>
<section class="8x x1 @s-6x @s-x7 @m-x8 @l-x9">
<h3>Font size calculator</h3>
<p>Generate CSS for viewport-scaleable font sizes.</p>
<p style="margin-top: 0;"><a href="https://stephen.band/font-size/">stephen.band/font-size/</a></p>
</section>
<script type="module">
import './build/module.js';
</script>
</body>