/
index.html
43 lines (36 loc) · 1.36 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
<!DOCTYPE html>
<html lang="en-US" data-varam="oil ink">
<meta charset="utf-8">
<meta name="color-scheme" content="dark">
<meta name="theme-color" content="deeppink">
<meta name="viewport" content="width=device-width">
<title>varam like var(--param)</title>
<meta name="author" content="ryanve">
<meta name="description" content="change CSS var via URL param javascript">
<!-- staging. encode your dreams but remember reality. -->
<!-- <meta name="varam" content="oil=purple&ink=#bae"> -->
<link rel="stylesheet" href="www.css">
<link rel="license" href="LICENSE.txt">
<link rel="help" href="https://github.io/ryanve/varam">
<link rel="help" href="README.md">
<link rel="icon" href="icon.svg">
<link rel="alternate" href="https://ryanve.page/varam">
<link rel="canonical" href="https://ryanve.dev/varam">
<header>
<h1><a href="?">varam</a></h1>
<a rel="help" href="https://github.com/ryanve/varam#varam">github</a>
</header>
<figure class="sample" data-varam="mode size">
<figcaption>
<a href="?oil=salmon&ink=black">demo</a>
<small>
click around.
watch URL.
inspect style.
</small>
</figcaption>
<a href="?oil=skyblue&ink=black">surf</a>
<a href="?oil=purple&ink=gold&mode=vertical-rl">dive</a>
<a href="?oil=indigo&ink=pink&mode=vertical-rl&size=2em">zoom</a>
</figure>
<script async src="varam.js"></script>