1.6.0 minor release, revamped blog reader.
+ reorganized all content, removed some + removed log player + added back email links with obfuscation
This commit is contained in:
parent
614aef7fc7
commit
53c51a71be
30
blogs/2022/2022-10-07_fresh_blog.md
Normal file
30
blogs/2022/2022-10-07_fresh_blog.md
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
# Fresh blog!
|
||||
|
||||
*Written on October 7th, 2022*
|
||||
|
||||
---
|
||||
|
||||
Hello reader! If this is your first visit, welcome to my blog!
|
||||
If you're not a newcomer though, you will have noticed I've removed
|
||||
my old blog entries. I've decided to start fresh and new, with a new
|
||||
focus on writing more useful things than just rants and insights
|
||||
nobody cares about.
|
||||
|
||||
If for any reason you do want to re-read some of my old stuff, fret
|
||||
not; I will look into rehosting the articles somewhere else and leave
|
||||
a link here for you to find. You'll just have to be patient until
|
||||
then. *Or ask me on the fediverse.*
|
||||
|
||||
From now on, I'll be focusing my blog posts on my *personal projects*
|
||||
and reviewing *useful stuff* with an unbiased eye. In the short future
|
||||
you can expect posts about the Subcon server, an always ongoing project,
|
||||
and my findings regarding the Pico 4 VR headset, which I've pre-ordered.
|
||||
|
||||
As for those wondering if I'm gonna make more voice logs, I'm afraid
|
||||
not. While in a particular way I liked doing the first one, I simply
|
||||
do not have a good recording spot where I feel comfortable speaking
|
||||
into a microphone. That also goes for streams.
|
||||
|
||||
Anyway, that was all that I have to say for now. Expect more posts soon!
|
||||
|
||||
|
||||
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Bold.eot
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Bold.eot
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Bold.ttf
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Bold.ttf
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff2
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff2
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.eot
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.eot
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.ttf
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.woff
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.woff
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.woff2
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.woff2
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Italic.eot
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Italic.eot
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Italic.ttf
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Italic.ttf
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Italic.woff
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Italic.woff
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Italic.woff2
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Italic.woff2
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Regular.eot
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Regular.eot
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Regular.ttf
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Regular.ttf
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff2
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff2
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Text.eot
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Text.eot
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Text.ttf
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Text.ttf
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Text.woff
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Text.woff
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Text.woff2
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-Text.woff2
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.eot
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.eot
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.ttf
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.ttf
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.woff
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.woff
Normal file
Binary file not shown.
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.woff2
Normal file
BIN
fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.woff2
Normal file
Binary file not shown.
71
fonts/IBM-Plex-Mono/font.css
Normal file
71
fonts/IBM-Plex-Mono/font.css
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('IBMPlexMono-Regular.eot'); /* IE9 Compat Modes */
|
||||
src: url('IBMPlexMono-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('IBMPlexMono-Regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('IBMPlexMono-Regular.woff') format('woff'), /* Pretty Modern Browsers */
|
||||
url('IBMPlexMono-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('IBMPlexMono-Italic.eot'); /* IE9 Compat Modes */
|
||||
src: url('IBMPlexMono-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('IBMPlexMono-Italic.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('IBMPlexMono-Italic.woff') format('woff'), /* Pretty Modern Browsers */
|
||||
url('IBMPlexMono-Italic.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('IBMPlexMono-Text.eot'); /* IE9 Compat Modes */
|
||||
src: url('IBMPlexMono-Text.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('IBMPlexMono-Text.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('IBMPlexMono-Text.woff') format('woff'), /* Pretty Modern Browsers */
|
||||
url('IBMPlexMono-Text.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('IBMPlexMono-TextItalic.eot'); /* IE9 Compat Modes */
|
||||
src: url('IBMPlexMono-TextItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('IBMPlexMono-TextItalic.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('IBMPlexMono-TextItalic.woff') format('woff'), /* Pretty Modern Browsers */
|
||||
url('IBMPlexMono-TextItalic.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('IBMPlexMono-Bold.eot'); /* IE9 Compat Modes */
|
||||
src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('IBMPlexMono-Bold.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('IBMPlexMono-Bold.woff') format('woff'), /* Pretty Modern Browsers */
|
||||
url('IBMPlexMono-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('IBMPlexMono-BoldItalic.eot'); /* IE9 Compat Modes */
|
||||
src: url('IBMPlexMono-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('IBMPlexMono-BoldItalic.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('IBMPlexMono-BoldItalic.woff') format('woff'), /* Pretty Modern Browsers */
|
||||
url('IBMPlexMono-BoldItalic.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
92
fonts/IBM-Plex-Mono/license.txt
Normal file
92
fonts/IBM-Plex-Mono/license.txt
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
img/3a26bbd5804e3b35b7ee97e1bca03205.jpg
Normal file
BIN
img/3a26bbd5804e3b35b7ee97e1bca03205.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
222
index.html
222
index.html
|
|
@ -5,9 +5,10 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Comfitu.re</title>
|
||||
|
||||
<link href="style.css?v=1.5.1" rel="stylesheet"/>
|
||||
<link href="fonts/IBM-Plex-Mono/font.css" />
|
||||
<link href="style.css?v=1.6.0" rel="stylesheet"/>
|
||||
<script src="showdown.min.js?v=2.1.0" type="application/javascript"></script>
|
||||
<script src="script.js?v=1.5.1" type="application/javascript"></script>
|
||||
<script src="script.js?v=1.6.0" type="application/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -24,16 +25,15 @@
|
|||
<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/>
|
||||
<a href="#changelog">v1.6.0</a><br/>
|
||||
<script>comfiture.printMotd();</script><br/>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#home">Home</a>
|
||||
| <a href="#about">About</a>
|
||||
| <a href="#blogs">Blogs</a>
|
||||
| <a href="#logs">Logs</a>
|
||||
| <a href="#projects">Projects</a>
|
||||
| <a href="#contact">Contact</a><br/>
|
||||
| <a href="#blogs">Blog</a>
|
||||
| <a href="#links">Links</a>
|
||||
| <a href="#contact">Contact</a>
|
||||
<a href="#blogs" class="reader-close hide">Close</a><br/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -62,41 +62,15 @@
|
|||
</pre></div>
|
||||
|
||||
<p>
|
||||
Hello, welcome to my comfy personal website! (＾▽＾)
|
||||
Hoi, welcome to my comfy website! (＾▽＾)
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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,
|
||||
ping me on the <a href="https://mk.toast.cafe/@fristi">fediverse</a>!
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-tab" id="about">
|
||||
<h1>About</h1>
|
||||
<p>
|
||||
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
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2>Professional</h2>
|
||||
<p>
|
||||
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,
|
||||
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
|
||||
front-end solutions where possible.
|
||||
</p>
|
||||
<p>
|
||||
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
|
||||
personal hobby server that holds most of my private data and services, while
|
||||
also acting as my development server.
|
||||
I am <a target="_blank" href="https://akkos.fritu.re/fristi">@Fristi</a>, a programmer from the Netherlands. On this website you can find
|
||||
more info about me, my server and my personal projects. Enjoy!
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-tab" id="blogs">
|
||||
<div class="tab-main">
|
||||
<h1>Blog posts</h1>
|
||||
<p>
|
||||
My blog posts are now hosted here! See the archive below.
|
||||
|
|
@ -105,104 +79,80 @@
|
|||
<h2>2022</h2>
|
||||
<table class="blog-table">
|
||||
<tr>
|
||||
<td>12 Jun 2022</td>
|
||||
<td>"Please do theme your distro"</td>
|
||||
<td><a href="blogs/2022/2022-06-12_please_do_theme_your_distro.md">.md</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>2021</h2>
|
||||
<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>
|
||||
<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>
|
||||
<td>07 Oct</td>
|
||||
<td>"Fresh Blog!"</td>
|
||||
<td><a href="blogs/2022/2022-10-07_fresh_blog.md">.md</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="reader hide">
|
||||
<p>
|
||||
<a href="#blogs" class="times"><< Back</a>
|
||||
<span class="title"></span>
|
||||
<span class="loader hide">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>2022</h2>
|
||||
<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>
|
||||
<p>
|
||||
Currently I maintain a few websites and packages, see below.
|
||||
</p>
|
||||
<div class="content-tab" id="links">
|
||||
<h1>Links</h1>
|
||||
<p>These are some links to stuff that I make or endorse. Check it out!</p>
|
||||
|
||||
<h2>Websites</h2>
|
||||
<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>
|
||||
<table class="link-table">
|
||||
<tr>
|
||||
<td style="width: 160px;"><a href="https://comfitu.re">Comfitu.re</a>:</td>
|
||||
<td>My personal website, the one you're reading now.</td>
|
||||
<td><a href="https://vcs.subcon.town/fristi/comfitu.re">Source</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://subcon.town/">Subcon Town</a>:</td>
|
||||
<td>My personal server and tilde community. The site lists users and services.</td>
|
||||
<td><a href="https://vcs.subcon.town/fristi/subcon.town">Source</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://akkos.fritu.re/">Akko's Friture</a>:</td>
|
||||
<td>my personal Akkoma Fediverse instance.</td>
|
||||
<td><a href="https://akkoma.dev/AkkomaGang/akkoma">Source</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://stream.comfitu.re">Comfi Stream</a>:</td>
|
||||
<td>the place you can watch my streams.</td>
|
||||
<td><a href="https://owncast.online/">Source</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://fediring.net/">Fediring</a>:</td>
|
||||
<td>a classic webring used by fediverse users.</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Software</h2>
|
||||
<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>Projects</h2>
|
||||
<table class="list-table">
|
||||
<tr>
|
||||
<td style="width: 160px;"><a href="https://akkoma.dev/AkkomaGang/akkoma">Akkoma</a>:</td>
|
||||
<td>
|
||||
a fork of the popular Pleroma ActivityPub server. I help with translations
|
||||
and sometimes with bug reporting.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://vcs.subcon.town/fristi/pleroma-themes">Pleroma Themes</a>:</td>
|
||||
<td>a collection of themes I've made for use with Pleroma/Akkoma.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://vcs.subcon.town/fristi/console-writer">Console Writer</a>:</td>
|
||||
<td>a small symfony/laravel package with improved console input/output handling.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://vcs.subcon.town/fristi">Other stuff</a>:</td>
|
||||
<td>there's more on my private gitea instance. Some of it is old and abandoned though.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<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>.
|
||||
Want to send me a message? You can contact me here:
|
||||
</p>
|
||||
<table>
|
||||
<tr><td>Email:</td><td><a class="em" href="#">fristi「AT」subcon.town</a></td></tr>
|
||||
<tr><td>Fediverse:</td><td><a class="fv" target="_blank" href="https://akkos.fritu.re/fristi">fristi「AT」akkos.fritu.re</a></td></tr>
|
||||
</table>
|
||||
<p>
|
||||
You can also ask me questions on retrospring! <a target="_blank" href="https://retrospring.net/@fristi">Go to retrospring</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-tab" id="copyright">
|
||||
|
|
@ -226,14 +176,22 @@
|
|||
<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>.
|
||||
<a class="em" href="#">fristi「AT」subcon.town</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-tab" id="changelog">
|
||||
<h1>Changelog</h1>
|
||||
<ul>
|
||||
Blog update:
|
||||
<li>Added new blog entry "Please do theme your distro".</li>
|
||||
<li>Removed old blog posts, starting from fresh.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.6.0 Minor update:
|
||||
<li>Reorganized all content</li>
|
||||
<li>Blog reader will now expand the desktop view for better reading</li>
|
||||
<li>Blog reader is now styled with more readable font and elements</li>
|
||||
<li>Log player has been removed</li>
|
||||
<li>Added email links, but obfuscated them to deter bot abuse</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.5.1 Patch:
|
||||
|
|
@ -313,14 +271,10 @@
|
|||
1.0.0 Initial release
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="player hide">
|
||||
<audio controls>
|
||||
|
||||
</audio>
|
||||
<span class="times">×</span>
|
||||
<div class="content-tab hide" id="reader">
|
||||
<!-- initially empty and inaccessible -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div style="float:left;">
|
||||
|
|
@ -336,5 +290,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script>comfiture.showAddresses();</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
179
script.js
179
script.js
|
|
@ -1,118 +1,31 @@
|
|||
(function (){
|
||||
var comfiture = {};
|
||||
var content;
|
||||
var activeLink;
|
||||
var activeContent;
|
||||
var player;
|
||||
var reader;
|
||||
var readerBtn;
|
||||
var motds = [
|
||||
"Made by Fristi",
|
||||
"Fristi? Fristi habe ich nicht.",
|
||||
"[Subject quote here]",
|
||||
"Press R or Z twice to do a barrel roll",
|
||||
"You wouldn't download a car.",
|
||||
"The last metroid is in captivity.",
|
||||
"Suavemente, bésame",
|
||||
"What is love?",
|
||||
"Justice in Spades",
|
||||
"Let's get Volatile",
|
||||
"Yeah, RIP",
|
||||
"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"
|
||||
"Woomy!",
|
||||
"GET OVER HERE!",
|
||||
"Who are you, that do not know your history?",
|
||||
"What is a man?",
|
||||
"Rip and tear, until it is done.",
|
||||
"Praise the sun!"
|
||||
];
|
||||
|
||||
//Set up classes for player and reader
|
||||
class Player {
|
||||
#container;
|
||||
#element;
|
||||
|
||||
constructor() {
|
||||
this.#container = document.querySelector('.player');
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
class Reader {
|
||||
#container;
|
||||
#content;
|
||||
#tabMain;
|
||||
#loader;
|
||||
#title;
|
||||
|
||||
constructor() {
|
||||
this.#container = document.querySelector('.reader');
|
||||
if(this.#container) {
|
||||
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');
|
||||
|
||||
this.#container.querySelector('a.times')
|
||||
.addEventListener('click', event => {
|
||||
this.#clear();
|
||||
this.#container.classList.add('hide');
|
||||
this.#tabMain.classList.remove('hide');
|
||||
this.#title.innerHTML = '';
|
||||
});
|
||||
|
||||
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')
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//Ajax
|
||||
function ajax(url, onSuccess, onError)
|
||||
{
|
||||
let request = new XMLHttpRequest();
|
||||
|
|
@ -140,27 +53,64 @@
|
|||
request.send();
|
||||
}
|
||||
|
||||
//Content switching
|
||||
function switchActiveContent(id)
|
||||
{
|
||||
let link = document.querySelector('a[href="'+id+'"]');
|
||||
let content = document.querySelector(id);
|
||||
|
||||
if(link && content) {
|
||||
if(id === '#reader') {
|
||||
//Switch to reader tab, but do not switch active menu link
|
||||
if(activeContent) activeContent.classList.add('hide');
|
||||
content.classList.remove('hide');
|
||||
activeContent = content;
|
||||
|
||||
} else if (link && content) {
|
||||
if(activeLink) activeLink.classList.remove('active');
|
||||
if(activeContent) activeContent.classList.add('hide');
|
||||
|
||||
link.classList.add('active');
|
||||
content.classList.remove('hide');
|
||||
|
||||
if(activeContent && activeContent.getAttribute('id') === 'reader') {
|
||||
closeReader();
|
||||
}
|
||||
|
||||
activeLink = link;
|
||||
activeContent = content;
|
||||
|
||||
} else {
|
||||
console.error('Error: not switching content; link or content element for id ' + id + ' does not exist.');
|
||||
}
|
||||
}
|
||||
|
||||
//Reader loading
|
||||
function loadReaderFile(href)
|
||||
{
|
||||
reader.innerHTML = "<p>Loading...</p>";
|
||||
ajax(href, response => {
|
||||
let converter = new showdown.Converter();
|
||||
reader.innerHTML = converter.makeHtml(response);
|
||||
}, () => {
|
||||
reader.innerHTML = "<h1>Could not load resource.</h1> <p>An error occurred, unable to display blog post.</p>";
|
||||
});
|
||||
content.classList.add('expand');
|
||||
readerBtn.classList.remove('hide');
|
||||
}
|
||||
|
||||
function closeReader()
|
||||
{
|
||||
reader.innerHTML = "";
|
||||
content.classList.remove('expand');
|
||||
readerBtn.classList.add('hide');
|
||||
}
|
||||
|
||||
//Onload
|
||||
window.addEventListener('load', function(){
|
||||
content = document.querySelector('.content');
|
||||
reader = document.querySelector('#reader');
|
||||
readerBtn = document.querySelector('.reader-close');
|
||||
|
||||
//Hide all content
|
||||
let contents = document.querySelectorAll('.content-tab');
|
||||
contents.forEach(function (element) {
|
||||
|
|
@ -168,22 +118,26 @@
|
|||
});
|
||||
|
||||
//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();
|
||||
switchActiveContent(window.location.hash ? window.location.hash : "#home");
|
||||
|
||||
//Add click event handlers for header/footer links
|
||||
document.querySelectorAll('header, footer').forEach(element => {
|
||||
element.addEventListener('click', event => {
|
||||
if(event.target.tagName != 'A') return;
|
||||
if(event.target.tagName !== 'A') return;
|
||||
let hash = event.target.getAttribute('href');
|
||||
switchActiveContent(hash);
|
||||
});
|
||||
});
|
||||
|
||||
//Add click event handlers for reader links
|
||||
document.querySelectorAll('.blog-table a[href$=".md"]').forEach(element => {
|
||||
element.addEventListener('click', event => {
|
||||
let filename = event.target.getAttribute('href');
|
||||
switchActiveContent('#reader');
|
||||
loadReaderFile(filename);
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
//Global functions
|
||||
|
|
@ -197,6 +151,21 @@
|
|||
document.write(motd);
|
||||
}
|
||||
|
||||
comfiture.showAddresses = function () {
|
||||
let a = 'fristi';
|
||||
let b = 'subcon.town';
|
||||
let c = 'akkos.fritu.re';
|
||||
|
||||
document.querySelectorAll('.em').forEach( element => {
|
||||
element.innerHTML = a + '@' + b;
|
||||
element.setAttribute('href', 'mailto:' + a + '@' + b);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.fv').forEach( element => {
|
||||
element.innerHTML = a + '@' + c;
|
||||
});
|
||||
}
|
||||
|
||||
//Expose comfiture object to document
|
||||
window.comfiture = comfiture;
|
||||
})();
|
||||
|
|
|
|||
142
style.css
142
style.css
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
/* Defaults, Resets */
|
||||
html, body, div, span, hr, p, ul, ol, blockquote, table, pre, h1, h2, h3, h4, h5, h6 {
|
||||
html, body, div, span, hr, p, ul, ol, blockquote, table, code, pre, h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -70,7 +70,7 @@ body, h1, h2, h3, h4, h5, h6, pre, code {
|
|||
box-shadow: 8px 8px 0 var(--shadow-color);
|
||||
}
|
||||
|
||||
header, main, footer, .player {
|
||||
header, main, footer {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -85,51 +85,10 @@ main {
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* Player */
|
||||
|
||||
.player {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.player audio {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.player span.times {
|
||||
font-size: 32px;
|
||||
line-height: 47px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Reader */
|
||||
|
||||
.reader p:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reader a.times {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.reader .loader {
|
||||
.reader-close {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.reader .loader:after {
|
||||
display: inline;
|
||||
white-space: pre;
|
||||
content: " ";
|
||||
animation: loading 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {content:" ";}
|
||||
50% {content:"█";}
|
||||
}
|
||||
|
||||
|
||||
/* Content */
|
||||
|
||||
a {
|
||||
|
|
@ -149,12 +108,10 @@ a.active {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
b, strong { font-weight: normal; }
|
||||
b:not(#reader b), strong:not(#reader strong) { font-weight: normal; }
|
||||
b, strong, blockquote { color: var(--accent-2-color); }
|
||||
|
||||
blockquote {
|
||||
padding-left: 8px;
|
||||
}
|
||||
code { font-weight: 400; color: var(--accent-3-color); }
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, ul, ol, table, blockquote, hr {
|
||||
margin-bottom: 16px;
|
||||
|
|
@ -169,12 +126,12 @@ h1, h2, h3, h4, h5, h6 {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1:before { content: '# '; }
|
||||
h2:before { content: '## '; }
|
||||
h3:before { content: '### '; }
|
||||
h4:before { content: '#### '; }
|
||||
h5:before { content: '##### '; }
|
||||
h6:before { content: '###### '; }
|
||||
h1:not(#reader h1):before { content: '# '; }
|
||||
h2:not(#reader h2):before { content: '## '; }
|
||||
h3:not(#reader h3):before { content: '### '; }
|
||||
h4:not(#reader h4):before { content: '#### '; }
|
||||
h5:not(#reader h5):before { content: '##### '; }
|
||||
h6:not(#reader h6):before { content: '###### '; }
|
||||
|
||||
mark {
|
||||
background-color: var(--accent-2-color);
|
||||
|
|
@ -185,10 +142,9 @@ 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);
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 480px;
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -197,21 +153,63 @@ table {
|
|||
border: none;
|
||||
}
|
||||
|
||||
table.blog-table tr td, table.log-table tr td {
|
||||
vertical-align: top;
|
||||
table tr td { vertical-align: top; }
|
||||
table.blog-table tr td:first-child { width: 96px; color: var(--accent-2-color); }
|
||||
table.blog-table tr td:nth-child(2) { color: var(--accent-3-color); }
|
||||
table.blog-table tr td:last-child { width: 114px; text-align: right; }
|
||||
|
||||
/* Reader Content */
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid var(--accent-2-color);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
table.blog-table tr td:first-child, table.log-table tr td:first-child {
|
||||
width: 96px;
|
||||
color: var(--accent-2-color);
|
||||
#reader pre {
|
||||
color: var(--accent-3-color);
|
||||
border-left: 4px solid var(--accent-3-color);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
table.blog-table tr td:nth-child(2), table.log-table tr td:nth-child(2) {
|
||||
hr {
|
||||
margin: 1rem 0 2rem 0;
|
||||
border: none;
|
||||
border-top: 1px solid var(--fg-color);
|
||||
}
|
||||
|
||||
#reader p {
|
||||
text-align: justify;
|
||||
margin: 0 0 1.5rem 0
|
||||
}
|
||||
|
||||
#reader i, #reader em {
|
||||
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; }
|
||||
#reader,
|
||||
#reader h1, #reader h2, #reader h3,
|
||||
#reader h4, #reader h5, #reader h6{
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-size: .9rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#reader h1, #reader h2, #reader h3,
|
||||
#reader h4, #reader h5, #reader h6 {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#reader h1 { font-size: 1.5rem; margin: 1.5rem 0; text-align: center; }
|
||||
#reader h1 + p { text-align: center; text-indent: 0; }
|
||||
#reader h2 { font-size: 1.1rem; margin: 2rem 0 .9rem 0; }
|
||||
#reader h3 { font-size: 1rem; margin: 1.5rem 0 .9rem 0; text-indent: 1rem; }
|
||||
#reader h4 { font-size: 1rem; margin: 1rem 0 .4rem 0; }
|
||||
#reader h5 { font-size: .9rem; margin: 1rem 0 .4rem 0; }
|
||||
#reader h6 { font-size: .75rem; margin: 1rem 0 .4rem 0; }
|
||||
|
||||
/* Special */
|
||||
|
||||
#ascii {
|
||||
text-align: center;
|
||||
|
|
@ -226,6 +224,7 @@ table.log-table tr td:last-child { width: 114px; text-align: right; }
|
|||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 864px) {
|
||||
.content {
|
||||
left: 32px;
|
||||
|
|
@ -233,5 +232,16 @@ table.log-table tr td:last-child { width: 114px; text-align: right; }
|
|||
width: 800px;
|
||||
height: 596px;
|
||||
padding:16px;
|
||||
transition: height .5s;
|
||||
}
|
||||
|
||||
.content.expand {
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
|
||||
#reader {
|
||||
width: 40rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue