Finish up responsive design (all but references)

index.html

@@ -14,13 +14,18 @@
     <header>
       <nav>
         <h1>Alex Mayer</h1>
-        <ul>
+        <ul id="menu">
           <li><a class="active" href="/">Start</a></li>
           <li><a href="/">Leistungen</a></li>
           <li><a href="/">Blog</a></li>
           <li><a href="/">Über Mich</a></li>
           <li><a href="/">Kontakt</a></li>
         </ul>
+        <button id="menu-trigger">
+          <span class="menu-bar"></span>
+          <span class="menu-bar"></span>
+          <span class="menu-bar"></span>
+        </button>
       </nav>
       <section id="hero">
         <article>
@@ -123,7 +128,7 @@
       </nav>
       <article>
         <p>
-          Demo-Wordpress-Seite im Rahmen der LV ‚Content Mangagement Systeme‘ an
+          Demo-Wordpress-Seite im Rahmen der LV "Content Mangagement Systeme" an
           der FH Salzburg von Dennis Schöpf und Maximilian Schmitt
         </p>
         <p>Alle Inhalte frei erfunden</p>
@@ -158,5 +163,6 @@
         <p>Freepik (http://www.freepik.com) / www.flaticon.com</p>
       </article>
     </footer>
+    <script src="./scripts/main.js"></script>
   </body>
 </html>

scripts/main.js

+/* Current state */
+let menuOpen = true;
+
+/* Store interactive elements */
+const menu = document.querySelector('#menu');
+const menuTrigger = document.querySelector('#menu-trigger');
+
+/* Register event listeners */
+menuTrigger.addEventListener('click', handleMenuButtonClick);
+
+/* Functions */
+function handleMenuButtonClick() {
+  if (menuOpen === false) {
+    menuOpen = true;
+    openMenu();
+  } else {
+    menuOpen = false;
+    closeMenu();
+  }
+}
+
+function openMenu() {
+  menu.classList.add('open');
+  menuTrigger.classList.add('open');
+}
+
+function closeMenu() {
+  menu.classList.remove('open');
+  menuTrigger.classList.remove('open');
+}

styles/globals.scss

+.maxwidthcontainer {
+  max-width: 128rem;
+  margin: 0 auto;
+  padding: 1.5rem;
+}
+
+@mixin breakpoint($min, $max: 0) {
+  @if $max == 0 {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  }
+}
+
+@mixin hidden {
+  display: none;
+  visibility: hidden;
+}
+
 html {
   font-family: $font-reg;
   font-size: 10px;
@@ -18,6 +41,10 @@ h5 {
 
 h1 {
   font-size: $font-size-xxl;
+
+  @include breakpoint(0, 560px) {
+    font-size: $font-size-xl;
+  }
 }
 
 h2 {
@@ -57,6 +84,10 @@ cite {
   font-size: 2.2rem;
 }
 
+img {
+  max-width: 100%;
+}
+
 .bg-accent-bright {
   background-color: $accent-color-bright;
 }
@@ -68,26 +99,3 @@ cite {
 .bg-accent-dark {
   background-color: $accent-color-dark;
 }
-
-.maxwidthcontainer {
-  max-width: 128rem;
-  margin: 0 auto;
-  padding: 1.5rem;
-}
-
-@mixin breakpoint($min, $max: 0) {
-  @if $max == 0 {
-    @media (min-width: $min) {
-      @content;
-    }
-  } @else {
-    @media (min-width: $min) and (max-width: $max) {
-      @content;
-    }
-  }
-}
-
-@mixin hidden {
-  display: none;
-  visibility: hidden;
-}

styles/includes/footer.scss

 footer {
-    background-color: $primary-color;
-    color: $bright-color;
-    padding: 1.5rem 1.5rem 35rem 1.5rem;
-
-    nav {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 1.5rem 0 3.5rem 0;
-
-        ul {
-            display: flex;
-            justify-content: flex-end;
-
-            li {
-                a {
-                    text-decoration: none;
-                    color: $bright-color;
-                }
-
-                &:first-child::after {
-                    content: '|';
-                    margin: 0 0.6rem;
-                }
-            }
-        }
+  background-color: $primary-color;
+  color: $bright-color;
+  padding: 1.5rem 1.5rem 35rem 1.5rem;
+  word-break: break-all;
+
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 1.5rem 0 0 0;
+    margin-bottom: 3.5rem;
+
+    @include breakpoint(0, 610px) {
+      small {
+        display: block;
+        width: 100%;
+        text-align: center;
+        margin-bottom: 1.5rem;
+      }
+
+      ul {
+        width: 100%;
+        text-align: center;
+        justify-content: center;
+      }
+    }
+
+    @include breakpoint(611px) {
+      ul {
+        justify-content: flex-end;
+      }
     }
 
-    article {
-        p {
-            width: 50%;
-            margin-bottom: 2.5rem;
+    ul {
+      display: flex;
+
+      li {
+        a {
+          text-decoration: none;
+          color: $bright-color;
         }
 
-        ul {
-            list-style-type: disc;
-            padding: 0 2rem;
-            line-height: $line-height-m;
-            margin-bottom: 2rem;
+        &:first-child::after {
+          content: '|';
+          margin: 0 0.6rem;
         }
+      }
+    }
+  }
+
+  article {
+    p {
+      width: 50%;
+      margin-bottom: 2.5rem;
+      word-break: normal;
+
+      @include breakpoint(0, 610px) {
+        width: 100%;
+      }
+    }
+
+    ul {
+      list-style-type: disc;
+      padding: 0 2rem;
+      line-height: $line-height-m;
+      margin-bottom: 2rem;
     }
+  }
 }

styles/includes/header.scss

@@ -3,6 +3,11 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
+    height: 8rem;
+
+    @include breakpoint(0, 800px) {
+      align-items: center;
+    }
 
     h1 {
       padding: 1rem;
@@ -12,15 +17,43 @@ header {
       display: flex;
       margin: 0 1rem 2rem 0;
 
+      @include breakpoint(0, 800px) {
+        display: none;
+        margin: 0;
+
+        &.open {
+          display: block;
+          position: absolute;
+          top: 8rem;
+          left: 0;
+          right: 0;
+        }
+      }
+
       li {
         &:not(:last-child) {
           margin-right: 2rem;
+
+          @include breakpoint(0, 800px) {
+            margin: 0;
+          }
         }
 
         a {
           text-decoration: none;
           color: $dark-color;
 
+          @include breakpoint(0, 800px) {
+            display: block;
+            margin: 0;
+            width: 100%;
+            background-color: rgba(255, 255, 255, 0.95);
+            display: flex;
+            justify-content: center;
+            padding: 2rem 0;
+            border-top: 1px solid $accent-color-reg;
+          }
+
           &.active {
             border-bottom: 1px solid $primary-color;
             color: $primary-color;
@@ -28,6 +61,14 @@ header {
         }
       }
     }
+
+    button {
+      display: none;
+
+      @include breakpoint(0, 800px) {
+        display: block;
+      }
+    }
   }
 
   section#hero {
@@ -45,7 +86,7 @@ header {
 
       @include breakpoint(0, 915px) {
         width: 100%;
-        padding-left: 2.5rem;
+        padding: 0 1.5rem;
       }
 
       h2 {
@@ -53,6 +94,11 @@ header {
         line-height: $line-height-xxl;
         margin: 0 0 1.5rem 1rem;
 
+        @include breakpoint(0, 500px) {
+          font-size: 4.2rem;
+          line-height: 6.6rem;
+        }
+
         span {
           padding: 0.2rem 0;
           background-color: $bright-color;
@@ -70,6 +116,10 @@ header {
         border: 0;
         outline: 0;
         border-radius: $border-radius;
+
+        @include breakpoint(0, 560px) {
+          font-size: $font-size-l;
+        }
       }
     }
   }

styles/includes/menu.scss

+#menu-trigger {
+  height: 2.8rem;
+  width: 3.6rem;
+  border: 0;
+  outline: 0;
+  padding: 0;
+  background-color: transparent;
+  position: relative;
+  margin-right: 1.5rem;
+
+  .menu-bar {
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 0.3rem;
+    background-color: $primary-color;
+
+    &:nth-child(1) {
+      top: 0;
+    }
+
+    &:nth-child(2) {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &:nth-child(3) {
+      bottom: 0;
+    }
+  }
+
+  &.open {
+    .menu-bar:nth-child(1) {
+      transform: rotate(45deg);
+      transform-origin: 0;
+    }
+
+    .menu-bar:nth-child(2) {
+      display: none;
+    }
+
+    .menu-bar:nth-child(3) {
+      transform: rotate(-45deg);
+      transform-origin: 0;
+    }
+  }
+}

styles/includes/news.scss

 section#news {
-    ul {
-        background-color: $accent-color-important;
-        border-radius: $border-radius;
-        padding: 1.5rem 1rem;
+  ul {
+    background-color: $accent-color-important;
+    border-radius: $border-radius;
+    padding: 1.5rem 1rem;
 
-        li {
-            font-size: $font-size-l;
+    li {
+      font-size: $font-size-l;
+      line-height: 3.2rem;
 
-            &:not(:last-child) {
-                margin-bottom: 1.5rem;
-            }
+      &:not(:last-child) {
+        margin-bottom: 1.5rem;
+      }
 
-            a {
-                text-decoration: none;
-                color: $primary-color;
-            }
-        }
+      a {
+        text-decoration: none;
+        color: $primary-color;
+      }
     }
+  }
 }

styles/main.scss

 @import './reset';
 @import './variables';
 @import './globals';
+@import './includes/menu';
 @import './includes/header';
 @import './includes/services';
 @import './includes/news';