Update latest news text and layout

1 files changed, 38 insertions, 43 deletions

diff --git a/index.html b/index.html
index 5ccb16a..96a5b95 100644
--- a/index.html
+++ b/index.html
@@ -14,16 +14,14 @@
 .header h1 {
 	padding: 8px;
 }
-.container {
-	margin: 0px;
-	padding: 0px;
-	display: flex;
-	flex-direction: row;
-}
-.left {
-	flex: auto;
-}
-.right {
+.updates {
+	width: 320px;
+	position: fixed;
+	z-index: 1;
+	top: 0;
+	right: 0;
+	margin-right: 8px;
+	overflow-x: hidden;
 }
 </style>
 	</head>
@@ -48,39 +46,36 @@
 			</footer>
 		</div>
 		<div class="main">
-			<div class="container">
-				<div class="left">
-				<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="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="projs">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>
-				<div class="right">
-					<h3>Latest News</h3>
-					<h4>Mar. 5 / 2022: This site supports Latest News!</h4>
-				</div>
-			</div>
+			<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="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="projs">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>
+		<div class="updates">
+			<h3>Latest News</h3>
+			<h4>Mar. 5 / 2022: This site supports Latest News!</h4>
+			<p>To give visitors a quick glance at my most important updates, I added this section of latest news. You may find something like GPG key renew or service migration here. I will continue working on the CSS for this section though (it's a little bit rough now). RSS is on the way (or it probably won't come).</p>
 		</div>
 	</body>
 </html>