hazardous 4
this is the new hazardous website.
content
goodbye categories, hello chaos: i decided to throw it all into one blog soup: projects, personal life, tech blog all in one place.
the audio section has not made its way back from v3.0 hazardous. at first i was leaning towards abandoning it completely, because it took alot of head-scratching to implement everything needed to pipe embedded videos onto a page. however, one of the major updates to the Mecha CMS source code is the implementation of an .embed div class which apparently takes alot of hassle out of that equation. between that and the nginx-side work already being done, it might be very feasible to get it going again.
design
v3.0 hazardous had a red+blue accent reminiscent of the '3-D glasses' aesthetic. this time around, i'm drawing inspiration from the Ayu color palette.
in terms of UI, v3.0 featured alot of soft, fuzzy blurs and shadows. with the current version, i'm looking to swing the other way, sticking with a sharp simplicity - with enough rounded edges here and there to avoid something too brutalist.
typography
older versions of hazardous used the awesome Inter font. it's fantastic, but i felt like changing things up this time around, and went with Public Sans.
aside from the font change itself, i've changed my approach to actually enforcing the use of the font. in the past, i wanted to override the user's typography in almost every case - but with that came an obligation to make sure that the fonts were crisp and legible at any size. with the state of embedded web fonts, it just becomes a large hassle. although CSS standards are being updated and variable fonts are beginning to gain widepsread adoption, it is still a bit more intensive than i would like to implement a gorgeous custom font across my website.
in 2023, the default userland on every major OS includes incredibly crisp and pleasant sans-serif fonts by default, and at times i would have to admit that hazardous looked better when rendered with font-family: system-ui;.
features
whipped up some progress bars, for the front page progress tracking.
<span style='pbo'><span style='pbi-0'></span></span>
<span style='pbo'><span style='pbi-25'></span></span>
<span style='pbo'><span style='pbi-50'></span></span>
<span style='pbo'><span style='pbi-75'></span></span>
<span style='pbo'><span style='pbi-100'></span></span>
obviously you can see the advantages and limitations of my method, but the main goal was to implement something both informative as well as pleasing to the eye. since i am using them to guage rough progress, being able to specify specific percentages wasn't a necessity.
i've seen implementations in which the bar progress can be adjusted with something like <span style='width: 69%'> for a 69% filled bar, but i seem to be missing something when it comes to creating it myself. in the future i would like to tackle this again, to see if i could jank a way to set the percentage and color on-the-fly.
the strongest advantages of the current implementation are that it is CSS only with no JavaScript, and it takes advantage of the span selector which is inferior in some ways to div but plays very nice with my markdown parser when it comes time to serve a page as HTML.
in the future i would like to take advantage of keyframes and such to add animations and some 'bounciness' to the bars.