Ensure content flows and stays centered on small screens (#27)

* Ensure content flows and stays centered on small screens

Fixes #18

* Do not overflow image, instead resize with page

* update CHANGELOG

Signed-off-by: Xe Iaso <me@xeiaso.net>

---------

Signed-off-by: Xe Iaso <me@xeiaso.net>
Co-authored-by: Xe Iaso <me@xeiaso.net>
This commit is contained in:
Dennis ten Hoove 2025-03-20 22:19:45 +01:00 committed by GitHub
parent c88775bb8a
commit d1512a1f79
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 16 additions and 21 deletions

View file

@ -19,7 +19,6 @@ templ base(title string, body templ.Component) {
display: flex;
justify-content: center;
align-items: center;
width: 65ch;
margin-left: auto;
margin-right: auto;
}
@ -165,13 +164,13 @@ templ index() {
<div class="centered-div">
<img
id="image"
width="256"
style="width:100%;max-width:256px;"
src={ "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" +
anubis.Version }
/>
<img
style="display:none;"
width="256"
style="width:100%;max-width:256px;"
src={ "/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" +
anubis.Version }
/>
@ -201,7 +200,7 @@ templ errorPage(message string) {
<div class="centered-div">
<img
id="image"
width="256"
style="width:100%;max-width:256px;"
src={ "/.within.website/x/cmd/anubis/static/img/sad.webp?cacheBuster=" + anubis.Version }
/>
<p>{ message }.</p>