From 05a7a0cd28716ab6ec2ee365db9235c36c272a5c Mon Sep 17 00:00:00 2001 From: franzz Date: Mon, 17 Aug 2015 22:22:08 +0200 Subject: [PATCH] new film bg --- masks/index.html | 6 ++---- script/film.js | 2 +- style/ugc.css | 53 ++++++++++++++++++++++++++++++++---------------- 3 files changed, 39 insertions(+), 22 deletions(-) diff --git a/masks/index.html b/masks/index.html index e31a091..d46c32c 100755 --- a/masks/index.html +++ b/masks/index.html @@ -25,10 +25,8 @@ -
-
-
-
+
+

Filtered films

diff --git a/script/film.js b/script/film.js index 7ce71f2..f96bcaf 100755 --- a/script/film.js +++ b/script/film.js @@ -90,7 +90,7 @@ function Film() this._anchor = $('
', {'class':'film', 'id':'film_'+this.getRank()}) .data('rank', this.getRank()) .data('id', this.id()) - //.append($('', {'class':'bg', 'src':this.poster()})) + .append($('', {'class':'bg', 'src':this.poster()})) .append($('', {'class':'poster', 'src':this.poster()})) .append($('
', {'class':'info'}) .append($('

', {'class':'title'}) diff --git a/style/ugc.css b/style/ugc.css index 6091d7a..d578ea5 100755 --- a/style/ugc.css +++ b/style/ugc.css @@ -7,14 +7,14 @@ body { padding:1em; font-family: 'Open Sans', sans-serif; font-size: 1em; - color:#333; - background:#DDD; + color:#222; + background:white; min-width: 30em; } a { text-decoration: none; - color:#333; + color:#222; } a:hover { color:#08288B; @@ -62,12 +62,22 @@ h1 { /* Section - Header */ header { - padding:1em 0 1em calc(113px + 0.5em); + margin:0; + visibility:hidden; + text-align: center; +} + +header .title { + display:inline-block; + padding-left:113px; background:url(../images/logo_ugc.png) 0 50% no-repeat; - margin:0 0 0 0.5em; +} + +header .title time { + display:inline-block; font-size: 2em; color:#08288B; - visibility:hidden; + padding:1.5em 0 1.5em 0.75em; } /* Section - Main */ @@ -97,21 +107,35 @@ main { position:relative; background:white; margin-bottom:1em; + overflow: hidden; + -webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5); + -moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5); + box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5); } .film:nth-child(even) { } -.film .bg { +.film img.bg { position:absolute; - width:1000%; - opacity:0.3; - z-index: -1; - display:none; + top:50%; + margin-top:-25%; + left:152px; + right:0; + bottom:0; + width:calc(100% - 152px); + opacity:0.25; +} + +.film img.poster { + width:152px; + display: block; + z-index:2; } .film .info { + z-index:2; position:absolute; top:0; left:152px; @@ -130,12 +154,7 @@ main { .film .title .edito { font-style: italic; margin-left:1em; - color:#999; -} - -.film img.poster { - width:152px; - display: block; + color:#777; } .film .trailer {