From ce12d087df8bc7589d0e853252278e2ba3a8bef8 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Thu, 9 Mar 2017 18:58:39 +0100 Subject: [PATCH] improved responsive --- .../clameurs/css/dist/styles.css | 287 +++++++++++------- .../figureslibres/clameurs/css/styles.scss | 185 ++++++----- 2 files changed, 279 insertions(+), 193 deletions(-) diff --git a/sites/all/themes/figureslibres/clameurs/css/dist/styles.css b/sites/all/themes/figureslibres/clameurs/css/dist/styles.css index 62827e47..83aea6f4 100755 --- a/sites/all/themes/figureslibres/clameurs/css/dist/styles.css +++ b/sites/all/themes/figureslibres/clameurs/css/dist/styles.css @@ -4,9 +4,9 @@ * Author: Bachir Soussi Chiadmi */ /* between 0 & 640px */ -/* between 640px & 1000px */ -/* between 1001px & 1025px */ -/* between 1026px & 1920px */ +/* between 640px & 1024px */ +/* between 1025px & 1366px */ +/* between 1367px & 1920px */ /* between 1920px & infinity */ body { font-size: 16px; @@ -51,17 +51,15 @@ input { background-position: center top; background-size: contain; max-height: 200px; } - @media only screen and (min-width: 62.5625em) { - #header { - position: fixed; } } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 85.4375em) { #header { + position: fixed; max-height: 400px; } } #header hgroup.logo { width: 95%; margin: 0 auto; padding: 1em 0 0; } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 64.0625em) { #header hgroup.logo { max-width: 1000px; } } #header h1 { @@ -76,7 +74,7 @@ input { text-indent: -2000px; overflow: hidden; margin: 0; } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 85.4375em) { #header h1 a { height: 320px; } } #header h2 { @@ -84,17 +82,17 @@ input { color: #20c498; font-size: 1em; font-weight: 500; } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 85.4375em) { #header h2 { font-size: 2em; } } #main { width: 95%; margin: 0 auto; } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 85.4375em) { #main { padding-top: 400px; } } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 64.0625em) { #main { max-width: 1000px; } } @@ -104,11 +102,15 @@ input { display: inline; } #node-63 .content p { margin: 0; - font-size: 1.3em; - line-height: 1.3; + font-size: 1em; + line-height: 1.2; font-weight: 400; } #node-63 .content p em { font-weight: 500; } + @media only screen and (min-width: 64.0625em) { + #node-63 .content p { + font-size: 1.3em; + line-height: 1.3; } } #node-63 ul.links { text-align: right; margin: 0; @@ -125,7 +127,7 @@ input { #thematique-anchor-links { display: none; padding: 2em 0 4em; } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 85.4375em) { #thematique-anchor-links { display: block; } } #thematique-anchor-links ul { @@ -196,8 +198,12 @@ input { cursor: default; } .node-thematique { + margin-top: 2em; margin-bottom: 7em; position: relative; } + @media only screen and (min-width: 85.4375em) { + .node-thematique { + margin-top: 0; } } .node-thematique::before { position: absolute; content: " "; @@ -209,7 +215,7 @@ input { height: 100%; top: 0; left: 0; } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 85.4375em) { .node-thematique::before { background-size: contain; width: 110%; @@ -298,19 +304,24 @@ input { .node-thematique.node-26 .field-name-body .summary { border-left-color: #8800aa; } .node-thematique > h2 { - font-size: 4em; + font-size: 3em; font-weight: 400; line-height: 0.9; text-indent: -0.09em; position: relative; margin: 0; - padding: 0 2em 0 0; } - @media only screen and (min-width: 62.5625em) { + padding: 0 1em 0 0; } + @media only screen and (min-width: 85.4375em) { .node-thematique > h2 { + padding: 0 2em 0 0; + font-size: 4em; padding: 0; } } .node-thematique > h2 span.target { position: absolute; - top: -170px; } + top: -120px; } + @media only screen and (min-width: 85.4375em) { + .node-thematique > h2 span.target { + top: -170px; } } .node-thematique > h2 span.date { font-size: 0.3em; font-weight: 600; @@ -322,7 +333,7 @@ input { letter-spacing: normal; } .node-thematique .content article.main { overflow: hidden; } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 64.0625em) { .node-thematique .content article.main { display: inline-block; vertical-align: top; @@ -337,15 +348,18 @@ input { transition: background-color 0.5 ease-in-out; border-left-style: solid; border-left-width: 0; } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 64.0625em) { .node-thematique .content article.main .field-name-body .summary { height: 7em; overflow: hidden; } } .node-thematique .content article.main .field-name-body .summary p { font-size: 1.05em; - padding: 0.5em 1.2em 0.5em; + padding: 0.5em 0; margin: 0; font-weight: 500; } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content article.main .field-name-body .summary p { + padding: 0.5em 1.2em 0.5em; } } .node-thematique .content article.main .field-name-body .value { display: none; position: absolute; @@ -354,7 +368,7 @@ input { transition: height 0.5s ease-in-out; background-color: #fff; overflow: hidden; } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 85.4375em) { .node-thematique .content article.main .field-name-body .value { display: block; } } .node-thematique .content article.main .field-name-body .value p { @@ -363,7 +377,7 @@ input { line-height: 1.3; margin: 0; background-color: #fff; } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 64.0625em) { .node-thematique .content article.main .field-name-body:hover .value { height: 700px; } } .node-thematique .content article.main .group-video { @@ -384,12 +398,18 @@ input { width: 100%; height: 100%; } .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter { - font-size: 1em; + font-size: 0.7em; + background-color: rgba(255, 255, 255, 0.9); font-weight: 600; padding: 0.2em 0.4em; - background-color: rgba(255, 255, 255, 0.9); display: inline-block; - margin: 15px; } + margin: 5px; } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter { + font-size: 1em; } } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter { + margin: 15px; } } .node-thematique .content article.main .group-video .group-description .field-name-field-description { position: absolute; top: 0; @@ -406,23 +426,40 @@ input { font-weight: 500; font-size: 2em; margin: 0; } - .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description { - opacity: 1; } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description { + opacity: 1; } } .node-thematique .content aside.right { margin-top: 1.2em; } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 64.0625em) { .node-thematique .content aside.right { display: inline-block; vertical-align: top; width: 30.5%; margin-top: 0; } } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 64.0625em) { .node-thematique .content aside.right .field-name-field-eclairages { padding-left: 1em; } } - .node-thematique .content aside.right .field-name-field-eclairages .field-item:not(:last-child) { - padding-bottom: 1.2em; } + .node-thematique .content aside.right .field-name-field-eclairages .field-items { + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -ms-flex-pack: start; + justify-content: flex-start; } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content aside.right .field-name-field-eclairages .field-items { + display: block; } } + .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item { + display: block; + background-color: #fff; + width: 33%; } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item { + width: auto; } + .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item:not(:last-child) { + padding-bottom: 1.2em; } } .node-thematique .content aside.right .node-documentair { - min-height: 150px; background-color: #fff; } .node-thematique .content aside.right .node-documentair .content { position: relative; } @@ -437,15 +474,21 @@ input { left: 0; width: 90%; height: 80%; - margin: 15px; } + margin: 5px; } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content aside.right .node-documentair .content .group-txt { + margin: 15px; } } .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc { - font-size: 1em; + font-size: 0.7em; + background-color: rgba(255, 255, 255, 0.9); font-weight: 600; padding: 0.2em 0.4em; - background-color: rgba(255, 255, 255, 0.9); display: inline-block; z-index: 5; transition: background-color 0.3s ease-in-out; } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc { + font-size: 1em; } } .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-title-field { position: absolute; z-index: -1; @@ -464,10 +507,11 @@ input { .node-thematique .content aside.right .node-documentair .content .group-video a { display: block; line-height: 0; } - .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-field-doc { - background-color: transparent; } - .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-title-field { - opacity: 1; } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-field-doc { + background-color: transparent; } + .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-title-field { + opacity: 1; } } .node-thematique .content aside.right .node-documentair.en_attente > .content { position: relative; } .node-thematique .content aside.right .node-documentair.en_attente > .content::before { @@ -482,86 +526,101 @@ input { opacity: 0.8; } .node-thematique .content aside.bottom { padding-top: 1.2em; } - @media only screen and (min-width: 62.5625em) { + @media only screen and (min-width: 64.0625em) { .node-thematique .content aside.bottom { padding-top: 0.6em; } } .node-thematique .content aside.bottom .field-name-field-episodes .field-label { - font-size: 1em; + font-size: 0.7em; + background-color: rgba(255, 255, 255, 0.9); font-weight: 600; padding: 0.2em 0.4em; - background-color: rgba(255, 255, 255, 0.9); display: inline-block; margin-bottom: 0.3em; } - @media only screen and (min-width: 62.5625em) { - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items { - display: -ms-flexbox; - display: flex; - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: justify; - justify-content: space-between; } } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { - display: block; - background-color: #fff; } - @media only screen and (min-width: 62.5625em) { - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { - width: 19%; } } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content { - position: relative; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt { - cursor: pointer; - pointer-events: none; - box-sizing: border-box; - position: absolute; - z-index: 2; - overflow: hidden; - top: 0; - left: 0; - width: 90%; - height: 80%; - margin: 5%; - padding: 5%; - background-color: rgba(255, 255, 255, 0.9); - opacity: 1; - transition: opacity,background-color 0.3s ease-in-out; - z-index: 11; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field { - font-size: 4em; - font-weight: 300; - line-height: 1; - font-style: italic; - text-align: center; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video img { - width: 100%; - height: auto; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a { - display: block; - line-height: 0; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt { - opacity: 0.9; - background-color: rgba(255, 255, 255, 0.3); } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt .field-name-title-field { - font-weight: 500; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content { - position: relative; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content::before { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - content: " "; - z-index: 10; - background-color: #fff; - opacity: 0.8; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field { - font-size: 3em; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field span.date { + @media only screen and (min-width: 64.0625em) { + .node-thematique .content aside.bottom .field-name-field-episodes .field-label { + font-size: 1em; } } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items { + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -ms-flex-pack: start; + justify-content: flex-start; } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items { + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -ms-flex-pack: justify; + justify-content: space-between; } } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { + display: block; + background-color: #fff; + width: 50%; } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { + width: 19%; } } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content { + position: relative; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt { + cursor: pointer; + pointer-events: none; + box-sizing: border-box; + position: absolute; + z-index: 2; + overflow: hidden; + top: 0; + left: 0; + width: 90%; + height: 80%; + margin: 5%; + padding: 5%; + background-color: rgba(255, 255, 255, 0.9); + opacity: 1; + transition: opacity,background-color 0.3s ease-in-out; + z-index: 11; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field { + font-size: 3em; + font-weight: 300; + line-height: 1; + font-style: italic; + text-align: center; } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field { + font-size: 4em; } } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video img { + width: 100%; + height: auto; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a { display: block; - font-size: 0.3em; - font-weight: 500; - font-style: normal; - padding-top: 0.3em; } + line-height: 0; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt { + opacity: 0.9; + background-color: rgba(255, 255, 255, 0.3); } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt .field-name-title-field { + font-weight: 500; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content { + position: relative; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content::before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + content: " "; + z-index: 10; + background-color: #fff; + opacity: 0.8; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field { + font-size: 2em; } + @media only screen and (min-width: 64.0625em) { + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field { + font-size: 3em; } } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field span.date { + display: block; + font-size: 0.3em; + font-weight: 500; + font-style: normal; + padding-top: 0.3em; } #DOMWindow .embedded-video, #DOMWindow .player, #DOMWindow iframe { width: 100%; diff --git a/sites/all/themes/figureslibres/clameurs/css/styles.scss b/sites/all/themes/figureslibres/clameurs/css/styles.scss index 4eacf0ed..281f09a0 100755 --- a/sites/all/themes/figureslibres/clameurs/css/styles.scss +++ b/sites/all/themes/figureslibres/clameurs/css/styles.scss @@ -20,12 +20,13 @@ @function em-calc($px-value, $rem-base: 16) { $value: $px-value / $rem-base; @return $value * 1em; + // @return $px-value * 1px; } $small-range: (0, em-calc(640)); /* between 0 & 640px */ - $medium-range: (em-calc(641), em-calc(1000)); /* between 640px & 1000px */ - $large-range: (em-calc(1001), em-calc(1025)); /* between 1001px & 1025px */ - $xlarge-range: (em-calc(1026), em-calc(1920)); /* between 1026px & 1920px */ + $medium-range: (em-calc(641), em-calc(1024)); /* between 640px & 1024px */ + $large-range: (em-calc(1025), em-calc(1366)); /* between 1025px & 1366px */ + $xlarge-range: (em-calc(1367), em-calc(1920)); /* between 1367px & 1920px */ $xxlarge-range: (em-calc(1921), 99999999px); /* between 1920px & infinity */ $screen: 'only screen'; @@ -74,7 +75,6 @@ input{font-family: Arial, "MS Trebuchet", sans-serif; font-size:0.8em;} $vert : #20c498; $bleu : #1f04a1; // $rouge : #fb3f08; - $coul0 : #2f82ff; $coul1 : #ff0000; $coul2 : #88aa00; @@ -82,8 +82,6 @@ $coul3 : #ff6600; $coul4 : #ff2ad4; $coul5 : #8800aa; - - /** layout */ .footer-block .region, .header-block{ display:inline-block; vertical-align: top;} @@ -104,9 +102,6 @@ $header_height_small:200px; $header_height_large:400px; #header{ - @media #{$large-up} { - position: fixed; - } width:100%; z-index: 20; background-color: transparentize(#fff, 0.05); @@ -116,12 +111,11 @@ $header_height_large:400px; background-size: contain; max-height: $header_height_small; - @media #{$large-up} { + @media #{$xlarge-up} { + position: fixed; max-height: $header_height_large; } - // box-shadow: 0 3px 3px transparentize(#fff, 0.05); - hgroup.logo{ @include main_centred(); padding: 1em 0 0; @@ -130,7 +124,7 @@ $header_height_large:400px; h1 a{ display:block; height:$header_height_small*0.6; - @media #{$large-up} { + @media #{$xlarge-up} { height: $header_height_large*0.8; } // transition: height 0.1s ease-in-out; @@ -147,7 +141,7 @@ $header_height_large:400px; color:$vert; font-size: 1em; font-weight: 500; - @media #{$large-up} { + @media #{$xlarge-up} { font-size: 2em; } } @@ -155,7 +149,7 @@ $header_height_large:400px; #main{ // padding-top: $header_height_small; - @media #{$large-up} { + @media #{$xlarge-up} { padding-top: $header_height_large; } @@ -174,12 +168,16 @@ $header_height_large:400px; p{ // text-align: center; margin:0; - font-size: 1.3em; - line-height: 1.3; + font-size: 1em; + line-height: 1.2; font-weight: 400; em{ font-weight: 500; } + @media #{$large-up} { + font-size: 1.3em; + line-height: 1.3; + } } } ul.links{ @@ -196,7 +194,7 @@ $header_height_large:400px; #thematique-anchor-links{ display:none; - @media #{$large-up} { + @media #{$xlarge-up} { display:block; } @@ -294,17 +292,24 @@ $header_height_large:400px; // } @mixin vidlabel(){ - font-size: 1em; - font-weight: 600; - padding:0.2em 0.4em; - background-color: rgba(255,255,255,0.9); - display: inline-block; + font-size: 0.7em; + background-color: rgba(255,255,255,0.9); + font-weight: 600; + padding:0.2em 0.4em; + display: inline-block; + @media #{$large-up} { + font-size: 1em; + } } // thematique .node-thematique{ // min-height:766px; + margin-top: 2em; margin-bottom: 7em; + @media #{$xlarge-up} { + margin-top: 0; + } position: relative; &::before{ @@ -317,7 +322,7 @@ $header_height_large:400px; width:100%; height:100%; top:0; left:0; - @media #{$large-up} { + @media #{$xlarge-up} { background-size: contain; width:110%; height:110%; top:-5%; left:-5%; @@ -343,24 +348,6 @@ $header_height_large:400px; .field-name-body .summary{ border-left-color: $coul; } - // article.main{ - // .field-name-body{ - // .summary{background-color: $coul;} - // } - // } - - // &.en_attente::before{background-image: $sb_bg;} - // &.en_attente{ - // >h2, - // .group-video .field-name-field-description h3, - // .group-description .field-name-field-ecouter, - // .node-documentair .field-name-field-doc, - // .node-documentair .field-name-title-field, - // .field-name-field-episodes .field-label, - // .node-episode .field-name-title-field{ - // color: #aaa;//lighten(desaturate($coul, 40%), 20%); - // } - // } } &.node-32{ @@ -418,21 +405,24 @@ $header_height_large:400px; } >h2{ - font-size: 4em; + font-size: 3em; font-weight: 400; line-height: 0.9; text-indent: -0.09em; - // padding-left: 0.18em; position:relative; margin:0; - padding: 0 2em 0 0; - // @include white_shadow; - @media #{$large-up} { + padding: 0 1em 0 0; + @media #{$xlarge-up} { + padding: 0 2em 0 0; + font-size: 4em; padding:0; } span.target{ - position: absolute; - top:-170px; + position: absolute; + top:-120px; + @media #{$xlarge-up} { + top:-170px; + } } span.date{ font-size: 0.3em; @@ -478,17 +468,19 @@ $header_height_large:400px; } p{ font-size: 1.05em; - padding:0.5em 1.2em 0.5em; + padding:0.5em 0; margin: 0; font-weight: 500; - // @include white_shadow; + @media #{$large-up} { + padding:0.5em 1.2em 0.5em; + } } border-left-style:solid; border-left-width: 0; } .value{ display:none; - @media #{$large-up} { + @media #{$xlarge-up} { display: block; } position:absolute; @@ -528,9 +520,10 @@ $header_height_large:400px; .field-name-field-ecouter{ @include vidlabel(); - - margin:15px; - // transition: background-color 0.3s ease-in-out; + margin:5px; + @media #{$large-up} { + margin:15px; + } } .field-name-field-description{ position: absolute; @@ -548,13 +541,15 @@ $header_height_large:400px; } } } - &:hover .group-description{ - // background-color: rgba(255,255,255,0.9); - // .field-name-field-ecouter{ - // background-color: rgba(255,255,255,0); - // } - .field-name-field-description{opacity:1;} - } + @media #{$large-up} { + &:hover .group-description{ + // background-color: rgba(255,255,255,0.9); + // .field-name-field-ecouter{ + // background-color: rgba(255,255,255,0); + // } + .field-name-field-description{opacity:1;} + } + } } } @@ -573,15 +568,33 @@ $header_height_large:400px; margin-top: 0; } .field-name-field-eclairages{ - @media #{$large-up} { - padding-left:1em; - } - .field-item:not(:last-child){ - padding-bottom: $gouttiere; - } + @media #{$large-up} { + padding-left:1em; + } + .field-items{ + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + @media #{$large-up} { + display: block; + } + &>.field-item{ + display: block; + background-color: #fff; + width:33%; + @media #{$large-up} { + width:auto; + &:not(:last-child){ + padding-bottom: $gouttiere; + } + } + } + + } + } .node-documentair{ - min-height: 150px; + // min-height: 150px; background-color: #fff; .content{ position: relative; @@ -590,7 +603,10 @@ $header_height_large:400px; box-sizing: border-box; position:absolute; z-index: 2; overflow: hidden; top:0; left:0; width:90%; height:80%; - margin:15px; + margin:5px; + @media #{$large-up} { + margin:15px; + } // opacity: 0; .field-name-field-doc{ @include vidlabel; @@ -611,10 +627,12 @@ $header_height_large:400px; .group-video img{ width:100%; height:auto;} .group-video a{ display: block; line-height: 0;} } - &:not(.en_attente):hover .group-txt{ - .field-name-field-doc{background-color: transparent;} - .field-name-title-field{opacity: 1;} - } + @media #{$large-up} { + &:not(.en_attente):hover .group-txt{ + .field-name-field-doc{background-color: transparent;} + .field-name-title-field{opacity: 1;} + } + } &.en_attente>.content{ position: relative; @@ -650,14 +668,17 @@ $header_height_large:400px; margin-bottom: 0.3em; } &>.field-items{ + display: flex; + flex-flow: row wrap; + justify-content: flex-start; @media #{$large-up} { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; + flex-flow: row nowrap; + justify-content: space-between; } &>.field-item{ display: block; background-color: #fff; + width:50%; @media #{$large-up} { width:19%; } @@ -675,11 +696,14 @@ $header_height_large:400px; transition:opacity,background-color 0.3s ease-in-out; z-index: 11; .field-name-title-field{ - font-size: 4em; + font-size: 3em; font-weight: 300; line-height: 1; font-style: italic; text-align: center; + @media #{$large-up} { + font-size: 4em; + } } } .group-video img{ width:100%; height:auto;} @@ -706,7 +730,10 @@ $header_height_large:400px; opacity: 0.8; } .field-name-title-field{ - font-size: 3em; + font-size: 2em; + @media #{$large-up} { + font-size: 3em; + } span.date{ display: block; font-size: 0.3em;