make opening hours a nice box too

web/src/components/blocks/OpeningHoursSectionBlock.tsx

@@ -46,6 +46,7 @@ export async function OpeningHoursSectionBlock() {
   return (
     <section className={styles.openingHoursSection}>
       {announcement && <p>{announcement}</p>}
+      <div className={styles.openingHoursList}>
         {subsections.map((subsection) => {
           const [slug, title] = subsection;
           const prettyHours = getPrettyOpeningHoursForFunction(
@@ -63,6 +64,7 @@ export async function OpeningHoursSectionBlock() {
             />
           );
         })}
+      </div>
     </section>
   );
 }

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

@@ -1,24 +1,24 @@
 .openingHoursSection {
+  p {
+    margin: 0 auto;
+  }
+}
+
+.openingHoursList {
+  margin: var(--spacing-section-bottom) 0;
   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;
-  }
+  background: var(--color-background-secondary);
 }
 
 .openingHoursSubsection {
-  grid-column: span 5;
-  margin: 1rem 0 0;
-
-  &:nth-of-type(odd) {
-    grid-column: 2 / span 5;
-  }
+  grid-column: span 4;
+  padding: calc(var(--spacing-gap-column)/1.5) var(--spacing-gap-column) var(--spacing-gap-column);
+  font-size: var(--font-size-caption);
 
   h3 {
-    margin-bottom: .5rem;
+    font-size: var(--font-size-lead);
+    margin: 0 0 1rem;
   }
 }
 
@@ -28,14 +28,15 @@
   }
 }
 
-@media (max-width: 1000px) {
-  .openingHoursSection {
-    p {
-      grid-column: 1 / -1;
+@media (max-width: 1200px) {
+  .openingHoursList {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .openingHoursSubsection {
+    padding: var(--spacing-gap-column);
+    h3 {
+      margin-bottom: 0;
     }
   }
-  .openingHoursSubsection,
-  .openingHoursSubsection:nth-of-type(odd) {
-    grid-column: 1 / -1;
-  }
 }

web/src/lib/openinghours.ts

@@ -141,13 +141,13 @@ function formatGroupedHours(
     const endDayName =
       group.days.length > 1 ? WEEKDAYS_NORWEGIAN[endDayIndex] : "";
 
-    const rangeName = startDayName + (endDayName ? " - " + endDayName : "");
+    const rangeName = startDayName + (endDayName ? "—" + endDayName : "");
 
     const formattedRange = {
       range: rangeName,
       ...(group.timeFrom && group.timeTo
         ? {
-            time: `${group.timeFrom.slice(0, 5)} - ${group.timeTo.slice(0, 5)}`,
+            time: `${group.timeFrom.slice(0, 5)}—${group.timeTo.slice(0, 5)}`,
           }
         : {}),
       ...(group.custom ? { custom: group.custom } : {}),