-
___ __ _ _-
/ __|___ _ __ / _(_) |_ _ _ _ _ ___-
| (__/ _ \ ' \| _| | _| || |_| '_/ -_)-
\___\___/_|_|_|_| |_|\__|\_,_(_)_| \___|-
-
- v1.6.3
-
+
-
+
+
-
- Home
- | Blog
- | Links
- | Contact
-
+
diff --git a/script.js b/script.js
index 5ba614d..2b8d1e4 100644
--- a/script.js
+++ b/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 = "+
+
+
+
+
-
-
+
- ___ __ _ _+
/ __|___ _ __ / _(_) |_ _ _ _ _ ___+
| (__/ _ \ ' \| _| | _| || |_| '_/ -_)+
\___\___/_|_|_|_| |_|\__|\_,_(_)_| \___|+
+
-
+
++ ++--( ) ( ) ( ) @@ -61,305 +68,312 @@ ~~~~~" "~~~~~~~~~~~~~~~~~~~~~~~~- Hoi, welcome to my comfy 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. Enjoy! -
--+Blog posts
-- My blog posts are now hosted here! See the archive below. -
++ 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. +
-2023
--
+- -03 Feb -"Subcon in the new year" -.md -2023
++
-+ +03 Feb +"Subcon in the new year" +.md +2022
--
-- -19 Nov -"Future of the Subcon server" -.md -- -07 Oct -"Fresh Blog!" -.md --+Links
-These are some links to stuff that I make or endorse. Check it out!
+2022
++
++ +19 Nov +"Future of the Subcon server" +.md ++ +07 Oct +"Fresh Blog!" +.md ++-Links
+These are some links to stuff that I make or endorse. Check it out!
-My websites
--
+- -Comfitu.re: -My personal website, the one you're reading now. -Source -- -Subcon Town: -My server and tilde community webpage. -Source -- -Media Archive: -A repository of funny videos and flash animations. -Source -- -Airfryer stream: -Sometimes I stream stuff, you can watch it here. -Source -My websites
++
-+ +Comfitu.re: +My personal website, the one you're reading now. +Source ++ +Subcon Town: +My server and tilde community webpage. +Source ++ +Media Archive: +A repository of funny videos and flash animations. +Source ++ +Airfryer stream: +Sometimes I stream stuff, you can watch it here. +Source +Cool websites by others
--
+- -Tilde Café: -One of the older tilde communities around that I took inspiration from. -- - -Toast Café: -Cool tilde community ran by a toasted friend. -- - -Craftplacer.moe: -Webdesign that screams "yes, I still surf the web." -- - -Fediring: -A classic webring used by fediverse users. -- Cool websites by others
++
-+ +Tilde Café: +One of the older tilde communities around that I took inspiration from. ++ + +Toast Café: +Cool tilde community ran by a toasted friend. ++ + +Craftplacer.moe: +Webdesign that screams "yes, I still surf the web." ++ + +Fediring: +A classic webring used by fediverse users. ++ Projects
--
+- -Akkoma: -- A fork of the popular Pleroma ActivityPub server. I help with translations - and rarely 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 gogs instance. Some of it is old and abandoned though. -Projects
++
-+ +Akkoma: ++ A fork of the popular Pleroma ActivityPub server. I help with translations + and rarely 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 gogs instance. Some of it is old and abandoned though. +--Contact information
-- 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 -
--+Copyright notice
-- 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". -
-- A copy of the Blue Oak Model License may be viewed here.
+
- Additionally, the website source code can be viewed - here. -++Contact information
++ 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 +
++-Copyright notice
++ 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". +
++ A copy of the Blue Oak Model License may be viewed here.
-
+ Additionally, the website source code can be viewed + here. +Third party works
-- This website uses the following third party works: -
+Third party works
++ This website uses the following third party works: +
--
+- -- IBM Plex Fonts by IBM. -License -- -- Old School PC Fonts by VileR. -License -- -- Showdown.js for rendering markdown files. -License -- -- - Background images and various images used in blog entries are not owned by me. - -+
-+ +- IBM Plex Fonts by IBM. +License ++ +- Old School PC Fonts by VileR. +License ++ +- Showdown.js for rendering markdown files. +License ++ ++ - Background images and various images used in blog entries are not owned by me. + +- I do not claim any rights to these third party works. -
++ I do not claim any rights to these third party works. +
-Complaints
-- If you feel any material is incorrectly used on this website, or otherwise - infringes on your rights, feel free to file a complaint with - fristi「AT」subcon.town. -
--- -Changelog
-- 1.6.3 Patch: -
-- Fixed links pointing to the old gitea server, which has been replaced.
-- Enabled table rendering for blog articles.
-- 1.6.2 Patch: -
-- Fixed rendering of ordered lists in blog posts.
-- Added a new blog post.
-- 1.6.1 Patch: -
-- Updated copyright notice to provide proper attribution to third party works used on this website.
-- Added license document for showndown.js.
-- Blog update: -
-- Removed old blog posts, starting from fresh.
-- 1.6.0 Minor update: -
-- Reorganized all content
-- Blog reader will now expand the desktop view for better reading
-- Blog reader is now styled with more readable font and elements
-- Log player has been removed
-- Added email links, but obfuscated them to deter bot abuse
-- 1.5.1 Patch: -
-- Added colored logo
-- Added many more backgrounds, allowing images up to 500kb
-- Refactored css and provided better styling for blog posts
-- 1.5.0 Minor update: -
-- Added blog posts and audio logs
-- Added reader for blog posts (reverts to download without javascript)
-- Added player for audio logs (reverts to download without javascript)
-- Merged websites and projects tabs
-- Updated copyright notice
-- Updated theme a little
-- 1.4.4 Patch: -
-- Updated links and blog website
-- Removed email references due to bad actors
-- 1.4.3 Patch: -
-- Swapped backgrounds, maximum size is 200kb
-- 1.4.2 Patch: -
-- Added fediring links
-- Improved mobile support of the header section
-- Added some more motd lines
-- 1.4.1 Patch: -
-- Added "viewport" meta tag to fix responsiveness
-- 1.4.0 Minor update: -
-- Added responsive sizing for mobile support
-- Updated visual style of the "terminal"
-- Removed a few lower-quality backgrounds
-- Updated footer with direct link to source
-- Refreshed content a bit
-- Added randomized motd under version number
-- 1.3.1 Patch: -
-- Set background image rendering to "crisp-edges"
-- 1.3.0 Minor update: -
-- Updated site texts
-- Fixed git links to now direct to vcs.subcon.town
-- Updated personal contact info
-- Fixed css issue causing scrollbars to appear when not needed
-- Added more backgrounds
-- 1.2.2 Patch: -
-- Cleaned up javascript code
-- Fixed issue with doubly loading wallpaper
-- Added version query string to css and javascript urls to prevent cache issues
-- 1.2.1 Patch: -
-- Set a default background image for the no-javascript crowd
-- Added this changelog to the website
-- 1.2.0 Minor update: -
-- Added blogs content
-- 1.1.0 Minor update: -
-- Updated missing content
-- 1.0.0 Initial release -
-Complaints
++ If you feel any material is incorrectly used on this website, or otherwise + infringes on your rights, feel free to file a complaint with + fristi「AT」subcon.town. +
+
+
+
+
-
+
+ Changelog
+-
+ 1.7.0 Minor update:
+
- Added CSS variables for terminal color palettes. +
- Added window decoration to the "terminal window". +
- Added support for linking to blog articles to be opened in the website. +
-
+ 1.6.3 Patch:
+
- Fixed links pointing to the old gitea server, which has been replaced. +
- Enabled table rendering for blog articles. +
-
+ 1.6.2 Patch:
+
- Fixed rendering of ordered lists in blog posts. +
- Added a new blog post. +
-
+ 1.6.1 Patch:
+
- Updated copyright notice to provide proper attribution to third party works used on this website. +
- Added license document for showndown.js. +
-
+ Blog update:
+
- Removed old blog posts, starting from fresh. +
-
+ 1.6.0 Minor update:
+
- Reorganized all content +
- Blog reader will now expand the desktop view for better reading +
- Blog reader is now styled with more readable font and elements +
- Log player has been removed +
- Added email links, but obfuscated them to deter bot abuse +
-
+ 1.5.1 Patch:
+
- Added colored logo +
- Added many more backgrounds, allowing images up to 500kb +
- Refactored css and provided better styling for blog posts +
-
+ 1.5.0 Minor update:
+
- Added blog posts and audio logs +
- Added reader for blog posts (reverts to download without javascript) +
- Added player for audio logs (reverts to download without javascript) +
- Merged websites and projects tabs +
- Updated copyright notice +
- Updated theme a little +
-
+ 1.4.4 Patch:
+
- Updated links and blog website +
- Removed email references due to bad actors +
-
+ 1.4.3 Patch:
+
- Swapped backgrounds, maximum size is 200kb +
-
+ 1.4.2 Patch:
+
- Added fediring links +
- Improved mobile support of the header section +
- Added some more motd lines +
-
+ 1.4.1 Patch:
+
- Added "viewport" meta tag to fix responsiveness +
-
+ 1.4.0 Minor update:
+
- Added responsive sizing for mobile support +
- Updated visual style of the "terminal" +
- Removed a few lower-quality backgrounds +
- Updated footer with direct link to source +
- Refreshed content a bit +
- Added randomized motd under version number +
-
+ 1.3.1 Patch:
+
- Set background image rendering to "crisp-edges" +
-
+ 1.3.0 Minor update:
+
- Updated site texts +
- Fixed git links to now direct to vcs.subcon.town +
- Updated personal contact info +
- Fixed css issue causing scrollbars to appear when not needed +
- Added more backgrounds +
-
+ 1.2.2 Patch:
+
- Cleaned up javascript code +
- Fixed issue with doubly loading wallpaper +
- Added version query string to css and javascript urls to prevent cache issues +
-
+ 1.2.1 Patch:
+
- Set a default background image for the no-javascript crowd +
- Added this changelog to the website +
-
+ 1.2.0 Minor update:
+
- Added blogs content +
-
+ 1.1.0 Minor update:
+
- Updated missing content +
+ 1.0.0 Initial release +
+Could not load resource.
An error occurred, unable to display blog post.
"; + 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 => { diff --git a/style.css b/style.css index d1a7f9a..ac43358 100644 --- a/style.css +++ b/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 {