You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@systemml.apache.org by de...@apache.org on 2016/11/16 22:56:29 UTC
incubator-systemml-website git commit: [SYSTEMML-1111] Add background
video to home page banner
Repository: incubator-systemml-website
Updated Branches:
refs/heads/master a66cd091b -> 90d65b691
[SYSTEMML-1111] Add background video to home page banner
Add background video to home page banner for desktop view.
Closes #33.
Project: http://git-wip-us.apache.org/repos/asf/incubator-systemml-website/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-systemml-website/commit/90d65b69
Tree: http://git-wip-us.apache.org/repos/asf/incubator-systemml-website/tree/90d65b69
Diff: http://git-wip-us.apache.org/repos/asf/incubator-systemml-website/diff/90d65b69
Branch: refs/heads/master
Commit: 90d65b691fedc66760cd6a0065abf8359be6cdad
Parents: a66cd09
Author: Jason Azares <ja...@gmail.com>
Authored: Wed Nov 16 14:54:53 2016 -0800
Committer: Deron Eriksson <de...@us.ibm.com>
Committed: Wed Nov 16 14:54:53 2016 -0800
----------------------------------------------------------------------
_src/_includes/themes/apache/home.html | 4 ++++
_src/_sass/_banners.scss | 24 ++++++++++++++++++++++--
_src/_sass/_layout.scss | 1 +
3 files changed, 27 insertions(+), 2 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-systemml-website/blob/90d65b69/_src/_includes/themes/apache/home.html
----------------------------------------------------------------------
diff --git a/_src/_includes/themes/apache/home.html b/_src/_includes/themes/apache/home.html
index dca6104..6e6b414 100644
--- a/_src/_includes/themes/apache/home.html
+++ b/_src/_includes/themes/apache/home.html
@@ -19,6 +19,7 @@ limitations under the License.
<!-- Hero -->
<section class="full-stripe full-stripe--video">
+ <!-- content -->
<div class="ml-container ml-container--horizontally-center ml-container--halfway">
<div class="col col-12 content-group">
<h1>{{ site.data.project.name }}</h1>
@@ -28,8 +29,11 @@ limitations under the License.
<a class="button button-primary" href="download.html">Download SystemML 0.11.0-incubating</a>
</div>
</div>
+ <!-- video background -->
+ <video autoplay loop src="assets/media/hero.mp4" id="video-background"></video>
</section>
+
<!-- Awards -->
<section class="full-stripe full-stripe--alternate">
<div class="ml-container ml-container--narrow">
http://git-wip-us.apache.org/repos/asf/incubator-systemml-website/blob/90d65b69/_src/_sass/_banners.scss
----------------------------------------------------------------------
diff --git a/_src/_sass/_banners.scss b/_src/_sass/_banners.scss
index 161044e..9ac7f9e 100644
--- a/_src/_sass/_banners.scss
+++ b/_src/_sass/_banners.scss
@@ -11,14 +11,34 @@
// front page hero background
&--video {
- // hero full screen only for mobile
+ // full screen hero image for mobile
height: 100vh;
- background-image: url("../img/hero-mobile.png");
+ background: #1d3649 url(../img/hero-mobile.png) 0 0 no-repeat;
background-size: cover;
+ overflow: hidden;
color: #fff;
+ position: relative;
@media (min-width: $bp-medium) {
height: 70vh;
+ background: #1d3649 url(../img/hero-home.png) 0 0 no-repeat;
+ }
+
+ #video-background {
+ // default mobile settings
+ // method for vertically and horizontally centering an element
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ -webkit-transform: translateY(-50%) translateX(-50%);
+ transform: translateY(-50%) translateX(-50%);
+ display: none;
+
+ // video only plays on desktop
+ @media (min-width: $bp-medium) {
+ width: 100%;
+ display: block;
+ }
}
}
http://git-wip-us.apache.org/repos/asf/incubator-systemml-website/blob/90d65b69/_src/_sass/_layout.scss
----------------------------------------------------------------------
diff --git a/_src/_sass/_layout.scss b/_src/_sass/_layout.scss
index 44b2880..b237618 100644
--- a/_src/_sass/_layout.scss
+++ b/_src/_sass/_layout.scss
@@ -9,6 +9,7 @@
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
padding: 3em 1em;
+ z-index: 50;
// reverse order of elements
&--reverse-order {