diff --git a/user/themes/epau-antimatter/css-compiled/template.css b/user/themes/epau-antimatter/css-compiled/template.css index 25c9d0f..7e0ba19 100644 --- a/user/themes/epau-antimatter/css-compiled/template.css +++ b/user/themes/epau-antimatter/css-compiled/template.css @@ -842,50 +842,15 @@ ul.pagination { display: block; margin-left: 40%; margin-right: 15%; } - -.titre_bsn h1 { - text-align: left; - 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; } + .titre_bsn h1 { + text-align: left; + padding-bottom: 3rem; } .programmes { display: flex; 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; justify-content: center; padding-left: 15%; @@ -898,23 +863,23 @@ ul.pagination { padding: 1.5rem; background-color: white; 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 { - 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 { +.programme:hover { background-color: #000; - color: #ffffff; transition: 0.2s ease-in-out; } + .programme:hover p { + color: #fff; } + .programme:hover h4 { + color: #fff; } .gouvernance { background-color: #000; @@ -932,16 +897,15 @@ ul.pagination { .mozaique_personnes { background-color: #d5d2d1; } - -.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; } + .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; } .mozaique { display: flex; @@ -956,35 +920,29 @@ ul.pagination { font-family: "Sarabun", sans-serif; width: 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 { background-color: #000; color: #fff; 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 { background: transparent !important; } - -.portrait img { - max-width: 15rem !important; } - -img.portrait { - width: 20%; } + .portrait img { + width: 5rem !important; } .bouton { border: solid; @@ -993,7 +951,7 @@ img.portrait { align-self: flex-end; margin-right: 2rem; } -#modal { +.modal { position: fixed; z-index: 1; top: 0; @@ -1002,41 +960,30 @@ img.portrait { left: 0; display: none; } -#modal.open { +.modal.open { display: block; } -#modal .mask { - background: none !important; - opacity: 1; +.modal .container { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; } - -#modal .container { - position: relative; background: white !important; top: 50%; - left: 25%; + left: 50%; transform: translateX(-50%) translateY(-50%); width: 50%; height: content; min-height: 50px; - 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 { + border: solid; 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 { background-color: rgba(255, 255, 255, 0); diff --git a/user/themes/epau-antimatter/images/10361_web_01.jpg b/user/themes/epau-antimatter/images/10361_web_01.jpg index d23c369..1d08835 100644 Binary files a/user/themes/epau-antimatter/images/10361_web_01.jpg and b/user/themes/epau-antimatter/images/10361_web_01.jpg differ diff --git a/user/themes/epau-antimatter/images/14360_default_big.jpg b/user/themes/epau-antimatter/images/14360_default_big.jpg index 68ae8d7..430d59e 100644 Binary files a/user/themes/epau-antimatter/images/14360_default_big.jpg and b/user/themes/epau-antimatter/images/14360_default_big.jpg differ diff --git a/user/themes/epau-antimatter/images/IMG_20190809_173115.jpg b/user/themes/epau-antimatter/images/IMG_20190809_173115.jpg deleted file mode 100644 index 60b2722..0000000 Binary files a/user/themes/epau-antimatter/images/IMG_20190809_173115.jpg and /dev/null differ diff --git a/user/themes/epau-antimatter/images/OSC_5209.jpg b/user/themes/epau-antimatter/images/OSC_5209.jpg deleted file mode 100644 index 5547ab3..0000000 Binary files a/user/themes/epau-antimatter/images/OSC_5209.jpg and /dev/null differ diff --git a/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG b/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG index 2be7d7e..eccb616 100644 Binary files a/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG and b/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG differ diff --git a/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg b/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg index 5bb2889..9a2c464 100644 Binary files a/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg and b/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg differ diff --git a/user/themes/epau-antimatter/js/antimatter.js b/user/themes/epau-antimatter/js/antimatter.js index 8b8cda5..c6f6847 100644 --- a/user/themes/epau-antimatter/js/antimatter.js +++ b/user/themes/epau-antimatter/js/antimatter.js @@ -36,49 +36,27 @@ jQuery(document).ready(function($){ }); // Responsive Menu + // POPIN Biographies - // * Grab data attributes from twig with JQuery - // */ - // $(() => { - // - // // Select elements by their data attribute - // const $personneElements = $('[data-personne-id]'); - // - // // Map over each element and extract the data value - // const $personneIds = - // $.map($personneElements, item => $(item).data('personneId')); - // - // // You'll now have array containing string values - // console.log($personneIds); // eg: ["1", "2", "3"] - // }); + $(".bouton").click(function(event){ + console.log(event); + // + var mods = document.querySelectorAll('.modal'); + mods.forEach((m, i) => { + m.classList.remove('open') + }); + // + var btn = event.currentTarget; + console.log('btn', btn); + var mod = btn.parentNode.querySelector('.modal'); + mod.classList.add('open') - // {% set script %} - // // ton js - // var mavariable = {{ twigvar }}; - // {% endset %} - // {% do assets.addInlineJs(script) %} + }); - - // - // // POPIN Biographies - // 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; - // }); + $(".modal .mask, .modal a.close").click(function(event){ + $ (".modal").removeClass("open"); + return false; + }); }); diff --git a/user/themes/epau-antimatter/js/script-bio.js b/user/themes/epau-antimatter/js/script-bio.js deleted file mode 100644 index baaf645..0000000 --- a/user/themes/epau-antimatter/js/script-bio.js +++ /dev/null @@ -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; -// }); diff --git a/user/themes/epau-antimatter/scss/nucleus/functions/mixins/_base.scss b/user/themes/epau-antimatter/scss/nucleus/functions/mixins/_base.scss new file mode 100644 index 0000000..5e4a709 --- /dev/null +++ b/user/themes/epau-antimatter/scss/nucleus/functions/mixins/_base.scss @@ -0,0 +1,2 @@ +@import "breakpoints"; +@import "utilities"; \ No newline at end of file diff --git a/user/themes/epau-antimatter/scss/nucleus/functions/mixins/_breakpoints.scss b/user/themes/epau-antimatter/scss/nucleus/functions/mixins/_breakpoints.scss new file mode 100644 index 0000000..7e86f8b --- /dev/null +++ b/user/themes/epau-antimatter/scss/nucleus/functions/mixins/_breakpoints.scss @@ -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; } + } + } + +} diff --git a/user/themes/epau-antimatter/scss/nucleus/functions/mixins/_utilities.scss b/user/themes/epau-antimatter/scss/nucleus/functions/mixins/_utilities.scss new file mode 100644 index 0000000..217d4df --- /dev/null +++ b/user/themes/epau-antimatter/scss/nucleus/functions/mixins/_utilities.scss @@ -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; +} diff --git a/user/themes/epau-antimatter/scss/template/_custom.scss b/user/themes/epau-antimatter/scss/template/_custom.scss index 1b5e3fb..17f2003 100644 --- a/user/themes/epau-antimatter/scss/template/_custom.scss +++ b/user/themes/epau-antimatter/scss/template/_custom.scss @@ -46,21 +46,21 @@ #header.scrolled #navbar ul.navigation li a { color: black !important; font-size: 0.95rem; - transition:0.6s ease-in-out; - } #logo { display: flex; flex-direction: row; - } #logo img { padding: 0.5rem; } +h1::after { + +} .callout { padding-top: 0.5rem; @@ -79,61 +79,71 @@ display: block; margin-left: 40%; 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 -#background { - background-color: #d5d2d1; - display: grid; - grid-template-columns: repeat(5, 1fr); - grid-template-rows: repeat(8, 5vw); - grid-gap: 15px; -} +// #background { +// background-color: #d5d2d1; +// display: grid; +// grid-template-columns: repeat(5, 1fr); +// grid-template-rows: repeat(8, 5vw); +// grid-gap: 15px; +// } +// +// #background img { +// max-width: 100% !important; +// max-height: 100% !important; +// // object-fit: cover; +// } -#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; -} +// .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 { display: flex; 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; justify-content: center; padding-left: 15%; @@ -143,34 +153,42 @@ padding-bottom: 8rem; } - .programme { - max-width: 35%; - // min-width: - padding: 1.5rem; - background-color: white; - margin: 0.4rem; +.programme { + max-width: 35%; + // min-width: + padding: 1.5rem; + background-color: white; + margin: 0.4rem; - } - - .programme h4 { + h4 { text-transform: uppercase; line-height: 1.2; } - .programme img { + img { max-height: 15%; } - .programme p { + p { font-family: $font-family-default; font-weight: 500; 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 { // display: block; @@ -257,20 +275,22 @@ .mozaique_personnes { 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 { // // display: flex; // // flex-direction: row; @@ -316,6 +336,21 @@ width: 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... @@ -327,35 +362,15 @@ 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 { // max-width:50% !important; background: transparent !important; -} -.portrait img { - max-width: 15rem !important; -} + img { + width: 5rem !important; + } -img.portrait { - - width: 20%; } @@ -375,7 +390,7 @@ img.portrait { // pop in biographie -#modal{ +.modal { position: fixed; z-index: 1; top: 0; @@ -384,48 +399,65 @@ img.portrait { left: 0; display: none; } -#modal.open{ +.modal.open{ display: block; } -#modal .mask{ - background: none !important; - opacity: 1; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - -} +// #modal .mask{ +// background: none !important; +// opacity: 1; +// position: absolute; +// top: 0; +// right: 0; +// bottom: 0; +// left: 0; +// +// } // #body .grey { // opacity: 0.5; // } -#modal .container{ - position: relative; +.modal .container{ + position: absolute; background: white !important; top: 50%; - left: 25%; + left: 50%; transform: translateX(-50%) translateY(-50%); width: 50%; height: content; min-height: 50px; 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{ - padding: 5% 10% 5% 5%; +// .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; -} +// .modal .container a.close{ +// position: absolute; +// right: 5%; +// top:5%; +// color: black; +// font-size: 30px; +// } +// .modal .container a.close:hover{ +// color: black; +// } diff --git a/user/themes/epau-antimatter/templates/modular/features.html.twig b/user/themes/epau-antimatter/templates/modular/features.html.twig index eef207e..335e33b 100644 --- a/user/themes/epau-antimatter/templates/modular/features.html.twig +++ b/user/themes/epau-antimatter/templates/modular/features.html.twig @@ -1,4 +1,9 @@
+
+ + + +
{{ content|raw }} diff --git a/user/themes/epau-antimatter/templates/modular/personnes.html.twig b/user/themes/epau-antimatter/templates/modular/personnes.html.twig index cde29f6..940c1f8 100644 --- a/user/themes/epau-antimatter/templates/modular/personnes.html.twig +++ b/user/themes/epau-antimatter/templates/modular/personnes.html.twig @@ -1,28 +1,12 @@ -
{{ content|raw }} - {% for personne in page.header.personnes %} + {% for personne in page.header.personnes %} +
@@ -38,8 +22,7 @@ $("#modal .mask, #modal a.close").click(function(){
{{ personne.fonction }}
{% endif %} -
- + diff --git a/user/themes/epau-antimatter/templates/modular/programmes.html.twig b/user/themes/epau-antimatter/templates/modular/programmes.html.twig index b4b9c26..b904d62 100644 --- a/user/themes/epau-antimatter/templates/modular/programmes.html.twig +++ b/user/themes/epau-antimatter/templates/modular/programmes.html.twig @@ -1,35 +1,8 @@ - -
- -
- Image 1 -
-
- Image 2 -
-
- Image 3 -
-
- Image 4 -
- -
- + {{ content|raw }} - - -{# -
-
-#} - {% for programme in page.header.programmes %}
diff --git a/user/themes/epau-antimatter/templates/modular/ressources.html.twig b/user/themes/epau-antimatter/templates/modular/ressources.html.twig index d8f0a7e..6631105 100644 --- a/user/themes/epau-antimatter/templates/modular/ressources.html.twig +++ b/user/themes/epau-antimatter/templates/modular/ressources.html.twig @@ -1,6 +1,13 @@
+ {{ content|raw }} + +
+ + + +
@@ -25,6 +32,6 @@
{% endfor %} -
+
diff --git a/user/themes/epau-antimatter/templates/partials/base.html.twig b/user/themes/epau-antimatter/templates/partials/base.html.twig index 3b9dad7..3a6b747 100644 --- a/user/themes/epau-antimatter/templates/partials/base.html.twig +++ b/user/themes/epau-antimatter/templates/partials/base.html.twig @@ -32,9 +32,9 @@ {% do assets.addJs('jquery', 101) %} {% do assets.addJs('theme://js/modernizr.custom.71422.js', 100) %} {% do assets.addJs('theme://js/antimatter.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 %} {% block assets deferred %}