1
0
Fork 0

chore(docs): landing

This commit is contained in:
Shipow 2015-12-23 01:36:59 +01:00
parent 121df58f88
commit 158534cf61
4 changed files with 70 additions and 55 deletions

View file

@ -25,8 +25,6 @@
<script src="//cdn.jsdelivr.net/jquery/2.1/jquery.min.js"></script>
<script src="{{ "/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
<script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
{% if site.env == 'development' %}
<script>

View file

@ -315,4 +315,3 @@ sub {
.bg-white {
background-color: white; }

View file

@ -35,6 +35,11 @@ html, body {
.navbar-nav > li > a {
padding-bottom: 0;
}
.fa-github {
font-size: 1.6em;
position: relative;
top: -2px
}
}
}
@ -74,16 +79,17 @@ html, body {
/* JOIN FORM
// ------------------------- */
#join-form {
#join-form, #join-form-2 {
background: #242E3A;
display: block;
width: 400px;
padding: 5px 10px;
padding: 20px;
margin: 0 auto;
border-radius: 6px;
color: #FFF;
max-width: 90%;
h3 {
font-size: 22px;
text-align: center;
padding-bottom: 20px;
border-bottom: 1px solid #3A434E;
@ -93,10 +99,25 @@ html, body {
font-weight: normal;
}
p {
margin-top: 5px;
font-size: 13px;
margin-top: 8px;
font-size: 14px;
letter-spacing: .5px;
color: #C7C4C4;
font-style: italic;
}
.form-control {
border: none;
}
.input-group-addon {
background: white;
border: none;
border-right: solid 1px #ccc;
}
.btn {
background-color: #FF2E6C;
border: none;
font-size: 14px;
letter-spacing: 2px;
font-weight: bold;
}
}
@ -145,45 +166,39 @@ h2.page-section-title:after {
#section_why {
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
}
@media (min-width: 600px) {
#section_why {
font-size: 18px;
@media (min-width: 600px) {
padding-left: 120px;
padding-right: 120px;
}
}
#section_examples {
font-size: 18px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
#section_examples a {
color: #C7C4C4;
}
#section_examples a:hover {
color: #46AEDA;
text-decoration: none;
}
#section_examples .showcase {
margin-top: 40px;
text-align: center;
}
@media (min-width: 600px) {
#section_examples {
padding-left: 0px;
padding-right: 0px;
a {
color: #C7C4C4;
&:hover {
color: #46AEDA;
text-decoration: none;
}
}
.showcase {
margin-top: 40px;
text-align: center;
img.logo {
display: inline-block;;
height: 60px;
margin-bottom: 20px;
}
img.example {
width: 100%;
}
}
}
#section_examples .showcase img.logo {
display: inline-block;;
height: 60px;
margin-bottom: 20px;
}
#section_examples .showcase img.example {
width: 100%;
}
#section_how h3 .how-it-works-number {
float: left;
line-height: 35px;
@ -204,24 +219,10 @@ h2.page-section-title:after {
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 600px) {
#section_how p {
padding-left: 0px;
padding-right: 0px;
}
}
#section_get-started {
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
}
@media (min-width: 600px) {
#section_get-started {
padding-left: 120px;
padding-right: 120px;
}
}
#section_get-started {
font-size: 18px;
}
/* FOOTER
// ------------------------- */

View file

@ -38,7 +38,7 @@ layout: default
.m800.m-l-r-auto
%h2.page-section-title Why DocSearch?
%p Were scratching our own itch here. As developers, we spend a lot of time reading documentation, and it isnt always easy to find the information we need.
%p Not blaming anyone here. Building a good search for a documentation is a complex challenge.We happen to have a lot of experience doing that, and we want to share it with the world. For free.
%p Not blaming anyone here. Building a good search for a documentation is a complex challenge.We happen to have a lot of experience doing that, and we want to share it with the world.
#section_examples.page-section.page-section-dark
.container
.text-center
@ -98,10 +98,27 @@ layout: default
%p Well send you a few lines to code to integrate Algolia autocomplete and power your search.
%p You will receive the same speed, relevance and best-in-class UX as our paying customers.
#section_get-started.page-section.page-section-dark
.m800
.m900.m-l-r-auto
%h2.page-section-title Get started
%p Add the url of your documentation site and your email to the form at the top of the page. Well get back to you with what you need to integrate your new search into your website.
%p Dont forget, DocSearch is completely free! Theres no need to sign up for Algolia or submit any payment information. Lets tackle document search together.
.spacer30
%form#join-form-2{action: '#', method: 'POST'}
.input-group
%span.input-group-addon
%i.fa.fa-fw.fa-envelope-o
%input.form-control{type: 'email', placeholder: 'you@example.org', name: 'email'}
%p.text-sm Well crawl the documentation pages of your website and index them on Algolia.
.spacer20
.input-group
%span.input-group-addon
%i.fa.fa-fw.fa-globe
%input.form-control{type: 'text', placeholder: 'https://website.com/doc', name: 'url'}
%p.text-sm Well email you the code you need to integrate the search into your documentation.
.spacer20
.text-center
%button.btn.btn-primary.btn-lg{type: 'submit'}
JOIN THE BETA!
<script src="js/animation.js"></script>