public inbox for buildroot@busybox.net
 help / color / mirror / Atom feed
From: Thomas Perale via buildroot <buildroot@buildroot.org>
To: buildroot@buildroot.org
Subject: [Buildroot] [PATCH 1/4] website/sponsors.html: use flexbox for sponsor grid
Date: Wed, 25 Mar 2026 11:15:16 +0100	[thread overview]
Message-ID: <20260325101519.77626-1-thomas.perale@mind.be> (raw)

To avoid having to move all the sponsors through the bootstrap 'row'
when adding a new "past sponsor" on top of the current stack, this
commit make the card rely on flexboxes instead of the bootstrap
internals.

This make sure that the body of the card always fit the row height and
the also make sure that the image always fit properly without having to
touch the inline css.

Signed-off-by: Thomas Perale <thomas.perale@mind.be>
---
v1 --> v2: add the flexbox usage and move sense instead of removing

 docs/website/css/sponsors.css |  40 +++++++
 docs/website/sponsors.html    | 207 ++++++++++++++++------------------
 2 files changed, 139 insertions(+), 108 deletions(-)
 create mode 100644 docs/website/css/sponsors.css

diff --git a/docs/website/css/sponsors.css b/docs/website/css/sponsors.css
new file mode 100644
index 0000000000..889737eabd
--- /dev/null
+++ b/docs/website/css/sponsors.css
@@ -0,0 +1,40 @@
+.sponsors-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  align-items: stretch;
+}
+
+.sponsor-entry {
+  flex: 0 0 calc(33.333% - 10px);
+  display: flex;
+  flex-direction: column;
+  min-width: 250px;
+}
+
+.sponsor-entry .panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.sponsor-entry .panel-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.sponsor-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 150px;
+}
+
+.sponsor-title img {
+  max-height: 120px;
+}
+
+.sponsor-body {
+  flex: 1;
+}
diff --git a/docs/website/sponsors.html b/docs/website/sponsors.html
index eef82d2cfa..c15802257e 100644
--- a/docs/website/sponsors.html
+++ b/docs/website/sponsors.html
@@ -1,5 +1,7 @@
 <!--#include file="header.html" -->
 
+<link href="css/sponsors.css" rel="stylesheet">
+
 <div class="container">
 <div class="row nh"><!-- current sponsor row -->
 <div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
@@ -15,29 +17,30 @@
     <div class="panel-body">
       <h3>Gold Sponsors</h3>
 
-	<div class="col-sm-4">
+      <div class="sponsors-container">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-lts-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12" style="height: 150px;">
+	      <div class="sponsor-title">
 		<a href="https://evs.com">
-		  <img class="img-responsive center-block" src="images/evs-logo.png"/>
+		  <img class="img-responsive" src="images/evs-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<a href="http://evs.com">EVS Broadcast Equipment</a>
 	      </div>
 	    </div>
 	  </div>
 	</div>
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-lts-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12" style="height: 150px;">
+	      <div class="sponsor-title">
 		<a href="https://www.openhomefoundation.org/">
-		  <img class="img-responsive center-block" src="images/openhomefoundation-logo.png"/>
+		  <img class="img-responsive" src="images/openhomefoundation-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<a href="https://www.openhomefoundation.org">Open Home
 		Foundation</a>
 	    </div>
@@ -48,22 +51,22 @@
     </div>
     <div class="panel-body">
       <h3>Bronze Sponsors</h3>
-
-	<div class="col-sm-4">
+      <div class="sponsors-container">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-lts-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12" style="height: 150px;">
+	      <div class="sponsor-title">
 		<a href="https://www.sense.com">
 		  <img class="img-responsive center-block" style="width: 100%;" src="images/sense-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<a href="https://www.sense.com">Sense Labs</a>
 	      </div>
 	    </div>
 	  </div>
 	</div>
-
+      </div>
     </div>
     </div>
 
@@ -71,15 +74,16 @@
     <div class="panel-heading">Current sponsors</div>
     <div class="panel-body">
 
-	<div class="col-sm-4">
+      <div class="sponsors-container">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12" style="height: 150px;">
+	      <div class="sponsor-title">
 		<a href="https://www.smile.eu">
