Small QoL update

404.html

@@ -62,7 +62,7 @@
         background-color: #220707;
     }
 
-    pre, p, em, br, a {
+    p, em, br, a {
         z-index: 4;
 
         opacity: 0.9;

archive.html

@@ -55,7 +55,7 @@ <h1 id="archive-title">Archive</h1>
                 <p class="pr-desc">-> A RPG gamemode with a explorable world, custom weapons, npc's with AI, and a main quest!</p>
                 <p class="pr-info">[?] Is currently not being worked on anymore.</p>
                 <br>
-                <p><a href="https://tropicalminecraft.com" target="_blank">VISIT PAGE</a></p>
+                <p><a href="https://tropicalmc.vercel.app" target="_blank">VISIT PAGE</a></p>
             </li>
         </ul>
         <p>..</p>

assets/css/effects.css

@@ -77,20 +77,33 @@ em {
 
 /* - rounded design - */
 /* :root {
-    --br: 20px;
+	--br: 20px;
 }
 
 nav ul {
-    border: solid var(--main-color);
-    padding: .25em;
+	border: solid var(--main-color);
+	padding: 0.5em 0;
 }
 
 nav ul li a {
-    padding: .5em;
+	padding: 0.5em;
 }
 
-summary, #welcome-title, a, .tabs, #pr-list li, img, .grid-row-box, nav ul, .pr-title, .post, .tag {
-    border-radius: var(--br);
+summary,
+#welcome-title,
+a,
+.tabs,
+#pr-list li,
+img,
+.grid-row-box,
+nav ul,
+.pr-title,
+.post,
+.tag,
+#theme-list p,
+.tooltip,
+.post-time-to-read {
+	border-radius: var(--br);
 } */
 
 /* - additional glow - */

assets/css/style.css

@@ -49,6 +49,10 @@ body {
 	font-family: 'Terminus', 'Courier New', monospace;
 }
 
+.show-noscript {
+	display: none;
+}
+
 /* BACKGROUND AND OVERLAYS */
 #rain-vid,
 #noise-overlay,
@@ -163,7 +167,7 @@ a {
 a:hover {
 	background-color: var(--main-color);
 	cursor: pointer;
-	color: rgba(24, 45, 75, 0.616);
+	color: rgb(28, 38, 53);
 
 	transition: box-shadow 0.1s, background-color 0s, color 0s;
 
@@ -213,7 +217,7 @@ summary::marker {
 summary:hover {
 	cursor: pointer;
 	background-color: var(--main-color);
-	color: rgba(24, 45, 75, 0.616);
+	color: rgba(24, 45, 75, 0.8);
 }
 
 details[open] summary {
@@ -309,8 +313,9 @@ nav ul li a {
 
 .tab-active {
 	background-color: var(--main-color);
-	color: rgba(24, 45, 75, 0.616);
+	color: rgba(6, 21, 43, 0.664);
 	text-decoration: none;
+	font-weight: bolder;
 }
 
 /* PRINT ANIMATION WHEN CHANGING TABS AND ON PAGE LOAD */
@@ -401,6 +406,43 @@ nav ul li a {
 	margin-bottom: 0.5em;
 }
 
+#theme-list p {
+	border: 1px solid rgba(var(--bg-color), 0.5);
+	height: 1.75em;
+}
+
+#theme-list p a {
+	text-transform: uppercase;
+	text-decoration: none;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	background: radial-gradient(
+		ellipse at center,
+		transparent 0%,
+		rgba(var(--bg-color), 0.1) 30%,
+		rgba(var(--bg-color), 0.8) 120%
+	);
+	background-size: 350% 350%;
+	background-position: center;
+	transition: background-size 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+#theme-list p a[class*='active'],
+#theme-list p a:hover {
+	box-shadow: none;
+	color: var(--main-color);
+	outline: 1px inset var(--main-color);
+
+	background-size: 100% 100%;
+}
+
+#theme-list p a:hover {
+	filter: brightness(1.25) saturate(1.3);
+}
+
 /* PROJECTS TAB */
 #pr-list {
 	padding-left: 0;
@@ -665,7 +707,7 @@ nav ul li a {
 	}
 }
 
-@media screen and (max-width: 1050px) {
+@media screen and (max-width: 1150px) {
 	#title {
 		font-size: 2.3vw;
 		margin-bottom: 2em;
@@ -676,6 +718,9 @@ nav ul li a {
 	.tabs {
 		padding: 0.75em;
 	}
+	.grid-row-box-shrink {
+		flex-shrink: 3;
+	}
 }
 
 @media screen and (min-width: 1600px) {
@@ -688,18 +733,23 @@ nav ul li a {
 	}
 }
 
+@media screen and (min-width: 2060px) {
+	#grunge-overlay {
+		opacity: calc(var(--grunge-overlay-opacity) - 0.4);
+	}
+}
+
 @media (hover: none) {
 	summary:hover {
 		background-color: transparent;
 		color: var(--main-color);
 	}
 }
 
-/* To comply with outlinenone.com */
-:focus {
-	outline: 2px solid var(--main-color);
+:focus-visible {
+	outline: 1px solid white;
 	color: var(--main-color);
-	background: rgba(var(--bg-color), 0.3);
+	background: rgba(var(--bg-color), 0.4);
 
 	text-decoration: none;
 }

index.html

@@ -15,7 +15,7 @@
 
 	<link rel="preload" as="font" href="/assets/fonts/terminus-webfont.woff2" type="font/woff2" crossorigin="anonymous">
 
-	<link rel="stylesheet" href="/assets/css/style.css?v=4"> <!-- increase version after significant changes to prevent browsers from using a old cached version (cache busting) -->
+	<link rel="stylesheet" href="/assets/css/style.css?v=5"> <!-- increase version after significant changes to prevent browsers from using the old cached version (cache busting) -->
 
 	<meta property="og:title" content="RichardApps">
 	<meta property="og:description" content="RichardApps' personal webpage! Explore a place with all my projects, pictures, and thoughts. Featuring a terminal-inspired design with stunning effects.">
@@ -50,6 +50,9 @@ <h2 id="noscript-warning">You are viewing a limited version of this site because
 			.hide-noscript {
 				display: none;
 			}
+			.show-noscript {
+				display: block;
+			}
 			#noscript-warning {
 				color: rgb(245, 67, 67);
 				text-align: center;
@@ -93,7 +96,7 @@ <h1 id="sub-title">Coding, photography, 3D-art and personal projects!</h1>
 				<li><a id="home-tab" class="tab-switcher" href="#home">Home</a></li>
 				<li><a id="projects-tab" class="tab-switcher" href="#projects">Projects</a></li>
 				<li><a id="pictures-tab" class="tab-switcher" href="#pictures">Pictures</a></li>
-				<li class="hide-noscript"><a id="blog-tab" class="tab-switcher" href="#blog">Blog</a></li>
+				<li><a id="blog-tab" class="tab-switcher" href="#blog">Blog</a></li>
 				<li class="no-mobile"><a id="resources-tab" class="tab-switcher" href="#resources">Resources</a></li>
 				<li><a id="about-tab" class="tab-switcher" href="#about">About</a></li>
 			</ul>
@@ -294,6 +297,7 @@ <h2>Resources</h2>
 
 		<div id="blog" class="tabs">
 			<h1>Blog</h1>
+			<p class="show-noscript">Sorry, you need to enable JavaScript to view the blog page.</p>
 			<div id="blog-window"></div>
 		</div>
 

src/js/config.js

@@ -1,6 +1,6 @@
 export const CONFIG = {
 	defaultTheme: 'ocean',
-	seasonalTheme: false, // will change the default theme based on the date
+	seasonalTheme: false, // will change the default theme based on the date (unless a theme is already set in local storage)
 
 	// effects
 	effectsDisabledByDefault: false,
@@ -20,6 +20,6 @@ export const CONFIG = {
 	// blog
 	blogUrl: 'https://data.richardapps.net/blog.xml', // example: '/src/example/blog.xml'
 	useExample: false,
-	writeAnimationOnPostOpen: true,
+	writeAnimationOnPostOpen: false,
 	showEstimatedReadTime: true,
 };

src/js/modules/animations.js

@@ -75,7 +75,7 @@ export function tabAnimation(tab, fadeInDelay = 16) {
 			}, delay);
 			delay += fadeInDelay;
 
-			// add write-animation to text elements
+			// add write-animation to text elements if enabled in config.js
 			if (
 				CONFIG.writeAnimationOnTabChange &&
 				(element.tagName === 'P' ||

src/js/modules/blog.js

@@ -91,18 +91,22 @@ export function openPost(postId) {
 			const post = posts.find((p) => p.id === postId);
 			if (post) {
 				POSTS_CONTAINER.innerHTML = `
-                <hr class="dotted">
-                <div class="post-header">
-                    <em class="post-date">[${post.date}]</em>
-                    <span class="post-title">${post.title}</span>
+				<div class="post-directory">
+					<span><a href="#blog">BLOG</a></span>
+					<span>> ${post.title}</span>
+				</div>
+				<hr class="dotted">
+				<div class="post-header">
+					<em class="post-date">[${post.date}]</em>
+					<span class="post-title">${post.title}</span>
 					<span class="post-time-to-read">${CONFIG.showEstimatedReadTime ? convertReadTime(post.timeToRead) : ''}</span>
-                </div>
-                <div>
-                    <p id="post-content-full">${post.content}</p>
-                </div>
-                <hr class="dotted">
-                <div class="post-actions"><a class="post-action-btn" id="post-back-btn">&lt; Back to posts</a><a class="post-action-btn" id="post-share-btn">Share</a></div>
-            `;
+				</div>
+				<div>
+					<p id="post-content-full">${post.content}</p>
+				</div>
+				<hr class="dotted">
+				<div class="post-actions"><a class="post-action-btn" id="post-back-btn">&lt; Back to posts</a><a class="post-action-btn" id="post-share-btn">Share</a></div>
+			`;
 				const postShareBtn = document.getElementById('post-share-btn');
 				postShareBtn.addEventListener('click', () => {
 					copyClipboard(window.location.href, postShareBtn, 'Link copied!');

src/js/modules/effects.js

@@ -36,9 +36,9 @@ export function initEffectsToggle() {
 		document.getElementById('toggle-effects').style.display = 'none';
 	} else {
 		const nfbText = document.getElementById('toggle-effects');
-		nfbText.innerHTML = `Don't like the effects? Click <a id="toggle-effects-link" href="#">HERE</a> to turn them ${
-			effectsDisabled ? 'on' : 'off'
-		}.`;
+		nfbText.innerHTML = `${
+			effectsDisabled ? 'Enable effects?' : "Don't like the effects?"
+		} Click <a id="toggle-effects-link" href="#">HERE</a> to turn them ${effectsDisabled ? 'on' : 'off'}.`;
 
 		document.getElementById('toggle-effects-link').addEventListener('click', (event) => {
 			event.preventDefault();
@@ -49,7 +49,7 @@ export function initEffectsToggle() {
 
 export function initEffects() {
 	if (
-		window.matchMedia('(max-width: 767px)').matches &&
+		window.matchMedia('(max-width: 767px)').matches && // Disable effects on mobile by default
 		!('effectsDisabled' in localStorage) &&
 		CONFIG.effectsDisabledByDefaultMobile
 	) {

src/js/modules/theme.js

@@ -79,7 +79,13 @@ export function changeTheme(theme, save = true) {
 	// update theme list by adding '>' and '<' to the current theme name and removing them from the others
 	if (document.getElementById('theme-list')) {
 		document.querySelectorAll('#theme-list p a').forEach((link) => {
-			link.textContent = link.dataset.theme === theme ? `> ${theme} <` : link.dataset.theme;
+			if (link.dataset.theme === theme) {
+				link.textContent = `> ${theme} <`;
+				link.classList.add('active');
+			} else {
+				link.textContent = link.dataset.theme;
+				link.classList.remove('active');
+			}
 		});
 	}
 }
@@ -110,7 +116,7 @@ export function addThemeList() {
 	// separate special cases
 	if (document.getElementById('rainy')) {
 		const rainy = document.getElementById('rainy');
-		rainy.style.marginTop = '1em';
+		rainy.style.marginTop = '1.5em';
 	}
 }