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/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;