1.5.1 patch, added more backgrounds and refactored css.

+ Added colored logo
+ Added more backgrounds, lifted size requirement to max 500kb
+ Refactored css and added better styling for blog posts
+ Refactored blog markdown files

blogs/2020/2020-12-21_flat_keyboards_break_fingers.md

@@ -1,6 +1,8 @@
 # Flat keyboards break fingers
 *Something about metal plates and pancakes.*
 
+---
+
 Ask any nerd about keyboards and you'll probably end up getting a
 lecture about *mechanical* keyboards. Probably cherry MX. If that
 doesn't ring a bell to you, congratulations, you're a not-tech-savvy

blogs/2021/2021-06-21_noise.md

@@ -1,64 +1,138 @@
 # Noise
 *Your ears and what screaming children do to them*
 
-Noise is everywhere. Your house, the city, the roads, the beach, noise is everywhere. Even the forest has ever so much noise, coming from the forest animals, the wind as it blows through leaves and trees, raindrops as they clatter on the forest floor. 
-But at some point, when there's enough noise, the term *noisy* comes to light. Straight from the cambridge dictionary:
+---
 
-> **noisy** (adjective):
+Noise is everywhere. Your house, the city, the roads, the beach, noise is everywhere. 
+Even the forest has ever so much noise, coming from the forest animals, the wind as it 
+blows through leaves and trees, raindrops as they clatter on the forest floor. 
+But at some point, when there's enough noise, the term *noisy* comes to light. Straight 
+from the cambridge dictionary:
+
+> *noisy* (adjective):
 >
 > **making a lot of noise.**
 >
 > - *a noisy crowd of fans*
 > - *noisy neighbours*
 
-Nobody minds noise, not until it becomes *noisy*. Incidentally, our society is full of noisy, too. Common examples of noisy things would be traffic, booming commercial districts, factories, trains, schools, and *children*.
+Nobody minds noise, not until it becomes *noisy*. Incidentally, our society is full of 
+noisy, too. Common examples of noisy things would be traffic, booming commercial 
+districts, factories, trains, schools, and *children*.
 
-Personally I've had a lot to deal with noise and noisiness over the years. I tend to be slightly more sensitive to it than others. Additionally I suffer from tinnitus, something I hope won't get any worse. And I'm just like a cat in that I'll likely jump up to the ceiling if you so much as surprise me with a loud bang.
+Personally I've had a lot to deal with noise and noisiness over the years. I tend to 
+be slightly more sensitive to it than others. Additionally I suffer from tinnitus, 
+something I hope won't get any worse. And I'm just like a cat in that I'll likely jump 
+up to the ceiling if you so much as surprise me with a loud bang.
 
 ## Mass-manufactured noise
 
-It goes without saying that we are very good at manufacturing noisiness on the industrial level. We're packed together into noisy cities and communities, while most of our creature comforts create lots of noise as well. Phones are ringing and beeping, cars are revving, stereo sets are blastin'. Yes, there's a good chance I'm right when I say that *your pc* is currently being noisy to an extend as well. And now I possibly made you aware of it.
+It goes without saying that we are very good at manufacturing noisiness on the 
+industrial level. We're packed together into noisy cities and communities, while most 
+of our creature comforts create lots of noise as well. Phones are ringing and beeping, 
+cars are revving, stereo sets are blastin'. Yes, there's a good chance I'm right when I 
+say that *your pc* is currently being noisy to an extend as well. And now I possibly 
+made you aware of it.
 
-Compare this to any other living thing in nature and it comes to no surprise that humans easily take the cake when it comes to making a lot of noise. "Well of course, we have loud machines and stuff! Progress!", you might say. But really, is there any reason for a lot of the things we use to be that noisy, for us ourselves to live as loudly as we do? Creatures in nature sure seem to disagree with that.
+Compare this to any other living thing in nature and it comes to no surprise that humans 
+easily take the cake when it comes to making a lot of noise. "Well of course, we have 
+loud machines and stuff! Progress!", you might say. But really, is there any reason for 
+a lot of the things we use to be that noisy, for us ourselves to live as loudly as we do? 
+Creatures in nature sure seem to disagree with that.
 
-In nature, being noisy may prove fatal. A predator might hear you and hunt you down. That's why most animals have adapted to being quiet, unless they have a reason not to. One of few such reasons might be to make a warning sound, to perhaps scare a predator off. Or as a warning sound to others of your kind, to alert them of an enemy presence.
+In nature, being noisy may prove fatal. A predator might hear you and hunt you down. 
+That's why most animals have adapted to being quiet, unless they have a reason not to. 
+One of few such reasons might be to make a warning sound, to perhaps scare a predator off. 
+Or as a warning sound to others of your kind, to alert them of an enemy presence.
 
 ## My ears are tingling!
 
-"So what if we make noise?" Perhaps you have a point. Our noise keeps nature out of our cities, because wild animals not adjusted to such an overwhelming human presence generally choose to walk around us. But there are many negative effects of noise as well.
+"So what if we make noise?" Perhaps you have a point. Our noise keeps nature out of our 
+cities, because wild animals not adjusted to such an overwhelming human presence generally 
+choose to walk around us. But there are many negative effects of noise as well.
 