-		  <img class="img-responsive center-block" src="images/smile-logo.png"/>
+		  <img class="img-responsive" src="images/smile-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12" style="height: 150px;">
+	      <div class="sponsor-body">
 		<a href="http://www.smile.eu">Smile</a> is sponsoring the
 		Buildroot project by hosting
 		the <a href="https://elinux.org/Buildroot:DeveloperDaysFOSDEM2025">Buildroot
@@ -91,15 +95,15 @@
 	  </div>
 	</div>
 
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12" style="height: 180px;">
+	      <div class="sponsor-title">
 		<a href="http://www.opossom.com/english/index.html">
-		  <img class="img-responsive center-block" src="images/armadeus-systems-logo.png"/>
+		  <img class="img-responsive" src="images/armadeus-systems-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12" style="height: 150px;">
+	      <div class="sponsor-body">
 		<a href="http://www.opossom.com/english/index.html">Armadeus
 		Systems</a> financially sponsored
 		the <a href="/association.html">Buildroot
@@ -108,15 +112,15 @@
 	  </div>
 	</div>
 
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12" style="height: 180px;">
+	      <div class="sponsor-title">
 		<a href="https://www.openhomefoundation.org/">
-		  <img class="img-responsive center-block" src="images/openhomefoundation-logo.png"/>
+		  <img class="img-responsive" src="images/openhomefoundation-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12" style="height: 150px;">
+	      <div class="sponsor-body">
 		<a href="https://www.openhomefoundation.org">Open Home
 		Foundation</a> financially sponsored
 		the <a href="/association.html">Buildroot
@@ -124,6 +128,7 @@
 	    </div>
 	  </div>
 	</div>
+      </div>
 
     </div>
     </div>
@@ -134,16 +139,16 @@
       <p>Throughout its history, the Buildroot project has been sponsored by
 	various companies, that we would like to thank below.</p>
 
-      <div class="row">
-	<div class="col-sm-4">
+      <div class="sponsors-container">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12" style="height: 150px;">
+	      <div class="sponsor-title">
 		<a href="https://www.smile.eu">
-		  <img class="img-responsive center-block" src="images/smile-logo.png"/>
+		  <img class="img-responsive" src="images/smile-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12" style="height: 400px;">
+	      <div class="sponsor-body">
 	        <a href="https://www.smile.eu">Smile</a> provided the
 	        meeting location Buildroot Developers days after
 	        FOSDEM 2023, 2024 and 2025, for the
@@ -157,15 +162,15 @@
 	  </div>
 	</div>
 
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12" style="height: 150px;">
+	      <div class="sponsor-title">
 		<a href="http://www.mind.be">
-		  <img class="img-responsive center-block" src="images/mind-logo.png"/>
+		  <img class="img-responsive" src="images/mind-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12" style="height: 400px;">
+	      <div class="sponsor-body">
 		<a href="http://www.mind.be">Mind</a> sponsored
 		financially the Buildroot Association for the ELCE
 		2018 meeting, sponsored the dinner of the FOSDEM 2014,
@@ -178,14 +183,14 @@
 	  </div>
 	</div>
 
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12" style="height: 150px;">
+	      <div class="sponsor-title">
 		<p><a href="http://www.google.com">
-		    <img class="img-responsive center-block" src="images/google-logo.png"/></a></p>
+		    <img class="img-responsive" src="images/google-logo.png"/></a></p>
 	      </div>
-	      <div class="col-sm-12" style="height: 400px;">
+	      <div class="sponsor-body">
 		<p><a href="http://www.google.com">Google</a> provided
 		  the logistics for the FOSDEM 2013, FOSDEM 2014,
 		  FOSDEM 2015, FOSDEM 2016, FOSDEM 2017, FOSDEM 2018,
@@ -195,18 +200,15 @@
 	    </div>
 	  </div>
 	</div>
-      </div>
-
-      <div class="row">
 
-	<div class="col-sm-4">
-	  <div class="panel panel-default panel-sponsor" style="height: 400px;">
+	<div class="sponsor-entry">
+	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12">
+	      <div class="sponsor-title">
 		<p><a href="https://www.amarulasolutions.com/">
-		    <img class="img-responsive center-block" src="images/amarula-solutions-logo.png"/></a></p>
+		    <img class="img-responsive" src="images/amarula-solutions-logo.png"/></a></p>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<a href="https://www.amarulasolutions.com/">Amarula
 		  Solutions</a> sponsored the <em>Buildroot
 		  Association</em> in 2018.
