From b1d767ae178c5a0024500f2b9c691f184c45d4ac Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Tue, 6 Aug 2024 14:16:48 +0200
Subject: [PATCH] make address section a nice box, improve rich text link hover

---
 .../blocks/NeufAddressSectionBlock.tsx         |  4 +++-
 .../blocks/neufAddressSectionBlock.module.scss | 18 ++++++++++++------
 .../blocks/richTextBlock.module.scss           |  1 +
 web/src/css/base.scss                          |  1 +
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/web/src/components/blocks/NeufAddressSectionBlock.tsx b/web/src/components/blocks/NeufAddressSectionBlock.tsx
index b67c4ec..2f4d749 100644
--- a/web/src/components/blocks/NeufAddressSectionBlock.tsx
+++ b/web/src/components/blocks/NeufAddressSectionBlock.tsx
@@ -1,3 +1,4 @@
+import Icon from "../general/Icon";
 import styles from "./neufAddressSectionBlock.module.scss";
 
 export const NeufAddressSectionBlock = () => {
@@ -14,7 +15,8 @@ export const NeufAddressSectionBlock = () => {
           <br />
           <br />
           <a href="https://maps.app.goo.gl/QFw4Cu7eVsnZ42or7" target="_blank">
-            Vis i Google Maps
+            Vis i Google Maps&nbsp;
+            <Icon type="externalLink" />
           </a>
         </div>
       </div>
diff --git a/web/src/components/blocks/neufAddressSectionBlock.module.scss b/web/src/components/blocks/neufAddressSectionBlock.module.scss
index 503a168..c57b7db 100644
--- a/web/src/components/blocks/neufAddressSectionBlock.module.scss
+++ b/web/src/components/blocks/neufAddressSectionBlock.module.scss
@@ -2,14 +2,18 @@
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   column-gap: var(--spacing-gap-column);
-  row-gap: var(--spacing-gap-row);
-  align-items: flex-start;
   container-type: inline-size;
-  margin-bottom: var(--spacing-gap-row);
+  margin-bottom: var(--spacing-section-bottom);
 }
 
 .text {
-  grid-column: 2 / span 4;
+  grid-column: 1 / span 5;
+  background: var(--color-background-secondary);
+  margin-right: calc(var(--spacing-gap-column)*-1);
+  padding: var(--spacing-gap-column);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 
   h2 {
     margin: 0 0 var(--spacing-s);
@@ -23,18 +27,19 @@
     transition: text-decoration-color var(--transition-easing);
 
     &:hover {
+      opacity: 1;
       text-decoration-color: currentColor;
     }
   }
 }
 
 .map {
-  grid-column: 6 / span 6;
+  grid-column: 6 / span 7;
 
   iframe {
     border: none;
     width: 100%;
-    height: auto;
+    height: 100%;
     min-height: 16rem;
   }
 }
@@ -55,5 +60,6 @@
   .text,
   .map {
     grid-column: 1 / -1;
+    margin-right: 0;
   }
 }
\ No newline at end of file
diff --git a/web/src/components/blocks/richTextBlock.module.scss b/web/src/components/blocks/richTextBlock.module.scss
index 97263ef..a8560db 100644
--- a/web/src/components/blocks/richTextBlock.module.scss
+++ b/web/src/components/blocks/richTextBlock.module.scss
@@ -99,6 +99,7 @@
     transition: text-decoration-color var(--transition-easing);
 
     &:hover {
+      opacity: 1;
       text-decoration-color: currentColor;
     }
   }
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index bc33901..c9136d3 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -2,6 +2,7 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
+  scroll-behavior: smooth;
 }
 
 html {