-The most generally well-known one of these would be hearing damage. Stand near something loud enough and you risk blowing your ears out. Sudden damage may involve burst eardrums, and long term damage usually comes in the form of hearing loss, and potentially worse, ringing ears (known as tinnitus). However lesser known for some of us would be the added stress that comes from noisiness.
+The most generally well-known one of these would be hearing damage. Stand near something 
+loud enough and you risk blowing your ears out. Sudden damage may involve burst eardrums, 
+and long term damage usually comes in the form of hearing loss, and potentially worse, 
+ringing ears (known as tinnitus). However lesser known for some of us would be the added 
+stress that comes from noisiness.
 
-Stress from noise comes from the fact that your brain has to process the things your ears hear. Generally it will filter out a large chunk of what you're hearing based on how important certain sounds are to your brain. However, that filtering takes energy, and the more sound there is to be filtered, the more tiring this work gets, eventually overloading your brain. That's why breaks from noise are so important; it allows your brain to calm down and organize itself.
+Stress from noise comes from the fact that your brain has to process the things your ears 
+hear. Generally it will filter out a large chunk of what you're hearing based on how 
+important certain sounds are to your brain. However, that filtering takes energy, and the 
+more sound there is to be filtered, the more tiring this work gets, eventually overloading 
+your brain. That's why breaks from noise are so important; it allows your brain to calm 
+down and organize itself.
 
-This stress is even more evident in those of us that are more sensitive to input, like people with certain forms of autism or people with epilepsy. Such people are often more easily overloaded from input, with some of them literally getting seizures from it. Of course, in the lesser extremes are the group of shut-ins, introverts, night owls and such that generally live in quieter environments. For them, a noisy workspace might often lead to distractions, lack of concentration, some even get scatter-brained from it. It wears them down, and might even affect their sleep.
+This stress is even more evident in those of us that are more sensitive to input, like 
+people with certain forms of autism or people with epilepsy. Such people are often more 
+easily overloaded from input, with some of them literally getting seizures from it. Of 
+course, in the lesser extremes are the group of shut-ins, introverts, night owls and such 
+that generally live in quieter environments. For them, a noisy workspace might often lead 
+to distractions, lack of concentration, some even get scatter-brained from it. It wears 
+them down, and might even affect their sleep.
 
 ## Turning down the volume
 
-Above I've only just grasped some of the key points involving how much noise we make and how badly it can affect us. And sometimes it can be hard to find a solution. In my own particular problems with noise, I've frequently had to deal with people snoring. Suffice to say, solutions exist, but your mileage may vary; often the only true solution is the elimination of the source of the noise.
+Above I've only just grasped some of the key points involving how much noise we make and 
+how badly it can affect us. And sometimes it can be hard to find a solution. In my own 
+particular problems with noise, I've frequently had to deal with people snoring. Suffice 
+to say, solutions exist, but your mileage may vary; often the only true solution is the 
+elimination of the source of the noise.
 
-Ultimately, as much as with air and light pollution, sound pollution is a real issue that needs solving. However, just as with the rest, it's a daunting problem to tackle. But there are some things we can consider doing in the future:
+Ultimately, as much as with air and light pollution, sound pollution is a real issue that 
+needs solving. However, just as with the rest, it's a daunting problem to tackle. But 
+there are some things we can consider doing in the future:
 
 ### Sound insulation
 
-We insulate our houses against heat, but why not also insulate them against noise? This is something typical I've had the displeasure of dealing with in my life. I grew up in an old brick-and-mortar, concrete house. It was fairly well insulated against sound; thick double walls provided very good sound insulation from the outside. Likewise, rooms internally were also well insulated from each other.
+We insulate our houses against heat, but why not also insulate them against noise? This 
+is something typical I've had the displeasure of dealing with in my life. I grew up in 
+an old brick-and-mortar, concrete house. It was fairly well insulated against sound; 
+thick double walls provided very good sound insulation from the outside. Likewise, rooms 
+internally were also well insulated from each other.
 
-But these days I live in a house that's the opposite of that; it's a hard concrete house, where vibrations generally seem to penetrate the walls; as for interior walls, they're just single-sheet plywood. So in a nutshell, it's *poorly* insulated from noise, both externally as well as internally. Being disturbed by noisy sounds in your own living quarters, not being able to escape from it, is hell. So we should definitely consider sound-proofing our buildings.
+But these days I live in a house that's the opposite of that; it's a hard concrete house, 
+where vibrations generally seem to penetrate the walls; as for interior walls, they're 
+just single-sheet plywood. So in a nutshell, it's *poorly* insulated from noise, both 
+externally as well as internally. Being disturbed by noisy sounds in your own living quarters, 
+not being able to escape from it, is hell. So we should definitely consider sound-proofing 
+our buildings.
 
 ### Ditch mechanics for electrics
 
-This is one point where we've made the most progress. Over time, we've managed to turn a lot of our devices with many mechanical parts into simple electronic ones that barely contain moving parts anymore. Even our venerable companion, the car, now has an electric variant; with considerably less moving parts, and no noisy combustion being used, it's notably quieter than the average car.
+This is one point where we've made the most progress. Over time, we've managed to turn a 
+lot of our devices with many mechanical parts into simple electronic ones that barely 
+contain moving parts anymore. Even our venerable companion, the car, now has an electric 
+variant; with considerably less moving parts, and no noisy combustion being used, it's 
+notably quieter than the average car.
 
