From 30bde665e2cd2f9d1f2b3ed55e00e557bce99c43 Mon Sep 17 00:00:00 2001
From: Julien Pradet <julien@occitech.fr>
Date: Sat, 23 Mar 2019 10:17:11 +0100
Subject: [PATCH 1/3] Display sponsor description only for platinium level
 sponsors

---
 site/content/components/sponsor/index.md      |  28 ++---
 site/content/modules/call-to-action.md        |  15 +++
 site/content/modules/sponsors/index.md        |  12 +-
 site/content/pages/sponsors/index.md          |  39 +++---
 site/layouts/partials/sponsors/sponsor.html   |  22 ++--
 site/layouts/shortcodes/sponsor.html          |   1 +
 site/layouts/shortcodes/sponsors-section.html |   2 +
 src/css/main.css                              |   1 +
 src/css/modules/call-to-action.css            |  17 +++
 src/css/pages/sponsors.css                    | 117 +++++++++++++-----
 src/js/app.js                                 |   2 -
 src/js/pages/sponsors.js                      |  74 -----------
 12 files changed, 175 insertions(+), 155 deletions(-)
 create mode 100644 site/content/modules/call-to-action.md
 create mode 100644 src/css/modules/call-to-action.css
 delete mode 100644 src/js/pages/sponsors.js

diff --git a/site/content/components/sponsor/index.md b/site/content/components/sponsor/index.md
index 2bb30b15..4ae1bddf 100644
--- a/site/content/components/sponsor/index.md
+++ b/site/content/components/sponsor/index.md
@@ -9,7 +9,7 @@ Ce composant permet l’affichage des informations relatives à un sponsor. Il e
 
 ---
 
