From d9af103b9a8aed86d6ac834f1240edfb2173ffa0 Mon Sep 17 00:00:00 2001
From: Mitsuo Tokumori <mitsuo@tokumori.xyz>
Date: Sat, 8 Mar 2025 02:17:52 +0900
Subject: Restructure js and css into single block modules

Each block is defined by:
* html: front-end elements (modify: templates/index.html) (for now)
* css: front-end design (modify: static/style.css)
* js: front-end code (new file: static/block_name.js)
* python: back-end code (new file: ./block_name.py)
  (will move later from the root to an "app" directory (python package)
---
 static/style.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 50 insertions(+), 2 deletions(-)

(limited to 'static/style.css')

diff --git a/static/style.css b/static/style.css
index 4b3696e..a186f24 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,3 +1,4 @@
+/* MASU */
 body {
     margin: 0;
     padding: 0;
@@ -46,7 +47,54 @@ header button, header label {
     }
 }
 
-/* Block specific stuff */
-.block #time {
+/* block_time */
+#time .block {
     justify-content: center;
 }
+
+#timeVisualizer .grid {
+    display: grid;
+    grid-template-columns: repeat(8, 42px);
+    grid-template-rows: repeat(3, 42px);
+    gap: 2px;
+    background: #f0f0f0;
+    padding: 5px;
+    width: fit-content;
+    margin: 0 auto;
+}
+
+#timeVisualizer .cell {
+    width: 42px;
+    height: 42px;
+    background: #ffffff;
+    position: relative;
+    border: 1px solid #ddd;
+}
+
+#timeVisualizer .sleep {
+    background: #e6f3ff;
+}
+
+#timeVisualizer .past {
+    background: #cccccc;
+}
+
+#timeVisualizer .current::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: var(--fill);
+    background: #cccccc;
+}
+
+#timeVisualizer .timeline {
+    position: absolute;
+    width: 2px;
+    height: 100%;
+    background: #000000;
+    z-index: 1;
+}
+
+/* block_weather */
-- 
cgit v1.2.3