First Refinement of Web Log: Part Three
What changes have been made?
Here now the first projected refinement is closed. While there’s polishing to be done and a new frontier to be envisioned, I’ve gone ahead and added a dark mode switch, in the process destroying the non-JS sanctity of the site (of course JS is already used locally for tasking) and undertaking a significant revamping of the way colours are managed via variables in the sass/scss/css. The dark-mode isn’t working perfectly, broken on the splash page by my decision to add JS that does an ultra-speed rotation through various welcome images.
While this paragraph alone pretty much covers everything, there’s some depth to go into here and I have once again recorded some thoughts to take a look at. The changes are as follows:
- Dark Mode: There is now a fake-hyperlink in the header small-links collection that acts as a button to switch between a light (beautiful) and dark (functional) colour mode.
- Colour Variables: The colours used in the styling of the site are now entirely managed via a set of well-consolidated variables, cribbing heavily from a cool method I discovered.
- Splash Page: Probably the most extravagant (maybe not saying much) addition so far, the splash page now rotates through some welcome images I smashed together as a mind attuner for visits to the log.
While I didn’t make many notes around housekeeping beyond mentioning that housekeeping was done, there’s some good notes on the subject of dark mode and color variables in sass. Let’s now proceed now.
We See Better in the Dark
I often use dark modes on websites and apps, even opting to sometimes use 3rd party plug-ins to similar effect, when my goal in using them is to process text with my eyes and mind. I figured that I would implement a similar feature into my blog, since in production it provides a bunch of interconnected texts for a viewer to read… and not much else. The dark-mode feature has become very popular lately in general, even becoming incorporated into desktop and mobile operating systems rather than being harboured in the web or web browser - it feels like an assimilation, while more complex and weighty, analogous to the incorporation of flux as practically a default accessibility/display setting in most devices and operating system. It seems to coalesce with the great replacement of traditional code/programs with web-focused technologies.
This isn’t a very exact outlining of my method. On top of the fact I ended up using the root to refer my dark and light colourings, I actually am using variables for all my colours. That way the dark mode switch will simply change the very root to a dark class, rewriting the colour variables, and everything trickles down from there.
Using VS Code very nice search feature, I can filter out and check through all the “color” containing properties and see that, while there isn’t much diversity, I have a lot of these defined. I transmute these various unsaturated values and mild variations of teal into the HSLa variable format indicated in the above linked set-up. We’re done - it is that easy. Again, I am basically following this set-up inline linked nearly exactly. It is very excellent and elegant, and my hat is off to Mr. Liu for his walkthrough.
Making a Splash
I will eventually get around to making a very cool and complicated animated vector splash image, but for now I instead built off of what I already had. A bunch of thrown together raster images in slightly dim sepia and bluish tones, looks nice. Looks like it could be seen on the installer of some old mysterious educational CD-ROM package or something. My favourite.
Unfortunately my poor JS skills and laziness mean this is continuously animated, and the process will not stop or pause to perform any other functions. Hence why dark/light mode cannot be toggled on this page, instead will remain set to whatever it was last toggled to - if you wanted to see it in the opposite mode you will have to move to another page to change, then return. The animation simply uses a loop that replaces the appended number on the image filename with a setInterval, and I will have to come up with a more elegant solution at some point - or at least read about JS some more to know what is even going on.
Done, then. There are now interesting modifications and additions that I chose to defer to a future refinement, not least because I need to work on my master website and make a more concerted effort to learn more about being a web-beast, and the end result after this refinement is a web log with much extra functionality and elegance on the surface. Under the hood is messy, and this has to change at some point, please.
What comes to my mind immediately, if it’s bothering me so much? First off the styling isn’t quite right, I want to have more stylized and cool indentation/horizontal displacements going on in the long-narrows of most of the pages. The animations and a lot of things done with cascading style’s sheets are a bit messy and bloated, and I need to quell fears of poor compatibility with old browsers somehow. The gulp script is missing a lot of specifics and is overall a bit clunky in how it shifts images around - in fact I am having a repeated problem where Jekyll, set to build from the gulp task, will not clean up after itself when I stop serving the test site.
I can go on. There’s the splash page, which features rasterized images rather than a cool vector animation. I haven’t attempted to embed or try reaching for a creative code library like p5js or other to have fun with during think hours - there isn’t even a single instance of a canvas element on the site. I have also failed to reform the tagging system, as well as the images folder within the assets folder which is just a big trash mountain with no subdirectory right now. What else? I can go all day. I won’t though, but I will return to blog-enhancement soon.
First I need to blast out my web logs more routinely and prolifically, as I did before I was waylaid with trying to enhance the site rather than its content, after I first put it online in August of the year 2020.