From c7f34be0e758d3c205333cc5a7369d787298f756 Mon Sep 17 00:00:00 2001 From: sammyette Date: Thu, 13 Apr 2023 22:44:41 -0400 Subject: [PATCH] website(blog): add post about website improvements --- .../content/blog/improving-this-website.md | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 website/content/blog/improving-this-website.md diff --git a/website/content/blog/improving-this-website.md b/website/content/blog/improving-this-website.md new file mode 100644 index 0000000..0cff464 --- /dev/null +++ b/website/content/blog/improving-this-website.md @@ -0,0 +1,66 @@ +--- +title: "Improving Hilbish's Branding" +date: 2023-04-13T22:15:31-04:00 +draft: false +--- + +Happy birthday Hilbish! As of last month, Hilbish is now 2 years old. +Unfortunately I missed the official date, but I will still make a more +focused post on the date (19st). + +I decided to fix up this website and Hilbish's logo, so that can +be thought of as something for the 2 years milestone? + +# Logo +Hilbish's old logo was.. not that good. It definitely functioned +as a logo, but the yellow part of it looked ugly (sorry old logo). + + +
+ +You would have definitely seen the new logo, since it is currently +in use on the navigation bar and footer. Here it is in a bigger view: + + +
+ +# Website +Ever since this website was first made, from the release of v2.0, it has +been doing it's job of being a website good enough, but there were a few issues. + +# Padding +Padding is very important! The edges of your screen need space to do nothing, +after all. On mobile or screens small enough, there would not be enough space +for the auto margin to fill, and since there was no padding besides that, +it means things would look a bit cramped. This was simple to fix. + +Here it is before: +![Before](https://safe.kashima.moe/nupzzalt2oa4.png) + +and after: +![After](https://safe.kashima.moe/r0ox4nazfi0q.png) + +# Docs Navigation +On the docs page, the pages are on the left on desktop. Since +phones are too small to have this content on the side, it stays at the top. +This is a bit counter intuitive since it brings in extra scrolling +when navigating to every page for docs and just doesn't look that good. + +A few months ago I made it collapse with the site wide navigation, but it +was not hidden by default. So a few improvements were made: +- Make the doc navigation hidden by default on mobile, just like site wide navigation +- Make doc navigation have the same look as site wide navigation + +Here's a before: +![](https://safe.kashima.moe/krn0a6qwegdj.png) + +and after: +![](https://safe.kashima.moe/sk11ighz47yb.png) + +Looks a lot better now. + +# Other Changes +If you haven't noticed, I have made other changes to the website. +This includes: +- Borders! Something this simple makes the website look a lot better, especially on mobile. +- More padding and margin everywhere. Home, doc pages, blog post listing.