Total about page redesign. Other random improvements to the home page.

author: Chris Xiong <chris@pineapple.cat> 2025-07-25 21:57:53 -0400
committer: Chris Xiong <chris@pineapple.cat> 2025-07-25 21:57:53 -0400
commit: 86052d897aa2bed9bd732e1155ef760cc850a65f (patch)
tree: cce520c47f94743b20ee3571359cf7aa93b64c79 /index.shtml
parent: 60041a9bd066f559e2b3dec3ed1b02ab61139355 (diff)
download: web-86052d897aa2bed9bd732e1155ef760cc850a65f.tar.xz
1 files changed, 208 insertions, 99 deletions
diff --git a/index.shtml b/index.shtml
index 25550a0..1ea3a43 100644
--- a/index.shtml
+++ b/index.shtml
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
@@ -35,27 +35,129 @@
 		flex: 1;
 		flex-basis: 40%;
 		align-self: flex-start;
-		margin: 0.5em;
-		padding: 1em;
 	}
 	div.projects-flex details{
 		border: 1px solid var(--secondary-fg);
+		transition: 0.3s ease background;
+		margin: 0.5em;
+		padding: 0;
+		pointer-events: none;
 	}
 	div.projects-flex details summary{
-		transition: 0.3s ease background;
-		background-clip: content-box;
 		cursor: zoom-in;
+		pointer-events: auto;
+		padding: 1em;
 	}
-	div.projects-flex details summary:hover{
+	div.projects-flex details:hover{
 		background-color: color-mix(in oklab, var(--interactive-hover-bg) 30%, rgba(0, 0, 0, 0));
 	}
-	div.projects-flex details[open] summary{
+	div.projects-flex details[open]{
 		background-color: unset !important;
+		padding: 0 1em 1em 1em;
+	}
+	div.projects-flex details[open] summary{
 		border-bottom: 1px solid var(--principal-fg);
-		padding-bottom: 1em;
+		padding: 1em 0;
 		margin-bottom: 1em;
 		cursor: zoom-out;
 	}
+	div.ubx-container{
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		font-size: 0;
+	}
+	div.ubx{
+		display: inline flex;
+		align-items: center;
+		justify-content: left;
+		box-sizing: border-box;
+		flex: 0 0 250px;
+		width: 238px;
+		height: 45px;
+		margin: 6px;
+		font-size: 9px;
+		border: 1px solid var(--secondary-fg);
+	}
+	div.ubx-ll{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 16px;
+		font-weight: 1000;
+		flex: 0 0 46px;
+		width: 46px;
+		height: 100%;
+		text-align: center;
+		white-space: nowrap;
+		background-color: color-mix(in oklab, var(--interactive-hover-bg) 30%, rgba(0, 0, 0, 0));
+	}
+	div.ubx-lr{
+		padding: 0 6px;
+		font-weight: 600;
+	}
+	div.ubx-ll img.vf{
+		height: 100%;
+	}
+	div.ubx-ll img.v90{
+		height: 90%;
+	}
+	div.ubx-ll img.v80{
+		height: 80%;
+	}
+	div.ubx-ll img.hf{
+		width: 100%;
+	}
+	div.ubx-ll img.h90{
+		width: 90%;
+	}
+	div.ubx-ll img.h80{
+		width: 80%;
+	}
+	.ubx-emojislot{
+		font-size: 24px !important;
+	}
+	.crossed-out{
+		position: relative;
+	}
+	.crossed-out::before, .crossed-out::after{
+		content: '';
+		width: 95%;
+		position: absolute;
+		left: 1px;
+		top: 45%;
+		border-bottom: 2px solid red;
+	}
+	.crossed-out::before{
+		transform: skewY(-30deg);
+	}
+	.crossed-out::after{
+		transform: skewY(30deg);
+	}
+	#ubx-localtime span.datet {
+		color: #7e7;
+		opacity: 0.2;
+	}
+	#ubx-localtime:hover span.datet {
+		opacity: initial;
+	}
+	#ubx-localtime span.datetz {
+		color: #e7a;
+		opacity: 0.5;
+	}
+	#ubx-localtime:hover span.datetz {
+		opacity: initial;
+	}
+	#ubx-localtime-time {
+		font-size: 12px;
+	}
+	.qablock {
+		border: 1px solid;
+		border-color: var(--secondary-fg);
+		padding: 1em;
+		margin: 0.5em 0;
+	}
+	td{border:1px solid var(--secondary-fg);}
 </style>
 </head>
 <!--
