style opening hours

web/src/components/blocks/OpeningHoursSectionBlock.tsx

@@ -4,6 +4,7 @@ import {
   PrettyOpeningHours,
 } from "@/lib/openinghours";
 import styles from "./openingHoursSectionBlock.module.scss";
+import { Fragment } from "react";
 
 function OpeningHoursSubsection({
   title,
@@ -15,16 +16,20 @@ function OpeningHoursSubsection({
   return (
     <section className={styles.openingHoursSubsection}>
       <h3>{title}</h3>
-      <ul>
+      <table className="openingHours">
+        <tbody>
           {prettyHours.map(({ range, time, custom }) => (
-          <li key={range}>
-            <span className={styles.dayRange}>{range}</span>:&nbsp;
+            <tr key={range}>
+              <td className={styles.dayRange}>{range}</td>
+              <td>
                 {time && <span className={styles.timeRange}>{time}</span>}
                 {custom && <span className={styles.timeRange}>{custom}</span>}
                 {!time && !custom && <span className={styles.closed}>Stengt</span>}
-          </li>
+              </td>
+            </tr>
           ))}
-      </ul>
+        </tbody>
+      </table>
     </section>
   );
 }

web/src/components/blocks/openingHoursSectionBlock.module.scss

@@ -0,0 +1,41 @@
+.openingHoursSection {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
+
+  p {
+      grid-column: 2 / span 10;
+  }
+}
+
+.openingHoursSubsection {
+  grid-column: span 5;
+  margin: 1rem 0 0;
+
+  &:nth-of-type(odd) {
+    grid-column: 2 / span 5;
+  }
+
+  h3 {
+    margin-bottom: .5rem;
+  }
+}
+
+.dayRange {
+  &:first-letter {
+    text-transform: capitalize;
+  }
+}
+
+@media (max-width: 1000px) {
+  .openingHoursSection {
+    p {
+      grid-column: 1 / -1;
+    }
+  }
+  .openingHoursSubsection,
+  .openingHoursSubsection:nth-of-type(odd) {
+    grid-column: 1 / -1;
+  }
+}

web/src/css/base.scss

@@ -271,7 +271,7 @@ select {
     width: 50%;
     vertical-align: top;
     line-height: 1.2;
-    padding: .25em 0;
+    padding: .2rem 0;
 
     &:first-child {
       padding-right: var(--spacing-s);