Style change for the navigation and landing page. Fixed reusability b…

[UnicornDevCraft]

…ased on partials.

Please look at the changes, they are not supposed to break other pages.
Let me know if it's too extreme change.

[benjaoming]

Hello @UnicornDevCraft 👋

Thanks for doing lots of work here ❤️

I've been longing for someone to refine and improve layout. We made a smaller tweak recently to font sizes and made the menu font black. Got a good feeling that spending time on tweaking font sizes, colors and margins could easily pay off.

I need something to be onboard with this PR:

• What is/are the goal(s)? Maybe we can work on it by stating the intentions first, possibly splitting up into separate efforts?
• ...especially, why is Bootstrap introduced? I think that one needs to be an entirely separate decision and discussion.
• This is a replacement of Work in progress landing page #50? Can we close that one?
• I'm not sure I think the additional illustrations fit in. I haven't seen them in context, yet.
• Can you share some screenshots?

The PR doesn't work for me locally, while bootstrap loads, it doesn't seem to work.

I'd love the refactoring into partials to take place in a separate PR, that way they could go in as 100% neutral improvements 👍

[UnicornDevCraft]

Hi @benjaoming 👋

Thanks for the thoughtful feedback!

The main goal of this PR is to show a concept for improving layout and responsiveness. Since this is just a draft, I wanted to get your opinion early on whether you prefer an incremental approach or are open to something more ambitious.

I’ve included screenshots below to help illustrate what’s changed, in case things aren’t rendering correctly locally. If you’re seeing issues, I’d be happy to troubleshoot - feel free to share any error messages or screenshots.

Landing hero section:
Lighter navbar for clarity
Background separation for readability

Intro section, part 1:
Adds structure and visual variety
Assets from unDraw (free commercial license)

Intro section, part 2

End of intro + Map section

Events tab (layout unchanged but inherits new navbar):

Mobile views
Demonstrates responsive navbar and stacked layout
(more mobile screenshots below)

Layout refactor (for modularity):
- Introduced partials/ for nav.html
- _default/single.html conditionally includes:
{{ define "main" }} {{ if .Params.show_landing_page }} {{ partial "landing_page.html" . }} {{ end }} {{ if .Params.show_intro }} {{ partial "intro.html" . }} {{ end }} {{ if .Params.show_hero }} {{ partial "hero.html" . }} {{ end }} {{ end }}
- Controlled with front matter flags:
show_landing_page: True show_intro: True cssClassSuffix: "main"

This approach keeps layouts modular and reusable. The cssClassSuffix parameter allows switching of styles across page types, it's omitted in _index.md.

Bootstrap was introduced to enable mobile-first responsiveness: collapsing navbar and flexible grid layout. Current implementation uses CDN. However Bootstrap files can be served locally from /static/, so we can keep the responsiveness benefits without introducing any third-party asset calls, which means no privacy policy needed.

Let me know:
- Which aspects of the layout and visuals you’d like to keep or discard.
- If you'd prefer splitting this into separate PRs (e.g., layout modularity, Bootstrap, illustrations).
- If you'd like to propose a different design direction - I’m happy to adjust or iterate.

Thanks again for reviewing!

[benjaoming]

THANKS for sharing the screenshots! Very cool to try out reorganizing the content, and I think you've definitely uncovered a way for the landing page to introduce the subject by having the cake and the "happy birthday" message appear un-disturbed on their own 💯

I think I'd prefer to chunk it up slightly, and maybe this order will be the easiest? Let me know what you think?

I was thinking to untangle it in this order:

1. Refactor into partials
2. Add the change to the landing page so that cake and birthday message appear separately like in the first screenshot
3. Mobile responsiveness - discuss whether Bootstrap or not
   • Mobile navigation
   • Floating landing page elements incl. question of stock illustrations or not
   • Responsive event table

[thibaudcolas]

Rebased and cleaned up a bit, @UnicornDevCraft I'm not sure if you plan to work on this further or no?

I think we can keep our current nav as-is, it's basic but does the job. But I really liked the two-column layout you had worked on for the homepage, and how the cake illustration was more visible!

[benjaoming]

@thibaudcolas a lot has happened since this PR! We've been talking about the various things and the nav bar is for instance already updated quite significantly!

Next thing, that we talked about, is the landing page illustration and main message - to put them side-by-side on a big screen.

I think @UnicornDevCraft has a copy of everything here, so I'll close it for now, so it's not confusing.