fristi/comfitu.re
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

1.5.0 minor release, integrated blogs and logs.

Browse source 
+ Added blogs and logs
+ Added integrated reader and player for blogs and logs
+ Merged websites and projects pages
+ Updated copyright notice
+ Updated theme with css variables and a new color scheme
This commit is contained in:
Fristi 2022-05-26 18:28:59 +02:00
parent 933d86c48f
commit 3551e61357
10 changed files with 672 additions and 261 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
blogs/2020/2020-12-21_flat_keyboards_break_fingers.md Normal file
View file

@ -0,0 +1,49 @@
# 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
person that somehow found my website. Good news, because this
post is for you.
You see, this isn't about mechanical keyboards. Or any other type of
special high quality clicky clacky keyboards. This is about
standard-issue, run-of-the-mill, plain-as-jane keyboards. Those $10
mushy pieces of shit you can get at about any computer or electronics
store. More specifically, those current day *flat* pancake keyboards.
Now you've probably noticed the trend of keyboards
getting flatter and flatter. They look trendy like that, but that wasn't the
reason for their invention at first. The initial flat keyboards were made as
a compromise between having a decent keyboard, and having one flat enough to
properly fit in a laptop. It made sense, unless you liked lugging around a
thick briefcase-sized computer. There was a functional reason to make them a bit
flatter.
But now it's the dawn of 2021. Flat keyboards are a trend, the flatter the
better. They look sleek and modern. They also type like absolute dog shit.
In fact how people type on them at all is a mystery to me.
Let's discuss travel distance. The flatter you go, the
less distance there is until the key bottoms out. You'll want a bit of distance;
having a bit more improves precision, having a bit less means it's less tiring
for your fingers. Unfortunately the modern day keyboard was hit by a truck tire
and ended up so flat, there's barely any travel distance left. If you want to
know what typing on one of these feels like, try hammering your fingers on your
desk. Don't actually do that though, you'll break your fingers. Just as much as
you'd break your fingers on typing on one of these roadkill keyboards.
People in the past were quick to complain about this sort of thing, yet here
we are. We somehow stopped giving a damn. We've gone form-over-function, except
function got literally thrown out the window. Do the people designing these things
even use their computers? Probably not, I'd assume they just have a really fancy
apple computer they use as an ornament for status symbolism.
Now I want to point out that there have been many decent flat keyboards in the
past. I've typed this rant on a thinkpad t450's keyboard. It's not perfect, but
it goes a long way to prove that so long as you don't turn it into a pancake,
a flatter keyboard can and will do the job for you. It's an example that
form *and* function can come together in a nice package. So next time you go
out to buy a new keyboard, try spending the extra buck on something quality.
Heck, you might end up enjoying what you buy for once.

64
blogs/2021/2021-06-21_noise.md Normal file
View file

@ -0,0 +1,64 @@
# 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):
>
> **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*.
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.
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.
## 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.
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.
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.
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.
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.
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.
### 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.
## 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.

37
blogs/2021/2021-07-07_method_reason_and_balance.md Normal file
View file

@ -0,0 +1,37 @@
# 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.
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?"
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?
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.
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.
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.
*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.*

449
index.html
View file

