diff --git a/blogs/2022/2022-10-07_fresh_blog.md b/blogs/2022/2022-10-07_fresh_blog.md new file mode 100644 index 0000000..c07825e --- /dev/null +++ b/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) diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.eot b/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.eot new file mode 100644 index 0000000..2f8c290 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.eot differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.ttf b/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.ttf new file mode 100644 index 0000000..674d441 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.ttf differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff b/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff new file mode 100644 index 0000000..540b427 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff2 b/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff2 new file mode 100644 index 0000000..dca3529 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff2 differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.eot b/fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.eot new file mode 100644 index 0000000..926ec24 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.eot differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.ttf b/fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.ttf new file mode 100644 index 0000000..a160e27 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.ttf differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.woff b/fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.woff new file mode 100644 index 0000000..d3063b8 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.woff differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.woff2 b/fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.woff2 new file mode 100644 index 0000000..893b17d Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-BoldItalic.woff2 differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Italic.eot b/fonts/IBM-Plex-Mono/IBMPlexMono-Italic.eot new file mode 100644 index 0000000..e8faf6e Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Italic.eot differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Italic.ttf b/fonts/IBM-Plex-Mono/IBMPlexMono-Italic.ttf new file mode 100644 index 0000000..1ac9ac2 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Italic.ttf differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Italic.woff b/fonts/IBM-Plex-Mono/IBMPlexMono-Italic.woff new file mode 100644 index 0000000..d623d28 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Italic.woff differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Italic.woff2 b/fonts/IBM-Plex-Mono/IBMPlexMono-Italic.woff2 new file mode 100644 index 0000000..a66f8f4 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Italic.woff2 differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.eot b/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.eot new file mode 100644 index 0000000..5ca4c77 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.eot differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.ttf b/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.ttf new file mode 100644 index 0000000..90325c8 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.ttf differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff b/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff new file mode 100644 index 0000000..a3d3f8c Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff2 b/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff2 new file mode 100644 index 0000000..e6853af Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff2 differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Text.eot b/fonts/IBM-Plex-Mono/IBMPlexMono-Text.eot new file mode 100644 index 0000000..4ccbead Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Text.eot differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Text.ttf b/fonts/IBM-Plex-Mono/IBMPlexMono-Text.ttf new file mode 100644 index 0000000..6599ab6 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Text.ttf differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Text.woff b/fonts/IBM-Plex-Mono/IBMPlexMono-Text.woff new file mode 100644 index 0000000..9660719 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Text.woff differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-Text.woff2 b/fonts/IBM-Plex-Mono/IBMPlexMono-Text.woff2 new file mode 100644 index 0000000..810a4f6 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-Text.woff2 differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.eot b/fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.eot new file mode 100644 index 0000000..29ff209 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.eot differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.ttf b/fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.ttf new file mode 100644 index 0000000..ae1f098 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.ttf differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.woff b/fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.woff new file mode 100644 index 0000000..31f5d68 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.woff differ diff --git a/fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.woff2 b/fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.woff2 new file mode 100644 index 0000000..c531b56 Binary files /dev/null and b/fonts/IBM-Plex-Mono/IBMPlexMono-TextItalic.woff2 differ diff --git a/fonts/IBM-Plex-Mono/font.css b/fonts/IBM-Plex-Mono/font.css new file mode 100644 index 0000000..c037a6a --- /dev/null +++ b/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 */ +} \ No newline at end of file diff --git a/fonts/IBM-Plex-Mono/license.txt b/fonts/IBM-Plex-Mono/license.txt new file mode 100644 index 0000000..f72f765 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/img/3a26bbd5804e3b35b7ee97e1bca03205.jpg b/img/3a26bbd5804e3b35b7ee97e1bca03205.jpg new file mode 100644 index 0000000..69b3042 Binary files /dev/null and b/img/3a26bbd5804e3b35b7ee97e1bca03205.jpg differ diff --git a/index.html b/index.html index 692a889..1538609 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,10 @@ Comfitu.re - + + - + @@ -24,16 +25,15 @@ 
 \___\___/_|_|_|_| |_|\__|\_,_(_)_| \___|
- v1.5.1
+ v1.6.0

Home - | About - | Blogs - | Logs - | Projects - | Contact
+ | Blog + | Links + | Contact + Close
@@ -62,147 +62,97 @@

- Hello, welcome to my comfy personal website! (＾▽＾) + Hoi, welcome to my comfy website! (＾▽＾)

- I am Fristi, a programmer from the Netherlands. On this website you can find - more info about me, my server and my personal projects. If you'd like to chat, - ping me on the fediverse! -

- -
-

About

-

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

- -

Professional

-

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

-

