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/styles.scss
+146 -40
View File
@@ -3,6 +3,50 @@
* Author: Bachir Soussi Chiadmi
*/
@function lower-bound($range) {
@if length($range) <= 0 {
@return 0;
}
@return nth($range, 1);
}
@function upper-bound($range) {
@if length($range) < 2 {
@return 999999999999;
}
@return nth($range, 2);
}
@function em-calc($px-value, $rem-base: 16) {
$value: $px-value / $rem-base;
@return $value * 1em;
}
$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 */
$xxlarge-range: (em-calc(1921), 99999999px); /* between 1920px & infinity */
$screen: 'only screen';
$landscape: '#{$screen} and (orientation: landscape)';
$portrait: '#{$screen} and (orientation: portrait)';
$small-up: $screen;
$small-only: '#{$screen} and (max-width: #{upper-bound($small-range)})';
$medium-up: '#{$screen} and (min-width:#{lower-bound($medium-range)})';
$medium-only: '#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})';
$large-up: '#{$screen} and (min-width:#{lower-bound($large-range)})';
$large-only: '#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})';
$xlarge-up: '#{$screen} and (min-width:#{lower-bound($xlarge-range)})';
$xlarge-only: '#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})';
$xxlarge-up: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)})';
$xxlarge-only: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})';
body{
font-size:16px;
@@ -47,20 +91,23 @@ $coul5 : #8800aa;
body{
}
$maxw:1000px;
@mixin main_centred(){
width:1024px; margin:0 auto;
width:95%;
margin:0 auto;
@media #{$large-up} {
max-width: $maxw;
}
}
#container{
width:1024px; margin:0 auto;
// overflow-x: visible;
}
$header_height:400px;
$header_height_small:200px;
$header_height_large:400px;
#header{
position: fixed;
width:100%; max-height: $header_height;
@media #{$large-up} {
position: fixed;
}
width:100%;
z-index: 20;
background-color: transparentize(#fff, 0.05);
background-image: url(../../images/fond-trame-logo-lite.png);
@@ -68,6 +115,11 @@ $header_height:400px;
background-position: center top;
background-size: contain;
max-height: $header_height_small;
@media #{$large-up} {
max-height: $header_height_large;
}
// box-shadow: 0 3px 3px transparentize(#fff, 0.05);
hgroup.logo{
@@ -77,7 +129,10 @@ $header_height:400px;
h1{margin:0;}
h1 a{
display:block;
height:300px;
height:$header_height_small*0.6;
@media #{$large-up} {
height: $header_height_large*0.8;
}
// transition: height 0.1s ease-in-out;
background-image: url(../../images/logo.png);
background-size: contain;
@@ -90,11 +145,19 @@ $header_height:400px;
h2{
text-align: center;
color:$vert;
font-size: 1em;
@media #{$large-up} {
font-size: 2em;
}
}
}
#main{
padding-top: $header_height;
// padding-top: $header_height_small;
@media #{$large-up} {
padding-top: $header_height_large;
}
>.region{
@include main_centred();
}
@@ -121,6 +184,11 @@ $header_height:400px;
}
#thematique-anchor-links{
display:none;
@media #{$large-up} {
display:block;
}
padding:1em 0;
ul{
display: flex;
@@ -231,13 +299,18 @@ $header_height:400px;
&::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;
// border: 1px dotted red;
background-size: cover;
width:100%; height:100%;
top:0; left:0;
@media #{$large-up} {
background-size: contain;
width:110%; height:110%;
top:-5%; left:-5%;
}
}
@mixin node_thema($bg, $sb_bg, $coul){
@@ -307,6 +380,11 @@ $header_height:400px;
font-weight: 400;
// padding-left: 0.18em;
position:relative;
margin:2em 0 0;
padding: 0 2em 0 0;
@media #{$large-up} {
padding:0;
}
span{
position: absolute;
top:-170px;
@@ -314,7 +392,6 @@ $header_height:400px;
}
.content{
.field-name-field-emvideo img{width: 100%;}
letter-spacing: -0.25em;
>*{letter-spacing: normal;}
@@ -329,18 +406,24 @@ $header_height:400px;
// / / / / / / /_/ / / / / /
// /_/ /_/ /_/\__,_/_/_/ /_/
article.main{
display: inline-block;
vertical-align: top;
width:$main_w;
@media #{$large-up} {
display: inline-block;
vertical-align: top;
width:$main_w;
}
overflow: hidden;
.field-name-body{
position: relative; z-index: 3;
>*{padding:0 1em 0 0;}
.summary{
position: relative;
height:5.75em; overflow: hidden;
background-color: #fff;
background-color: transparentize(#fff, 0.4);
transition: background-color 0.5 ease-in-out;
@media #{$large-up} {
height:5.75em; overflow: hidden;
}
p{
font-size: 1.1em;
padding:0.5em 0.5em 0.5em 0;
@@ -348,6 +431,10 @@ $header_height:400px;
}
}
.value{
display:none;
@media #{$large-up} {
display: block;
}
position:absolute;
height:1px; margin-bottom: 0;
transition:height 0.5s ease-in-out;
@@ -357,17 +444,24 @@ $header_height:400px;
font-size: 1em; padding: 0.5em;
}
}
&:hover{
.summary{background-color: #fff;}
.value{
height:700px;
@media #{$large-up} {
&:hover{
.summary{background-color: #fff;}
.value{
height:700px;
}
}
}
p{padding:0 0 1em; margin: 0;}
} //field-name-body
.group-video{
position: relative;
min-height: 432px;
@media #{$large-up} {
min-height: 432px;
}
.field-name-field-emvideo img{
max-width: 100%; height: auto;
}
.field-name-field-emvideo a{ display: block; line-height: 0;}
.group-description{
cursor: pointer; pointer-events: none;
@@ -413,11 +507,18 @@ $header_height:400px;
// / /_/ / /_/ / /__(__ )
// \__,_/\____/\___/____/
aside.right{
display: inline-block;
vertical-align: top;
width: $right_w;
margin-top:$gouttiere;
@media #{$large-up} {
display: inline-block;
vertical-align: top;
width: $right_w;
margin-top: 0;
}
.field-name-field-eclairages{
padding-left:1em;
@media #{$large-up} {
padding-left:1em;
}
.field-item:not(:last-child){
padding-bottom: $gouttiere;
}
@@ -432,7 +533,7 @@ $header_height:400px;
box-sizing: border-box;
position:absolute; z-index: 2; overflow: hidden;
top:0; left:0; width:90%; height:80%;
margin:5%;
margin:15px;
// opacity: 0;
.field-name-field-doc{
@include vidlabel;
@@ -450,6 +551,7 @@ $header_height:400px;
transition:opacity 0.3s ease-in-out;
}
}
.group-video img{ width:100%; height:auto;}
.group-video a{ display: block; line-height: 0;}
}
&:not(.en_attente):hover .group-txt{
@@ -479,7 +581,10 @@ $header_height:400px;
// \___/ .___/_/____/\____/\__,_/\___/____/
// /_/
aside.bottom{
padding-top: $gouttiere*0.5;
padding-top: $gouttiere;
@media #{$large-up} {
padding-top: $gouttiere*0.5;
}
.field-name-field-episodes{
// letter-spacing: -0.25em;
@@ -488,17 +593,17 @@ $header_height:400px;
margin-bottom: 0.3em;
}
&>.field-items{
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
@media #{$large-up} {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
&>.field-item{
display: block;
// letter-spacing: normal;
// display: inline-block;
width:19%;
// padding-right:1%;
// min-height: 110px;
background-color: #fff;
@media #{$large-up} {
width:19%;
}
.node-episode{
.content{
position: relative;
@@ -518,6 +623,7 @@ $header_height:400px;
text-align: center;
}
}
.group-video img{ width:100%; height:auto;}
.group-video a{ display: block; line-height: 0;}
}