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