@ -5,8 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comfitu.re :: Sweet and Cozy</title> <title>Comfitu.re :: Sweet and Cozy</title>
<link href="style.css?v=1.4.4" rel="stylesheet"/> <link href="style.css?v=1.5.0" rel="stylesheet"/>
<script src="script.js?v=1.4.4" type="application/javascript"></script> <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>
</head> </head>
<body> <body>
@ -14,28 +15,30 @@
<script>comfiture.setupWallpaper();</script> <script>comfiture.setupWallpaper();</script>
<div class="container"> <div class="container">
<header> <div class="content">
<header>
<pre style="width: 352px; display:inline-block"> <pre style="width: 352px; display:inline-block">
___ __ _ _ ___ __ _ _
/ __|___ _ __ / _(_) |_ _ _ _ _ ___ / __|___ _ __ / _(_) |_ _ _ _ _ ___
| (__/ _ \ ' \| _| | _| || |_| '_/ -_) | (__/ _ \ ' \| _| | _| || |_| '_/ -_)
\___\___/_|_|_|_| |_|\__|\_,_(_)_| \___| \___\___/_|_|_|_| |_|\__|\_,_(_)_| \___|
</pre><div style="display: inline-block; height: 48px; vertical-align: bottom;"> </pre><div style="display: inline-block; height: 48px; vertical-align: bottom;">
<a href="#changelog">v1.4.4</a><br/> <a href="#changelog">v1.5.0</a><br/>
<script>comfiture.printMotd();</script><br/> <script>comfiture.printMotd();</script><br/>
</div> </div>
<div> <div>
<a href="#home">Home</a> <a href="#home">Home</a>
| <a href="#about">About</a> | <a href="#about">About</a>
| <a href="#websites">Websites</a> | <a href="#blogs">Blogs</a>
| <a href="#projects">Projects</a> | <a href="#logs">Logs</a>
| <a href="#contact">Contact</a><br/> | <a href="#projects">Projects</a>
</div> | <a href="#contact">Contact</a><br/>
</header> </div>
</header>
<main> <main>
<div class="content" id="home"> <div class="content-tab" id="home">
<div id="ascii"><pre> <div id="ascii"><pre>
( ) ( )
( ) ( )
( ) ( )
@ -57,189 +60,255 @@
~~~~~" "~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~" "~~~~~~~~~~~~~~~~~~~~~~~~
</pre></div> </pre></div>
<p> <p>
Hello, welcome to my comfy personal website! (＾▽＾) Hello, welcome to my comfy personal website! (＾▽＾)
</p> </p>
<p> <p>
I am Fristi, a programmer from the Netherlands. On this website you can find I am Fristi, a programmer from the Netherlands. On this website you can find
more info about me, my server and my personal projects. If you'd like to chat, more info about me, my server and my personal projects. If you'd like to chat,
ping me on the <a href="https://mk.toast.cafe/@fristi">fediverse</a>! ping me on the <a href="https://mk.toast.cafe/@fristi">fediverse</a>!
</p> </p>
</div> </div>
<div class="content" id="about"> <div class="content-tab" id="about">
<h1>About</h1> <h1>About</h1>
<p> <p>
Hi, my name is Fristi. I'm a PHP programmer and server hobbyist from the Hi, my name is Fristi. I'm a PHP programmer and server hobbyist from the
Netherlands. I love old electronics, games and food. While I generally don't Netherlands. I love old electronics, games and food. While I generally don't
program a lot in my spare time anymore, I do maintain a linux server program a lot in my spare time anymore, I do maintain a linux server
that hosts some of my private data and services, as well as this website. that hosts some of my private data and services, as well as this website.
</p> </p>
<h2>Professional</h2> <h2>Professional</h2>
<p> <p>
For a living, I mainly do backend programming in PHP, specializing in the For a living, I mainly do backend programming in PHP, specializing in the
Laravel framework. I also do other bits and pieces of scripting where needed, Laravel framework. I also do other bits and pieces of scripting where needed,
although I'm no expert in that. I also do a bit of front-end development where although I'm no expert in that. I also do a bit of front-end development where
needed, with experience in Bootstrap, although I prefer to make my own lighter needed, with experience in Bootstrap, although I prefer to make my own lighter
front-end solutions where possible. front-end solutions where possible.
</p> </p>
<p> <p>
Besides programming, I also work a lot with Linux systems, and use it as my Besides programming, I also work a lot with Linux systems, and use it as my
preferred operating system on my own computers. In my spare time I maintain a preferred operating system on my own computers. In my spare time I maintain a
personal hobby server that holds most of my private data and services, while personal hobby server that holds most of my private data and services, while
also acting as my development server. also acting as my development server.
</p> </p>
<p> </div>
Please view the <a href="#websites">Websites</a> and <a href="#projects">Projects</a> <div class="content-tab" id="blogs">
pages to get an idea of what I've worked with. <div class="tab-main">
</p> <h1>Blog posts</h1>
</div> <p>
<div class="content" id="websites"> My blog posts are now hosted here! See the archive below.
<h1>My websites</h1> </p>
<p>
I currently host the following websites:
</p>
<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/>
- <a href="https://blog.comfitu.re/">Comfi Blog</a>:
a blog featuring my random thoughts on various things.
<a href="https://vcs.subcon.town/fristi/blog.comfitu.re">Source</a><br />
</p>
</div>
<div class="content" id="projects">
<h1>Projects</h1>
<p>
I'm always working on something, so here's a list of things I'm working on or
have worked on in the past.
</p>
<h2>Software</h2> <h2>2022</h2>
<p> <p>
- <a href="https://vcs.subcon.town/fristi/console-writer">Console Writer</a>: Yes I am writing some new stuff, please wait :3
a small symfony/laravel package with improved console input/output handling.<br/> </p>
- A few other things I need to make available on my git repositories, check back later!
</p>
<h2>Services</h2> <h2>2021</h2>
<p> <ul>
For a list of services that I currently host, <li>
please view the <a href="https://subcon.town">Subcon Town</a> website. <span>07 Jul 2021</span>
</p> <span>"Method, reason and balance"</span>
</div> <a href="blogs/2021/2021-07-07_method_reason_and_balance.md">.md</a>
<div class="content" id="contact"> </li>
<h1>Contact information</h1> <li>
<p> <span>21 Jun 2021</span>
Want to send me a message? I can be reached at <a target="_blank" href="https://mk.toast.cafe/@fristi">@fristi@mk.toast.cafe</a>. <span>"Noise"</span>
</p> <a href="blogs/2021/2021-06-21_noise.md">.md</a>
</div> </li>
<div class="content" id="copyright"> </ul>
<h1>Copyright notice</h1>
<p>
Unless otherwise specified below, the content and source code of this website are
licensed under the Blue Oak Model License 1.0.0.
A copy of this license may be viewed <a target="_blank" href="LICENSE">here</a>.
Additionally, the website source code can be viewed
<a target="_blank" href="https://vcs.subcon.town/fristi/comfitu.re">here</a>.
</p>
<h2>Exceptions regarding media content</h2> <h2>2020</h2>
<p> <ul>
The media used on this website, including images, videos, audio and fonts, fall <li>
under their own respective copyright licenses, and are thus not subject to the <span>21 Dec 2020</span>
above mentioned Blue Oak Model License. <span>"Flat keyboards break fingers"</span>
</p> <a href="blogs/2020/2020-12-21_flat_keyboards_break_fingers.md">.md</a>
</li>
</ul>
</div>
<div class="reader hide">
<p>
<a href="#blogs" class="times">&lt;&lt; Back</a>
<span class="title"></span>
<span class="loader">Loading...</span>
</p>
<div class="reader-content">
</div>
</div>
</div>
<div class="content-tab" id="logs">
<h1>Audio logs</h1>
<p>
Besides blog posts, I sometimes also make audio logs.
</p>
<h2>Complaints</h2> <h2>2022</h2>
<p> <ul>
If you feel any material is incorrectly used on this website, or otherwise <li>
infringes on your copyright, feel free to file a complaint to <span>18 Apr 2022</span>
<a href="mailto:fristi@subcon.town">fristi@subcon.town</a>. <span>"Log #1: Favorite Video Games"</span>
</p> <a href="logs/2022/fristilog_001_video_games.opus">.opus</a>
</div> <a href="logs/2022/fristilog_001_video_games.mp3">.mp3</a>
<div class="content" id="changelog"> </li>
<h1>Changelog</h1> </ul>
<p> </div>
1.4.4 Patch:<br/> <div class="content-tab" id="projects">
- Updated links and blog website <h1>Projects</h1>
- Removed email references due to bad actors <p>
</p> Currently I maintain a few websites and packages, see below.
<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>
<p>
1.0.0 Initial release
</p>
</div>
</main>
<footer> <h2>Websites</h2>
<div style="float:left;"> <p>
<a href="https://fediring.net/previous?host=comfitu.re">←</a> - <a href="https://subcon.town/">Subcon Town</a>:
<a href="https://fediring.net/">Fediring</a> the main website of my personal server.
<a href="https://fediring.net/next?host=comfitu.re">→</a> <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>
<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>
<h2>Services</h2>
<p>
For a list of services that I currently host,
please view the <a href="https://subcon.town">Subcon Town</a> website.
</p>
</div>
<div class="content-tab" id="contact">
<h1>Contact information</h1>
<p>
Want to send me a message? I can be reached at <a target="_blank" href="https://mk.toast.cafe/@fristi">@fristi@mk.toast.cafe</a>.
</p>
</div>
<div class="content-tab" id="copyright">
<h1>Copyright notice</h1>
<p>
Unless otherwise specified below, the content and source code of this website are
licensed under the Blue Oak Model License 1.0.0.
A copy of this license may be viewed <a target="_blank" href="LICENSE">here</a>.
Additionally, the website source code can be viewed
<a target="_blank" href="https://vcs.subcon.town/fristi/comfitu.re">here</a>.
</p>
<h2>Exceptions regarding media content</h2>
<p>
Several media used on this website, such as (but not limited to) the background images
and fonts, fall under their own respective copyright licenses, and are thus not
subject to the above mentioned Blue Oak Model License.
</p>
<h2>Complaints</h2>
<p>
If you feel any material is incorrectly used on this website, or otherwise
infringes on your copyright, feel free to file a complaint to
<a href="mailto:fristi@subcon.town">fristi@subcon.town</a>.
</p>
</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>
<p>
1.0.0 Initial release
</p>
</div>
</main>
<div class="player hide">
<audio controls>
</audio>
<span class="times">&times;</span>
</div> </div>
<div style="text-align: right"> 2021 Comfitu.re.
<a href="#copyright">License</a> <footer>
<a target="_blank" href="https://vcs.subcon.town/fristi/comfitu.re">Source</a> <div style="float:left;">
</div> <a href="https://fediring.net/previous?host=comfitu.re">←</a>
</footer> <a href="https://fediring.net/">Fediring</a>
<a href="https://fediring.net/next?host=comfitu.re">→</a>
</div>
<div style="text-align: right"> 2021-2022 Comfitu.re.
<a href="#copyright">License</a>
<a target="_blank" href="https://vcs.subcon.town/fristi/comfitu.re">Source</a>
</div>
</footer>
</div>
</div> </div>
</body> </body>

