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 * Primary Drupal Styles
* Author: Bachir Soussi Chiadmi * Author: Bachir Soussi Chiadmi
*/ */
/* between 0 & 640px */
/* between 640px & 1000px */
/* between 1001px & 1025px */
/* between 1026px & 1920px */
/* between 1920px & infinity */
body { body {
font-size: 16px; font-size: 16px;
font-family: "aileron", Arial, "MS Trebuchet", sans-serif; } font-family: "aileron", Arial, "MS Trebuchet", sans-serif; }
@@ -36,29 +41,33 @@ input {
#header, #main, #footer { #header, #main, #footer {
padding: 0; } padding: 0; }
#container {
width: 1024px;
margin: 0 auto; }
#header { #header {
position: fixed;
width: 100%; width: 100%;
max-height: 400px;
z-index: 20; z-index: 20;
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
background-image: url(../../images/fond-trame-logo-lite.png); background-image: url(../../images/fond-trame-logo-lite.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center top; 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 { #header hgroup.logo {
width: 1024px; width: 95%;
margin: 0 auto; margin: 0 auto;
padding: 1em 0 0; } padding: 1em 0 0; }
@media only screen and (min-width: 62.5625em) {
#header hgroup.logo {
max-width: 1000px; } }
#header h1 { #header h1 {
margin: 0; } margin: 0; }
#header h1 a { #header h1 a {
display: block; display: block;
height: 300px; height: 120px;
background-image: url(../../images/logo.png); background-image: url(../../images/logo.png);
background-size: contain; background-size: contain;
background-position: center; background-position: center;
@@ -66,15 +75,27 @@ input {
text-indent: -2000px; text-indent: -2000px;
overflow: hidden; overflow: hidden;
margin: 0; } margin: 0; }
@media only screen and (min-width: 62.5625em) {
#header h1 a {
height: 320px; } }
#header h2 { #header h2 {
text-align: center; text-align: center;
color: #20c498; } color: #20c498;
font-size: 1em; }
@media only screen and (min-width: 62.5625em) {
#header h2 {
font-size: 2em; } }
#main { @media only screen and (min-width: 62.5625em) {
padding-top: 400px; } #main {
#main > .region { padding-top: 400px; } }
width: 1024px;
margin: 0 auto; } #main > .region {
width: 95%;
margin: 0 auto; }
@media only screen and (min-width: 62.5625em) {
#main > .region {
max-width: 1000px; } }
#node-63 { #node-63 {
padding: 1em 0; } padding: 1em 0; }
@@ -96,7 +117,11 @@ input {
font-weight: 500; } font-weight: 500; }
#thematique-anchor-links { #thematique-anchor-links {
display: none;
padding: 1em 0; } padding: 1em 0; }
@media only screen and (min-width: 62.5625em) {
#thematique-anchor-links {
display: block; } }
#thematique-anchor-links ul { #thematique-anchor-links ul {
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@@ -171,14 +196,21 @@ input {
.node-thematique::before { .node-thematique::before {
position: absolute; position: absolute;
content: " "; content: " ";
width: 110%;
height: 110%;
top: -5%;
left: -5%;
z-index: -1; z-index: -1;
background-position: center; 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 { .node-thematique.node-32::before {
background-image: url(../../images/fond-theme-0-flat.png); } background-image: url(../../images/fond-theme-0-flat.png); }
.node-thematique.node-32.en_attente::before { .node-thematique.node-32.en_attente::before {
@@ -302,21 +334,26 @@ input {
.node-thematique > h2 { .node-thematique > h2 {
font-size: 3em; font-size: 3em;
font-weight: 400; 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 { .node-thematique > h2 span {
position: absolute; position: absolute;
top: -170px; } top: -170px; }
.node-thematique .content { .node-thematique .content {
letter-spacing: -0.25em; } letter-spacing: -0.25em; }
.node-thematique .content .field-name-field-emvideo img {
width: 100%; }
.node-thematique .content > * { .node-thematique .content > * {
letter-spacing: normal; } letter-spacing: normal; }
.node-thematique .content article.main { .node-thematique .content article.main {
display: inline-block;
vertical-align: top;
width: 69.5%;
overflow: hidden; } 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 { .node-thematique .content article.main .field-name-body {
position: relative; position: relative;
z-index: 3; } z-index: 3; }
@@ -324,34 +361,46 @@ input {
padding: 0 1em 0 0; } padding: 0 1em 0 0; }
.node-thematique .content article.main .field-name-body .summary { .node-thematique .content article.main .field-name-body .summary {
position: relative; position: relative;
height: 5.75em; background-color: rgba(255, 255, 255, 0.6);
overflow: hidden;
background-color: #fff;
transition: background-color 0.5 ease-in-out; } 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 { .node-thematique .content article.main .field-name-body .summary p {
font-size: 1.1em; font-size: 1.1em;
padding: 0.5em 0.5em 0.5em 0; padding: 0.5em 0.5em 0.5em 0;
font-weight: 500; } font-weight: 500; }
.node-thematique .content article.main .field-name-body .value { .node-thematique .content article.main .field-name-body .value {
display: none;
position: absolute; position: absolute;
height: 1px; height: 1px;
margin-bottom: 0; margin-bottom: 0;
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: 62.5625em) {
.node-thematique .content article.main .field-name-body .value {
display: block; } }
.node-thematique .content article.main .field-name-body .value p { .node-thematique .content article.main .field-name-body .value p {
font-size: 1em; font-size: 1em;
padding: 0.5em; } padding: 0.5em; }
.node-thematique .content article.main .field-name-body:hover .summary { @media only screen and (min-width: 62.5625em) {
background-color: #fff; } .node-thematique .content article.main .field-name-body:hover .summary {
.node-thematique .content article.main .field-name-body:hover .value { background-color: #fff; }
height: 700px; } .node-thematique .content article.main .field-name-body:hover .value {
height: 700px; } }
.node-thematique .content article.main .field-name-body p { .node-thematique .content article.main .field-name-body p {
padding: 0 0 1em; padding: 0 0 1em;
margin: 0; } margin: 0; }
.node-thematique .content article.main .group-video { .node-thematique .content article.main .group-video {
position: relative; position: relative; }
min-height: 432px; } @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 { .node-thematique .content article.main .group-video .field-name-field-emvideo a {
display: block; display: block;
line-height: 0; } line-height: 0; }
@@ -390,13 +439,18 @@ input {
.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 {
display: inline-block; margin-top: 1.2em; }
vertical-align: top; @media only screen and (min-width: 62.5625em) {
width: 30.5%; } .node-thematique .content aside.right {
.node-thematique .content aside.right .field-name-field-eclairages { display: inline-block;
padding-left: 1em; } vertical-align: top;
.node-thematique .content aside.right .field-name-field-eclairages .field-item:not(:last-child) { width: 30.5%;
padding-bottom: 1.2em; } 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 { .node-thematique .content aside.right .node-documentair {
min-height: 160px; min-height: 160px;
background-color: #fff; } background-color: #fff; }
@@ -413,7 +467,7 @@ input {
left: 0; left: 0;
width: 90%; width: 90%;
height: 80%; height: 80%;
margin: 5%; } 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 {
font-size: 1em; font-size: 1em;
font-weight: 600; font-weight: 600;
@@ -434,6 +488,9 @@ input {
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
opacity: 0; opacity: 0;
transition: opacity 0.3s ease-in-out; } 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 { .node-thematique .content aside.right .node-documentair .content .group-video a {
display: block; display: block;
line-height: 0; } line-height: 0; }
@@ -454,7 +511,10 @@ input {
background-color: #fff; background-color: #fff;
opacity: 0.8; } opacity: 0.8; }
.node-thematique .content aside.bottom { .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 { .node-thematique .content aside.bottom .field-name-field-episodes .field-label {
font-size: 1em; font-size: 1em;
font-weight: 600; font-weight: 600;
@@ -462,58 +522,64 @@ input {
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
display: inline-block; display: inline-block;
margin-bottom: 0.3em; } margin-bottom: 0.3em; }
.node-thematique .content aside.bottom .field-name-field-episodes > .field-items { @media only screen and (min-width: 62.5625em) {
display: -ms-flexbox; .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
display: flex; display: -ms-flexbox;
-ms-flex-flow: row nowrap; display: flex;
flex-flow: row nowrap; -ms-flex-flow: row nowrap;
-ms-flex-pack: justify; flex-flow: row nowrap;
justify-content: space-between; } -ms-flex-pack: justify;
.node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { justify-content: space-between; } }
display: block; .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
width: 19%; display: block;
background-color: #fff; } background-color: #fff; }
.node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content { @media only screen and (min-width: 62.5625em) {
position: relative; } .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 .node-episode .content .group-txt { width: 19%; } }
cursor: pointer; .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content {
pointer-events: none; position: relative; }
box-sizing: border-box; .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt {
position: absolute; cursor: pointer;
z-index: 2; pointer-events: none;
overflow: hidden; box-sizing: border-box;
top: 0; position: absolute;
left: 0; z-index: 2;
width: 90%; overflow: hidden;
height: 80%; top: 0;
margin: 5%; left: 0;
padding: 5%; width: 90%;
background-color: rgba(255, 255, 255, 0.9); height: 80%;
opacity: 1; margin: 5%;
transition: opacity,background-color 0.3s ease-in-out; } padding: 5%;
.node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field { background-color: rgba(255, 255, 255, 0.9);
font-size: 4em; opacity: 1;
font-weight: 800; transition: opacity,background-color 0.3s ease-in-out; }
font-style: italic; .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field {
text-align: center; } font-size: 4em;
.node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a { font-weight: 800;
display: block; font-style: italic;
line-height: 0; } text-align: center; }
.node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt { .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video img {
opacity: 0.9; width: 100%;
background-color: rgba(255, 255, 255, 0.3); } height: auto; }
.node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content { .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a {
position: relative; } display: block;
.node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content::before { line-height: 0; }
position: absolute; .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt {
top: 0; opacity: 0.9;
left: 0; background-color: rgba(255, 255, 255, 0.3); }
width: 100%; .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content {
height: 100%; position: relative; }
content: " "; .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content::before {
z-index: 10; position: absolute;
background-color: #fff; top: 0;
opacity: 0.8; } left: 0;
width: 100%;
height: 100%;
content: " ";
z-index: 10;
background-color: #fff;
opacity: 0.8; }
.node-thematique.en_attente .content > .main { .node-thematique.en_attente .content > .main {
position: relative; } position: relative; }
.node-thematique.en_attente .content > .main::before { .node-thematique.en_attente .content > .main::before {
sites/all/themes/figureslibres/clameurs/css/styles.scss
+146 -40
View File
@@ -3,6 +3,50 @@
* Author: Bachir Soussi Chiadmi * 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{ body{
font-size:16px; font-size:16px;
@@ -47,20 +91,23 @@ $coul5 : #8800aa;
body{ body{
} }
$maxw:1000px;
@mixin main_centred(){ @mixin main_centred(){
width:1024px; margin:0 auto; width:95%;
margin:0 auto;
@media #{$large-up} {
max-width: $maxw;
}
} }
#container{ $header_height_small:200px;
width:1024px; margin:0 auto; $header_height_large:400px;
// overflow-x: visible;
}
$header_height:400px;
#header{ #header{
position: fixed; @media #{$large-up} {
width:100%; max-height: $header_height; position: fixed;
}
width:100%;
z-index: 20; z-index: 20;
background-color: transparentize(#fff, 0.05); background-color: transparentize(#fff, 0.05);
background-image: url(../../images/fond-trame-logo-lite.png); background-image: url(../../images/fond-trame-logo-lite.png);
@@ -68,6 +115,11 @@ $header_height:400px;
background-position: center top; background-position: center top;
background-size: contain; 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); // box-shadow: 0 3px 3px transparentize(#fff, 0.05);
hgroup.logo{ hgroup.logo{
@@ -77,7 +129,10 @@ $header_height:400px;
h1{margin:0;} h1{margin:0;}
h1 a{ h1 a{
display:block; 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; // transition: height 0.1s ease-in-out;
background-image: url(../../images/logo.png); background-image: url(../../images/logo.png);
background-size: contain; background-size: contain;
@@ -90,11 +145,19 @@ $header_height:400px;
h2{ h2{
text-align: center; text-align: center;
color:$vert; color:$vert;
font-size: 1em;
@media #{$large-up} {
font-size: 2em;
}
} }
} }
#main{ #main{
padding-top: $header_height; // padding-top: $header_height_small;
@media #{$large-up} {
padding-top: $header_height_large;
}
>.region{ >.region{
@include main_centred(); @include main_centred();
} }
@@ -121,6 +184,11 @@ $header_height:400px;
} }
#thematique-anchor-links{ #thematique-anchor-links{
display:none;
@media #{$large-up} {
display:block;
}
padding:1em 0; padding:1em 0;
ul{ ul{
display: flex; display: flex;
@@ -231,13 +299,18 @@ $header_height:400px;
&::before{ &::before{
position: absolute; position: absolute;
content:" "; content:" ";
width:110%; height:110%;
top:-5%; left:-5%;
z-index: -1; z-index: -1;
background-position: center; background-position: center;
background-size: contain;
background-repeat: no-repeat; 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){ @mixin node_thema($bg, $sb_bg, $coul){
@@ -307,6 +380,11 @@ $header_height:400px;
font-weight: 400; font-weight: 400;
// padding-left: 0.18em; // padding-left: 0.18em;
position:relative; position:relative;
margin:2em 0 0;
padding: 0 2em 0 0;
@media #{$large-up} {
padding:0;
}
span{ span{
position: absolute; position: absolute;
top:-170px; top:-170px;
@@ -314,7 +392,6 @@ $header_height:400px;
} }
.content{ .content{
.field-name-field-emvideo img{width: 100%;}
letter-spacing: -0.25em; letter-spacing: -0.25em;
>*{letter-spacing: normal;} >*{letter-spacing: normal;}
@@ -329,18 +406,24 @@ $header_height:400px;
// / / / / / / /_/ / / / / / // / / / / / / /_/ / / / / /
// /_/ /_/ /_/\__,_/_/_/ /_/ // /_/ /_/ /_/\__,_/_/_/ /_/
article.main{ article.main{
display: inline-block;
vertical-align: top; @media #{$large-up} {
width:$main_w; display: inline-block;
vertical-align: top;
width:$main_w;
}
overflow: hidden; overflow: hidden;
.field-name-body{ .field-name-body{
position: relative; z-index: 3; position: relative; z-index: 3;
>*{padding:0 1em 0 0;} >*{padding:0 1em 0 0;}
.summary{ .summary{
position: relative; position: relative;
height:5.75em; overflow: hidden; background-color: transparentize(#fff, 0.4);
background-color: #fff;
transition: background-color 0.5 ease-in-out; transition: background-color 0.5 ease-in-out;
@media #{$large-up} {
height:5.75em; overflow: hidden;
}
p{ p{
font-size: 1.1em; font-size: 1.1em;
padding:0.5em 0.5em 0.5em 0; padding:0.5em 0.5em 0.5em 0;
@@ -348,6 +431,10 @@ $header_height:400px;
} }
} }
.value{ .value{
display:none;
@media #{$large-up} {
display: block;
}
position:absolute; position:absolute;
height:1px; margin-bottom: 0; height:1px; margin-bottom: 0;
transition:height 0.5s ease-in-out; transition:height 0.5s ease-in-out;
@@ -357,17 +444,24 @@ $header_height:400px;
font-size: 1em; padding: 0.5em; font-size: 1em; padding: 0.5em;
} }
} }
&:hover{ @media #{$large-up} {
.summary{background-color: #fff;} &:hover{
.value{ .summary{background-color: #fff;}
height:700px; .value{
height:700px;
}
} }
} }
p{padding:0 0 1em; margin: 0;} p{padding:0 0 1em; margin: 0;}
} //field-name-body } //field-name-body
.group-video{ .group-video{
position: relative; 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;} .field-name-field-emvideo a{ display: block; line-height: 0;}
.group-description{ .group-description{
cursor: pointer; pointer-events: none; cursor: pointer; pointer-events: none;
@@ -413,11 +507,18 @@ $header_height:400px;
// / /_/ / /_/ / /__(__ ) // / /_/ / /_/ / /__(__ )
// \__,_/\____/\___/____/ // \__,_/\____/\___/____/
aside.right{ aside.right{
display: inline-block; margin-top:$gouttiere;
vertical-align: top;
width: $right_w; @media #{$large-up} {
display: inline-block;
vertical-align: top;
width: $right_w;
margin-top: 0;
}
.field-name-field-eclairages{ .field-name-field-eclairages{
padding-left:1em; @media #{$large-up} {
padding-left:1em;
}
.field-item:not(:last-child){ .field-item:not(:last-child){
padding-bottom: $gouttiere; padding-bottom: $gouttiere;
} }
@@ -432,7 +533,7 @@ $header_height:400px;
box-sizing: border-box; box-sizing: border-box;
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:5%; margin:15px;
// opacity: 0; // opacity: 0;
.field-name-field-doc{ .field-name-field-doc{
@include vidlabel; @include vidlabel;
@@ -450,6 +551,7 @@ $header_height:400px;
transition:opacity 0.3s ease-in-out; transition:opacity 0.3s ease-in-out;
} }
} }
.group-video img{ width:100%; height:auto;}
.group-video a{ display: block; line-height: 0;} .group-video a{ display: block; line-height: 0;}
} }
&:not(.en_attente):hover .group-txt{ &:not(.en_attente):hover .group-txt{
@@ -479,7 +581,10 @@ $header_height:400px;
// \___/ .___/_/____/\____/\__,_/\___/____/ // \___/ .___/_/____/\____/\__,_/\___/____/
// /_/ // /_/
aside.bottom{ aside.bottom{
padding-top: $gouttiere*0.5; padding-top: $gouttiere;
@media #{$large-up} {
padding-top: $gouttiere*0.5;
}
.field-name-field-episodes{ .field-name-field-episodes{
// letter-spacing: -0.25em; // letter-spacing: -0.25em;
@@ -488,17 +593,17 @@ $header_height:400px;
margin-bottom: 0.3em; margin-bottom: 0.3em;
} }
&>.field-items{ &>.field-items{
display: flex; @media #{$large-up} {
flex-flow: row nowrap; display: flex;
justify-content: space-between; flex-flow: row nowrap;
justify-content: space-between;
}
&>.field-item{ &>.field-item{
display: block; display: block;
// letter-spacing: normal;
// display: inline-block;
width:19%;
// padding-right:1%;
// min-height: 110px;
background-color: #fff; background-color: #fff;
@media #{$large-up} {
width:19%;
}
.node-episode{ .node-episode{
.content{ .content{
position: relative; position: relative;
@@ -518,6 +623,7 @@ $header_height:400px;
text-align: center; text-align: center;
} }
} }
.group-video img{ width:100%; height:auto;}
.group-video a{ display: block; line-height: 0;} .group-video a{ display: block; line-height: 0;}
} }
sites/all/themes/figureslibres/clameurs/js/dist/script.min.js
Vendored
+1 -1
View File
@@ -1,3 +1,3 @@
(function($){Drupal.behaviors.init_theme=function(context){$('#messages-and-help > div.messages:not(.processed)').addClass('processed').each(function(){if($('a',this).size()||$(this).is('.error')||$(this).is('.warning')||$(this).text().length>100){$(this).prepend("<span class='close'>X</span>");$('span.close',this).click(function(){$(this).parent().slideUp('fast');});} (function($){Drupal.behaviors.init_theme=function(context){$('#messages-and-help > div.messages:not(.processed)').addClass('processed').each(function(){if($('a',this).size()||$(this).is('.error')||$(this).is('.warning')||$(this).text().length>100){$(this).prepend("<span class='close'>X</span>");$('span.close',this).click(function(){$(this).parent().slideUp('fast');});}
else{$(this).animate({opacity:1},5000,'linear',function(){$(this).slideUp('fast');});}});};function init(){console.log('Clameurs Theme');initHeaderAnime();};function initHeaderAnime(){var $header=$('#header a'),header_height=$header.height(),$slogan=$('#header h2'),fontsize=parseInt($slogan.css('font-size')),tmpfs,scrolltop;console.log('font-size',fontsize);$(window).on('scroll',function(event){scrolltop=$(this).scrollTop()*.5;console.log('scrolltop',scrolltop);$header.height(header_height-scrolltop>90?header_height-scrolltop:90);tmpfs=(300-(scrolltop<100?scrolltop:100))/300*fontsize;$slogan.css('font-size',tmpfs+"px");});};init();})(jQuery); else{$(this).animate({opacity:1},5000,'linear',function(){$(this).slideUp('fast');});}});};function init(){console.log('Clameurs Theme');initHeaderAnime();};function initHeaderAnime(){var $header=$('#header a'),header_height=$header.height(),$slogan=$('#header h2'),fontsize=parseInt($slogan.css('font-size')),tmpfs,scrolltop,limit=300;console.log('font-size',fontsize);$(window).on('scroll',function(event){scrolltop=limit-$(this).scrollTop()*.5;scrolltop=Math.max(limit*0.35,scrolltop);alpha=scrolltop/limit;console.log('scrolltop '+scrolltop+' | allpha '+alpha);$header.height(header_height*alpha);tmpfs=fontsize*alpha;$slogan.css('font-size',tmpfs+"px");});};init();})(jQuery);
sites/all/themes/figureslibres/clameurs/js/script.js
+10 -5
View File
@@ -35,15 +35,20 @@
header_height = $header.height(), header_height = $header.height(),
$slogan = $('#header h2'), $slogan = $('#header h2'),
fontsize = parseInt($slogan.css('font-size')), tmpfs, fontsize = parseInt($slogan.css('font-size')), tmpfs,
scrolltop; scrolltop, limit = 300;
console.log('font-size', fontsize); console.log('font-size', fontsize);
$(window).on('scroll', function(event) { $(window).on('scroll', function(event) {
scrolltop = $(this).scrollTop() * .5; scrolltop = limit - $(this).scrollTop() * .5;
console.log('scrolltop', scrolltop); scrolltop = Math.max(limit*0.35,scrolltop);
$header.height(header_height-scrolltop > 90 ? header_height-scrolltop : 90); // console.log('scrolltop', scrolltop);
tmpfs = (300 - (scrolltop < 100 ? scrolltop : 100)) / 300 * fontsize; alpha = scrolltop/limit;
console.log('scrolltop '+scrolltop+' | allpha '+alpha);
$header.height(header_height*alpha);
tmpfs = fontsize*alpha;
$slogan.css('font-size', tmpfs+"px"); $slogan.css('font-size', tmpfs+"px");
}); });
}; };