page programme

This commit is contained in:
2020-07-20 14:46:38 +02:00
parent 72d68fb74e
commit edd9e6e68a
7 changed files with 401 additions and 381 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -6,17 +6,13 @@ header{
background: white; background: white;
} }
main:not(.home){
margin-top: 0rem;
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
main:not(.home){
margin-top: 5rem!important; margin-top: 5rem!important;
} }
} }
main:not(.home){
margin-top: 0rem;
}
img{ img{
width:100%; width:100%;
height: 100%; height: 100%;
@@ -94,28 +90,25 @@ blockquote{
} }
} }
// page programme
.container{ .container{
&.programme{ &.programme{
margin-top: 3rem; padding-top: 3rem;
h3{ h3{
margin: 0; margin: 0.5rem 0;
} }
.views{ .views{
section{ section{
& > div{ margin: 1rem 0;
margin-bottom: 3rem; .row{
padding: 2rem 0;
} }
&:not(:last-child){ &:not(:last-child){
@include croix_or; @include croix_or;
margin: 0 0 2rem 0;
& > .d-flex{ & > .d-flex{
padding: 0 0 2rem 0; padding: 0 0 2rem 0;
} }
} }
&:last-child{
margin-bottom: 5rem ;
}
} }
} }
} }
@@ -1,278 +1,377 @@
.thumbnails{ header{
margin: 1rem 0rem; display: none;
// max-width: 300px; }
min-width: 250px; // thumbnails global
.thumbnails{
width: 100%;
height: auto; height: auto;
width: calc(100% / 4 );
background: white; background: white;
transform: scale(1); margin: 0.5rem 0;
@include shadow; @include shadow;
a{ figure{
display: block; height: 150px;
height: 100%; margin: 0;
} }
.__content{
margin-top: 1rem;
}
.d-flex{
// padding: 1rem;
}
&.programme{
.__wrap{ .__wrap{
padding: 1rem; padding: 1rem;
& > .d-flex{
margin-bottom: 0.5rem;
} }
} }
// thumbnails publications
&.publications{ &.publications{
width: 100%;
.__media{ .__media{
padding: 1rem; padding: 1rem 0 1rem 1rem;
figure{
height: 100%;
img{
width: 100%;
height: 100%;
object-fit: cover;
} }
} @media screen and (min-width: 768px) {
}
.__content{
margin: 1rem 1rem 1rem 0;
}
}
}
.thumbnails{
figure{
height: 120px;
margin: 0;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.programme{
.row{
margin: 0;
}
.thumbnails{
width: 100%;
margin: 0;
figure{
height: 250px;
}
}
}
@media screen and (min-width: 768px) {
.thumbnails{
&.publications{
width: calc(100% / 2 - #{$gutter1} * 2); width: calc(100% / 2 - #{$gutter1} * 2);
} }
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter1} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter1} * 2);
}
} }
} }
@media screen and (min-width: 992px) {
.programme{ // thumbnails slides
.row{ .__slide{
margin: $gutter1 calc(-#{$gutter1});
}
.thumbnails{ .thumbnails{
width: calc( 50% - #{$gutter1} * 2); max-width: 380px;
margin: 0 $gutter1;
figure{
height: 250px;
}
}
} }
}
// Page programme
.container{
&.programme{
.thumbnails{ .thumbnails{
&.publications{ @media screen and (min-width: 768px) {
width: calc(100% / 4 - #{$gutter1} * 4); width: calc(100% / 2 - #{$gutter1} * 2);
margin: 0.5rem;
}
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter1} * 2);
}
// @media screen and (min-width: 1200px) {
// width: calc(100% / 4 - #{$gutter1} * 2);
// }
} }
} }
} }
// @media screen and (min-width: 992px) {
// .programme{
// .row{
// margin: $gutter1 calc(-#{$gutter1});
// }
// .thumbnails{
// width: calc( 50% - #{$gutter1} * 2);
// margin: 0 $gutter1;
// }
// }
// .thumbnails{
// &.publications{
// width: calc(100% / 4 - #{$gutter1} * 4);
// }
// }
// }
.thumbnails_participants{ // .thumbnails{
figure{ // margin: 1rem 0rem;
& > div{ // // max-width: 300px;
width: 100px; // min-width: 250px;
height: 100px; // height: auto;
margin-left: 0.5rem; // width: calc(100% / 4 );
// background: white;
// transform: scale(1);
// @include shadow;
// a{
// display: block;
// height: 100%;
// }
// .__content{
// margin-top: 1rem;
// }
// &.programme{
// .__wrap{
// padding: 1rem;
// }
// }
// &.publications{
// width: 100%;
// .__media{
// padding: 1rem;
// figure{
// height: 100%;
// img{
// width: 100%;
// height: 100%;
// object-fit: cover;
// }
// }
// }
// .__content{
// margin: 1rem 1rem 1rem 0;
// }
// }
// }
//
// .thumbnails{
// figure{
// height: 120px;
// margin: 0;
// img{
// width: 100%;
// height: 100%;
// object-fit: cover;
// }
// }
// }
//
// .programme{
// .row{
// margin: 0;
// }
// .thumbnails{
// width: 100%;
// margin: 0;
// figure{
// height: 150px;
// }
// }
// }
//
//
img{ //
border-radius: 50%; //
width: 100%; // .container {
height: 100%; // &.programme{
object-fit: cover; // .views{
} // section{
} // .row{
figcaption{ // margin: 1rem 0;
&.__info{ // }
padding: 4rem 0.5rem 0.5rem 0.5rem; // }
margin-top: -3rem; // }
background: white; // .thumbnails{
.__name{ // width: 100%;
text-transform: uppercase; // margin: 1rem 0;
} // }
.__qualite{ // }
// @media screen and (min-width: 768px) {
} // &.programme{
} // .row{
} // .thumbnails{
} // width: calc( 50% - #{$gutter1} * 2);
} // // min-width: calc( 50% - #{$gutter1} * 2);
// margin: 0 $gutter1;
article{ // }
.__publications{ // }
& > div{ // }
article{ // }
width: 100%; // @media screen and (min-width: 992px) {
@include shadow; // &.programme{
figure{ // .row{
padding: 1rem; // .thumbnails{
.__media{ // width: calc( (100% / 3) - #{$gutter1} * 3);
margin-right: 1rem; // // min-width: calc( 50% - #{$gutter1} * 2);
} // margin: 0 $gutter1;
figcaption { // }
width: 80%; // }
} // }
} // }
} // @media screen and (min-width: 1200px) {
} // &.programme{
} // .row{
.__bibliographie{ // .thumbnails{
& > div{ // width: calc( (100% / 4) - #{$gutter1} * 4);
article{ // // min-width: calc( 50% - #{$gutter1} * 2);
width: 100%; // margin: 0 $gutter1;
a{ // }
& > div { // }
p, span, div{ // }
display: inline; // }
background: white; //
} // .thumbnails_participants{
} // figure{
} // & > div{
} // width: 100px;
} // height: 100px;
} // margin-left: 0.5rem;
} //
// img{
.container { // border-radius: 50%;
&.publications{ // width: 100%;
section{ // height: 100%;
article{ // object-fit: cover;
width: 100%; // }
@include shadow; // }
figure{ // figcaption{
padding: 1rem; // &.__info{
.__media{ // padding: 4rem 0.5rem 0.5rem 0.5rem;
margin-right: 1rem; // margin-top: -3rem;
} // background: white;
figcaption { // .__name{
width: 80%; // text-transform: uppercase;
} // }
} // .__qualite{
} //
} // }
} // }
&.bilbiographie{ // }
article{ // }
width: 100%; // }
a{ //
& > div { // article{
p, span, div{ // .__publications{
display: inline; // & > div{
background: white; // article{
} // width: 100%;
} // @include shadow;
} // figure{
} // padding: 1rem;
} // .__media{
} // margin-right: 1rem;
// }
@media screen and (min-width: 992px) { // figcaption {
article{ // width: 80%;
.__publications{ // }
& > div{ // }
margin: 0 calc(-#{$gutter1}); // }
article{ // }
width: calc( 50% - #{$gutter1} * 2); // }
margin: 0 $gutter1; // .__bibliographie{
@include shadow; // & > div{
figure{ // article{
padding: 1rem; // width: 100%;
.__media{ // a{
margin-right: 1rem; // & > div {
} // p, span, div{
figcaption { // display: inline;
width: 80%; // background: white;
} // }
} // }
} // }
} // }
} // }
.__bibliographie{ // }
& > div{ // }
margin: 0 calc(-#{$gutter1}); //
article{ //
width: calc( 100% / 3 - #{$gutter1} * 3); // &.publications{
margin: 0 $gutter1; // section{
figure{ // article{
padding: 1rem; // width: 100%;
.__media{ // @include shadow;
margin-right: 1rem; // figure{
} // padding: 1rem;
figcaption { // .__media{
width: 80%; // margin-right: 1rem;
} // }
} // figcaption {
} // width: 80%;
} // }
} // }
} // }
// }
.container { // }
&.publications{ // &.bilbiographie{
section{ // article{
article{ // width: 100%;
width: calc( 50% - #{$gutter1} * 2); // a{
margin: 0 $gutter1; // & > div {
@include shadow; // p, span, div{
figure{ // display: inline;
padding: 1rem; // background: white;
.__media{ // }
margin-right: 1rem; // }
} // }
figcaption { // }
width: 80%; // }
} // }
} //
} // @media screen and (min-width: 992px) {
} // article{
.views{ // .__publications{
&.__publications{ // & > div{
article{ // margin: 0 calc(-#{$gutter1});
width: calc( 25% - #{$gutter1} * 4); // article{
} // width: calc( 50% - #{$gutter1} * 2);
} // margin: 0 $gutter1;
} // @include shadow;
} // figure{
&.bibliographie{ // padding: 1rem;
article{ // .__media{
width: calc( 100% / 3 - #{$gutter1} * 3); // margin-right: 1rem;
margin: 0 $gutter1; // }
figure{ // figcaption {
padding: 1rem; // width: 80%;
.__media{ // }
margin-right: 1rem; // }
} // }
figcaption { // }
width: 80%; // }
} // .__bibliographie{
} // & > div{
} // margin: 0 calc(-#{$gutter1});
} // article{
} // width: calc( 100% / 3 - #{$gutter1} * 3);
} // margin: 0 $gutter1;
// figure{
// padding: 1rem;
// .__media{
// margin-right: 1rem;
// }
// figcaption {
// width: 80%;
// }
// }
// }
// }
// }
// }
//
// .container {
// &.publications{
// section{
// article{
// width: calc( 50% - #{$gutter1} * 2);
// margin: 0 $gutter1;
// @include shadow;
// figure{
// padding: 1rem;
// .__media{
// margin-right: 1rem;
// }
// figcaption {
// width: 80%;
// }
// }
// }
// }
// .views{
// &.__publications{
// article{
// width: calc( 25% - #{$gutter1} * 4);
// }
// }
// }
// }
// &.bibliographie{
// article{
// width: calc( 100% / 3 - #{$gutter1} * 3);
// margin: 0 $gutter1;
// figure{
// padding: 1rem;
// .__media{
// margin-right: 1rem;
// }
// figcaption {
// width: 80%;
// }
// }
// }
// }
// }
// }
@@ -127,11 +127,7 @@ blockquote{
font-size: 2.5rem; font-size: 2.5rem;
line-height: 3rem; line-height: 3rem;
font-weight: lighter; font-weight: lighter;
} @media screen and (min-width: 768px) {
}
@media screen and (min-width: 768px) {
blockquote{
p{
font-size: 3rem; font-size: 3rem;
line-height: 3.5rem; line-height: 3.5rem;
} }
@@ -174,12 +170,15 @@ a{
} }
} }
// Page programme
.container{
.programme{ &.programme{
h3{ h3{
font-size: 1.5rem; font-size: 1.5rem;
font-family: 'truenoregular'; font-family: 'truenoregular';
color: $col_black;
}
} }
} }
@@ -2,7 +2,7 @@
{{fields.field_image.content}} {{fields.field_image.content}}
</figure> </figure>
<div class="__wrap"> <div class="__wrap">
<div class="d-flex m-0"> <div class="d-flex">
<time datetime="{{fields.field_heure_du_moment.content}}" class="__date mr-1"> <time datetime="{{fields.field_heure_du_moment.content}}" class="__date mr-1">
{{fields.field_heure_du_moment.content}} {{fields.field_heure_du_moment.content}}
</time> </time>
@@ -25,12 +25,12 @@
{% endif %} {% endif %}
<div class="row justify-content-end"> <div class="row justify-content-end">
{% if rows[0] %} {% if rows[0] %}
<div class="__wrap_side col-sm-12 col-md-1 p-0 mt-0 mb-3"> <div class="__wrap_side col-sm-12 col-md-1 my-3 my-sm-2">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %} {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
</div> </div>
{% endif %} {% endif %}
<div class="col-sm-12 col-md-11 d-flex "> <div class="col-sm-12 col-md-11 d-flex flex-wrap ">
{% for row in rows %} {% for row in rows %}
{% {%
set row_classes = [ set row_classes = [