Modernize html and basic responsiveness

[frankystone]

Fixes #181 (partly)

This is not perfect yet, but it's basically working. There might be some glitches here and there… After testing on alpha this can merged, imho.

What was done so far:

• removed the div's which were used to order the content (still has a lot of div's)
• instead implement modern tags like <header>, <nav>, <main>, <article> and <section>
• most of those new tags have now the property display: flex; which is easy to use and provide the responsiveness
• i gave the headers on dark background a slightly brighter color, so Web design lacks contrast #123 is also partly fixed

The basic layout is like this now:

|----------------------- BODY -------------------------------- |
|                                                              |
| +++++++++++++++++++++ HEADER +++++++++++++++++++++++++++++++ |
| +  logo                                  right_boxes       + |
| ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
|                                                              |
| *********************** NAV ******************************** |
| * home | game | wiki | …                        search     * |
| ************************************************************ |
|                                                              |
| +++++++++++++++++++++++ MAIN +++++++++++++++++++++++++++++++ |
| +                                                          + |
| + *************** ARTICLE ***************  #### ASIDE #### + |
| + * ============= HEADER ============== *  # - SECTION - # + |
| + * =            welcome              = *  # -  polls  - # + |
| + * =================================== *  # ----------- # + |
| + * ------------ SECTION -------------- *  # - SECTION - # + |
| + * - widelands is a free...          - *  # -  events - # + |
| + * -                                 - *  # -         - # + |
| + * -                                 - *  # ----------- # + |
| + * -                                 - *  # - SECTION - # + |
| + * -                                 - *  # -         - # + |
| + * -                                 - *  # -  last   - # + |
| + * -                                 - *  # -  posts  - # + |
| + * -                                 - *  # -         - # + |
| + * -                                 - *  # -         - # + |
| + * -                                 - *  # ----------- # + |
| + * -                                 - *  ############### + |
| + * --------------------------------- - *                  + |
| + * ============= HEADER ============== *                  + |
| + * =              news               = *                  + |
| + * =================================== *                  + |
| + * ------------ SECTION -------------- *                  + |
| + * -              news1              - *                  + |
| + * -                                 - *                  + |
| + * -                                 - *                  + |
| + * --------------------------------- - *                  + |
| + * ------------ SECTION -------------- *                  + |
| + * -              news2              - *                  + |
| + * -                                 - *                  + |
| + * -                                 - *                  + |
| + * -                                 - *                  + |
| + * --------------------------------- - *                  + |
| + ***************************************                  + |
| +                                                          + |
| ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
|                                                              |
| ************************* FOOTER *************************** |
| *                        contact                           * |
| ************************************************************ |
|                                                              |
| ------------------------------------------------------------ |

For a comparison with a small viewport (left now, right this branch):

Further work:

• find a good solution for the navigation bar, maybe something like the w3c example
• for small viewports move the aside block above the article block, so polls, events and latest posts are shown before the article content

[bunnybot]

Mirrored on Codeberg as #CB362.

[bunnybot]

Mirrored from Codeberg
On Thu Jan 16 16:57:33 CET 2025, janus wrote:

---

<@>bunnybot update

[bunnybot]

Mirrored from Codeberg
On Thu Jan 16 17:39:55 CET 2025, janus wrote:

---

<@>bunnybot logs

[bunnybot]

Mirrored from Codeberg
On Thu Jan 16 18:31:11 CET 2025, janus wrote:

---

<@>Nordfriese kannst du mal schauen wo es knirscht?

#446 auf GH