-On the flip side, we shouldn't over-digitize everything. Not everything needs to be a computer or a touch screen. Overly turning everything into computers may end up introducing new noise, and perhaps more importantly, *heat*.
+On the flip side, we shouldn't over-digitize everything. Not everything needs to be a 
+computer or a touch screen. Overly turning everything into computers may end up introducing 
+new noise, and perhaps more importantly, *heat*.
 
 ### Ditch mass-consumption
 
-Perhaps a rather big subject, but limiting our consumption can help too. The less we need to produce, the less noise we make in our factories. Perhaps if we focus on quality over quantity, we might even find that we can replace noisy machines with the less noisy and more capable human hand. Obviously this would also bode well for the environment, cutting emissions and waste.
+Perhaps a rather big subject, but limiting our consumption can help too. The less we need 
+to produce, the less noise we make in our factories. Perhaps if we focus on quality over 
+quantity, we might even find that we can replace noisy machines with the less noisy and 
+more capable human hand. Obviously this would also bode well for the environment, cutting 
+emissions and waste.
 
 ### Be considerate
 
-Maybe a more far-fetched one, or maybe not. Sometimes, noise is literally just your neighbour. Or maybe *you* are that noisy neighbour. Being considerate is one other way of helping with our home environments. This boils down to really simple stuff, like not cranking up your stereo set too much, not turning your back yard into a lumber mill, and even the simplest one; teach your kids and pets to stay quiet. But of course that last one takes effort, and we all know the one thing we're not gonna do at home. Being considerate sometimes requires a little bit of work from you. But the pay off can be big if more of us were willing to put in that little bit of effort to be more considerate.
+Maybe a more far-fetched one, or maybe not. Sometimes, noise is literally just your 
+neighbour. Or maybe *you* are that noisy neighbour. Being considerate is one other way of 
+helping with our home environments. This boils down to really simple stuff, like not 
+cranking up your stereo set too much, not turning your back yard into a lumber mill, and 
+even the simplest one; teach your kids and pets to stay quiet. But of course that last one 
+takes effort, and we all know the one thing we're not gonna do at home. Being considerate 
+sometimes requires a little bit of work from you. But the pay off can be big if more of us 
+were willing to put in that little bit of effort to be more considerate.
 
 ## Not all noise is noisy
 
-On a closing note, I'd like to say that not all noise ends up being noisy. Music is among some of the things I like most about life. Music is *good*. But be considerate. You obviously want to listen to your music; someone else might not. Be considerate; to your neighbours, but also your ears, both will thank you for not exposing them to loud noise.
+On a closing note, I'd like to say that not all noise ends up being noisy. Music is among 
+some of the things I like most about life. Music is *good*. But be considerate. You obviously 
+want to listen to your music; someone else might not. Be considerate; to your neighbours, 
+but also your ears, both will thank you for not exposing them to loud noise.

blogs/2021/2021-07-07_method_reason_and_balance.md

@@ -1,37 +1,108 @@
 # Method, reason and balance
 *How there's a yin to every yang and how they keep the world spinning.*
 
-Most people would not think of me as a spiritual person. If your view of spirituality boils down to religion, then you're right. I'm not a *religious* person. I'm also not very spiritual, which is something I've come to regret, as there's a lot more to spirituality than some stories from age-old books about deities and other fantastical fairy tales.
+---
 
-Nowadays, spirituality is mainly and commonly only found in the form of religion, hence why people often confuse the two. Most would think of religion as "worshiping gods" and "faith in something intangible", and for some of the bigger religions, this is mostly true. Many involve gods and these would usually have their teachings derived from one of more such central figures. However, there are also religions with other concepts and ideas at their center. Some are about harmony, others about spirits. Some are centered around a balanced way of life. Some are about communicating with nature, where nature may encompass the entirety of the universe and existence itself. Religion and spirituality come on many forms.
+Most people would not think of me as a spiritual person. If your view of 
+spirituality boils down to religion, then you're right. I'm not a 
+*religious* person. I'm also not very spiritual, which is something I've 
+come to regret, as there's a lot more to spirituality than some stories 
+from age-old books about deities and other fantastical fairy tales.
 
-So what is religion and what is spirituality? These are difficult to describe, as many people have differing views on them. The things that most often come to mind are *morals*, *beliefs*, *ethics* as well as supernatural phenomenon. This at least seems to be the common thread that runs through all religion and spiritual belief. Religion can describe a way of life, how to behave, what is good and what is bad. Some do so literally, while some speak of vaguer terms, lessons of balance and harmony, leaving this up for interpretation.
+Nowadays, spirituality is mainly and commonly only found in the form of 
+religion, hence why people often confuse the two. Most would think of 
+religion as "worshiping gods" and "faith in something intangible", and 
+for some of the bigger religions, this is mostly true. Many involve gods 
+and these would usually have their teachings derived from one of more 
+such central figures. However, there are also religions with other concepts 
+and ideas at their center. Some are about harmony, others about spirits. 
+Some are centered around a balanced way of life. Some are about 
+communicating with nature, where nature may encompass the entirety of the 
+universe and existence itself. Religion and spirituality come on many forms.
+
+So what is religion and what is spirituality? These are difficult to 
+describe, as many people have differing views on them. The things that 
+most often come to mind are *morals*, *beliefs*, *ethics* as well as 
+supernatural phenomenon. This at least seems to be the common thread that 
+runs through all religion and spiritual belief. Religion can describe a 
+way of life, how to behave, what is good and what is bad. Some do so 
+literally, while some speak of vaguer terms, lessons of balance and harmony, 
+leaving this up for interpretation.
 
 My personal definition of spirituality? It serves as a description of *reason*.
 
 ## The modern world of Technology
 
