Add two-line moon datetime and lunar hour display

Author: Heersin

assets/css/main.css

@@ -151,8 +151,31 @@ a {
 }
 
 .moon-wrap {
-  display: grid;
-  place-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 286px;
+  padding-bottom: 1.6rem;
+  position: relative;
+  z-index: 1;
+}
+
+.moon-datetime {
+  margin-top: auto;
+  min-height: 3.4rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 0.2rem;
+  font-size: 0.82rem;
+  line-height: 1.35;
+  color: rgba(255, 255, 255, 0.9);
+  letter-spacing: 0.04em;
+  text-align: center;
+}
+
+.moon-datetime-line {
+  margin: 0;
 }
 
 .moon {

assets/js/moon-phase.js

@@ -30,4 +30,32 @@
   moon.setAttribute('aria-label', label);
   const text = document.querySelector('.moon-label');
   if (text) text.textContent = label;
+
+  const gregorianText = document.querySelector('[data-gregorian-datetime]');
+  const lunarText = document.querySelector('[data-lunar-datetime]');
+  if (!gregorianText || !lunarText) return;
+
+  const nowDate = new Date();
+  const gregorianFormatter = new Intl.DateTimeFormat('en-US', {
+    weekday: 'short',
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  });
+
+  const lunarFormatter = new Intl.DateTimeFormat('zh-CN-u-ca-chinese', {
+    month: 'long',
+    day: 'numeric'
+  });
+
+  const earthlyBranches = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
+  const hourIndex = Math.floor((nowDate.getHours() + 1) / 2) % 12;
+  const branchHour = `${earthlyBranches[hourIndex]}时`;
+
+  gregorianText.textContent = gregorianFormatter.format(nowDate);
+  lunarText.textContent = `${lunarFormatter.format(nowDate)} ${branchHour}`;
 })();

layouts/index.html

@@ -3,6 +3,10 @@
   <div class="sky-panel pixel-border">
     <div class="moon-wrap">
       <div class="moon" data-moon-phase></div>
+      <div class="moon-datetime" aria-live="polite">
+        <p class="moon-datetime-line" data-gregorian-datetime></p>
+        <p class="moon-datetime-line" data-lunar-datetime></p>
+      </div>
     </div>
     <div class="intro">
       <h1>{{ default .Site.Title .Site.Params.home.title }}</h1>