1.6.0 minor release, revamped blog reader.

+ reorganized all content, removed some
+ removed log player
+ added back email links with obfuscation

blogs/2022/2022-10-07_fresh_blog.md

@@ -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!
+
+![Cute Kosuzu!](/img/3a26bbd5804e3b35b7ee97e1bca03205.jpg)

fonts/IBM-Plex-Mono/font.css

@@ -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 */
+}

fonts/IBM-Plex-Mono/license.txt

@@ -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.

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">Blog</a>
-                    | <a href="#blogs">Blogs</a>
+                    | <a href="#links">Links</a>
-                    | <a href="#logs">Logs</a>
+                    | <a href="#contact">Contact</a>
-                    | <a href="#projects">Projects</a>
+                    <a href="#blogs" class="reader-close hide">Close</a><br/>
-                    | <a href="#contact">Contact</a><br/>
                 </div>
             </header>
 
@@ -62,147 +62,97 @@
                 </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
+                        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. If you'd like to chat,
+                        more info about me, my server and my personal projects. Enjoy!
-                        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.
                     </p>
                 </div>
                 <div class="content-tab" id="blogs">
-                    <div class="tab-main">
+                    <h1>Blog posts</h1>
-                        <h1>Blog posts</h1>
-                        <p>
-                            My blog posts are now hosted here! See the archive below.
-                        </p>
-
-                        <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>
-                            </tr>
-                        </table>
-                    </div>
-                    <div class="reader hide">
-                        <p>
-                            <a href="#blogs" class="times">&lt;&lt; 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.
+                        My blog posts are now hosted here! See the archive below.
                     </p>
 
                     <h2>2022</h2>
-                    <table class="log-table">
+                    <table class="blog-table">
                         <tr>
-                            <td>18 Apr 2022</td>
+                            <td>07 Oct</td>
-                            <td>"Log #1: Favorite Video Games"</td>
+                            <td>"Fresh Blog!"</td>
-                            <td>
+                            <td><a href="blogs/2022/2022-10-07_fresh_blog.md">.md</a></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">
+                <div class="content-tab" id="links">
-                    <h1>Projects</h1>
+                    <h1>Links</h1>
-                    <p>
+                    <p>These are some links to stuff that I make or endorse. Check it out!</p>
-                        Currently I maintain a few websites and packages, see below.
-                    </p>
 
                     <h2>Websites</h2>
-                    <ul>
+                    <table class="link-table">
-                        <li>
+                        <tr>
-                            <a href="https://subcon.town/">Subcon Town</a>:
+                            <td style="width: 160px;"><a href="https://comfitu.re">Comfitu.re</a>:</td>
-                            the main website of my personal server.
+                            <td>My personal website, the one you're reading now.</td>
-                            <a href="https://vcs.subcon.town/fristi/subcon.town">Source</a>
+                            <td><a href="https://vcs.subcon.town/fristi/comfitu.re">Source</a></td>
-                        </li>
+                        </tr>
-                        <li>
+                        <tr>
-                            <a href="https://comfitu.re">Comfiture</a>:
+                            <td><a href="https://subcon.town/">Subcon Town</a>:</td>
-                            my personal website, the one you're reading now.
+                            <td>My personal server and tilde community. The site lists users and services.</td>
-                            <a href="https://vcs.subcon.town/fristi/comfitu.re">Source</a>
+                            <td><a href="https://vcs.subcon.town/fristi/subcon.town">Source</a></td>
-                        </li>
+                        </tr>
-                    </ul>
+                        <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>
+                    <h2>Projects</h2>
-                    <ul>
+                    <table class="list-table">
-                        <li>
+                        <tr>
-                            <a href="https://vcs.subcon.town/fristi/console-writer">Console Writer</a>:
+                            <td style="width: 160px;"><a href="https://akkoma.dev/AkkomaGang/akkoma">Akkoma</a>:</td>
-                            a small symfony/laravel package with improved console input/output handling.
+                            <td>
-                        </li>
+                                a fork of the popular Pleroma ActivityPub server. I help with translations
-                        <li>
+                                and sometimes with bug reporting.
-                            A few other things I need to make available on my git repositories, check back later!
+                            </td>
-                        </li>
+                        </tr>
-                    </ul>
+                        <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,15 +271,11 @@
                         1.0.0 Initial release
                     </p>
                 </div>
+                <div class="content-tab hide" id="reader">
+                    <!-- initially empty and inaccessible -->
+                </div>
             </main>
 
-            <div class="player hide">
-                <audio controls>
-
-                </audio>
-                <span class="times">&times;</span>
-            </div>
-
             <footer>
                 <div style="float:left;">
                     <a href="https://fediring.net/previous?host=comfitu.re">←</a>
@@ -336,5 +290,7 @@
         </div>
     </div>
 
+    <script>comfiture.showAddresses();</script>
+
 </body>
 </html>

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
+    //Ajax
-    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')
-            });
-        }
-    }
-
     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;
+        switchActiveContent(window.location.hash ? window.location.hash : "#home");
-        if(!hash) hash = '#home';
-        switchActiveContent(hash);
-
-        //Set up reader and player
-        player = new Player();
-        reader = new Reader();
 
         //Add click event handlers for header/footer links
         document.querySelectorAll('header, footer').forEach(element => {
             element.addEventListener('click', event => {
-                if(event.target.tagName != 'A') return;
+                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;
 })();

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;
 }
 
-
+.reader-close {
-/* 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 {
-    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 {
+code { font-weight: 400; color: var(--accent-3-color); }
-    padding-left: 8px;
-}
 
 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: '# '; }
+h1:not(#reader h1):before { content: '# '; }
-h2:before { content: '## '; }
+h2:not(#reader h2):before { content: '## '; }
-h3:before { content: '### '; }
+h3:not(#reader h3):before { content: '### '; }
-h4:before { content: '#### '; }
+h4:not(#reader h4):before { content: '#### '; }
-h5:before { content: '##### '; }
+h5:not(#reader h5):before { content: '##### '; }
-h6: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 {
+img {
-    margin-top: 14px;
+    max-width: 100%;
-    border: none;
+    max-height: 480px;
-    border-top: 2px solid var(--fg-color);
 }
 
 table {
@@ -197,21 +153,63 @@ table {
     border: none;
 }
 
-table.blog-table tr td, table.log-table tr td {
+table tr td { vertical-align: top; }
-    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 {
+#reader pre {
-    width: 96px;
+    color: var(--accent-3-color);
-    color: var(--accent-2-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; }
+#reader,
-table.log-table tr td:last-child { width: 114px; text-align: right; }
+#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;
     }
 }