Commit
·
5f830d1
0
Parent(s):
Initial commit
Browse files- .gitignore +6 -0
- assets/css/demo.css +78 -0
- index.html +30 -0
.gitignore
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
node_modules
|
| 2 |
+
npm-debug.log
|
| 3 |
+
.DS_Store
|
| 4 |
+
.idea
|
| 5 |
+
.vscode
|
| 6 |
+
package-lock.json
|
assets/css/demo.css
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
/*
|
| 2 |
+
::: Ignore!
|
| 3 |
+
::: Some quick styles for the demo page
|
| 4 |
+
*/
|
| 5 |
+
|
| 6 |
+
* {
|
| 7 |
+
margin: 0;
|
| 8 |
+
padding: 0;
|
| 9 |
+
}
|
| 10 |
+
|
| 11 |
+
body {
|
| 12 |
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
| 13 |
+
font-size: 1.4em;
|
| 14 |
+
line-height: 1.4em;
|
| 15 |
+
color: #7d7d7d;
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
p {
|
| 19 |
+
margin-bottom: 0.5em;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
h1 {
|
| 23 |
+
font-size: 1.5em;
|
| 24 |
+
margin-bottom: 0.75em;
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
a.btn {
|
| 28 |
+
padding: 10px;
|
| 29 |
+
text-decoration: none;
|
| 30 |
+
border-radius: 5px;
|
| 31 |
+
font-size: 16px;
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
.btn-dark {
|
| 35 |
+
background: #000000;
|
| 36 |
+
color: white;
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
.btn-light {
|
| 40 |
+
background: whitesmoke;
|
| 41 |
+
color: #2d2d2d;
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
h1, h2, h3, h4, h5, h6 {
|
| 45 |
+
color: #2d2d2d;
|
| 46 |
+
}
|
| 47 |
+
|
| 48 |
+
pre {
|
| 49 |
+
margin: 1.25em 0;
|
| 50 |
+
background: whitesmoke;
|
| 51 |
+
padding: 10px 0;
|
| 52 |
+
line-height: 1.75em;
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
.page-wrap {
|
| 56 |
+
display: block;
|
| 57 |
+
padding: 50px;
|
| 58 |
+
max-width: 700px;
|
| 59 |
+
margin: auto;
|
| 60 |
+
}
|
| 61 |
+
|
| 62 |
+
section.header {
|
| 63 |
+
margin-top: 150px;
|
| 64 |
+
text-align: center;
|
| 65 |
+
margin-bottom: 125px;
|
| 66 |
+
}
|
| 67 |
+
|
| 68 |
+
section.header .btn {
|
| 69 |
+
margin-left: 3px;
|
| 70 |
+
}
|
| 71 |
+
|
| 72 |
+
section.header h1 {
|
| 73 |
+
font-size: 3em;
|
| 74 |
+
}
|
| 75 |
+
|
| 76 |
+
section.header p {
|
| 77 |
+
margin-bottom: 1em;
|
| 78 |
+
}
|
index.html
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!doctype html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
| 6 |
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 7 |
+
<title>Sholo</title>
|
| 8 |
+
<link rel="stylesheet" href="assets/css/demo.css">
|
| 9 |
+
</head>
|
| 10 |
+
<body>
|
| 11 |
+
<div class="page-wrap">
|
| 12 |
+
<section class="header">
|
| 13 |
+
<h1>Sholo</h1>
|
| 14 |
+
<p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in spotlight</p>
|
| 15 |
+
<a href="#" class="btn btn-dark">Show an Example</a>
|
| 16 |
+
<a href="#" class="btn btn-light">Learn More</a>
|
| 17 |
+
</section>
|
| 18 |
+
<section class="main-content">
|
| 19 |
+
<h1>Whats does it do?</h1>
|
| 20 |
+
<p>Let's you bring any component on the page into the spotlight.</p>
|
| 21 |
+
<p>It lets you focus any element of the page while putting an overlay on top of the other elements in page. You can use it to make powerful introduction for different features of your application or for example if you want to highlight some component that needs user attention.</p>
|
| 22 |
+
|
| 23 |
+
<pre>
|
| 24 |
+
const sholo = new Sholo();
|
| 25 |
+
sholo.highlight(".header");
|
| 26 |
+
</pre>
|
| 27 |
+
</section>
|
| 28 |
+
</div>
|
| 29 |
+
</body>
|
| 30 |
+
</html>
|