sharpetronics/jekyll-algolia
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Responsive done

Browse Source
This commit is contained in:
Lucas Bonomi 2018-01-25 15:20:46 +01:00
parent 8b4f221e3f
commit fc1c63d061
4 changed files with 248 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
docs-src/src/assets/images/algolia-fast-bg.svg
View File

@ -1 +1,75 @@
<svg width="1721" height="405" viewBox="0 0 1721 405" xmlns="http://www.w3.org/2000/svg"><title>Slice</title><defs><linearGradient x1="1.736%" y1="96.745%" y2="2.447%" id="a"><stop stop-color="#00AEFF" offset="0%"/><stop stop-color="#3369E6" offset="34.64%"/><stop stop-color="#8136CE" offset="100%"/></linearGradient><linearGradient x1="14.764%" y1="50%" x2="94.5%" y2="50%" id="b"><stop stop-color="#FFF" stop-opacity="0" offset="0%"/><stop stop-color="#FFF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M441.01 37H2169v421.5H441.01V37z" fill="url(#a)" transform="matrix(-1 0 0 1 2166.01 -49)"/><path d="M1138 313h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H1138V313zM477 118h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H477V118z" fill="url(#b)" style="mix-blend-mode:overlay" opacity=".2" transform="translate(-444 -49)"/><path d="M732 265h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H732V265zM0 175h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H0V175zM184 403h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H184V403zM1235 146h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H1235V146zM216 45h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H216V45z" fill="url(#b)" style="mix-blend-mode:overlay" opacity=".2" transform="translate(-444 -49)"/><path d="M569 372h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H569V372z" fill="url(#b)" style="mix-blend-mode:overlay" opacity=".2" transform="translate(-444 -49)"/><path d="M980 388h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H980V388z" fill="url(#b)" style="mix-blend-mode:overlay" opacity=".2" transform="translate(-444 -49)"/><path d="M1291 448h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H1291V448zM788 45h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H788V45z" fill="url(#b)" style="mix-blend-mode:overlay" opacity=".2" transform="translate(-444 -49)"/><path d="M1138 0h961.037c24.827 0 44.953 20.122 44.953 44.955 0 24.828-20.123 44.955-44.953 44.955H1138V0z" fill="url(#b)" style="mix-blend-mode:overlay" opacity=".2" transform="translate(-444 -49)"/></g></svg> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1721 405" style="enable-background:new 0 0 1721 405;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{opacity:0.2;fill:url(#SVGID_2_);}
.st2{opacity:0.2;fill:url(#SVGID_3_);}
.st3{opacity:0.2;fill:url(#SVGID_4_);}
.st4{opacity:0.3;fill:url(#SVGID_5_);}
.st5{opacity:0.2;fill:url(#SVGID_6_);}
.st6{opacity:0.2;fill:url(#SVGID_7_);}
.st7{opacity:0.2;fill:url(#SVGID_8_);}
.st8{opacity:0.1;fill:url(#SVGID_9_);}
.st9{opacity:0.2;fill:url(#SVGID_10_);}
.st10{opacity:0.2;fill:url(#SVGID_11_);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="563.341" y1="622.4076" x2="564.3237" y2="623.3506" gradientTransform="matrix(-1727.99 0 0 -421.5 975146.375 262739.625)">
<stop offset="0" style="stop-color:#00AEFF"/>
<stop offset="0.3464" style="stop-color:#3369E6"/>
<stop offset="1" style="stop-color:#8136CE"/>
</linearGradient>
<path class="st0" d="M1725-12H-3v421.5h1728V-12z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1046.1437" y1="-4308.4199" x2="1682.1683" y2="-4308.4199" gradientTransform="matrix(1 0 0 7.987834e-03 0 401.7649)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<path class="st1" d="M1534.9,409.5H-3v-84.3h1537.9c23.3,0,42.1,18.9,42.1,42.1v0C1577.1,390.6,1558.2,409.5,1534.9,409.5z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="740.8774" y1="-14861.9697" x2="1191.838" y2="-14861.9697" gradientTransform="matrix(1 0 0 7.987834e-03 0 401.7649)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<path class="st2" d="M1325.5,325.2H-3v-84.3h1328.5c23.3,0,42.1,18.9,42.1,42.1v0C1367.7,306.3,1348.8,325.2,1325.5,325.2z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="878.0895" y1="-25415.5195" x2="1412.2334" y2="-25415.5195" gradientTransform="matrix(1 0 0 7.987834e-03 0 401.7649)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<rect x="-3" y="156.6" class="st3" width="1728" height="84.3"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="719.771" y1="-35969.0703" x2="1157.9362" y2="-35969.0703" gradientTransform="matrix(1 0 0 7.987834e-03 0 401.7649)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<path class="st4" d="M1196.9,156.6H-3V72.3h1199.8c23.3,0,42.2,18.9,42.2,42.1v0C1239,137.7,1220.1,156.6,1196.9,156.6z"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="921.9622" y1="-46522.6211" x2="1482.7032" y2="-46522.6211" gradientTransform="matrix(1 0 0 7.987834e-03 0 401.7649)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<path class="st5" d="M1440.4,72.3H-3V-12h1443.4c23.3,0,42.1,18.9,42.1,42.1v0C1482.5,53.4,1463.7,72.3,1440.4,72.3z"/>
<title>Slice</title>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="122.4733" y1="367.35" x2="800.0635" y2="367.35">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<path class="st6" d="M804.7,409.5H-3v-84.3h807.6c23.3,0,42.1,18.9,42.1,42.1v0C846.8,390.6,827.9,409.5,804.7,409.5z"/>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="76.9093" y1="283.05" x2="508.4219" y2="283.05">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<path class="st7" d="M496,325.2H-3v-84.3h499c23.3,0,42.1,18.9,42.1,42.1v0C538.2,306.3,519.3,325.2,496,325.2z"/>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="151.9346" y1="198.75" x2="988.6369" y2="198.75">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<path class="st8" d="M1004.2,240.9H-3v-84.3h1007.2c23.3,0,42.2,18.9,42.2,42.1v0C1046.4,222,1027.5,240.9,1004.2,240.9z"/>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="114.8298" y1="114.45" x2="751.14" y2="114.45">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<path class="st9" d="M752.9,156.6H-3V72.3h755.9c23.3,0,42.1,18.9,42.1,42.1v0C795,137.7,776.2,156.6,752.9,156.6z"/>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="48.9211" y1="30.15" x2="329.2777" y2="30.15">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<path class="st10" d="M306.5,72.3H-3V-12h309.5c23.3,0,42.1,18.9,42.1,42.1v0C348.6,53.4,329.7,72.3,306.5,72.3z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

37
docs-src/src/layouts/index.pug
View File

@ -3,24 +3,26 @@ extends ./common/meta.pug
block body block body
section.hero.pos-rel section.hero.pos-rel
.spacer32.visible-sm
.flex-container.hero-top.container .flex-container.hero-top.container
.flex-it-2.flex-container.flex-center .flex-it-2.flex-it-1-sm.flex-container.flex-center
.flex-none.w75 .flex-none.flex-it-1-sm
.text-heading.color-titan-white.text-bold Algolia for Jekyll .text-heading.color-titan-white.text-bold Algolia for Jekyll
.color-titan-white.text-regular.text-thin Add fast and relevant search to your Jekyll site .color-titan-white.text-regular.text-thin Add fast and relevant search to your Jekyll site
.spacer32 .spacer32
a.btn.color-purple-heart.fill-titan-white.text-bold.elevation0.m-t-large.p-small.p-l-xlarge.p-r-xlarge.h-auto(href="getting-started.html"). a.btn.color-purple-heart.fill-titan-white.text-bold.elevation0.m-t-large.p-small.p-l-xlarge.p-r-xlarge.h-auto(href="getting-started.html").
Read the documentation Read the documentation
<i class="icon icon-arrow-right"></i> <i class="icon icon-arrow-right"></i>
.flex-it-2.flex-row-center-horizontal .flex-it-2.flex-it-1-sm.flex-row-center-horizontal
.flex-none.w50 .flex-none
.spacer64 .spacer64
.relative .relative
img.hero-markdown(src="./assets/images/markdown.svg") img.hero-markdown(src="./assets/images/markdown.svg")
.hero-animated .hero-animated
img.js-freeze.w100p.radius6.elevation2.pos-rel.z-20(src="http://res.cloudinary.com/hilnmyskv/image/upload/v1516723333/minima-search_ay0ezw.gif") img.js-freeze.w100p.radius6.elevation2.pos-rel.z-20(src="http://res.cloudinary.com/hilnmyskv/image/upload/v1516723333/minima-search_ay0ezw.gif")
.spacer120.visible-sm
.flex-container.hero-bottom .flex-container.hero-bottom
.flex-it-2.flex-dir-col.p-xlarge.pos-rel.z-10 .flex-it-2.flex-it-1-sm.flex-dir-col.p-xlarge.pos-rel.z-10
.flex-none.align-right.text-lg Demo .flex-none.align-right.text-lg Demo
.spacer16 .spacer16
.flex-container.flex-dir-row.flex-row-align-right .flex-container.flex-dir-row.flex-row-align-right
@ -32,7 +34,8 @@ block body
| Live Demo | Live Demo
section.section-intro.pos-rel section.section-intro.pos-rel
.spacer120 .spacer120.hidden-sm
.spacer40.visible-sm
.container.z-10.pos-rel .container.z-10.pos-rel
.row.m600.m-l-r-auto.text-center .row.m600.m-l-r-auto.text-center
h3.text-thin.text-lg Automatic Indexing h3.text-thin.text-lg Automatic Indexing
@ -56,9 +59,11 @@ block body
section.section-explain.fill-titan.pos-rel section.section-explain.fill-titan.pos-rel
.container.z-10 .container.z-10
.col-md-12.home-funnel .col-md-12.col-sm-12.home-funnel
.col-md-5 .spacer120.visible-sm
.card.pos-rel.funnel-extensible .spacer120.visible-sm
.col-md-5.col-sm-5
.card.pos-rel.z-10.funnel-extensible
.pos-rel.z-10.fill-white.elevation2.radius6.p-xlarge .pos-rel.z-10.fill-white.elevation2.radius6.p-xlarge
h2.text-lg.text-thin.m-t-none Extensible h2.text-lg.text-thin.m-t-none Extensible
.spacer16 .spacer16
@ -68,11 +73,14 @@ block body
| custom Ruby hooks into the plugin lifecycle to get the exact | custom Ruby hooks into the plugin lifecycle to get the exact
| output you want. | output you want.
.col-md-2.pos-rel.h700 .col-md-2.col-sm-2.pos-rel.h700.hidden-sm.z-2
p#text-lines.w100p.m-l-n-small.faded Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa aspernatur dolore tempora est facere quam temporibus similique, expedita. p#text-lines.w100p.m-l-n-large.faded Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa aspernatur dolore tempora est facere quam temporibus similique, expedita.
.col-md-2.col-sm-2.pos-rel.visible-sm
p#text-lines.w100p.faded Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa aspernatur dolore tempora est facere quam temporibus similique, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa
.col-md-5 .col-md-5.col-sm-5
.card.pos-rel.funnel-incremental .card.pos-rel.funnel-incremental
.pos-rel.z-10.fill-white.elevation2.radius6.p-xlarge .pos-rel.z-10.fill-white.elevation2.radius6.p-xlarge
h2.text-lg.text-thin.m-t-none Incremental h2.text-lg.text-thin.m-t-none Incremental
@ -82,7 +90,8 @@ block body
| between two runs. This helps make the most out of your Algolia | between two runs. This helps make the most out of your Algolia
| quota. | quota.
section.section-conclusion.fill-white.pos-rel section.section-conclusion.fill-white.pos-rel
.spacer120 .spacer120.hidden-sm
.spacer64.visible-sm
.container.pos-rel.z-10 .container.pos-rel.z-10
.row.m600.m-l-r-auto.text-center .row.m600.m-l-r-auto.text-center
h3.text-thin.text-lg Index on deploy h3.text-thin.text-lg Index on deploy
@ -93,4 +102,4 @@ block body
| and your site in sync! | and your site in sync!
.spacer120 .spacer120
.spacer120 .spacer120.hidden-sm

156
docs-src/src/stylesheets/pages/_index.scss
View File

@ -1,3 +1,15 @@
.container {
padding: 0;
margin: auto;
}
@media (max-width: $screen-sm) {
.row {
margin: 0;
padding: 0 1em;
}
}
.hero { .hero {
&:after { &:after {
content: ''; content: '';
@ -19,19 +31,22 @@
background-repeat: no-repeat, no-repeat; background-repeat: no-repeat, no-repeat;
background-position: top left, bottom left; background-position: top left, bottom left;
background-size: 100%, 100%; background-size: 100%, 100%;
@media (max-width: $screen-sm) {
text-align: center;
}
} }
.hero-top { .hero-top {
height: 544px; height: 544px;
// background-image:
// url(../assets/images/aerial-background-top.svg), @media (max-width: $screen-sm) {
// url(../assets/images/aerial-background-bottom.svg), flex-flow: row wrap;
// linear-gradient(to bottom, rgba(62, 56, 107, 0), #0e0740),
// linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)), .text-heading {
// linear-gradient(#413b7e, #413b7e); font-size: 28px;
// background-repeat: no-repeat, no-repeat; }
// background-position: top left, bottom left; }
// background-size: 100%, 100%;
} }
.hero-animated { .hero-animated {
@ -39,6 +54,27 @@
width: 560px; width: 560px;
left: -110px; left: -110px;
top: 150px; top: 150px;
@media (max-width: $screen-sm) {
width: 316px;
left: 0;
right: 0;
margin: auto;
}
}
.hero-bottom {
@media (max-width: $screen-sm) {
text-align: center;
.align-right {
text-align: center;
}
.flex-row-align-right {
justify-content: center;
}
}
} }
.home-code { .home-code {
@ -61,6 +97,19 @@
// Section explain // Section explain
.section-intro { .section-intro {
@media (max-width: $screen-sm) {
.row.m600 {
max-width: 100%;
text-align: left;
}
}
}
.home-code {
@media (max-width: $screen-sm) {
font-size: 12px;
max-width: 100%;
}
} }
// Section explain // Section explain
@ -81,6 +130,43 @@
.home-funnel { .home-funnel {
height: 825px; height: 825px;
@media (max-width: $screen-sm) {
height: 1400px;
.col-md-5:not(:last-child) {
&:before {
content: '';
display: block;
width: 200px;
height: 200px;
position: absolute;
z-index: 20;
top: -350px;
left: 0;
right: 0;
margin: auto;
background: url(../assets/images/illu-funnel.svg) no-repeat center center / contain;
}
}
.col-md-5:last-child {
margin-top: 110px;
&:before {
content: '';
display: block;
width: 200px;
height: 200px;
position: absolute;
z-index: 20;
bottom: -350px;
left: 0;
right: 0;
margin: auto;
background: url(../assets/images/servers.svg) no-repeat center center / contain;
}
}
}
&:after { &:after {
content: ''; content: '';
display: block; display: block;
@ -96,13 +182,25 @@
url(../assets/images/servers.svg) 425px 100% no-repeat; url(../assets/images/servers.svg) 425px 100% no-repeat;
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
@media (max-width: $screen-sm) {
background: none
}
} }
} }
.funnel-extensible { .funnel-extensible {
margin-top: 245px; margin-top: 240px;
@media (max-width: $screen-sm) {
margin-top: 200px;
}
} }
.funnel-incremental { .funnel-incremental {
margin-top: 420px; margin-top: 420px;
@media (max-width: $screen-sm) {
margin-top: 80px;
margin-bottom: 120px;
}
} }
#text-lines { #text-lines {
@ -125,6 +223,14 @@
top: 0; top: 0;
left: 0; left: 0;
} }
@media (max-width: $screen-sm) {
width: 1000px;
&:after {
background: linear-gradient(to right, #f8faff, transparent 10%, #f8faff)
}
}
} }
@ -139,7 +245,25 @@
top: 35%; top: 35%;
right: -100px; right: -100px;
z-index: 0; z-index: 0;
}
@media (max-width: $screen-sm) {
&:after {
display: none;
}
&:before {
content: '';
display: block;
width: 100px;
height: 100px;
position: absolute;
z-index: 20;
top: -50px;
left: 0;
right: 0;
margin: auto;
background: url(../assets/images/touch-point.svg)no-repeat center center / contain;
}
} }
&.funnel-incremental{ &.funnel-incremental{
@ -150,11 +274,16 @@
animation-direction: reverse animation-direction: reverse
} }
will-change: transform; will-change: transform;
animation-name: floating; animation-name: floating;
animation-duration: 10s; animation-duration: 10s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
@media (max-width: $screen-sm) {
animation: none
}
} }
@ -170,6 +299,13 @@
top: -90px; top: -90px;
z-index: 2; z-index: 2;
} }
@media (max-width: $screen-sm) {
.row.m600 {
max-width: 100%;
text-align: left;
}
}
} }

3
docs-src/src/stylesheets/partials/_helpers.sass
View File

@ -4,3 +4,6 @@
.h-auto .h-auto
height: auto height: auto
.m-l-n-large
margin-left: -26px