mirror of
https://github.com/Hilbis/Hilbish
synced 2025-05-06 04:13:24 +00:00
50 lines
6.7 KiB
HTML
50 lines
6.7 KiB
HTML
<!doctype html>
|
||
<html class="bg-stone-50 dark:bg-neutral-950 text-black dark:text-white"><head><meta content="width=device-width, initial-scale=1.0" name="viewport"><link href="/tailwind.css" rel="stylesheet"><title>Hilbish</title><meta content="#ff89dd" name="theme-color"><meta content="./hilbish-flower.png" property="og:image"><meta content="Hilbish" property="og:title"><meta content="Hilbish" property="og:site_name"><meta content="website" property="og:type"><meta content="Something Unique. Hilbish is the new interactive shell for Lua fans. Extensible, scriptable, configurable: All in Lua." property="og:description"><meta content="Something Unique. Hilbish is the new interactive shell for Lua fans. Extensible, scriptable, configurable: All in Lua." name="description"><meta content="Lua,Shell,Hilbish,Linux,zsh,bash" name="keywords"><meta content="https://rosettea.github.io/Hilbish/versions/new-website" property="og:url"></head><body><nav class="flex sticky top-0 w-full z-50 border-b border-b-zinc-300 backdrop-blur-md h-12"><div class="flex my-auto px-2"><div><a class="flex items-center gap-1" href="/"><img class="h-6" src="/hilbish-flower.png"><span class="self-center text-2xl">Hilbish</span></a></div></div></nav><div class="flex flex-col"><div class="block sm:hidden h-10 sticky top-12 flex py-2 px-4 border-b border-b-zinc-300 w-full gap-2 backdrop-blur-sm bg-zinc-300/50 z-50"><label class="cursor-pointer" for="sidebar-toggle"><tag><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" class="fill-black"><path d="M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z"/></svg></tag></label><span>Improving Hilbish's Branding</span></div><div class="grid sm:flex"><input class="peer hidden" id="sidebar-toggle" type="checkbox"><div class="border-r border-r-zinc-300 col-start-1 row-start-1 sticky top-22 sm:top-12 h-full sm:h-svh bg-neutral-200 basis-3/5 transition-transform duration-300 -translate-x-full sm:translate-x-0 peer-checked:translate-x-0 z-30"><div class="p-4 -mb-4 overflow-y-auto h-full"><h2 class="text-xl font-semibold mb-4">Sidebar</h2><ul><li class="mb-2">Lunacolors</li><li class="mb-2">Introduction</li><li class="mb-2">Completions</li><li class="mb-2">Frequently Asked Questions</li><li class="mb-2">Getting Started</li><li class="mb-2">Options</li><li class="mb-2">Features</li><li class="mb-2">Runner Mode</li><li class="mb-2">Notification</li><li class="mb-2">Signals</li><li class="mb-2">Signal</li><li class="mb-2">Command</li><li class="mb-2">Hilbish</li><li class="mb-2">Vim Mode</li><li class="mb-2">Actions</li><li class="mb-2">Module bait</li><li class="mb-2">Module terminal</li><li class="mb-2">API</li><li class="mb-2">Module fs</li><li class="mb-2">Module commander</li><li class="mb-2">Module snail</li><li class="mb-2">Module hilbish.aliases</li><li class="mb-2">Module hilbish.abbr</li><li class="mb-2">Module hilbish</li><li class="mb-2">Module hilbish.userDir</li><li class="mb-2">Module hilbish.messages</li><li class="mb-2">Module hilbish.runner</li><li class="mb-2">Module hilbish.history</li><li class="mb-2">Module hilbish.jobs</li><li class="mb-2">Module hilbish.editor</li><li class="mb-2">Module hilbish.module</li><li class="mb-2">Module hilbish.os</li><li class="mb-2">Module hilbish.completion</li><li class="mb-2">Module hilbish.timers</li><li class="mb-2">Module dirs</li><li class="mb-2">Nature</li><li class="mb-2">Module doc</li></ul></div></div><main class="col-start-1 row-start-1 transition-all duration-300 peer-checked:filter peer-checked:blur-sm peer-checked:bg-black/30 px-4 pt-2"><h1>Improving Hilbish's Branding</h1><Tag xmlns="namespace"><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>
|
||
<h1>Logo</h1>
|
||
<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>
|
||
<h1>Website</h1>
|
||
<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>
|
||
<h1>Padding</h1>
|
||
<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>
|
||
<h1>Docs Navigation</h1>
|
||
<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>
|
||
<h1>Other Changes</h1>
|
||
<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></Tag></main></div></div><footer class="py-4 px-6 flex flex-row justify-around border-t border-t-zinc-300"><div class="flex flex-col"><a class="flex items-center gap-1" href="/"><img class="h-24" src="/hilbish-flower.png"><span class="self-center text-6xl">Hilbish</span></a><span class="text-xl">The Moon-powered shell!</span><span class="text-light text-neutral-500">MIT License, copyright sammyette 2025</span></div><div class="flex flex-col"><a href="https://github.com/Rosettea/Hilbish"><span class="text-pink-300 text-light">GitHub</span></a></div></footer></body></html> |