misc happy styling, event header tables, etc

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

@@ -1,6 +1,6 @@
 .featuredBlock {
   background: var(--color-background-secondary);
-  margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepaddign-inline)*-1);
+  margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepadding-inline)*-1);
   padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
   display: grid;
   grid-template-columns: repeat(2, 1fr);

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

@@ -1,7 +1,6 @@
 .horizontalRuleBlock {
   height: 3rem;
   width: 100%;
-  max-width: var(--size-width-p);
   margin: var(--spacing-s) auto var(--spacing-section-bottom);
   overflow: hidden;
   position: relative;

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

@@ -101,11 +101,11 @@
     font-style: italic;
     max-width: calc(var(--size-width-p) * 1.4);
     margin: 2rem 0 3.2rem;
-    text-align: center;
   }
 
-  strong {
+  strong,
-    font-weight: 700;
+  b {
+    font-weight: 600;
   }
 
   em {

web/src/components/events/EventHeader.tsx

@@ -26,9 +26,9 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
           <Link href="/arrangementer">Arrangement</Link>
         </span>
         <h1 className={styles.title}>{event.title}</h1>
-        <div className={styles.details}>
+        <div className={styles.eventDetails}>
           <div className={styles.prices}>
-            {/*<h2>Pris</h2>*/}
+            <span className={styles.label}>Pris:</span>
             <ul className={styles.priceList}>
               {event.free && (
                 <li className={styles.priceItem}>
@@ -55,6 +55,19 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
               )}
             </ul>
           </div>
+          {event.categories.length > 0 && (
+            <div>
+              <span className={styles.label}>Kategorier:</span>{" "}
+              {event.categories.map((x) => x.name).join(", ")}
+            </div>
+          )}
+          {event.organizers && (
+            <div>
+              <span className={styles.label}>Arrangeres av:</span>{" "}
+              <OrganizerList event={event} />
+            </div>
+          )}
+        </div>
         {event.ticketUrl && (
           <a href={event.ticketUrl} className="button cta">
             <span>Kjøp billetter</span>
@@ -62,17 +75,11 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
           </a>
         )}
         {event.facebookUrl && (
-            <a href={event.facebookUrl} className="textLink">
+          <a href={event.facebookUrl} className="button tertiary">
-              Gå til Facebook-event
+            <span>Gå til Facebook-event</span>
+            <Icon type="externalLink" />
           </a>
         )}
-          {event.categories.length > 0 && (
-            <div>
-              Kategorier: {event.categories.map((x) => x.name).join(", ")}
-            </div>
-          )}
-          {event.organizers && <OrganizerList event={event} />}
-        </div>
       </div>
       <div className={styles.image}>
         {featuredImage && (

web/src/components/events/OrganizerList.tsx

@@ -8,12 +8,9 @@ import Link from "next/link";
 
 export const OrganizerList = ({ event }: { event: EventFragment }) => {
   return (
-    <div className={styles.organizerList}>
+    <ul className={styles.organizerList}>
-      <h2>Arrangeres av</h2>
-      <ul>
       {event.organizers.map((organizer) => {
-          const url =
+        const url = organizer.association?.url ?? organizer.externalUrl ?? null;
-            organizer.association?.url ?? organizer.externalUrl ?? null;
         if (typeof url === "string" && url.startsWith("http")) {
           return (
             <li key={organizer.name}>
@@ -24,6 +21,5 @@ export const OrganizerList = ({ event }: { event: EventFragment }) => {
         return <li key={organizer.name}>{organizer.name}</li>;
       })}
     </ul>
-    </div>
   );
 };

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

@@ -1,7 +1,11 @@
+.dateWrapper {
+  background: var(--color-background-secondary);
+  margin: 0 calc(var(--spacing-sitepadding-inline)*-1) var(--spacing-sitepadding-block);
+  padding: var(--spacing-s) var(--spacing-sitepadding-inline) var(--spacing-m);
+}
+
 .dateList {
   list-style: none;
-  margin: 0 calc(var(--spacing-sitepadding-inline)*-1) calc(var(--spacing-sitepadding-block)*2);
-  padding: 0 var(--spacing-sitepadding-inline);
   display: flex;
   gap: var(--spacing-s);
 }

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

@@ -4,7 +4,7 @@
   grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
   align-items: flex-end;
-  padding: 0 0 var(--spacing-sitepadding-inline) 0;
+  padding: 0;
 }
 
 .title {
@@ -18,29 +18,62 @@
   img {
     max-width: 100%;
     height: auto;
+    display: block;
   }
 }
 
-.details {}
+.text {
+  padding-bottom: var(--spacing-m);
+}
+
+.eventDetails {
+  font-size: var(--font-size-caption);
+  margin: var(--spacing-m) 0;
+
+  >div {
+    padding: var(--spacing-xs) 0;
+    border-bottom: var(--border);
+    display: flex;
+  }
+}
 
 .prices {
-  margin: 2rem 0 var(--spacing-s);
+  padding: var(--spacing-xs) 0 0;
-
+  border-top: var(--border);
-  h2 {
+  display: flex;
-    font-size: var(--spacing-s);
-    font-family: var(--font-main);
-  }
 }
 
 .priceList {
   list-style: none;
+  //flex-grow: 1;
 }
 
 .priceItem {
-  font-size: var(--font-size-caption);
   position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  /*padding: var(--spacing-xs) 0;
+  border-bottom: var(--border);
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    padding-bottom: 0;
+  }*/
 }
 
 .priceLabel {
+  display: block;
+}
+
+.label {
   font-weight: 600;
 }
+
+.label {
+  width: 7rem;
+}

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

@@ -121,4 +121,10 @@
   padding: 0 .4rem;
   font-size: var(--font-size-xs);
   font-family: var(--font-main);
+  font-weight: 500;
+}
+
+.moreDates {
+  color: var(--color-goldenBeige);
+  background: var(--color-deepBrick);
 }

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

@@ -1,10 +1,9 @@
 .organizerList {
-  h2 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  ul {
   list-style: none;
+  display: inline;
+
+  li {
+    display: inline;
+    font-size: var(--font-size-caption);
   }
 }

web/src/components/layout/Footer.tsx

@@ -12,25 +12,31 @@ export const Footer = () => {
         <h2 className="suphead">Følg oss</h2>
         <ul>
           <li>
-            <a href="#" target="_blank" className="button tertiary">
+            <a
+              href="https://www.instagram.com/studentersamfundet/"
+              target="_blank"
+              className="button tertiary"
+            >
               <span>Instagram</span>
               <Icon />
             </a>
           </li>
           <li>
-            <a href="#" target="_blank" className="button tertiary">
+            <a
+              href="https://www.facebook.com/studentersamfundet"
+              target="_blank"
+              className="button tertiary"
+            >
               <span>Facebook</span>
               <Icon />
             </a>
           </li>
           <li>
-            <a href="#" target="_blank" className="button tertiary">
+            <a
-              <span>Twitter</span>
+              href="https://www.flickr.com/groups/neuf/pool/"
-              <Icon />
+              target="_blank"
-            </a>
+              className="button tertiary"
-          </li>
+            >
-          <li>
-            <a href="#" target="_blank" className="button tertiary">
               <span>Flickr</span>
               <Icon />
             </a>

web/src/components/layout/footer.module.scss

@@ -1,13 +1,14 @@
 .footer {
   padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
-  background: var(--color-chateauBlue);
+  background: var(--color-deepBrick);
   color: var(--color-betongGray);
   position: relative;
   z-index: 700;
-
-  button {
   font-size: var(--font-size-caption);
-    background: var(--color-neufPink);
+  overflow: hidden;
+
+  a {
+    font-size: var(--font-size-caption);
   }
 }
 
@@ -91,14 +92,20 @@
 }
 
 .pig {
-  position: relative;
+  position: absolute;
-  top: 0;
+  bottom: -2rem;
-  right: 0;
+  right: -2rem;
   z-index: 800;
 }
 
 .toTop {
   position: absolute;
+  z-index: 801;
   right: var(--spacing-sitepadding-inline);
   bottom: var(--spacing-sitepadding-block);
+  cursor: pointer;
+
+  button {
+    font-size: var(--font-size-caption);
+  }
 }

web/src/css/button.scss

@@ -24,6 +24,12 @@ button,
     text-decoration: none;
   }
 
+  &.cta {
+    padding: calc(var(--spacing-xs)*1.5) calc(var(--spacing-s)*1.5);
+    display: flex;
+    justify-content: space-between;
+  }
+
   &.secondary {
     color: var(--color-deepBrick);
     background: var(--color-goldenBeige);