Hilbish/versions/ci-website-fixes/blog/improving-this-website/index.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&rsquo;s logo, so that can be thought of as something for the 2 years milestone?
Logo Hilbish&rsquo;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&rsquo;s logo, so that can be thought of as something for the 2 years milestone?
Logo Hilbish&rsquo;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/ci-website-fixes/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/ci-website-fixes/ class=nav-link>Home</a></li><li class=nav-item><a href=/Hilbish/versions/ci-website-fixes/install/ class=nav-link>Install</a></li><li class=nav-item><a href=/Hilbish/versions/ci-website-fixes/docs/ class=nav-link>Docs</a></li><li class=nav-item><a href=/Hilbish/versions/ci-website-fixes/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&amp;u=b9f4efb2375bae6cb30656d790c6e0a2939327c0&amp;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&rsquo;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&rsquo;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&rsquo;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&rsquo;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&rsquo;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&rsquo;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 &copy; 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>