refactor(index.html): update title and adjust layout styles

ledihildawan · ledihildawan · commit 20c29b5b0b60 · 2026-01-11T21:56:00.000+07:00
- Changed the title to "Galactic Odyssey MPV2 - Even Row Unified Engine".
- Adjusted padding and font sizes for better visual consistency.
- Refactored scrolling logic to improve performance and readability.
- Implemented even row height distribution for grid layout.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <title>Galactic Odyssey MPV2 - Unified Engine</title>
+    <title>Galactic Odyssey MPV2 - Even Row Unified Engine</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link
       href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700;900&display=swap"
@@ -271,7 +271,6 @@
         background: var(--cell-bg);
         position: relative;
         box-shadow: inset 0 0 0 0.5px var(--border);
-        min-height: 60px;
         display: flex;
         flex-direction: column;
         transition: background 0.4s ease;
@@ -331,19 +330,19 @@
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
-        padding: 12px 4px;
+        padding: 8px 4px;
         z-index: 2;
         pointer-events: none;
       }
       .info-meta {
-        font-size: clamp(7px, 0.9dvh, 8px);
+        font-size: clamp(6px, 0.8dvh, 8px);
         text-transform: uppercase;
         font-weight: 600;
         color: var(--text-muted);
         letter-spacing: 0.1em;
       }
       .date-num {
-        font-size: clamp(18px, 3dvh, 26px);
+        font-size: clamp(14px, 2.5dvh, 22px);
         font-weight: 300;
         line-height: 1;
         color: var(--text-main);
@@ -789,6 +788,7 @@
           const vw = window.innerWidth,
             vh = window.innerHeight;
           let cols, gO;
+
           if (this.#isRandomMode && vw >= 600) {
             cols = Math.ceil(Math.sqrt(365 * (vw / vh)));
             gO = Math.floor(jan1.getTime() / 86400000) % cols;
@@ -797,15 +797,16 @@
             gO = (jan1.getDay() + 6) % 7;
           }
           const rows = Math.ceil((daysInYear + gO) / cols);
-          if (vh / rows < 60) block.classList.add('is-scrolling');
+          const isSc = vh / rows < 60;
+          if (isSc) block.classList.add('is-scrolling');
 
           const itD = new Date(year, 0, 1 - gO);
           const tS = this.#today.toDateString();
 
           const fragment = document.createDocumentFragment();
           const container = document.createElement('div');
           container.className = 'grid-container';
-          container.style.overflowY = block.classList.contains('is-scrolling') ? 'auto' : 'hidden';
+          container.style.overflowY = isSc ? 'auto' : 'hidden';
 
           const wm = document.createElement('div');
           wm.className = 'watermark-embedded';
@@ -814,8 +815,10 @@
 
           const grid = document.createElement('div');
           grid.className = 'grid-layer';
+          // Perubahan Utama: Menggunakan 1fr untuk baris agar tinggi terbagi rata (Even Rows)
           grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
-          grid.style.height = block.classList.contains('is-scrolling') ? 'auto' : '100%';
+          grid.style.gridTemplateRows = isSc ? `repeat(${rows}, minmax(60px, 1fr))` : `repeat(${rows}, 1fr)`;
+          grid.style.height = isSc ? 'auto' : '100%';
 
           for (let s = 0; s < cols * rows; s++) {
             const isM = itD.getFullYear() === year,
@@ -829,11 +832,13 @@
             } ${isM && (dY === 0 || dY === 6) ? 'weekend' : ''} ${isM && dY === 1 ? 'week-start' : ''}`;
 
             const showMonth = isM && (dD === 1 || s === gO);
-            cell.innerHTML = `<div class="cell-content"><span class="info-meta ${dD === 1 && isM ? 'top-label' : ''}">${
+            cell.innerHTML = `<div class="cell-content">
+                                <span class="info-meta ${dD === 1 && isM ? 'top-label' : ''}">${
               showMonth ? this.#months[dM] : ''
-            }</span><span class="date-num">${dD}</span><span class="info-meta">${
-              isM ? this.#days[dY] : ''
-            }</span></div>`;
+            }</span>
+                                <span class="date-num">${dD}</span>
+                                <span class="info-meta">${isM ? this.#days[dY] : ''}</span>
+                              </div>`;
             grid.append(cell);
             itD.setDate(dD + 1);
           }