-These days spirituality is mostly hidden away for those living in the typical western world. The most would only know it as the Catholic church, or maybe the Islam. In contrast, atheism has become more popular under the younger generations, generally denouncing religion as "old fashioned" and "not scientific". In this modern world, science seems to rule a steadier hand than religion. It goes without saying that science and religion are often at odds with each other, typically over the question of "Does \<insert god\> exist?"
+These days spirituality is mostly hidden away for those living in the 
+typical western world. The most would only know it as the Catholic church, 
+or maybe the Islam. In contrast, atheism has become more popular under 
+the younger generations, generally denouncing religion as "old fashioned" 
+and "not scientific". In this modern world, science seems to rule a 
+steadier hand than religion. It goes without saying that science and religion 
+are often at odds with each other, typically over the question of
+"Does \<insert god\> exist?"
 
-Science has led us to many advancements in our society, for better and worse. Nuclear power serves as a common example of this. A powerful source of energy that could sustain our cities with ease, or a terrible superweapon that could cost the life of millions. It all comes down to a question of "What would I do with this knowledge?" Indeed, it all comes down to *reason*.
+Science has led us to many advancements in our society, for better and 
+worse. Nuclear power serves as a common example of this. A powerful source 
+of energy that could sustain our cities with ease, or a terrible superweapon 
+that could cost the life of millions. It all comes down to a question of 
+"What would I do with this knowledge?" Indeed, it all comes down to *reason*.
 
-So should science be at odds with religion? Unfortunately, it's naturally so due to the nature of most religions, of which science is skeptical. That's not out of ill intent, but it is in science's nature to ask questions and try to determine how the universe works, whereas some religions try to give a ready set answer to things, often without proof. But what about science and spirituality?
+So should science be at odds with religion? Unfortunately, it's naturally so 
+due to the nature of most religions, of which science is skeptical. That's 
+not out of ill intent, but it is in science's nature to ask questions and try 
+to determine how the universe works, whereas some religions try to give a 
+ready set answer to things, often without proof. But what about science and 
+spirituality?
 
-If spirit is reason, then science is *method*. Science is about curiosity, the "how" question. Spirit is about reason, the "why" question. Without spirit, nothing would keep us from abusing science for destructive purposes. And without science, we'd lack awareness and progress, we'd be dead in the water. So it goes without saying that naturally, spirit and science not only shouldn't be at odds, they should be in balance, at peace.
+If spirit is reason, then science is *method*. Science is about curiosity, 
+the "how" question. Spirit is about reason, the "why" question. Without spirit, 
+nothing would keep us from abusing science for destructive purposes. And 
+without science, we'd lack awareness and progress, we'd be dead in the water. 
+So it goes without saying that naturally, spirit and science not only shouldn't 
+be at odds, they should be in balance, at peace.
 
 ## Balancing the spinning top of progress and morality
 
-Ultimately, our society needs both science and spirit to progress and stay on its path. "So what's wrong with our religions, why don't they fill the spiritual gap?" Well, they do, but only sort-of. I've mentioned before that all religions commonly have a thread of morals and ethics running through them. But some religions push these down, out of focus, in favor of zealously committing to deity-worship above all. Or some would blindly follow old rules, not questioning them out of faith. But the most important part of any religion is daring to ask the "why" question, to reflect, provide morals and ethics, as well as explaining them through teachings.
+Ultimately, our society needs both science and spirit to progress and stay on 
+its path. "So what's wrong with our religions, why don't they fill the spiritual 
+gap?" Well, they do, but only sort-of. I've mentioned before that all religions 
+commonly have a thread of morals and ethics running through them. But some 
+religions push these down, out of focus, in favor of zealously committing to 
+deity-worship above all. Or some would blindly follow old rules, not questioning 
+them out of faith. But the most important part of any religion is daring to ask 
+the "why" question, to reflect, provide morals and ethics, as well as explaining 
+them through teachings.
 
-Secondly, while science has evolved over time, religion has remained more stagnant. Spirituality is something that needs to evolve, just as science does. Religions have remained stagnant in some of their views, ignoring how the world around them has changed over time.
+Secondly, while science has evolved over time, religion has remained more 
+stagnant. Spirituality is something that needs to evolve, just as science does. 
+Religions have remained stagnant in some of their views, ignoring how the world 
+around them has changed over time.
 
-A common example of this would be views on *homosexuality*. Many religions shoot it down as something akin to a crime, with some of them even going as far as to wanting to brutally punish it. Yet parts of the world have slowly decided that there's nothing wrong with it. The world has started adapting its view, but religion seems set in its ways.
+A common example of this would be views on *homosexuality*. Many religions 
+shoot it down as something akin to a crime, with some of them even going as far 
+as to wanting to brutally punish it. Yet parts of the world have slowly decided 
+that there's nothing wrong with it. The world has started adapting its view, but 
+religion seems set in its ways.
 
