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

Native :)
algolia · Mar 21, 2016 · db9c100 · db9c100
1 parent 1d7930a
commit db9c100
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/docs/css/_home.scss b/docs/css/_home.scss
@@ -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;

diff --git a/docs/index.haml b/docs/index.haml
@@ -30,74 +30,82 @@ 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"}
           %img.img-responsive.logo{:src => "./img/showcase/logo-scala.png"}
           .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"}
           %img.img-responsive.logo{:src => "./img/showcase/logo-babel.png"}
           .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"}
           %img.img-responsive.logo{:src => "./img/showcase/logo-vuejs.png"}
           .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"}
           %img.img-responsive.logo{:src => "./img/showcase/logo-apiary.png"}
           .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"}
           %img.img-responsive.logo{:src => "./img/showcase/logo-marionettejs.png"}
           .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