style search field, make main menu more fun

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

@@ -155,26 +155,77 @@
 
   transition: all var(--transition-easing);
 
+  a {
+    --size-icon: var(--font-size-caption);
+    display: inline-block;
+    padding: 0 calc(var(--size-icon) + .75rem);
+    transform: translateX(calc((var(--size-icon) + .75rem) * -1));
+    position: relative;
+    transition: transform .3s ease;
+
+    &:before {
+      content: "";
+      display: inline-block;
+      vertical-align: middle;
+      width: var(--size-icon);
+      height: var(--size-icon);
+      margin-bottom: .16rem;
+      margin-right: var(--spacing-xs);
+      border-radius: var(--size-icon);
+      background: var(--color-goldenOrange);
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      opacity: 0;
+      transition: transform .4s ease, opacity .2s ease;;
+    }
+
+    &:hover {
+      transform: translateX(0);
+      opacity: 1;
+      &:before {
+        opacity: 1;
+      }
+    }
+  }
+
   ul {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     padding: var(--spacing-sitepadding-block) 0;
   }
 }
 
 .menuItemLarge {
-  font-size: 2rem;
+  font-size: 1.6rem;
 }
 
 .divider {
-  margin-top: var(--spacing-l);
+  margin-top: var(--spacing-m);
 }
 
-.search,
-.galtinn {
-  margin-top: var(--spacing-m);
+.search {
+  margin-top: var(--spacing-l);
+  width: 100%;
+  max-width: 16rem;
+  font-size: var(--font-size-body);
+  font-weight: 500;
+  color: var(--color-deepBrick);
+  position: relative;
+
+  input {
+    width: 100%;
+    padding-right: 2rem;
+  }
+}
+
+.searchIcon {
+  position: absolute;
+  right: 1rem;
+  bottom: .6rem;
 }
 
 @media (max-width: 1200px) {