-Of course certain small exceptions do occur on a more personal level, like small communities deciding that some of their religious rules are too much, or that something perceived bad is actually not all that bad. These people are slowly evolving on the spiritual level, adapting their morals and ethics based on events and new knowledge. Frankly, this is what -all- religion should do.
+Of course certain small exceptions do occur on a more personal level, like 
+small communities deciding that some of their religious rules are too much, or 
+that something perceived bad is actually not all that bad. These people are slowly 
+evolving on the spiritual level, adapting their morals and ethics based on events 
+and new knowledge. Frankly, this is what -all- religion should do.
 
 ## Peace and Harmony
 
-Spirituality should assimilate and adapt to the knowledge that science obtains, just as that science should listen to reason to prevent itself from crossing dangerous boundaries. They should be in balance, continuously evolving and adapting to each other. Spirituality should also revolve much more about asking why and reflecting upon the world and oneself, rather than praying to gods and deities.
+Spirituality should assimilate and adapt to the knowledge that science obtains, 
+just as that science should listen to reason to prevent itself from crossing dangerous 
+boundaries. They should be in balance, continuously evolving and adapting to 
+each other. Spirituality should also revolve much more about asking why and reflecting 
+upon the world and oneself, rather than praying to gods and deities.
 
 
-*Disclaimer: In no way is this article meant to discredit any religion. Ultimately you choose what you wish to believe. This article is merely a suggestion to open up your awareness about what religion, and by extension spirituality, can mean and do for you. I believe self-reflection is an important aspect of any kind of spirituality in that it allows for personal growth, and I believe it should be a goal not just in religion on spirituality, but in life in general.*
+*Disclaimer: In no way is this article meant to discredit any religion. Ultimately 
+you choose what you wish to believe. This article is merely a suggestion to open up 
+your awareness about what religion, and by extension spirituality, can mean and do for 
+you. I believe self-reflection is an important aspect of any kind of spirituality in 
+that it allows for personal growth, and I believe it should be a goal not just in 
+religion on spirituality, but in life in general.*

index.html

@@ -3,11 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Comfitu.re :: Sweet and Cozy</title>
+    <title>Comfitu.re</title>
 
-    <link href="style.css?v=1.5.0" rel="stylesheet"/>
+    <link href="style.css?v=1.5.1" rel="stylesheet"/>
     <script src="showdown.min.js?v=2.1.0" type="application/javascript"></script>
-    <script src="script.js?v=1.5.0" type="application/javascript"></script>
+    <script src="script.js?v=1.5.1" type="application/javascript"></script>
 </head>
 <body>
 
@@ -17,13 +17,14 @@
     <div class="container">
         <div class="content">
             <header>
-            <pre style="width: 352px; display:inline-block">
-  ___            __ _ _
- / __|___ _ __  / _(_) |_ _  _   _ _ ___
-| (__/ _ \ '  \|  _| |  _| || |_| '_/ -_)
- \___\___/_|_|_|_| |_|\__|\_,_(_)_| \___|
-            </pre><div style="display: inline-block; height: 48px; vertical-align: bottom;">
-                <a href="#changelog">v1.5.0</a><br/>
+                <div class="logo" style="width: 352px; display:inline-block;">
+                    <pre style="color:#ffd079;">  ___            __ _ _</pre>
+                    <pre style="color:#ffc66d;"> / __|___ _ __  / _(_) |_ _  _   _ _ ___</pre>
+                    <pre style="color:#de9e5f;">| (__/ _ \ '  \|  _| |  _| || |_| '_/ -_)</pre>
+                    <pre style="color:#c18152;"> \___\___/_|_|_|_| |_|\__|\_,_(_)_| \___|</pre>
+                    <pre> </pre>
+                </div><div style="display: inline-block; height: 48px; vertical-align: bottom;">
+                <a href="#changelog">v1.5.1</a><br/>
                 <script>comfiture.printMotd();</script><br/>
             </div>
                 <div>
@@ -107,33 +108,33 @@
                         </p>
 
                         <h2>2021</h2>
-                        <ul>
-                            <li>
-                                <span>07 Jul 2021</span>
-                                <span>"Method, reason and balance"</span>
-                                <a href="blogs/2021/2021-07-07_method_reason_and_balance.md">.md</a>
-                            </li>
-                            <li>
-                                <span>21 Jun 2021</span>
-                                <span>"Noise"</span>
-                                <a href="blogs/2021/2021-06-21_noise.md">.md</a>
-                            </li>
-                        </ul>
+                        <table class="blog-table">
+                            <tr>
+                                <td>07 Jul 2021</td>
+                                <td>"Method, reason and balance"</td>
+                                <td><a href="blogs/2021/2021-07-07_method_reason_and_balance.md">.md</a></td>
+                            </tr>
+                            <tr>
+                                <td>21 Jun 2021</td>
+                                <td>"Noise"</td>
+                                <td><a href="blogs/2021/2021-06-21_noise.md">.md</a></td>
+                            </tr>
+                        </table>
 
                         <h2>2020</h2>
-                        <ul>
-                            <li>
-                                <span>21 Dec 2020</span>
-                                <span>"Flat keyboards break fingers"</span>
-                                <a href="blogs/2020/2020-12-21_flat_keyboards_break_fingers.md">.md</a>
-                            </li>
-                        </ul>
+                        <table class="blog-table">
+                            <tr>
+                                <td>21 Dec 2020</td>
+                                <td>"Flat keyboards break fingers"</td>
+                                <td><a href="blogs/2020/2020-12-21_flat_keyboards_break_fingers.md">.md</a></td>
+                            </tr>
+                        </table>
                     </div>
                     <div class="reader hide">
                         <p>
                             <a href="#blogs" class="times">&lt;&lt; Back</a>
                             <span class="title"></span>