@@ -64,9 +166,9 @@ files, are licensed under the terms of the Expat(MIT) License.
 Contents are licensed under the CC BY-SA 4.0 license.
 -->
 <body>
-<script type="text/javascript" src="panel.js"></script>
-<script type="text/javascript" src="themer.js"></script>
-<script type="text/javascript">
+<script src="panel.js"></script>
+<script src="themer.js"></script>
+<script>
 function changeImage(a,b){
 	document.getElementById(a).style.display='inline';
 	document.getElementById(b).style.display='none';
@@ -100,6 +202,19 @@ function contsw(cont){
 	lst.item(i).classList.remove('active');
 	document.getElementById(cont+'lk').classList.add('active');
 }
+function hashchange(){
+	if (!location.hash.length) contsw("main");
+	else {
+		let el = document.querySelector(location.hash);
+		while (el && el.classList && !el.classList.contains("toplevel"))
+			el = el.parentNode;
+		if (!el) contsw("main");
+		else {
+			contsw(el.id);
+			document.querySelector(location.hash).scrollIntoView();
+		}
+	}
+}
 function swonload(){
 	window.onresize=function()
 	{
@@ -107,16 +222,13 @@ function swonload(){
 		setupevents();
 		else unsetevents();
 	}
+	window.onhashchange = hashchange;
 	window.onresize();
 	loadTheme();
-	if(!location.hash.length)contsw('main');
-	else contsw(location.hash.substr(1));
-	/*var unsupportedpf=['Macintosh','MacIntel','MacPPC','Mac68K','iPhone','iPad','iPod'];
-	if(unsupportedpf.indexOf(window.navigator.platform)!==-1)
-	document.getElementById('appleouter').style.display='block';*/
+	hashchange();
 }
 document.addEventListener("DOMContentLoaded", swonload);
-window.onhashchange = () => { contsw(location.hash.substr(1)) };
+window.addEventListener("load", hashchange);
 </script>
 	<div id="panel" class="TText">
 		<ul id="panellist">
@@ -132,110 +244,107 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) };
 		</ul>
 	</div>
 	<div id="content" class="TText">
-		<div class="block" id="main">
+		<div class="block toplevel" id="main">
 			<h2>Yet another wandering programmer</h2><hr>
 			<p>
-				Welcome to the home page of Chris Xiong, a Chinese programmer living overseas.
+				Welcome, traveller of the interwebz!
+			</p>
+			<p>
+				This is the cyber-homestead of Chris Xiong, who's obsessed with things that blink, spin, or make noises.
 			</p>
 			<p>
-				You will find my works, collections and pieces of thoughts here.
+				You will find my works, projects and pieces of thoughts here.
 			</p>
 			<p>
 				Have fun exploring!
 			</p>
-			<!--<p id="appleouter" style="display:none;">
-				<b>Please read [<a href="https://stallman.org/apple.html" rel="external" target="_blank" onclick="document.getElementById('apple').style.display='block';">this</a>] in case of any trouble, Your Excellency.</b>
-				<div id="apple" class="block" style="display:none;"><p>
-					<s>The owner of this site doesn't have any Apple devices that can go online so</s> you may experience major problems browsing this site. If you consider this unacceptable, you may donate me an Apple device. Please mail your generous donation to <code>/dev/null</code>.
-				</p></div>
-			</p>-->
 			<div style="text-align:center;">
 				<a href="https://www.debian.org"><img src="debianpowered.svg" alt="Powered by Debian"></a>
 				<a href="https://www.conoha.jp/conoha"><img src="conohahosted.svg" alt="Hosted by Conoha"></a><br>
 			</div>
 		</div>
-		<div class="block" id="projects">
+		<div class="block toplevel" id="projects">
 			<h2>Projects</h2><hr>
 			<p>