- Besides programming, I also work a lot with Linux systems, and use it as my - preferred operating system on my own computers. In my spare time I maintain a - personal hobby server that holds most of my private data and services, while - also acting as my development server. + I am @Fristi, a programmer from the Netherlands. On this website you can find + more info about me, my server and my personal projects. Enjoy!

-
-

Blog posts

-

- My blog posts are now hosted here! See the archive below. -

- -

2022

- - - - - - -
12 Jun 2022"Please do theme your distro".md
- -

2021

- - - - - - - - - - - -
07 Jul 2021"Method, reason and balance".md
21 Jun 2021"Noise".md
- -

2020

- - - - - - -
21 Dec 2020"Flat keyboards break fingers".md
-
-
-

- << Back - - Loading... -

-
-
-
-
-
-

Audio logs

+

Blog posts

- Besides blog posts, I sometimes also make audio logs. + My blog posts are now hosted here! See the archive below.

2022

- +
- - - + + +
18 Apr 2022"Log #1: Favorite Video Games" - .opus - .mp3 - 07 Oct"Fresh Blog!".md
-
-

Projects

-

- Currently I maintain a few websites and packages, see below. -

+
+

Links

+

These are some links to stuff that I make or endorse. Check it out!

Websites

- + + + + + + + + + + + + + + + + + + + + + + + + + + +
Comfitu.re:My personal website, the one you're reading now.Source
Subcon Town:My personal server and tilde community. The site lists users and services.Source
Akko's Friture:my personal Akkoma Fediverse instance.Source
Comfi Stream:the place you can watch my streams.Source
Fediring:a classic webring used by fediverse users.
-

Software

- +

Projects

+ + + + + + + + + + + + + + + + + +
Akkoma: + a fork of the popular Pleroma ActivityPub server. I help with translations + and sometimes with bug reporting. +
Pleroma Themes:a collection of themes I've made for use with Pleroma/Akkoma.
Console Writer:a small symfony/laravel package with improved console input/output handling.
Other stuff:there's more on my private gitea instance. Some of it is old and abandoned though.
-

Services

-

- For a list of services that I currently host, - please view the Subcon Town website. -

Contact information

- Want to send me a message? I can be reached at @fristi@mk.toast.cafe. + Want to send me a message? You can contact me here: +

+ + + +
Email:fristi「AT」subcon.town
Fediverse:fristi「AT」akkos.fritu.re
+

+ You can also ask me questions on retrospring! Go to retrospring

@@ -226,14 +176,22 @@

If you feel any material is incorrectly used on this website, or otherwise infringes on your copyright, feel free to file a complaint to - fristi@subcon.town. + fristi「AT」subcon.town.

Changelog

