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