Skip to content

Commit ffc405a

Browse files
zackbloomzackbloom
committed
Add pace to welcome page
1 parent c42f7fb commit ffc405a

File tree

4 files changed

+89
-14
lines changed

4 files changed

+89
-14
lines changed

‎.hsdoc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
title: "Pace"
22
source: "pace.coffee"
33
examples: "**/*.md"
4-
assets: "{templates/*,themes/*,docs/welcome/*,docs/themes/*,docs/lib/*,docs/resources/barber-pole-orange.css,*.js}"
4+
assets: "{templates/*,themes/*,docs/welcome/*,docs/themes/*,docs/lib/*,docs/resources/*.css,*.js}"

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ paceOptions = {
7676
document: false, // disabled
7777
eventLag: false, // disabled
7878
elements: {
79-
sources: ['.my-page']
79+
selectors: ['.my-page']
8080
}
8181
};
8282
```

‎docs/resources/flash-white.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.pace {
2+
-webkit-pointer-events: none;
3+
pointer-events: none;
4+
-webkit-user-select: none;
5+
-moz-user-select: none;
6+
user-select: none;
7+
}
8+
9+
.pace-inactive {
10+
display: none;
11+
}
12+
13+
.pace .pace-progress {
14+
background: #fcfffc;
15+
position: fixed;
16+
z-index: 100;
17+
top: 0;
18+
left: 0;
19+
height: 2px;
20+
}
21+
22+
.pace .pace-progress-inner {
23+
display: block;
24+
position: absolute;
25+
right: 0px;
26+
width: 100px;
27+
height: 100%;
28+
box-shadow: 0 0 10px #fcfffc, 0 0 5px #fcfffc;
29+
opacity: 1.0;
30+
-webkit-transform: rotate(3deg) translate(0px, -4px);
31+
-moz-transform: rotate(3deg) translate(0px, -4px);
32+
-ms-transform: rotate(3deg) translate(0px, -4px);
33+
-o-transform: rotate(3deg) translate(0px, -4px);
34+
transform: rotate(3deg) translate(0px, -4px);
35+
}
36+
37+
.pace .pace-activity {
38+
display: block;
39+
position: fixed;
40+
z-index: 100;
41+
top: 15px;
42+
right: 15px;
43+
width: 14px;
44+
height: 14px;
45+
border: solid 2px transparent;
46+
border-top-color: #fcfffc;
47+
border-left-color: #fcfffc;
48+
border-radius: 10px;
49+
-webkit-animation: pace-spinner 400ms linear infinite;
50+
-moz-animation: pace-spinner 400ms linear infinite;
51+
-ms-animation: pace-spinner 400ms linear infinite;
52+
-o-animation: pace-spinner 400ms linear infinite;
53+
animation: pace-spinner 400ms linear infinite;
54+
}
55+
56+
@-webkit-keyframes pace-spinner {
57+
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
58+
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
59+
}
60+
@-moz-keyframes pace-spinner {
61+
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
62+
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
63+
}
64+
@-o-keyframes pace-spinner {
65+
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
66+
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
67+
}
68+
@-ms-keyframes pace-spinner {
69+
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
70+
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
71+
}
72+
@keyframes pace-spinner {
73+
0% { transform: rotate(0deg); transform: rotate(0deg); }
74+
100% { transform: rotate(360deg); transform: rotate(360deg); }
75+
}

‎docs/welcome/index.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<script src="/pace/docs/lib/color.js"></script>
1717
<script src="/pace/docs/lib/themes.js"></script>
1818
<script src="/pace/pace.js"></script>
19-
<link href="/pace/themes/pace-theme-flash.css" rel="stylesheet" />
19+
<link href="/pace/docs/resources/flash-white.css" rel="stylesheet" />
2020
</head>
2121
<body>
2222
<style id="app-colors">
@@ -186,8 +186,8 @@
186186
.section {
187187
position: relative;
188188
height: 100%;
189-
padding-top: 2rem;
190-
padding-bottom: 2rem;
189+
padding-top: 1rem;
190+
padding-bottom: 1rem;
191191
-webkit-box-sizing: border-box;
192192
-moz-box-sizing: border-box;
193193
box-sizing: border-box;
@@ -336,7 +336,7 @@
336336
.page {
337337
text-align: center;
338338
max-width: 28rem;
339-
padding; 0 10px;
339+
padding: 0 10px;
340340
margin: 0 auto;
341341
}
342342

@@ -359,6 +359,9 @@
359359
.themes-pitch {
360360
padding: 15px;
361361
}
362+
.block {
363+
padding: 10px 0;
364+
}
362365
</style>
363366

364367
<div class="section colored">
@@ -376,21 +379,18 @@ <h3>Automatic page load progress bar</h3>
376379

377380
<div class="section">
378381
<div class="page">
379-
<div class="up-arrow">⇪</div>
380-
<h2>Download</h2>
381-
<p><a class="button" href="https://raw.github.com/HubSpot/pace/v0.4.2/pace.min.js">Pace.js</a></p>
382-
<br/>
383382
<h2>What is Pace?</h2>
384383
<p style="text-align: left">Include pace.js and the theme css of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.</p>
385384
<p style="text-align: left">No need to hook into any of your code, progress is detected automatically.</p>
386385
<br/>
386+
<h2>Download</h2>
387+
<p><a class="button" href="https://raw.github.com/HubSpot/pace/v0.4.2/pace.min.js">Pace.js</a></p>
388+
<br/>
387389
<h2>Themes</h2>
388390
<input type="color" value="#2299dd"></input>
389391
<div class="themes"></div>
390-
<br/>
391-
<p>Submit a theme! <a href="https://github.com/HubSpot/pace">Fork us on GitHub</a></p>
392-
<br/>
393-
<p><a class="button" href="http://github.hubspot.com/pace/">Documentation</a></p>
392+
<p class="block">Submit a theme! <a href="https://github.com/HubSpot/pace">Fork us on GitHub</a></p>
393+
<p class="block"><a class="button" href="http://github.hubspot.com/pace/">Documentation</a></p>
394394
<br/>
395395
<p style="font-size: 0.6rem"><a href="http://dev.hubspot.com">HubSpot</a></p>
396396
<br/>

0 commit comments

Comments
 (0)