-                            <span class="loader">Loading...</span>
+                            <span class="loader hide">Loading...</span>
                         </p>
                         <div class="reader-content">
                         </div>
@@ -146,14 +147,16 @@
                     </p>
 
                     <h2>2022</h2>
-                    <ul>
-                        <li>
-                            <span>18 Apr 2022</span>
-                            <span>"Log #1: Favorite Video Games"</span>
-                            <a href="logs/2022/fristilog_001_video_games.opus">.opus</a>
-                            <a href="logs/2022/fristilog_001_video_games.mp3">.mp3</a>
-                        </li>
-                    </ul>
+                    <table class="log-table">
+                        <tr>
+                            <td>18 Apr 2022</td>
+                            <td>"Log #1: Favorite Video Games"</td>
+                            <td>
+                                <a href="logs/2022/fristilog_001_video_games.opus">.opus</a>
+                                <a href="logs/2022/fristilog_001_video_games.mp3">.mp3</a>
+                            </td>
+                        </tr>
+                    </table>
                 </div>
                 <div class="content-tab" id="projects">
                     <h1>Projects</h1>
@@ -162,21 +165,29 @@
                     </p>
 
                     <h2>Websites</h2>
-                    <p>
-                        - <a href="https://subcon.town/">Subcon Town</a>:
-                        the main website of my personal server.
-                        <a href="https://vcs.subcon.town/fristi/subcon.town">Source</a><br/>
-                        - <a href="https://comfitu.re">Comfiture</a>:
-                        my personal website, the one you're reading now.
-                        <a href="https://vcs.subcon.town/fristi/comfitu.re">Source</a><br/>
-                    </p>
+                    <ul>
+                        <li>
+                            <a href="https://subcon.town/">Subcon Town</a>:
+                            the main website of my personal server.
+                            <a href="https://vcs.subcon.town/fristi/subcon.town">Source</a>
+                        </li>
+                        <li>
+                            <a href="https://comfitu.re">Comfiture</a>:
+                            my personal website, the one you're reading now.
+                            <a href="https://vcs.subcon.town/fristi/comfitu.re">Source</a>
+                        </li>
+                    </ul>
 
                     <h2>Software</h2>
-                    <p>
-                        - <a href="https://vcs.subcon.town/fristi/console-writer">Console Writer</a>:
-                        a small symfony/laravel package with improved console input/output handling.<br/>
-                        - A few other things I need to make available on my git repositories, check back later!
-                    </p>
+                    <ul>
+                        <li>
+                            <a href="https://vcs.subcon.town/fristi/console-writer">Console Writer</a>:
+                            a small symfony/laravel package with improved console input/output handling.
+                        </li>
+                        <li>
+                            A few other things I need to make available on my git repositories, check back later!
+                        </li>
+                    </ul>
 
                     <h2>Services</h2>
                     <p>
@@ -216,74 +227,84 @@
                 </div>
                 <div class="content-tab" id="changelog">
                     <h1>Changelog</h1>
