summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTrumeet <yuuta@yuuta.moe>2022-01-27 16:49:34 -0800
committerTrumeet <yuuta@yuuta.moe>2022-01-27 16:49:34 -0800
commitaebb4eac78392a300f6e219a96585b483b4934a1 (patch)
tree5e3d5e4c9b4cff54cd807b68fc203c9e5ed6b035
parent8ad144b1c513cf9b19904ea01ce7ac854b742c9e (diff)
downloadwww-aebb4eac78392a300f6e219a96585b483b4934a1.tar
www-aebb4eac78392a300f6e219a96585b483b4934a1.tar.gz
www-aebb4eac78392a300f6e219a96585b483b4934a1.tar.bz2
www-aebb4eac78392a300f6e219a96585b483b4934a1.zip
Add sidebar
-rw-r--r--index.html73
-rw-r--r--sidebar.css44
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;
+}