From 1ab40bca10dfbd6d1b3f98c15a1e6ddd504b816f Mon Sep 17 00:00:00 2001 From: Alex <72581378+allezalex@users.noreply.github.com> Date: Mon, 3 Nov 2025 17:39:27 +0000 Subject: [PATCH 1/2] Added responsive grid structure: refactor media, partners, and sponsors sections for improved layout and styling; fix spacing in partner descriptions. --- _config.yml | 8 +-- _includes/medias.html | 71 ++--------------------- _includes/partners.html | 78 ++----------------------- _includes/sponsors.html | 63 ++------------------ css/main.scss | 123 +++++++++++++++++++++++++++++++++++++++- 5 files changed, 138 insertions(+), 205 deletions(-) diff --git a/_config.yml b/_config.yml index 01ed257..c779170 100644 --- a/_config.yml +++ b/_config.yml @@ -218,7 +218,7 @@ t: - title: "SDIS 77" url: "https://www.sdis77.fr/" logo: "/img/logo_sdis77.png" - content: "Notre partenaire en Seine&Marne afin de diversifier les tests terrains" + content: "Notre partenaire en Seine & Marne afin de diversifier les tests terrains" height: 75 sponsors: @@ -390,7 +390,7 @@ t: - title: "SDIS 77" url: "https://www.sdis77.fr/" logo: "/img/logo_sdis77.png" - content: "Our partner in Seine&Marne to diversify field tests" + content: "Our partner in Seine & Marne to diversify field tests" height: 75 sponsors: @@ -558,7 +558,7 @@ t: - title: "SDIS 77" url: "https://www.sdis77.fr/" logo: "/img/logo_sdis77.png" - content: "El nostre soci a Seine&Marne per diversificar les proves de camp" + content: "El nostre soci a Seine & Marne per diversificar les proves de camp" height: 75 sponsors: @@ -726,7 +726,7 @@ t: - title: "SDIS 77" url: "https://www.sdis77.fr/" logo: "/img/logo_sdis77.png" - content: "Nuestro socio en Seine&Marne diversificará las pruebas sobre el terreno" + content: "Nuestro socio en Seine & Marne diversificará las pruebas sobre el terreno" height: 75 sponsors: diff --git a/_includes/medias.html b/_includes/medias.html index 2b0c8fa..fab57f4 100644 --- a/_includes/medias.html +++ b/_includes/medias.html @@ -1,67 +1,4 @@
- -
@@ -72,17 +9,17 @@

{{ site.t.[layout.lang].medias.title }}

-
+
{% for media in site.medias.items %} -
+

{{ media.title }} logo

diff --git a/_includes/partners.html b/_includes/partners.html index 003b603..e4900e0 100644 --- a/_includes/partners.html +++ b/_includes/partners.html @@ -1,74 +1,4 @@
- -
@@ -79,17 +9,17 @@

{{ site.t.[layout.lang].partners.title }}

-
+
{% for partner in site.t.[layout.lang].partners.items %} -
+

{{ partner.title }}-logo

diff --git a/_includes/sponsors.html b/_includes/sponsors.html index 4306f0c..b09e1cd 100644 --- a/_includes/sponsors.html +++ b/_includes/sponsors.html @@ -1,59 +1,4 @@
- -
@@ -64,17 +9,17 @@

{{ site.t.[layout.lang].sponsors.title }}

-
+
{% for sponsor in site.t.[layout.lang].sponsors.items %} -
+

{{ sponsor.title }}-logo

