bachir/Clameurs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved responsive

Browse Source
This commit is contained in:
bachir
2017-03-09 18:58:39 +01:00
parent 556324870a
commit ce12d087df
2 changed files with 279 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/figureslibres/clameurs/css/dist/styles.css
Vendored
+173 -114
View File
@@ -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%;
sites/all/themes/figureslibres/clameurs/css/styles.scss
+106 -79
View File
@@ -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;