improved responsive
This commit is contained in:
+173
-114
@@ -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%;
|
||||
|
||||
Reference in New Issue
Block a user