Restyle the calendar to look more calendary

1 files changed, 37 insertions, 5 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 1ff0897..c629ef5 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -600,7 +600,7 @@ a.next-link::after {
 }
 
 /* Calendar */
-#lunar-solar-cal #month-year-row {
+#month-year-row, #weekday-row {
     text-align: center;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
@@ -611,13 +611,45 @@ a.next-link::after {
     text-align: center;
 }
 
-#lunar-solar-cal #weekday-row {
+#lunar-day {
+    font-size: 3em;
+    text-align: center;
+}
+
+#lunar-day-zh {
+    font-size: 1.5em;
+}
+
+#lunar-cal-vi, #lunar-cal-zh {
     text-align: center;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
 }
 
 #lunar-solar-cal #lunar-cal {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 2fr 1fr 2fr;
+    margin-top: 1rem;
+}
+
+button#nav-day-before::before {
+    content: "←";
+    font-size: 3rem
+}
+button#nav-day-after::before {
+    content: "→";
+    font-size: 3rem
+}
+
+#day-area {
+    display: grid;
+    grid-template-columns: 1fr 5fr 1fr;
+    height: 12rem;
+}
+
+#special-day-vi {
+    text-align: center
+}
+
+.holiday {
+    border: 1px solid var(--red);
+    color: var(--red);
 }