Better hours display

508-dev · Dec 13, 2023 · 0b1659d · 0b1659d
1 parent 737beb0
commit 0b1659d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -46,13 +46,13 @@ <h3>
           營業時間 / Hours:
         </dt>
         <dd>
-          <div>星期一 / Monday: 11:00 - 15:00, 17:00 - 19:00</div>
-          <div>星期二 / Tuesday: 11:00 - 15:00, 17:00 - 19:00</div>
-          <div>星期三 / Wednesday: 11:00 - 15:00, 17:00 - 19:00</div>
-          <div>星期四 / Thursday: 11:00 - 15:00, 17:00 - 19:00</div>
-          <div>星期五 / Friday: 11:00 - 15:00, 17:00 - 19:00</div>
-          <div>星期六 / Saturday: 11:00 - 15:00, 17:00 - 19:00</div>
-          <div>星期日 / Sunday: 關閉 / Closed</span>
+          <div class="hours-item"><span>星期一 / Monday:</span> <span>11:00 - 15:00, 17:00 - 19:00</span></div>
+          <div class="hours-item"><span>星期二 / Tuesday:</span> <span>11:00 - 15:00, 17:00 - 19:00</span></div>
+          <div class="hours-item"><span>星期三 / Wednesday:</span> <span>11:00 - 15:00, 17:00 - 19:00</span></div>
+          <div class="hours-item"><span>星期四 / Thursday:</span> <span>11:00 - 15:00, 17:00 - 19:00</span></div>
+          <div class="hours-item"><span>星期五 / Friday:</span> <span>11:00 - 15:00, 17:00 - 19:00</span></div>
+          <div class="hours-item"><span>星期六 / Saturday:</span> <span>11:00 - 15:00, 17:00 - 19:00</span></div>
+          <div class="hours-item"><span>星期日 / Sunday:</span> <span>關閉 / Closed</span></span>
         </dd>
 
 

diff --git a/styles.css b/styles.css
@@ -119,3 +119,28 @@ main {
 .logo {
     width: 7em;
 }
+
+.hours-item {
+    display: flex;
+    justify-content: space-between;
+}
+
+dd {
+    margin-inline-start: 40px;
+}
+
+
+
+/* very small mobile */
+@media only screen and (max-width: 394px) {
+    dd {
+        margin-inline-start: 10px;
+    }
+}
+
+/* very very small mobile */
+@media only screen and (max-width: 361px) {
+    dd {
+        margin-inline-start: 3px;
+    }
+}