diff --git a/css/main.scss b/css/main.scss index 38899fa..57cd565 100644 --- a/css/main.scss +++ b/css/main.scss @@ -42,4 +42,125 @@ $theme-dark: #222; @import "mixins", "base"; body { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; } -h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; } \ No newline at end of file +h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; } + +/* Shared grid + card utilities used by medias / partners / sponsors */ +/* Uses a fixed 3-column grid with responsive breakpoints */ +.grid { + display: grid; + gap: 40px; + margin: 0 auto; + max-width: 1200px; + padding: 0 40px; + grid-template-columns: repeat(3, 1fr); + justify-content: center; +} + +/* Simple grid variation without cards - for media section */ +.grid--simple { + gap: 60px 40px; /* larger vertical gap for better separation */ + padding: 20px 0; +} + +.grid--simple .service-box { + background: none; + box-shadow: none; + border-radius: 0; + padding: 0; +} + +.grid--simple .service-box:hover { + transform: none; +} + +/* Standardized logo sizes for media section */ +.grid--simple .emoji { + height: 80px; /* smaller fixed height for media logos */ + width: 200px; /* standardized width */ + margin: 0 auto 20px; +} + +.grid--simple .emoji img { + width: 100%; + height: 100%; + object-fit: contain; + max-height: 80px; +} + +/* Adjust grid for different screen sizes */ +@media (max-width: 992px) { + .grid { + grid-template-columns: repeat(2, 1fr); + max-width: 800px; + gap: 30px; + } + + .grid--simple { + gap: 50px 30px; + } +} + +@media (max-width: 576px) { + .grid { + grid-template-columns: 1fr; + max-width: 400px; + gap: 30px; + padding: 0 20px; + } + + .grid--simple { + gap: 40px; + } +} + +.grid-item { display: flex; justify-content: center; align-items: stretch; } + +.service-box { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + text-align: center; + width: 100%; + height: 100%; + padding: 30px; + box-sizing: border-box; + background: #fff; + border-radius: 12px; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); + transition: all 0.2s ease-in-out; +} + +/* Create fixed-height container for logos */ +.service-box .emoji { + height: 120px; + display: flex; + align-items: center; + justify-content: center; + margin: 0; +} + +.service-box .emoji img, +.service-box img { + display: block; + width: 140px; /* fixed width */ + height: 100px; /* fixed height */ + object-fit: contain; + margin: 0; +} + +.service-box h3 { margin: 10px 0 8px; min-height: 56px; } +.service-box .text-muted { min-height: 64px; } + +.service-box:hover { + transform: translateY(-4px); + transition: all 0.2s ease-in-out; +} + +@media (max-width: 992px) { + .grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } +} + +@media (max-width: 576px) { + .grid { grid-template-columns: 1fr; } +} \ No newline at end of file From 48036f2550bdbc644b42b5d5b5d5a04b23f7fa83 Mon Sep 17 00:00:00 2001 From: Alex <72581378+allezalex@users.noreply.github.com> Date: Tue, 4 Nov 2025 08:07:22 +0000 Subject: [PATCH 2/2] Added flag SVG and implemented language dropdown functionality - Added SVG for all flags to a new flag directory. - Implemented a language dropdown that remembers the selected language. - The dropdown updates the displayed language and flag based on user selection. - Added event listeners for opening/closing the dropdown and handling clicks outside of it. - Ensured smooth navigation by delaying the page redirect after a language selection. --- _config.yml | 2 +- _includes/nav.html | 29 +- _includes/scripts.html | 3 + _sass/_base.scss | 16 +- css/main.scss | 125 ++++++++ img/catalonia-flag.png | Bin 10466 -> 0 bytes img/flags/en.svg | 9 + img/flags/es-ct.svg | 9 + img/flags/es.svg | 705 +++++++++++++++++++++++++++++++++++++++++ img/flags/fr.svg | 1 + js/lang-dropdown.js | 86 +++++ 11 files changed, 973 insertions(+), 12 deletions(-) delete mode 100644 img/catalonia-flag.png create mode 100644 img/flags/en.svg create mode 100644 img/flags/es-ct.svg create mode 100644 img/flags/es.svg create mode 100644 img/flags/fr.svg create mode 100644 js/lang-dropdown.js diff --git a/_config.yml b/_config.yml index c779170..2f84599 100644 --- a/_config.yml +++ b/_config.yml @@ -450,7 +450,7 @@ t: title: "Follow the Pyronear adventure" content: "To stay updated about our progress or to join the adventure, you can also reach us on social media!" es-ct: - label: es-ct + label: ES-CT icon: "" description: "Detecció precoç d'incendis forestals" buttons: diff --git a/_includes/nav.html b/_includes/nav.html index 48d4439..deeda2e 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -23,17 +23,30 @@
+ + + -