started responsive dev for mobile
This commit is contained in:
+163
-97
@@ -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 {
|
||||
|
||||
@@ -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;}
|
||||
}
|
||||
|
||||
|
||||
@@ -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');});}
|
||||
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);
|
||||
@@ -35,15 +35,20 @@
|
||||
header_height = $header.height(),
|
||||
$slogan = $('#header h2'),
|
||||
fontsize = parseInt($slogan.css('font-size')), tmpfs,
|
||||
scrolltop;
|
||||
scrolltop, limit = 300;
|
||||
|
||||
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;
|
||||
scrolltop = limit - $(this).scrollTop() * .5;
|
||||
scrolltop = Math.max(limit*0.35,scrolltop);
|
||||
// console.log('scrolltop', scrolltop);
|
||||
alpha = scrolltop/limit;
|
||||
console.log('scrolltop '+scrolltop+' | allpha '+alpha);
|
||||
|
||||
$header.height(header_height*alpha);
|
||||
|
||||
tmpfs = fontsize*alpha;
|
||||
$slogan.css('font-size', tmpfs+"px");
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user