BIN
logs/2022/fristilog_001_video_games.mp3 Normal file
View file

Binary file not shown.

BIN
logs/2022/fristilog_001_video_games.opus Normal file
View file

Binary file not shown.

188
script.js
View file

@ -2,10 +2,10 @@
var comfiture = {}; var comfiture = {};
var activeLink; var activeLink;
var activeContent; var activeContent;
var player;
var reader;
var motds = [ var motds = [
"Made by Fristi", "Made by Fristi",
"Made by a crocodile",
"Made by a Dutch potato",
"Fristi? Fristi habe ich nicht.", "Fristi? Fristi habe ich nicht.",
"[Subject quote here]", "[Subject quote here]",
"Press R or Z twice to do a barrel roll", "Press R or Z twice to do a barrel roll",
@ -16,44 +16,129 @@
"Justice in Spades", "Justice in Spades",
"Let's get Volatile", "Let's get Volatile",
"Yeah, RIP", "Yeah, RIP",
"What a shame." "What a shame.",
"RED SPY IS IN THE BASE",
"try fingers, but hole",
"You don't have the right O you don't have the right"
]; ];
//Function to set the wallpaper //Set up classes for player and reader
comfiture.setupWallpaper = function () { class Player {
let wallpaper = 'a' + (Math.floor(Math.random() * 12) + 1) + '.gif'; #container;
document.querySelector('.background').style.backgroundImage = 'url("backgrounds/'+wallpaper+'")'; #element;
};
comfiture.printMotd = function () { constructor() {
let motd = motds[Math.floor(Math.random() * motds.length)]; this.#container = document.querySelector('.player');
document.write(motd); if(this.#container) {
this.#element = this.#container.querySelector('audio');
this.#container.querySelector('span.times')
.addEventListener('click', event => {
this.#clear();
this.#container.classList.add('hide');
});
document.querySelector('#logs').addEventListener('click', event => {
if(event.target.tagName != 'A') return;
this.#load(event.target.getAttribute('href'));
event.preventDefault();
});
}
}
#clear() {
this.#element.pause();
this.#element.removeAttribute('src');
}
#load(href) {
this.#clear();
if(this.#container.classList.contains('hide')) {
this.#container.classList.remove('hide');
}
this.#element.setAttribute('src', href);
this.#element.play();
}
} }
//Onload class Reader {
window.addEventListener('load', function(){ #container;
//Hide all content #content;
let contents = document.querySelectorAll('.content'); #tabMain;
contents.forEach(function (element) { #loader;
element.classList.add('hide'); #title;
});
//Activate content matching hash in url (or home instead) constructor() {
let hash = window.location.hash; this.#container = document.querySelector('.reader');
if(!hash) hash = '#home'; if(this.#container) {
switchActiveContent(hash); this.#content = this.#container.querySelector('.reader-content');
this.#loader = this.#container.querySelector('span.loader');
this.#tabMain = document.querySelector('.tab-main');
this.#title = this.#container.querySelector('.title');
//Add click event handlers for header/footer links this.#container.querySelector('a.times')
window.addEventListener("click", event => { .addEventListener('click', event => {
var elements = document.querySelectorAll('header a, footer a'); this.#clear();
elements.forEach(element => { this.#container.classList.add('hide');
if (element && element.contains(event.target)) { this.#tabMain.classList.remove('hide');
let hash = element.getAttribute('href'); this.#title.innerHTML = '';
switchActiveContent(hash); });
}
document.querySelector('#blogs .tab-main').addEventListener('click', event => {
if(event.target.tagName != 'A') return;
this.#load(event.target.getAttribute('href'));
event.preventDefault();
});
}
}
#clear() {
this.#content.innerHTML = '';
}
#load(href) {
this.#clear();
this.#tabMain.classList.add('hide');
this.#container.classList.remove('hide');
this.#loader.classList.remove('hide');
this.#title.innerHTML = href.substring(href.lastIndexOf('/')+1);
ajax(href, response => {
let converter = new showdown.Converter();
this.#content.innerHTML = converter.makeHtml(response);
this.#loader.classList.add('hide')
}, () => {
this.#content.innerHTML = "<h1>Could not load resource.</h1> <p>An error occurred, unable to display blog post.</p>";
this.#loader.classList.add('hide')
}); });
}); }
}); }
function ajax(url, onSuccess, onError)
{
let request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
if(typeof onSuccess === 'function') {
onSuccess(this.response);
}
} else {
if(typeof onError === 'function') {
onError(this.status, this.response);
}
}
};
request.onerror = function () {
console.error('Failed request to ' + url + ', could not connect.');
if(typeof onError === 'function') {
onError(false, null);
}
}
request.send();
}
function switchActiveContent(id) function switchActiveContent(id)
{ {
@ -74,7 +159,44 @@
} }
} }
//Onload
window.addEventListener('load', function(){
//Hide all content
let contents = document.querySelectorAll('.content-tab');
contents.forEach(function (element) {
element.classList.add('hide');
});
//Activate content matching hash in url (or home instead)
let hash = window.location.hash;
if(!hash) hash = '#home';
switchActiveContent(hash);
//Set up reader and player
player = new Player();
reader = new Reader();
//Add click event handlers for header/footer links
document.querySelectorAll('header, footer').forEach(element => {
element.addEventListener('click', event => {
if(event.target.tagName != 'A') return;
let hash = event.target.getAttribute('href');
switchActiveContent(hash);
});
});
});
//Global functions
comfiture.setupWallpaper = function () {
let wallpaper = 'a' + (Math.floor(Math.random() * 12) + 1) + '.gif';
document.querySelector('.background').style.backgroundImage = 'url("backgrounds/'+wallpaper+'")';
};
comfiture.printMotd = function () {
let motd = motds[Math.floor(Math.random() * motds.length)];
document.write(motd);
}
//Expose comfiture object to document //Expose comfiture object to document
window.comfiture = comfiture; window.comfiture = comfiture;
})(); })();

