From 4a46ae3bbaf3a4281bdaf39b8a4386ce8f812333 Mon Sep 17 00:00:00 2001
From: Ngô Ngọc Đức Huy <huyngo@disroot.org>
Date: Wed, 12 Feb 2025 22:55:23 +0700
Subject: Restyle the calendar to look more calendary

---
 content/cal/_index.html | 59 +++++++++++++++++++++++++++++++++++--------------
 1 file changed, 42 insertions(+), 17 deletions(-)

(limited to 'content/cal/_index.html')

diff --git a/content/cal/_index.html b/content/cal/_index.html
index 876897d..a32beca 100644
--- a/content/cal/_index.html
+++ b/content/cal/_index.html
@@ -3,39 +3,64 @@ title: Calendar
 disable_feed: true
 ---
 
+<noscript>
+	This calendar works locally in your browser and requires JavaScript to remain serverless
+</noscript>
+<div>
+	<label>
+		Solar date:
+		<input id="solar-date" type="date" />
+	</label>
+</div>
 <div id="lunar-solar-cal">
-	<noscript>
-		This calendar works locally in your browser and requires JavaScript to remain serverless
-	</noscript>
-	<div>
-		<label>
-			Solar date:
-			<input id="solar-date" type="date" />
-		</label>
-	</div>
 	<div id="solar-cal">
 		<div id="month-year-row">
-			<div id="solar-month-vi"></div>
+			<div id="solar-month-vi" lang=vi></div>
 			<div id="solar-year"></div>
 			<div id="solar-month-en"></div>
 		</div>
-		<div id="solar-day"></div>
+		<hr>
+		<div id="day-area" lang=vi>
+			<button id="nav-day-before">
+				<span class="sr-only">Ngày trước</span>
+			</button>
+			<div>
+				<div id="solar-day"></div>
+				<div id="special-day-vi"></div>
+			</div>
+			<button id="nav-day-after">
+				<span class="sr-only">Ngày tiếp theo</span>
+			</button>
+		</div>
+		<hr>
 		<div id="weekday-row">
-			<div id="solar-weekday-vi"></div>
 			<div id="solar-weekday-en"></div>
+			<div id="solar-weekday-vi" lang=vi></div>
+			<div id="solar-weekday-zh" lang=zh></div>
 		</div>
 	</div>
+	<hr>
 	<div id="lunar-cal">
-		<div id=lunar-cal-vi>
+		<div id=lunar-cal-vi lang="vi">
 			<div id="lunar-year-vi"></div>
 			<div id="lunar-month-vi"></div>
-			<div id="lunar-day-vi"></div>
+			<div id="lunar-month-zodiac-vi"></div>
+			<div id="lunar-day-zodiac-vi"></div>
+			<div id="solar-term-vi"></div>
 		</div>
-		<div id=lunar-cal-zh>
+		<div id="lunar-day"></div>
+		<div id=lunar-cal-zh lang="zh">
 			<div id="lunar-year-zh"></div>
-			<div id="lunar-month-zh"></div>
+			<div>
+				<span id="lunar-month-zh"></span> ·
+				<span id="lunar-month-zodiac-zh"></span>
+			</div>
 			<div id="lunar-day-zh"></div>
-			<div id="solar-weekday-zh"></div>
+			<div id="lunar-day-zodiac-zh"></div>
+			<div>
+				<span id="solar-term-zh"></span>
+				<span id="special-day-zh"></span>
+			</div>
 		</div>
 	</div>
 </div>
-- 
cgit 1.4.1