[libcamera.org] Fix hero image pushing text off-screen on the landing page

26327 diff mbox series

The CSS does not set the width of the hero image on the landing site. As a
result, the image takes up a constant amount of space, so when the viewport is
narrower than the image width + text width, the text is pushed out of the
viewport. So make the image only use the width of its container.

However, simply setting the width of the <img> to 100% makes the image too
small compared to the text. So give the welcome section a wider max-width to
allow the image more space.

Signed-off-by: Simon Parri <simonparri@ganzeria.com>
---
Hello everyone,

I came across this bug on the libcamera.org landing page.  It's reproducible
(at least in Firefox) by going into responsive design mode (<C-S-m>) and
changing the width to 1200px.  In my fix I tried to make sure that the hero
image looks reasonably-sized proportional to the "Hi, we're libcamera" text.
I also tried to make sure that the text was reasonably right-aligned with the
text in the "About" section.

I couldn't find a repo for the website, so I made a scratch repo and had to
guess at the layout of the files.  I can resend the patch with adjusted
filenames if desired.

 _static/css/myrika-libcamera.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

--
2.51.2

Hi, everyone,

Simon Parri <simonparri@ganzeria.com> writes:
> The CSS does not set the width of the hero image on the landing
> site. As a result, the image takes up a constant amount of space, so
> when the viewport is narrower than the image width + text width, the
> text is pushed out of the viewport. So make the image only use the
> width of its container.

> <snip>

I’d like to bump this, since the bug still is still present, and it’s
quite off-putting when I tell people to read libcamera.org.

> I couldn't find a repo for the website, so I made a scratch repo and
> had to guess at the layout of the files.  I can resend the patch with
> adjusted filenames if desired.

I’m still willing to send a new patch if the current one doesn’t apply
cleanly for whatever reason, or to use a different approach if my
current one is unsatisfactory.

Regards,
--
Simon Parri

Hi Simon,


Quoting Simon Parri (2026-05-23 15:43:27)
> Hi, everyone,
> 
> Simon Parri <simonparri@ganzeria.com> writes:
> > The CSS does not set the width of the hero image on the landing
> > site. As a result, the image takes up a constant amount of space, so
> > when the viewport is narrower than the image width + text width, the
> > text is pushed out of the viewport. So make the image only use the
> > width of its container.
> 
> > <snip>
> 
> I’d like to bump this, since the bug still is still present, and it’s
> quite off-putting when I tell people to read libcamera.org.

Thanks for the bump. We have a separate server and build which
constructs the website at the moment. We've been updating the hosting
infrastructure to figure out how to do things like more modern ansible
builds of the servers to be reproducible.

I've manually reapplied your patch and pushed it to a branch on that
infrastructure to support getting it updated when it can be tested on
the new build system.

--
Thanks

Kieran


> 
> > I couldn't find a repo for the website, so I made a scratch repo and
> > had to guess at the layout of the files.  I can resend the patch with
> > adjusted filenames if desired.
> 
> I’m still willing to send a new patch if the current one doesn’t apply
> cleanly for whatever reason, or to use a different approach if my
> current one is unsatisfactory.
> 
> Regards,
> --
> Simon Parri

On Thu, May 28, 2026 at 12:53:27PM +0100, Kieran Bingham wrote:
> Quoting Simon Parri (2026-05-23 15:43:27)
> > Simon Parri writes:
> > > The CSS does not set the width of the hero image on the landing
> > > site. As a result, the image takes up a constant amount of space, so
> > > when the viewport is narrower than the image width + text width, the
> > > text is pushed out of the viewport. So make the image only use the
> > > width of its container.
> > 
> > > <snip>
> > 
> > I’d like to bump this, since the bug still is still present, and it’s
> > quite off-putting when I tell people to read libcamera.org.
> 
> Thanks for the bump. We have a separate server and build which
> constructs the website at the moment. We've been updating the hosting
> infrastructure to figure out how to do things like more modern ansible
> builds of the servers to be reproducible.
> 
> I've manually reapplied your patch and pushed it to a branch on that
> infrastructure to support getting it updated when it can be tested on
> the new build system.

I've tested the patch, and the result unfortunately doesn't look good
:-( Taking a maximized browser window on my laptop, and resizing it
down, shows the size of the image jumping a the 1200 pixels boundary.
Furthermore, when the width is just above 700 pixels, the image is
extremely small compared to the text.

> > > I couldn't find a repo for the website, so I made a scratch repo and
> > > had to guess at the layout of the files.  I can resend the patch with
> > > adjusted filenames if desired.
> > 
> > I’m still willing to send a new patch if the current one doesn’t apply
> > cleanly for whatever reason, or to use a different approach if my
> > current one is unsatisfactory.