Add sidebar

author: Trumeet <yuuta@yuuta.moe> 2022-01-27 16:49:34 -0800
committer: Trumeet <yuuta@yuuta.moe> 2022-01-27 16:49:34 -0800
commit: aebb4eac78392a300f6e219a96585b483b4934a1 (patch)
tree: 5e3d5e4c9b4cff54cd807b68fc203c9e5ed6b035
parent: 8ad144b1c513cf9b19904ea01ce7ac854b742c9e (diff)
download: www-aebb4eac78392a300f6e219a96585b483b4934a1.tar
www-aebb4eac78392a300f6e219a96585b483b4934a1.tar.gz
www-aebb4eac78392a300f6e219a96585b483b4934a1.tar.bz2
www-aebb4eac78392a300f6e219a96585b483b4934a1.zip
2 files changed, 91 insertions, 26 deletions
diff --git a/index.html b/index.html
index a13dba8..d7185de 100644
--- a/index.html
+++ b/index.html
@@ -4,33 +4,54 @@
 		<meta charset=utf-8>
 		<title>Yuuta Liang's Site</title>
 		<link rel="stylesheet" href="/milligram.min.css">
+		<link rel="stylesheet" href="/sidebar.css">
 	</head>
 	<body>
-		<h1>Welcome to Yuuta Liang's Site</h1>
-		<p>My place on the Internet.</p>
-		<p>Who am I? <a href="https://blog.yuuta.moe/about/">About me</a> and <a href="https://blog.yuuta.moe/projs/">Check out my work</a>.</p>
-		<p>I speak English and Mandarin, write English and Simplified Chinese. Timezone: America/Pacific.</p>
-		<h2>Websites</h2>
-		<p>You may find my essays and tutorials at <a href="https://blog.yuuta.moe/">my blog</a>.</p>
-		<p>I share my codes at <a href="https://git.yuuta.moe/">my git server</a>.</p>
-		<p>A public IPv6 only file share is available at <a href="https://ftp.yuuta.moe/">my ftp site</a>.</p>
-		<p>I also run an ASN: AS142281 (and AS4242422980 at DN42). Learn more at <a href="https://yuuta.network">Yuuta Network</a>.</p>
-		<p>My DN42 network provides automatic peering service at <a href="https://peering.yuuta.moe">peering.yuuta.moe</a>. It is written in Java.</p>
-		<p>I play games as well. I have a technical Minecraft server: <a href="https://ymc.moe">YMC</a> with the focus on redstone and game mechanisms.</p>
-		<h2>Projects</h2>
-		<p>A full overview of what I did is available at <a href="https://blog.yuuta.moe/projs/">blog/projs</a>.</p>
-		<p>Or, you could checkout my highlighted products list:</p>
-		<ul>
-			<li><a href="minecraft-pacman/">Minecraft Pacman: Manage Minecraft and Fabric versions using pacman(1)!</a></li>
-			<li>I'm keep adding projects here. Some not distributable projects (e.g. internal services or servers) are not listed.</li>
-		</ul>
-		<h2>Contact</h2>
-		<p>Besides my site, you can always reach me on various platforms.</p>
-		<p><a href="https://twitter.com/NeoTrumeet">Twitter</a>, <a href="https://github.com/Trumeet">GitHub</a></p>
-		<p>If you have anything to ask, or any patches for my projects, send them via email: <code>eXV1dGFAeXV1dGEubW9lCg==</code> (backup: <code>dHJ1bWVldGNAZ21haWwuY29tCg==</code>).</p>
-		<p>Always remember to sign your email via PGP! My public key is <a href="https://blog.yuuta.moe/F99854A5DAA0D15DF2FEF89CBCD2B4B9E853C284.gpg">F99854A5DAA0D15DF2FEF89CBCD2B4B9E853C284</a>. It expires every six months, so make sure to update.</p>
-		<p>Thanks for reading!</p>
-		<p>If you find my projects or blogs useful, please consider <a href="https://blog.yuuta.moe/donate/">making a donation</a>.</p>
-		<p><i><a href="https://git.yuuta.moe/www.git">View or clone page source</a></i></p>
+		<div class="sidenav">
+			<p>Home</p>
+			<p>Sites</p>
+			<a href="https://blog.yuuta.moe/">Blog</a>
+			<a href="https://git.yuuta.moe/">Git</a>
+			<a href="https://ftp.yuuta.moe/">FTP</a>
+			<a href="https://ymc.moe/">YMC</a>
+			<p>Services</p>
+			<a href="https://yuuta.network/">YuutaNet</a>
+			<p>Projects</p>
+			<a href="minecraft-pacman">Minecraft-Pacman</a>
+			<a href="https://blog.yuuta.moe/projs/">Others</a>
+			<p>Contact</p>
+			<a href="#"><code>eXV1dGFAeXV1dGEubW9lCg==</code></a>
+			<a href="https://blog.yuuta.moe/donate">Donate</a>
+			<footer>
+				<a href="https://git.yuuta.moe/www.git">Website Source</a>
+			</footer>
+		</div>
+		<div class="main">
+			<h1>Welcome to Yuuta Liang's Site</h1>
+			<p>My place on the Internet.</p>
+			<p>Who am I? <a href="https://blog.yuuta.moe/about/">About me</a> and <a href="https://blog.yuuta.moe/projs/">Check out my work</a>.</p>
+			<p>I speak English and Mandarin, write English and Simplified Chinese. Timezone: America/Pacific.</p>
+			<h2 id="sites">Websites</h2>
+			<p>You may find my essays and tutorials at <a href="https://blog.yuuta.moe/">my blog</a>.</p>
+			<p>I share my codes at <a href="https://git.yuuta.moe/">my git server</a>.</p>
+			<p>A public IPv6 only file share is available at <a href="https://ftp.yuuta.moe/">my ftp site</a>.</p>
+			<p>I also run an ASN: AS142281 (and AS4242422980 at DN42). Learn more at <a href="https://yuuta.network">Yuuta Network</a>.</p>
+			<p>My DN42 network provides automatic peering service at <a href="https://peering.yuuta.moe">peering.yuuta.moe</a>. It is written in Java.</p>
+			<p>I play games as well. I have a technical Minecraft server: <a href="https://ymc.moe">YMC</a> with the focus on redstone and game mechanisms.</p>
+			<h2 id="projs">Projects</h2>
+			<p>A full overview of what I did is available at <a href="https://blog.yuuta.moe/projs/">blog/projs</a>.</p>
+			<p>Or, you could checkout my highlighted products list:</p>
+			<ul>
+				<li><a href="minecraft-pacman/">Minecraft Pacman: Manage Minecraft and Fabric versions using pacman(1)!</a></li>
+				<li>I'm keep adding projects here. Some not distributable projects (e.g. internal services or servers) are not listed.</li>
+			</ul>
+			<h2 id="contact">Contact</h2>
+			<p>Besides my site, you can always reach me on various platforms.</p>
+			<p><a href="https://twitter.com/NeoTrumeet">Twitter</a>, <a href="https://github.com/Trumeet">GitHub</a></p>
+			<p>If you have anything to ask, or any patches for my projects, send them via email: <code>eXV1dGFAeXV1dGEubW9lCg==</code> (backup: <code>dHJ1bWVldGNAZ21haWwuY29tCg==</code>).</p>
+			<p>Always remember to sign your email via PGP! My public key is <a href="https://blog.yuuta.moe/F99854A5DAA0D15DF2FEF89CBCD2B4B9E853C284.gpg">F99854A5DAA0D15DF2FEF89CBCD2B4B9E853C284</a>. It expires every six months, so make sure to update.</p>
+			<p>Thanks for reading!</p>
+			<p>If you find my projects or blogs useful, please consider <a href="https://blog.yuuta.moe/donate/">making a donation</a>.</p>
+		</div>
 	</body>
 </html>
