diff --git a/docs/.DS_Store b/docs/.DS_Store new file mode 100644 index 00000000..c5756bed Binary files /dev/null and b/docs/.DS_Store differ diff --git a/docs/_includes/header.html b/docs/_includes/header.html index 4d1938e5..c0b5e67b 100644 --- a/docs/_includes/header.html +++ b/docs/_includes/header.html @@ -1,22 +1,18 @@ +
-
+ \ No newline at end of file diff --git a/docs/_includes/newsletter-mc.html b/docs/_includes/newsletter-mc.html index 776a4c07..3634f969 100644 --- a/docs/_includes/newsletter-mc.html +++ b/docs/_includes/newsletter-mc.html @@ -2,21 +2,21 @@
-

Signup for our newsletter

-
-
- - - - - -
-
- - -
-
+

Sign up for our newsletter

+
+
+ + + + +
+
+ + +
+
+
diff --git a/docs/css/_home.scss b/docs/css/_home.scss index c82a9fd7..5e74f7e2 100644 --- a/docs/css/_home.scss +++ b/docs/css/_home.scss @@ -1,22 +1,134 @@ +/* COLORS +// ------------------------- +#46AEDA Algolia blue +#FF2E6C Radical Red +#091724 Black Pearl +#C7C4C4 Gray text +*/ + +/* GENERAL +// ------------------------- */ html, body { position: relative; - @include size(100%,100%); - background-attachment: fixed; } - -h2 { - font-size: 1.8em; - font-weight: normal; - letter-spacing: 1px; - margin-bottom: 1em; + width: 100%; + height: 100%; + background-attachment: fixed; + font-family: "Raleway", "Open Sans", Helvetica, Arial, sans-serif; } -.showcase--image { - max-width: 200px; + + +/* HEADER +// ------------------------- */ +header.site-header { + position: fixed; + top: 0; + width: 100%; + z-index: 99; + background: linear-gradient(to right, rgba(10, 23, 36, 0.8) -50%, rgba(23, 44, 79, 0.5) 100%); + transition: background 2s ease; + border-bottom: 1px solid #232E3A; +} +header.site-header nav.navbar { + margin-bottom: 0; + background-color: #0B1724; + border-radius: 0; + border: none; +} +header.site-header nav.navbar .navbar-collapse.in { + background-color: #0B1724 !important; + animation: fadeInUp .2s ease-in-out; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 20%; + font-size: 1.2em; +} +header.site-header nav.navbar .navbar-collapse.in li { + padding-bottom: 1em; +} +header.site-header nav.navbar #logo img { + height: 32px; + margin-right: 12px; +} +header.site-header nav.navbar .navbar-header { + position: relative; + z-index: 2; + height: 50px; + font-size: 16px; + color: #FF2E6C; + line-height: 50px; +} +header.site-header nav.navbar .navbar-toggle { + background-color: #1d96c7; + border: solid 1px #1d96c7; + color: white; +} +header.site-header nav.navbar .navbar-toggle.collapsed { + background-color: transparent; + border: solid 1px rgba(255, 255, 255, 0.4); + color: white; +} +header.site-header nav.navbar .navbar-nav > li > a { + padding-bottom: 0; +} +header.site-header nav.navbar .navbar-nav > .active > a { + color: #1D96C7 !important; + background-color: transparent; +} +header.site-header nav.navbar .navbar-nav > li > a.navbar-github-link { + font-size: 32px; + padding-top: 10px; +} +header.site-header nav.navbar .navbar-nav > li > a.navbar-github-link:hover { + color: #46AEDA; + text-decoration: none; } -.jumbotron { + + + +/* JUMBOTRON +// ------------------------- */ +.main-content .jumbotron { + padding-top: 60px; + height: 700px; + background: #091724 url(../img/header-bg.png) no-repeat center center; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + margin-bottom: 0; +} +.jumbotron .jumbotron-header { + text-align: center; + color: #FFF; +} +.jumbotron .jumbotron-header h1 { + font-size: 60px; + font-weight: 500; + font-family: "Helvetica Neue", "Raleway", "Open Sans", Helvetica, Arial, sans-serif; +} +.jumbotron .jumbotron-header .big { + font-size: 90px; +} +.jumbotron .jumbotron-header .blue { + color: #46AEDA; +} +.jumbotron .jumbotron-left-column { + padding-top: 100px; + float: left; + width: 400px; + color: #FFF; + margin-left: 120px; } + + +/* JOIN FORM +// ------------------------- */ #join-form { background: white; display: block; @@ -25,15 +137,115 @@ h2 { border: 2px solid #ccc; } -@media (min-width: $screen-lg) { +@media (min-width: 1200px) { .jumbotron { height: 400px; } - #join-form { position: absolute; - top: 60px; - right: -20px; + top: 240px; + right: 120px; padding: 10px; } } + + + + +/* PAGE SECTIONS +// ------------------------- */ +.page-section { + padding-top: 100px; + padding-bottom: 60px; + font-size: 16px; + line-height: 1.8; + color: #091724; +} +.page-section-dark { + background-color: #091724; + color: #C7C4C4; +} +h2.page-section-title { + font-size: 28px; + text-transform: uppercase; + font-weight: 600; + margin-top: 0; + margin-bottom: 30px; + text-align: center; +} +.page-section-dark h2.page-section-title{ + color: #FFF; +} +h2.page-section-title:after { + display: block; + content: ' '; + height: 10px; + border-bottom: 3px solid #FF2E6C; + margin: 4px auto; + width: 60px; +} +#section_why { + padding-left: 120px; + padding-right: 120px; + font-size: 20px; +} +#section_examples { + font-size: 18px; + text-align: center; +} +#section_examples a { + color: #C7C4C4; +} +#section_examples a:hover { + color: #46AEDA; + text-decoration: none; +} +#section_examples .showcase { + margin-top: 40px; + text-align: center; +} +#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: 1; + color: #46AEDA; + font-size: 70px; + font-weight: bold; + font-family: "Helvetica Neue"; + position: relative; + top: -13px; + margin-right: 7px; +} +#section_how p { + clear: both; +} +#section_get-started { + padding-left: 120px; + padding-right: 120px; + font-size: 20px; +} + + +/* FOOTER +// ------------------------- */ +footer.site-footer { + padding-top: 2em; + margin-top: 0; + border-top: 1px solid #eeeeee; + background-color: white; + text-align: center; +} +footer.site-footer .fa.fa-heart { + color: #e61870; +} +footer.site-footer .input-group-addon { + background-color: transparent; +} + diff --git a/docs/img/.DS_Store b/docs/img/.DS_Store new file mode 100644 index 00000000..abdcfbb1 Binary files /dev/null and b/docs/img/.DS_Store differ diff --git a/docs/img/algolia-logo.svg b/docs/img/algolia-logo.svg new file mode 100644 index 00000000..90b85a18 --- /dev/null +++ b/docs/img/algolia-logo.svg @@ -0,0 +1 @@ +algolia-logoCreated with Sketch. \ No newline at end of file diff --git a/docs/img/header-bg.png b/docs/img/header-bg.png new file mode 100644 index 00000000..b6b5eaa9 Binary files /dev/null and b/docs/img/header-bg.png differ diff --git a/docs/img/showcase/.DS_Store b/docs/img/showcase/.DS_Store new file mode 100644 index 00000000..a0f3cd6c Binary files /dev/null and b/docs/img/showcase/.DS_Store differ diff --git a/docs/img/showcase/babeljs.png b/docs/img/showcase/babeljs.png deleted file mode 100644 index 8650bbfe..00000000 Binary files a/docs/img/showcase/babeljs.png and /dev/null differ diff --git a/docs/img/showcase/bootstrap.png b/docs/img/showcase/bootstrap.png deleted file mode 100644 index 1bea0e1e..00000000 Binary files a/docs/img/showcase/bootstrap.png and /dev/null differ diff --git a/docs/img/showcase/eslint.png b/docs/img/showcase/eslint.png deleted file mode 100644 index 24f48402..00000000 Binary files a/docs/img/showcase/eslint.png and /dev/null differ diff --git a/docs/img/showcase/example-eslint.gif b/docs/img/showcase/example-eslint.gif new file mode 100644 index 00000000..d8913e27 Binary files /dev/null and b/docs/img/showcase/example-eslint.gif differ diff --git a/docs/img/showcase/example-react.gif b/docs/img/showcase/example-react.gif new file mode 100644 index 00000000..a3fa153b Binary files /dev/null and b/docs/img/showcase/example-react.gif differ diff --git a/docs/img/showcase/example-scala.gif b/docs/img/showcase/example-scala.gif new file mode 100644 index 00000000..4148730a Binary files /dev/null and b/docs/img/showcase/example-scala.gif differ diff --git a/docs/img/showcase/logo-eslint.png b/docs/img/showcase/logo-eslint.png new file mode 100644 index 00000000..6a8db2e5 Binary files /dev/null and b/docs/img/showcase/logo-eslint.png differ diff --git a/docs/img/showcase/logo-react.png b/docs/img/showcase/logo-react.png new file mode 100644 index 00000000..aa75d2f8 Binary files /dev/null and b/docs/img/showcase/logo-react.png differ diff --git a/docs/img/showcase/logo-scala.png b/docs/img/showcase/logo-scala.png new file mode 100644 index 00000000..68da4fa4 Binary files /dev/null and b/docs/img/showcase/logo-scala.png differ diff --git a/docs/img/showcase/reactjs.png b/docs/img/showcase/reactjs.png deleted file mode 100644 index 3a24a589..00000000 Binary files a/docs/img/showcase/reactjs.png and /dev/null differ diff --git a/docs/index.haml b/docs/index.haml index b9ff1601..eb2a03ea 100644 --- a/docs/index.haml +++ b/docs/index.haml @@ -5,39 +5,76 @@ layout: default .main-content .jumbotron .container.pos-rel - %h1 Documentation Search - - %p Add relevant, fast and reliable search to your documentation website in minutes. - - %iframe#join-form{height: 356, allowTransparency: true, frameborder: 0, scrolling: 'no', src: '//www.formget.com/app/embed/form/H5IR-174988/i?w=328'} - - .container - %h1 Showcase - .row.text-center - .col-sm-3.showcase - %img.img-responsive{src: '/img/showcase/eslint.png'} - %p Eslint - .col-sm-3 - %img.img-responsive{src: '/img/showcase/babeljs.png'} - %p Babel - .col-sm-3 - %img.img-responsive{src: '/img/showcase/bootstrap.png'} - %p Bootstrap - .col-sm-3 - %img.img-responsive{src: '/img/showcase/reactjs.png'} - %p React - - %h1 Features - .row.text-center - .col-sm-4 - %img{src: 'http://placehold.it/200x200'} - %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, sit, veritatis tempora ipsum, provident fugiat quas, eum dicta architecto - .col-sm-4 - %img{src: 'http://placehold.it/200x200'} - %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, sit, veritatis tempora ipsum, provident fugiat quas, eum dicta architecto - .col-sm-4 - %img{src: 'http://placehold.it/200x200'} - %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, sit, veritatis tempora ipsum, provident fugiat quas, eum dicta architecto - - - %p Here are some examples of what you could build with docsearch. + .jumbotron-header + %h1.jumbotron-title + %span.blue + %span.big> D + OC + = succeed "EARCH" do + %span.big S + %p The easiest way to add search to your documentation. + .jumbotron-left-column + %p We’ve created the fastest, easiest way to search within documentation. + %p And best of all? It’s free! + %iframe#join-form{:allowTransparency => "", :frameborder => "0", :height => "356", :scrolling => "no", :src => "//www.formget.com/app/embed/form/H5IR-174988/i?w=328"} + #section_why.page-section + .container + .row + .col-sm-10.col-sm-offset-1 + %h2.page-section-title Why DocSearch? + %p We’re scratching our own itch here. As developers, we spend a lot of time reading documentation, and it isn’t 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. + #section_examples.page-section.page-section-dark + .container + .row + .col-sm-10.col-sm-offset-1 + %h2.page-section-title DocSearch is live + %p + We’ve integrated DocSearch into several open source projects. + %br Take a look. + .row + .col-sm-4.showcase + %a{:href => "//eslint.org/", :target => "_blank"} + %img.img-responsive.logo{:src => "./img/showcase/logo-eslint.png"} + %img.img-responsive.example{:src => "./img/showcase/example-eslint.gif"} + ESLint + .col-sm-4.showcase + %a{:href => "//docs.scala-lang.org/", :target => "_blank"} + %img.img-responsive.logo{:src => "./img/showcase/logo-scala.png"} + %img.img-responsive.example{:src => "./img/showcase/example-scala.gif"} + Scala + .col-sm-4.showcase + %a{:href => "//reactjs.algolia.com/", :target => "_blank"} + %img.img-responsive.logo{:src => "./img/showcase/logo-react.png"} + %img.img-responsive.example{:src => "./img/showcase/example-react.gif"} + React.js + #section_how.page-section + .container + .row + %h2.page-section-title How it works + .row + .col-sm-4.how-it-works + %h3 + %span.how-it-works-number> 1 + We crawl your documentation pages + %p We built a website crawler designed to index every section of your documentation. + %p Just send us the URL of your documentation, and we’ll periodically run the crawler so you’re always up-to-date. + .col-sm-4.how-it-works + %h3 + %span.how-it-works-number> 2 + We configure your search experience + %p You don’t need to configure any settings or even have an Algolia account. + %p We take of all of this automatically to ensure the best documentation search experience. + .col-sm-4.how-it-works + %h3 + %span.how-it-works-number> 3 + You add the autocomplete script to your UI + %p We’ll send you the script so you can integrate Algolia autocomplete to 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 + .container + .row + .col-sm-10.col-sm-offset-1 + %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. We’ll get back to you with what you need to integrate your new search into your website. + %p Don’t forget, DocSearch is completely free! There’s no need to sign up for Algolia or submit any payment information. Let’s tackle document search together.