popin biographie
@@ -842,50 +842,15 @@ ul.pagination {
|
|||||||
display: block;
|
display: block;
|
||||||
margin-left: 40%;
|
margin-left: 40%;
|
||||||
margin-right: 15%; }
|
margin-right: 15%; }
|
||||||
|
.titre_bsn h1 {
|
||||||
.titre_bsn h1 {
|
text-align: left;
|
||||||
text-align: left;
|
padding-bottom: 3rem; }
|
||||||
padding-bottom: 3rem; }
|
|
||||||
|
|
||||||
#background {
|
|
||||||
background-color: #d5d2d1;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(5, 1fr);
|
|
||||||
grid-template-rows: repeat(8, 5vw);
|
|
||||||
grid-gap: 15px; }
|
|
||||||
|
|
||||||
#background img {
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover; }
|
|
||||||
|
|
||||||
.item-1 {
|
|
||||||
grid-column-start: 1;
|
|
||||||
grid-column-end: 3;
|
|
||||||
grid-row-start: 1;
|
|
||||||
grid-row-end: 5; }
|
|
||||||
|
|
||||||
.item-2 {
|
|
||||||
grid-column-start: 3;
|
|
||||||
grid-column-end: 5;
|
|
||||||
grid-row-start: 1;
|
|
||||||
grid-row-end: 5; }
|
|
||||||
|
|
||||||
.item-3 {
|
|
||||||
grid-column-start: 5;
|
|
||||||
grid-column-end: 1;
|
|
||||||
grid-row-start: 9;
|
|
||||||
grid-row-end: 6; }
|
|
||||||
|
|
||||||
.item-4 {
|
|
||||||
grid-column-start: 1;
|
|
||||||
grid-column-end: 3;
|
|
||||||
grid-row-start: 1;
|
|
||||||
grid-row-end: 3; }
|
|
||||||
|
|
||||||
.programmes {
|
.programmes {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
background: url("/user/themes/epau-antimatter/images/14360_default_big.jpg") 0px 0px no-repeat, url("/user/themes/epau-antimatter/images/10361_web_01.jpg") 1200px 300px no-repeat, url("/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG") 0px 700px no-repeat, url("/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg") right no-repeat;
|
||||||
|
/* On bottom, like z-index: 1; */
|
||||||
background-color: #d5d2d1;
|
background-color: #d5d2d1;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-left: 15%;
|
padding-left: 15%;
|
||||||
@@ -898,23 +863,23 @@ ul.pagination {
|
|||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
margin: 0.4rem; }
|
margin: 0.4rem; }
|
||||||
|
.programme h4 {
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 1.2; }
|
||||||
|
.programme img {
|
||||||
|
max-height: 15%; }
|
||||||
|
.programme p {
|
||||||
|
font-family: "Sarabun", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
.programme h4 {
|
.programme:hover {
|
||||||
text-transform: uppercase;
|
|
||||||
line-height: 1.2; }
|
|
||||||
|
|
||||||
.programme img {
|
|
||||||
max-height: 15%; }
|
|
||||||
|
|
||||||
.programme p {
|
|
||||||
font-family: "Sarabun", sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: italic; }
|
|
||||||
|
|
||||||
.programmes :hover {
|
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
color: #ffffff;
|
|
||||||
transition: 0.2s ease-in-out; }
|
transition: 0.2s ease-in-out; }
|
||||||
|
.programme:hover p {
|
||||||
|
color: #fff; }
|
||||||
|
.programme:hover h4 {
|
||||||
|
color: #fff; }
|
||||||
|
|
||||||
.gouvernance {
|
.gouvernance {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
@@ -932,16 +897,15 @@ ul.pagination {
|
|||||||
|
|
||||||
.mozaique_personnes {
|
.mozaique_personnes {
|
||||||
background-color: #d5d2d1; }
|
background-color: #d5d2d1; }
|
||||||
|
.mozaique_personnes h3 {
|
||||||
.mozaique_personnes h3 {
|
padding-top: 3rem;
|
||||||
padding-top: 3rem;
|
padding-left: 15%;
|
||||||
padding-left: 15%;
|
padding-right: 15%;
|
||||||
padding-right: 15%;
|
font-family: "Sarabun";
|
||||||
font-family: "Sarabun";
|
font-weight: 800;
|
||||||
font-weight: 800;
|
font-size: 1rem;
|
||||||
font-size: 1rem;
|
line-height: 20px;
|
||||||
line-height: 20px;
|
text-align: left; }
|
||||||
text-align: left; }
|
|
||||||
|
|
||||||
.mozaique {
|
.mozaique {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -956,35 +920,29 @@ ul.pagination {
|
|||||||
font-family: "Sarabun", sans-serif;
|
font-family: "Sarabun", sans-serif;
|
||||||
width: 30rem;
|
width: 30rem;
|
||||||
height: 30rem; }
|
height: 30rem; }
|
||||||
|
.info h5 {
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-left: 1rem; }
|
||||||
|
.info h6 {
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-style: italic;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-bottom: 1rem; }
|
||||||
|
|
||||||
.info:hover {
|
.info:hover {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
transition: 0.2s ease-in-out; }
|
transition: 0.2s ease-in-out; }
|
||||||
|
|
||||||
.info h5 {
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
margin: 0;
|
|
||||||
padding-top: 1rem;
|
|
||||||
padding-left: 1rem; }
|
|
||||||
|
|
||||||
.info h6 {
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-style: italic;
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-bottom: 1rem; }
|
|
||||||
|
|
||||||
.portrait {
|
.portrait {
|
||||||
background: transparent !important; }
|
background: transparent !important; }
|
||||||
|
.portrait img {
|
||||||
.portrait img {
|
width: 5rem !important; }
|
||||||
max-width: 15rem !important; }
|
|
||||||
|
|
||||||
img.portrait {
|
|
||||||
width: 20%; }
|
|
||||||
|
|
||||||
.bouton {
|
.bouton {
|
||||||
border: solid;
|
border: solid;
|
||||||
@@ -993,7 +951,7 @@ img.portrait {
|
|||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
margin-right: 2rem; }
|
margin-right: 2rem; }
|
||||||
|
|
||||||
#modal {
|
.modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -1002,41 +960,30 @@ img.portrait {
|
|||||||
left: 0;
|
left: 0;
|
||||||
display: none; }
|
display: none; }
|
||||||
|
|
||||||
#modal.open {
|
.modal.open {
|
||||||
display: block; }
|
display: block; }
|
||||||
|
|
||||||
#modal .mask {
|
.modal .container {
|
||||||
background: none !important;
|
|
||||||
opacity: 1;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0; }
|
|
||||||
|
|
||||||
#modal .container {
|
|
||||||
position: relative;
|
|
||||||
background: white !important;
|
background: white !important;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 25%;
|
left: 50%;
|
||||||
transform: translateX(-50%) translateY(-50%);
|
transform: translateX(-50%) translateY(-50%);
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: content;
|
height: content;
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
border: solid; }
|
border: solid;
|
||||||
|
|
||||||
#modal .container .message {
|
|
||||||
padding: 5% 10% 5% 5%; }
|
|
||||||
|
|
||||||
#modal .container a.close {
|
|
||||||
position: absolute;
|
|
||||||
right: 5%;
|
|
||||||
top: 5%;
|
|
||||||
color: black;
|
|
||||||
font-size: 30px; }
|
|
||||||
|
|
||||||
#modal .container a.close:hover {
|
|
||||||
color: black; }
|
color: black; }
|
||||||
|
.modal .container .message {
|
||||||
|
padding: 5% 10% 5% 5%; }
|
||||||
|
.modal .container a.close {
|
||||||
|
position: absolute;
|
||||||
|
right: 5%;
|
||||||
|
top: 5%;
|
||||||
|
color: black;
|
||||||
|
font-size: 30px; }
|
||||||
|
.modal .container a.close:hover {
|
||||||
|
color: black; }
|
||||||
|
|
||||||
.modular.header-image #header {
|
.modular.header-image #header {
|
||||||
background-color: rgba(255, 255, 255, 0);
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 247 KiB |
|
Before Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 27 MiB |
|
Before Width: | Height: | Size: 313 KiB After Width: | Height: | Size: 446 KiB |
|
Before Width: | Height: | Size: 332 KiB After Width: | Height: | Size: 135 KiB |
@@ -36,49 +36,27 @@ jQuery(document).ready(function($){
|
|||||||
});
|
});
|
||||||
// Responsive Menu
|
// Responsive Menu
|
||||||
|
|
||||||
|
// POPIN Biographies
|
||||||
|
|
||||||
// * Grab data attributes from twig with JQuery
|
$(".bouton").click(function(event){
|
||||||
// */
|
console.log(event);
|
||||||
// $(() => {
|
//
|
||||||
//
|
var mods = document.querySelectorAll('.modal');
|
||||||
// // Select elements by their data attribute
|
mods.forEach((m, i) => {
|
||||||
// const $personneElements = $('[data-personne-id]');
|
m.classList.remove('open')
|
||||||
//
|
});
|
||||||
// // Map over each element and extract the data value
|
//
|
||||||
// const $personneIds =
|
var btn = event.currentTarget;
|
||||||
// $.map($personneElements, item => $(item).data('personneId'));
|
console.log('btn', btn);
|
||||||
//
|
var mod = btn.parentNode.querySelector('.modal');
|
||||||
// // You'll now have array containing string values
|
mod.classList.add('open')
|
||||||
// console.log($personneIds); // eg: ["1", "2", "3"]
|
|
||||||
// });
|
|
||||||
|
|
||||||
// {% set script %}
|
});
|
||||||
// // ton js
|
|
||||||
// var mavariable = {{ twigvar }};
|
|
||||||
// {% endset %}
|
|
||||||
// {% do assets.addInlineJs(script) %}
|
|
||||||
|
|
||||||
|
$(".modal .mask, .modal a.close").click(function(event){
|
||||||
//
|
$ (".modal").removeClass("open");
|
||||||
// // POPIN Biographies
|
return false;
|
||||||
// var id = $('#biographie').data('id');
|
});
|
||||||
// if id > 0{
|
|
||||||
// $(".bouton").click(function(){
|
|
||||||
// $("#modal .message").html(#biographie);
|
|
||||||
// $("#modal").addClass("open");
|
|
||||||
// // $("#body").addClass("grey");
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// $(".bouton").click(function(){
|
|
||||||
// $("#modal .message").html();
|
|
||||||
// $("#modal").addClass("open");
|
|
||||||
// // $("#body").addClass("grey");
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// $("#modal .mask, #modal a.close").click(function(){
|
|
||||||
// $("#modal").removeClass("open");
|
|
||||||
// return false;
|
|
||||||
// });
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,28 +0,0 @@
|
|||||||
// $( function() {
|
|
||||||
// $( "#popin" ).dialog({
|
|
||||||
// autoOpen: false,
|
|
||||||
// show: {
|
|
||||||
// effect: "blind",
|
|
||||||
// duration: 1000
|
|
||||||
// },
|
|
||||||
// hide: {
|
|
||||||
// effect: "explode",
|
|
||||||
// duration: 1000
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// $( "#opener" ).on( "click", function() {
|
|
||||||
// $( "#popin" ).dialog( "open" );
|
|
||||||
// });
|
|
||||||
// } );
|
|
||||||
|
|
||||||
|
|
||||||
// $(".bouton").click(function(){
|
|
||||||
// $("#modal .message").html();
|
|
||||||
// $("#modal").addClass("open");
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// $("#modal .mask, #modal a.close").click(function(){
|
|
||||||
// $("#modal").removeClass("open");
|
|
||||||
// return false;
|
|
||||||
// });
|
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
@import "breakpoints";
|
||||||
|
@import "utilities";
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
// Breakpoints
|
||||||
|
@mixin breakpoint($breakpoints, $media: all) {
|
||||||
|
@each $breakpoint in $breakpoints {
|
||||||
|
@if $breakpoint == large-desktop-range {
|
||||||
|
@media only #{$media} and (min-width: $large-desktop-container) { @content; }
|
||||||
|
}
|
||||||
|
@else if $breakpoint == desktop-range {
|
||||||
|
@media only #{$media} and (min-width: $desktop-container) and (max-width: $large-desktop-container - 0.062) { @content; }
|
||||||
|
}
|
||||||
|
@else if $breakpoint == tablet-range {
|
||||||
|
@media only #{$media} and (min-width: $tablet-container) and (max-width: $desktop-container - 0.062) { @content; }
|
||||||
|
}
|
||||||
|
@else if $breakpoint == large-mobile-range {
|
||||||
|
@media only #{$media} and (min-width: $large-mobile-container + 0.063) and (max-width: $tablet-container - 0.062) { @content; }
|
||||||
|
}
|
||||||
|
@else if $breakpoint == small-mobile-range {
|
||||||
|
@media only #{$media} and (max-width: $large-mobile-container) { @content; }
|
||||||
|
}
|
||||||
|
@else if $breakpoint == no-mobile {
|
||||||
|
@media only #{$media} and (min-width: $tablet-container) { @content; }
|
||||||
|
}
|
||||||
|
@else if $breakpoint == mobile-only {
|
||||||
|
@media only #{$media} and (max-width: $tablet-container - 0.062) { @content; }
|
||||||
|
}
|
||||||
|
@else if $breakpoint == desktop-only {
|
||||||
|
@media only #{$media} and (max-width: $desktop-container - 0.062) { @content; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
|
||||||
|
|
||||||
|
// List Reset
|
||||||
|
%list-reset {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vertical Centering
|
||||||
|
%vertical-align {
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
-moz-transform: translateY(-50%);
|
||||||
|
-o-transform: translateY(-50%);
|
||||||
|
-ms-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Columns
|
||||||
|
@mixin columns($columns) {
|
||||||
|
width: percentage(1/$columns);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Float with margin variable
|
||||||
|
@mixin float($direction, $margin: 0) {
|
||||||
|
float: $direction;
|
||||||
|
margin-#{opposite-direction($direction)}: $margin;
|
||||||
|
}
|
||||||
@@ -46,21 +46,21 @@
|
|||||||
#header.scrolled #navbar ul.navigation li a {
|
#header.scrolled #navbar ul.navigation li a {
|
||||||
color: black !important;
|
color: black !important;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
|
|
||||||
transition:0.6s ease-in-out;
|
transition:0.6s ease-in-out;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#logo img {
|
#logo img {
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1::after {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.callout {
|
.callout {
|
||||||
padding-top: 0.5rem;
|
padding-top: 0.5rem;
|
||||||
@@ -79,61 +79,71 @@
|
|||||||
display: block;
|
display: block;
|
||||||
margin-left: 40%;
|
margin-left: 40%;
|
||||||
margin-right: 15%;
|
margin-right: 15%;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: left;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.titre_bsn h1 {
|
|
||||||
text-align: left;
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// fond images en grille pour parallax
|
// fond images en grille pour parallax
|
||||||
|
|
||||||
#background {
|
// #background {
|
||||||
background-color: #d5d2d1;
|
// background-color: #d5d2d1;
|
||||||
display: grid;
|
// display: grid;
|
||||||
grid-template-columns: repeat(5, 1fr);
|
// grid-template-columns: repeat(5, 1fr);
|
||||||
grid-template-rows: repeat(8, 5vw);
|
// grid-template-rows: repeat(8, 5vw);
|
||||||
grid-gap: 15px;
|
// grid-gap: 15px;
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
|
// #background img {
|
||||||
|
// max-width: 100% !important;
|
||||||
|
// max-height: 100% !important;
|
||||||
|
// // object-fit: cover;
|
||||||
|
// }
|
||||||
|
|
||||||
#background img {
|
// .item-1 {
|
||||||
width: 100% !important;
|
// grid-column-start: 1;
|
||||||
height: 100%;
|
// grid-column-end: 3;
|
||||||
object-fit: cover;
|
// grid-row-start: 1;
|
||||||
}
|
// grid-row-end: 5;
|
||||||
|
// }
|
||||||
.item-1 {
|
//
|
||||||
grid-column-start: 1;
|
// .item-2 {
|
||||||
grid-column-end: 3;
|
// grid-column-start: 3;
|
||||||
grid-row-start: 1;
|
// grid-column-end: 5;
|
||||||
grid-row-end: 5;
|
// grid-row-start: 1;
|
||||||
}
|
// grid-row-end: 5;
|
||||||
|
// }
|
||||||
.item-2 {
|
//
|
||||||
grid-column-start: 3;
|
// .item-3 {
|
||||||
grid-column-end: 5;
|
// grid-column-start: 5 ;
|
||||||
grid-row-start: 1;
|
// grid-column-end: 1;
|
||||||
grid-row-end: 5;
|
// grid-row-start: 9;
|
||||||
}
|
// grid-row-end: 6;
|
||||||
|
// }
|
||||||
.item-3 {
|
//
|
||||||
grid-column-start: 5 ;
|
// .item-4 {
|
||||||
grid-column-end: 1;
|
// grid-column-start: 1;
|
||||||
grid-row-start: 9;
|
// grid-column-end: 3;
|
||||||
grid-row-end: 6;
|
// grid-row-start: 1;
|
||||||
}
|
// grid-row-end: 3;
|
||||||
|
// }
|
||||||
.item-4 {
|
|
||||||
grid-column-start: 1;
|
|
||||||
grid-column-end: 3;
|
|
||||||
grid-row-start: 1;
|
|
||||||
grid-row-end: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.programmes {
|
.programmes {
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
background:
|
||||||
|
url("/user/themes/epau-antimatter/images/14360_default_big.jpg") 0px 0px no-repeat, /* On top, like z-index: 4; */
|
||||||
|
url("/user/themes/epau-antimatter/images/10361_web_01.jpg") 1200px 300px no-repeat, /* like z-index: 3; */
|
||||||
|
url("/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG") 0px 700px no-repeat, /* like z-index: 2; */
|
||||||
|
url("/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg") right no-repeat; /* On bottom, like z-index: 1; */
|
||||||
|
|
||||||
|
|
||||||
background-color: #d5d2d1;
|
background-color: #d5d2d1;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-left: 15%;
|
padding-left: 15%;
|
||||||
@@ -143,34 +153,42 @@
|
|||||||
padding-bottom: 8rem;
|
padding-bottom: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programme {
|
.programme {
|
||||||
max-width: 35%;
|
max-width: 35%;
|
||||||
// min-width:
|
// min-width:
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
margin: 0.4rem;
|
margin: 0.4rem;
|
||||||
|
|
||||||
}
|
h4 {
|
||||||
|
|
||||||
.programme h4 {
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programme img {
|
img {
|
||||||
max-height: 15%;
|
max-height: 15%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programme p {
|
p {
|
||||||
font-family: $font-family-default;
|
font-family: $font-family-default;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
.programmes :hover {
|
}
|
||||||
background-color: #000;
|
|
||||||
color: #ffffff;
|
|
||||||
transition:0.2s ease-in-out;
|
.programme:hover {
|
||||||
}
|
background-color: #000;
|
||||||
|
transition:0.2s ease-in-out;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// .parallax {
|
// .parallax {
|
||||||
// display: block;
|
// display: block;
|
||||||
@@ -257,20 +275,22 @@
|
|||||||
|
|
||||||
.mozaique_personnes {
|
.mozaique_personnes {
|
||||||
background-color: #d5d2d1;
|
background-color: #d5d2d1;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
padding-top: 3rem;
|
||||||
|
padding-left: 15%;
|
||||||
|
padding-right: 15%;
|
||||||
|
font-family: "Sarabun";
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.mozaique_personnes h3 {
|
|
||||||
padding-top: 3rem;
|
|
||||||
padding-left: 15%;
|
|
||||||
padding-right: 15%;
|
|
||||||
font-family: "Sarabun";
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 20px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// .personne {
|
// .personne {
|
||||||
// // display: flex;
|
// // display: flex;
|
||||||
// // flex-direction: row;
|
// // flex-direction: row;
|
||||||
@@ -316,6 +336,21 @@
|
|||||||
width: 30rem;
|
width: 30rem;
|
||||||
height: 30rem;
|
height: 30rem;
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-style: italic;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger...
|
// comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger...
|
||||||
@@ -327,35 +362,15 @@
|
|||||||
transition:0.2s ease-in-out;
|
transition:0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info h5 {
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
margin: 0;
|
|
||||||
padding-top: 1rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info h6 {
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-style: italic;
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portrait {
|
.portrait {
|
||||||
// max-width:50% !important;
|
// max-width:50% !important;
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
}
|
|
||||||
|
|
||||||
.portrait img {
|
img {
|
||||||
max-width: 15rem !important;
|
width: 5rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
img.portrait {
|
|
||||||
|
|
||||||
width: 20%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -375,7 +390,7 @@ img.portrait {
|
|||||||
|
|
||||||
// pop in biographie
|
// pop in biographie
|
||||||
|
|
||||||
#modal{
|
.modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -384,48 +399,65 @@ img.portrait {
|
|||||||
left: 0;
|
left: 0;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#modal.open{
|
.modal.open{
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
#modal .mask{
|
// #modal .mask{
|
||||||
background: none !important;
|
// background: none !important;
|
||||||
opacity: 1;
|
// opacity: 1;
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 0;
|
// top: 0;
|
||||||
right: 0;
|
// right: 0;
|
||||||
bottom: 0;
|
// bottom: 0;
|
||||||
left: 0;
|
// left: 0;
|
||||||
|
//
|
||||||
}
|
// }
|
||||||
// #body .grey {
|
// #body .grey {
|
||||||
// opacity: 0.5;
|
// opacity: 0.5;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
#modal .container{
|
.modal .container{
|
||||||
position: relative;
|
position: absolute;
|
||||||
background: white !important;
|
background: white !important;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 25%;
|
left: 50%;
|
||||||
transform: translateX(-50%) translateY(-50%);
|
transform: translateX(-50%) translateY(-50%);
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: content;
|
height: content;
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
border: solid;
|
border: solid;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
.message{
|
||||||
|
padding: 5% 10% 5% 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.close{
|
||||||
|
position: absolute;
|
||||||
|
right: 5%;
|
||||||
|
top:5%;
|
||||||
|
color: black;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.close:hover{
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#modal .container .message{
|
// .modal .container .message{
|
||||||
padding: 5% 10% 5% 5%;
|
// padding: 5% 10% 5% 5%;
|
||||||
|
//
|
||||||
|
// }
|
||||||
|
|
||||||
}
|
// .modal .container a.close{
|
||||||
|
// position: absolute;
|
||||||
#modal .container a.close{
|
// right: 5%;
|
||||||
position: absolute;
|
// top:5%;
|
||||||
right: 5%;
|
// color: black;
|
||||||
top:5%;
|
// font-size: 30px;
|
||||||
color: black;
|
// }
|
||||||
font-size: 30px;
|
// .modal .container a.close:hover{
|
||||||
}
|
// color: black;
|
||||||
#modal .container a.close:hover{
|
// }
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,4 +1,9 @@
|
|||||||
<div class="modular-row features {{ page.header.class}}">
|
<div class="modular-row features {{ page.header.class}}">
|
||||||
|
<div class="after-h1">
|
||||||
|
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Simple rect element -->
|
||||||
|
<rect x="0" y="0" width="100" height="3" />
|
||||||
|
</div>
|
||||||
|
|
||||||
{{ content|raw }}
|
{{ content|raw }}
|
||||||
|
|
||||||
|
|||||||
@@ -1,28 +1,12 @@
|
|||||||
<script>
|
|
||||||
|
|
||||||
var message = {{ page.media[personne.biographie].url|e }};
|
|
||||||
$(".bouton").click(function(){
|
|
||||||
|
|
||||||
$("#modal .message").html('message');
|
|
||||||
|
|
||||||
$("#modal").addClass("open");
|
|
||||||
// $("#body").addClass("grey");
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#modal .mask, #modal a.close").click(function(){
|
|
||||||
$("#modal").removeClass("open");
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="mozaique_personnes{{ page.header.class}}">
|
<div id="mozaique_personnes{{ page.header.class}}">
|
||||||
{{ content|raw }}
|
{{ content|raw }}
|
||||||
|
|
||||||
|
|
||||||
{% for personne in page.header.personnes %}
|
|
||||||
|
|
||||||
|
{% for personne in page.header.personnes %}
|
||||||
|
<!-- {{ dump(personne) }} -->
|
||||||
<!-- <div class="personne"> -->
|
<!-- <div class="personne"> -->
|
||||||
<div class="mozaique">
|
<div class="mozaique">
|
||||||
<div class="portait">
|
<div class="portait">
|
||||||
@@ -38,8 +22,7 @@ $("#modal .mask, #modal a.close").click(function(){
|
|||||||
<h6>{{ personne.fonction }}</h6>
|
<h6>{{ personne.fonction }}</h6>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<button class="bouton">Voir biographie</button>
|
<button class="bouton">Voir biographie</button>
|
||||||
</div>
|
<div class="modal">
|
||||||
<div id="modal">
|
|
||||||
<div class="mask">
|
<div class="mask">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="message">
|
<div class="message">
|
||||||
@@ -53,6 +36,8 @@ $("#modal .mask, #modal a.close").click(function(){
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -61,4 +46,24 @@ $("#modal .mask, #modal a.close").click(function(){
|
|||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<!--
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// var .message = {{ personne.biographie }};
|
||||||
|
$(".bouton").click(function(event){
|
||||||
|
|
||||||
|
$("#modal .message").html();
|
||||||
|
|
||||||
|
$("#modal").addClass("open");
|
||||||
|
// $("#body").addClass("grey");
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#modal .mask, #modal a.close").click(function(){
|
||||||
|
$("#modal").removeClass("open");
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
</script> -->
|
||||||
|
|||||||
@@ -1,35 +1,8 @@
|
|||||||
<!-- <div class="background">
|
|
||||||
<img src="{/pages/02._programmes/10361_web_01.jpg}">
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
<div id="background">
|
|
||||||
|
|
||||||
<figure class="item-1">
|
|
||||||
<img src="/user/themes/epau-antimatter/images/14360_default_big.jpg" class="background__img" alt="Image 1">
|
|
||||||
</figure>
|
|
||||||
<figure class="item-2">
|
|
||||||
<img src="/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG" class="background__img" alt="Image 2">
|
|
||||||
</figure>
|
|
||||||
<figure class="item-3">
|
|
||||||
<img src="/user/themes/epau-antimatter/images/10361_web_01.jpg" class="background__img" alt="Image 3">
|
|
||||||
</figure>
|
|
||||||
<figure class="item-4">
|
|
||||||
<img src="/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg" class="background__img" alt="Image 4">
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="programmes{{ page.header.class}}">
|
<div class="programmes{{ page.header.class}}">
|
||||||
<!-- <div class="parallax-window" data-parallax="scroll" data-image-src="{/pages/02._programmes/10361_web_01.jpg}"></div> -->
|
|
||||||
{{ content|raw }}
|
{{ content|raw }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{#
|
|
||||||
<div class="paralax-bg">
|
|
||||||
</div>
|
|
||||||
#}
|
|
||||||
|
|
||||||
{% for programme in page.header.programmes %}
|
{% for programme in page.header.programmes %}
|
||||||
|
|
||||||
<div class="programme">
|
<div class="programme">
|
||||||
|
|||||||
@@ -1,6 +1,13 @@
|
|||||||
|
|
||||||
<div class="titre_nsb">
|
<div class="titre_nsb">
|
||||||
|
|
||||||
{{ content|raw }}
|
{{ content|raw }}
|
||||||
|
|
||||||
|
<div class="after-h1">
|
||||||
|
<svg width="50%" height="0.5rem">
|
||||||
|
<rect width="100%" height="100%" style="fill:rgb(0,0,0);stroke-width:3;stroke:rgb(0,0,0)" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="features {{ page.header.class}}">
|
<div class="features {{ page.header.class}}">
|
||||||
|
|||||||
@@ -32,9 +32,9 @@
|
|||||||
{% do assets.addJs('jquery', 101) %}
|
{% do assets.addJs('jquery', 101) %}
|
||||||
{% do assets.addJs('theme://js/modernizr.custom.71422.js', 100) %}
|
{% do assets.addJs('theme://js/modernizr.custom.71422.js', 100) %}
|
||||||
{% do assets.addJs('theme://js/antimatter.js') %}
|
{% do assets.addJs('theme://js/antimatter.js') %}
|
||||||
|
|
||||||
{% do assets.addJs('theme://js/slidebars.min.js') %}
|
{% do assets.addJs('theme://js/slidebars.min.js') %}
|
||||||
{% do assets.addJs('theme://js/parallax.min.js') %}
|
|
||||||
{% do assets.addJs('theme://js/script-bio.js') %}
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block assets deferred %}
|
{% block assets deferred %}
|
||||||
|
|||||||