From cb35336870b3434645269d712f12defc23e8dec3 Mon Sep 17 00:00:00 2001 From: Valentin Date: Thu, 14 Dec 2023 09:38:25 +0100 Subject: [PATCH] =?UTF-8?q?d=C3=A9but=20de=20l'int=C3=A9gration=20design?= =?UTF-8?q?=20desktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/themes/erabletheme/css/styles.css | 241 ++++++++++++++++-- web/themes/erabletheme/css/styles.css.map | 2 +- web/themes/erabletheme/scss/_fullpage.scss | 10 + web/themes/erabletheme/scss/_gouvernance.scss | 17 ++ .../scss/global/variables/_layout.scss | 7 +- .../scss/global/variables/_typography.scss | 4 + .../erabletheme/scss/partials/_footer.scss | 160 +++++++----- .../erabletheme/scss/partials/_header.scss | 102 +++++++- 8 files changed, 442 insertions(+), 101 deletions(-) diff --git a/web/themes/erabletheme/css/styles.css b/web/themes/erabletheme/css/styles.css index ef87a70..1b9e3dc 100644 --- a/web/themes/erabletheme/css/styles.css +++ b/web/themes/erabletheme/css/styles.css @@ -31,6 +31,7 @@ font-weight: 300; font-style: normal; } +/* BREAKPOINTS */ /* SIZES */ /* MIXINS */ a { @@ -63,7 +64,7 @@ a { justify-content: space-between; } .layout-container header div #block-erabletheme-logorepublique { - max-width: 15vw; + width: 15vw; } .layout-container header div #block-erabletheme-logorepublique a { display: flex; @@ -74,27 +75,106 @@ a { height: auto; width: 100%; } -.layout-container header div #block-erabletheme-logoerable { - max-width: 30vw; +@media (min-width: 1280px) { + .layout-container header div #block-erabletheme-logorepublique a img { + padding-right: 1.5vw; + } } -.layout-container header div #block-erabletheme-logoerable a { +@media (min-width: 1280px) { + .layout-container header div #block-erabletheme-logorepublique { + width: 10vw; + } +} +.layout-container header div #block-erabletheme-logoerable { + max-height: 100%; + width: 20vw; +} +.layout-container header div #block-erabletheme-logoerable > div { + width: auto; +} +.layout-container header div #block-erabletheme-logoerable > div a { + width: 100%; display: flex; align-items: center; + justify-content: center; } -.layout-container header div #block-erabletheme-logoerable a img { - height: auto; - width: 100%; +.layout-container header div #block-erabletheme-logoerable > div a img { + height: 100%; + width: auto; padding-top: 3px; padding-bottom: 3px; } +@media (min-width: 1280px) { + .layout-container header div #block-erabletheme-logoerable { + width: 10vw; + } +} .layout-container header div #block-erabletheme-navigationprincipale { display: none; } +.layout-container header div #block-erabletheme-navigationprincipale ul { + width: 60vw; + display: flex; + height: 100%; + align-items: center; + justify-content: space-around; + padding: 0 5vw; +} +.layout-container header div #block-erabletheme-navigationprincipale ul li { + font-family: "Marianne", sans-serif; + font-size: 0.9rem; +} +.layout-container header div #block-erabletheme-navigationprincipale ul li a { + font-weight: 800; + padding: 4px 6px; + color: black; + background-color: rgba(255, 255, 255, 0); + transition: background-color 0.3s ease; +} +.layout-container header div #block-erabletheme-navigationprincipale ul li a:hover { + background-color: #00ff80; +} +.layout-container header div #block-erabletheme-navigationprincipale ul li a.is-active { + font-weight: 400; + background-color: #00ff80; +} +@media (min-width: 1280px) { + .layout-container header div #block-erabletheme-navigationprincipale { + display: block; + } +} .layout-container header div #block-erabletheme-socialmedialinks { + width: 7vw; + margin: 0 calc((20vw - (7vw + 7vh)) / 2); display: none; } +.layout-container header div #block-erabletheme-socialmedialinks ul { + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} +.layout-container header div #block-erabletheme-socialmedialinks ul li a span { + font-weight: lighter; + font-size: 1.4rem; + width: 2.2rem; + height: 2.2rem; + padding: 0.4rem; + border-radius: 1.1rem; + color: white; + background-color: #038788; +} +.layout-container header div #block-erabletheme-socialmedialinks ul li a svg.ext { + display: none; +} +@media (min-width: 1280px) { + .layout-container header div #block-erabletheme-socialmedialinks { + display: block; + } +} .layout-container header div #block-erabletheme-header #hamburger { - width: 4rem; + cursor: pointer; + width: 7vh; height: 100%; background-color: #00ff80; display: flex; @@ -159,6 +239,12 @@ a { font-family: "Marianne", sans-serif; font-weight: 800; padding: 4px 6px; + background-color: rgba(255, 255, 255, 0); + transition: background-color 0.3s ease, color 0.3s ease; +} +.layout-container header div #block-erabletheme-header ul li a:hover { + background-color: white; + color: #314e41; } .layout-container header div #block-erabletheme-header ul li a.is-active { background-color: white; @@ -167,6 +253,13 @@ a { .layout-container header div #block-erabletheme-header ul li.visible { opacity: 1; } +@media (min-width: 1280px) { + .layout-container header div #block-erabletheme-header ul { + width: 25vw; + right: 0; + left: auto; + } +} .layout-container header div #block-erabletheme-header ul.active { padding: 30px 0; max-height: 100vh; @@ -180,28 +273,45 @@ a { margin-top: 50px; padding: 0 3vw; } -.layout-container > footer #footer_left div { +.layout-container > footer #footer_middle #footer_left > div { margin-top: 5px; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; } -.layout-container > footer #footer_left div #block-erabletheme-logorep { - max-width: 30vw; +.layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logorep { + width: 30vw; } -.layout-container > footer #footer_left div #block-erabletheme-logorep img { +.layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logorep img { width: 100%; height: auto; } -.layout-container > footer #footer_left div #block-erabletheme-logoepau { - max-width: 50vw; +@media (min-width: 960px) { + .layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logorep { + width: 10vw; + } } -.layout-container > footer #footer_left div #block-erabletheme-logoepau img { +.layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logoepau { + width: 50vw; +} +.layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logoepau img { width: 100%; height: auto; } -.layout-container > footer #footer_section { +@media (min-width: 960px) { + .layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logoepau { + width: 15vw; + padding-left: 2vw; + } +} +@media (min-width: 960px) { + .layout-container > footer #footer_middle #footer_left > div { + width: 25vw; + padding-left: 3vw; + } +} +.layout-container > footer #footer_middle #footer_section { display: flex; width: 100%; justify-content: space-between; @@ -210,29 +320,41 @@ a { margin-bottom: 20px; position: relative; } -.layout-container > footer #footer_section #footer_center { +.layout-container > footer #footer_middle #footer_section #footer_center { padding-left: 2vw; width: 50%; } -.layout-container > footer #footer_section #footer_center nav ul { +.layout-container > footer #footer_middle #footer_section #footer_center nav ul { display: flex; justify-content: space-between; } -.layout-container > footer #footer_section #footer_center nav ul li a { +.layout-container > footer #footer_middle #footer_section #footer_center nav ul li a { color: #314e41; font-size: 0.8rem; font-family: "Marianne", sans-serif; font-weight: 800; text-decoration: underline; } -.layout-container > footer #footer_section #footer_right { +@media (min-width: 960px) { + .layout-container > footer #footer_middle #footer_section #footer_center nav ul { + width: 50vw; + padding: 0 15vw; + } +} +@media (min-width: 960px) { + .layout-container > footer #footer_middle #footer_section #footer_center { + padding-left: 0; + width: auto; + } +} +.layout-container > footer #footer_middle #footer_section #footer_right { width: 30%; } -.layout-container > footer #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul { +.layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul { display: flex; justify-content: space-between; } -.layout-container > footer #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li a span { +.layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li a span { font-weight: lighter; font-size: 1.4rem; width: 2.2rem; @@ -242,10 +364,26 @@ a { color: white; background-color: #038788; } -.layout-container > footer #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li a svg.ext { - background-color: red; +.layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li a svg.ext { display: none; } +@media (min-width: 960px) { + .layout-container > footer #footer_middle #footer_section #footer_right { + width: 25vw; + padding-left: 15vw; + padding-right: 3vw; + } +} +@media (min-width: 960px) { + .layout-container > footer #footer_middle { + display: flex; + } +} +@media (min-width: 960px) { + .layout-container > footer { + padding: 0; + } +} .slick-container { background: linear-gradient(to bottom, #fcf9ee 80%, white 100%); @@ -299,10 +437,14 @@ a { background-color: white; border: solid 2px #00ff80; padding: 9px 18px; + transition: background-color 0.3s ease; } .slick-container footer a svg { display: none; } +.slick-container footer a:hover { + background-color: #00ff80; +} .actu_full { background: linear-gradient(to bottom, #fcf9ee 80%, white 100%); @@ -371,10 +513,14 @@ a { background-color: white; border: solid 2px #00ff80; padding: 9px 18px; + transition: background-color 0.3s ease; } .actu_full .liens_fixed a svg { display: none; } +.actu_full .liens_fixed a:hover { + background-color: #00ff80; +} .views-row article > div:first-of-type { width: 100%; @@ -452,10 +598,14 @@ a { background-color: white; border: solid 2px #00ff80; padding: 9px 18px; + transition: background-color 0.3s ease; } .home_introduction div.more-link a svg { display: none; } +.home_introduction div.more-link a:hover { + background-color: #00ff80; +} .home_consultation { background: linear-gradient(to bottom, #fcf9ee 80%, white 100%); @@ -496,10 +646,14 @@ a { background-color: white; border: solid 2px #00ff80; padding: 9px 18px; + transition: background-color 0.3s ease; } .home_consultation div.more-link a svg { display: none; } +.home_consultation div.more-link a:hover { + background-color: #00ff80; +} .fullpage { margin-top: -3vh; @@ -559,13 +713,31 @@ a { background-color: white; border: solid 2px #00ff80; padding: 9px 18px; + transition: background-color 0.3s ease; } .fullpage .fullpage_content .liens_fixed a svg { display: none; } +.fullpage .fullpage_content .liens_fixed a:hover { + background-color: #00ff80; +} .fullpage .views-row { margin-bottom: 8vh; } +@media (min-width: 960px) { + .fullpage { + margin-top: 10vh; + padding-top: 0; + width: 75vw; + margin-left: 12.5vw; + } +} +@media (min-width: 1280px) { + .fullpage { + width: 50vw; + margin-left: 25vw; + } +} .content_gouvernance .views-row { margin-bottom: 2vh; @@ -609,6 +781,7 @@ a { color: #038788; font-weight: 800; margin-bottom: 2vh; + align-self: center; } .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(3) { display: none; @@ -618,6 +791,22 @@ a { font-size: 1rem; line-height: 1.4; } +@media (min-width: 960px) { + .content_gouvernance .views-row article .paragraph--type--membre-equipe { + grid-template-columns: 10vw 1fr; + } + .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:first-of-type > div { + width: 10vw; + height: 10vw; + border-radius: 5vw; + } + .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(2) { + padding-left: 3vw; + } + .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:last-of-type { + padding-left: 3vw; + } +} .content_partenaires .views-row { margin-bottom: 2vh; @@ -668,9 +857,13 @@ a { background-color: white; border: solid 2px #00ff80; padding: 9px 18px; + transition: background-color 0.3s ease; } .content_partenaires .views-row article > div:first-of-type > div:last-of-type a svg { display: none; } +.content_partenaires .views-row article > div:first-of-type > div:last-of-type a:hover { + background-color: #00ff80; +} /*# sourceMappingURL=styles.css.map */ diff --git a/web/themes/erabletheme/css/styles.css.map b/web/themes/erabletheme/css/styles.css.map index 6150049..4a0b685 100644 --- a/web/themes/erabletheme/css/styles.css.map +++ b/web/themes/erabletheme/css/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/styles.scss","../scss/global/_fonts.scss","../scss/global/variables/_typography.scss","../scss/global/_typography.scss","../scss/global/_global.scss","../scss/partials/_header.scss","../scss/global/variables/_layout.scss","../scss/global/variables/_colors.scss","../scss/partials/_footer.scss","../scss/partials/_carousel.scss","../scss/partials/_articles.scss","../scss/partials/_articles_teaser.scss","../scss/_home.scss","../scss/_fullpage.scss","../scss/_gouvernance.scss","../scss/_partenaires.scss"],"names":[],"mappings":"AAAA;ACAA;AAEA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;AAEA;EACI;EACA;EAEA;EACA;;ACzCJ;AAQA;ACRA;EACI;;;ACDJ;EACI;;;AJOJ;AKPA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AACA;EACI,cCxBb;EDyBa;EACA;;AAIZ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAIZ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;EACA,kBErDP;EFsDO;EACA;EACA;EACA;;AACA;EACI,WH1DT;EG2DS;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA,kBE/FP;EFgGO;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA,OEpHf;;AFuHO;EACI;;AAGR;EACI;EACA;;;AGhIpB;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,ODxCP;ECyCO,WN3CL;EM4CK;EACA;EACA;;AAKZ;EACI;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDjEjB;;ACmEa;EACI;EACA;;;ACtExB;EFMI;EEJA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AACA;EACI;EACA;;AAOpB;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,OF/BH;;AEiCD;EACI;;AAIZ;EAEI;EACA;EACA;;APDJ;EACI;EACA;EACA;EACA;EACA,WA5CM;EA6CN;EACA;EACA;;AACA;EACI;;;AQnDZ;EHMI;EGJA;EACA;EACA;;AACA;ERiBA;EACA,WAlBa;EAmBb;;AQhBA;EACI,WRRO;EQSP;EACA,OHVD;EGWC,cJZG;;AIcP;EACI,cJfG;EIgBH;;AACA;EACI,WRjBG;EQkBH;;AAGR;ERXA;EACA,WANS;EAOT;EACA;EACA,OKdG;;ALeH;EACI,OKhBD;;AGwBH;EACI,SJ1BG;;AI2BH;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AACA;EACI;EACA;;AAMhB;EACI;EACA;EACA;;ARRJ;EACI;EACA;EACA;EACA;EACA,WA5CM;EA6CN;EACA;EACA;;AACA;EACI;;;ASjDJ;EACI;EACA;EACA;EACA;EACA,cLPD;EKQC,eLRD;;AKUK;EACI;EACA;;AAKZ;EACI;EACA,WTjBE;ESkBF;EACA;EACA;EACA,OJtBL;EIuBK;EACA;EACA;EACA;;AACA;EACI;;AAIR;EACI;EACA,WTjCE;ESkCF;;AAGJ;ET5BJ;EACA,WANS;EAOT;EACA;EACA,OKdG;;ALeH;EACI,OKhBD;;;APcP;AYfA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AACA;EVaJ;EACA,WAlBa;EAmBb;;AUXA;EAEI;EACA;EACA;EACA;EACA;;AVsBJ;EACI;EACA;EACA;EACA;EACA,WA5CM;EA6CN;EACA;EACA;;AACA;EACI;;;AU5BZ;ELjBI;EKmBA;EACA;;AACA;EVhBA;EACA,WANS;EAOT;EACA;EACA,OKdG;EK4BC;;AVbJ;EACI,OKhBD;;AK8BH;EACI;;AACA;EVXJ;EACA,WAlBa;EAmBb;;AUaA;EAEI;EACA;EACA;EACA;;AVDJ;EACI;EACA;EACA;EACA;EACA,WA5CM;EA6CN;EACA;EACA;;AACA;EACI;;;AWnDZ;EACI;EACA;ENIA;;AMFA;EXOA;EACA,WANS;EAOT;EACA;EACA,OKdG;EMKC;EACA;;AXSJ;EACI,OKhBD;;AMUC;EXAJ;EACA,WANS;EAOT;EACA;EACA,OKdG;EMYK;;AXGR;EACI,OKhBD;;AMeC;EXMJ;EACA,WAlBa;EAmBb;EWNQ;;AAGJ;EXCJ;EACA,WAlBa;EAmBb;EWDQ;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AXOR;EACI;EACA;EACA;EACA;EACA,WA5CM;EA6CN;EACA;EACA;;AACA;EACI;;AWZR;EACI;;;ACvCJ;EACI;;AAEI;EACI;;AACA;EZ6BZ;EACA;EACA,WAjCW;;AYMH;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;;AAKZ;EZPZ;EACA,WA1BU;EA2BV,OK7BG;EL8BH;EYMgB;;AAGJ;EACI;;AAGJ;EZtBZ;EACA,WAlBa;EAmBb;;;AavBA;EACI;;AAEI;EACI;;AACA;Eb6BZ;EACA;EACA,WAjCW;;AaMH;EACI;EACA;EACA;EACA;;AAEI;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAKZ;EbPZ;EACA,WAlBa;EAmBb;EaOgB;;AAGJ;EACI;EACA;EACA;EACA;;AbGhB;EACI;EACA;EACA;EACA;EACA,WA5CM;EA6CN;EACA;EACA;;AACA;EACI","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/styles.scss","../scss/global/_fonts.scss","../scss/global/variables/_layout.scss","../scss/global/variables/_typography.scss","../scss/global/_typography.scss","../scss/global/_global.scss","../scss/partials/_header.scss","../scss/global/variables/_colors.scss","../scss/partials/_footer.scss","../scss/partials/_carousel.scss","../scss/partials/_articles.scss","../scss/partials/_articles_teaser.scss","../scss/_home.scss","../scss/_fullpage.scss","../scss/_gouvernance.scss","../scss/_partenaires.scss"],"names":[],"mappings":"AAAA;ACAA;AAEA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;AAEA;EACI;EACA;EAEA;EACA;;ACtCJ;ACHA;AAQA;ACRA;EACI;;;ACDJ;EACI;;;ALOJ;AMPA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AACA;EACI,cJxBb;EIyBa;EACA;;AACA;EAJJ;IAKQ;;;AAIZ;EAdJ;IAeQ;;;AAGR;EACI;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAIZ;EAlBJ;IAmBQ;;;AAGR;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA,WHnEV;;AGoEU;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI,kBC9Ef;;ADgFW;EACI;EACA,kBClFf;;ADsFG;EA5BJ;IA6BQ;;;AAGR;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBC3GrB;;AD6GiB;EACI;;AAIZ;EAzBJ;IA0BQ;;;AAIJ;EACI;EACA;EACA;EACA,kBC5HP;ED6HO;EACA;EACA;EACA;;AACA;EACI,WHjIT;EGkIS;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA,kBCtKP;EDuKO;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA,OC7Lf;;AD+LW;EACI;EACA,OCjMf;;ADoMO;EACI;;AAEJ;EAvCJ;IAwCQ;IACA;IACA;;;AAGR;EACI;EACA;;;AElNpB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AAEJ;EANJ;IAOQ;;;AAGR;EACI;;AACA;EACI;EACA;;AAEJ;EANJ;IAOQ;IACA;;;AAGR;EA3BJ;IA4BQ;IACA,cNrCL;;;AMwCH;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,ODpDX;ECqDW,WLvDT;EKwDS;EACA;EACA;;AAEJ;EAVJ;IAWQ;IACA;;;AAGR;EAlBJ;IAmBQ;IACA;;;AAIR;EACI;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDrFrB;;ACuFiB;EACI;;AAIZ;EArBJ;IAsBQ;IACA;IACA,eNhGT;;;AMqGH;EA9FJ;IA+FQ;;;AAGR;EAzGJ;IA0GQ;;;;AC1GR;EFMI;EEJA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AACA;EACI;EACA;;AAOpB;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,OF/BH;;AEiCD;EACI;;AAIZ;EAEI;EACA;EACA;;ANDJ;EACI;EACA;EACA;EACA;EACA,WA5CM;EA6CN;EACA;EACA;EACA;;AACA;EACI;;AAGR;EACI,kBIxDK;;;AGAb;EHMI;EGJA;EACA;EACA;;AACA;EPiBA;EACA,WAlBa;EAmBb;;AOhBA;EACI,WPRO;EOSP;EACA,OHVD;EGWC,cRZG;;AQcP;EACI,cRfG;EQgBH;;AACA;EACI,WPjBG;EOkBH;;AAGR;EPXA;EACA,WANS;EAOT;EACA;EACA,OIdG;;AJeH;EACI,OIhBD;;AGwBH;EACI,SR1BG;;AQ2BH;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AACA;EACI;EACA;;AAMhB;EACI;EACA;EACA;;APRJ;EACI;EACA;EACA;EACA;EACA,WA5CM;EA6CN;EACA;EACA;EACA;;AACA;EACI;;AAGR;EACI,kBIxDK;;;AIEL;EACI;EACA;EACA;EACA;EACA,cTPD;ESQC,eTRD;;ASUK;EACI;EACA;;AAKZ;EACI;EACA,WRjBE;EQkBF;EACA;EACA;EACA,OJtBL;EIuBK;EACA;EACA;EACA;;AACA;EACI;;AAIR;EACI;EACA,WRjCE;EQkCF;;AAGJ;ER5BJ;EACA,WANS;EAOT;EACA;EACA,OIdG;;AJeH;EACI,OIhBD;;;APcP;AYfA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AACA;ETaJ;EACA,WAlBa;EAmBb;;ASXA;EAEI;EACA;EACA;EACA;EACA;;ATsBJ;EACI;EACA;EACA;EACA;EACA,WA5CM;EA6CN;EACA;EACA;EACA;;AACA;EACI;;AAGR;EACI,kBIxDK;;;AKuBb;ELjBI;EKmBA;EACA;;AACA;EThBA;EACA,WANS;EAOT;EACA;EACA,OIdG;EK4BC;;ATbJ;EACI,OIhBD;;AK8BH;EACI;;AACA;ETXJ;EACA,WAlBa;EAmBb;;ASaA;EAEI;EACA;EACA;EACA;;ATDJ;EACI;EACA;EACA;EACA;EACA,WA5CM;EA6CN;EACA;EACA;EACA;;AACA;EACI;;AAGR;EACI,kBIxDK;;;AMAb;EACI;EACA;ENIA;;AMFA;EVOA;EACA,WANS;EAOT;EACA;EACA,OIdG;EMKC;EACA;;AVSJ;EACI,OIhBD;;AMUC;EVAJ;EACA,WANS;EAOT;EACA;EACA,OIdG;EMYK;;AVGR;EACI,OIhBD;;AMeC;EVMJ;EACA,WAlBa;EAmBb;EUNQ;;AAGJ;EVCJ;EACA,WAlBa;EAmBb;EUDQ;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AVOR;EACI;EACA;EACA;EACA;EACA,WA5CM;EA6CN;EACA;EACA;EACA;;AACA;EACI;;AAGR;EACI,kBIxDK;;AMuCT;EACI;;AAEJ;EA1CJ;IA2CQ;IACA;IACA;IACA;;;AAEJ;EAhDJ;IAiDQ;IACA;;;;ACjDJ;EACI;;AAEI;EACI;;AACA;EX6BZ;EACA;EACA,WAjCW;;AWMH;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;;AAKZ;EXPZ;EACA,WA1BU;EA2BV,OI7BG;EJ8BH;EWMgB;EACA;;AAGJ;EACI;;AAGJ;EXvBZ;EACA,WAlBa;EAmBb;;AWwBY;EAnCJ;IAoCQ;;EACA;IACQ;IACA;IACA;;EAGR;IACI;;EAGJ;IACI;;;;AC5DpB;EACI;;AAEI;EACI;;AACA;EZ6BZ;EACA;EACA,WAjCW;;AYMH;EACI;EACA;EACA;EACA;;AAEI;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAKZ;EZPZ;EACA,WAlBa;EAmBb;EYOgB;;AAGJ;EACI;EACA;EACA;EACA;;AZGhB;EACI;EACA;EACA;EACA;EACA,WA5CM;EA6CN;EACA;EACA;EACA;;AACA;EACI;;AAGR;EACI,kBIxDK","file":"styles.css"} \ No newline at end of file diff --git a/web/themes/erabletheme/scss/_fullpage.scss b/web/themes/erabletheme/scss/_fullpage.scss index e9308e1..2537f92 100644 --- a/web/themes/erabletheme/scss/_fullpage.scss +++ b/web/themes/erabletheme/scss/_fullpage.scss @@ -40,4 +40,14 @@ .views-row { margin-bottom: 8vh; } + @media (min-width: $breakpoint_tablet) { + margin-top: 10vh; + padding-top: 0; + width: 75vw; + margin-left: 12.5vw; + } + @media (min-width: $breakpoint_desktop) { + width: 50vw; + margin-left: 25vw; + } } diff --git a/web/themes/erabletheme/scss/_gouvernance.scss b/web/themes/erabletheme/scss/_gouvernance.scss index ab9230b..24e4345 100644 --- a/web/themes/erabletheme/scss/_gouvernance.scss +++ b/web/themes/erabletheme/scss/_gouvernance.scss @@ -36,6 +36,7 @@ > div:nth-of-type(2) { @include sous_titre(); margin-bottom: 2vh; + align-self: center; } > div:nth-of-type(3) { @@ -45,6 +46,22 @@ > div:last-of-type { @include main_text_content(); } + @media (min-width: $breakpoint_tablet) { + grid-template-columns: 10vw 1fr; + > div:first-of-type > div { + width: 10vw; + height: 10vw; + border-radius: 5vw; + } + + > div:nth-of-type(2) { + padding-left: 3vw; + } + + > div:last-of-type { + padding-left: 3vw; + } + } } diff --git a/web/themes/erabletheme/scss/global/variables/_layout.scss b/web/themes/erabletheme/scss/global/variables/_layout.scss index 4fccefc..238a768 100644 --- a/web/themes/erabletheme/scss/global/variables/_layout.scss +++ b/web/themes/erabletheme/scss/global/variables/_layout.scss @@ -1,2 +1,7 @@ $x_margin: 3vw; -$y_margins: 2vh; \ No newline at end of file +$y_margins: 2vh; + +/* BREAKPOINTS */ + +$breakpoint_tablet: 960px; +$breakpoint_desktop: 1280px; \ No newline at end of file diff --git a/web/themes/erabletheme/scss/global/variables/_typography.scss b/web/themes/erabletheme/scss/global/variables/_typography.scss index 03797bc..a84370e 100644 --- a/web/themes/erabletheme/scss/global/variables/_typography.scss +++ b/web/themes/erabletheme/scss/global/variables/_typography.scss @@ -48,8 +48,12 @@ $title_size: 2.3rem; background-color: white; border: solid 2px $fluo_green; padding: 9px 18px; + transition: background-color 0.3s ease; svg { display: none; } } + a:hover { + background-color: $fluo_green; + } } \ No newline at end of file diff --git a/web/themes/erabletheme/scss/partials/_footer.scss b/web/themes/erabletheme/scss/partials/_footer.scss index af760b9..fb6fcc6 100644 --- a/web/themes/erabletheme/scss/partials/_footer.scss +++ b/web/themes/erabletheme/scss/partials/_footer.scss @@ -5,75 +5,105 @@ box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); margin-top: 50px; padding: 0 $x_margin; - #footer_left div { - margin-top: 5px; - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: nowrap; - #block-erabletheme-logorep { - max-width: 30vw; - img { - width: 100%; - height: auto; - } - } - #block-erabletheme-logoepau { - max-width: 50vw; - img { - width: 100%; - height: auto; - } - } - } - #footer_section { - display: flex; - width: 100%; - justify-content: space-between; - align-items: center; - margin-top: 10px; - margin-bottom: 20px; - position: relative; - #footer_center { - padding-left: 2vw; - width: 50%; - nav ul { - display: flex; - justify-content: space-between; - li a { - color: $dark_green; - font-size: $sm_font_size; - font-family: 'Marianne', sans-serif; - font-weight: 800; - text-decoration: underline; + #footer_middle { + #footer_left > div { + margin-top: 5px; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: nowrap; + #block-erabletheme-logorep { + width: 30vw; + img { + width: 100%; + height: auto; + } + @media (min-width: $breakpoint_tablet) { + width: 10vw; } } - } - - #footer_right { - width: 30%; - #block-erabletheme-socialmedialinks-2 ul { - display: flex; - justify-content: space-between; - li a { - span { - font-weight: lighter; - font-size: 1.4rem; - width: 2.2rem; - height: 2.2rem; - padding: 0.4rem; - border-radius: 1.1rem; - color: white; - background-color: $teal; - } - svg.ext { - background-color: red; - display: none; - } + #block-erabletheme-logoepau { + width: 50vw; + img { + width: 100%; + height: auto; + } + @media (min-width: $breakpoint_tablet) { + width: 15vw; + padding-left: 2vw; } } + @media (min-width: $breakpoint_tablet) { + width: 25vw; + padding-left: $x_margin; + } + } + #footer_section { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + margin-top: 10px; + margin-bottom: 20px; + position: relative; + #footer_center { + padding-left: 2vw; + width: 50%; + nav ul { + display: flex; + justify-content: space-between; + li a { + color: $dark_green; + font-size: $sm_font_size; + font-family: 'Marianne', sans-serif; + font-weight: 800; + text-decoration: underline; + } + @media (min-width: $breakpoint_tablet) { + width: 50vw; + padding: 0 15vw; + } + } + @media (min-width: $breakpoint_tablet) { + padding-left: 0; + width: auto; + } + } + + #footer_right { + width: 30%; + #block-erabletheme-socialmedialinks-2 ul { + display: flex; + justify-content: space-between; + li a { + span { + font-weight: lighter; + font-size: 1.4rem; + width: 2.2rem; + height: 2.2rem; + padding: 0.4rem; + border-radius: 1.1rem; + color: white; + background-color: $teal; + } + svg.ext { + display: none; + } + } + } + @media (min-width: $breakpoint_tablet) { + width: 25vw; + padding-left: 15vw; + padding-right: $x_margin; + } + } + + } + @media (min-width: $breakpoint_tablet) { + display: flex; } - } - + @media (min-width: $breakpoint_tablet) { + padding: 0; + } } \ No newline at end of file diff --git a/web/themes/erabletheme/scss/partials/_header.scss b/web/themes/erabletheme/scss/partials/_header.scss index f91f1b2..7035e0b 100644 --- a/web/themes/erabletheme/scss/partials/_header.scss +++ b/web/themes/erabletheme/scss/partials/_header.scss @@ -17,7 +17,7 @@ flex-wrap: nowrap; justify-content: space-between; #block-erabletheme-logorepublique { - max-width: 15vw; + width: 15vw; a { display: flex; align-items: center; @@ -25,31 +25,102 @@ padding-left: $x_margin; height: auto; width: 100%; + @media (min-width: $breakpoint_desktop) { + padding-right: 1.5vw; + } } } + @media (min-width: $breakpoint_desktop) { + width: 10vw; + } } #block-erabletheme-logoerable { - max-width: 30vw; - a { - display: flex; - align-items: center; - img { - height: auto; + max-height: 100%; + width: 20vw; + > div { + width: auto; + a { width: 100%; - padding-top: 3px; - padding-bottom: 3px; + display: flex; + align-items: center; + justify-content: center; + img { + height: 100%; + width: auto; + padding-top: 3px; + padding-bottom: 3px; + } } } + @media (min-width: $breakpoint_desktop) { + width: 10vw; + } } #block-erabletheme-navigationprincipale { display: none; + ul { + width: 60vw; + display: flex; + height: 100%; + align-items: center; + justify-content: space-around; + padding: 0 5vw; + li { + font-family: 'Marianne', sans-serif; + font-size: $m_font_size; + a { + font-weight: 800; + padding: 4px 6px; + color: black; + background-color: rgba(255, 255, 255, 0); + transition: background-color 0.3s ease; + } + a:hover { + background-color: $fluo_green; + } + a.is-active { + font-weight: 400; + background-color: $fluo_green; + } + } + } + @media (min-width: $breakpoint_desktop) { + display: block; + } } #block-erabletheme-socialmedialinks { + width: 7vw; + margin: 0 calc((20vw - (7vw + 7vh)) / 2); display: none; + ul { + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + li a { + span { + font-weight: lighter; + font-size: 1.4rem; + width: 2.2rem; + height: 2.2rem; + padding: 0.4rem; + border-radius: 1.1rem; + color: white; + background-color: $teal; + } + svg.ext { + display: none; + } + } + } + @media (min-width: $breakpoint_desktop) { + display: block; + } } #block-erabletheme-header { #hamburger { - width: 4rem; + cursor: pointer; + width: 7vh; height: 100%; background-color: $fluo_green; display: flex; @@ -114,6 +185,12 @@ font-family: 'Marianne', sans-serif; font-weight: 800; padding: 4px 6px; + background-color: rgba(255, 255, 255, 0); + transition: background-color 0.3s ease, color 0.3s ease; + } + a:hover { + background-color: white; + color: $dark_green; } a.is-active { background-color: white; @@ -123,6 +200,11 @@ li.visible { opacity: 1; } + @media (min-width: $breakpoint_desktop) { + width: 25vw; + right: 0; + left: auto; + } } ul.active { padding: 30px 0;