-                    <p>
-                        1.5.0 Minor update:<br/>
-                        - Added blog posts and audio logs<br/>
-                        - Added reader for blog posts (reverts to download without javascript)<br/>
-                        - Added player for audio logs (reverts to download without javascript)<br/>
-                        - Merged websites and projects tabs<br/>
-                        - Updated copyright notice<br/>
-                        - Updated theme a little
-                    </p>
-                    <p>
-                        1.4.4 Patch:<br/>
-                        - Updated links and blog website<br/>
-                        - Removed email references due to bad actors
-                    </p>
-                    <p>
-                        1.4.3 Patch:<br/>
-                        - Swapped backgrounds, maximum size is 200kb
-                    </p>
-                    <p>
-                        1.4.2 Patch:<br/>
-                        - Added fediring links <br/>
-                        - Improved mobile support of the header section<br/>
-                        - Added some more motd lines
-                    </p>
-                    <p>
-                        1.4.1 Patch:<br/>
-                        - Added "viewport" meta tag to fix responsiveness
-                    </p>
-                    <p>
-                        1.4.0 Minor update:<br/>
-                        - Added responsive sizing for mobile support<br/>
-                        - Updated visual style of the "terminal"<br/>
-                        - Removed a few lower-quality backgrounds<br/>
-                        - Updated footer with direct link to source<br/>
-                        - Refreshed content a bit<br/>
-                        - Added randomized motd under version number
-                    </p>
-                    <p>
-                        1.3.1 Patch:<br/>
-                        - Set background image rendering to "crisp-edges"
-                    </p>
-                    <p>
-                        1.3.0 Minor update:<br/>
-                        - Updated site texts<br/>
-                        - Fixed git links to now direct to vcs.subcon.town<br/>
-                        - Updated personal contact info<br/>
-                        - Fixed css issue causing scrollbars to appear when not needed<br/>
-                        - Added more backgrounds
-                    </p>
-                    <p>
-                        1.2.2 Patch:<br/>
-                        - Cleaned up javascript code<br/>
-                        - Fixed issue with doubly loading wallpaper<br/>
-                        - Added version query string to css and javascript urls to prevent cache issues
-                    </p>
-                    <p>
-                        1.2.1 Patch:<br/>
-                        - Set a default background image for the no-javascript crowd<br/>
-                        - Added this changelog to the website
-                    </p>
-                    <p>
-                        1.2.0 Minor update:<br/>
-                        - Added blogs content
-                    </p>
-                    <p>
-                        1.1.0 Minor update:<br/>
-                        - Updated missing content
-                    </p>
+                    <ol>
+                        <li>first</li>
+                        <li>second</li>
+                    </ol>
+                    <ul>
+                        1.5.1 Patch:
+                        <li>Added colored logo</li>
+                        <li>Added many more backgrounds, allowing images up to 500kb</li>
+                        <li>Refactored css and provided better styling for blog posts</li>
+                    </ul>
+                    <ul>
+                        1.5.0 Minor update:
+                        <li>Added blog posts and audio logs</li>
+                        <li>Added reader for blog posts (reverts to download without javascript)</li>
+                        <li>Added player for audio logs (reverts to download without javascript)</li>
+                        <li>Merged websites and projects tabs</li>
+                        <li>Updated copyright notice</li>
+                        <li>Updated theme a little</li>
+                    </ul>
+                    <ul>
+                        1.4.4 Patch:
+                        <li>Updated links and blog website</li>
+                        <li>Removed email references due to bad actors</li>
+                    </ul>
+                    <ul>
+                        1.4.3 Patch:
+                        <li>Swapped backgrounds, maximum size is 200kb</li>
+                    </ul>
+                    <ul>
+                        1.4.2 Patch:
+                        <li>Added fediring links</li>
+                        <li>Improved mobile support of the header section</li>
+                        <li>Added some more motd lines</li>
+                    </ul>
+                    <ul>
+                        1.4.1 Patch:
+                        <li>Added "viewport" meta tag to fix responsiveness</li>
+                    </ul>
+                    <ul>
+                        1.4.0 Minor update:
+                        <li>Added responsive sizing for mobile support</li>
+                        <li>Updated visual style of the "terminal"</li>
+                        <li>Removed a few lower-quality backgrounds</li>
+                        <li>Updated footer with direct link to source</li>
+                        <li>Refreshed content a bit</li>
+                        <li>Added randomized motd under version number</li>
+                    </ul>
+                    <ul>
+                        1.3.1 Patch:
+                        <li>Set background image rendering to "crisp-edges"</li>
+                    </ul>
+                    <ul>
+                        1.3.0 Minor update:
+                        <li>Updated site texts</li>
+                        <li>Fixed git links to now direct to vcs.subcon.town</li>
+                        <li>Updated personal contact info</li>
+                        <li>Fixed css issue causing scrollbars to appear when not needed</li>
+                        <li>Added more backgrounds</li>
+                    </ul>
+                    <ul>
+                        1.2.2 Patch:
+                        <li>Cleaned up javascript code</li>
+                        <li>Fixed issue with doubly loading wallpaper</li>
+                        <li>Added version query string to css and javascript urls to prevent cache issues</li>
+                    </ul>
+                    <ul>
+                        1.2.1 Patch:
+                        <li>Set a default background image for the no-javascript crowd</li>
+                        <li>Added this changelog to the website</li>
+                    </ul>
+                    <ul>
+                        1.2.0 Minor update:
+                        <li>Added blogs content</li>
+                    </ul>
+                    <ul>
+                        1.1.0 Minor update:
+                        <li>Updated missing content</li>
+                    </ul>
                     <p>
                         1.0.0 Initial release
                     </p>

script.js

@@ -188,7 +188,7 @@
 
     //Global functions
     comfiture.setupWallpaper = function () {
-        let wallpaper = 'a' + (Math.floor(Math.random() * 12) + 1) + '.gif';
+        let wallpaper = 'a' + (Math.floor(Math.random() * 36) + 1) + '.gif';
         document.querySelector('.background').style.backgroundImage = 'url("backgrounds/'+wallpaper+'")';
     };
 

style.css

@@ -8,34 +8,45 @@
     --bg-color: rgba(43, 43, 43, 0.95);
     --border-color: #000000;
     --shadow-color: rgba(0, 0, 0, .9);
-    --link-color: #ffc66d;
-
-    --color-2: #a5c261;
-    --color-4: #6d9cbe;
+    --accent-1-color: #ffc66d;
+    --accent-2-color: #a5c261;
+    --accent-3-color: #6d9cbe;
+    --font-size: 16px;
 }
 
-html, body {
-    margin:0;
-    padding:0;
+/* Defaults, Resets */
+html, body, div, span, hr, p, ul, ol, blockquote, table, pre, h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    padding: 0;
 }
 
