docs(website): update header + W3C
This commit is contained in:
Shipow
parent
df428e562e
commit
ca92c20cc1
4 changed files with 77 additions and 70 deletions
39
docs/css/_header.scss
Normal file
39
docs/css/_header.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
.site-header {
|
||||
width: 100%;
|
||||
.navbar {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background-color: #0B1724;
|
||||
height: 50px;
|
||||
.navbar-header {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
color: #C7C4C3;
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.navbar-nav > li {
|
||||
padding: 14px;
|
||||
font-size: 14px;
|
||||
font-family: Open Sans;
|
||||
&:last-child {
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
.navbar-nav > li > a {
|
||||
padding: 0 0 4px 0;
|
||||
}
|
||||
.navbar-nav > li.active > a {
|
||||
background-color: transparent;
|
||||
border-bottom: 2px solid #FF2E6C;
|
||||
}
|
||||
.fa-github {
|
||||
font-size: 1.6em;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -49,44 +49,6 @@ html, body {
|
|||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
width: 100%;
|
||||
.navbar {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background-color: #0B1724;
|
||||
height: 50px;
|
||||
.navbar-header {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
color: #C7C4C3;
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.navbar-nav > li {
|
||||
padding: 14px;
|
||||
&:last-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
.navbar-nav > li > a {
|
||||
padding: 0 0 4px 0;
|
||||
}
|
||||
.navbar-nav > li.active > a {
|
||||
background-color: transparent;
|
||||
border-bottom: 2px solid #FF2E6C;
|
||||
}
|
||||
.fa-github {
|
||||
font-size: 1.6em;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* JUMBOTRON
|
||||
// ------------------------- */
|
||||
.jumbotron {
|
||||
|
|
@ -103,7 +65,10 @@ html, body {
|
|||
}
|
||||
.jumbotron-header {
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
color: white;
|
||||
.jumbotron-title{
|
||||
font-size: 0px;
|
||||
}
|
||||
}
|
||||
.jumbotron-left-column {
|
||||
display: none;
|
||||
|
|
@ -177,7 +142,7 @@ html, body {
|
|||
@media (min-width: 1200px) {
|
||||
.jumbotron .join-form {
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
top: 140px;
|
||||
right: 120px;
|
||||
padding: 10px 40px 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
@import "syntax-highlighting";
|
||||
@import "helper";
|
||||
|
||||
@import "header";
|
||||
|
||||
@import "home";
|
||||
@import "page";
|
||||
@import "searchbar";
|
||||
|
|
|
|||
|
|
@ -6,12 +6,13 @@ layout: default
|
|||
.container.pos-rel
|
||||
.jumbotron-header
|
||||
%h1.jumbotron-title
|
||||
%img.logo{:src => "./img/docsearch-logo.svg"}
|
||||
Algolia doc search
|
||||
%img.logo{:src => "./img/docsearch-logo.svg", :alt => "Algolia doc search", :height => "48"}
|
||||
%p#top The easiest way to add search to your documentation.
|
||||
.spacer20
|
||||
.jumbotron-left-column
|
||||
%div.index-container
|
||||
%img.index{:src => "./img/illus-index.svg"}
|
||||
%img.index{:src => "./img/illus-index.svg", :alt => "docsearch doc crawling"}
|
||||
%div.ripple
|
||||
.spacer30
|
||||
.text-center
|
||||
|
|
@ -32,74 +33,74 @@ layout: default
|
|||
.row
|
||||
.col-sm-4.showcase
|
||||
%a{:href => "https://facebook.github.io/react/", :target => "_blank"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-react.png"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-react.png", :alt => "reactjs"}
|
||||
.screen-wrapper
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-react.gif"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-react.gif", :alt => "react docsearch demo"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
|
||||
.spacer10
|
||||
React
|
||||
.col-sm-4.showcase
|
||||
%a{:href => "http://facebook.github.io/react-native/docs/getting-started.html", :target => "_blank"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-react.png"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-react.png", :alt => "react native"}
|
||||
.screen-wrapper
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-reactnative.gif"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-reactnative.gif", :alt => "react native docsearch demo"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
|
||||
.spacer10
|
||||
React Native
|
||||
.col-sm-4.showcase
|
||||
%a{:href => "http://eslint.org/", :target => "_blank"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-eslint.png"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-eslint.png", :alt => "eslint"}
|
||||
.screen-wrapper
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-eslint.gif"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-eslint.gif", :alt => "eslint docsearch demo"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
|
||||
.spacer10
|
||||
ESLint
|
||||
.col-sm-4.showcase
|
||||
%a{:href => "http://docs.scala-lang.org/", :target => "_blank"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-scala.png"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-scala.png", :alt => "scala"}
|
||||
.screen-wrapper
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-scala.gif"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-scala.gif", :alt => "scala docsearch demo"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
|
||||
.spacer10
|
||||
Scala
|
||||
.col-sm-4.showcase
|
||||
%a{:href => "https://babeljs.algolia.com/", :target => "_blank"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-babel.png"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-babel.png", :alt => "babel"}
|
||||
.screen-wrapper
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-babel.gif"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-babel.gif", :alt => "babel docsearch demo"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
|
||||
.spacer10
|
||||
Babel.js
|
||||
.col-sm-4.showcase
|
||||
%a{:href => "http://vuejs.org/guide/", :target => "_blank"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-vuejs.png"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-vuejs.png", :alt => "vuejs"}
|
||||
.screen-wrapper
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-vuejs.gif"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-vuejs.gif", :alt => "vuejs docsearch demo"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
|
||||
.spacer10
|
||||
Vue.js
|
||||
.col-sm-4.showcase
|
||||
%a{:href => "https://docs.influxdata.com/", :target => "_blank"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-influxdata.png"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-influxdata.png", :alt => "influxdata"}
|
||||
.screen-wrapper
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-influxdata.gif"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-influxdata.gif", :alt => "influxdata docsearch demo"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
|
||||
.spacer10
|
||||
Influxdata
|
||||
.col-sm-4.showcase
|
||||
%a{:href => "http://help.apiary.io/", :target => "_blank"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-apiary.png"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-apiary.png", :alt => "apiary"}
|
||||
.screen-wrapper
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-apiary.gif"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-apiary.gif", :alt => "apiary docsearch demo"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
|
||||
.spacer10
|
||||
Apiary
|
||||
.col-sm-4.showcase
|
||||
%a{:href => "http://marionettejs.com/", :target => "_blank"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-marionettejs.png"}
|
||||
%img.img-responsive.logo{:src => "./img/showcase/logo-marionettejs.png", :alt => "marionnette"}
|
||||
.screen-wrapper
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-marionettejs.gif"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
|
||||
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-marionettejs.gif", :alt => "marionette docsearch demo"}
|
||||
%img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
|
||||
.spacer10
|
||||
Marionette.js
|
||||
.col-sm-4.showcase
|
||||
|
|
@ -113,7 +114,7 @@ layout: default
|
|||
%h2.page-section-title How it works
|
||||
.row
|
||||
.col-sm-12
|
||||
%img.img-responsive{:src => "./img/illus-howitworks.jpg"}
|
||||
%img.img-responsive{:src => "./img/illus-howitworks.jpg", :alt => "how it works"}
|
||||
.spacer60
|
||||
.row
|
||||
.col-sm-10.col-sm-offset-1
|
||||
|
|
|
|||
Loading…
Reference in a new issue