-			Here is an incomplete list of projects maintained by me. You may find more projects listed in my <a href="https://cgit.chrisoft.org/">code library</a>, or under my <a href="https://github.com/chirs241097/">GitHub profile</a> (currently only used for collaborative projects).
+				Here is an incomplete list of projects maintained by me. You may find more projects listed in my <a href="https://cgit.chrisoft.org/">code library</a>, or under my <a href="https://github.com/chirs241097/">GitHub profile</a> (currently only used for collaborative projects).
 			</p>
 			<p>
 				For projects with license files, please refer to them for licensing details.
 				Other projects, especially the old inactive ones, are provided "as-is", licensed under the terms of the Expat (MIT) license and
 				come with <strong>ABSOLUTELY NO WARRANTY</strong>. Use them at your own risk.
 			</p>
-			<h3 style="font-weight:normal;">Current Projects</h3>
+			<h3 style="font-weight:normal;" id="currentproj">Current Projects</h3>
 			<div class="projects-flex" id="current-projects">
-				<details class="projects-item">
+				<div class="projects-item"><details>
 					<summary><a href="https://cgit.chrisoft.org/deduper.git/">deduper</a></summary>
 					Scans local images for duplicates.
 					Also provides reverse image search for your local images.
 					Implements a variant of the algorithm described in "An
 					image signature for any kind of image", doi:
 					10.1109/ICIP.2002.1038047.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="https://cgit.chrisoft.org/it2midi.git/">it2midi</a></summary>
 					An effort to rewrite my old it2midi.cpp in Rust.
 					A versatile IT (impulse tracker) to MIDI converter.
 					Currently it's moulting into a fully-fledged mod
 					player.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="https://cgit.chrisoft.org/QMidiPlayer.git/">QMidiPlayer</a></summary>
 					A feature-rich cross-platform MIDI player with UI
 					inspired by vanBasco's Karaoke Player and QSynth.
 					It has a comprehensive plugin interface to
 					provide extra functionalities.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="https://cgit.chrisoft.org/SMELT.git/">SMELT</a></summary>
 					SMELT is a set of classes that provide hardware-accelerated
 					graphics, input handling and optionally, audio output.
 					SMELT is used extensively in my other projects.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="https://cgit.chrisoft.org/lightsd.git/">lightsd</a></summary>
 					Auto brightness for Linux, without requiring
 					a desktop environment or systemd.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="/rbusif">RBUS-ADAT</a></summary>
 					Convert digital audio data carried by Roland's proprietary
 					R-BUS interface into ADAT. Linked page also provided additional
 					technical information on R-BUS.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="/thbgmremix">Touhou BGM Remix</a></summary>
 					The only project that has nothing to do with
 					programming here. These packages provide remixed
 					BGM in a more modern style for legacy Touhou Project
 					releases. It may sound worse or better. You decide.
-				</details>
+				</details></div>
 				<div class="projects-item"></div>
 			</div>
-			<h3 style="font-weight:normal;">Contributed Projects</h3>
+			<h3 style="font-weight:normal;" id="contribproj">Contributed Projects</h3>
 			<p>
 				I've made contributions to these projects, more or less.
 			</p>
 			<div class="projects-flex" id="contrib-projects">
-				<details class="projects-item">
+				<div class="projects-item"><details>
 					<summary><a href="https://github.com/BLumia/BLumiaOJ">BLumia OJ</a></summary>
 					A HUSTOJ compatible Online Judge system.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="https://github.com/BLumia/PineappleSynth">Pineapple Synth</a></summary>
 					A software synthesizer developed by BLumia. I helped with some optimizations and bug fixes.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="https://github.com/FluidSynth/fluidsynth">FluidSynth</a></summary>
 					A realtime soundfont synthesizer. The irony is that most code I have contributed is Windoze-specific.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="https://github.com/BearKidsTeam/thplayer">thplayer</a></summary>
 					A replacement for my "thplayer.cpp" with GUI, written by BLumia. It has my reinvented wheel inside.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>Deepin Desktop Environment</summary>
 					<p>
 					I worked for Deepin as an intern for almost a year starting from February 2019. My work there
@@ -247,15 +356,15 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) };
 					</p>
 					<p>I have mixed views on Deepin the company. You may find out more in my blog posts. I'm no
 					longer affiliated with the company or its successor UnionTech.</p>
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="https://github.com/Swung0x48/CKRasterizer">CKRasterizer</a></summary>
 					Rasterizers for Virtools (an old interactive 3D toolkit). I shifted the project from a
 					reverse-engineering approach to a "just wing it" approach. Helped with completing the
 					DirectX 9 rasterizer. Additionally created two new rasterizer modules
 					for modern graphics from scratch (CKGLRasterizer and CKVkRasterizer).
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>SDUOJ</summary>
 					The Online Judge used by Shandong University,
 					Once located <a href="http://acm.sdu.edu.cn/">here</a>.