-body {
+body, h1, h2, h3, h4, h5, h6, pre, code {
     font-family: IBMVGA8, monospace;
-    font-size: 16px;
-    line-height: 16px;
+    font-size: var(--font-size);
+    line-height: var(--font-size);
 }
 
-.hide {
-    display: none;
+.background, .container, .content {
+    width: 100vw;
+    height: 100vh;
+    box-sizing: border-box;
 }
 
+.background, .content {
+    position: absolute;
+}
+
+.container, header, main, footer, .player {
+    position: relative;
+}
+
+
+/* Structure */
+
 .background {
-    position:absolute;
     top:0;
     left:0;
-    width:100%;
-    height:100%;
-    background-image: url("backgrounds/4.gif");
+    background-image: url("backgrounds/a17.gif");
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
@@ -43,46 +54,40 @@ body {
 }
 
 .container {
-    position:relative;
-    box-sizing: border-box;
-    width: 100vw;
-    height: 100vh;
     max-width: 1920px;
     margin: 0 auto;
-    padding: 0;
 }
 
 .content {
-    position:absolute;
-    box-sizing: border-box;
-    height: 100%;
-    width: 100%;
-    margin:0;
     padding:8px;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 
     background-color: var(--bg-color);
     color: var(--fg-color);
     border: 2px solid var(--border-color);
-    box-shadow: 7px 7px 0 var(--shadow-color);
-
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
+    box-shadow: 8px 8px 0 var(--shadow-color);
 }
 
 header, main, footer, .player {
-    position: relative;
     box-sizing: border-box;
-    margin:0;
-    padding:0;
     width: 100%;
-}
-
-header, footer, .player {
     overflow: hidden;
     flex: 0 0 auto;
 }
 
+main {
+    margin: 16px 0;
+    padding: 0 16px;
+    flex: 1 1 auto;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+
+/* Player */
+
 .player {
     padding-bottom: 8px;
 }
@@ -98,6 +103,8 @@ header, footer, .player {
     cursor: pointer;
 }
 
+/* Reader */
+
 .reader p:first-child {
     text-align: center;
 }
@@ -117,29 +124,24 @@ header, footer, .player {
     animation: loading 1s linear infinite;
 }
 
-main {
-    margin: 16px 0;
-    padding: 0 16px;
-    flex: 1 1 auto;
-    overflow-y: auto;
-    overflow-x: hidden;
+@keyframes loading {
+    0% {content:" ";}
+    50% {content:"█";}
 }
 
+
+/* Content */
+
 a {
-    color: var(--link-color);
+    color: var(--accent-1-color);
     text-decoration: none;
 }
 
-a:before {
-    content: '[';
-}
-
-a:after {
-    content: ']';
-}
+a:before { content: '['; }
+a:after { content: ']'; }
 
 a:hover, a:active {
-    background-color: var(--link-color);
+    background-color: var(--accent-1-color);
     color: var(--bg-color);
 }
 
@@ -147,67 +149,70 @@ a.active {
     text-decoration: underline;
 }
 
-h1, h2, h3, h4, h5, h6 {
-    font-size: 16px;
-    font-weight: normal;
-    margin: 0 0 16px 0;
-    padding: 0;
-    text-decoration: underline;
+b, strong { font-weight: normal; }
+b, strong, blockquote { color: var(--accent-2-color); }
+
+blockquote {
+    padding-left: 8px;
 }
 
-h1:before {
-    content: '# ';
-}
-
-h2:before {
-    content: '## ';
-}
-
-h3:before {
-    content: '### ';
-}
-
-h4:before {
-    content: '#### ';
-}
-
-h5:before {
-    content: '##### ';
-}
-
-h6:before {
-    content: '###### ';
-}
-
-p {
-    margin: 0 0 16px 0;
-    padding:0;
-}
-
-ul {
-    margin:0 0 16px 0;
-    padding:0;
-    list-style: none;
-}
-
-ul li span:first-child {
-    color: var(--color-2);
-}
-
-ul li span:nth-child(2) {
-    color: var(--color-4);
-}
-
-pre {
-    margin:0;
-    padding:0;
-    font-family: IBMVGA8, monospace;
+h1, h2, h3, h4, h5, h6, p, ul, ol, table, blockquote, hr {
+    margin-bottom: 16px;
 }
 
 .content-tab p:last-child {
-    margin:0;
+    margin-bottom:0;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    font-weight: normal;
+    text-decoration: underline;
+}
+
+h1:before { content: '# '; }
+h2:before { content: '## '; }
+h3:before { content: '### '; }
+h4:before { content: '#### '; }
+h5:before { content: '##### '; }
+h6:before { content: '###### '; }
+
+mark {
+    background-color: var(--accent-2-color);
+    color: var(--bg-color);
+}
+
+ul { list-style: none; }
+ul li:before { content: '- '; }
+ol { list-style: decimal inside; }
+
+hr {
+    margin-top: 14px;
+    border: none;
+    border-top: 2px solid var(--fg-color);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border: none;
+}
+
+table.blog-table tr td, table.log-table tr td {
+    vertical-align: top;
+}
+
+table.blog-table tr td:first-child, table.log-table tr td:first-child {
+    width: 96px;
+    color: var(--accent-2-color);
+}
+
+table.blog-table tr td:nth-child(2), table.log-table tr td:nth-child(2) {
+    color: var(--accent-3-color);
+}
+
+table.blog-table tr td:last-child { width: 48px; text-align: right; }
+table.log-table tr td:last-child { width: 114px; text-align: right; }
+
 #ascii {
     text-align: center;
 }
@@ -217,6 +222,9 @@ pre {
     text-align: left;
 }
 
+.hide {
+    display: none;
+}
 
 @media only screen and (min-width: 864px) {
     .content {
@@ -224,24 +232,6 @@ pre {
         bottom: 32px;
         width: 800px;
         height: 596px;
-        margin:0;
         padding:16px;
     }
-
-    header {
-        height: 96px;
-    }
-
-    main {
-        height: 416px;
-    }
-
-    footer {
-        height: 16px;
-    }
-}
-
-@keyframes loading {
-    0% {content:" ";}
-    50% {content:"█";}
 }