mirror of https://github.com/Hilbis/Hilbish
website(blog): add post about website improvements
parent
07c348cb9a
commit
c7f34be0e7
|
@ -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).
|
||||||
|
|
||||||
|
<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:
|
||||||
|
![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.
|
Loading…
Reference in New Issue