-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
68 lines (61 loc) · 1.7 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
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>templace: progressive <template> loader</title>
<meta name="theme-color" content="deepskyblue">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="template tag progressive loader">
<style>
::selection { background: purple; color: yellow; }
[href] { color: inherit; }
:focus { outline-color: yellow; }
html {
font-family: sans-serif;
color: black;
background: deepskyblue;
}
body {
margin: auto;
padding: 1rem;
font-size: 1.125rem;
}
figure {
margin: 1rem auto;
padding: 1rem;
background: black;
color: deepskyblue;
}
figcaption {
margin: 1rem 0;
font-weight: bold;
font-size: 1.625rem;
}
iframe {
border: 0;
max-width: 100%;
}
h1 { margin: 1rem 0; }
template { display: none; }
</style>
<h1><a href="https://ryanve.github.io/templace/" rel="bookmark">templace</a></h1>
<a href="https://github.com/ryanve/templace">github</a>
<a href="https://www.npmjs.com/package/templace">npm</a>
<a href="https://unpkg.com/templace@latest">unpkg</a>
<h2>tests</h2>
<ul>
<li>if JavaScript is <b>enabled</b> then template content should appear below
<li>if JavaScript is <b>disabled</b> then nothing should appear below
</ul>
<template data-templace>
<figure>
<figcaption>figure test</figcaption>
<strong>Be bold</strong>
</figure>
</template>
<template data-templace>
<figure>
<figcaption>bandcamp iframe test</figcaption>
<iframe title="bandcamp" width="480" height="42" src="https://bandcamp.com/EmbeddedPlayer/album=1610178427/size=small/bgcol=222222/linkcol=00bfff/artwork=none/transparent=true/"></iframe>
</figure>
</template>
<script src="templace.js"></script>