<div class="header-image"></div> <table class="table-header"> <thead> <tr> <th colspan="2"></th> </tr> </thead> <tbody> <tr> <td>2025-02-25</td> <td style="text-align: right;"><a href="About.md" class="internal-link">About</a></td> </tr> </tbody> </table> # The Monospace Web  I have a great nostalgia for old technology, including manual typewriters, and things from that era. I had a manual typewriter as a child that I would use very frequently. You could say that I first started learning how to type on that old piece of machinery. That love extends to early computers from the 80s with monochrome monitors, arcade machines (I especially love the old vector graphics games), etc.  I also love the design choices of old technical manuals from the 70s. In those days, if you bought a transistor radio, say, it would generally come with the technical schematics, so you could repair it if a part needed replacing (compare that to the glued together phones and other devices of today!).  Originally, I had designed this blog to look like a typewritten 'zine from back in the day. But I was never really satisfied with it. I mean, it's not exactly genuine. The genuine article would be to actually create a 'zine, but the distribution of it would be a full time job in itself, and does anyone really create 'zines any more? Would anyone even read it? Besides, there was a more fitting design I could emulate: a blog from the 90s! I was already doing that anyway, in spite of the fact that no one really reads or shares blogs any more (do they?). I started looking to different fonts I could use to match the look of mid 90s PCs. One of the first I came across was [Berkeley Mono](https://usgraphics.com/products/berkeley-mono). It's a beautiful font, perfect for what I wanted, actually, but I wasn't willing to put any more money into this, and that one isn't given away for free. So I had to keep looking, but I loved looking through that site. The whole design is an inspiration! I mean look at this:  Beautiful! This is just what I imagined. But I also wanted a more accessible aesthetic. This is a blog, after all, not a technical paper. So I went with a colour scheme that was a little softer, rather than the harsh white-on-black. The darker green that you see now, I thought, kind of looked like the background of old CRT monochrome monitors, which was perfect for what I wanted to do. I kept searching for the right monospace font, and that's when I found [The Monospace Web](https://owickstrom.github.io/the-monospace-web/) site. I fell in love with this design, and I immediately set out to emulate it as best I could (and wouldn't you know it, there was a link to the [US Graphics X account](https://x.com/usgraphics) there at the bottom, too!). The font used, [JetBrains Mono](https://www.jetbrains.com/lp/mono/), was free for personal use, and it was as close to perfect as Berkeley Mono. So with this as my inspiration, I set out to emulate it as best as I could. Jetbrains Mono is hosted at a few different font hosting services, so that was no problem. The tables were next, and this took me a little bit to get right. I have a small markdown table at the top of every page containing the posting date and [About link](../Blog/About). I was reluctant to change that into a hard table with visible borders. I wanted this table to remain as-is, while styling every other table to match the other, monochrome design. This site is powered by Obsidian Publish. Everything is done with Markdown and CSS. This meant I was going to have to create a second CSS class for tables used within a post. I tried for a while to do this while keeping with Markdown, but it proved impossible. I'm not sure if it's just the way Obsidian renders Markdown into HTML, or if it's a condition of Markdown itself, but wrapping Markdown inside HTML just renders the Markdown as plain text. So tables are now written as raw HTML, which isn't ideal, but it works. One benefit, though, is it allows me to get creative and write tables like this, while still keeping the design philosophy: <table> <tr> <th>Header A</th> <th colspan="2" align="right">Large Header B</th> </tr> <tr> <td>Row A</td> <td>Data A</td> <td rowspan="2" align ="center">3rd cell?<br>Data B</td> </tr> <tr> <td colspan="2">Row B</td> </tr> </table> Next was what Obsidian calls "callouts," which is basically a blockquote with a title and icon at the top. I mostly use them for adding updates to posts at a later date, or for quotes. This was much easier, as I didn't need two separate styles. >[!quote] >*"Nothing in this world can take the place of persistence. Talent will not; nothing is more common than unsuccessful men with talent. Genius will not; unrewarded genius is almost a proverb. Education will not; the world is full of educated failures. Persistence and determination alone are omnipotent."* > >&mdash; Calvin Coolidge, 1932 Luckily, the callouts are collapsible by default; I just had to choose a more appropriate shape to inicate it: >[!tip]- Click here >hidden gems The last thing was horizontal rules. I liked the double lines. He has the entire page lined up to a monospace grid, and while I can appreciate the perfection, I didn't feel the need to delve into that sort of accuracy. So it was quite easy to achieve the nice horizontal break: --- As [@owickstrom](https://x.com/owickstrom) states, "lovely." My per-usual in these situations is to keep tinkering, making small changes continually, allowing the look to evolve over time. I'm sure that will be the case here too, but I've definitely settled in nicely for now. It's actually prompted me to rewatch some older movies and television shows just to see how computers were depicted, particularly with how some shows envisioned future tech. Another post on this topic will be inbound... >[!update] Update 2025-03-15 >I have since created a light theme. It breaks the aesthetic a little bit, but I like the softer touch. I may end up trying to soften the dark theme as well, but the monochrome look suits the darker look, in my opinion. Give both a try; tell me what you think. You can find my contact info the [about page](about.md#Contact), including a link to my X account.