diff --git a/src/assets/images/poster.jpg b/src/assets/images/poster.jpg new file mode 100644 index 0000000..2e6ac2b Binary files /dev/null and b/src/assets/images/poster.jpg differ diff --git a/src/assets/videos/jumbo.mp4 b/src/assets/videos/jumbo.mp4 new file mode 100644 index 0000000..48a4c7a Binary files /dev/null and b/src/assets/videos/jumbo.mp4 differ diff --git a/src/jade/index.jade b/src/jade/index.jade index 4103038..275cece 100644 --- a/src/jade/index.jade +++ b/src/jade/index.jade @@ -35,6 +35,9 @@ html body .jumbo #logo + video(autoplay, loop, poster='images/poster.jpg') + source(src='videos/jumbo.mp4', type='video/mp4') + .jumbo__container h1 Slack-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille. diff --git a/src/styles/style.styl b/src/styles/style.styl index af6d737..f4802e2 100644 --- a/src/styles/style.styl +++ b/src/styles/style.styl @@ -18,7 +18,7 @@ body, html h1, h2, h3 margin 0 margin-bottom 0.5em - text-shadow 1px 1px 0 rgba(255, 255, 255, 0.15) + p margin-top 1em line-height 1.5em @@ -32,24 +32,50 @@ a .jumbo width 100% - height 100% + height 50% + min-height 300px position relative - padding-bottom 200px - background url('../images/jumbo.jpg') - background-size cover + overflow hidden display table + &:after + position absolute + top 0 + left 0 + width 100% + height 100% + z-index -1 + background rgba(255, 255, 255, 0.2) + content '' + .jumbo__container display table-cell vertical-align middle text-align center padding 0 1em + h1 max-width 800px margin auto @media screen and (max-width: 600px), screen and (max-height: 580px) font-size 1.5em margin-top 1em + + +video + height 100% + position absolute + bottom 0 + z-index -2 + // Keskitys + left 50% + transform translateX(-50%) + + @media (min-aspect-ratio: 1/2) + width 100% + height auto + + #logo width 80px height 80px @@ -58,6 +84,7 @@ a left 1em background url('../images/logo.png') background-size 100% 100% + z-index 2 @media screen and (max-width: 600px), screen and (max-height: 580px) width 60px height 60px @@ -67,7 +94,6 @@ section padding 2em 0 .content - margin-top -200px z-index 2 position relative padding-right feedWidth @@ -163,7 +189,8 @@ footer font-size 1.5em padding 0.5em background textColor - + z-index 2 + position relative i margin 0 0.30em font-size 1.5em