diff --git a/sidebar.css b/sidebar.css
new file mode 100644
index 0000000..f5284fe
--- /dev/null
+++ b/sidebar.css
@@ -0,0 +1,44 @@
+ /* The sidebar menu */
+.sidenav {
+	height: 100%; /* Full-height: remove this if you want "auto" height */
+	width: 160px; /* Set the width of the sidebar */
+	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
+	z-index: 1; /* Stay on top */
+	top: 0; /* Stay at the top */
+	left: 0;
+	background-color: #fff;
+	overflow-x: hidden; /* Disable horizontal scroll */
+	padding-top: 20px;
+}
+
+/* The navigation menu links */
+.sidenav a {
+	padding-left: 16px;
+	text-decoration: none;
+	display: block;
+}
+
+.sidenav p {
+	padding-top: 4px;
+	padding-left: 8px;
+	margin: 0;
+	text-decoration: none;
+	display: block;
+}
+
+.main {
+	margin-left: 160px;
+	padding: 0px 10px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+	.sidenav {padding-top: 15px;}
+	.sidenav a {font-size: 18px;}
+} 
+
+.sidenav footer {
+	position: fixed;
+	left: 0;
+	bottom: 0;
+}
author	Trumeet <yuuta@yuuta.moe>	2022-01-27 16:49:34 -0800
committer	Trumeet <yuuta@yuuta.moe>	2022-01-27 16:49:34 -0800
commit	aebb4eac78392a300f6e219a96585b483b4934a1 (patch)
tree	5e3d5e4c9b4cff54cd807b68fc203c9e5ed6b035
parent	8ad144b1c513cf9b19904ea01ce7ac854b742c9e (diff)
download	www-aebb4eac78392a300f6e219a96585b483b4934a1.tar www-aebb4eac78392a300f6e219a96585b483b4934a1.tar.gz www-aebb4eac78392a300f6e219a96585b483b4934a1.tar.bz2 www-aebb4eac78392a300f6e219a96585b483b4934a1.zip