misc design improvements

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

@@ -25,6 +25,18 @@
     text-transform: uppercase;
     letter-spacing: 0.06em;
     font-weight: 700;
+
+    &:before {
+      content: "";
+      display: inline-block;
+      vertical-align: middle;
+      width: .8em;
+      height: .8em;
+      margin-bottom: .16rem;
+      border-radius: .8em;
+      background: var(--color-goldenOrange);
+      margin-right: .75rem;
+    }
   }
 }
 

web/src/components/events/DateList.tsx

@@ -23,10 +23,8 @@ const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => {
         </span>
         <span className={styles.hour}>
           {formatDate(occurrence.start, timeFormat)}
-        </span>
+        </span>&nbsp;
-      </div>
+        <span className={styles.venue}>
-      <div className={styles.venue}>
-        <span>
           {occurrence.venue?.preposition + " " ?? ""}
           {occurrence.venue?.url && (
             <Link href={occurrence.venue?.url}>{occurrence.venue?.title}</Link>

web/src/components/events/EventContainer.tsx

@@ -127,32 +127,36 @@ export const EventContainer = ({
     <div className={styles.events}>
       <div className={styles.eventWrapper}>
         <div className={styles.displayOptions}>
-          <button
+          <div className={styles.displayButtons}>
-            onClick={() => setMode(null)}
+            <button
-            className="button toggler hasIcon"
+              onClick={() => setMode(null)}
-            data-active={mode === "list"}
+              className="button toggler hasIcon"
-          >
+              data-active={mode === "list"}
-            <span>Vis liste</span>
+            >
-            <Icon type="list" />
+              <span>Vis liste</span>
-          </button>
+              <Icon type="list" />
-          <button
-            onClick={() => setMode("calendar")}
-            className="button toggler hasIcon"
-            data-active={mode === "calendar"}
-          >
-            <span>Vis kalender</span>
-            <Icon type="calendar" />
-          </button>
-          {(category || organizer || venue) && (
-            <button onClick={onResetFilters} className="button tertiary">
-              <span>Vis alle</span>
-              <Icon type="noFilter" />
             </button>
-          )}
+            <button
-          <button onClick={toggleFilter} className="button tertiary">
+              onClick={() => setMode("calendar")}
-            <span>Filter</span>
+              className="button toggler hasIcon"
-            <Icon type="filter" />
+              data-active={mode === "calendar"}
-          </button>
+            >
+              <span>Vis kalender</span>
+              <Icon type="calendar" />
+            </button>
+          </div>
+          <div className={styles.filterButtons}>
+            {(category || organizer || venue) && (
+              <button onClick={onResetFilters} className="button tertiary">
+                <span>Vis alle</span>
+                <Icon type="noFilter" />
+              </button>
+            )}
+            <button onClick={toggleFilter} className="button tertiary">
+              <span>Filter</span>
+              <Icon type="filter" />
+            </button>
+          </div>
         </div>
         <EventFilter
           eventCategories={filterableCategories}

web/src/components/events/dateList.module.scss

@@ -9,11 +9,12 @@
 
 .date {
   display: inline-block;
+  width: 14em;
   font-family: var(--font-serif);
-  font-size: var(--font-size-body);
+  font-size: var(--font-size-caption);
   position: relative;
-  line-height: 1.2;
+  line-height: 1.4;
-  margin: 0 2rem 1rem 0;
+  padding: 0 2rem 1rem 0;
 }
 
 .time {
@@ -29,9 +30,10 @@
 }
 
 .hour {
-  display: block;
+  display: inline-block;
 }
 
 .venue {
+  display: inline-block;
   font-style: italic;
 }

web/src/components/events/eventContainer.module.scss

@@ -13,17 +13,24 @@
 
 .displayOptions {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--spacing-xs);
   align-items: center;
   position: relative;
   z-index: 10;
   transition: background-color .5s ease;
 
+  >div {
+    display: flex;
+    gap: var(--spacing-xs);
+    align-items: center;
+  }
+
   button {
     margin-bottom: 0;
   }
 
-  button:last-child {
+  .filterButtons {
     margin: 0 0 0 auto;
   }
 
@@ -37,7 +44,7 @@
 }
 
 .calendarYearMonth {
-  margin-top: var(--spacing-sitepadding-block);
+  margin: var(--spacing-sitepadding-block) 0;
 
   h2 {
     font-size: var(--font-size-lead);
@@ -129,4 +136,12 @@
   .eventList {
     grid-template-columns: 1fr;
   }
+  .displayOptions {
+    .displayButtons {
+      width: 100%;
+    }
+    .filterButtons {
+      margin: 0;
+    }
+  }
 }

web/src/components/events/eventFilter.module.scss

@@ -19,7 +19,7 @@
 
   &[data-show=true] {
     grid-template-rows: 1fr;
-    margin: var(--spacing-sitepadding-block) calc(var(--spacing-sitepadding-inline)*-1) 0;
+    margin: var(--spacing-s) calc(var(--spacing-sitepadding-inline)*-1) 0;
 
     .filterContent {
       padding: var(--spacing-s) var(--spacing-sitepadding-inline);

web/src/components/events/eventItem.module.scss

@@ -30,8 +30,7 @@
     }
 
     .dates,
-    .title,
+    .title {
-    .details {
       font-size: var(--font-size-body);
     }
 
@@ -47,8 +46,8 @@
       margin: .2em 0;
     }
 
-    .dates {
+    .day, .dates {
-      font-size: var(--font-size-caption);
+      font-size: var(--font-size-xs);
     }
 
     .text {