I recently found the website of Berkeley Graphics and absolutely fell in love with their sitemap. Unfortunately I have no idea how to even create a sitemap in the first place, but it made me realize there was still no navigation on my website (a topic I wanted to adress since quite some time). So before adding a sitemap, that should be done (in my opinion).

Without having much of a clue about website design, let the googling begin!

I was lucky have amazing google skills and found this stackoverflow question. Jackpot! So you can put some html in the export script and it gets added everywhere? Sounds easy enough and acutally works like a charm. Of course there is no CSS, so it looks like shit, but the functionality is there:

W3-schools is always a great place to lookup how to do things in css and html and also in this case there are nice examples. Few things, that became apparent:

/* No linebreaks */
display: block
/* No underlines on the links */
text-decoration: none;
/* Change things on hover */
li: hover{...}

That combined with color and background-color gets you pretty far already, but while experimenting I came to the conclusion, that the massive background does not fit my style. Looking back at the website, that made me want to work on my own one again, Berkeley Graphics, I came to the conclusion, that I liked their choice of having a solid black border with no background. It makes the elements look less massive, especially since this website is mostly text and there are no full-width images embedded.

This was mostly trial-and-error: There should be borders, the text be black and the background white. Adjust padding and border width until it looks good enough. No deeper meaning in any of the values.

And then on hover it should invert everything: Black background, white border, white text. The white borders are kind of optional, since the background of the website is already white, but it does change the apparent size of the block, so I think I prefer it this way.

The final code looks like this:

#navbar > ul{
    margin: 0;
    padding: 0;
    flex-direction: row;
    overflow: hidden;
    width: 100%;
}
#navbar > ul li {
    display: inline-block;
    text-align: center;
    padding: 2px 20px;
    text-decoration: none;
    background-color: white;
    border-color: black;
    border:2px solid;
}

#navbar > ul li a {
    color: black;
    text-decoration: none;
    text-align: center;
}

#navbar > ul li:hover{
    color: white;
    border-color: white;
    background-color: black;
}
#navbar > ul li:hover a {
    color: white;
}

That can also be found on the website-setup main article, but there it might change in the future whereas this block is static.

One thing, that is still missing is to differentiate the currently "active branch", e.g. if you are on the main page it should highlight "home". I am not sure how/if this can be achieved with the basic static html preamble. Maybe it needs a more complex solution like organizing the content of the website in subdirectories and running some elisp script on export to mark the "active" item? That sounds doable in principle, but also like more work I am currently willing to put into as I am not sure how important that feature really is to me. For that reason the plan right now is to wait until I discover an easier solution by accident and ignore the problem in the meantime.

Now that the navbar looks decent, there should be at least a horizontal rule separating it from the main body. I am too lazy today, but it should not be too hard.