Skip to content

Commit 67406ed

Browse files
redoxredox
committed
Merge pull request #462 from algolia/website-upgrade
chore(website): Home animation chore(website): inline svg
2 parents 68adc0d + e9a3212 commit 67406ed

15 files changed

+688
-260
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ dist-es5-module/
44
dev/bundle.js*
55
examples/*/*.css
66
npm-debug.log
7+
.DS_Store

‎docs/_includes/footer.html

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
<div class="spacer100 bg-white"></div>
22
<footer class="site-footer">
33
<p>
4-
Designed and built with <i class="fa fa-heart"></i> by <a href="https://www.algolia.com">Algolia</a><br />
5-
Code licensed under <a href="https://github.com/algolia/instantsearch.js/blob/master/LICENSE">MIT</a>
6-
</p>
7-
<p>
8-
<ul class="list-inline">
9-
<li>Currently v{{ site.version }}</li>
10-
<li>•</li>
11-
<li><a href="http://github.com/algolia/instantsearch.js">GitHub</a></li>
12-
<li>•</li>
13-
<li><a href="http://github.com/algolia/instantsearch.js/issues">Issues</a></li>
14-
<li>•</li>
15-
<li><a href="http://github.com/algolia/instantsearch.js/releases">Releases</a></li>
16-
</ul>
4+
Designed and built with <i class="fa fa-heart"></i> by <a href="https://www.algolia.com"><img src="./img/logo-algolia-dark.png" alt="Algolia"></a>
175
</p>
6+
<div class="spacer50"></div>
7+
<ul class="list-inline">
8+
<li>Currently v{{ site.version }}</li>
9+
<li>•</li>
10+
Code licensed under <a href="https://github.com/algolia/instantsearch.js/blob/master/LICENSE">MIT</a>
11+
<li>•</li>
12+
<li><a href="http://github.com/algolia/instantsearch.js">GitHub</a></li>
13+
<li>•</li>
14+
<li><a href="http://github.com/algolia/instantsearch.js/issues">Issues</a></li>
15+
<li>•</li>
16+
<li><a href="http://github.com/algolia/instantsearch.js/releases">Releases</a></li>
17+
</ul>
18+
<div class="spacer50"></div>
1819
<div class="m400 m-l-r-auto">
1920
{% include newsletter-mc.html %}
2021
</div>
21-
<div class="spacer50"></div>
22-
</footer>
22+
<div class="spacer80"></div>
23+
</footer>

‎docs/_includes/newsletter-mc.html

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
11
<!-- Begin MailChimp Signup Form -->
2-
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
3-
<style type="text/css">
4-
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
5-
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
6-
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
7-
</style>
82
<div id="mc_embed_signup">
9-
<form action="//algolia.us3.list-manage.com/subscribe/post?u=f7b8acc6ec97794a08484ca9b&amp;id=285b80e148" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
10-
<div id="mc_embed_signup_scroll">
11-
<h4>Subscribe to our mailing list</h4>
12-
<div class="mc-field-group">
13-
<label for="mce-EMAIL">Email Address </label>
14-
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
15-
</div>
16-
<div id="mce-responses" class="clear">
17-
<div class="response" id="mce-error-response" style="display:none"></div>
18-
<div class="response" id="mce-success-response" style="display:none"></div>
19-
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
20-
<div style="position: absolute; left: -5000px;"><input type="text" name="b_f7b8acc6ec97794a08484ca9b_285b80e148" tabindex="-1" value=""></div>
21-
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
3+
<form action="//algolia.us3.list-manage.com/subscribe/post?u=f7b8acc6ec97794a08484ca9b&amp;id=285b80e148" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
4+
<div id="mc_embed_signup_scroll">
5+
<h3>Signup for our newsletter</h3>
6+
<div class="spacer20"></div>
7+
<div class="input-group">
8+
<span class="input-group-addon" id="sizing-addon1"><i class="fa fa-envelope-o"></i></span>
9+
<input type="email" value="" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Email Address">
10+
<span class="input-group-btn">
11+
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary">
12+
</span>
2213
</div>
23-
</form>
14+
<div id="mce-responses" class="clear">
15+
<div class="response" id="mce-error-response" style="display:none"></div>
16+
<div class="response" id="mce-success-response" style="display:none"></div>
17+
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
18+
<div style="position: absolute; left: -5000px;"><input type="text" name="b_f7b8acc6ec97794a08484ca9b_285b80e148" tabindex="-1" value=""></div>
19+
</div>
20+
</form>
2421
</div>
2522
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
2623
<!--End mc_embed_signup-->

‎docs/_plugins/svg.rb

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module Jekyll
2+
3+
class SvgTag < Liquid::Tag
4+
def initialize(tag_name, svg, tokens)
5+
super
6+
@svg = svg.strip
7+
end
8+
9+
def render(context)
10+
# make sure the SVG is on a single line to be HAML compliant
11+
File.read(@svg).strip.gsub("\n", ' ')
12+
end
13+
end
14+
end
15+
16+
Liquid::Template.register_tag('svg', Jekyll::SvgTag)

‎docs/css/_footer.sass

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@ footer.site-footer
22
padding-top: 2em
33
border-top: 1px solid $gray-lighter
44
text-align: center
5+
.input-group-addon
6+
background-color: transparent

‎docs/css/_home.sass

Lines changed: 122 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ html, body
44
background-attachment: fixed
55
position: relative
66

7+
.logo
8+
svg
9+
height: 70px
710

811
// scroll down
912
#space-overlay:after
@@ -25,28 +28,13 @@ html, body
2528
.navbar-nav > .active > a
2629
color: #1D96C7 !important
2730

28-
.widget-intro
29-
font-weight: 300
30-
opacity: 0
31-
animation: arrow 1s ease-in-out
32-
animation-fill-mode: forwards
33-
.w-1
34-
animation-delay: 0
35-
.w-2
36-
animation-delay: .5s
37-
.w-3
38-
animation-delay: 1s
39-
.w-4
40-
animation-delay: 1.5s
4131

4232
footer.site-footer
4333
background-color: white
4434
margin-top: 0
4535

46-
47-
4836
.window
49-
padding: 500px 0 200px
37+
padding: 400px 0 200px
5038
width: 100%
5139
display: block
5240
color: white
@@ -121,75 +109,133 @@ h2
121109
color: white
122110
pointer-events: none
123111

112+
.path
113+
stroke-dasharray: 10
114+
animation: dash 20s linear infinite reverse
115+
116+
.path2
117+
stroke-dasharray: 10
118+
animation: dash 20s linear infinite
119+
120+
@keyframes dash
121+
to
122+
stroke-dashoffset: 1000
123+
124+
#anim-overlay
125+
position: absolute
126+
top: 0
127+
left: 0
128+
z-index: 9999
129+
opacity: 0
130+
.widget-intro
131+
font-weight: 300
132+
position: absolute
133+
width: 240px
134+
img
135+
position: relative
136+
float: left
137+
top: -6px
138+
.w-1
139+
top: -60px
140+
left: 340px
141+
.w-2
142+
top: 440px
143+
left: 60px
144+
.w-3
145+
top: -40px
146+
left: 40px
147+
.w-4
148+
top: 140px
149+
left: 450px
150+
.illus-sync
151+
opacity: 0
152+
position: absolute
153+
top: 350px
154+
left: 350px
155+
156+
157+
158+
.screen
159+
opacity: 0
160+
z-index: 1200
161+
width: 420px
162+
height: 400px
163+
background-color: white
164+
border-radius: 10px
165+
position: absolute
166+
.screen-1
167+
top: 0
168+
left: 460px
169+
.screen-2
170+
top: 440px
171+
left: 0
172+
.screen-3
173+
top: 440px
174+
left: 460px
175+
124176
#anim
177+
opacity: 0
125178
z-index: 1200
126179
width: 420px
127180
height: 400px
128181
background-color: white
129182
border-radius: 10px
130183
position: relative
131-
transition: all
132-
perspective: 700px
184+
perspective: 1200px
133185
transform-style: preserve-3d
134-
.screen
135-
position: absolute
136-
opacity: 0
137-
.screen-1
138-
top: 0
139-
left: 460px
140-
.screen-2
141-
top: 440px
142-
left: 0
143-
.screen-3
144-
top: 440px
145-
left: 460px
186+
img
187+
border-radius: 10px
146188
.widget
147-
background-color: #1D96C7
189+
background-color: rgba(#1D96C7,.4)
148190
position: absolute
149-
opacity: .9
150-
.widget-1
151-
//searchbox
152-
width: 400px
153-
height: 30px
154-
top: 10px
155-
left: 10px
156-
.widget-2
157-
//results
158-
width: 250px
159-
height: 310px
160-
top: 50px
161-
left: 160px
162-
.widget-3
163-
//facet
164-
width: 140px
165-
height: 80px
166-
top: 50px
167-
left: 10px
168-
.widget-4
169-
//facet
170-
width: 140px
171-
height: 80px
172-
top: 140px
173-
left: 10px
174-
.widget-5
175-
//facet
176-
width: 140px
177-
height: 80px
178-
top: 230px
179-
left: 10px
180-
.widget-6
181-
//facet
182-
width: 140px
183-
height: 70px
184-
top: 320px
185-
left: 10px
186-
.widget-7
187-
//pagination
188-
width: 250px
189-
height: 20px
190-
top: 370px
191-
left: 160px
192-
191+
transform-style: preserve-3d
192+
.legend
193+
font-size: 1.2em
194+
border-left: solid 2px white
195+
padding: 0 0 60px 10px
196+
197+
.widget-1
198+
//searchbox
199+
width: 280px
200+
height: 30px
201+
top: 10px
202+
right: 10px
203+
.widget-2
204+
//results
205+
width: 280px
206+
height: 270px
207+
top: 70px
208+
right: 10px
209+
.widget-3
210+
//facet
211+
width: 110px
212+
height: 50px
213+
top: 50px
214+
left: 10px
215+
.widget-4
216+
//facet
217+
width: 110px
218+
height: 70px
219+
top: 110px
220+
left: 10px
221+
.widget-5
222+
//facet
223+
width: 110px
224+
height: 110px
225+
top: 190px
226+
left: 10px
227+
.widget-6
228+
//facet
229+
width: 110px
230+
height: 80px
231+
top: 310px
232+
left: 10px
233+
.widget-7
234+
//pagination
235+
width: 170px
236+
height: 20px
237+
top: 350px
238+
right: 60px
193239

194240
footer.site-footer
195241
text-align: center
@@ -201,4 +247,4 @@ footer.site-footer
201247
transform: translateY(-16px)
202248
100%
203249
opacity: 1
204-
transform: translateY(0)
250+
transform: translateY(0)

‎docs/img/Rectangle 74 Copy 8.png

8.11 KB
Loading

‎docs/img/drone-search.png

238 KB
Loading

0 commit comments

Comments
 (0)