3
showdown.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
showdown.min.js.map Normal file
View file

File diff suppressed because one or more lines are too long

142
style.css
View file

@ -3,14 +3,26 @@
src: url("fonts/Web437_IBM_VGA_8x16.woff"); src: url("fonts/Web437_IBM_VGA_8x16.woff");
} }
html { :root {
--fg-color: #e6e1dc;
--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;
}
html, body {
margin:0; margin:0;
padding:0; padding:0;
} }
body { body {
margin:0; font-family: IBMVGA8, monospace;
padding:0; font-size: 16px;
line-height: 16px;
} }
.hide { .hide {
@ -31,54 +43,90 @@ body {
} }
.container { .container {
position:relative;
box-sizing: border-box;
width: 100vw;
height: 100vh;
max-width: 1920px;
margin: 0 auto;
padding: 0;
}
.content {
position:absolute; position:absolute;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding:8px;
margin:0; margin:0;
padding:8px;
background-color: rgba(45, 40, 35, 0.95); background-color: var(--bg-color);
color: rgb(210, 172, 97); color: var(--fg-color);
border: 2px solid var(--border-color);
box-shadow: 7px 7px 0 var(--shadow-color);
font-family: IBMVGA8, monospace; display: flex;
font-size: 16px; flex-direction: column;
line-height: 16px; overflow: auto;
border: 2px solid rgb(0, 0, 0);
box-shadow: 5px 5px 0 rgb(0, 0, 0);
/*box-shadow: 0 0 10px rgba(0, 0, 0, 1);*/
} }
header, main, footer { header, main, footer, .player {
position: relative; position: relative;
box-sizing: border-box;
margin:0; margin:0;
padding:0; padding:0;
width: 100%; width: 100%;
box-sizing: border-box;
} }
header { header, footer, .player {
height: 160px;
overflow: hidden; overflow: hidden;
flex: 0 0 auto;
}
.player {
padding-bottom: 8px;
}
.player audio {
width: calc(100% - 32px);
}
.player span.times {
font-size: 32px;
line-height: 47px;
float: right;
cursor: pointer;
}
.reader p:first-child {
text-align: center;
}
.reader a.times {
float: left;
}
.reader .loader {
float:right;
}
.reader .loader:after {
display: inline;
white-space: pre;
content: " ";
animation: loading 1s linear infinite;
} }
main { main {
height: calc(100% - 224px);
overflow-y: auto;
overflow-x: hidden;
margin: 16px 0; margin: 16px 0;
padding: 0 16px; padding: 0 16px;
} flex: 1 1 auto;
overflow-y: auto;
footer { overflow-x: hidden;
height: 32px;
overflow: hidden;
} }
a { a {
color: rgb(213, 209, 206); color: var(--link-color);
text-decoration: none; text-decoration: none;
} }
@ -91,8 +139,8 @@ a:after {
} }
a:hover, a:active { a:hover, a:active {
background-color: rgb(234, 231, 227); background-color: var(--link-color);
color: rgba(62, 51, 48, 0.95); color: var(--bg-color);
} }
a.active { a.active {
@ -102,8 +150,8 @@ a.active {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
padding: 0;
margin: 0 0 16px 0; margin: 0 0 16px 0;
padding: 0;
text-decoration: underline; text-decoration: underline;
} }
@ -132,8 +180,22 @@ h6:before {
} }
p { p {
padding:0;
margin: 0 0 16px 0; 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 { pre {
@ -142,6 +204,10 @@ pre {
font-family: IBMVGA8, monospace; font-family: IBMVGA8, monospace;
} }
.content-tab p:last-child {
margin:0;
}
#ascii { #ascii {
text-align: center; text-align: center;
} }
@ -151,20 +217,15 @@ pre {
text-align: left; text-align: left;
} }
.content p:last-child {
margin:0;
}
@media only screen and (min-width: 864px) { @media only screen and (min-width: 864px) {
.container { .content {
position:absolute;
left: 32px; left: 32px;
bottom: 32px; bottom: 32px;
width: 800px; width: 800px;
height: 596px; height: 596px;
margin:0;
padding:16px; padding:16px;
margin:auto;
} }
header { header {
@ -179,3 +240,8 @@ pre {
height: 16px; height: 16px;
} }
} }
@keyframes loading {
0% {content:" ";}
50% {content:"█";}
}