Header component design changes.

src/components/header/Header.module.scss

@@ -1,16 +1,62 @@
+@import "@styles/variables";
+
 .header {
+  transition: $transition_base;
   width: 100%;
+  height: $header_height;
+  position: fixed;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  right: 0;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  box-shadow: 0 0 transparent;
 
-  &--home {
-    background: yellowgreen;
+  &--sticky {
+    height: $header_height_sticky;
+    background: $color_light;
+    box-shadow: $box_shadow_base;
   }
 
-  &--about {
-    background: greenyellow;
+  &__container {
+    width: 100%;
+    max-width: $breakpoint_pc;
+    margin: 0 auto;
+    padding: 0 1.25rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
   }
 
   &__logo {
-    width: 11.25rem;
-    height: 3.75rem;
+    width: 9.375rem;
+    height: 3.125rem;
+
+    @include media_up($breakpoint_tablet) {
+      width: 11.25rem;
+      height: 3.75rem;
+    }
+
+    &__link {
+      width: 100%;
+      height: auto;
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        width: 100%;
+        height: auto;
+      }
+    }
   }
 }

src/components/header/Header.tsx

@@ -1,3 +1,6 @@
+import { useLayoutEffect, useState } from 'react';
+import Link from 'next/link';
+
 import Logo from '@components/logo/Logo';
 
 import styles from '@components/header/Header.module.scss';
@@ -7,10 +10,34 @@ interface IHeader {
 }
 
 function Header({ classNamePrefix }: IHeader): JSX.Element {
+  // Sticky: begin
+  const [scrollTop, setScrollTop] = useState<number>(0);
+
+  const documentScrollListener = (): void => {
+    setScrollTop(Math.round(window.document.scrollingElement?.scrollTop || 0));
+  };
+
+  useLayoutEffect(() => {
+    window.document.addEventListener('scroll', documentScrollListener);
+    return () => {
+      window.document.removeEventListener('scroll', documentScrollListener);
+    };
+  }, []);
+  // Sticky: end
+
   return (
-    <header className={`${styles.header} ${styles[`header--${classNamePrefix}`] || ''}`}>
-      <div className={styles.header__logo}>
-        <Logo />
+    <header className={`${styles.header} ${styles[`header--${classNamePrefix}`] || ''} ${scrollTop > 1 ? (styles[`header--sticky`] || '') : ''}`}>
+      <div className={styles.header__container}>
+        <div className={styles.header__logo}>
+          <Link href={'/'} passHref>
+            <a className={styles.header__logo__link}>
+              <Logo />
+            </a>
+          </Link>
+        </div>
+        <div className={styles.header__menu}>
+          <p>TODO: nav menu</p>
+        </div>
       </div>
     </header>
   );

src/components/layout/Layout.module.scss

@@ -7,4 +7,5 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
+  padding: $header_height 0 0;
 }

src/styles/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin media_up($width_as_rem) {
+  @media only screen and (min-width: #{$width_as_rem}) {
+    @content;
+  }
+}

src/styles/_variables.scss

@@ -1,17 +1,29 @@
 // breakpoints
 $breakpoint_min: 20rem;
-$breakpoint_mobile: 33.75rem;
+$breakpoint_mobile: 34rem;
 $breakpoint_tablet: 48rem;
 $breakpoint_minibook: 64rem;
 $breakpoint_laptop: 75rem;
-$breakpoint_pc: 83.125rem;
+$breakpoint_pc: 84rem;
 $breakpoint_max: 120rem;
 
 // colors
 $color_white: #fff;
 $color_black: #000;
 $color_light: #f8f8f8;
 $color_dark: #1e1e1e;
+$color_theme_light: #f4f4f4;
+$color_theme_dark: #2b3b42;
+$color_theme_green: #32c682;
+$color_theme_red: #ff5549;
+$color_theme_yellow: #eebf31;
+$color_theme_blue: #26c0d3;
+$color_code_light: #dcdcdc;
+$color_code_dark: #1e1e1e;
+$color_code_comment: #55a64a;
+$color_code_string: #d69d85;
+$color_code_number: #b5cea4;
+$color_code_boolean: #569cd6;
 
 // transitions
 $transition_delay_base: 0.25s;
@@ -21,9 +33,20 @@ $transition_opacity: opacity 0.25s ease-in-out;
 $transition_visibility: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
 $transition_background: background 0.25s ease-in-out;
 $transition_color: color 0.25s ease-in-out;
+$transition_height: height 0.25s ease-in-out;
+
+// box-shadows
+$box_shadow_base: 0 0.5rem 2rem -1rem rgba($color_black, 0.2);
 
 // typography
 $font_family_base: "Red Hat Display", sans-serif;
 $font_size_base: 0.9rem;
 $font_lineheight_base: 1.3;
 $font_weight_base: 400;
+
+// common variables
+$header_height: 6.25rem;
+$header_height_sticky: 5rem;
+
+// mixins
+@import "mixins";