add some changes at website

pedronauck · Oct 31, 2014 · 8bae83e · 8bae83e
1 parent ef443b8
commit 8bae83e
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ Installing this component is very easy and it has just one dependency: [React](h
   $ bower install --save react-video
 ```
 
-- Or if you want to [download the lastest release](https://github.com/pedronauck/react-video/archive/v1.0.2.zip) and put in your website, it will work too!
+- Or if you want to [download the lastest release](https://github.com/pedronauck/react-video/archive/v1.1.3.zip) and put in your website, it will work too!
 
 **NOTICE:** You need just one thing to make the component work. Put the [base component style](./dist/react-video.css) at the `<header>` tag. If you don't wanna use the `.css` extension, you can get the `.styl` or `.scss` extension at the folder `./lib`.
 

diff --git a/docs/css/react-video.min.css b/docs/css/react-video.min.css
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -29,12 +29,18 @@ code:not(.hljs) {
 }
 
 .header {
-  width: 960px;
+  width: 100%;
   margin: 0 auto;
   color: white;
   text-align: center;
 }
 
+@media screen and (min-width: 960px) {
+  .header {
+    width: 53.33em;
+  }
+};
+
 .header .title {
   font-family: 'Montserrat';
   font-size: 60px;
@@ -46,7 +52,13 @@ code:not(.hljs) {
   font-size: 30px;
   font-weight: 300;
   color: #999;
-  padding: 0 150px 70px;
+  padding: 0 50px 70px;
+}
+
+@media screen and (min-width: 960px) {
+  .header .subtitle {
+    padding: 0 150px 70px;
+  }
 }
 
 .github-buttons {
@@ -56,9 +68,15 @@ code:not(.hljs) {
   list-style: none;
 }
 
-.github-buttons li {
-  float: left;
-  margin: 0 10px;
+.github-buttons li ~ li {
+  margin-top: 10px;
+}
+
+@media screen and (min-width: 420px) {
+  .github-buttons li {
+    float: left;
+    margin: 0 10px;
+  }
 }
 
 .github-buttons li a {
@@ -105,15 +123,26 @@ code:not(.hljs) {
  * ---------------------------------------------------------------------------*/
 
 .content-section {
-  width: 800px;
+  width: 100%;
   margin: 0 auto;
-  padding: 80px 0;
+  padding: 40px 0;
 }
 
 .content-section ~ .content-section {
   padding-top: 0;
 }
 
+@media screen and (min-width: 960px) {
+  .content-section {
+    width: 44.44em;
+    padding: 80px 0;
+  }
+};
+
+.content-section ~ .content-section {
+  padding-top: 0;
+}
+
 .section-title {
   font-family: "Montserrat";
   font-size: 50px;
@@ -125,7 +154,13 @@ code:not(.hljs) {
 .content-section p {
   text-align: center;
   margin-bottom: 30px;
-  padding: 0 80px;
+  padding: 0 30px;
+}
+
+@media screen and (min-width: 960px) {
+  .content-section p {
+    padding: 0 80px;
+  }
 }
 
 .content-section pre {

diff --git a/docs/index.html b/docs/index.html
@@ -3,10 +3,11 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>React Video</title>
 
   <link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css">
-  <link rel="stylesheet" href="https://cdn.rawgit.com/pedronauck/react-video/master/dist/react-video.min.css">
+  <link rel="stylesheet" href="css/react-video.min.css">
   <link rel="stylesheet" href="css/github.css">
 
   <link rel="stylesheet" href="css/style.css">
@@ -23,7 +24,7 @@
       <h1 class="title">React Video</h1>
       <ul class="github-buttons">
         <li>
-          <a href="https://github.com/pedronauck/react-video/archive/v1.0.2.zip">Download v1.0.2</a>
+          <a href="https://github.com/pedronauck/react-video/archive/v1.1.3.zip">Download v1.1.3</a>
         </li>
         <li>
           <a href="http://github.com/pedronauck/react-video">
@@ -105,7 +106,7 @@ <h2 class="section-title">Usage</h2>
 
   <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react-with-addons.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/JSXTransformer.js"></script>
-  <script src="//cdn.rawgit.com/pedronauck/react-video/master/dist/react-video.min.js"></script>
+  <script src="js/react-video.min.js"></script>
   <script src="js/highlight.pack.js"></script>
   <script>hljs.initHighlightingOnLoad();</script>
   <script src="js/app.js" type="text/jsx"></script>

diff --git a/docs/js/react-video.min.js b/docs/js/react-video.min.js