@@ -215,15 +217,14 @@
 	  </div>
 	</div>
 
-	<div class="col-sm-4">
-	  <div class="panel panel-default panel-sponsor" style="height: 400px;">
+	<div class="sponsor-entry">
+	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12">
+	      <div class="sponsor-title">
 		<p><a href="https://www.bootlin.com/">
-		    <img class="img-responsive center-block" src="images/bootlin-logo.png"/></a></p>
+		    <img class="img-responsive" src="images/bootlin-logo.png"/></a></p>
 	      </div>
-
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<p><a href="http://www.bootlin.com">Bootlin</a>
 		  sponsored financially the Buildroot Association for
 		  the ELCE 2018 meeting, sponsored the meeting
@@ -235,15 +236,15 @@
 	  </div>
 	</div>
 
-	<div class="col-sm-4">
-	  <div class="panel panel-default panel-sponsor" style="height: 400px;">
+	<div class="sponsor-entry">
+	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12">
+	      <div class="sponsor-title">
 		<a href="http://www.logilin.fr">
-		  <img class="img-responsive center-block" src="images/logilin-logo.png"/>
+		  <img class="img-responsive" src="images/logilin-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<a href="http://www.logilin.fr">Logilin</a> sponsored
 		the ELCE 2018 Buildroot Developers meeting by
 		contributing financially to the <em>Buildroot
@@ -254,19 +255,15 @@
 	  </div>
 	</div>
 
-      </div>
-
-      <div class="row">
-
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12">
+	      <div class="sponsor-title">
 		<a href="http://www.tkos.col.il">
-		  <img class="img-responsive center-block" src="images/tkos-logo.png"/>
+		  <img class="img-responsive" src="images/tkos-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<a href="http://www.tkos.co.il">Tk Open Systems</a>
 		sponsored the ELCE 2018 Buildroot Developers meeting
 		by contributing financially to the <em>Buildroot
@@ -276,15 +273,15 @@
 	  </div>
 	</div>
 
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12" style="height: 100px;">
+	      <div class="sponsor-title">
 		<a href="http://www.rockwellcollins.com/">
-		  <img class="img-responsive center-block" src="images/rockwell-collins-logo.png"/>
+		  <img class="img-responsive" src="images/rockwell-collins-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<a href="http://www.rockwellcollins.com">Rockwell
 		Collins</a> sponsored the ELCE 2018 Buildroot
 		Developers meeting by funding the social Saturday
@@ -294,15 +291,15 @@
 	  </div>
 	</div>
 
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12" style="height: 100px;">
+	      <div class="sponsor-title">
 		<a href="http://www.scaleway.com">
-		  <img class="img-responsive center-block" src="images/scaleway-logo.png"/>
+		  <img class="img-responsive" src="images/scaleway-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<a href="https://www.scaleway.com/">Scaleway</a>
 		sponsored the complete logistics to organize our Buildroot
 		Hackathon in Paris in March 2018: meeting room, Internet
@@ -311,17 +308,15 @@
 	    </div>
 	  </div>
 	</div>
-      </div>
 
-      <div class="row">
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12">
+	      <div class="sponsor-title">
 		<p><a href="http://www.imgtec.com/">
-		    <img class="img-responsive center-block" src="images/imgtec-logo.png"/></a></p>
+		    <img class="img-responsive" src="images/imgtec-logo.png"/></a></p>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<a href="http://www.imgtec.com/">Imagination Technologies</a>
 		sponsored the meeting room and dinner of the ELCE 2013
 		Developer Days in Edinburgh, UK.
@@ -330,14 +325,14 @@
 	  </div>
 	</div>
 
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12">
+	      <div class="sponsor-title">
 		<p><a href="http://circuitco.com/">
-		    <img class="img-responsive center-block" src="images/circuitco-logo.png"/></a></p>
+		    <img class="img-responsive" src="images/circuitco-logo.png"/></a></p>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<p><a href="http://circuitco.com/">CircuitCo</a> sponsored
 		  several development boards for the Google Summer of Code
 		  2013 project on Buildroot.</p>
@@ -346,14 +341,14 @@
 	  </div>
 	</div>
 
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12">
+	      <div class="sponsor-title">
 		<p><a href="http://boundarydevices.com/">
