From 8bae83e148e97b31e89ba55f695b1fe05ec5e4cc Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Fri, 31 Oct 2014 16:59:48 -0200 Subject: [PATCH] add some changes at website --- README.md | 2 +- docs/css/react-video.min.css | 8 ++++++ docs/css/style.css | 51 ++++++++++++++++++++++++++++++------ docs/index.html | 7 ++--- docs/js/react-video.min.js | 8 ++++++ 5 files changed, 64 insertions(+), 12 deletions(-) create mode 100644 docs/css/react-video.min.css create mode 100644 docs/js/react-video.min.js diff --git a/README.md b/README.md index 3e173c0..8c66327 100644 --- 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 `
` 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 new file mode 100644 index 0000000..94c29cd --- /dev/null +++ b/docs/css/react-video.min.css @@ -0,0 +1,8 @@ +/* + * React Video - React component to load video from Vimeo or Youtube across any device + * @version v1.1.3 + * @link https://github.com/pedronauck/react-video + * @license MIT + * @author Pedro Nauck (https://github.com/pedronauck) +*/ +.video{position:relative;padding-bottom:56.25%;background:#e2e2e2}.video iframe{border:0}.video-image{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center center;background-size:100% auto}.video-image:after{z-index:1;position:absolute;display:block;content:'';top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3)}.video-loading,.video-play-button{top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.video-play-button{z-index:2;position:absolute;padding:0;width:70px;border:0;background:0 0}.video-play-button:focus{outline:0}.video-play-button svg{fill:#fff;-webkit-filter:drop-shadow(0 1px 1px rgba(0,0,0,.8));filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}.video-loading{z-index:4;position:absolute;width:32px;height:32px}.video-loading svg{fill:#000;transform-origin:50% 50%;-webkit-animation:spinner .8s infinite linear;animation:spinner .8s infinite linear}@-moz-keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-webkit-keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-o-keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} \ No newline at end of file diff --git a/docs/css/style.css b/docs/css/style.css index d65b166..a421738 100644 --- 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 index de80413..6325f51 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,10 +3,11 @@ + React Video - + @@ -23,7 +24,7 @@

React Video