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

started responsive dev for mobile

Browse Source
This commit is contained in:
bachir
2017-02-28 17:28:05 +01:00
parent 7edbac2b53
commit 0509d74884
4 changed files with 320 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/figureslibres/clameurs/css/dist/styles.css
Vendored
+163 -97
View File
@@ -2,6 +2,11 @@
* Primary Drupal Styles
* Author: Bachir Soussi Chiadmi
*/
/* between 0 & 640px */
/* between 640px & 1000px */
/* between 1001px & 1025px */
/* between 1026px & 1920px */
/* between 1920px & infinity */
body {
font-size: 16px;
font-family: "aileron", Arial, "MS Trebuchet", sans-serif; }
@@ -36,29 +41,33 @@ input {
#header, #main, #footer {
padding: 0; }
#container {
width: 1024px;
margin: 0 auto; }
#header {
position: fixed;
width: 100%;
max-height: 400px;
z-index: 20;
background-color: rgba(255, 255, 255, 0.95);
background-image: url(../../images/fond-trame-logo-lite.png);
background-repeat: no-repeat;
background-position: center top;
background-size: contain; }
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) {
#header {
max-height: 400px; } }
#header hgroup.logo {
width: 1024px;
width: 95%;
margin: 0 auto;
padding: 1em 0 0; }
@media only screen and (min-width: 62.5625em) {
#header hgroup.logo {
max-width: 1000px; } }
#header h1 {
margin: 0; }
#header h1 a {
display: block;
height: 300px;
height: 120px;
background-image: url(../../images/logo.png);
background-size: contain;
background-position: center;
@@ -66,15 +75,27 @@ input {
text-indent: -2000px;
overflow: hidden;
margin: 0; }
@media only screen and (min-width: 62.5625em) {
#header h1 a {
height: 320px; } }
#header h2 {
text-align: center;
color: #20c498; }
color: #20c498;
font-size: 1em; }
@media only screen and (min-width: 62.5625em) {
#header h2 {
font-size: 2em; } }
#main {
padding-top: 400px; }
#main > .region {
width: 1024px;
margin: 0 auto; }
@media only screen and (min-width: 62.5625em) {
#main {
padding-top: 400px; } }
#main > .region {
width: 95%;
margin: 0 auto; }
@media only screen and (min-width: 62.5625em) {
#main > .region {
max-width: 1000px; } }
#node-63 {
padding: 1em 0; }
@@ -96,7 +117,11 @@ input {
font-weight: 500; }
#thematique-anchor-links {
display: none;
padding: 1em 0; }
@media only screen and (min-width: 62.5625em) {
#thematique-anchor-links {
display: block; } }
#thematique-anchor-links ul {
display: -ms-flexbox;
display: flex;
@@ -171,14 +196,21 @@ input {
.node-thematique::before {
position: absolute;
content: " ";
width: 110%;
height: 110%;
top: -5%;
left: -5%;
z-index: -1;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
left: 0; }
@media only screen and (min-width: 62.5625em) {
.node-thematique::before {
background-size: contain;
width: 110%;
height: 110%;
top: -5%;
left: -5%; } }
.node-thematique.node-32::before {
background-image: url(../../images/fond-theme-0-flat.png); }
.node-thematique.node-32.en_attente::before {
@@ -302,21 +334,26 @@ input {
.node-thematique > h2 {
font-size: 3em;
font-weight: 400;
position: relative; }
position: relative;
margin: 2em 0 0;
padding: 0 2em 0 0; }
@media only screen and (min-width: 62.5625em) {
.node-thematique > h2 {
padding: 0; } }
.node-thematique > h2 span {
position: absolute;
top: -170px; }
.node-thematique .content {
letter-spacing: -0.25em; }
.node-thematique .content .field-name-field-emvideo img {
width: 100%; }
.node-thematique .content > * {
letter-spacing: normal; }
.node-thematique .content article.main {
display: inline-block;
vertical-align: top;
width: 69.5%;
overflow: hidden; }
@media only screen and (min-width: 62.5625em) {
.node-thematique .content article.main {
display: inline-block;
vertical-align: top;
width: 69.5%; } }
.node-thematique .content article.main .field-name-body {
position: relative;
z-index: 3; }
@@ -324,34 +361,46 @@ input {
padding: 0 1em 0 0; }
.node-thematique .content article.main .field-name-body .summary {
position: relative;
height: 5.75em;
overflow: hidden;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.6);
transition: background-color 0.5 ease-in-out; }
@media only screen and (min-width: 62.5625em) {
.node-thematique .content article.main .field-name-body .summary {
height: 5.75em;
overflow: hidden; } }
.node-thematique .content article.main .field-name-body .summary p {
font-size: 1.1em;
padding: 0.5em 0.5em 0.5em 0;
font-weight: 500; }
.node-thematique .content article.main .field-name-body .value {
display: none;
position: absolute;
height: 1px;
margin-bottom: 0;
transition: height 0.5s ease-in-out;
background-color: #fff;
overflow: hidden; }
@media only screen and (min-width: 62.5625em) {
.node-thematique .content article.main .field-name-body .value {
display: block; } }
.node-thematique .content article.main .field-name-body .value p {
font-size: 1em;
padding: 0.5em; }
.node-thematique .content article.main .field-name-body:hover .summary {
background-color: #fff; }
.node-thematique .content article.main .field-name-body:hover .value {
height: 700px; }
@media only screen and (min-width: 62.5625em) {
.node-thematique .content article.main .field-name-body:hover .summary {
background-color: #fff; }
.node-thematique .content article.main .field-name-body:hover .value {
height: 700px; } }
.node-thematique .content article.main .field-name-body p {
padding: 0 0 1em;
margin: 0; }
.node-thematique .content article.main .group-video {
position: relative;
min-height: 432px; }
position: relative; }
@media only screen and (min-width: 62.5625em) {
.node-thematique .content article.main .group-video {
min-height: 432px; } }
.node-thematique .content article.main .group-video .field-name-field-emvideo img {
max-width: 100%;
height: auto; }
.node-thematique .content article.main .group-video .field-name-field-emvideo a {
display: block;
line-height: 0; }
@@ -390,13 +439,18 @@ input {
.node-thematique .content article.main .group-video:hover .group-description .field-name-field-description {
opacity: 1; }
.node-thematique .content aside.right {
display: inline-block;
vertical-align: top;
width: 30.5%; }
.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; }
margin-top: 1.2em; }
@media only screen and (min-width: 62.5625em) {
.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) {
.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 .node-documentair {
min-height: 160px;
background-color: #fff; }
@@ -413,7 +467,7 @@ input {
left: 0;
width: 90%;
height: 80%;
margin: 5%; }
margin: 15px; }
.node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc {
font-size: 1em;
font-weight: 600;
@@ -434,6 +488,9 @@ input {
background-color: rgba(255, 255, 255, 0.9);
opacity: 0;
transition: opacity 0.3s ease-in-out; }
.node-thematique .content aside.right .node-documentair .content .group-video img {
width: 100%;
height: auto; }
.node-thematique .content aside.right .node-documentair .content .group-video a {
display: block;
line-height: 0; }
@@ -454,7 +511,10 @@ input {
background-color: #fff;
opacity: 0.8; }
.node-thematique .content aside.bottom {
padding-top: 0.6em; }
padding-top: 1.2em; }
@media only screen and (min-width: 62.5625em) {
.node-thematique .content aside.bottom {
padding-top: 0.6em; } }
.node-thematique .content aside.bottom .field-name-field-episodes .field-label {
font-size: 1em;
font-weight: 600;
@@ -462,58 +522,64 @@ input {
background-color: rgba(255, 255, 255, 0.9);
display: inline-block;
margin-bottom: 0.3em; }
.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;
width: 19%;
background-color: #fff; }
.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; }
.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: 800;
font-style: italic;
text-align: center; }
.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.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; }
@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; }
.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: 800;
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.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.en_attente .content > .main {
position: relative; }
.node-thematique.en_attente .content > .main::before {