sammyette
2dbd201e1e
* website: add padding to home page * docs: slight touch ups to readme * website: reword/reformat content on home and getting started page * website: fix docs page layout - the sidenav for doc pages looks the same as the navbar. - it will be hidden by default on mobile. - sidenav looks like the navbar on mobile and is more seamless in general * docs: update description, logo, dont center badges * docs: fix badges * website: fix padding * website: add borders, add margins for sidenav * website: update description on homepage * website: add margins for blog list * chore: use new logo * docs: use logo and text combined for readme * docs: make logo bigger * website: use combined logo and text asset * docs: remove hilbish-text asset * website: fix navbar expand button * website: add more padding on doc pages * website(blog): add post about website improvements * website(blog): add post about website improvements * website: add more detail on the install page * website: add screenshots section * docs: fix up screenshots section * docs: remove toc and image alignment
2.4 KiB
| title | date | draft |
|---|---|---|
| Improving Hilbish's Branding | 2023-04-13T22:15:31-04:00 | 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:
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.