nikon/docsearch
1
0
Fork 0
Code Activity Actions

feat(website): React 🙌, popped out on the top with React

Browse source 
Native :)
This commit is contained in:
Gianluca Bargelli 2016-03-21 20:17:49 +01:00
parent 1d7930a90a
commit db9c10081c
2 changed files with 27 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
docs/css/_home.scss
View file

@ -246,8 +246,11 @@ html, body {
}
.screen-wrapper {
position: relative;
height: 201px;
overflow: hidden;
.freezeframe-container {
border-radius: 3px;
max-height: 100%;
}
.screen-mask {
position: absolute;

40
docs/index.haml
View file

@ -30,13 +30,29 @@ layout: default
%h2.page-section-title DocSearch is live
%p We’ve integrated DocSearch into several open source projects. Take a look.
.row
.col-sm-4.showcase
%a{:href => "https://facebook.github.io/react/", :target => "_blank"}
%img.img-responsive.logo{:src => "./img/showcase/logo-react.png"}
.screen-wrapper
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-react.gif"}
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
.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"}
.screen-wrapper
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-reactnative.gif"}
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
.spacer10
React Native
.col-sm-4.showcase
%a{:href => "http://eslint.org/", :target => "_blank"}
%img.img-responsive.logo{:src => "./img/showcase/logo-eslint.png"}
.screen-wrapper
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-eslint.gif"}
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
.spacer5
.spacer10
ESLint
.col-sm-4.showcase
%a{:href => "http://docs.scala-lang.org/", :target => "_blank"}
@ -44,7 +60,7 @@ layout: default
.screen-wrapper
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-scala.gif"}
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
.spacer5
.spacer10
Scala
.col-sm-4.showcase
%a{:href => "https://babeljs.algolia.com/", :target => "_blank"}
@ -52,7 +68,7 @@ layout: default
.screen-wrapper
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-babel.gif"}
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
.spacer5
.spacer10
Babel.js
.col-sm-4.showcase
%a{:href => "http://vuejs.org/guide/", :target => "_blank"}
@ -60,23 +76,15 @@ layout: default
.screen-wrapper
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-vuejs.gif"}
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
.spacer5
.spacer10
Vue.js
.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"}
.screen-wrapper
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-reactnative.gif"}
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
.spacer5
React Native
.col-sm-4.showcase
%a{:href => "https://docs.influxdata.com/", :target => "_blank"}
%img.img-responsive.logo{:src => "./img/showcase/logo-influxdata.png"}
.screen-wrapper
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-influxdata.gif"}
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
.spacer5
.spacer10
Influxdata
.col-sm-4.showcase
%a{:href => "http://help.apiary.io/", :target => "_blank"}
@ -84,7 +92,7 @@ layout: default
.screen-wrapper
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-apiary.gif"}
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
.spacer5
.spacer10
Apiary
.col-sm-4.showcase
%a{:href => "http://marionettejs.com/", :target => "_blank"}
@ -92,12 +100,12 @@ layout: default
.screen-wrapper
%img.img-responsive.example.freezeframe{:src => "./img/showcase/example-marionettejs.gif"}
%img.img-responsive.screen-mask{:src => "./img/mask.png"}
.spacer5
.spacer10
Marionette.js
.col-sm-4.showcase
.placeholder-logo
.placeholder-screen
.spacer5
.spacer10
You?
#section_how.page-section
.container