menu icons, animations and color variable updates

web/src/components/general/logo.module.scss

@@ -4,7 +4,7 @@
   transition: width .3s ease;
 
   &.index {
-    width: 24rem;
+    width: 20rem;
   }
 
   svg {

web/src/components/layout/Header.tsx

@@ -85,7 +85,7 @@ export const Header = () => {
           aria-label="Vis meny"
           onClick={toggleMenu}
         >
-          <span className={styles.menuIcon}></span>
+          <MenuIcon showMenu={showMenu} />
         </button>
         <div className={styles.fullMenu}>
           <LogoIcon face="right" />
@@ -152,3 +152,70 @@ export const Header = () => {
     </header>
   );
 };
+
+export const MenuIcon = ({ showMenu }: { showMenu: boolean }) => {
+  return (
+    <div className={styles.menuIcon}>
+      {showMenu ? (
+        <svg
+          viewBox="0 0 309 309"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M154.2 308.4C239.362 308.4 308.4 239.362 308.4 154.2C308.4 69.0377 239.362 0 154.2 0C69.0377 0 0 69.0377 0 154.2C0 239.362 69.0377 308.4 154.2 308.4Z"
+            fill="var(--color-menu-text)"
+          />
+          <rect
+            x="101.964"
+            y="80.8135"
+            width="177.657"
+            height="29.9116"
+            transform="rotate(45 101.964 80.8135)"
+            fill="var(--color-menu-background)"
+          />
+          <rect
+            x="227.586"
+            y="101.964"
+            width="177.657"
+            height="29.9116"
+            transform="rotate(135 227.586 101.964)"
+            fill="var(--color-menu-background)"
+          />
+        </svg>
+      ) : (
+        <svg
+          viewBox="0 0 309 309"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M154.2 308.4C239.362 308.4 308.4 239.362 308.4 154.2C308.4 69.0377 239.362 0 154.2 0C69.0377 0 0 69.0377 0 154.2C0 239.362 69.0377 308.4 154.2 308.4Z"
+            fill="var(--color-text)"
+          />
+          <rect
+            x="65.3716"
+            y="139.244"
+            width="177.657"
+            height="29.9116"
+            fill="var(--color-background)"
+          />
+          <rect
+            x="65.3716"
+            y="199.244"
+            width="177.657"
+            height="29.9116"
+            fill="var(--color-background)"
+          />
+          <rect
+            x="65.3716"
+            y="79.2444"
+            width="177.657"
+            height="29.9116"
+            fill="var(--color-background)"
+          />
+        </svg>
+      )}
+    </div>
+  );
+};

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

@@ -2,8 +2,10 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+  min-height: 60vh;
   padding: var(--spacing-sitepadding);
-  background: var(--color-background-secondary);
+  background: var(--color-chateauBlue);
+  color: var(--color-betongGray);
   position: relative;
   z-index: 700;
 

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

@@ -22,10 +22,11 @@
 .siteMenu {
   display: flex;
   gap: var(--spacing-sitepadding);
-  align-items: flex-start;
+  align-items: center;
+  height: 3rem;
 
   a {
-    font-weight: 500;
+    font-weight: 600;
   }
 }
 
@@ -33,6 +34,14 @@
   list-style: none;
   display: flex;
   gap: var(--spacing-sitepadding);
+  animation: slideInFromRight .3s ease-out forwards;
+
+  a {
+    font-weight: 600;
+    /*font-size: var(--font-size-caption);
+    text-transform: uppercase;
+    letter-spacing: .05em;*/
+  }
 }
 
 .toggleMenu {
@@ -40,36 +49,20 @@
   z-index: 1001;
   background: none;
   margin-top: .2rem;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  margin: 0;
 }
 
 .menuIcon {
-  --stroke-width: 0.12rem;
-  --icon-width: 1.75rem;
   display: block;
-  position: absolute;
+  width: 3rem;
-  left: 50%;
+  height: 3rem;
-  transform: translateX(-50%);
-  width: var(--icon-width);
-  height: var(--stroke-width);
-  background: currentColor;
 
-  &:before,
+  svg {
-  &:after {
+    width: 100%;
-    content: "";
+    height: 100%;
-    display: block;
-    position: absolute;
-    left: 0;
-    width: var(--icon-width);
-    height: var(--stroke-width);
-    background: currentColor;
-  }
-
-  &:before {
-    top: -.5rem;
-  }
-
-  &:after {
-    bottom: -.5rem;
   }
 }
 
@@ -81,8 +74,8 @@
   z-index: 1000;
   width: 50%;
 
-  background: var(--color-chateauBlue);
+  background: var(--color-menu-background);
-  color: var(--color-betongGray);
+  color: var(--color-menu-text);
   padding: var(--spacing-sitepadding);
 
   transition: all var(--transition-easing);
@@ -111,7 +104,7 @@
 
 .siteMenu[data-show=true] {
   .mainMenu {
-    display: none;
+    animation: slideOutRight .3s ease-out forwards;
   }
 
   .fullMenu {
@@ -139,3 +132,27 @@
     width: 100%;
   }
 }
+
+@keyframes slideOutRight {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}

web/src/css/animations.scss

@@ -0,0 +1,38 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeUp {
+  0% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  50% {
+    opacity: .5;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}

web/src/css/base.scss

@@ -7,6 +7,7 @@
 html {
   min-height: 100%;
   font-size: calc(1rem + 8 * (100vw - 320px) / 1920);
+  background-color: var(--color-chateauBlue);
 }
 
 html,
@@ -45,33 +46,6 @@ body {
   }
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeUp {
-  0% {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-
-  50% {
-    opacity: .5;
-    transform: translateY(0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 a {
   color: inherit;
   text-underline-offset: .16em;

web/src/css/main.scss

@@ -1,3 +1,4 @@
 @import 'fonts.scss';
 @import 'variables.scss';
+@import 'animations.scss';
 @import 'base.scss';

web/src/css/variables.scss

@@ -32,6 +32,8 @@
   --color-cta-background: var(--color-goldenOrange);
   --color-cta-text: var(--color-black);
   --color-placeholder: var(--color-neufPink);
+  --color-menu-text: var(--color-deepBrick);
+  --color-menu-background: var(--color-goldenBeige);
 
   // spacing
   --spacing-sitepadding: 2rem;