website/sponsors.html: use flexbox for sponsor grid

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>
Signed-off-by: Julien Olivain <ju.o@free.fr>
This commit is contained in:
Thomas Perale
2026-03-25 11:15:16 +01:00
committed by Julien Olivain
parent 35e86cef16
commit 1a2037d2b8
2 changed files with 139 additions and 108 deletions

View File

@@ -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;
}

View File

@@ -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>