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

fixed responsive for medium

Browse Source
This commit is contained in:
bachir
2017-03-13 14:51:46 +01:00
parent 63598ff963
commit 44791ccf96
2 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/figureslibres/clameurs/css/dist/styles.css
Vendored
+13 -13
View File
@@ -333,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: 64.0625em) { @media only screen and (min-width: 40.0625em) {
.node-thematique .content article.main { .node-thematique .content article.main {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
@@ -368,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: 85.4375em) { @media only screen and (min-width: 40.0625em) {
.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 {
@@ -377,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: 64.0625em) { @media only screen and (min-width: 40.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 {
@@ -426,18 +426,18 @@ input {
font-weight: 500; font-weight: 500;
font-size: 2em; font-size: 2em;
margin: 0; } margin: 0; }
@media only screen and (min-width: 64.0625em) { @media only screen and (min-width: 40.0625em) {
.node-thematique .content article.main .group-video:hover .group-description .field-name-field-description { .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description {
opacity: 1; } } 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: 64.0625em) { @media only screen and (min-width: 40.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: 64.0625em) { @media only screen and (min-width: 40.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-items { .node-thematique .content aside.right .field-name-field-eclairages .field-items {
@@ -447,14 +447,14 @@ input {
flex-flow: row wrap; flex-flow: row wrap;
-ms-flex-pack: start; -ms-flex-pack: start;
justify-content: flex-start; } justify-content: flex-start; }
@media only screen and (min-width: 64.0625em) { @media only screen and (min-width: 40.0625em) {
.node-thematique .content aside.right .field-name-field-eclairages .field-items { .node-thematique .content aside.right .field-name-field-eclairages .field-items {
display: block; } } display: block; } }
.node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item { .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item {
display: block; display: block;
background-color: #fff; background-color: #fff;
width: 33%; } width: 33%; }
@media only screen and (min-width: 64.0625em) { @media only screen and (min-width: 40.0625em) {
.node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item { .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item {
width: auto; } width: auto; }
.node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item:not(:last-child) { .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item:not(:last-child) {
@@ -475,7 +475,7 @@ input {
width: 90%; width: 90%;
height: 80%; height: 80%;
margin: 5px; } margin: 5px; }
@media only screen and (min-width: 64.0625em) { @media only screen and (min-width: 40.0625em) {
.node-thematique .content aside.right .node-documentair .content .group-txt { .node-thematique .content aside.right .node-documentair .content .group-txt {
margin: 15px; } } 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 {
@@ -507,7 +507,7 @@ 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; }
@media only screen and (min-width: 64.0625em) { @media only screen and (min-width: 40.0625em) {
.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-field-doc {
background-color: transparent; } background-color: transparent; }
.node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-title-field { .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-title-field {
@@ -526,7 +526,7 @@ 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: 64.0625em) { @media only screen and (min-width: 40.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 {
@@ -546,7 +546,7 @@ input {
flex-flow: row wrap; flex-flow: row wrap;
-ms-flex-pack: start; -ms-flex-pack: start;
justify-content: flex-start; } justify-content: flex-start; }
@media only screen and (min-width: 64.0625em) { @media only screen and (min-width: 40.0625em) {
.node-thematique .content aside.bottom .field-name-field-episodes > .field-items { .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
-ms-flex-flow: row nowrap; -ms-flex-flow: row nowrap;
flex-flow: row nowrap; flex-flow: row nowrap;
@@ -556,7 +556,7 @@ input {
display: block; display: block;
background-color: #fff; background-color: #fff;
width: 50%; } width: 50%; }
@media only screen and (min-width: 64.0625em) { @media only screen and (min-width: 40.0625em) {
.node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
width: 19%; } } width: 19%; } }
.node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content { .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content {
sites/all/themes/figureslibres/clameurs/css/styles.scss
+13 -13
View File
@@ -449,7 +449,7 @@ $header_height_large:400px;
// /_/ /_/ /_/\__,_/_/_/ /_/ // /_/ /_/ /_/\__,_/_/_/ /_/
article.main{ article.main{
@media #{$large-up} { @media #{$medium-up} {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width:$main_w; width:$main_w;
@@ -480,7 +480,7 @@ $header_height_large:400px;
} }
.value{ .value{
display:none; display:none;
@media #{$xlarge-up} { @media #{$medium-up} {
display: block; display: block;
} }
position:absolute; position:absolute;
@@ -493,7 +493,7 @@ $header_height_large:400px;
background-color: #fff; background-color: #fff;
} }
} }
@media #{$large-up} { @media #{$medium-up} {
&:hover{ &:hover{
// .summary{background-color: #fff;} // .summary{background-color: #fff;}
.value{ .value{
@@ -541,7 +541,7 @@ $header_height_large:400px;
} }
} }
} }
@media #{$large-up} { @media #{$medium-up} {
&:hover .group-description{ &:hover .group-description{
// background-color: rgba(255,255,255,0.9); // background-color: rgba(255,255,255,0.9);
// .field-name-field-ecouter{ // .field-name-field-ecouter{
@@ -561,28 +561,28 @@ $header_height_large:400px;
aside.right{ aside.right{
margin-top:$gouttiere; margin-top:$gouttiere;
@media #{$large-up} { @media #{$medium-up} {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width: $right_w; width: $right_w;
margin-top: 0; margin-top: 0;
} }
.field-name-field-eclairages{ .field-name-field-eclairages{
@media #{$large-up} { @media #{$medium-up} {
padding-left:1em; padding-left:1em;
} }
.field-items{ .field-items{
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: flex-start; justify-content: flex-start;
@media #{$large-up} { @media #{$medium-up} {
display: block; display: block;
} }
&>.field-item{ &>.field-item{
display: block; display: block;
background-color: #fff; background-color: #fff;
width:33%; width:33%;
@media #{$large-up} { @media #{$medium-up} {
width:auto; width:auto;
&:not(:last-child){ &:not(:last-child){
padding-bottom: $gouttiere; padding-bottom: $gouttiere;
@@ -604,7 +604,7 @@ $header_height_large:400px;
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:5px; margin:5px;
@media #{$large-up} { @media #{$medium-up} {
margin:15px; margin:15px;
} }
// opacity: 0; // opacity: 0;
@@ -627,7 +627,7 @@ $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;}
} }
@media #{$large-up} { @media #{$medium-up} {
&:not(.en_attente):hover .group-txt{ &:not(.en_attente):hover .group-txt{
.field-name-field-doc{background-color: transparent;} .field-name-field-doc{background-color: transparent;}
.field-name-title-field{opacity: 1;} .field-name-title-field{opacity: 1;}
@@ -657,7 +657,7 @@ $header_height_large:400px;
// /_/ // /_/
aside.bottom{ aside.bottom{
padding-top: $gouttiere; padding-top: $gouttiere;
@media #{$large-up} { @media #{$medium-up} {
padding-top: $gouttiere*0.5; padding-top: $gouttiere*0.5;
} }
.field-name-field-episodes{ .field-name-field-episodes{
@@ -671,7 +671,7 @@ $header_height_large:400px;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: flex-start; justify-content: flex-start;
@media #{$large-up} { @media #{$medium-up} {
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between; justify-content: space-between;
} }
@@ -679,7 +679,7 @@ $header_height_large:400px;
display: block; display: block;
background-color: #fff; background-color: #fff;
width:50%; width:50%;
@media #{$large-up} { @media #{$medium-up} {
width:19%; width:19%;
} }
.node-episode{ .node-episode{