diff --git a/README.md b/README.md index 7feea1d..45a1814 100644 --- a/README.md +++ b/README.md @@ -15,14 +15,23 @@ semantic, accessable, and snappy. - Finalise Content - Add Pages - Software - - About Me - OneBag - Design Choices (for website) - - Recipes -- A blog with RSS + - Living Room + - Kitchen + - Collectables +- Add RSS to blog ## Release Notes +### v0.8.0 + +- Add about page +- Add burger nav +- Change nav links +- Content changes +- Seperate blog into blog/guides/recipes + ### v0.7.0 - Add bulk blog articles (mainly server guide) diff --git a/blog/blog-thoughts-220822.html b/blog/blog-thoughts-220822.html index bef7cc8..88bbbf4 100644 --- a/blog/blog-thoughts-220822.html +++ b/blog/blog-thoughts-220822.html @@ -58,7 +58,7 @@ diff --git a/blog/burger-menu.html b/blog/burger-menu.html new file mode 100644 index 0000000..5459801 --- /dev/null +++ b/blog/burger-menu.html @@ -0,0 +1,62 @@ + + + + + + + + + + + + Hello, Burger menu! + + + +
+

Hello, Burger menu!

+ + +
+ +
+
+ +
+
+

On Friday 18th of November 2022, I released version 0.8.0 of this website. With that a large, and very noticable change occured. The addition of a burger menu.

+ +

What is a burger menu?

+

A burger menu is simply a type of navigational menu. It's typically hidden by default with just a visible icon, but when (the icon is) clicked the navigational content becomes visible, and accessible.

+

Why is it called a burger menu?

+

The name burger/hamburger comes from the appearance of the icon. It consists of 3 horizontal lines, ordered vertically, so at a glance it sort of looks like the top of a bun, a patty, and the bottom of a bun.

+ +

Why add a burger menu?

+

Simple, I wasn't a fan of how the site showed the navigational menu on mobiles. I felt it took up too much of the screen real estate, and the requirement for some users to scroll down to get to the content is terrible design. With the implimentation of the burger menu I believe the site looks much cleaner, with a better user-experience on mobiles. So an overall great success, all without losing any navigational control.

+ +

CSS only

+

Unlike many of the burger menus you'll spot in the wild, the burger menu on my site is written with pure CSS. It makes use of a checkbox input for toggling, so those of you with Javascript disabled can still benefit from the better user experience.

+

The only downside to this is in the case that CSS doesn't load, as there will be a random visible checkbox atop of the navigation.

+ +

What? I don't see it?

+

This could be one of two reasons, your browser isn't small enough (try resizing it), or you've got the old CSS cached. If you've got the old CSS you'll notice the random checkbox I mentioned, try hitting CTRL+F5 to perform a hard-reload.

+ +

Inspiration

+

Like many things, I started by googling similar implementations, and found this snippet by Alvaro. I used this as the starting point, stripping it down, and making my own changes to make it work for my site in a way I liked.

+
+
+ + + + + diff --git a/blog/index.html b/blog/index.html index 0014c88..9a8b762 100644 --- a/blog/index.html +++ b/blog/index.html @@ -38,6 +38,7 @@

2022

Now you officially own, and have setup a server. Currently all you can do is SSH into it though, so let's get some services on there

@@ -126,7 +126,7 @@ diff --git a/guides/index.html b/guides/index.html index ffbf326..5276c81 100644 --- a/guides/index.html +++ b/guides/index.html @@ -39,6 +39,7 @@

2022