version before img-change

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;
+  }
 }