Responsive optimization

_scss/base/_typography.scss

@@ -11,27 +11,44 @@ h1, h2, h3 {
 }
 
 h1 {
-	font-size: 2.7rem;
+	font-size: 2.5rem;
-	line-height: 3.3rem;
+	line-height: 2.7rem;
 	display: block;
-	@media screen and (max-width: $screen-phone) {
+	margin-bottom: 2rem;
-		& {
+
-			font-size: 2.5rem;
+	@include media-breakpoint-up(sm) { 
-		}
+		font-size: 2.7rem;
+		line-height: 3.3rem;
+		margin-bottom: 0;
 	}
 }
 
 h3 {
     color: #ff5800;
-    font-size: 1.5rem;
+    font-size: 1.3rem;
-    line-height: 2rem;
+		line-height: 1.6rem;
+
+		@include media-breakpoint-up(sm) { 
+			font-size: 1.6rem;
+			line-height: 1.9rem;
+		}
 }
 
 p {
-	margin: 0 1rem 2rem;
+	margin: 0 0 2rem;
 	font-size: 1rem;
 	line-height: 1.5rem;
-    break-inside: avoid;
+	break-inside: avoid;
+	
+	@include media-breakpoint-up(sm) { 
+		font-size: 1.2rem;
+		line-height: 1.6rem;
+	}
+
+	@include media-breakpoint-up(xl) { 
+		font-size: 1rem;
+		line-height: 1.4rem;
+	}
 }
 
 a {

_scss/base/_variables.scss

@@ -13,3 +13,19 @@ $screen-xs: 600px !default;
 $screen-xs-min: $screen-xs !default;
 $screen-phone: $screen-xs-min !default;
 
+$screen-sm: 960px !default;
+$screen-sm-min: $screen-sm !default;
+$screen-tablet: $screen-sm-min !default;
+
+$screen-md: 1280px !default;
+$screen-md-min: $screen-md !default;
+$screen-tablet: $screen-md-min !default;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+

_scss/base/mixins/_breakpoints.scss

@@ -0,0 +1,125 @@
+// https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
+
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767.98px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}

_scss/module/_indexpage.scss

@@ -1,57 +1,3 @@
-section {
-	min-height: 100vh;
-	position: relative;
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: center;
-	box-sizing: border-box;
-	padding: 4rem 0;
-
-    background-color: $background-primary;
-    background-image: linear-gradient(
-        to left bottom, 
-        $background-primary 49%, 
-        $background-alternative 50%
-    );
-    background-size: 100% 30px;
-    background-repeat: no-repeat;
-    background-position: bottom;
-
-	&:nth-of-type(even) {
-		background-color: $background-alternative;
-		background-image: linear-gradient(
-			to left bottom, 
-			$background-alternative 49%, 
-			$background-primary 50%
-		);
-	}
-	&:last-of-type {
-		background-image: none;
-	}
-
-	.content {
-		display: flex;
-		align-items: flex-start;
-	}
-	
-	h1 {
-		width: 22rem;
-		word-break: break-word;
-		hyphens: auto;
-		text-align: right;
-		align-items: baseline;
-		flex-direction:column;
-	}
-
-	.paragraphs {
-		padding-left: 3rem;
-	}
-	p {
-		max-width: 40rem;
-	}
-}
-
 .cta{display:none;}
 @media screen and (min-width: 1200px) and (orientation:landscape){
     #intro{position:relative;}
@@ -60,7 +6,6 @@ section {
     .ctaTxt{display:none;}
 }
 
-
 .signup {
     input {
         display: block;
@@ -72,9 +17,6 @@ section {
         height: 2rem;
         text-align: center;
         font-size: 1rem;
-    }
-    input[type="text"] {
-
     }
     input[type="submit"] {
         cursor: pointer;
@@ -85,10 +27,9 @@ section {
 }
 
 section {
-
     &#intro {
         h1 {
-            margin: 8rem 0 3rem;
+            //margin: 8rem 0 3rem;
         }
     }
 }

_scss/module/_qa.scss

@@ -1,32 +1,60 @@
 .qa {
-  display: flex;
-  align-items: flex-start;
   width: 100%;
-  justify-content: center;
+  padding: 2rem 1.5rem;
-  padding: 2rem 0;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  box-sizing: border-box;
+  &:first-of-type{
+    padding-top: 0;
+  }
 
   .qa--question, 
   .qa--anwser {
-    flex-direction: column;
     box-sizing: border-box;
   }
 
   .qa--question {
-    max-width: 20rem;
+    padding-bottom: 1rem;
-    width: 20rem;
+    &:last-of-type {
-    background-image: url(/assets/img/question.svg);
+      padding-bottom: 0;
-    background-position: bottom right;
+    }
-    background-repeat: no-repeat;
+  }
-    padding-bottom: 35px;
 
-    h3 {
+  .qa--anwser {
-      font-size: 1.3rem;
+    p {
-      text-align: right;
+      max-width: 100%;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+
+    .qa--question {
+      width: 22rem;
+      padding-bottom: 35px;
+      margin-right: 2rem;
+      background-image: url(/assets/img/question.svg);
+      background-position: bottom right;
+      background-repeat: no-repeat;
+  
+      h3 {
+        text-align: right;
+      }
     }
 
+    .qa--anwser {
+      max-width: 40rem;
+      p {
+        margin-bottom: 1em;
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
-  .qa--anwser {
-    padding-left: 25px;
-  }
-
 }

_scss/module/_sections.scss

@@ -0,0 +1,71 @@
+section {
+  position: relative;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  box-sizing: border-box;
+  min-height: 100vh;
+  
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  
+  background-size: 100% 30px;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-color: $background-primary;
+  background-image: linear-gradient(
+      to left bottom, 
+      $background-primary 49%, 
+      $background-alternative 50%
+  );
+	&:nth-of-type(even) {
+		background-color: $background-alternative;
+		background-image: linear-gradient(
+			to left bottom, 
+			$background-alternative 49%, 
+			$background-primary 50%
+		);
+	}
+	&:last-of-type {
+		background-image: none;
+	}
+
+	.content {
+    box-sizing: border-box;
+    padding-left: 2rem;
+    padding-right: 2rem;
+	}
+	
+	h1 {
+		word-break: break-word;
+		hyphens: auto;
+	}
+  
+	p {
+		max-width: 40rem;
+  }
+  
+  @include media-breakpoint-up(sm) {
+    padding: 4rem 0;
+
+    .content {
+      display: flex;
+      align-items: flex-start;
+      padding: 0 2rem;
+    }
+
+    .paragraphs {
+      padding-left: 2rem;
+    }
+
+    h1 {
+      width: 22rem;
+      text-align: right;
+      align-items: baseline;
+      flex-direction:column;
+    }
+  }
+}
+
+

assets/style/main.scss

@@ -3,6 +3,7 @@
 // Import base styles
 @import "base/reset.scss";
 @import "base/variables";
+@import "base/mixins/breakpoints";
 @import "base/base.scss";
 @import "base/typography.scss";
 
@@ -10,5 +11,6 @@
 @import "module/fonts.scss";
 @import "module/camera.scss";
 @import "module/flags.scss";
-@import "module/indexpage.scss";
 @import "module/qa.scss";
+@import "module/sections.scss";
+@import "module/indexpage.scss";