mirror of https://github.com/Hilbis/Hilbish
67 lines
2.4 KiB
Markdown
67 lines
2.4 KiB
Markdown
---
|
|
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).
|
|
|
|
<img src="https://safe.kashima.moe/4c6e9q484pcy.png" width=256>
|
|
<br>
|
|
|
|
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:
|
|
|
|
<img src="https://safe.kashima.moe/oy72vpev2yi4.png" width=256>
|
|
<br>
|
|
|
|
# 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:
|
|
|
|
|
|
and after:
|
|
|
|
|
|
# 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:
|
|
|
|
|
|
and after:
|
|
|
|
|
|
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.
|