diff --git a/docs-src/src/assets/images/algolia-fast-bg.svg b/docs-src/src/assets/images/algolia-fast-bg.svg
index c2466f3..2b3ae6f 100644
--- a/docs-src/src/assets/images/algolia-fast-bg.svg
+++ b/docs-src/src/assets/images/algolia-fast-bg.svg
@@ -1 +1,75 @@
-
+
+
+
diff --git a/docs-src/src/layouts/index.pug b/docs-src/src/layouts/index.pug
index 6c77e38..5ac03bc 100644
--- a/docs-src/src/layouts/index.pug
+++ b/docs-src/src/layouts/index.pug
@@ -3,24 +3,26 @@ extends ./common/meta.pug
block body
section.hero.pos-rel
+ .spacer32.visible-sm
.flex-container.hero-top.container
- .flex-it-2.flex-container.flex-center
- .flex-none.w75
+ .flex-it-2.flex-it-1-sm.flex-container.flex-center
+ .flex-none.flex-it-1-sm
.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
.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").
Read the documentation
- .flex-it-2.flex-row-center-horizontal
- .flex-none.w50
+ .flex-it-2.flex-it-1-sm.flex-row-center-horizontal
+ .flex-none
.spacer64
.relative
img.hero-markdown(src="./assets/images/markdown.svg")
.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")
+ .spacer120.visible-sm
.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
.spacer16
.flex-container.flex-dir-row.flex-row-align-right
@@ -32,7 +34,8 @@ block body
| Live Demo
section.section-intro.pos-rel
- .spacer120
+ .spacer120.hidden-sm
+ .spacer40.visible-sm
.container.z-10.pos-rel
.row.m600.m-l-r-auto.text-center
h3.text-thin.text-lg Automatic Indexing
@@ -56,9 +59,11 @@ block body
section.section-explain.fill-titan.pos-rel
.container.z-10
- .col-md-12.home-funnel
- .col-md-5
- .card.pos-rel.funnel-extensible
+ .col-md-12.col-sm-12.home-funnel
+ .spacer120.visible-sm
+ .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
h2.text-lg.text-thin.m-t-none Extensible
.spacer16
@@ -68,11 +73,14 @@ block body
| custom Ruby hooks into the plugin lifecycle to get the exact
| output you want.
- .col-md-2.pos-rel.h700
- 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.
+ .col-md-2.col-sm-2.pos-rel.h700.hidden-sm.z-2
+ 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
.pos-rel.z-10.fill-white.elevation2.radius6.p-xlarge
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
| quota.
section.section-conclusion.fill-white.pos-rel
- .spacer120
+ .spacer120.hidden-sm
+ .spacer64.visible-sm
.container.pos-rel.z-10
.row.m600.m-l-r-auto.text-center
h3.text-thin.text-lg Index on deploy
@@ -93,4 +102,4 @@ block body
| and your site in sync!
.spacer120
- .spacer120
+ .spacer120.hidden-sm
diff --git a/docs-src/src/stylesheets/pages/_index.scss b/docs-src/src/stylesheets/pages/_index.scss
index 5db5df3..9aef2f1 100644
--- a/docs-src/src/stylesheets/pages/_index.scss
+++ b/docs-src/src/stylesheets/pages/_index.scss
@@ -1,3 +1,15 @@
+.container {
+ padding: 0;
+ margin: auto;
+}
+
+@media (max-width: $screen-sm) {
+ .row {
+ margin: 0;
+ padding: 0 1em;
+ }
+}
+
.hero {
&:after {
content: '';
@@ -19,19 +31,22 @@
background-repeat: no-repeat, no-repeat;
background-position: top left, bottom left;
background-size: 100%, 100%;
+
+ @media (max-width: $screen-sm) {
+ text-align: center;
+ }
}
.hero-top {
height: 544px;
- // background-image:
- // url(../assets/images/aerial-background-top.svg),
- // url(../assets/images/aerial-background-bottom.svg),
- // 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)),
- // linear-gradient(#413b7e, #413b7e);
- // background-repeat: no-repeat, no-repeat;
- // background-position: top left, bottom left;
- // background-size: 100%, 100%;
+
+ @media (max-width: $screen-sm) {
+ flex-flow: row wrap;
+
+ .text-heading {
+ font-size: 28px;
+ }
+ }
}
.hero-animated {
@@ -39,6 +54,27 @@
width: 560px;
left: -110px;
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 {
@@ -61,6 +97,19 @@
// Section explain
.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
@@ -81,6 +130,43 @@
.home-funnel {
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 {
content: '';
display: block;
@@ -96,13 +182,25 @@
url(../assets/images/servers.svg) 425px 100% no-repeat;
pointer-events: none;
z-index: 10;
+
+ @media (max-width: $screen-sm) {
+ background: none
+ }
}
}
.funnel-extensible {
- margin-top: 245px;
+ margin-top: 240px;
+ @media (max-width: $screen-sm) {
+ margin-top: 200px;
+ }
}
.funnel-incremental {
margin-top: 420px;
+
+ @media (max-width: $screen-sm) {
+ margin-top: 80px;
+ margin-bottom: 120px;
+ }
}
#text-lines {
@@ -125,6 +223,14 @@
top: 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%;
right: -100px;
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{
@@ -150,11 +274,16 @@
animation-direction: reverse
}
+
will-change: transform;
animation-name: floating;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
+
+ @media (max-width: $screen-sm) {
+ animation: none
+ }
}
@@ -170,6 +299,13 @@
top: -90px;
z-index: 2;
}
+
+ @media (max-width: $screen-sm) {
+ .row.m600 {
+ max-width: 100%;
+ text-align: left;
+ }
+ }
}
diff --git a/docs-src/src/stylesheets/partials/_helpers.sass b/docs-src/src/stylesheets/partials/_helpers.sass
index 8438608..c9924f6 100644
--- a/docs-src/src/stylesheets/partials/_helpers.sass
+++ b/docs-src/src/stylesheets/partials/_helpers.sass
@@ -3,4 +3,7 @@
font-size: 48px
.h-auto
- height: auto
\ No newline at end of file
+ height: auto
+
+.m-l-n-large
+ margin-left: -26px
\ No newline at end of file