+
+
+ +
-
- - × -
-
+ + \ No newline at end of file diff --git a/script.js b/script.js index 751abdc..69384a1 100644 --- a/script.js +++ b/script.js @@ -1,118 +1,31 @@ (function (){ var comfiture = {}; + var content; var activeLink; var activeContent; - var player; var reader; + var readerBtn; var motds = [ "Made by Fristi", - "Fristi? Fristi habe ich nicht.", - "[Subject quote here]", "Press R or Z twice to do a barrel roll", "You wouldn't download a car.", "The last metroid is in captivity.", "Suavemente, bésame", "What is love?", "Justice in Spades", - "Let's get Volatile", "Yeah, RIP", "What a shame.", "RED SPY IS IN THE BASE", "try fingers, but hole", - "You don't have the right O you don't have the right" + "Woomy!", + "GET OVER HERE!", + "Who are you, that do not know your history?", + "What is a man?", + "Rip and tear, until it is done.", + "Praise the sun!" ]; - //Set up classes for player and reader - class Player { - #container; - #element; - - constructor() { - this.#container = document.querySelector('.player'); - if(this.#container) { - this.#element = this.#container.querySelector('audio'); - this.#container.querySelector('span.times') - .addEventListener('click', event => { - this.#clear(); - this.#container.classList.add('hide'); - }); - - document.querySelector('#logs').addEventListener('click', event => { - if(event.target.tagName != 'A') return; - this.#load(event.target.getAttribute('href')); - event.preventDefault(); - }); - } - } - - #clear() { - this.#element.pause(); - this.#element.removeAttribute('src'); - } - - #load(href) { - this.#clear(); - if(this.#container.classList.contains('hide')) { - this.#container.classList.remove('hide'); - } - this.#element.setAttribute('src', href); - this.#element.play(); - } - } - - class Reader { - #container; - #content; - #tabMain; - #loader; - #title; - - constructor() { - this.#container = document.querySelector('.reader'); - if(this.#container) { - this.#content = this.#container.querySelector('.reader-content'); - this.#loader = this.#container.querySelector('span.loader'); - this.#tabMain = document.querySelector('.tab-main'); - this.#title = this.#container.querySelector('.title'); - - this.#container.querySelector('a.times') - .addEventListener('click', event => { - this.#clear(); - this.#container.classList.add('hide'); - this.#tabMain.classList.remove('hide'); - this.#title.innerHTML = ''; - }); - - document.querySelector('#blogs .tab-main').addEventListener('click', event => { - if(event.target.tagName != 'A') return; - this.#load(event.target.getAttribute('href')); - event.preventDefault(); - }); - } - } - - #clear() { - this.#content.innerHTML = ''; - } - - #load(href) { - this.#clear(); - this.#tabMain.classList.add('hide'); - this.#container.classList.remove('hide'); - this.#loader.classList.remove('hide'); - this.#title.innerHTML = href.substring(href.lastIndexOf('/')+1); - - ajax(href, response => { - let converter = new showdown.Converter(); - this.#content.innerHTML = converter.makeHtml(response); - this.#loader.classList.add('hide') - }, () => { - this.#content.innerHTML = "

Could not load resource.

An error occurred, unable to display blog post.

"; - this.#loader.classList.add('hide') - }); - } - } - + //Ajax function ajax(url, onSuccess, onError) { let request = new XMLHttpRequest(); @@ -140,27 +53,64 @@ request.send(); } + //Content switching function switchActiveContent(id) { let link = document.querySelector('a[href="'+id+'"]'); let content = document.querySelector(id); - if(link && content) { + if(id === '#reader') { + //Switch to reader tab, but do not switch active menu link + if(activeContent) activeContent.classList.add('hide'); + content.classList.remove('hide'); + activeContent = content; + + } else if (link && content) { if(activeLink) activeLink.classList.remove('active'); if(activeContent) activeContent.classList.add('hide'); link.classList.add('active'); content.classList.remove('hide'); + if(activeContent && activeContent.getAttribute('id') === 'reader') { + closeReader(); + } + activeLink = link; activeContent = content; + } else { console.error('Error: not switching content; link or content element for id ' + id + ' does not exist.'); } } + //Reader loading + function loadReaderFile(href) + { + reader.innerHTML = "

Loading...

"; + ajax(href, response => { + let converter = new showdown.Converter(); + reader.innerHTML = converter.makeHtml(response); + }, () => { + reader.innerHTML = "

Could not load resource.

An error occurred, unable to display blog post.

"; + }); + content.classList.add('expand'); + readerBtn.classList.remove('hide'); + } + + function closeReader() + { + reader.innerHTML = ""; + content.classList.remove('expand'); + readerBtn.classList.add('hide'); + } + //Onload window.addEventListener('load', function(){ + content = document.querySelector('.content'); + reader = document.querySelector('#reader'); + readerBtn = document.querySelector('.reader-close'); + //Hide all content let contents = document.querySelectorAll('.content-tab'); contents.forEach(function (element) { @@ -168,22 +118,26 @@ }); //Activate content matching hash in url (or home instead) - let hash = window.location.hash; - if(!hash) hash = '#home'; - switchActiveContent(hash); - - //Set up reader and player - player = new Player(); - reader = new Reader(); + switchActiveContent(window.location.hash ? window.location.hash : "#home"); //Add click event handlers for header/footer links document.querySelectorAll('header, footer').forEach(element => { element.addEventListener('click', event => { - if(event.target.tagName != 'A') return; + if(event.target.tagName !== 'A') return; let hash = event.target.getAttribute('href'); switchActiveContent(hash); }); }); + + //Add click event handlers for reader links + document.querySelectorAll('.blog-table a[href$=".md"]').forEach(element => { + element.addEventListener('click', event => { + let filename = event.target.getAttribute('href'); + switchActiveContent('#reader'); + loadReaderFile(filename); + event.preventDefault(); + }); + }); }); //Global functions @@ -197,6 +151,21 @@ document.write(motd); } + comfiture.showAddresses = function () { + let a = 'fristi'; + let b = 'subcon.town'; + let c = 'akkos.fritu.re'; + + document.querySelectorAll('.em').forEach( element => { + element.innerHTML = a + '@' + b; + element.setAttribute('href', 'mailto:' + a + '@' + b); + }); + + document.querySelectorAll('.fv').forEach( element => { + element.innerHTML = a + '@' + c; + }); + } + //Expose comfiture object to document window.comfiture = comfiture; })(); diff --git a/style.css b/style.css index 3bead9f..3f2ba73 100644 --- a/style.css +++ b/style.css @@ -15,7 +15,7 @@ } /* Defaults, Resets */ -html, body, div, span, hr, p, ul, ol, blockquote, table, pre, h1, h2, h3, h4, h5, h6 { +html, body, div, span, hr, p, ul, ol, blockquote, table, code, pre, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } @@ -70,7 +70,7 @@ body, h1, h2, h3, h4, h5, h6, pre, code { box-shadow: 8px 8px 0 var(--shadow-color); } -header, main, footer, .player { +header, main, footer { box-sizing: border-box; width: 100%; overflow: hidden; @@ -85,51 +85,10 @@ main { overflow-x: hidden; } - -/* Player */ - -.player { - padding-bottom: 8px; -} - -.player audio { - width: calc(100% - 32px); -} - -.player span.times { - font-size: 32px; - line-height: 47px; +.reader-close { 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 { - padding-left: 8px; -} +code { font-weight: 400; color: var(--accent-3-color); } h1, h2, h3, h4, h5, h6, p, ul, ol, table, blockquote, hr { margin-bottom: 16px; @@ -169,12 +126,12 @@ h1, h2, h3, h4, h5, h6 { text-decoration: underline; } -h1:before { content: '# '; } -h2:before { content: '## '; } -h3:before { content: '### '; } -h4:before { content: '#### '; } -h5:before { content: '##### '; } -h6:before { content: '###### '; } +h1:not(#reader h1):before { content: '# '; } +h2:not(#reader h2):before { content: '## '; } +h3:not(#reader h3):before { content: '### '; } +h4:not(#reader h4):before { content: '#### '; } +h5:not(#reader h5):before { content: '##### '; } +h6:not(#reader h6):before { content: '###### '; } mark { background-color: var(--accent-2-color); @@ -185,10 +142,9 @@ ul { list-style: none; } ul li:before { content: '- '; } ol { list-style: decimal inside; } -hr { - margin-top: 14px; - border: none; - border-top: 2px solid var(--fg-color); +img { + max-width: 100%; + max-height: 480px; } table { @@ -197,21 +153,63 @@ table { border: none; } -table.blog-table tr td, table.log-table tr td { - vertical-align: top; +table tr td { vertical-align: top; } +table.blog-table tr td:first-child { width: 96px; color: var(--accent-2-color); } +table.blog-table tr td:nth-child(2) { color: var(--accent-3-color); } +table.blog-table tr td:last-child { width: 114px; text-align: right; } + +/* Reader Content */ + +blockquote { + border-left: 4px solid var(--accent-2-color); + padding-left: 1rem; } -table.blog-table tr td:first-child, table.log-table tr td:first-child { - width: 96px; - color: var(--accent-2-color); +#reader pre { + color: var(--accent-3-color); + border-left: 4px solid var(--accent-3-color); + padding-left: 1rem; } -table.blog-table tr td:nth-child(2), table.log-table tr td:nth-child(2) { +hr { + margin: 1rem 0 2rem 0; + border: none; + border-top: 1px solid var(--fg-color); +} + +#reader p { + text-align: justify; + margin: 0 0 1.5rem 0 +} + +#reader i, #reader em { color: var(--accent-3-color); } -table.blog-table tr td:last-child { width: 48px; text-align: right; } -table.log-table tr td:last-child { width: 114px; text-align: right; } +#reader, +#reader h1, #reader h2, #reader h3, +#reader h4, #reader h5, #reader h6{ + font-family: "IBM Plex Mono", monospace; + font-size: .9rem; + line-height: 1.5rem; + font-weight: 500; +} + +#reader h1, #reader h2, #reader h3, +#reader h4, #reader h5, #reader h6 { + text-decoration: none; + font-weight: bold; +} + +#reader h1 { font-size: 1.5rem; margin: 1.5rem 0; text-align: center; } +#reader h1 + p { text-align: center; text-indent: 0; } +#reader h2 { font-size: 1.1rem; margin: 2rem 0 .9rem 0; } +#reader h3 { font-size: 1rem; margin: 1.5rem 0 .9rem 0; text-indent: 1rem; } +#reader h4 { font-size: 1rem; margin: 1rem 0 .4rem 0; } +#reader h5 { font-size: .9rem; margin: 1rem 0 .4rem 0; } +#reader h6 { font-size: .75rem; margin: 1rem 0 .4rem 0; } + +/* Special */ #ascii { text-align: center; @@ -226,6 +224,7 @@ table.log-table tr td:last-child { width: 114px; text-align: right; } display: none; } + @media only screen and (min-width: 864px) { .content { left: 32px; @@ -233,5 +232,16 @@ table.log-table tr td:last-child { width: 114px; text-align: right; } width: 800px; height: 596px; padding:16px; + transition: height .5s; + } + + .content.expand { + height: calc(100% - 64px); + } + + #reader { + width: 40rem; + margin-left: auto; + margin-right: auto; } } \ No newline at end of file