-		    <img class="img-responsive center-block" src="images/boundary-devices-logo.png"/></a></p>
+		    <img class="img-responsive" src="images/boundary-devices-logo.png"/></a></p>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<p><a href="http://boundarydevices.com/">BoundaryDevices</a>
 		  sponsored an i.MX6 development board for the Google Summer of
 		  Code 2013 project on Buildroot.</p>
@@ -361,17 +356,15 @@
 	    </div>
 	  </div>
 	</div>
-      </div>
 
-      <div class="row">
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12">
+	      <div class="sponsor-title">
 		<p><a href="http://www.fluendo.com/">
-		    <img class="img-responsive center-block" src="images/fluendo-logo.png"/></a></p>
+		    <img class="img-responsive" src="images/fluendo-logo.png"/></a></p>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<p><a href="http://www.fluendo.com/">Fluendo</a> sponsored the
 		  meeting room for the ELCE 2012 Developer Days in Barcelona
 		  Spain.</p>
@@ -380,14 +373,14 @@
 	  </div>
 	</div>
 
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12">
+	      <div class="sponsor-title">
 		<p><a href="http://www.synopsys.com">
-		    <img class="img-responsive center-block" src="images/synopsys-logo.png"/></a></p>
+		    <img class="img-responsive" src="images/synopsys-logo.png"/></a></p>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<p><a href="http://www.synopsys.com">Synopsys</a> sponsored the
 		  dinner for the ELCE 2012 Developer Days in Barcelona, Spain.</p>
 	      </div>
@@ -395,33 +388,31 @@
 	  </div>
 	</div>
 
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12">
+	      <div class="sponsor-title">
 		<p><a href="http://www.calao-systems.com/">
-		    <img class="img-responsive center-block" src="images/calao-logo.png"/></a></p>
+		    <img class="img-responsive" src="images/calao-logo.png"/></a></p>
 	      </div>
-	      <div class="col-sm-12">
+	      <div class="sponsor-body">
 		<p><a href="http://www.calao-systems.com/">Calao Systems</a>
-		  provided a a meeting room for the ELCE 2009 Developer Days
+		  provided a meeting room for the ELCE 2009 Developer Days
 		  in Grenoble, France.</p>
 	      </div>
 	    </div>
 	  </div>
 	</div>
-      </div>
 
-      <div class="row">
-	<div class="col-sm-4">
+	<div class="sponsor-entry">
 	  <div class="panel panel-default panel-sponsor">
 	    <div class="panel-body">
-	      <div class="col-sm-12" style="height: 150px;">
+	      <div class="sponsor-title">
 		<a href="https://www.tap2open.com">
-		  <img class="img-responsive center-block" src="images/tap2open-logo.png"/>
+		  <img class="img-responsive" src="images/tap2open-logo.png"/>
 		</a>
 	      </div>
-	      <div class="col-sm-12" style="height: 150px;">
+	      <div class="sponsor-body">
 	        <a href="https://www.tap2open.com">Tap2Open</a>
 	        financially sponsored the <a href="/association.html">Buildroot Association</a>
 	        in 2020 and 2023.</div>
-- 
2.53.0

_______________________________________________
buildroot mailing list
buildroot@buildroot.org
https://lists.buildroot.org/mailman/listinfo/buildroot

             reply	other threads:[~2026-03-25 10:15 UTC|newest]

Thread overview: 5+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2026-03-25 10:15 Thomas Perale via buildroot [this message]
2026-03-25 10:15 ` [Buildroot] [PATCH 2/4] website/sponsors.html: move sense to past sponsor Thomas Perale via buildroot
2026-03-25 10:15 ` [Buildroot] [PATCH 3/4] website/sponsors.html: use higher resolution img Thomas Perale via buildroot
2026-03-25 10:15 ` [Buildroot] [PATCH 4/4] website/sponsors.html: add IPComm as a silver sponsor Thomas Perale via buildroot
2026-03-26 20:01 ` [Buildroot] [PATCH 1/4] website/sponsors.html: use flexbox for sponsor grid Julien Olivain via buildroot

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20260325101519.77626-1-thomas.perale@mind.be \
    --to=buildroot@buildroot.org \
    --cc=thomas.perale@mind.be \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body. 
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox