1 files changed, 63 insertions, 0 deletions
diff --git a/assets/css/main.css b/assets/css/main.css
index 8c7f075..0dfbaac 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -598,3 +598,66 @@ a.random-link::before {
 a.next-link::after {
     content: " →";
 }
+
+/* Calendar */
+#month-year-row, #weekday-row {
+    text-align: center;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+
+#lunar-solar-cal #solar-day {
+    font-size: 5em;
+    text-align: center;
+}
+
+#solar-year, #solar-weekday-vi {
+    font-size: 1.2em;
+}
+
+#lunar-day {
+    font-size: 3em;
+    text-align: center;
+}
+
+#lunar-day-zh {
+    font-size: 1.5em;
+}
+
+#lunar-cal-vi, #lunar-cal-zh {
+    text-align: center;
+}
+
+#lunar-solar-cal #lunar-cal {
+    display: grid;
+    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
+}
+
+#lunar-solar-cal {
+    border: 1px solid var(--font-color);
+}
+
+#lunar-solar-cal.holiday {
+    border: 1px solid var(--red);
+    color: var(--red);
+}