-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
86 lines (86 loc) · 5.04 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Limelight</title>
<script src="dist/index.js" defer></script>
<script src="demo/demo.js" defer></script>
<link rel="stylesheet" href="styles/limelight.css">
<link rel="stylesheet" href="demo/demo.css">
<link href="https://fonts.googleapis.com/css?family=Rubik:400,900" rel="stylesheet">
<link rel="icon" href="demo/img/favicon.png" type="image/x-icon" />
</head>
<body>
<main class="site">
<header class="intro">
<div class="intro__inner">
<div class="container">
<div class="intro__logo-wrapper">
<svg class="intro__logo" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><path id="spark" data-name="spark" d="M41.58,43.51a2.89,2.89,0,0,1-2.89-2.89h0a1,1,0,0,0-.7-1.23,1,1,0,0,0-1.23.71.92.92,0,0,0,0,.52,2.9,2.9,0,0,1-2.9,2.9h0a1,1,0,0,0,0,1.93,2.89,2.89,0,0,1,2.9,2.88h0a1,1,0,0,0,.7,1.23,1,1,0,0,0,1.23-.71.92.92,0,0,0,0-.52,2.89,2.89,0,0,1,2.89-2.89,1,1,0,0,0,1.23-.7,1,1,0,0,0-.71-1.23A.92.92,0,0,0,41.58,43.51Zm-3.86,1.93a4.74,4.74,0,0,0-1-1,4.74,4.74,0,0,0,1-1,4.74,4.74,0,0,0,1,1A4.74,4.74,0,0,0,37.72,45.44Z"/><path id="spark-2" data-name="spark" d="M29,51.23a2.9,2.9,0,0,1-2.89-2.9,1,1,0,0,0-1.93,0,2.9,2.9,0,0,1-2.9,2.9h0a1,1,0,0,0,0,1.93A2.89,2.89,0,0,1,24.18,56h0a1,1,0,0,0,.7,1.23,1,1,0,0,0,1.23-.71.92.92,0,0,0,0-.52A2.89,2.89,0,0,1,29,53.16a1,1,0,0,0,1.23-.7,1,1,0,0,0-.71-1.23A.92.92,0,0,0,29,51.23Zm-3.86,1.93a4.74,4.74,0,0,0-1-1,4.74,4.74,0,0,0,1-1,4.74,4.74,0,0,0,1,1,5.11,5.11,0,0,0-1,1Z"/><path id="spark-3" data-name="spark" d="M24.21,34.82h1.93v1.93H24.21Zm0,3.86h1.93v1.93H24.21Zm-1.93-1.93h1.93v1.93H22.28Zm3.86,0h1.93v1.93H26.14Z"/><path id="beam" d="M20.85,28.2a1,1,0,0,0-1.33.33l-17.37,29a1,1,0,1,0,1.63,1h0l17.38-29A1,1,0,0,0,20.85,28.2Zm19.63.33a1,1,0,0,0-1.67,1h0l17.38,29a1,1,0,0,0,1.67-1h0Z"/><path id="light" d="M42.55,10.69V1H40.62V8.76H38.69V5.86H21.31v2.9H19.38V1H17.45v9.65h3.86v7.72H19.38v7.72H40.62V18.41H38.69V10.69ZM38.69,24.2H21.31V20.34H38.69ZM23.24,18.41V7.79H36.76V18.41Z"/></svg>
</div>
<h1 class="intro__title">Limelight. js</h1>
<p class="intro__desc">A tiny (and fast) JavaScript plugin that creates a spotlight around any element on the page.</p>
<div class="intro__actions">
<a class="btn" href="https://github.com/jayfreestone/limelight.js" target="_blank" rel="noopener noreferrer">
<img src="demo/img/github-mark.svg" alt="">
Github
</a>
<a class="btn btn--primary" href="#demos">
Demos
</a>
</div>
</div>
</div>
</header>
<section id="demos">
<div class="container content">
<h2>Test</h2>
<h3>
Basic
</h3>
<div class="js-demo-basic">
<p>Cast a limelight on a simple box, classic tour-style.</p>
<button class="js-demo-basic__trigger push-bottom">
Shine on
</button>
<div class="js-demo-basic__target box">
A generic box full of great content.
</div>
</div>
<h3>
Auto-adjust
</h3>
<p>Limelight will auto-adjust itself if something changes on the page, so you don't have to worry about interactions causing a casting malfunction.</p>
<div class="js-demo-auto-adjust">
<button class="js-demo-auto-adjust__trigger push-bottom">
Cast a limelight
</button>
<div class="js-demo-auto-adjust__target box">
<h4>Auto-adjust</h4>
<details>
<summary>Click me while I'm in the limelight</summary>
<p>Most tooltip-tours include a blackout-style overlay that 'shines' a light on the target element.</p>
</details>
</div>
</div>
<h3>
Auto-adjust
</h3>
<div class="js-demo-goto">
<button class="js-demo-goto__trigger push-bottom">
Mighty Morphin'
</button>
<div class="js-demo-goto__target box push-bottom">
<h4>From here</h4>
</div>
<div class="js-demo-goto__dest box box--sm">
<h4>To here</h4>
</div>
</div>
</div>
</section>
</main>
</body>
</html>