@@ -264,55 +373,55 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) };
 					outdated. Yes we used ssh and vim to develop on prod.
 					And thanks to the stupid university I was in, it is
 					<b>impossible to access out of the campus</b>.
-				</details>
+				</details></div>
 				<div class="projects-item"></div>
 			</div>
-			<h3 style="font-weight:normal;"><s>Archived</s> Antique Projects</h3>
+			<h3 style="font-weight:normal;" id="antiqueproj"><s>Archived</s> Antique Projects</h3>
 			<p>Some of these projects are permanently lost in a disaster.</p>
 			<div class="projects-flex" id="antique-projects">
-				<details class="projects-item">
+				<div class="projects-item"><details>
 					<summary><a href="/BulletLabRemix">Bullet Lab Remix (2012-2015)</a></summary>
 					A danmaku-like game. Inspired by a flash game
 					called "Bullet Lab", this project has departured
 					so far from it that it has became a STG without
 					the 'shooting' part.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="/BallanceRemix">Ballance Remix (2011-2012)</a></summary>
 					Old project attempting to recreate the game Ballance from Cyparade.
 					It uses the same Virtools engine but without using custom extensions
 					to the engine.<br>
 					Playable, but in no way resemble the "feel" of the original game in
 					terms of controls.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>World's Hardest Game 3D (2010-2011)</summary>
 					<a href="https://1drv.ms/u/s!AjEe7BxvJRi9gSCz7LxTzCjXWMsT">Download this abomination, if you wish.</a>
 					3D version of a flash game called "World's Hardest Game" made with Virtools.
 					Extremely hard because it's basically unplayable.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>Cross Noodles (Virtools) (2012)</summary>
 					<a href="//cgit.chrisoft.org/oddities.git/tree/Virtools/Cross_Noodles.cmo">Download this abomination, if you wish.</a>
 					A stupid game made with Virtools. A new version written for modern(-ish)
 					browser is <a href="/CrossNoodlesJS/">available</a>.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="//filestorage.chrisoft.org/inactive/TimidityPlayer.tar.xz">Chris' Timidity Player (2012)</a></summary>
 					Simple timidity frontend written in FreePascal. BLumia created a more
 					feature-rich fork called <a href="https://github.com/BLumia/BLumiaTimidityShell">BLumia's Timidity Shell</a>.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary><a href="//filestorage.chrisoft.org/inactive/Tester.tar.xz">Simple Tester for OI (2012)</a></summary>
 					Local judger for OI problems. Doesn't really have any fancy features.
 					Written in FreePascal.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>the <s>Ultimate</s> Data Visualiser (2015)</summary>
 					A data visualizer for a certain very specific purpose.
 					This project is never made public. Written in C++. Uses SMELT.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>Compiz 0.9.7.99 (2012-2016)</summary>
 					<a href="//filestorage.chrisoft.org/inactive/compiz0.9.7.9.tar.xz">Archived source code.</a>
 					The ultimate pre-GLES port compiz distribution with extra features
@@ -320,44 +429,44 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) };
 					It was forked off the 0.9.7 branch for Ubuntu 12.04. It comes with
 					probably every single plugin ever available for compiz (that I could
 					get working).
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>Minesweeper in HGE (2012)</summary>
 					Essentially a cmine.c with GUI.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>Desktop (2012)</summary>
 					<a href="//filestorage.chrisoft.org/inactive/Desktop.tar.xz">Archived source code.</a>
 					Windows 7 style show desktop for Windows 2000, Windows XP and Windows Vista.
 					Written in FreePascal. It was pretty broken though.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>Go!Word (2012)</summary>
 					Hangman written in FreePascal.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>cpu.c (2011)</summary>
 					Plots a sine function in CPU usage using busy waits.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>cmine.c (2012)</summary>
 					Minesweeper, CLI version (the 289536397th one been written).
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>fpsnake.pas (2016)</summary>
 					Snake game written in FreePascal. I wrote this in order to prove that
 					I can still do Pascal.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>fpGraphicClock (2011-2012)</summary>
 					Primitive graphic clock written in FreePascal.
