responsive

This commit is contained in:
2020-07-27 23:03:25 +02:00
parent 34741c345d
commit f7a6562f51
47 changed files with 1056 additions and 946 deletions
@@ -0,0 +1,7 @@
#txt_present { margin: 2rem 0; }
#txt_present > div { margin: 2rem auto; }
#txt_present .more_link { padding: 0rem 1rem 0.2rem 1rem; background: white; }
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJvbnQuY3NzIiwic291cmNlcyI6WyJmcm9udC5zY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIiN0eHRfcHJlc2VudHtcbiBtYXJnaW46IDJyZW0gMDtcbiAmICoge1xuICAgLy8gY29sb3I6ICRjb2xvcjI7XG4gfVxuICYgPiBkaXZ7XG4gICBtYXJnaW46IDJyZW0gYXV0bztcbiB9XG4gLm1vcmVfbGlua3tcbiAgIHBhZGRpbmc6IDByZW0gMXJlbSAwLjJyZW0gMXJlbTtcbiAgIGJhY2tncm91bmQ6IHdoaXRlO1xuIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxBQUFBLFlBQVksQ0FBQSxFQUNYLE1BQU0sRUFBRSxNQUFNLEdBV2Q7O0FBWkQsQUFLQyxZQUxXLEdBS1AsR0FBRyxDQUFBLEVBQ0wsTUFBTSxFQUFFLFNBQVMsR0FDbEI7O0FBUEYsQUFRQyxZQVJXLENBUVgsVUFBVSxDQUFBLEVBQ1IsT0FBTyxFQUFFLHFCQUFxQixFQUM5QixVQUFVLEVBQUUsS0FBSyxHQUNsQiJ9 */
@@ -0,0 +1 @@
#txt_present{margin:2rem 0}#txt_present>div{margin:2rem auto}#txt_present .more_link{padding:0 1rem .2rem 1rem;background:#fff}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,5 +1,16 @@
.more_link{ .more_link{
@include shadow; @include shadow;
padding: 0rem 1rem 0.2rem 1rem;
background: white;
border-radius: 0;
a{
font-family: 'truenoregular';
font-size: 0.6rem;
color: $color2;
span{
padding-left: 0.5rem;
}
}
} }
#block-views-block-slide-programme-block-1, #block-views-block-slide-programme-block-1,
@@ -2,11 +2,12 @@ footer{
background: white; background: white;
width: 100%; width: 100%;
height: auto; height: auto;
padding: 2rem 0; padding: 2rem 0 0 0;
margin-top:2rem; margin-top:2rem;
h2{ h2{
font-size: 1rem; font-size: 1.5rem;
text-transform: uppercase; text-transform: uppercase;
line-height: 1rem;
} }
a{ a{
color: black; color: black;
@@ -14,6 +15,37 @@ footer{
color: black; color: black;
} }
} }
& > .row{
& > div{
margin-bottom: 1.5rem;
}
}
#block-renderedsitesettingsblock-5{
.site_setting_entity{
& > div{
display: flex;
flex-wrap: nowrap;
@media screen and (min-width: 992px) {
display:block;
}
& > div{
width: calc((100% / 3) - #{$gutter});
max-width: 100px;
@media screen and (min-width: 992px) {
width: calc((100% / 2) - #{$gutter});
max-width: 200px;
margin-bottom: 2rem;
}
&:first-child{
margin-right: $gutter;
}
}
}
}
}
#block-renderedsitesettingsblock-4{ #block-renderedsitesettingsblock-4{
.site_setting_entity{ .site_setting_entity{
& > div{ & > div{
@@ -29,7 +61,6 @@ footer{
} }
} }
} }
.sub-title{ .sub-title{
font-size: 1rem; font-size: 1rem;
} }
@@ -4,44 +4,100 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
& > div{ & > div{
margin-right: 2rem; width: 100%;
@media screen and (min-width: 768px) {
width: calc((100% / 2) - ( #{$gutter} * 2);
}
@media screen and (min-width: 992px) {
width: auto;
}
@media screen and (min-width: 992px) {
margin-right: 2rem;
}
&:not(:last-child){ &:not(:last-child){
margin-bottom: 1rem; margin-bottom: 1rem;
@media screen and (min-width: 768px) {
margin-right: calc(#{$gutter} * 2);
}
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
margin-bottom: 0rem; margin-bottom: 0rem;
} }
} }
select{ label{
border: 1px solid $color2; min-width: max-content;
background: white; }
padding: 0.2rem 0.5rem; .select-selected{
outline: none; width: 100%;
&:focus{ min-width: 150px;
border: 2px solid $color2; background-color: white;
outline: none; color: $color2!important;
&::after{
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: $color2 transparent transparent transparent;
} }
option{ &.select-arrow-active{
padding: 0.2rem 0.5rem; &:after{
min-height: 2rem; transform: rotate(180deg);
top: 7px;
}
} }
} }
.select-items {
position: absolute;
background-color: $color2;
top: 100%;
right: 0;
z-index: 99;
min-width: 150px;
width: 100%;
}
} }
} #edit-actions{
.views-exposed-form{ @media screen and (min-width: 768px) {
input{ display: flex;
height: auto; flex-wrap: nowrap;
background: $color2; width: 100%;
color: white; }
border: none; @media screen and (min-width: 992px) {
outline: none; width: auto;
margin-right: 1rem; }
padding: 0.5rem 1rem; input{
&:focus{ width: 100%;
height: auto;
background: $color2;
color: white;
border: none; border: none;
outline: none; outline: none;
margin-top: 1rem;
padding: 0.5rem 1rem;
@media screen and (min-width: 768px) {
max-width: 50%;
margin-right: 1rem;
}
@media screen and (min-width: 992px) {
max-width: 100%;
margin-right: 0;
margin-top: 0;
}
&:focus{
border: none;
outline: none;
}
&#edit-submit-publications{
@media screen and (min-width: 768px) {
margin-right: calc(#{$gutter} * 2);
}
}
} }
} }
} }
.js-form-type-select { .js-form-type-select {
position: relative; position: relative;
font-family: Arial; font-family: Arial;
@@ -50,39 +106,17 @@
label{ label{
margin-right: 1rem; margin-right: 1rem;
} }
.select-selected{
min-width: 150px;
}
} }
.js-form-type-select select { .js-form-type-select select {
display: none; /*hide original SELECT element: */ display: none;
} }
.select-selected {
background-color: white;
color: $color2!important;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: $color2 transparent transparent transparent;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after { .select-selected.select-arrow-active:after {
border-color: transparent transparent $color2 transparent; border-color: transparent transparent $color2 transparent;
top: 7px; top: 7px;
} }
/* style the items (options), including the selected item: */
.select-items div,.select-selected { .select-items div,.select-selected {
color: #ffffff; color: #ffffff;
padding: 8px 30px 8px 16px; padding: 8px 30px 8px 16px;
@@ -91,17 +125,6 @@
cursor: pointer; cursor: pointer;
} }
/* Style items (options): */
.select-items {
position: absolute;
background-color: $color2;
top: 100%;
right: 0;
z-index: 99;
min-width: 150px;
}
/* Hide the items when the select box is closed: */
.select-hide { .select-hide {
display: none; display: none;
} }
@@ -67,7 +67,7 @@ header{
} }
} }
#block-mainnavigation{ #block-mainnavigation{
max-width: max-content; // max-width: max-content;
width: max-content; width: max-content;
.burger{ .burger{
padding-top: 0.25rem; padding-top: 0.25rem;
@@ -182,3 +182,21 @@ header.front{
display: none; display: none;
} }
} }
#block-mainnavigation{
ul{
li{
font-size: 0.8rem;
a{
color: black;
font-family: 'truenoregular';
&:hover{
color: black;
text-decoration: none;
font-weight: bold;
}
}
}
}
}
@@ -1,10 +1,10 @@
#block-popsu-colloque-submenu{ #block-popsu-colloque-submenu{
margin: 1rem auto;
ul{ ul{
display: flex; display: flex;
padding: 0; padding: 0;
margin: 0; margin: 0;
li{ li{
// margin-right: 1rem;
width: 100%; width: 100%;
text-align: center; text-align: center;
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
@@ -20,6 +20,10 @@
color: $color2; color: $color2;
background: white; background: white;
transition: color 0.3s ease, background 0.3s ease; transition: color 0.3s ease, background 0.3s ease;
font-size: 1.7rem;
font-family: 'dukefill';
letter-spacing: 0.05rem;
text-transform: uppercase;
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
// padding: 1rem 1rem; // padding: 1rem 1rem;
} }
@@ -30,14 +30,19 @@ body{
} }
.participant_full{ .participant_full{
flex-direction: column;
margin-top: 2rem;
@media screen and (min-width: 992px) {
margin-top: 0rem;
}
.hero{ .hero{
figure{ figure{
width:100%; width:100%;
.__img{ .__img{
&> div{ &> div{
margin: auto; margin: auto;
width: 300px; width: 250px;
height: 300px; height: 250px;
} }
img{ img{
border-radius: 100%; border-radius: 100%;
@@ -1,140 +0,0 @@
html,body{
background: $fond;
}
button{
outline:0;
border: 0;
&:focus{
outline:0;
border: 0;
}
}
header{
background: white;
}
main{
min-height: calc(100vh - 150px);
}
main:not(.home){
padding-top: 2rem;
@media screen and (min-width: 768px) {
padding: 5rem 0!important;
}
}
img{
width:100%;
height: 100%;
object-fit: cover;
}
#txt_present{
margin: 5rem 0;
& * {
color: $color2;
}
& > div{
margin: 2rem auto;
}
.more_link{
padding: 0rem 1rem 0.2rem 1rem;
background: white;
}
}
.more_link{
padding: 0rem 1rem 0.2rem 1rem;
background: white;
border-radius: 0;
a{
color: $color2;
}
}
#block-popsu-colloque-page-title{
padding: 0 15px;
margin: 0 auto 2rem auto;
@include croix_or;
}
#block-views-block-slide-programme-block-1,
#block-views-block-dernieres-publications-block-1{
margin: 5rem 0;
.views{
section.wrap_head{
@include croix_or;
}
}
}
article{
.__title{
@include croix_or;
}
.__head{
div{
& > div{
padding: 0 0.5rem;
}
}
}
}
h4{
@include croix_or;
}
blockquote{
margin: 2rem 1rem 2rem 1rem;
color: $lightgrey;
@include croix_or_B;
p{
margin-top: 0.5rem;
}
}
@media screen and (min-width: 768px) {
blockquote{
margin: 3.5rem 2rem 4rem 2rem;
p{
margin-top: 1rem;
}
}
}
// page programme
.container{
&.programme{
padding-top: 3rem;
h3{
margin: 0.5rem 0;
}
.views{
section{
margin: 1rem 0;
.row{
padding: 2rem 0;
}
&:not(:last-child){
@include croix_or;
& > .d-flex{
padding: 0 0 2rem 0;
}
}
}
}
}
}
// page moment
.container{
.__ressources{
section{
.row{
padding: 0rem 0rem 2rem 0rem;
}
}
}
}
@@ -0,0 +1,22 @@
.__ressources{
h4{
text-transform: uppercase;
margin: 1rem 0;
font-family: 'dukefill';
font-size: 2rem;
letter-spacing: $letter_spacingH;
color: $color2
}
& > section{
&> div{
@media screen and (min-width: 768px) {
margin: 0 calc(0rem - #{$gutter})!important;
}
}
}
section{
.row{
padding: 0rem 0rem 2rem 0rem;
}
}
}
@@ -1,42 +1,43 @@
@media screen and (min-width: 576px) { .flickity-button {
#block-views-block-slide-programme-block-1, background: transparent;
#block-views-block-dernieres-publications-block-1{ &:hover{
.views{ background: transparent;
section{
.head{
display: flex!important;
width: 100%;
justify-content: space-between;
align-items: center;
}
}
}
} }
} }
.flickity-button-icon {
fill: $col_black;
}
.flickity-button:disabled {
display: none;
}
#block-views-block-slide-programme-block-1{ #block-views-block-slide-programme-block-1{
.date{
font-size: 1.5rem;
font-family: 'truenoregular';
text-transform: uppercase;
}
.__slide{ .__slide{
.flickity-viewport{
overflow: initial;
}
a{
height: 100%;
background: white;
@include shadow;
}
article{ article{
width: calc(100% - 30px);
height: 325px; height: 325px;
background: none; background: none;
display: flex; display: flex;
margin-top: 3rem; margin: 3rem $gutter 1.5rem $gutter;
margin-bottom: 1.5rem; @media screen and (min-width: 768px) {
&.__wrap{ width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter} * 2);
}
a{
width: 100%;
height: 100%;
background: white; background: white;
@include shadow;
.__wrap{
background: white;
}
} }
&.last::after{ &.last::after{
display: inline-block; display: inline-block;
@@ -54,7 +55,8 @@
position: absolute; position: absolute;
top: -2.5rem; top: -2.5rem;
width: max-content; width: max-content;
font-size: 1.5rem; font-size: 1.2rem;
line-height: 1.2;
font-family: 'truenoregular'; font-family: 'truenoregular';
} }
} }
@@ -68,18 +70,27 @@
margin: 1rem 0; margin: 1rem 0;
} }
.views{ .views{
section{ section.wrap_head{
@include croix_or;
.head{ .head{
display: block; display: block;
} }
.flickity-slider{ }
// margin-left: 1rem; }
@media screen and (min-width: 576px) {
.views{
section{
.head{
display: flex!important;
width: 100%;
justify-content: space-between;
align-items: center;
}
} }
} }
} }
} }
.paragraph--type--role-de-l-intervenant{ .paragraph--type--role-de-l-intervenant{
margin-bottom: 2rem; margin-bottom: 2rem;
.__slide{ .__slide{
@@ -91,7 +102,7 @@
} }
} }
.flickity-viewport{ .flickity-viewport{
overflow: initial; // overflow: initial;
} }
.flickity-slider > div{ .flickity-slider > div{
width: 70%; width: 70%;
@@ -102,18 +113,3 @@
} }
} }
} }
.flickity-button {
background: transparent;
&:hover{
background: transparent;
}
}
.flickity-button-icon {
fill: $col_black;
}
.flickity-button:disabled {
display: none;
}
@@ -11,7 +11,10 @@ section{
width: 100%; width: 100%;
height: auto; height: auto;
background: white; background: white;
margin: $gutter1; margin: calc(#{$gutter}) 0;
@media screen and (min-width: 768px) {
margin: calc(#{$gutter});
}
&:not(.bibliographie):not(.programme){ &:not(.bibliographie):not(.programme){
@include shadow; @include shadow;
} }
@@ -21,6 +24,11 @@ section{
} }
.__wrap{ .__wrap{
padding: 1rem; padding: 1rem;
time, .type_moment{
font-family: 'truenoregular';
font-size: 0.8rem;
text-transform: uppercase;
}
& > .d-flex{ & > .d-flex{
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@@ -29,13 +37,13 @@ section{
// thumbnails publications // thumbnails publications
&.publications{ &.publications{
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2); width: calc(100% / 2 - #{$gutter} * 2);
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter1} * 2); width: calc(100% / 3 - #{$gutter} * 2);
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter1} * 2); width: calc(100% / 4 - #{$gutter} * 2);
} }
.__media{ .__media{
padding: 0.5rem 0 0.5rem 0.5rem; padding: 0.5rem 0 0.5rem 0.5rem;
@@ -52,13 +60,13 @@ section{
@include shadow; @include shadow;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2); width: calc(100% / 2 - #{$gutter} * 2);
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter1} * 2); width: calc(100% / 3 - #{$gutter} * 2);
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter1} * 2); width: calc(100% / 4 - #{$gutter} * 2);
} }
& > div * { & > div * {
color: $col_black; color: $col_black;
@@ -76,40 +84,17 @@ section{
} }
} }
// thumbnails slides
.__slide{
.thumbnails{
// max-width: 380px;
width: calc(100% - 30px);
a{
width: calc(100%);
}
@media screen and (min-width: 768px) {
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);
}
}
}
// Page programme // Page programme
.container{ .container{
&.programme{ &.programme{
.thumbnails{ .thumbnails{
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2); width: calc(100% / 2 - #{$gutter} * 2);
margin: 0.5rem; margin: 0.5rem;
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter1} * 2); width: calc(100% / 3 - #{$gutter} * 2);
} }
// @media screen and (min-width: 1200px) {
// width: calc(100% / 4 - #{$gutter1} * 2);
// }
} }
} }
} }
@@ -117,7 +102,7 @@ section{
.__ressources{ .__ressources{
.__publications{ .__publications{
.publications{ .publications{
// margin: $gutter1; // margin: $gutter;
.__media{ .__media{
padding: 0.5rem 0 0.5rem 0.5rem; padding: 0.5rem 0 0.5rem 0.5rem;
@@ -126,13 +111,13 @@ section{
padding: 0.5rem; padding: 0.5rem;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2); width: calc(100% / 2 - #{$gutter} * 2);
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
width: calc(100% / 2 - #{$gutter1} * 2); width: calc(100% / 2 - #{$gutter} * 2);
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
width: calc(100% / 2 - #{$gutter1} * 2); width: calc(100% / 2 - #{$gutter} * 2);
} }
} }
} }
@@ -148,13 +133,13 @@ section{
} }
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2); width: calc(100% / 2 - #{$gutter} * 2);
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
width: calc(100% / 2 - #{$gutter1} * 2); width: calc(100% / 2 - #{$gutter} * 2);
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
width: calc(100% / 2 - #{$gutter1} * 2); width: calc(100% / 2 - #{$gutter} * 2);
} }
} }
@@ -0,0 +1,98 @@
body,html{
font-size: 16px;
line-height: 1.2;
background: $fond;
.is-active{
overflow: hidden;
}
}
main{
min-height: calc(100vh - 150px);
}
header{
background: white;
}
ul,li,ol{
list-style: none;
}
h1,h2,h3,h4{
margin: 0;
padding: 0;
}
h2{
font-family: 'dukefill';
font-size: 2.5rem;
line-height: 2.5rem;
a{
color: $color2;
}
}
h3{
margin: 1rem 0;
font-family: 'dukefill';
font-size: 2rem;
color: $lightgrey;
}
p {
+ h3 {
margin: 0.5rem 0 1.5rem 0;
}
}
p{
font-size: 1rem;
line-height: 1.5rem;
font-family: 'truenoregular';
}
a{
color: black;
text-decoration: none;
&:hover{
color: black;
text-decoration: none;
}
}
blockquote{
margin: 2rem 1rem 2rem 1rem;
color: $lightgrey;
@include croix_or_B;
@media screen and (min-width: 768px) {
margin: 3.5rem 2rem 4rem 2rem;
p{
margin-top: 1rem;
}
}
p{
font-family: 'cormorantBold';
font-size: 2rem;
line-height: 2.5rem;
font-weight: lighter;
margin-top: 0.5rem;
}
}
img{
width:100%;
height: 100%;
object-fit: cover;
}
button{
outline:0;
border: 0;
&:focus{
outline:0;
border: 0;
}
}
@@ -0,0 +1,158 @@
@font-face {
font-family: 'dukefill';
src: url('../fonts/duke_fill-webfont.woff2') format('woff2'),
url('../fonts/duke_fill-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cormorantBold';
src: url('../fonts/Cormorant-Bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cormorantBoldItalic';
src: url('../fonts/Cormorant-BoldItalic-webfont.woff') format('woff');
font-weight: lighter;
font-style: normal;
}
@font-face {
font-family: 'truenoregular';
src: url('../fonts/truenorg-webfont.woff2') format('woff2'),
url('../fonts/truenorg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#block-renderedsitesettingsblock-2{
.site_setting_entity{
h1{
font-family: 'dukefill';
font-size: 2rem;
line-height: 2rem;
text-transform: uppercase;
text-align: right;
align-self: stretch;
margin: auto;
}
.__info_colloque{
display: flex;
flex-direction: column;
justify-content: space-between;
& > div{
height: auto;
&:first-child{
font-family: 'truenoregular';
color: $color1;
font-size: 0.9rem;
padding-bottom: 0.4rem;
margin-bottom: 0.6rem;
}
&:last-child{
color: $color2;
font-family: 'truenoregular';
font-weight: bold;
font-size: 0.7rem;
line-height: 1;
width: min-content;
}
}
}
}
}
main{
// page publication
.thumbnails{
&.programme{
.__content{
font-family: 'truenoregular';
font-weight: bold;
font-size: 1rem;
text-transform: uppercase;
}
}
&.publications{
.__content{
div{
font-family: 'cormorantBold';
font-size: 1.2rem;
}
span{
font-family: 'cormorantBoldItalic';
font-size: 1.2rem;
}
}
}
&.bibliographie{
background: transparent;
div,p{
font-family: 'cormorantBold';
font-size: 1.2rem;
}
span{
font-family: 'cormorantBoldItalic';
font-size: 1.2rem;
}
}
}
// page shadow_participants
article{
&.participant_full{
.__auteur{
h2{
font-family: 'truenoregular';
font-size: 2rem;
letter-spacing: normal;
}
}
.status{
div{
font-family: 'truenoregular';
font-style: italic;
font-size: 0.8rem;
text-align: center;
@media screen and (min-width: 768px) {
text-align: left;
}
}
}
}
}
// thumbnails_participants
.thumbnails_participants{
@include shadow_participants;
*{
color: $color2;
}
.__name{
font-family: 'truenoregular';
font-size: 1rem;
}
.__qualite{
font-family: 'truenoregular';
font-size: 0.8rem;
font-style: italic;
}
}
.paragraph--type--role-de-l-intervenant{
.___title_inter{
div{
font-family: 'truenoregular';
font-weight: bold;
font-size: 0.8rem;
text-transform: uppercase;
}
}
}
}
@@ -5,6 +5,7 @@ $lightgrey: #6f6d7dff;
$fond: #1d378e0d; $fond: #1d378e0d;
$underline:#d2d2ebff; $underline:#d2d2ebff;
$gutter: 0.5rem;
$gutter1 : 0.5rem; $gutter1 : 0.5rem;
$croix_or: '../images/croix_filetsable.svg'; $croix_or: '../images/croix_filetsable.svg';
+20 -36
View File
@@ -7,52 +7,42 @@
* @see https://www.drupal.org/project/drupal/issues/2349711 * @see https://www.drupal.org/project/drupal/issues/2349711
*/ */
@import "variables/var.scss"; // configs
@import "mixins/mixin.scss"; @import "configs/var.scss";
@import "typography.scss"; @import "configs/mixin.scss";
@import "components/admin/edit.scss"; @import "configs/typography.scss";
@import "components/admin/toolbar.scss"; @import "configs/global.scss";
// Lib Js
@import "hamburgers/hamburgers.scss"; @import "hamburgers/hamburgers.scss";
*{ // Pages
box-sizing: border-box; @import "pages/layout.scss";
} @import "pages/front.scss";
@import "pages/presentation.scss";
body,html{ @import "pages/programme.scss";
font-size: 16px; @import "pages/ressources.scss";
line-height: 1.2; @import "pages/informations.scss";
.is-active{ @import "pages/moments.scss";
overflow: hidden; @import "pages/publications.scss";
}
}
ul,li,ol{
list-style: none;
}
h1,h2,h3,h4{
margin: 0;
padding: 0;
}
// components
@import "components/admin/edit.scss";
@import "components/admin/toolbar.scss";
@import "components/header/header.scss"; @import "components/header/header.scss";
@import "components/header/sub_menu.scss"; @import "components/header/sub_menu.scss";
@import "components/forms/filter.scss"; @import "components/forms/filter.scss";
@import "components/hero.scss"; @import "components/hero.scss";
@import "components/layout.scss";
@import "components/sidebar/rs.scss"; @import "components/sidebar/rs.scss";
@import "components/sidebar/role_inter.scss"; @import "components/sidebar/role_inter.scss";
@import "components/slides/flickity.scss"; @import "components/slides/flickity.scss";
@import "components/slides/slides.scss"; @import "components/slides/slides.scss";
@import "components/thumbnails/thumbnails.scss"; @import "components/thumbnails/thumbnails.scss";
@import "components/ressources.scss";
@import "components/btn/all_btn.scss"; @import "components/btn/all_btn.scss";
@import "components/footer/footer.scss"; @import "components/footer/footer.scss";
@import "components/leaflet/custom_leaflet.scss"; @import "components/leaflet/custom_leaflet.scss";
main{
// margin-top: $margin-hero;
}
article img, article img,
.side_notes img{ .side_notes img{
width: 100%; width: 100%;
@@ -60,9 +50,6 @@ article img,
object-fit: cover; object-fit: cover;
} }
/* .layout-content > div{
display: flex;
} */
.side_notes{ .side_notes{
position: relative; position: relative;
} }
@@ -75,6 +62,3 @@ article img,
.side_notes .d-flex { .side_notes .d-flex {
flex-direction: column; flex-direction: column;
} }
// @import "components/thumbnails.scss";
@@ -0,0 +1,71 @@
#txt_present{
margin: 3rem 0;
@media screen and (min-width: 992px) {
margin: 5rem 0;
}
& * {
color: $color2;
}
& > div{
margin: 2rem auto;
}
.__title-present{
h2{
font-size: 1.5rem;
letter-spacing: $letter_spacingH;
font-family: 'truenoregular';
line-height: normal;
}
}
.__sub-title-present{
p{
font-family: 'truenoregular';
font-style: italic;
font-size: 0.8rem;
line-height: 1rem;
}
}
.__body-present{
p{
font-family: 'truenoregular';
font-weight: lighter;
font-size: 1rem;
line-height: 1.5rem;
}
}
.more_link{
padding: 0rem 1rem 0.2rem 1rem;
background: white;
a{
font-size: 0.7rem
}
}
}
#block-views-block-dernieres-publications-block-1{
.views{
section:not(.wrap_head){
margin: 1rem 0;
@media screen and (min-width: 768px) {
margin: 1rem calc( 0rem - #{$gutter});
}
}
}
}
#block-views-block-slide-programme-block-1,
#block-views-block-dernieres-publications-block-1{
margin: 2rem 0;
@media screen and (min-width: 992px) {
margin: 5rem 0;
}
h3{
text-transform: uppercase;
margin: 0;
font-family: 'dukefill';
font-size: 2rem;
letter-spacing: $letter_spacingH;
color: $color2
}
}
@@ -0,0 +1,13 @@
#block-popsu-colloque-page-title{
margin:1.5rem auto;
@include croix_or;
@media screen and (min-width: 768px) {
margin: 0 auto 1.5rem auto;
}
}
.geolocation-map-wrapper{
height: 400px;
.geolocation-map-container{
height: inherit!important;
}
}
@@ -0,0 +1,30 @@
main:not(.home){
@media screen and (min-width: 768px) {
padding: 1.5rem 0!important;
}
@media screen and (min-width: 992px) {
padding: 4rem 0!important;
}
}
article{
.__title{
@include croix_or;
}
&.publications{
margin-top: 1rem;
.paragraph--type--images{
img{
max-height: 400px;
object-fit: contain;
width: auto;
@media screen and (min-width: 992px) {
width: 100%;
}
}
}
}
}
h4{
@include croix_or;
}
@@ -0,0 +1,25 @@
#moments{
.__wrapper{
.__title{
margin: 0.5rem 0;
}
}
.__wrap_side{
margin-top: 0.5rem;
}
.__wrap_content{
.__head{
margin: 0.5rem 0;
div{
& > div{
font-family: 'truenoregular';
font-size: 0.8rem;
padding-right: 0.5rem;
&:not(:first-child){
padding-left: 0.5rem;
}
}
}
}
}
}
@@ -0,0 +1,14 @@
#presentation{
margin-top: 0.5rem;
.__title{
@media screen and (min-width: 768px) {
margin: 1rem 0;
}
@media screen and (min-width: 992px) {
margin: 2rem 0;
}
}
.__wrapper{
margin-top: 1rem;
}
}
@@ -0,0 +1,37 @@
.container{
&.programme{
padding-top: 1.5rem;
@media screen and (min-width: 768px) {
padding-top: 0rem;
}
h3{
font-size: 1.5rem;
font-family: 'truenoregular';
color: $col_black;
}
.views{
section{
.row{
.__wrap_side{
margin: 0 0 1rem 0;
@media screen and (min-width: 768px) {
margin: 0.5rem 0 0rem 0;
}
}
& > div:not(.__wrap_side){
@media screen and (min-width: 768px) {
padding-left: 0;
margin: 0 calc(0rem - #{$gutter});
}
}
}
&:not(:last-child){
@include croix_or;
& > .d-flex{
padding: 0 0 2rem 0;
}
}
}
}
}
}
@@ -0,0 +1,30 @@
article{
&.publications{
.__wrap_content{
.__head{
& *{
color: $color2;
}
.__auteur{
div{
font-family: 'cormorantBold';
font-size: 1.5rem;
}
}
.__titre{
span{
font-family: 'cormorantBoldItalic';
font-size: 1.5rem;
}
}
.__info{
margin: 1rem 0;
div{
font-family: 'cormorantBold';
font-size: 1rem;
}
}
}
}
}
}
@@ -0,0 +1,9 @@
.publications, .bibliographie{
.views{
section{
@media screen and (min-width: 768px) {
margin: 0 calc(0rem - #{$gutter});
}
}
}
}
@@ -1,370 +0,0 @@
@font-face {
font-family: 'dukefill';
src: url('../fonts/duke_fill-webfont.woff2') format('woff2'),
url('../fonts/duke_fill-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cormorantBold';
src: url('../fonts/Cormorant-Bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cormorantBoldItalic';
src: url('../fonts/Cormorant-BoldItalic-webfont.woff') format('woff');
font-weight: lighter;
font-style: normal;
}
@font-face {
font-family: 'truenoregular';
src: url('../fonts/truenorg-webfont.woff2') format('woff2'),
url('../fonts/truenorg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#block-renderedsitesettingsblock-2{
.site_setting_entity{
h1{
font-family: 'dukefill';
font-size: 2rem;
line-height: 2rem;
text-transform: uppercase;
text-align: right;
align-self: stretch;
margin: auto;
}
.__info_colloque{
display: flex;
flex-direction: column;
justify-content: space-between;
& > div{
height: auto;
&:first-child{
font-family: 'truenoregular';
color: $color1;
font-size: 0.9rem;
padding-bottom: 0.4rem;
margin-bottom: 0.6rem;
}
&:last-child{
color: $color2;
font-family: 'truenoregular';
font-weight: bold;
font-size: 0.7rem;
line-height: 1;
width: min-content;
}
}
}
}
}
#block-mainnavigation{
ul{
li{
font-size: 0.8rem;
a{
color: black;
font-family: 'truenoregular';
&:hover{
color: black;
text-decoration: none;
font-weight: bold;
}
}
}
}
}
a{
&:hover{
text-decoration: none;
}
}
main{
h2{
font-family: 'dukefill';
font-size: 3.5rem;
line-height: 3rem;
letter-spacing: $letter_spacingH;
}
h2, a{
color: $color2;
}
&.home{
h2{
font-size: 2rem;
font-family: 'truenoregular';
line-height: normal;
}
}
#txt_present{
.__sub-title-present{
p{
font-family: 'truenoregular';
font-style: italic;
font-size: 0.9rem;
line-height: 1.2rem;
}
}
.__body-present{
p{
font-family: 'truenoregular';
font-weight: lighter;
font-size: 1.2rem;
line-height: 1.8rem;
}
}
.more_link{
a{
font-size: 0.7rem
}
}
}
.more_link{
a{
font-family: 'truenoregular';
font-size: 0.6rem;
}
}
h3{
text-transform: uppercase;
margin: 2rem 0;
font-family: 'dukefill';
font-size: 3rem;
letter-spacing: $letter_spacingH;
color: $lightgrey;
}
.__ressources{
h4{
text-transform: uppercase;
margin: 2rem 0;
font-family: 'dukefill';
font-size: 2rem;
letter-spacing: $letter_spacingH;
color: $color2
}
}
blockquote{
p{
font-family: 'cormorantBold';
font-size: 2.5rem;
line-height: 3rem;
font-weight: lighter;
@media screen and (min-width: 768px) {
font-size: 3rem;
line-height: 3.5rem;
}
}
}
p{
font-size: 1rem;
line-height: 1.5rem;
font-family: 'truenoregular';
}
a{
color: black;
&:hover{
color: black;
}
}
.__wrap_content{
p{
a{
display: inline;
background: $underline;
}
}
}
// Page programme
.container{
&.programme{
h3{
font-size: 1.5rem;
font-family: 'truenoregular';
color: $col_black;
}
}
}
// page publication
article{
&.publications{
.__wrap_content{
.__head{
& *{
color: $color2;
}
.__auteur{
div{
font-family: 'cormorantBold';
font-size: 1.5rem;
}
}
.__titre{
span{
font-family: 'cormorantBoldItalic';
font-size: 1.5rem;
}
}
.__info{
margin: 1rem 0;
div{
font-family: 'cormorantBold';
font-size: 1rem;
}
}
}
}
}
}
.thumbnails{
time, .type_moment{
font-family: 'truenoregular';
font-size: 0.9rem;
text-transform: uppercase;
}
&.programme{
.__content{
font-family: 'truenoregular';
font-weight: bold;
font-size: 1rem;
text-transform: uppercase;
}
}
&.publications{
.__content{
div{
font-family: 'cormorantBold';
font-size: 1.2rem;
}
span{
font-family: 'cormorantBoldItalic';
font-size: 1.2rem;
}
}
}
&.bibliographie{
background: transparent;
div,p{
font-family: 'cormorantBold';
font-size: 1.2rem;
}
span{
font-family: 'cormorantBoldItalic';
font-size: 1.2rem;
}
}
}
// page shadow_participants
article{
&.participant_full{
.__auteur{
h2{
font-family: 'truenoregular';
font-size: 2rem;
letter-spacing: normal;
}
}
.status{
div{
font-family: 'truenoregular';
font-style: italic;
font-size: 0.8rem;
text-align: center;
@media screen and (min-width: 768px) {
text-align: left;
}
}
}
}
}
// thumbnails_participants
.thumbnails_participants{
@include shadow_participants;
*{
color: $color2;
}
.__name{
font-family: 'truenoregular';
font-size: 1rem;
}
.__qualite{
font-family: 'truenoregular';
font-size: 0.8rem;
font-style: italic;
}
}
.paragraph--type--role-de-l-intervenant{
.___title_inter{
div{
font-family: 'truenoregular';
font-weight: bold;
font-size: 0.8rem;
text-transform: uppercase;
}
}
}
article{
.__head{
div{
font-family: 'truenoregular';
font-size: 1rem;
// text-transform: uppercase;
}
}
}
#block-views-block-slide-programme-block-1,
#block-views-block-dernieres-publications-block-1{
h3{
text-transform: uppercase;
margin: 0;
font-family: 'dukefill';
font-size: 2rem;
letter-spacing: $letter_spacingH;
color: $color2
}
}
}
#block-popsu-colloque-submenu{
ul{
li{
a{
font-size: 2rem;
font-family: 'dukefill';
letter-spacing: 0.05rem;
text-transform: uppercase;
}
}
}
}
.more_link{
span{
padding-left: 0.5rem;
}
}
@@ -28,14 +28,22 @@
*/ */
#} #}
{% set id = [elements][0].content['#view_id'] %} {% set class = [elements][0].content['#view_id'] %}
<div class="container {{id}}">
{% if id == 'programme' %} {% if class == 'programme' or class == 'publications' or class == 'bibliographie' %}
{% set addClass = 'container' %}
{% endif %}
<div class="{{class}} {{addClass}}">
{% if class == 'programme' %}
{{ title_prefix }} {{ title_prefix }}
{% if label %} {% if label %}
<h2{{ title_attributes }}>{{ label }}</h2> <h2{{ title_attributes }}>{{ label }}</h2>
{% endif %} {% endif %}
{% endif %} {% endif %}
{{ title_suffix }} {{ title_suffix }}
{% block content %} {% block content %}
{{ content }} {{ content }}
@@ -27,7 +27,7 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<div{{ attributes }}> <div{{ attributes }} class="col-12 col-md-6 px-0 col-lg-12">
{{ title_prefix }} {{ title_prefix }}
{% if label %} {% if label %}
<h2{{ title_attributes }}>{{ label }}</h2> <h2{{ title_attributes }}>{{ label }}</h2>
@@ -27,7 +27,7 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<div{{ attributes }} class="col-3"> <div{{ attributes }} class="col-12 col-md-6 col-lg-4">
{{ title_prefix }} {{ title_prefix }}
{% if label %} {% if label %}
<h2{{ title_attributes }}>{{ label }}</h2> <h2{{ title_attributes }}>{{ label }}</h2>
@@ -29,7 +29,7 @@
#} #}
<div{{ attributes }} class="col-3"> <div{{ attributes }} class="col-12 col-md-6 col-lg-4">
{{ title_prefix }} {{ title_prefix }}
{% if label %} {% if label %}
<h2{{ title_attributes }}>{{ label }}</h2> <h2{{ title_attributes }}>{{ label }}</h2>
@@ -27,10 +27,10 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<div class="col-6"> <div class="col-12 d-md-flex d-lg-block col-lg-4">
<div{{ attributes }}> <div{{ attributes }} class="col-12 col-md-6 col-lg-12 px-0">
{{ title_prefix }} {{ title_prefix }}
{% if label %} {% if label %}
<h2{{ title_attributes }}>{{ label }}</h2> <h2{{ title_attributes }}>{{ label }}</h2>
@@ -45,7 +45,7 @@
%} %}
<h4>{{ label }}</h4> <h4>{{ label }}</h4>
<div class="row flex-wrap pb-4 col-12 px-0 mx-auto"> <div class="row flex-wrap mx-0">
{% for item in items %} {% for item in items %}
{{ item.content }} {{ item.content }}
{% endfor %} {% endfor %}
@@ -72,7 +72,7 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<article{{ attributes }} class="col-12 col-md-10 mb-5"> <article{{ attributes }} class="col-12 col-md-10 mb-5 px-0">
{{ title_prefix }} {{ title_prefix }}
{% if label and not page %} {% if label and not page %}
<h2{{ title_attributes }}> <h2{{ title_attributes }}>
@@ -73,26 +73,23 @@
*/ */
#} #}
<article{{ attributes }} class="row" id="moments">
<div class="__wrapper col-sm-12 col-md-9">
<article{{ attributes }} class="row">
<div class="__wrapper col-sm-12 col-md-9 px-0">
<div class="__img-hero"> <div class="__img-hero">
{{content.field_image}} {{content.field_image}}
</div>
<div class="__title col-12 px-0">
<h2>{{label}}</h2>
</div> </div>
<div class="__wrapper row"> <div class="__wrapper row">
<div class="__title col-12 my-3 my-lg-5">
<h2>{{label}}</h2>
</div>
<div class="__wrap_side col-md-12 col-lg-1 mt-3"> <div class="__wrap_side col-md-12 col-lg-1 mt-3">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'moments' } %} {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'moments' } %}
</div> </div>
<div class="__wrap_content col-12 col-lg-11 my-3"> <div class="__wrap_content col-12 col-lg-11 my-3">
<div class="__head mb-5"> <div class="__head">
<div class="d-flex flex-wrap"> <div class="d-flex flex-wrap">
{{ content.field_date_du_programme }} | {{ content.field_date_du_programme }} |
{{ content.field_heure_du_moment }} | {{ content.field_heure_du_moment }} |
@@ -72,8 +72,8 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<article{{ attributes }} class="participant_full"> <article{{ attributes }} class="participant_full row">
<div class="hero"> <div class="hero col">
<figure class="d-md-flex d-block"> <figure class="d-md-flex d-block">
<div class="__img"> <div class="__img">
{{content.field_portrait}} {{content.field_portrait}}
@@ -95,19 +95,19 @@
</div> </div>
</div> </div>
<div class="__ressources"> <div class="__ressources col">
{% if content.field_publications_participants %} {% if content.field_publications_participants %}
<div class="__publications"> <section class="__publications">
{{content.field_publications_participants}} {{content.field_publications_participants}}
</div> </section>
{% endif %} {% endif %}
{% if content.field_bibliographie %} {% if content.field_bibliographie %}
<div class="__bibliographie"> <section class="__bibliographie">
{{content.field_bibliographie}} {{content.field_bibliographie}}
</div> </section>
{% endif %} {% endif %}
</div> </div>
</article> </article>
@@ -75,11 +75,11 @@
<div class="__img-hero"> <div class="__img-hero">
{{content.field_image}} {{content.field_image}}
</div> </div>
<article{{ attributes }} class="mt-4" id="presentation"> <article{{ attributes }} id="presentation">
<div class="__title col-12 px-0"> <div class="__title col-12 px-0">
<h2>{{label}}</h2> <h2>{{label}}</h2>
</div> </div>
<div class="__wrapper row mt-5"> <div class="__wrapper row">
<div class="__wrap_side col-sm-12 col-md-1 pr-0 mt-0 mb-3"> <div class="__wrap_side col-sm-12 col-md-1 pr-0 mt-0 mb-3">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'presentation' } %} {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'presentation' } %}
</div> </div>
@@ -72,7 +72,7 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<article class="d-sm-flex flex-wrap d-block publications"> <article class="row d-sm-flex flex-wrap d-block publications">
<div class="__wrap_side col-sm-12 col-md-12 col-lg-1"> <div class="__wrap_side col-sm-12 col-md-12 col-lg-1">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %} {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
{{content.field_telecharger_la_ressource}} {{content.field_telecharger_la_ressource}}
@@ -74,7 +74,7 @@
</main> </main>
{% if page.footer %} {% if page.footer %}
<footer role="contentinfo"> <footer role="contentinfo" class="container-fluid">
{{ page.footer }} {{ page.footer }}
</footer> </footer>
{% endif %} {% endif %}
@@ -46,7 +46,7 @@
*/ */
#} #}
<div class="layout-container"> <div class="layout-container">
<header role="banner"> <header role="banner" class="container-fluid">
{{ page.header }} {{ page.header }}
</header> </header>
@@ -74,7 +74,7 @@
</main> </main>
{% if page.footer %} {% if page.footer %}
<footer role="contentinfo"> <footer role="contentinfo" class="container-fluid">
{{ page.footer }} {{ page.footer }}
</footer> </footer>
{% endif %} {% endif %}
@@ -46,7 +46,7 @@
*/ */
#} #}
<div class="layout-container"> <div class="layout-container">
<header role="banner"> <header role="banner" class="container-fluid">
{{ page.header }} {{ page.header }}
</header> </header>
@@ -88,7 +88,7 @@
</main> </main>
{% if page.footer %} {% if page.footer %}
<footer role="contentinfo"> <footer role="contentinfo" class="container-fluid">
{{ page.footer }} {{ page.footer }}
</footer> </footer>
{% endif %} {% endif %}
@@ -15,7 +15,7 @@
*/ */
#} #}
{% if content %} {% if content %}
<div{{ attributes }} class="container"> <div{{ attributes }} class="d-flex container">
{{ content }} {{ content }}
</div> </div>
{% endif %} {% endif %}
@@ -20,7 +20,7 @@
{% if title %} {% if title %}
<h3>{{ title }}</h3> <h3>{{ title }}</h3>
{% endif %} {% endif %}
<div class="row flex-wrap"> <div class="d-flex flex-wrap">
{% for row in rows %} {% for row in rows %}
{% {%
set row_classes = [ set row_classes = [
@@ -25,7 +25,7 @@
{% 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 my-3 my-sm-2"> <div class="__wrap_side col-sm-12 col-md-1">
{% 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 %}
@@ -34,7 +34,7 @@
#} #}
<div class="views col px-0"> <div class="views">
{{ title_prefix }} {{ title_prefix }}
{{ title }} {{ title }}
@@ -34,7 +34,7 @@
#} #}
<div class="views col px-0"> <div class="views">
{{ title_prefix }} {{ title_prefix }}
{{ title }} {{ title }}