-## Platine
+## Sponsor Platine
 
 {{< example >}}
     {{% sponsor
@@ -25,7 +25,7 @@ Et elit reprehenderit ut cillum non magna aliquip aliqua eu pariatur in aute ali
     {{% /sponsor %}}
 {{< /example >}}
 
-## Or
+## Sponsor Or
 
 {{< example >}}
     {{% sponsor
@@ -34,14 +34,12 @@ Et elit reprehenderit ut cillum non magna aliquip aliqua eu pariatur in aute ali
         logo="acme.jpg"
         logoResizeOptions="300x"
         siteUrl="#"
+        hideDescription="true"
     %}}
-Eu culpa cupidatat mollit magna reprehenderit exercitation in. Officia tempor consequat velit minim Lorem eu nostrud. Enim do aute sunt nulla non et dolor. **Nulla incididunt** pariatur ullamco quis do et irure mollit esse eiusmod.
-
-Et elit reprehenderit ut cillum non magna aliquip aliqua eu pariatur in aute aliqua reprehenderit. Culpa ut ut ullamco anim. Labore in velit laboris Lorem. Culpa ea proident incididunt pariatur incididunt culpa. Quis officia ea enim ea Lorem esse commodo nostrud proident esse in tempor incididunt. Qui ullamco eiusmod aute ut cillum eiusmod exercitation.
     {{% /sponsor %}}
 {{< /example >}}
 
-## Argent
+## Sponsor Argent
 
 {{< example >}}
     {{% sponsor
@@ -50,37 +48,35 @@ Et elit reprehenderit ut cillum non magna aliquip aliqua eu pariatur in aute ali
         logo="acme.jpg"
         logoResizeOptions="300x"
         siteUrl="#"
+        hideDescription="true"
     %}}
-Eu culpa cupidatat mollit magna reprehenderit exercitation in. Officia tempor consequat velit minim Lorem eu nostrud. Enim do aute sunt nulla non et dolor. **Nulla incididunt** pariatur ullamco quis do et irure mollit esse eiusmod.
-
-Et elit reprehenderit ut cillum non magna aliquip aliqua eu pariatur in aute aliqua reprehenderit.
     {{% /sponsor %}}
 {{< /example >}}
 
-## Bronze
+## Sponsor Orateurs
 
 {{< example >}}
     {{% sponsor
-        niveau="bronze"
+        niveau="autre"
         name="ACME Corp"
         logo="acme.jpg"
         logoResizeOptions="300x"
         siteUrl="#"
+        hideDescription="true"
     %}}
-Eu culpa cupidatat mollit magna reprehenderit exercitation in. Officia tempor consequat velit minim Lorem eu nostrud. Enim do aute sunt nulla non et dolor. **Nulla incididunt** pariatur ullamco quis do et irure mollit esse eiusmod.
     {{% /sponsor %}}
 {{< /example >}}
 
-## Autre
+## Sponsor Bronze
 
 {{< example >}}
     {{% sponsor
-        niveau="autre"
+        niveau="bronze"
         name="ACME Corp"
         logo="acme.jpg"
         logoResizeOptions="300x"
         siteUrl="#"
+        hideDescription="true"
     %}}
-Eu culpa cupidatat mollit magna reprehenderit exercitation in. Officia tempor consequat velit minim Lorem eu nostrud. Enim do aute sunt nulla non et dolor. **Nulla incididunt** pariatur ullamco quis do et irure mollit esse eiusmod.
     {{% /sponsor %}}
-{{< /example >}}
\ No newline at end of file
+{{< /example >}}
diff --git a/site/content/modules/call-to-action.md b/site/content/modules/call-to-action.md
new file mode 100644
index 00000000..cf87a205
--- /dev/null
+++ b/site/content/modules/call-to-action.md
@@ -0,0 +1,15 @@
+---
+title: "Call to action"
+menu: "modules"
+---
+
+<hr />
+<section class="call-to-action">
+  <div class="call-to-action__content">
+    <p>Vous partagez nos valeurs, et vous souhaitez profiter d'une visibilité auprés de professionnels du web ?</p>
+  </div>
+  <div class="call-to-action__actions">
+    <a href="#" class="btn">Soutenez Paris Web</a>
+  </div>
+</section>
+<hr />
\ No newline at end of file
diff --git a/site/content/modules/sponsors/index.md b/site/content/modules/sponsors/index.md
index 0989fa2f..bf7143b4 100644
--- a/site/content/modules/sponsors/index.md
+++ b/site/content/modules/sponsors/index.md
@@ -22,6 +22,7 @@ Ce module permet l’affichage d’un ensemble de [sponsors]({{< relref "compone
   title="Sponsors Or"
   niveau="or"
   logoResizeOptions="200x"
+  hideDescription="true"
 >}}
 {{< /example >}}
 
@@ -30,22 +31,25 @@ Ce module permet l’affichage d’un ensemble de [sponsors]({{< relref "compone
   title="Sponsors Argent"
   niveau="argent"
   logoResizeOptions="200x"
+  hideDescription="true"
 >}}
 {{< /example >}}
 
 {{< example >}}
 {{< sponsors-section
-  title="Sponsors Bronze"
-  niveau="bronze"
+  title="Sponsors Autre"
+  niveau="autre"
   logoResizeOptions="200x"
+  hideDescription="true"
 >}}
 {{< /example >}}
 
 {{< example >}}
 {{< sponsors-section
-  title="Sponsors Autre"
-  niveau="autre"
+  title="Sponsors Bronze"
+  niveau="bronze"
   logoResizeOptions="200x"
+  hideDescription="true"
 >}}
 {{< /example >}}
 
diff --git a/site/content/pages/sponsors/index.md b/site/content/pages/sponsors/index.md
index 25358e2c..48b5fe75 100644
--- a/site/content/pages/sponsors/index.md
+++ b/site/content/pages/sponsors/index.md
@@ -1,47 +1,54 @@
 ---
-title: "Ils nous soutiennent"
+title: "Sponsors"
 linktitle: "Nos partenaires"
 menu: "pages"
 layout: "page"
 ---
 
-Paris-Web met tous les ans tout en œuvre pour fournir une conférence de la meilleure qualité au meilleur prix. Et pour cela nous recevons l'aide de nos partenaires et soutiens.
-
-En échange d’une grande visibilité sur nos supports de communication, les partenaires nous fournissent les ressources qui nous manquent pour améliorer la qualité de l’évènement, et nous permettre de fournir plus de services aux personnes qui participent, et aux autres.
-
-**Vous désirez nous soutenir ?** Téléchargez le [dossier de partenariat pour Paris Web 2018](dossier de partenariat pour Paris Web 2018) et contactez-nous à l'adresse [partenariats@paris-web.fr](mailto:partenariats@paris-web.fr).
+Paris Web met tous Ies ans tout en æuvre pour fournir une conférence de Ia meilleure qualité au meilleur prix. Et pour cela, nous recevons ['aide de nos partenaires et soutiens. En échange d'une grande visibilité sur nos supports de communication, Ies partenaires nous fournissent Ies ressources qui nous manquent pour améliorer Ia qualité de I'événement, et nous permettre de fournir plus de services aux personnes qui participent, et aux autres.
 
 {{< sponsors-section
   title="Sponsor platine"
   niveau="platine"
   logoResizeOptions="600x"
 >}}
-
 {{< sponsors-section
-  title="Sponsors Or"
+  title="Partenaires Or"
   niveau="or"
   logoResizeOptions="450x"
+  hideDescription="true"
 >}}
-
 {{< sponsors-section
-  title="Sponsors Argent"
+  title="Partenaires Argent"
   niveau="argent"
   logoResizeOptions="350x"
+  hideDescription="true"
 >}}
-
 {{< sponsors-section
-  title="Sponsors Bronze"
-  niveau="bronze"
+  title="Partenaires Orateurs"
+  niveau="autre"
   logoResizeOptions="220x"
+  hideDescription="true"
 >}}
-
+<hr />
+<section class="call-to-action">
+  <div class="call-to-action__content">
+    <p>Vous partagez nos valeurs, et vous souhaitez profiter d'une visibilité auprés de professionnels du web ?</p>
+  </div>
+  <div class="call-to-action__actions">
+    <a href="#" class="btn">Soutenez Paris Web</a>
+  </div>
+</section>
+<hr />
 {{< sponsors-section
-  title="Autres Soutiens"
-  niveau="autre"
+  title="Partenaires Bronze"
+  niveau="bronze"
   logoResizeOptions="220x"
+  hideDescription="true"
 >}}
 
 
+
 <h2 class="separation">Soutenez Paris Web !</h2>
 
 Paris Web est un événement annuel unique à Paris : des conférences et des ateliers organisés par et pour les gens qui font le web dans un soucis de qualité et d'accessibilité. Vous partagez nos valeurs, et vous souhaitez profiter d’une visibilité auprès de professionnels du web ?
diff --git a/site/layouts/partials/sponsors/sponsor.html b/site/layouts/partials/sponsors/sponsor.html
index 6ae19b2c..dcf5ba7d 100644
--- a/site/layouts/partials/sponsors/sponsor.html
+++ b/site/layouts/partials/sponsors/sponsor.html
@@ -1,16 +1,18 @@
 <div class="sponsor sponsor--{{ .Scratch.Get "niveau" }}">
   <div class="sponsor__logo">
-    <img width="{{ replace (.Scratch.Get "logoWidth") "x" "px" }}" src="{{ .Scratch.Get "logo" }}" alt="" />
+    <img src="{{ .Scratch.Get "logo" }}" alt="{{ if eq (.Scratch.Get "hideDescription") "true" }}{{- .Scratch.Get "name" -}}{{ end }}" />
   </div>
-  <div class="sponsor__description">
-    <h3>{{- .Scratch.Get "name" -}}</h3>
+  {{ if not (eq (.Scratch.Get "hideDescription") "true") }}
+    <div class="sponsor__description">
+      <h3>{{- .Scratch.Get "name" -}}</h3>
 
-    <div class="sponsor__content">
-      {{ (.Scratch.Get "description") | markdownify }}
-    </div>
+      <div class="sponsor__content">
+        {{ (.Scratch.Get "description") | markdownify }}
+      </div>
 
-    <a class="sponsor__link" href="{{- .Scratch.Get "siteUrl" -}}">
-      {{- .Scratch.Get "name" -}}
-    </a>
-  </div>
+      <a class="sponsor__link" href="{{- .Scratch.Get "siteUrl" -}}">
+        {{- .Scratch.Get "name" -}}
+      </a>
+    </div>
+  {{ end }}
 </div>
\ No newline at end of file
diff --git a/site/layouts/shortcodes/sponsor.html b/site/layouts/shortcodes/sponsor.html
index 7b24ef66..990f7e00 100644
--- a/site/layouts/shortcodes/sponsor.html
+++ b/site/layouts/shortcodes/sponsor.html
@@ -2,6 +2,7 @@
 {{ $logo := (.Get "logo" | .Page.Resources.GetMatch).Resize $resizeOptions }}
 
 {{ .Scratch.Set "name" (.Get "name") }}
+{{ .Scratch.Set "hideDescription" (.Get "hideDescription") }}
 {{ .Scratch.Set "logo" $logo.Permalink }}
 {{ .Scratch.Set "description" .Inner }}
 {{ .Scratch.Set "siteUrl" (.Get "siteUrl") }}
diff --git a/site/layouts/shortcodes/sponsors-section.html b/site/layouts/shortcodes/sponsors-section.html
index a1ab54c8..37454b61 100644
--- a/site/layouts/shortcodes/sponsors-section.html
+++ b/site/layouts/shortcodes/sponsors-section.html
@@ -1,5 +1,6 @@
 {{ $niveau := .Get "niveau" }}
 {{ $resizeOptions := .Get "logoResizeOptions" }}
+{{ $hideDescription := .Get "hideDescription" }}
 <div class="sponsor-section sponsor-section--{{ $niveau }}">
   <h2 class="separation">{{ .Get "title" }}</h2>
 
@@ -21,6 +22,7 @@ <h2 class="separation">{{ .Get "title" }}</h2>
       {{ .Scratch.Set "description" .Params.description }}
       {{ .Scratch.Set "siteUrl" .Params.siteUrl }}
       {{ .Scratch.Set "niveau" $niveau }}
+      {{ .Scratch.Set "hideDescription" $hideDescription }}
       {{ partial "sponsors/sponsor" . }}
     {{ end }}
   </div>
diff --git a/src/css/main.css b/src/css/main.css
index 679a0587..63cb963d 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -26,6 +26,7 @@
 @import "components/tag.css";
 @import "components/table.css";
 @import "components/video.css";
+@import "modules/call-to-action.css";
 @import "modules/direct-link.css";
 @import "modules/orateurs.css";
 @import "modules/footer.css";
diff --git a/src/css/modules/call-to-action.css b/src/css/modules/call-to-action.css
new file mode 100644
index 00000000..0068b0d0
--- /dev/null
+++ b/src/css/modules/call-to-action.css
@@ -0,0 +1,17 @@
+.call-to-action__actions {
+  text-align: center;
+}
+
+@media screen and (min-width: 60ch) {
+  .call-to-action {
+    display: flex;
+    align-items: center;
+  }
+  .call-to-action__actions {
+    text-align: right;
+    min-width: 20ch;
+  }
+  .call-to-action__actions > :last-child {
+    margin-right: 0;
+  }
+}
diff --git a/src/css/pages/sponsors.css b/src/css/pages/sponsors.css
index 5e04e382..d4b78647 100644
--- a/src/css/pages/sponsors.css
+++ b/src/css/pages/sponsors.css
@@ -1,3 +1,7 @@
+.sponsor-section {
+  margin-bottom: 3rem;
+}
+
 .sponsor-section--platine .sponsor__logo {
   max-width: calc(100% / 12 * 10);
 }
@@ -19,15 +23,20 @@
   max-height: 8rem;
 }
 
-.sponsor--bronze .sponsor__logo,
 .sponsor--autre .sponsor__logo {
   max-width: 33%;
 }
-.sponsor--bronze .sponsor__logo img,
 .sponsor--autre .sponsor__logo img {
   max-height: 5rem;
 }
 
+.sponsor--bronze .sponsor__logo {
+  max-width: 25%;
+}
+.sponsor--bronze .sponsor__logo img {
+  max-height: 4rem;
+}
+
 .sponsor {
   margin-top: calc(var(--base-spacing) * 8);
   margin-bottom: calc(var(--base-spacing) * 8);
@@ -37,7 +46,13 @@
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
-  object-position: bottom left;
+  object-position: center;
+}
+.sponsor--or .sponsor__description,
+.sponsor--argent .sponsor__description,
+.sponsor--bronze .sponsor__description,
+.sponsor--autre .sponsor__description {
+  display: none;
 }
 .sponsor__description h3 {
   margin-top: calc(var(--base-spacing) * 2);
@@ -58,6 +73,7 @@
   .sponsor-section__sponsors {
     display: flex;
     flex-wrap: wrap;
+    align-items: stretch;
     margin-left: calc(var(--base-spacing) * -4);
     margin-right: calc(var(--base-spacing) * -4);
   }
@@ -77,41 +93,72 @@
     border-right: none;
   }
 
+  .sponsor__description h3 {
+    margin-top: 0;
+  }
+  .sponsor__logo {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .sponsor__logo img {
+    object-position: center;
+  }
   .sponsor-section--platine .sponsor__logo {
+    height: auto;
     max-width: 67%;
+    margin: 0 auto;
   }
   .sponsor-section--or .sponsor__logo {
     max-width: 50%;
   }
-  .sponsor-section--argent .sponsor-section__sponsors > *,
-  .sponsor-section--bronze .sponsor-section__sponsors > *,
-  .sponsor-section--autre .sponsor-section__sponsors > * {
-    width: 50%;
+  .sponsor-section--argent .sponsor__logo,
+  .sponsor-section--bronze .sponsor__logo,
+  .sponsor-section--autre .sponsor__logo {
+    max-width: 80%;
   }
-  .sponsor-section--argent .sponsor-section__sponsors > :nth-child(3n),
-  .sponsor-section--bronze .sponsor-section__sponsors > :nth-child(3n),
-  .sponsor-section--autre .sponsor-section__sponsors > :nth-child(3n) {
-    border-right: none;
+  .sponsor-section--or .sponsor__logo {
+    margin: 0 auto;
+  }
+  .sponsor-section--argent .sponsor-section__sponsors > * {
+    width: 50%;
   }
   .sponsor-section--argent .sponsor__logo {
-    max-width: calc(100% / 12 * 10);
+    margin: 0 auto;
+  }
+  .sponsor-section--bronze .sponsor-section__sponsors > *,
+  .sponsor-section--autre .sponsor-section__sponsors > * {
+    width: 33.3%;
   }
   .sponsor-section--bronze .sponsor__logo,
   .sponsor-section--autre .sponsor__logo {
-    max-width: 50%;
+    margin: 0 auto;
+  }
+  .sponsor-section--argent .sponsor-section__sponsors > :nth-child(2n),
+  .sponsor-section--bronze .sponsor-section__sponsors > :nth-child(3n),
+  .sponsor-section--autre .sponsor-section__sponsors > :nth-child(3n),
+  .sponsor-section--argent .sponsor-section__sponsors > :last-child,
+  .sponsor-section--bronze .sponsor-section__sponsors > :last-child,
+  .sponsor-section--autre .sponsor-section__sponsors > :last-child {
+    border-right: none;
   }
 }
 
 @media screen and (min-width: 44em) {
   .sponsor--platine {
     display: flex;
+    align-items: stretch;
   }
   .sponsor--platine .sponsor__logo {
-    width: 33%;
+    display: flex;
+    align-items: center;
+    height: 100%;
     padding-right: calc(var(--base-spacing) * 4);
   }
   .sponsor--platine .sponsor__logo img {
-    object-position: top right;
+    max-height: 12rem;
+    height: 100%;
+    object-position: center;
   }
   .sponsor--platine .sponsor__description {
     width: 67%;
@@ -122,33 +169,37 @@
     width: 50%;
     border-right: 2px solid var(--color-ui-02);
   }
-  .sponsor-section--or .sponsor-section__sponsors > :nth-child(2n) {
+  .sponsor-section--or .sponsor-section__sponsors > :nth-child(2n),
+  .sponsor-section--or .sponsor-section__sponsors > :last-child {
     border-right: none;
   }
-  .sponsor-section--or .sponsor__logo {
-    max-width: calc(67% - calc(var(--base-spacing) * 4));
+  .sponsor-section--or .sponsor__logo,
+  .sponsor-section--argent .sponsor__logo,
+  .sponsor-section--bronze .sponsor__logo,
+  .sponsor-section--autre .sponsor__logo {
+    max-width: 70%;
   }
 
-  .sponsor-section--argent .sponsor-section__sponsors > *,
-  .sponsor-section--bronze .sponsor-section__sponsors > *,
-  .sponsor-section--autre .sponsor-section__sponsors > * {
+  .sponsor-section--argent .sponsor-section__sponsors > * {
     width: 33%;
   }
-  .sponsor-section--argent .sponsor-section__sponsors > :nth-child(2n),
-  .sponsor-section--bronze .sponsor-section__sponsors > :nth-child(2n),
-  .sponsor-section--autre .sponsor-section__sponsors > :nth-child(2n) {
+  .sponsor-section--autre .sponsor-section__sponsors > * {
+    width: 25%;
+  }
+  .sponsor-section--bronze .sponsor-section__sponsors > * {
+    width: 20%;
+  }
+  .sponsor-section--argent .sponsor-section__sponsors > :nth-child(n),
+  .sponsor-section--bronze .sponsor-section__sponsors > :nth-child(n),
+  .sponsor-section--autre .sponsor-section__sponsors > :nth-child(n) {
     border-right: 2px solid var(--color-ui-02);
   }
   .sponsor-section--argent .sponsor-section__sponsors > :nth-child(3n),
-  .sponsor-section--bronze .sponsor-section__sponsors > :nth-child(3n),
-  .sponsor-section--autre .sponsor-section__sponsors > :nth-child(3n) {
+  .sponsor-section--bronze .sponsor-section__sponsors > :nth-child(4n),
+  .sponsor-section--autre .sponsor-section__sponsors > :nth-child(5n),
+  .sponsor-section--argent .sponsor-section__sponsors > :last-child,
+  .sponsor-section--bronze .sponsor-section__sponsors > :last-child,
+  .sponsor-section--autre .sponsor-section__sponsors > :last-child {
     border-right: none;
   }
-  .sponsor-section--argent .sponsor__logo {
-    max-width: calc(67% - calc(var(--base-spacing) * 4));
-  }
-  .sponsor-section--bronze .sponsor__logo,
-  .sponsor-section--autre .sponsor__logo {
-    max-width: calc(50% - calc(var(--base-spacing) * 4));
-  }
 }
diff --git a/src/js/app.js b/src/js/app.js
index b39f780a..307d05b7 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -8,12 +8,10 @@
 import "./util/polyfill";
 import initTypography from "./util/typography";
 import initNavigation from "./pages/nav";
-import initSponsorSections from "./pages/sponsors";
 import initPresentations from "./pages/presentations";
 import initVideos from "./pages/video";
 
 initTypography();
 initNavigation();
-initSponsorSections();
 initPresentations();
 initVideos();
diff --git a/src/js/pages/sponsors.js b/src/js/pages/sponsors.js
deleted file mode 100644
index 09362445..00000000
--- a/src/js/pages/sponsors.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import debounce from "../util/debounce";
-
-const getSizesByLines = section => {
-  const sponsors = section.querySelectorAll(".sponsor-section__sponsors > *");
-
-  const sizeMap = [];
-  for (var i = 0; i < sponsors.length; i++) {
-    const sponsor = sponsors[i];
-    const image = sponsor.querySelector(".sponsor__logo img");
-    sizeMap.push({
-      element: image,
-      bbox: sponsor.getBoundingClientRect(),
-      imageHeight: image.getBoundingClientRect().height
-    });
-  }
-
-  const sponsorByLines = sizeMap.reduce((lines, sponsor) => {
-    const heightId = Math.ceil(sponsor.bbox.top);
-    if (!lines[heightId]) {
-      lines[heightId] = {
-        elements: [],
-        height: 0
-      };
-    }
-
-    lines[heightId].elements.push(sponsor.element);
-    lines[heightId].height = Math.max(
-      lines[heightId].height,
-      Math.ceil(sponsor.imageHeight)
-    );
-
-    return lines;
-  }, {});
-
-  return sponsorByLines;
-};
-
-const recalculateSize = section => {
-  const sponsorByLines = getSizesByLines(section);
-
-  Object.keys(sponsorByLines)
-    .map(key => sponsorByLines[key])
-    .forEach(({ height, elements }) => {
-      elements.forEach(element => (element.style.height = `${height}px`));
-    });
-};
-
-const reinitializeSizes = () => {
-  const images = document.querySelectorAll(
-    ".sponsor-section__sponsors .sponsor__logo img"
-  );
-
-  for (var i = 0; i < images.length; i++) {
-    images[i].style.removeProperty("height");
-  }
-};
-
-const recalculateAllSizes = () => {
-  requestAnimationFrame(() => {
-    reinitializeSizes();
-    const sponsorSections = document.querySelectorAll(".sponsor-section");
-
-    for (var i = 0; i < sponsorSections.length; i++) {
-      recalculateSize(sponsorSections[i]);
-    }
-  });
-};
-
-const initSponsorSections = () => {
-  recalculateAllSizes();
-  window.addEventListener("resize", debounce(recalculateAllSizes, 100));
-};
-
-export default initSponsorSections;

From a9d8cae228b3599a0393997775be1b89d5cf3b42 Mon Sep 17 00:00:00 2001
From: Julien Pradet <julien@occitech.fr>
Date: Sat, 23 Mar 2019 18:41:45 +0100
Subject: [PATCH 2/3] Apply Joachim's suggestions

---
 src/css/pages/sponsors.css | 43 +++++++++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/css/pages/sponsors.css b/src/css/pages/sponsors.css
index d4b78647..c994b242 100644
--- a/src/css/pages/sponsors.css
+++ b/src/css/pages/sponsors.css
@@ -1,3 +1,10 @@
+:root {
+  --sponsor-or-height: 160px;
+  --sponsor-argent-height: 140px;
+  --sponsor-autre-height: 120px;
+  --sponsor-bronze-height: 100px;
+}
+
 .sponsor-section {
   margin-bottom: 3rem;
 }
@@ -13,34 +20,37 @@
   max-width: 67%;
 }
 .sponsor--or .sponsor__logo img {
-  max-height: 10rem;
+  max-height: var(--sponsor-or-height);
 }
 
 .sponsor--argent .sponsor__logo {
   max-width: 50%;
 }
 .sponsor--argent .sponsor__logo img {
-  max-height: 8rem;
+  max-height: var(--sponsor-argent-height);
 }
 
 .sponsor--autre .sponsor__logo {
   max-width: 33%;
 }
 .sponsor--autre .sponsor__logo img {
-  max-height: 5rem;
+  max-height: var(--sponsor-autre-height);
 }
 
 .sponsor--bronze .sponsor__logo {
   max-width: 25%;
 }
 .sponsor--bronze .sponsor__logo img {
-  max-height: 4rem;
+  max-height: var(--sponsor-bronze-height);
 }
 
 .sponsor {
   margin-top: calc(var(--base-spacing) * 8);
   margin-bottom: calc(var(--base-spacing) * 8);
 }
+.sponsor__logo {
+  display: block;
+}
 .sponsor__logo img {
   display: block;
   max-width: 100%;
@@ -107,11 +117,28 @@
   .sponsor-section--platine .sponsor__logo {
     height: auto;
     max-width: 67%;
-    margin: 0 auto;
+    margin-bottom: calc(var(--base-spacing) * 2);
+  }
+
+  .sponsor--argent .sponsor__logo img {
+    height: var(--sponsor-argent-height);
+  }
+  .sponsor--autre .sponsor__logo img {
+    height: var(--sponsor-autre-height);
   }
+  .sponsor--bronze .sponsor__logo img {
+    height: var(--sponsor-bronze-height);
+  }
+
   .sponsor-section--or .sponsor__logo {
     max-width: 50%;
   }
+  .sponsor-section--or .sponsor__logo img,
+  .sponsor-section--argent .sponsor__logo img,
+  .sponsor-section--bronze .sponsor__logo img,
+  .sponsor-section--autre .sponsor__logo img {
+    width: 100%;
+  }
   .sponsor-section--argent .sponsor__logo,
   .sponsor-section--bronze .sponsor__logo,
   .sponsor-section--autre .sponsor__logo {
@@ -154,11 +181,13 @@
     align-items: center;
     height: 100%;
     padding-right: calc(var(--base-spacing) * 4);
+    width: 33%;
   }
   .sponsor--platine .sponsor__logo img {
     max-height: 12rem;
     height: 100%;
     object-position: center;
+    width: 100%;
   }
   .sponsor--platine .sponsor__description {
     width: 67%;
@@ -173,6 +202,10 @@
   .sponsor-section--or .sponsor-section__sponsors > :last-child {
     border-right: none;
   }
+  .sponsor--or .sponsor__logo img {
+    height: var(--sponsor-or-height);
+  }
+
   .sponsor-section--or .sponsor__logo,
   .sponsor-section--argent .sponsor__logo,
   .sponsor-section--bronze .sponsor__logo,

From 4f14e62d5ec2eb6d60944cc0cd75cb8602dd17ba Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Sun, 26 Nov 2023 18:21:57 +0100
Subject: [PATCH 3/3] Fix error on build

---
 src/js/styleguide.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/js/styleguide.js b/src/js/styleguide.js
index 3a2a133f..fa688cbb 100644
--- a/src/js/styleguide.js
+++ b/src/js/styleguide.js
@@ -1,5 +1,4 @@
 import initNavigation from "./pages/nav";
-import initSponsorSections from "./pages/sponsors";
 import initPresentations from "./pages/presentations";
 import initVideos from "./pages/video";
 import initToggleContainers from "./pages/toggle";
@@ -7,7 +6,6 @@ import initToggleContainers from "./pages/toggle";
 import initStyleguide from "./styleguide/index.js";
 
 initNavigation();
-initSponsorSections();
 initPresentations();
 initVideos();
 initToggleContainers();