version before img-change

src/client/sass/_navbar.scss

@@ -16,13 +16,20 @@
       flex: 1;
       text-align: center;
       height: 5rem;
-      padding-top: 0.5rem;
+      padding-top: 0.9rem;
       padding-bottom: 0.5rem;
 
+      @include breakpoint(large){
+        padding-top: 0.5rem;
+      }
+
       a {
         color: black;
         font-family: "Bahnschrift", Helvetica, Arial, serif;
-        font-size: 2rem;
+        font-size: 1.4rem;
+        @include breakpoint(large){
+          font-size: 2rem;
+        }
       }
 
       &.active {
@@ -35,7 +42,52 @@
     }
 
     .logo-img {
-      height: 4rem;
+      height: 3rem;
+      @include breakpoint(large){
+        height: 4rem;
+      }
+    }
+
+    &.responsive-menu{
+      position: absolute;
+      right:0;
+      z-index: 1;
+      box-shadow: 0 0 5px $background-color;
+      .menu-closer{
+        z-index: -1;
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        background: transparent;
+      }
+
+      li {
+        width: 100%;
+      }
     }
   }
+}
+
+$menuIconHeight : 2rem;
+.title-bar{
+  background: $background-color;
+  text-align: right;
+  //justify-content: flex-end;
+  display: block;
+  .menu-icon{
+    width: $menuIconHeight;
+    height: $menuIconHeight;
+    outline: none;
+    &::after{
+      background: #fefefe;
+      height: #{($menuIconHeight/9)};
+      box-shadow: 0 #{($menuIconHeight/3)} 0 #fefefe, 0 #{($menuIconHeight*2/3)} 0 #fefefe;
+    }
+  }
+  .logo-img{
+    float: left;
+    height: $menuIconHeight;
+  }
 }

src/client/sass/_settings.scss

@@ -111,14 +111,13 @@ $print-hrefs: true;
 
 $breakpoints: (
         small: 0,
-        smedium: 400px,
-        medium: 640px,
+        medium: 800px,
         large: 1024px,
         xlarge: 1200px,
         xxlarge: 1440px,
 );
 $print-breakpoint: large;
-$breakpoint-classes: (small smedium medium large);
+$breakpoint-classes: (small medium large);
 
 // 3. The Grid
 // -----------

src/client/sass/index.scss

@@ -1,6 +1,6 @@
 @import "../../../node_modules/foundation-sites/scss/foundation";
+@import "settings";
 
-//@import "settings";
 
 //Importiere zuerst foundation vor anderen Imports, damit foundation-settings überschrieben werden
 @include foundation-everything;
@@ -15,11 +15,11 @@
   src: url("../img/WinterSunrise.ttf");
 }
 
-
 .width-100 {
   width: 100%;
 }
-.height-100{
+
+.height-100 {
   height: 100%;
 }
 
@@ -29,7 +29,7 @@ html {
   letter-spacing: 1.1px;
 }
 
-.grow{
+.grow {
   flex: 1;
 }
 
@@ -38,24 +38,23 @@ body {
   width: 100%;
   height: 100%;
 
-  nav.top-bar {
-
-  }
-
   #main-content-container {
     height: calc(100% - 5rem);
+    @include breakpoint(small only) {
+      height: calc(100% - 3rem);
+    }
     position: relative;
     overflow: auto;
 
     #scroll-container {
-      height: 100%;
+      min-height: 100%;
       background: $background-color;
 
       > div {
-        height: 100%;
+        min-height: 100%;
 
         > .grid-x {
-          height: 100%;
+          min-height: 100%;
         }
       }
 
@@ -67,7 +66,7 @@ body {
   }
 }
 
-.overflow-auto{
+.overflow-auto {
   overflow: auto;
 }
 
@@ -76,14 +75,17 @@ h1, p, .padding-default {
   padding-right: 1rem;
 }
 
-a.hidden-link, a.hidden-link:hover{
+a.hidden-link, a.hidden-link:hover {
   text-decoration: none;
   color: inherit;
 }
 
 h1 {
   font-family: WinterSunrise, serif;
-  font-size: 4.5rem;
+  font-size: 3rem;
+  @include breakpoint(medium) {
+    font-size: 4.5rem;
+  }
 }
 
 #home-img-container {
@@ -97,18 +99,27 @@ h1 {
     img {
       width: 100%;
       height: calc(100% - 5rem);
+      @include breakpoint(small only) {
+        height: calc(100% - 3rem);
+      }
       object-fit: cover;
     }
 
     #start-text-img-overlay {
       position: absolute;
-      left: 2rem;
       bottom: 3rem;
-      //top: 50%;
+      left: 0.625rem;
       color: white;
-      //font-family: "WinterSunrise", Arial, serif;
-      font-size: 8rem;
+      font-size: 2.77rem;
       line-height: 1.2;
+
+      @include breakpoint(medium) {
+        font-size: 6rem;
+        left: 2rem;
+      }
+      @include breakpoint(large) {
+        font-size: 8rem;
+      }
     }
   }
 
@@ -126,6 +137,10 @@ img.full-screen-width {
 .hidden {
   display: none;
 }
-.site-content{
-  padding: 3rem 2rem;
+
+.site-content {
+  padding: 2rem 0.625rem;
+  @include breakpoint(medium) {
+    padding: 3rem 2rem;
+  }
 }