search

RemarkWMHA / wmhacoaching

Wheres my head at coaching website
0 stars 0 forks source link

Questions - Phone responsive Hugo themes #8

Closed RemarkWMHA closed 1 week ago

RemarkWMHA commented 1 week ago

Hi,

This is not a task, but a question. When working on the visuals I was wondering if the selected HUGO theme is responsive to other devices or not. Based on this https://discourse.gohugo.io/t/hugo-website-compatiility-with-mobile-tablet/11889/2 the theme is responsive, however then I was wondering that the graphics I add are not.

Is there a way to make the whole page with graphics responsive or would that be too complicated? If it is not possible, I will hold back on the graphics part. :D

nobe4 commented 1 week ago

It is definitely possible!

I proposed an example in https://github.com/RemarkWMHA/wmhacoaching/blob/34e4cd9e4decbef1f61ab5485a2418bb0da17562/content/_index.md?plain=1#L7

This is a bit verbose, but what changed is the content inside the [ ]. It now uses a special tag from the hugo theme: https://github.com/willfaught/paige?tab=readme-ov-file#image

The important bit is width="100%", which says that the image should grow/shrink as much as the page does.

E.g.:

Image Image

Note that you'll have to make sure that graphics are readable at all sizes. In this example I think the text could be made bigger :)

RemarkWMHA commented 1 week ago

I like it! Thank you, I will edit the images with text so they are readable!

Side question: Do you know why the background is black while in the theme it is white? Just curious.

nobe4 commented 1 week ago

Yeah, it's switching based on the computer theme. My computer is all dark, but yours is light I think.

It's configurable via:

color_scheme = "auto" # Must be "auto", "dark", or "light"

Currently it's auto, so it's going to change, but we can set it to light to fix it :)

RemarkWMHA commented 1 week ago

Yes please! :)

nobe4 commented 1 week ago

done: https://github.com/RemarkWMHA/wmhacoaching/commit/c942c72225dc8bb10e797c08019a4108c9024c8d