clone url: git://git.m455.casa/m455.casa
html/posts/trying-out-an-early-web-look-for-my-homepage.html
| 1 | <!DOCTYPE html> |
| 2 | <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> |
| 3 | <head> |
| 4 | <meta charset="utf-8" /> |
| 5 | <meta name="generator" content="pandoc" /> |
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> |
| 7 | <title>Trying out an early web look for my homepage</title> |
| 8 | <style> |
| 9 | code{white-space: pre-wrap;} |
| 10 | span.smallcaps{font-variant: small-caps;} |
| 11 | span.underline{text-decoration: underline;} |
| 12 | div.column{display: inline-block; vertical-align: top; width: 50%;} |
| 13 | div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} |
| 14 | ul.task-list{list-style: none;} |
| 15 | </style> |
| 16 | <link rel="stylesheet" href="/assets/archive.css"> |
| 17 | </head> |
| 18 | <body> |
| 19 | <main> |
| 20 | <h2 id="trying-out-an-early-web-look-for-my-homepage">Trying out an early web look for my homepage</h2> |
| 21 | <p>2021-04-18 00:00</p> |
| 22 | <p>You may have noticed that my website looks like an awful 1990s website. This is intentional, and I love it.</p> |
| 23 | <p>I love making silly websites with awful CSS styles, but I have always steered away from doing this on my personal homepage, so today I am trying it out!</p> |
| 24 | <h3 id="living-with-a-smaller-css-code-base">Living with a smaller CSS code base</h3> |
| 25 | <p>One of the nicest things about this new CSS theme is that I don’t have to worry about nested styles or elements that much, other than <code>pre</code>s, and <code>code</code>s, but that’s more about how <a href="https://pandoc.org/">Pandoc</a> renders code blocks than anything. For example, maybe you have a CSS class <code>tip</code>, which has a <code>background-color: blue;</code> style, and your links are also blue. Now you have to add something like <code>.tip a { color: white; }</code> to your style sheet, so you can actually see links when they are inside of <code>tip</code> <code>div</code>s. After a while, you end up going down this wild rabbit hole of trying to figure out what looks bad with what, which usually results in making some silly “hidden” page like my <a href="/css-test.html">CSS test</a> page that no one is supposed to know about. Woops! With this awful theme, I no longer have to worry about that kind of stuff!</p> |
| 26 | <p>Another great thing about this theme is the grey background! I have noticed that it’s not only easier on the eyes than a white background, but it also kind of works as an alternate to a dark theme, because it’s not as daunting to look at in a darker room at night. Plus, the grey makes it look even more like those awesome early HTML 2.0-era websites from the 90s! Maybe the 90s had it right with all of the grey interfaces they had back then, it just works everywhere!</p> |
| 27 | <p>While I’m at it, since I’m going for a whole 90s look, that means I can add more things like ASCII characters to style things. For example, instead of using <code>nav a { margin-right: 10px;}</code> to separate my navigation links in my header, now I just use slashes. Hell yeah!</p> |
| 28 | <p>One of my other favourite things about this new CSS theme is that I styled <code>pre</code>s, <code>.example</code>s, <code>.tip</code>s, <code>.note</code>s, and <code>.warning</code>s with just one style, instead of creating separate <code>background-color</code>s for each. Now they are all contained in this little rule, which just renders them as having a black border!:</p> |
| 29 | <pre><code>pre, .example, .tip, .note, .notice, .warning { |
| 30 | border: 1px solid black; |
| 31 | padding: 0.5rem 1rem; |
| 32 | margin: 1rem 0; |
| 33 | }</code></pre> |
| 34 | <h3 id="things-i-had-to-keep">Things I had to keep</h3> |
| 35 | <p>There were a few things I had to keep CSS style-wise, mostly for my technical writing portfolio. Technical writing doesn’t need to look flashy, but it does need proper formatting. In this case, Pandoc puts images inside of an HTML <code>figure</code> element, and creates a <code>figcaption</code> element from the image caption text in Markdown under the <code>img</code> element. I’m not sure about other browsers, but in Firefox, this renders images and figures as having a significant left margin, causing things to look messy, and sometimes confusing as to whether or not an image is part of a set of instructions or not. An added unfortunate side effect is that Pandoc takes the image caption from Markdown and still uses it as <code>alt</code> text in the HTML element, before the <code>figcaption</code>. This causes screen readers to say the image caption twice, so the overcompensation of having <code>alt</code> text and <code>figcaption</code>s having the same text is actually making images less accessible.</p> |
| 36 | <p>Okay, that was a very big aside. Basically, what I had to do was add these two lines in to fix the unwanted indentation of images and figures:</p> |
| 37 | <pre><code>figure { |
| 38 | margin-left: 0; |
| 39 | margin-right: 0; |
| 40 | } |
| 41 | |
| 42 | img { |
| 43 | max-width: 100%; |
| 44 | }</code></pre> |
| 45 | <p>Not a big deal!</p> |
| 46 | <p>Other important styles I that I had to carry on over from my flashier CSS theme were how the <code>pre</code> and <code>code</code> elements were styled, so my portfolio samples didn’t look messy, and so code blocks didn’t wrap when they weren’t supposed to. To do this, I added an <code>overflow: auto;</code> to my <code>pre</code> elements, so code blocks scrolled when long lines occurred, instead of wrapping. To preserve white space, I also had to add a <code>pre code { white-space: pre; }</code>. This is because Pandoc takes code blocks and converts them to <code><pre><code>...</code></pre></code>, instead of just converting them to <code><pre></code>s. Pandoc also adds some tiny CSS tweaks if you look at the generated source. One of the tweaks it adds is a <code>code { white-space: pre-wrap; }</code>, which preserves white space, but also wraps code if it goes passed the <code>max-width</code> value. This is good for inline code, but not for code blocks, because you don’t want anything to wrap, you want it to display as-as for copy-and-pasting purposes, and to improve readability. My rule for <code>pre code ...</code> above fixes this problem.</p> |
| 47 | <p>Since the year is actually 2021, and people use mobile phones obsessively, I also added a media query, so mobile views had some margin around the outside of the text, so text wasn’t cramped up against the edge of phone screens:</p> |
| 48 | <pre><code>@media only screen and (max-width: 700px) { |
| 49 | body { |
| 50 | margin: 10px; |
| 51 | } |
| 52 | }</code></pre> |
| 53 | <h3 id="ugly-webpages-as-a-form-of-expression">Ugly webpages as a form of expression</h3> |
| 54 | <p>I’m no artist, but I love being able to have a place on the internet that resembles me. I am organized, but my constant hobby of learning new tech things and programming keeps me in a volatile mindset where I feel comfortable with breaking things, or having things constantly change, and I think this theme resembles that really well.</p> |
| 55 | <p>Another upside to having a crappy-looking theme, is it encourages others that, they too, can make webpages, and they don’t have to be graphics designs to have a place of their own on the web. I curse Facebook for ruining the whole mindset of wanting to have a place on the web. I understand not everyone wants this, but I think it’s really fun, and if you are afraid that you can’t make a web page, I’m telling you can, and you’re fully capable. I’ve got a B.A. in applied linguistics and discourse studies, not computer science. I made my way here through tinkering and exploration, and so can you! Make shitty things you love, and thrive on change! Write things on the internet that don’t require “like”s or comments, start your own not-stagram using HTML. You can upload images to your computer when you get home, you don’t need to do it instantly when you are out on your phone to show your friends that cool thing you want to share. Explore friend’s websites, instead of waiting for notifications.</p> |
| 56 | <h3 id="on-search-engine-optimization-ads-and-trackers">On search engine optimization, ads, and trackers</h3> |
| 57 | <p>Hey there, I don’t show up as a first result on search engines. I’m fine with that! Hell, if I had too much traffic, this small server would probably become sluggish. I’m not writing for the world, I’m writing for friends or people who might be interested in my writing. If I don’t get traffic, no big deal. I’m not trying to make money here. I just enjoy writing, so I don’t need ads. Plus, ads often come with trackers, and I want to respect my users.</p> |
| 58 | <p>By not having ads, search engine optimization, and the trackers that often come with those two things, this website loads fast, even on slower, older, or less-powerful machines.</p> |
| 59 | <h3 id="i-think-im-done-with-this-blog-post">I think I’m done with this blog post</h3> |
| 60 | <p>Well, that was really fun to write about. I didn’t actually have a lot of that in my mind when I started writing. It’s nice to have new ideas emerge while you write.</p> |
| 61 | <p>If you enjoyed this blog post, you’ll probably enjoy <a href="https://neustadt.fr/essays/the-small-web/">this blog post</a> as well.</p> |
| 62 | </main> |
| 63 | </body> |
| 64 | </html> |