mirror of https://github.com/Hilbis/Hilbish
28 lines
9.4 KiB
HTML
28 lines
9.4 KiB
HTML
|
<!doctype html><html><head><title>Improving Hilbish's Branding — Hilbish</title>
|
||
|
|
<meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name=theme-color content="#ff89dd"><meta content="/Hilbish/hilbish-flower.png" property="og:image"><meta property="og:site_name" content="Hilbish"><meta content="Improving Hilbish's Branding — Hilbish" property="og:title"><meta content="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)." property="og:description"><meta content="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)." name=description><meta name=revisit-after content="2 days"><meta name=keywords content="Lua,Hilbish,Linux,Shell"><meta property="og:locale" content="en_GB"><link rel=canonical href=https://rosettea.github.io/Hilbish/><meta property="og:url" content="https://rosettea.github.io/Hilbish/"><link href=https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css rel=stylesheet integrity=sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor crossorigin=anonymous><script src=https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js integrity=sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2 crossorigin=anonymous></script><link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin=anonymous referrerpolicy=no-referrer><link rel=stylesheet href=/Hilbish/versions/refs/tags/v2.2.0/css/syntax.min.eb77978873f3b324603120b558a36c98ad57d6ee7b77928e3bc131bd76c5935a.css integrity="sha256-63eXiHPzsyRgMSC1WKNsmK1X1u57d5KOO8ExvXbFk1o="></link><style>.heading>.heading-link{opacity:0}.heading:hover>.heading-link{visibility:visible;opacity:1;transition:all .1s ease-in}@keyframes highlight{0%{background:0 0}50%{background:#fff2cf}100%{background:0 0}}div:target{animation:highlight 1.2s;animation-timing-function:cubic-bezier(1,-.02,.45,.89)}table{border-width:1px;border-style:solid;border-color:#565c64;border-collapse:collapse;margin-bottom:12px}table td{padding:5px}table tr{border-width:1px}thead{display:none}</style></head><body class="d-flex flex-column min-vh-100" style=overflow-x:hidden><svg xmlns="http://www.w3.org/2000/svg" style="display:none"><symbol id="check-circle-fill" fill="currentcolor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 110 8a8 8 0 0116 0zm-3.97-3.03a.75.75.0 00-1.08.022L7.477 9.417 5.384 7.323a.75.75.0 00-1.06 1.06L6.97 11.03a.75.75.0 001.079-.02l3.992-4.99a.75.75.0 00-.01-1.05z"/></symbol><symbol id="info-fill" fill="currentcolor" viewBox="0 0 16 16"><path d="M8 16A8 8 0 108 0a8 8 0 000 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194.0.487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703.0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 110-2 1 1 0 010 2z"/></symbol><symbol id="exclamation-triangle-fill" fill="currentcolor" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13.0 00-1.96.0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889.0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535.0.954.462.9.995l-.35 3.507a.552.552.0 01-1.1.0L7.1 5.995A.905.905.0 018 5zm.002 6a1 1 0 110 2 1 1 0 010-2z"/></symbol></svg><header><nav class="navbar navbar-expand-md sticky-top bg-light border-bottom"><div class=container-fluid><a class=navbar-brand href=/Hilbish><img src=/Hilbish/hilbish-logo-and-text.png alt height=48>
|
||
|
|
</a><button class=navbar-toggler type=button data-bs-toggle=collapse data-bs-target=#navbarSupportedContent aria-controls=navbarSupportedContent aria-expanded=false aria-label="Toggle navigation">
|
||
|
|
<span class=navbar-toggler-icon></span></button><div class="collapse navbar-collapse" id=navbarSupportedContent><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class=nav-item><a href=/Hilbish/versions/refs/tags/v2.2.0/ class=nav-link>Home</a></li><li class=nav-item><a href=/Hilbish/versions/refs/tags/v2.2.0/install/ class=nav-link>Install</a></li><li class=nav-item><a href=/Hilbish/versions/refs/tags/v2.2.0/docs/ class=nav-link>Docs</a></li><li class=nav-item><a href=/Hilbish/versions/refs/tags/v2.2.0/blog/ class=nav-link>Blog</a></li></ul></div></div></nav></header><main><div class="container mt-2"><h1>Improving Hilbish's Branding</h1><img src='https://avatars1.githubusercontent.com/u/38820196?s=460&u=b9f4efb2375bae6cb30656d790c6e0a2939327c0&v=4' width=48 style=border-radius:100%>
|
||
|
|
<em class=text-muted>by <strong>sammyette</strong><time> // April 13, 2023</time></em><div class=my-4><p>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).</p><p>I decided to fix up this website and Hilbish’s logo, so that can
|
||
|
|
be thought of as something for the 2 years milestone?</p><h2 id=logo class=heading>Logo
|
||
|
|
<a href=#logo class=heading-link><i class="fas fa-paperclip"></i></a></h2><p>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).</p><img src=https://safe.kashima.moe/4c6e9q484pcy.png width=256><br><p>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:</p><img src=https://safe.kashima.moe/oy72vpev2yi4.png width=256><br><h2 id=website class=heading>Website
|
||
|
|
<a href=#website class=heading-link><i class="fas fa-paperclip"></i></a></h2><p>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.</p><h2 id=padding class=heading>Padding
|
||
|
|
<a href=#padding class=heading-link><i class="fas fa-paperclip"></i></a></h2><p>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.</p><p>Here it is before:<br><img src=https://safe.kashima.moe/nupzzalt2oa4.png alt=Before></p><p>and after:<br><img src=https://safe.kashima.moe/r0ox4nazfi0q.png alt=After></p><h2 id=docs-navigation class=heading>Docs Navigation
|
||
|
|
<a href=#docs-navigation class=heading-link><i class="fas fa-paperclip"></i></a></h2><p>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.</p><p>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:</p><ul><li>Make the doc navigation hidden by default on mobile, just like site wide navigation</li><li>Make doc navigation have the same look as site wide navigation</li></ul><p>Here’s a before:<br><img src=https://safe.kashima.moe/krn0a6qwegdj.png alt></p><p>and after:<br><img src=https://safe.kashima.moe/sk11ighz47yb.png alt></p><p>Looks a lot better now.</p><h2 id=other-changes class=heading>Other Changes
|
||
|
|
<a href=#other-changes class=heading-link><i class="fas fa-paperclip"></i></a></h2><p>If you haven’t noticed, I have made other changes to the website.
|
||
|
|
This includes:</p><ul><li>Borders! Something this simple makes the website look a lot better, especially on mobile.</li><li>More padding and margin everywhere. Home, doc pages, blog post listing.</li></ul></div></div></main><footer class="footer mt-auto mt-auto py-3 bg-light row border-top"><div class="col mb-3"></div><div class="col mb-3"><a href=/Hilbish class="d-flex align-items-center mb-3 link-dark text-decoration-none"><img src=/Hilbish/hilbish-logo-and-text.png alt height=48 class="d-inline-block align-text-top" style=margin-left:-20px></a><ul class="nav flex-column"><li class="nav-item mb-2"><a href=/Hilbish class="nav-link p-0 text-muted">Home</a></li><li class="nav-item mb-2"><a href=/Hilbish/docs/faq class="nav-link p-0 text-muted">FAQ</a></li><li class="nav-item mb-2"><a href=https://github.com/Rosettea/Hilbish class="nav-link p-0 text-muted">Source</a></li><li class="nav-item mb-2"><a href=https://github.com/Rosettea/Hilbish/releases class="nav-link p-0 text-muted">Releases</a></li><li class="nav-item mb-2"><a href=/Hilbish/docs class="nav-link p-0 text-muted">Documentation</a></li></ul></div><div class="col mb-3"></div><div class="col mb-3"></div><div class="col mb-3"></div><div class="col mb-3"><p class="text-muted mt-4">Rosettea © 2022-2023<br>Made with <i class="fa-solid fa-heart" style=color:#f6345b></i></p></div><div class="col mb-3"></div></footer></body></html>
|