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.
|
||||
|
||||
See you later, and happy computing!
|
||||
|
||||
|
||||
634
index.html
634
index.html
|
|
@ -6,9 +6,9 @@
|
|||
<title>Comfitu.re</title>
|
||||
|
||||
<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="script.js?v=1.6.3" type="application/javascript"></script>
|
||||
<script src="script.js?v=1.7.0" type="application/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -16,30 +16,37 @@
|
|||
<script>comfiture.setupWallpaper();</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<header>
|
||||
<div class="logo" style="width: 352px; display:inline-block;">
|
||||
<pre style="color:#ffd079;"> ___ __ _ _</pre>
|
||||
<pre style="color:#ffc66d;"> / __|___ _ __ / _(_) |_ _ _ _ _ ___</pre>
|
||||
<pre style="color:#de9e5f;">| (__/ _ \ ' \| _| | _| || |_| '_/ -_)</pre>
|
||||
<pre style="color:#c18152;"> \___\___/_|_|_|_| |_|\__|\_,_(_)_| \___|</pre>
|
||||
<pre> </pre>
|
||||
</div><div style="display: inline-block; height: 48px; vertical-align: bottom;">
|
||||
<a href="#changelog">v1.6.3</a><br/>
|
||||
<script>comfiture.printMotd();</script><br/>
|
||||
<div class="window">
|
||||
<div class="titlebar">
|
||||
~><> : fish - Command Prompt
|
||||
<span style="float: right;">
|
||||
<span class="btn">-</span><span class="btn close">×</span>
|
||||
</span>
|
||||
</div>
|
||||
<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 class="content">
|
||||
<header>
|
||||
<div class="logo" style="width: 352px; display:inline-block;">
|
||||
<pre style="color:#ffd079;"> ___ __ _ _</pre>
|
||||
<pre style="color:#ffc66d;"> / __|___ _ __ / _(_) |_ _ _ _ _ ___</pre>
|
||||
<pre style="color:#de9e5f;">| (__/ _ \ ' \| _| | _| || |_| '_/ -_)</pre>
|
||||
<pre style="color:#c18152;"> \___\___/_|_|_|_| |_|\__|\_,_(_)_| \___|</pre>
|
||||
<pre> </pre>
|
||||
</div><div style="display: inline-block; height: 48px; vertical-align: bottom;">
|
||||
<a href="#changelog">v1.7.0</a><br/>
|
||||
<script>comfiture.printMotd();</script><br/>
|
||||
</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>
|
||||
<div class="content-tab" id="home">
|
||||
<div id="ascii"><pre>
|
||||
<main>
|
||||
<div class="content-tab" id="home">
|
||||
<div id="ascii"><pre>
|
||||
( )
|
||||
( )
|
||||
( )
|
||||
|
|
@ -61,305 +68,312 @@
|
|||
~~~~~" "~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
</pre></div>
|
||||
|
||||
<p>
|
||||
Hoi, welcome to my comfy website! (＾▽＾)
|
||||
</p>
|
||||
<p>
|
||||
Hoi, welcome to my comfy website! (＾▽＾)
|
||||
</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
|
||||
more info about me, my server and my personal projects. Enjoy!
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-tab" id="blogs">
|
||||
<h1>Blog posts</h1>
|
||||
<p>
|
||||
My blog posts are now hosted here! See the archive below.
|
||||
</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
|
||||
more info about me, my server and my personal projects. Enjoy!
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-tab" id="blogs">
|
||||
<h1>Blog posts</h1>
|
||||
<p>
|
||||
My blog posts are now hosted here! See the archive below.
|
||||
</p>
|
||||
|
||||
<h2>2023</h2>
|
||||
<table class="blog-table">
|
||||
<tr>
|
||||
<td>03 Feb</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>
|
||||
</tr>
|
||||
</table>
|
||||
<h2>2023</h2>
|
||||
<table class="blog-table">
|
||||
<tr>
|
||||
<td>03 Feb</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>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>2022</h2>
|
||||
<table class="blog-table">
|
||||
<tr>
|
||||
<td>19 Nov</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<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="content-tab" id="links">
|
||||
<h1>Links</h1>
|
||||
<p>These are some links to stuff that I make or endorse. Check it out!</p>
|
||||
<h2>2022</h2>
|
||||
<table class="blog-table">
|
||||
<tr>
|
||||
<td>19 Nov</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<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="content-tab" id="links">
|
||||
<h1>Links</h1>
|
||||
<p>These are some links to stuff that I make or endorse. Check it out!</p>
|
||||
|
||||
<h2>My websites</h2>
|
||||
<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://factory.subcon.town/fristi/comfitu.re">Source</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://subcon.town/">Subcon Town</a>:</td>
|
||||
<td>My server and tilde community webpage. </td>
|
||||
<td><a href="https://factory.subcon.town/fristi/subcon.town">Source</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://archive.comfitu.re/">Media Archive</a>:</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://air.fritu.re">Airfryer stream</a>:</td>
|
||||
<td>Sometimes I stream stuff, you can watch it here.</td>
|
||||
<td><a href="https://owncast.online/">Source</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<h2>My websites</h2>
|
||||
<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 style="width: 80px;"><a href="https://factory.subcon.town/fristi/comfitu.re">Source</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://subcon.town/">Subcon Town</a>:</td>
|
||||
<td>My server and tilde community webpage. </td>
|
||||
<td><a href="https://factory.subcon.town/fristi/subcon.town">Source</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://archive.comfitu.re/">Media Archive</a>:</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://air.fritu.re">Airfryer stream</a>:</td>
|
||||
<td>Sometimes I stream stuff, you can watch it here.</td>
|
||||
<td><a href="https://owncast.online/">Source</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Cool websites by others</h2>
|
||||
<table class="link-table">
|
||||
<tr>
|
||||
<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></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://toast.cafe/">Toast Café</a>:</td>
|
||||
<td>Cool tilde community ran by a toasted friend.</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://craftplacer.moe/">Craftplacer.moe</a>:</td>
|
||||
<td>Webdesign that screams "yes, I still <i>surf</i> the web."</td>
|
||||
<td></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>Cool websites by others</h2>
|
||||
<table class="link-table">
|
||||
<tr>
|
||||
<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></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://toast.cafe/">Toast Café</a>:</td>
|
||||
<td>Cool tilde community ran by a toasted friend.</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://craftplacer.moe/">Craftplacer.moe</a>:</td>
|
||||
<td>Webdesign that screams "yes, I still <i>surf</i> the web."</td>
|
||||
<td></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>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 rarely with bug reporting.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
<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 rarely with bug reporting.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div class="content-tab" id="contact">
|
||||
<h1>Contact information</h1>
|
||||
<p>
|
||||
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">
|
||||
<h1>Copyright notice</h1>
|
||||
<p>
|
||||
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
|
||||
owned by me. These will be listed separately below under "Third party works".
|
||||
</p>
|
||||
<p>
|
||||
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
|
||||
<a target="_blank" href="https://factory.subcon.town/fristi/comfitu.re">here</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-tab" id="contact">
|
||||
<h1>Contact information</h1>
|
||||
<p>
|
||||
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">
|
||||
<h1>Copyright notice</h1>
|
||||
<p>
|
||||
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
|
||||
owned by me. These will be listed separately below under "Third party works".
|
||||
</p>
|
||||
<p>
|
||||
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
|
||||
<a target="_blank" href="https://factory.subcon.town/fristi/comfitu.re">here</a>.
|
||||
</p>
|
||||
|
||||
<h2>Third party works</h2>
|
||||
<p>
|
||||
This website uses the following third party works:
|
||||
</p>
|
||||
<h2>Third party works</h2>
|
||||
<p>
|
||||
This website uses the following third party works:
|
||||
</p>
|
||||
|
||||
<table class="link-table">
|
||||
<tr>
|
||||
<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>
|
||||
</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/readme/#legal_stuff">License</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
- Background images and various images used in blog entries are not owned by me.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="link-table">
|
||||
<tr>
|
||||
<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>
|
||||
</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/readme/#legal_stuff">License</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
- Background images and various images used in blog entries are not owned by me.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p>
|
||||
I do not claim any rights to these third party works.
|
||||
</p>
|
||||
<p>
|
||||
I do not claim any rights to these third party works.
|
||||
</p>
|
||||
|
||||
<h2>Complaints</h2>
|
||||
<p>
|
||||
If you feel any material is incorrectly used on this website, or otherwise
|
||||
infringes on your rights, feel free to file a complaint with
|
||||
<a class="em" href="#">fristi「AT」subcon.town</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-tab" id="changelog">
|
||||
<h1>Changelog</h1>
|
||||
<ul>
|
||||
1.6.3 Patch:
|
||||
<li>Fixed links pointing to the old gitea server, which has been replaced.</li>
|
||||
<li>Enabled table rendering for blog articles.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.6.2 Patch:
|
||||
<li>Fixed rendering of ordered lists in blog posts.</li>
|
||||
<li>Added a new blog post.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.6.1 Patch:
|
||||
<li>Updated copyright notice to provide proper attribution to third party works used on this website.</li>
|
||||
<li>Added license document for showndown.js.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
Blog update:
|
||||
<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:
|
||||
<li>Added colored logo</li>
|
||||
<li>Added many more backgrounds, allowing images up to 500kb</li>
|
||||
<li>Refactored css and provided better styling for blog posts</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.5.0 Minor update:
|
||||
<li>Added blog posts and audio logs</li>
|
||||
<li>Added reader for blog posts (reverts to download without javascript)</li>
|
||||
<li>Added player for audio logs (reverts to download without javascript)</li>
|
||||
<li>Merged websites and projects tabs</li>
|
||||
<li>Updated copyright notice</li>
|
||||
<li>Updated theme a little</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.4.4 Patch:
|
||||
<li>Updated links and blog website</li>
|
||||
<li>Removed email references due to bad actors</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.4.3 Patch:
|
||||
<li>Swapped backgrounds, maximum size is 200kb</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.4.2 Patch:
|
||||
<li>Added fediring links</li>
|
||||
<li>Improved mobile support of the header section</li>
|
||||
<li>Added some more motd lines</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.4.1 Patch:
|
||||
<li>Added "viewport" meta tag to fix responsiveness</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.4.0 Minor update:
|
||||
<li>Added responsive sizing for mobile support</li>
|
||||
<li>Updated visual style of the "terminal"</li>
|
||||
<li>Removed a few lower-quality backgrounds</li>
|
||||
<li>Updated footer with direct link to source</li>
|
||||
<li>Refreshed content a bit</li>
|
||||
<li>Added randomized motd under version number</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.3.1 Patch:
|
||||
<li>Set background image rendering to "crisp-edges"</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.3.0 Minor update:
|
||||
<li>Updated site texts</li>
|
||||
<li>Fixed git links to now direct to vcs.subcon.town</li>
|
||||
<li>Updated personal contact info</li>
|
||||
<li>Fixed css issue causing scrollbars to appear when not needed</li>
|
||||
<li>Added more backgrounds</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.2.2 Patch:
|
||||
<li>Cleaned up javascript code</li>
|
||||
<li>Fixed issue with doubly loading wallpaper</li>
|
||||
<li>Added version query string to css and javascript urls to prevent cache issues</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.2.1 Patch:
|
||||
<li>Set a default background image for the no-javascript crowd</li>
|
||||
<li>Added this changelog to the website</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.2.0 Minor update:
|
||||
<li>Added blogs content</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.1.0 Minor update:
|
||||
<li>Updated missing content</li>
|
||||
</ul>
|
||||
<p>
|
||||
1.0.0 Initial release
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-tab hide" id="reader">
|
||||
<!-- initially empty and inaccessible -->
|
||||
</div>
|
||||
</main>
|
||||
<h2>Complaints</h2>
|
||||
<p>
|
||||
If you feel any material is incorrectly used on this website, or otherwise
|
||||
infringes on your rights, feel free to file a complaint with
|
||||
<a class="em" href="#">fristi「AT」subcon.town</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-tab" id="changelog">
|
||||
<h1>Changelog</h1>
|
||||
<ul>
|
||||
1.7.0 Minor update:
|
||||
<li>Added CSS variables for terminal color palettes.</li>
|
||||
<li>Added window decoration to the "terminal window".</li>
|
||||
<li>Added support for linking to blog articles to be opened in the website.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.6.3 Patch:
|
||||
<li>Fixed links pointing to the old gitea server, which has been replaced.</li>
|
||||
<li>Enabled table rendering for blog articles.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.6.2 Patch:
|
||||
<li>Fixed rendering of ordered lists in blog posts.</li>
|
||||
<li>Added a new blog post.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.6.1 Patch:
|
||||
<li>Updated copyright notice to provide proper attribution to third party works used on this website.</li>
|
||||
<li>Added license document for showndown.js.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
Blog update:
|
||||
<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:
|
||||
<li>Added colored logo</li>
|
||||
<li>Added many more backgrounds, allowing images up to 500kb</li>
|
||||
<li>Refactored css and provided better styling for blog posts</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.5.0 Minor update:
|
||||
<li>Added blog posts and audio logs</li>
|
||||
<li>Added reader for blog posts (reverts to download without javascript)</li>
|
||||
<li>Added player for audio logs (reverts to download without javascript)</li>
|
||||
<li>Merged websites and projects tabs</li>
|
||||
<li>Updated copyright notice</li>
|
||||
<li>Updated theme a little</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.4.4 Patch:
|
||||
<li>Updated links and blog website</li>
|
||||
<li>Removed email references due to bad actors</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.4.3 Patch:
|
||||
<li>Swapped backgrounds, maximum size is 200kb</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.4.2 Patch:
|
||||
<li>Added fediring links</li>
|
||||
<li>Improved mobile support of the header section</li>
|
||||
<li>Added some more motd lines</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.4.1 Patch:
|
||||
<li>Added "viewport" meta tag to fix responsiveness</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.4.0 Minor update:
|
||||
<li>Added responsive sizing for mobile support</li>
|
||||
<li>Updated visual style of the "terminal"</li>
|
||||
<li>Removed a few lower-quality backgrounds</li>
|
||||
<li>Updated footer with direct link to source</li>
|
||||
<li>Refreshed content a bit</li>
|
||||
<li>Added randomized motd under version number</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.3.1 Patch:
|
||||
<li>Set background image rendering to "crisp-edges"</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.3.0 Minor update:
|
||||
<li>Updated site texts</li>
|
||||
<li>Fixed git links to now direct to vcs.subcon.town</li>
|
||||
<li>Updated personal contact info</li>
|
||||
<li>Fixed css issue causing scrollbars to appear when not needed</li>
|
||||
<li>Added more backgrounds</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.2.2 Patch:
|
||||
<li>Cleaned up javascript code</li>
|
||||
<li>Fixed issue with doubly loading wallpaper</li>
|
||||
<li>Added version query string to css and javascript urls to prevent cache issues</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.2.1 Patch:
|
||||
<li>Set a default background image for the no-javascript crowd</li>
|
||||
<li>Added this changelog to the website</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.2.0 Minor update:
|
||||
<li>Added blogs content</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.1.0 Minor update:
|
||||
<li>Updated missing content</li>
|
||||
</ul>
|
||||
<p>
|
||||
1.0.0 Initial release
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-tab hide" id="reader">
|
||||
<!-- initially empty and inaccessible -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div style="float:left;">
|
||||
<a href="https://fediring.net/previous?host=comfitu.re">←</a>
|
||||
<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://factory.subcon.town/fristi/comfitu.re">Source</a>
|
||||
</div>
|
||||
</footer>
|
||||
<footer>
|
||||
<div style="float:left;">
|
||||
<a href="https://fediring.net/previous?host=comfitu.re">←</a>
|
||||
<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://factory.subcon.town/fristi/comfitu.re">Source</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
19
script.js
19
script.js
|
|
@ -91,10 +91,13 @@
|
|||
ajax(href, response => {
|
||||
let converter = new showdown.Converter({'tables': true});
|
||||
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>";
|
||||
content.classList.add('expand');
|
||||
});
|
||||
content.classList.add('expand');
|
||||
|
||||
readerBtn.classList.remove('hide');
|
||||
}
|
||||
|
||||
|
|
@ -117,8 +120,20 @@
|
|||
element.classList.add('hide');
|
||||
});
|
||||
|
||||
let hash = window.location.hash ? window.location.hash : '#home';
|
||||
|
||||
//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
|
||||
document.querySelectorAll('header, footer').forEach(element => {
|
||||
|
|
|
|||
159
style.css
159
style.css
|
|
@ -4,39 +4,65 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
--fg-color: #e6e1dc;
|
||||
--bg-color: rgba(43, 43, 43, 0.95);
|
||||
--border-color: #000000;
|
||||
--shadow-color: rgba(0, 0, 0, .9);
|
||||
--accent-1-color: #ffc66d;
|
||||
--accent-2-color: #a5c261;
|
||||
--accent-3-color: #6d9cbe;
|
||||
--font-size: 16px;
|
||||
/* Color palette */
|
||||
--color-fg: #d0d0d0;
|
||||
--color-bg: #151515;
|
||||
--color-cursor: var(--color-fg);
|
||||
--color-0: #151515; --color-8: #505050;
|
||||
--color-1: #ac4142; --color-9: #ac4142;
|
||||
--color-2: #90a959; --color-10: #90a959;
|
||||
--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 */
|
||||
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;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6, pre, code {
|
||||
font-family: IBMVGA8, monospace;
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--font-size);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--char-height);
|
||||
line-height: var(--char-height);
|
||||
}
|
||||
|
||||
.background, .container, .content {
|
||||
.background, .container, .window {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.background, .content {
|
||||
.background, .window {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.container, header, main, footer, .player {
|
||||
.container, .content, .titlebar, header, main, footer, .player {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -58,16 +84,49 @@ body, h1, h2, h3, h4, h5, h6, pre, code {
|
|||
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 {
|
||||
padding:8px;
|
||||
padding: var(--padding-2x);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
border: 2px solid var(--border-color);
|
||||
box-shadow: 8px 8px 0 var(--shadow-color);
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-fg);
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
header, main, footer {
|
||||
|
|
@ -78,8 +137,8 @@ header, main, footer {
|
|||
}
|
||||
|
||||
main {
|
||||
margin: 16px 0;
|
||||
padding: 0 16px;
|
||||
margin: var(--padding-2x) 0;
|
||||
padding: 0 var(--padding-2x);
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -92,7 +151,7 @@ main {
|
|||
/* Content */
|
||||
|
||||
a {
|
||||
color: var(--accent-1-color);
|
||||
color: var(--color-interactive);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -100,21 +159,21 @@ a:before { content: '['; }
|
|||
a:after { content: ']'; }
|
||||
|
||||
a:hover, a:active {
|
||||
background-color: var(--accent-1-color);
|
||||
color: var(--bg-color);
|
||||
background-color: var(--color-interactive);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
a.active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
b:not(#reader b), strong:not(#reader strong) { font-weight: normal; }
|
||||
b, strong, blockquote { color: var(--accent-2-color); }
|
||||
|
||||
code { font-weight: 400; color: var(--accent-3-color); }
|
||||
b:not(#reader b), strong:not(#reader strong) { font-weight: var(--text-bold); }
|
||||
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: normal; color: var(--color-code); }
|
||||
|
||||
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 {
|
||||
|
|
@ -134,8 +193,8 @@ h5:not(#reader h5):before { content: '##### '; }
|
|||
h6:not(#reader h6):before { content: '###### '; }
|
||||
|
||||
mark {
|
||||
background-color: var(--accent-2-color);
|
||||
color: var(--bg-color);
|
||||
background-color: var(--color-mark);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
ul { list-style: none; }
|
||||
|
|
@ -154,27 +213,27 @@ table {
|
|||
}
|
||||
|
||||
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:first-child { width: 96px; color: var(--color-4); }
|
||||
table.blog-table tr td:nth-child(2) { color: var(--color-2); }
|
||||
table.blog-table tr td:last-child { width: 114px; text-align: right; }
|
||||
|
||||
/* Reader Content */
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid var(--accent-2-color);
|
||||
border-left: 4px solid var(--color-text-emphasize);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
#reader pre {
|
||||
color: var(--accent-3-color);
|
||||
border-left: 4px solid var(--accent-3-color);
|
||||
color: var(--color-text-emphasize);
|
||||
border-left: 4px solid var(--color-text-emphasize);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0 2rem 0;
|
||||
border: none;
|
||||
border-top: 1px solid var(--fg-color);
|
||||
border-top: 1px solid var(--color-fg);
|
||||
}
|
||||
|
||||
#reader p {
|
||||
|
|
@ -182,10 +241,6 @@ hr {
|
|||
margin: 0 0 1.5rem 0
|
||||
}
|
||||
|
||||
#reader i, #reader em {
|
||||
color: var(--accent-3-color);
|
||||
}
|
||||
|
||||
#reader,
|
||||
#reader h1, #reader h2, #reader h3,
|
||||
#reader h4, #reader h5, #reader h6{
|
||||
|
|
@ -209,6 +264,10 @@ hr {
|
|||
#reader h5 { font-size: .9rem; 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 */
|
||||
|
||||
#ascii {
|
||||
|
|
@ -226,17 +285,23 @@ hr {
|
|||
|
||||
|
||||
@media only screen and (min-width: 864px) {
|
||||
.content {
|
||||
.window {
|
||||
display: block;
|
||||
width: unset;
|
||||
height: unset;
|
||||
left: 32px;
|
||||
bottom: 32px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 800px;
|
||||
height: 596px;
|
||||
padding:16px;
|
||||
transition: height .5s;
|
||||
height: 592px;
|
||||
padding: 16px 16px;
|
||||
transition: height .66s ease-out;
|
||||
}
|
||||
|
||||
.content.expand {
|
||||
height: calc(100% - 64px);
|
||||
height: calc(100vh - 64px - 32px);
|
||||
}
|
||||
|
||||
#reader {
|
||||
|
|
|
|||
Loading…
Reference in a new issue