Add world clocks to block_timeHEADmaster

1 files changed, 27 insertions, 6 deletions

diff --git a/app/static/style.css b/app/static/style.css
index a186f24..9089bc6 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -1,4 +1,12 @@
 /* MASU */
+/* Design decisions:
+ * * Minimum viewport resolution: 440x440px
+ * * simple is better
+ *
+ * Good and simple UI sites:
+ * * https://archlinux.org/packages/  (https://github.com/archlinux/archweb)
+ * * https://suckless.org/
+ */
 body {
     margin: 0;
     padding: 0;
@@ -47,12 +55,25 @@ header button, header label {
     }
 }
 
+/* tooltip: span element with "title" attribute (KISS) */
+span[title] {
+    /*border-bottom: 1px dotted;*/
+    text-decoration: dotted underline;
+}
+
 /* block_time */
 #time .block {
     justify-content: center;
 }
 
-#timeVisualizer .grid {
+#time-localClock {
+}
+
+#time-worldClock {
+    font-size: 12px;
+}
+
+#time-timeVisualizer .grid {
     display: grid;
     grid-template-columns: repeat(8, 42px);
     grid-template-rows: repeat(3, 42px);
@@ -63,7 +84,7 @@ header button, header label {
     margin: 0 auto;
 }
 
-#timeVisualizer .cell {
+#time-timeVisualizer .cell {
     width: 42px;
     height: 42px;
     background: #ffffff;
@@ -71,15 +92,15 @@ header button, header label {
     border: 1px solid #ddd;
 }
 
-#timeVisualizer .sleep {
+#time-timeVisualizer .sleep {
     background: #e6f3ff;
 }
 
-#timeVisualizer .past {
+#time-timeVisualizer .past {
     background: #cccccc;
 }
 
-#timeVisualizer .current::after {
+#time-timeVisualizer .current::after {
     content: '';
     position: absolute;
     left: 0;
@@ -89,7 +110,7 @@ header button, header label {
     background: #cccccc;
 }
 
-#timeVisualizer .timeline {
+#time-timeVisualizer .timeline {
     position: absolute;
     width: 2px;
     height: 100%;