-				</details>
-				<details class="projects-item">
+				</details></div>
+				<div class="projects-item"><details>
 					<summary>Date&amp;Time (2009-2010)</summary>
 					Text mode clock, alarm and stopwatch written in FreePascal.
-				</details>
+				</details></div>
 			</div>
-			<h3 style="font-weight:normal;">Pending Projects</h3>
+			<h3 style="font-weight:normal;" id="pendingproj">Pending Projects</h3>
 			<p>These project may or may not ever be started.</p>
 			<ul>
 				<li>OPLang</li>
@@ -370,7 +479,7 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) };
 				<li><s>Online Judge</s></li>
 			</ul>
 		</div>
-		<div class="block" id="blog">
+		<div class="block toplevel" id="blog">
 			<h2>Blog</h2><hr>
 			<h3><a href="/blog/list"><ruby>SPELVNCAM·VRSAE·VISERE<rp>(</rp><rt>Visit the bearess' den</rt><rp>)</rp></ruby></a></h3>
 			<p>
@@ -395,7 +504,7 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) };
 				nowadays.
 			</p>
 		</div>
-		<div class="block" id="library">
+		<div class="block toplevel" id="library">
 			<h2>Library</h2><hr>
 			<h3><a href="/libs/music/player">Music Library</a></h3>
 			<p>
@@ -410,7 +519,7 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) };
 				Get lost in my messy code!
 			</p>
 		</div>
-		<div class="block" id="guestbook">
+		<div class="block toplevel" id="guestbook">
 			<h2>Guestbook</h2><hr>
 			<p style="font-size:75%;">
 				All times are in CST (UTC+8).
@@ -491,7 +600,7 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) };
 			</script>
 			<form id="msgform" method="post" style="padding:5px;border:1px solid var(--secondary-fg);">
 			<span style="width:98%;display:table;">
-			<label for="name" style="display:table-cell;width:1px;white-space:nowrap;">Your honorable name:</label>
+			<label for="mname" style="display:table-cell;width:1px;white-space:nowrap;">Your honorable name:</label>
 			<input type="text" id="mname" name="name" required style="margin-left:5px;display:table-cell;width:100%;">
 			</span>
 			<div style="padding:0.5em;">Message:</div>
@@ -501,11 +610,11 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) };
 			</div>
 			</form>
 		</div>
-		<div class="block" id="about">
+		<div class="block toplevel" id="about">
 			<h2>About</h2><hr>
 			<!--#include virtual="about_l.html" -->
 		</div>
-		<div class="block" id="links">
+		<div class="block toplevel" id="links">
 			<h2>Links</h2><hr>
 			<h3>Miscellaneous tools and games</h3>
 			<ul>
@@ -519,7 +628,7 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) };
 			<p>No one can go without friends. (Unordered list. Stricken items are currently inaccessible.)</p>
 			<ul id="friendslist">
 				<li><a rel="external" target="_blank" href="https://blog.61dpi.com/"><s>夜光糖果屋</s></a></li>
-				<li><a rel="external" target="_blank" href="https://www.blumia.net/" rel="nofollow">BLumia :: Wrapzone</a></li>
+				<li><a rel="external" target="_blank" href="https://www.blumia.net/">BLumia :: Wrapzone</a></li>
 				<li><a rel="external" target="_blank" href="https://jxpxxzj.oschina.io"><s>雄心万丈, 躺在床上</s></a></li>
 				<li><a rel="external" target="_blank" href="https://yyc12345.github.io/MyBlog/">yyc12345 の Blog</a></li>
 				<li><a rel="external" target="_blank" href="https://oing9179.github.io/blog">oing9179 的笔记本儿</a></li>
author	Chris Xiong <chris@pineapple.cat>	2025-07-25 21:57:53 -0400
committer	Chris Xiong <chris@pineapple.cat>	2025-07-25 21:57:53 -0400
commit	86052d897aa2bed9bd732e1155ef760cc850a65f (patch)
tree	cce520c47f94743b20ee3571359cf7aa93b64c79 /index.shtml
parent	60041a9bd066f559e2b3dec3ed1b02ab61139355 (diff)
download	web-86052d897aa2bed9bd732e1155ef760cc850a65f.tar.xz