1.7.0 Minor update, added support for linking to blog articles to be viewed on the website, updated site theme. Added compatibility in css for terminal color schemes.
This commit is contained in:
parent
3b5f52ac4b
commit
0c96457cf8
|
|
@ -69,3 +69,5 @@ I personally could not be happier with my choice to move to the Odroid. It's sti
|
||||||
Now that the hardware has been settled on, I can continue again with creating a comfortable server. Part of that will be to finally get going with creating a small tilde community on it. For that, I will likely be spending a lot of time writing wiki articles on how to use stuff. But besides that, also having fun using the damn server, of course.
|
Now that the hardware has been settled on, I can continue again with creating a comfortable server. Part of that will be to finally get going with creating a small tilde community on it. For that, I will likely be spending a lot of time writing wiki articles on how to use stuff. But besides that, also having fun using the damn server, of course.
|
||||||
|
|
||||||
See you later, and happy computing!
|
See you later, and happy computing!
|
||||||
|
|
||||||
|
|
||||||
634
index.html
634
index.html
|
|
@ -6,9 +6,9 @@
|
||||||
<title>Comfitu.re</title>
|
<title>Comfitu.re</title>
|
||||||
|
|
||||||
<link href="fonts/IBM-Plex-Mono/font.css" />
|
<link href="fonts/IBM-Plex-Mono/font.css" />
|
||||||
<link href="style.css?v=1.6.3" rel="stylesheet"/>
|
<link href="style.css?v=1.7.0" rel="stylesheet"/>
|
||||||
<script src="vendor/showdownjs/showdown/showdown.min.js?v=2.1.0" type="application/javascript"></script>
|
<script src="vendor/showdownjs/showdown/showdown.min.js?v=2.1.0" type="application/javascript"></script>
|
||||||
<script src="script.js?v=1.6.3" type="application/javascript"></script>
|
<script src="script.js?v=1.7.0" type="application/javascript"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
@ -16,30 +16,37 @@
|
||||||
<script>comfiture.setupWallpaper();</script>
|
<script>comfiture.setupWallpaper();</script>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="content">
|
<div class="window">
|
||||||
<header>
|
<div class="titlebar">
|
||||||
<div class="logo" style="width: 352px; display:inline-block;">
|
~><> : fish - Command Prompt
|
||||||
<pre style="color:#ffd079;"> ___ __ _ _</pre>
|
<span style="float: right;">
|
||||||
<pre style="color:#ffc66d;"> / __|___ _ __ / _(_) |_ _ _ _ _ ___</pre>
|
<span class="btn">-</span><span class="btn close">×</span>
|
||||||
<pre style="color:#de9e5f;">| (__/ _ \ ' \| _| | _| || |_| '_/ -_)</pre>
|
</span>
|
||||||
<pre style="color:#c18152;"> \___\___/_|_|_|_| |_|\__|\_,_(_)_| \___|</pre>
|
|
||||||
<pre> </pre>
|
|
||||||
</div><div style="display: inline-block; height: 48px; vertical-align: bottom;">
|
|
||||||
<a href="#changelog">v1.6.3</a><br/>
|
|
||||||
<script>comfiture.printMotd();</script><br/>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="content">
|
||||||
<a href="#home">Home</a>
|
<header>
|
||||||
| <a href="#blogs">Blog</a>
|
<div class="logo" style="width: 352px; display:inline-block;">
|
||||||
| <a href="#links">Links</a>
|
<pre style="color:#ffd079;"> ___ __ _ _</pre>
|
||||||
| <a href="#contact">Contact</a>
|
<pre style="color:#ffc66d;"> / __|___ _ __ / _(_) |_ _ _ _ _ ___</pre>
|
||||||
<a href="#blogs" class="reader-close hide">Close</a><br/>
|
<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.7.0</a><br/>
|
||||||
|
<script>comfiture.printMotd();</script><br/>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
<div>
|
||||||
|
<a href="#home">Home</a>
|
||||||
|
| <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>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="content-tab" id="home">
|
<div class="content-tab" id="home">
|
||||||
<div id="ascii"><pre>
|
<div id="ascii"><pre>
|
||||||
( )
|
( )
|
||||||
( )
|
( )
|
||||||
( )
|
( )
|
||||||
|
|
@ -61,305 +68,312 @@
|
||||||
~~~~~" "~~~~~~~~~~~~~~~~~~~~~~~~
|
~~~~~" "~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
</pre></div>
|
</pre></div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Hoi, welcome to my comfy website! (＾▽＾)
|
Hoi, welcome to my comfy website! (＾▽＾)
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
I am <a target="_blank" href="https://akkos.fritu.re/fristi">@Fristi</a>, a programmer from the Netherlands. On this website you can find
|
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!
|
more info about me, my server and my personal projects. Enjoy!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-tab" id="blogs">
|
<div class="content-tab" id="blogs">
|
||||||
<h1>Blog posts</h1>
|
<h1>Blog posts</h1>
|
||||||
<p>
|
<p>
|
||||||
My blog posts are now hosted here! See the archive below.
|
My blog posts are now hosted here! See the archive below.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>2023</h2>
|
<h2>2023</h2>
|
||||||
<table class="blog-table">
|
<table class="blog-table">
|
||||||
<tr>
|
<tr>
|
||||||
<td>03 Feb</td>
|
<td>03 Feb</td>
|
||||||
<td>"Subcon in the new year"</td>
|
<td>"Subcon in the new year"</td>
|
||||||
<td><a href="blogs/2023/2023-02-03_subcon_in_the_new_year.md">.md</a></td>
|
<td><a href="blogs/2023/2023-02-03_subcon_in_the_new_year.md">.md</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<h2>2022</h2>
|
<h2>2022</h2>
|
||||||
<table class="blog-table">
|
<table class="blog-table">
|
||||||
<tr>
|
<tr>
|
||||||
<td>19 Nov</td>
|
<td>19 Nov</td>
|
||||||
<td>"Future of the Subcon server"</td>
|
<td>"Future of the Subcon server"</td>
|
||||||
<td><a href="blogs/2022/2022-11-19_future_of_the_subcon_server.md">.md</a></td>
|
<td><a href="blogs/2022/2022-11-19_future_of_the_subcon_server.md">.md</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>07 Oct</td>
|
<td>07 Oct</td>
|
||||||
<td>"Fresh Blog!"</td>
|
<td>"Fresh Blog!"</td>
|
||||||
<td><a href="blogs/2022/2022-10-07_fresh_blog.md">.md</a></td>
|
<td><a href="blogs/2022/2022-10-07_fresh_blog.md">.md</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-tab" id="links">
|
<div class="content-tab" id="links">
|
||||||
<h1>Links</h1>
|
<h1>Links</h1>
|
||||||
<p>These are some links to stuff that I make or endorse. Check it out!</p>
|
<p>These are some links to stuff that I make or endorse. Check it out!</p>
|
||||||
|
|
||||||
<h2>My websites</h2>
|
<h2>My websites</h2>
|
||||||
<table class="link-table">
|
<table class="link-table">
|
||||||
<tr>
|
<tr>
|
||||||
<td style="width: 160px;"><a href="https://comfitu.re">Comfitu.re</a>:</td>
|
<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>My personal website, the one you're reading now.</td>
|
||||||
<td><a href="https://factory.subcon.town/fristi/comfitu.re">Source</a></td>
|
<td style="width: 80px;"><a href="https://factory.subcon.town/fristi/comfitu.re">Source</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="https://subcon.town/">Subcon Town</a>:</td>
|
<td><a href="https://subcon.town/">Subcon Town</a>:</td>
|
||||||
<td>My server and tilde community webpage. </td>
|
<td>My server and tilde community webpage. </td>
|
||||||
<td><a href="https://factory.subcon.town/fristi/subcon.town">Source</a></td>
|
<td><a href="https://factory.subcon.town/fristi/subcon.town">Source</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="https://archive.comfitu.re/">Media Archive</a>:</td>
|
<td><a href="https://archive.comfitu.re/">Media Archive</a>:</td>
|
||||||
<td>A repository of funny videos and flash animations.</td>
|
<td>A repository of funny videos and flash animations.</td>
|
||||||
<td><a href="https://factory.subcon.town/fristi/media-archive-php">Source</a></td>
|
<td><a href="https://factory.subcon.town/fristi/media-archive-php">Source</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="https://air.fritu.re">Airfryer stream</a>:</td>
|
<td><a href="https://air.fritu.re">Airfryer stream</a>:</td>
|
||||||
<td>Sometimes I stream stuff, you can watch it here.</td>
|
<td>Sometimes I stream stuff, you can watch it here.</td>
|
||||||
<td><a href="https://owncast.online/">Source</a></td>
|
<td><a href="https://owncast.online/">Source</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<h2>Cool websites by others</h2>
|
<h2>Cool websites by others</h2>
|
||||||
<table class="link-table">
|
<table class="link-table">
|
||||||
<tr>
|
<tr>
|
||||||
<td style="width: 160px;"><a href="https://tilde.cafe">Tilde Café</a>:</td>
|
<td style="width: 160px;"><a href="https://tilde.cafe">Tilde Café</a>:</td>
|
||||||
<td>One of the older tilde communities around that I took inspiration from.</td>
|
<td>One of the older tilde communities around that I took inspiration from.</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="https://toast.cafe/">Toast Café</a>:</td>
|
<td><a href="https://toast.cafe/">Toast Café</a>:</td>
|
||||||
<td>Cool tilde community ran by a toasted friend.</td>
|
<td>Cool tilde community ran by a toasted friend.</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="https://craftplacer.moe/">Craftplacer.moe</a>:</td>
|
<td><a href="https://craftplacer.moe/">Craftplacer.moe</a>:</td>
|
||||||
<td>Webdesign that screams "yes, I still <i>surf</i> the web."</td>
|
<td>Webdesign that screams "yes, I still <i>surf</i> the web."</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="https://fediring.net/">Fediring</a>:</td>
|
<td><a href="https://fediring.net/">Fediring</a>:</td>
|
||||||
<td>A classic webring used by fediverse users.</td>
|
<td>A classic webring used by fediverse users.</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<h2>Projects</h2>
|
<h2>Projects</h2>
|
||||||
<table class="list-table">
|
<table class="list-table">
|
||||||
<tr>
|
<tr>
|
||||||
<td style="width: 160px;"><a href="https://akkoma.dev/AkkomaGang/akkoma">Akkoma</a>:</td>
|
<td style="width: 160px;"><a href="https://akkoma.dev/AkkomaGang/akkoma">Akkoma</a>:</td>
|
||||||
<td>
|
<td>
|
||||||
A fork of the popular Pleroma ActivityPub server. I help with translations
|
A fork of the popular Pleroma ActivityPub server. I help with translations
|
||||||
and rarely with bug reporting.
|
and rarely with bug reporting.
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="https://factory.subcon.town/fristi/pleroma-themes">Pleroma Themes</a>:</td>
|
<td><a href="https://factory.subcon.town/fristi/pleroma-themes">Pleroma Themes</a>:</td>
|
||||||
<td>A collection of themes I've made for use with Pleroma/Akkoma.</td>
|
<td>A collection of themes I've made for use with Pleroma/Akkoma.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="https://factory.subcon.town/fristi/console-writer">Console Writer</a>:</td>
|
<td><a href="https://factory.subcon.town/fristi/console-writer">Console Writer</a>:</td>
|
||||||
<td>A small symfony/laravel package with improved console input/output handling.</td>
|
<td>A small symfony/laravel package with improved console input/output handling.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="https://factory.subcon.town/fristi">Other stuff</a>:</td>
|
<td><a href="https://factory.subcon.town/fristi">Other stuff</a>:</td>
|
||||||
<td>There's more on my private gogs instance. Some of it is old and abandoned though.</td>
|
<td>There's more on my private gogs instance. Some of it is old and abandoned though.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="content-tab" id="contact">
|
<div class="content-tab" id="contact">
|
||||||
<h1>Contact information</h1>
|
<h1>Contact information</h1>
|
||||||
<p>
|
<p>
|
||||||
Want to send me a message? You can contact me here:
|
Want to send me a message? You can contact me here:
|
||||||
</p>
|
</p>
|
||||||
<table>
|
<table>
|
||||||
<tr><td>Email:</td><td><a class="em" href="#">fristi「AT」subcon.town</a></td></tr>
|
<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>
|
<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>
|
</table>
|
||||||
<p>
|
<p>
|
||||||
You can also ask me questions on retrospring! <a target="_blank" href="https://retrospring.net/@fristi">Go to retrospring</a>
|
You can also ask me questions on retrospring! <a target="_blank" href="https://retrospring.net/@fristi">Go to retrospring</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-tab" id="copyright">
|
<div class="content-tab" id="copyright">
|
||||||
<h1>Copyright notice</h1>
|
<h1>Copyright notice</h1>
|
||||||
<p>
|
<p>
|
||||||
This software (being this website and its contents), are licensed under the
|
This software (being this website and its contents), are licensed under the
|
||||||
Blue Oak Model License 1.0.0, except for third party works used that are not
|
Blue Oak Model License 1.0.0, except for third party works used that are not
|
||||||
owned by me. These will be listed separately below under "Third party works".
|
owned by me. These will be listed separately below under "Third party works".
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
A copy of the Blue Oak Model License may be viewed <a target="_blank" href="LICENSE">here</a>.<br/>
|
A copy of the Blue Oak Model License may be viewed <a target="_blank" href="LICENSE">here</a>.<br/>
|
||||||
Additionally, the website source code can be viewed
|
Additionally, the website source code can be viewed
|
||||||
<a target="_blank" href="https://factory.subcon.town/fristi/comfitu.re">here</a>.
|
<a target="_blank" href="https://factory.subcon.town/fristi/comfitu.re">here</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>Third party works</h2>
|
<h2>Third party works</h2>
|
||||||
<p>
|
<p>
|
||||||
This website uses the following third party works:
|
This website uses the following third party works:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<table class="link-table">
|
<table class="link-table">
|
||||||
<tr>
|
<tr>
|
||||||
<td>- <a href="https://www.ibm.com/plex/">IBM Plex Fonts</a> by IBM.</td>
|
<td>- <a href="https://www.ibm.com/plex/">IBM Plex Fonts</a> by IBM.</td>
|
||||||
<td><a href="./fonts/IBM-Plex-Mono/license.txt">License</a></td>
|
<td><a href="./fonts/IBM-Plex-Mono/license.txt">License</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>- <a href="https://int10h.org/oldschool-pc-fonts/">Old School PC Fonts</a> by VileR.</td>
|
<td>- <a href="https://int10h.org/oldschool-pc-fonts/">Old School PC Fonts</a> by VileR.</td>
|
||||||
<td><a href="https://int10h.org/oldschool-pc-fonts/readme/#legal_stuff">License</a></td>
|
<td><a href="https://int10h.org/oldschool-pc-fonts/readme/#legal_stuff">License</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>- <a href="https://github.com/showdownjs/showdown">Showdown.js</a> for rendering markdown files.</td>
|
<td>- <a href="https://github.com/showdownjs/showdown">Showdown.js</a> for rendering markdown files.</td>
|
||||||
<td><a href="./vendor/showdownjs/showdown/LICENSE">License</a></td>
|
<td><a href="./vendor/showdownjs/showdown/LICENSE">License</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
- Background images and various images used in blog entries are not owned by me.
|
- Background images and various images used in blog entries are not owned by me.
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
I do not claim any rights to these third party works.
|
I do not claim any rights to these third party works.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>Complaints</h2>
|
<h2>Complaints</h2>
|
||||||
<p>
|
<p>
|
||||||
If you feel any material is incorrectly used on this website, or otherwise
|
If you feel any material is incorrectly used on this website, or otherwise
|
||||||
infringes on your rights, feel free to file a complaint with
|
infringes on your rights, feel free to file a complaint with
|
||||||
<a class="em" href="#">fristi「AT」subcon.town</a>.
|
<a class="em" href="#">fristi「AT」subcon.town</a>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-tab" id="changelog">
|
<div class="content-tab" id="changelog">
|
||||||
<h1>Changelog</h1>
|
<h1>Changelog</h1>
|
||||||
<ul>
|
<ul>
|
||||||
1.6.3 Patch:
|
1.7.0 Minor update:
|
||||||
<li>Fixed links pointing to the old gitea server, which has been replaced.</li>
|
<li>Added CSS variables for terminal color palettes.</li>
|
||||||
<li>Enabled table rendering for blog articles.</li>
|
<li>Added window decoration to the "terminal window".</li>
|
||||||
</ul>
|
<li>Added support for linking to blog articles to be opened in the website.</li>
|
||||||
<ul>
|
</ul>
|
||||||
1.6.2 Patch:
|
<ul>
|
||||||
<li>Fixed rendering of ordered lists in blog posts.</li>
|
1.6.3 Patch:
|
||||||
<li>Added a new blog post.</li>
|
<li>Fixed links pointing to the old gitea server, which has been replaced.</li>
|
||||||
</ul>
|
<li>Enabled table rendering for blog articles.</li>
|
||||||
<ul>
|
</ul>
|
||||||
1.6.1 Patch:
|
<ul>
|
||||||
<li>Updated copyright notice to provide proper attribution to third party works used on this website.</li>
|
1.6.2 Patch:
|
||||||
<li>Added license document for showndown.js.</li>
|
<li>Fixed rendering of ordered lists in blog posts.</li>
|
||||||
</ul>
|
<li>Added a new blog post.</li>
|
||||||
<ul>
|
</ul>
|
||||||
Blog update:
|
<ul>
|
||||||
<li>Removed old blog posts, starting from fresh.</li>
|
1.6.1 Patch:
|
||||||
</ul>
|
<li>Updated copyright notice to provide proper attribution to third party works used on this website.</li>
|
||||||
<ul>
|
<li>Added license document for showndown.js.</li>
|
||||||
1.6.0 Minor update:
|
</ul>
|
||||||
<li>Reorganized all content</li>
|
<ul>
|
||||||
<li>Blog reader will now expand the desktop view for better reading</li>
|
Blog update:
|
||||||
<li>Blog reader is now styled with more readable font and elements</li>
|
<li>Removed old blog posts, starting from fresh.</li>
|
||||||
<li>Log player has been removed</li>
|
</ul>
|
||||||
<li>Added email links, but obfuscated them to deter bot abuse</li>
|
<ul>
|
||||||
</ul>
|
1.6.0 Minor update:
|
||||||
<ul>
|
<li>Reorganized all content</li>
|
||||||
1.5.1 Patch:
|
<li>Blog reader will now expand the desktop view for better reading</li>
|
||||||
<li>Added colored logo</li>
|
<li>Blog reader is now styled with more readable font and elements</li>
|
||||||
<li>Added many more backgrounds, allowing images up to 500kb</li>
|
<li>Log player has been removed</li>
|
||||||
<li>Refactored css and provided better styling for blog posts</li>
|
<li>Added email links, but obfuscated them to deter bot abuse</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul>
|
<ul>
|
||||||
1.5.0 Minor update:
|
1.5.1 Patch:
|
||||||
<li>Added blog posts and audio logs</li>
|
<li>Added colored logo</li>
|
||||||
<li>Added reader for blog posts (reverts to download without javascript)</li>
|
<li>Added many more backgrounds, allowing images up to 500kb</li>
|
||||||
<li>Added player for audio logs (reverts to download without javascript)</li>
|
<li>Refactored css and provided better styling for blog posts</li>
|
||||||
<li>Merged websites and projects tabs</li>
|
</ul>
|
||||||
<li>Updated copyright notice</li>
|
<ul>
|
||||||
<li>Updated theme a little</li>
|
1.5.0 Minor update:
|
||||||
</ul>
|
<li>Added blog posts and audio logs</li>
|
||||||
<ul>
|
<li>Added reader for blog posts (reverts to download without javascript)</li>
|
||||||
1.4.4 Patch:
|
<li>Added player for audio logs (reverts to download without javascript)</li>
|
||||||
<li>Updated links and blog website</li>
|
<li>Merged websites and projects tabs</li>
|
||||||
<li>Removed email references due to bad actors</li>
|
<li>Updated copyright notice</li>
|
||||||
</ul>
|
<li>Updated theme a little</li>
|
||||||
<ul>
|
</ul>
|
||||||
1.4.3 Patch:
|
<ul>
|
||||||
<li>Swapped backgrounds, maximum size is 200kb</li>
|
1.4.4 Patch:
|
||||||
</ul>
|
<li>Updated links and blog website</li>
|
||||||
<ul>
|
<li>Removed email references due to bad actors</li>
|
||||||
1.4.2 Patch:
|
</ul>
|
||||||
<li>Added fediring links</li>
|
<ul>
|
||||||
<li>Improved mobile support of the header section</li>
|
1.4.3 Patch:
|
||||||
<li>Added some more motd lines</li>
|
<li>Swapped backgrounds, maximum size is 200kb</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul>
|
<ul>
|
||||||
1.4.1 Patch:
|
1.4.2 Patch:
|
||||||
<li>Added "viewport" meta tag to fix responsiveness</li>
|
<li>Added fediring links</li>
|
||||||
</ul>
|
<li>Improved mobile support of the header section</li>
|
||||||
<ul>
|
<li>Added some more motd lines</li>
|
||||||
1.4.0 Minor update:
|
</ul>
|
||||||
<li>Added responsive sizing for mobile support</li>
|
<ul>
|
||||||
<li>Updated visual style of the "terminal"</li>
|
1.4.1 Patch:
|
||||||
<li>Removed a few lower-quality backgrounds</li>
|
<li>Added "viewport" meta tag to fix responsiveness</li>
|
||||||
<li>Updated footer with direct link to source</li>
|
</ul>
|
||||||
<li>Refreshed content a bit</li>
|
<ul>
|
||||||
<li>Added randomized motd under version number</li>
|
1.4.0 Minor update:
|
||||||
</ul>
|
<li>Added responsive sizing for mobile support</li>
|
||||||
<ul>
|
<li>Updated visual style of the "terminal"</li>
|
||||||
1.3.1 Patch:
|
<li>Removed a few lower-quality backgrounds</li>
|
||||||
<li>Set background image rendering to "crisp-edges"</li>
|
<li>Updated footer with direct link to source</li>
|
||||||
</ul>
|
<li>Refreshed content a bit</li>
|
||||||
<ul>
|
<li>Added randomized motd under version number</li>
|
||||||
1.3.0 Minor update:
|
</ul>
|
||||||
<li>Updated site texts</li>
|
<ul>
|
||||||
<li>Fixed git links to now direct to vcs.subcon.town</li>
|
1.3.1 Patch:
|
||||||
<li>Updated personal contact info</li>
|
<li>Set background image rendering to "crisp-edges"</li>
|
||||||
<li>Fixed css issue causing scrollbars to appear when not needed</li>
|
</ul>
|
||||||
<li>Added more backgrounds</li>
|
<ul>
|
||||||
</ul>
|
1.3.0 Minor update:
|
||||||
<ul>
|
<li>Updated site texts</li>
|
||||||
1.2.2 Patch:
|
<li>Fixed git links to now direct to vcs.subcon.town</li>
|
||||||
<li>Cleaned up javascript code</li>
|
<li>Updated personal contact info</li>
|
||||||
<li>Fixed issue with doubly loading wallpaper</li>
|
<li>Fixed css issue causing scrollbars to appear when not needed</li>
|
||||||
<li>Added version query string to css and javascript urls to prevent cache issues</li>
|
<li>Added more backgrounds</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul>
|
<ul>
|
||||||
1.2.1 Patch:
|
1.2.2 Patch:
|
||||||
<li>Set a default background image for the no-javascript crowd</li>
|
<li>Cleaned up javascript code</li>
|
||||||
<li>Added this changelog to the website</li>
|
<li>Fixed issue with doubly loading wallpaper</li>
|
||||||
</ul>
|
<li>Added version query string to css and javascript urls to prevent cache issues</li>
|
||||||
<ul>
|
</ul>
|
||||||
1.2.0 Minor update:
|
<ul>
|
||||||
<li>Added blogs content</li>
|
1.2.1 Patch:
|
||||||
</ul>
|
<li>Set a default background image for the no-javascript crowd</li>
|
||||||
<ul>
|
<li>Added this changelog to the website</li>
|
||||||
1.1.0 Minor update:
|
</ul>
|
||||||
<li>Updated missing content</li>
|
<ul>
|
||||||
</ul>
|
1.2.0 Minor update:
|
||||||
<p>
|
<li>Added blogs content</li>
|
||||||
1.0.0 Initial release
|
</ul>
|
||||||
</p>
|
<ul>
|
||||||
</div>
|
1.1.0 Minor update:
|
||||||
<div class="content-tab hide" id="reader">
|
<li>Updated missing content</li>
|
||||||
<!-- initially empty and inaccessible -->
|
</ul>
|
||||||
</div>
|
<p>
|
||||||
</main>
|
1.0.0 Initial release
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="content-tab hide" id="reader">
|
||||||
|
<!-- initially empty and inaccessible -->
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div style="float:left;">
|
<div style="float:left;">
|
||||||
<a href="https://fediring.net/previous?host=comfitu.re">←</a>
|
<a href="https://fediring.net/previous?host=comfitu.re">←</a>
|
||||||
<a href="https://fediring.net/">Fediring</a>
|
<a href="https://fediring.net/">Fediring</a>
|
||||||
<a href="https://fediring.net/next?host=comfitu.re">→</a>
|
<a href="https://fediring.net/next?host=comfitu.re">→</a>
|
||||||
</div>
|
</div>
|
||||||
<div style="text-align: right"> © 2021-2022 comfitu.re.
|
<div style="text-align: right"> © 2021-2022 comfitu.re.
|
||||||
<a href="#copyright">License</a>
|
<a href="#copyright">License</a>
|
||||||
<a target="_blank" href="https://factory.subcon.town/fristi/comfitu.re">Source</a>
|
<a target="_blank" href="https://factory.subcon.town/fristi/comfitu.re">Source</a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
19
script.js
19
script.js
|
|
@ -91,10 +91,13 @@
|
||||||
ajax(href, response => {
|
ajax(href, response => {
|
||||||
let converter = new showdown.Converter({'tables': true});
|
let converter = new showdown.Converter({'tables': true});
|
||||||
reader.innerHTML = converter.makeHtml(response);
|
reader.innerHTML = converter.makeHtml(response);
|
||||||
|
window.location.hash = href;
|
||||||
|
content.classList.add('expand');
|
||||||
}, () => {
|
}, () => {
|
||||||
reader.innerHTML = "<h1>Could not load resource.</h1> <p>An error occurred, unable to display blog post.</p>";
|
reader.innerHTML = "<h1>Could not load resource.</h1> <p>An error occurred, unable to display blog post.</p>";
|
||||||
|
content.classList.add('expand');
|
||||||
});
|
});
|
||||||
content.classList.add('expand');
|
|
||||||
readerBtn.classList.remove('hide');
|
readerBtn.classList.remove('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -117,8 +120,20 @@
|
||||||
element.classList.add('hide');
|
element.classList.add('hide');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let hash = window.location.hash ? window.location.hash : '#home';
|
||||||
|
|
||||||
//Activate content matching hash in url (or home instead)
|
//Activate content matching hash in url (or home instead)
|
||||||
switchActiveContent(window.location.hash ? window.location.hash : "#home");
|
if(hash.includes('blogs/')) {
|
||||||
|
let url = hash.slice(1);
|
||||||
|
if(document.querySelector('a[href="'+url+'"]')) {
|
||||||
|
switchActiveContent('#reader');
|
||||||
|
loadReaderFile(url);
|
||||||
|
} else {
|
||||||
|
switchActiveContent('#home');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
switchActiveContent(hash);
|
||||||
|
}
|
||||||
|
|
||||||
//Add click event handlers for header/footer links
|
//Add click event handlers for header/footer links
|
||||||
document.querySelectorAll('header, footer').forEach(element => {
|
document.querySelectorAll('header, footer').forEach(element => {
|
||||||
|
|
|
||||||
159
style.css
159
style.css
|
|
@ -4,39 +4,65 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--fg-color: #e6e1dc;
|
/* Color palette */
|
||||||
--bg-color: rgba(43, 43, 43, 0.95);
|
--color-fg: #d0d0d0;
|
||||||
--border-color: #000000;
|
--color-bg: #151515;
|
||||||
--shadow-color: rgba(0, 0, 0, .9);
|
--color-cursor: var(--color-fg);
|
||||||
--accent-1-color: #ffc66d;
|
--color-0: #151515; --color-8: #505050;
|
||||||
--accent-2-color: #a5c261;
|
--color-1: #ac4142; --color-9: #ac4142;
|
||||||
--accent-3-color: #6d9cbe;
|
--color-2: #90a959; --color-10: #90a959;
|
||||||
--font-size: 16px;
|
--color-3: #f4bf75; --color-11: #f4bf75;
|
||||||
|
--color-4: #6a9fb5; --color-12: #6a9fb5;
|
||||||
|
--color-5: #aa759f; --color-13: #aa759f;
|
||||||
|
--color-6: #75b5aa; --color-14: #75b5aa;
|
||||||
|
--color-7: #d0d0d0; --color-15: #f5f5f5;
|
||||||
|
|
||||||
|
/* Font, character sizings and relative paddings */
|
||||||
|
--font-family: IBMVGA8, monospace;
|
||||||
|
--char-height: 16px;
|
||||||
|
--char-width: 8px;
|
||||||
|
--padding-1x: var(--char-width);
|
||||||
|
--padding-2x: calc(var(--padding-1x) * 2);
|
||||||
|
|
||||||
|
/* Text settings */
|
||||||
|
--text-bold: normal;
|
||||||
|
--text-italic: italic;
|
||||||
|
|
||||||
|
/* Color scheme */
|
||||||
|
--color-interactive: var(--color-3);
|
||||||
|
--color-interactive-accent: var(--color-11);
|
||||||
|
--color-text-emphasize: var(--color-4);
|
||||||
|
--color-code: var(--color-2);
|
||||||
|
--color-mark: var(--color-5);
|
||||||
|
--color-table-heading-bg: var(--color-7);
|
||||||
|
--color-table-heading-fg: var(--color-bg);
|
||||||
|
--color-border: #000000;
|
||||||
|
--color-shadow: rgba(0, 0, 0, .9);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Defaults, Resets */
|
/* Defaults, Resets */
|
||||||
html, body, div, span, hr, p, ul, ol, blockquote, table, code, pre, h1, h2, h3, h4, h5, h6 {
|
html, body, div, span, hr, p, ul, ol, blockquote, table, tr, td, th, code, pre, h1, h2, h3, h4, h5, h6 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body, h1, h2, h3, h4, h5, h6, pre, code {
|
body, h1, h2, h3, h4, h5, h6, pre, code {
|
||||||
font-family: IBMVGA8, monospace;
|
font-family: var(--font-family);
|
||||||
font-size: var(--font-size);
|
font-size: var(--char-height);
|
||||||
line-height: var(--font-size);
|
line-height: var(--char-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
.background, .container, .content {
|
.background, .container, .window {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.background, .content {
|
.background, .window {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container, header, main, footer, .player {
|
.container, .content, .titlebar, header, main, footer, .player {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -58,16 +84,49 @@ body, h1, h2, h3, h4, h5, h6, pre, code {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.window {
|
||||||
|
border-radius: 5px 5px 0 0;
|
||||||
|
border-top: 1px solid #999;
|
||||||
|
background: linear-gradient(180deg, rgb(86, 91, 96) 0%, rgb(56, 62, 73) 18px, rgb(46, 51, 59) 19px);
|
||||||
|
padding: 2px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar {
|
||||||
|
color: #fff;
|
||||||
|
padding: 6px 3px;
|
||||||
|
font-family: "IBM Plex Mono", monospace;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 9pt;
|
||||||
|
text-shadow: 1px 2px 0px #000;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar .btn {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 2px 5px 4px 5px;
|
||||||
|
margin: -5px 0 0 3px;
|
||||||
|
font-size: 16pt;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background: linear-gradient(135deg, rgba(50,50,50,1) 0%, rgba(78,78,78,1) 28%, rgba(105,105,105,1) 60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar .btn.close {
|
||||||
|
background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(251, 103, 103) 28%, rgb(253, 29, 29) 60%);
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding:8px;
|
padding: var(--padding-2x);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
background-color: var(--bg-color);
|
background-color: var(--color-bg);
|
||||||
color: var(--fg-color);
|
color: var(--color-fg);
|
||||||
border: 2px solid var(--border-color);
|
flex: 1 1 auto;
|
||||||
box-shadow: 8px 8px 0 var(--shadow-color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header, main, footer {
|
header, main, footer {
|
||||||
|
|
@ -78,8 +137,8 @@ header, main, footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
margin: 16px 0;
|
margin: var(--padding-2x) 0;
|
||||||
padding: 0 16px;
|
padding: 0 var(--padding-2x);
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
@ -92,7 +151,7 @@ main {
|
||||||
/* Content */
|
/* Content */
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--accent-1-color);
|
color: var(--color-interactive);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -100,21 +159,21 @@ a:before { content: '['; }
|
||||||
a:after { content: ']'; }
|
a:after { content: ']'; }
|
||||||
|
|
||||||
a:hover, a:active {
|
a:hover, a:active {
|
||||||
background-color: var(--accent-1-color);
|
background-color: var(--color-interactive);
|
||||||
color: var(--bg-color);
|
color: var(--color-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.active {
|
a.active {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
b:not(#reader b), strong:not(#reader strong) { font-weight: normal; }
|
b:not(#reader b), strong:not(#reader strong) { font-weight: var(--text-bold); }
|
||||||
b, strong, blockquote { color: var(--accent-2-color); }
|
i:not(#reader i), em:not(#reader em) { font-style: vaR(--text-italic); }
|
||||||
|
b, strong, blockquote, i, em { color: var(--color-text-emphasize); }
|
||||||
code { font-weight: 400; color: var(--accent-3-color); }
|
code { font-weight: normal; color: var(--color-code); }
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, p, ul, ol, table, blockquote, hr {
|
h1, h2, h3, h4, h5, h6, p, ul, ol, table, blockquote, hr {
|
||||||
margin-bottom: 16px;
|
margin-bottom: var(--padding-2x);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-tab p:last-child {
|
.content-tab p:last-child {
|
||||||
|
|
@ -134,8 +193,8 @@ h5:not(#reader h5):before { content: '##### '; }
|
||||||
h6:not(#reader h6):before { content: '###### '; }
|
h6:not(#reader h6):before { content: '###### '; }
|
||||||
|
|
||||||
mark {
|
mark {
|
||||||
background-color: var(--accent-2-color);
|
background-color: var(--color-mark);
|
||||||
color: var(--bg-color);
|
color: var(--color-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul { list-style: none; }
|
ul { list-style: none; }
|
||||||
|
|
@ -154,27 +213,27 @@ table {
|
||||||
}
|
}
|
||||||
|
|
||||||
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:first-child { width: 96px; color: var(--color-4); }
|
||||||
table.blog-table tr td:nth-child(2) { color: var(--accent-3-color); }
|
table.blog-table tr td:nth-child(2) { color: var(--color-2); }
|
||||||
table.blog-table tr td:last-child { width: 114px; text-align: right; }
|
table.blog-table tr td:last-child { width: 114px; text-align: right; }
|
||||||
|
|
||||||
/* Reader Content */
|
/* Reader Content */
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
border-left: 4px solid var(--accent-2-color);
|
border-left: 4px solid var(--color-text-emphasize);
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#reader pre {
|
#reader pre {
|
||||||
color: var(--accent-3-color);
|
color: var(--color-text-emphasize);
|
||||||
border-left: 4px solid var(--accent-3-color);
|
border-left: 4px solid var(--color-text-emphasize);
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
margin: 1rem 0 2rem 0;
|
margin: 1rem 0 2rem 0;
|
||||||
border: none;
|
border: none;
|
||||||
border-top: 1px solid var(--fg-color);
|
border-top: 1px solid var(--color-fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
#reader p {
|
#reader p {
|
||||||
|
|
@ -182,10 +241,6 @@ hr {
|
||||||
margin: 0 0 1.5rem 0
|
margin: 0 0 1.5rem 0
|
||||||
}
|
}
|
||||||
|
|
||||||
#reader i, #reader em {
|
|
||||||
color: var(--accent-3-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
#reader,
|
#reader,
|
||||||
#reader h1, #reader h2, #reader h3,
|
#reader h1, #reader h2, #reader h3,
|
||||||
#reader h4, #reader h5, #reader h6{
|
#reader h4, #reader h5, #reader h6{
|
||||||
|
|
@ -209,6 +264,10 @@ hr {
|
||||||
#reader h5 { font-size: .9rem; 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; }
|
#reader h6 { font-size: .75rem; margin: 1rem 0 .4rem 0; }
|
||||||
|
|
||||||
|
#reader table { margin: 0 0 1.5rem 0; }
|
||||||
|
#reader table thead { background-color: var(--color-table-heading-bg); color: var(--color-table-heading-fg); }
|
||||||
|
#reader table tbody tr:not(:last-child) { border-bottom: 1px solid var(--color-table-heading-bg); line-height:calc(1.5rem - 1px); }
|
||||||
|
|
||||||
/* Special */
|
/* Special */
|
||||||
|
|
||||||
#ascii {
|
#ascii {
|
||||||
|
|
@ -226,17 +285,23 @@ hr {
|
||||||
|
|
||||||
|
|
||||||
@media only screen and (min-width: 864px) {
|
@media only screen and (min-width: 864px) {
|
||||||
.content {
|
.window {
|
||||||
|
display: block;
|
||||||
|
width: unset;
|
||||||
|
height: unset;
|
||||||
left: 32px;
|
left: 32px;
|
||||||
bottom: 32px;
|
bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
height: 596px;
|
height: 592px;
|
||||||
padding:16px;
|
padding: 16px 16px;
|
||||||
transition: height .5s;
|
transition: height .66s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content.expand {
|
.content.expand {
|
||||||
height: calc(100% - 64px);
|
height: calc(100vh - 64px - 32px);
|
||||||
}
|
}
|
||||||
|
|
||||||
#reader {
|
#reader {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue