From b7486db8ef2b430bc544356cc56a2a333d25e642 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Mon, 3 Aug 2020 17:26:11 +0200
Subject: [PATCH] Optimized for smaller viewports

---
 components/03_Organisms/form/_form.scss | 17 +++-----
 components/04_Templates/home/_home.scss |  9 +++-
 public/components.css                   | 57 +++++++++++++------------
 3 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/components/03_Organisms/form/_form.scss b/components/03_Organisms/form/_form.scss
index d587ee9..1620331 100644
--- a/components/03_Organisms/form/_form.scss
+++ b/components/03_Organisms/form/_form.scss
@@ -1,11 +1,12 @@
 .LP-Form{
-    max-width: 900px;
     .LP-Form__Fieldset{
         border: none;
 
         .LP-Form__Legend{
             margin: 0;
-            padding: 0;
+			padding: 0;
+			font-family: $-primary-sans-serif-font;
+			font-size: 21px;
         }
 
         .LP-Form__Composition{
@@ -18,23 +19,19 @@
                 padding: 6px 15px;
 
                 &--wider{
-                    flex: 5 1 200px;
+                    flex: 5 1;
                 }
 
                 &--wide{
-                    flex: 4 1 150px;
+                    flex: 4 1;
                 }
 
                 &--narrow{
-                    flex: 2 0 50px;
+                    flex: 2 0;
                 }
 
                 &--narrower{
-                    flex: 1 0 25px;
-                }
-
-                input{
-                    width: 100%;
+                    flex: 1 0;
                 }
             }
         }
diff --git a/components/04_Templates/home/_home.scss b/components/04_Templates/home/_home.scss
index 4fca2af..842e174 100644
--- a/components/04_Templates/home/_home.scss
+++ b/components/04_Templates/home/_home.scss
@@ -1,8 +1,15 @@
 .LP-MainContainer {
     margin: 0 auto;
-    max-width: 1280px;
+	max-width: 1280px;
 }
 
 .LP-HorizontalLine{
     color: $-grey;
+}
+
+@media(max-width: $-viewport-small){
+	.LP-MainContainer {
+		width: 100%;
+	}
+	
 }
\ No newline at end of file
diff --git a/public/components.css b/public/components.css
index c70bfc2..7bcb71c 100644
--- a/public/components.css
+++ b/public/components.css
@@ -86,11 +86,12 @@
     border-bottom: 1px solid #565656;
     padding: 8px;
     margin-bottom: 30px; }
-    .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active {
+    .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
       margin-bottom: 29px;
       border-bottom: 2px solid #76323F;
       background-color: #f9f9f9;
-      border-radius: 3px 3px 0 0; }
+      border-radius: 3px 3px 0 0;
+      box-shadow: none; }
   .LP-Input .LP-Input__Label {
     font-family: Montserrat, Helvetica, sans-serif;
     font-size: 16px; }
@@ -101,8 +102,6 @@
     padding: 3px;
     position: relative;
     top: -30px; }
-    .LP-Input .LP-Input__Message:before {
-      content: '* '; }
   .LP-Input--error .LP-Input__Field {
     margin-bottom: 25px;
     border-bottom: 2px solid #76323F;
@@ -376,30 +375,28 @@
         .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
           background-color: inherit; }
 
-.LP-Form {
-  max-width: 900px; }
-  .LP-Form .LP-Form__Fieldset {
-    border: none; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
-      margin: 0;
-      padding: 0; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
-        flex: 3 1 100px;
-        padding: 6px 15px; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
-          flex: 5 1 200px; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
-          flex: 4 1 150px; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
-          flex: 2 0 50px; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
-          flex: 1 0 25px; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field input {
-          width: 100%; }
+.LP-Form .LP-Form__Fieldset {
+  border: none; }
+  .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
+    margin: 0;
+    padding: 0;
+    font-family: Montserrat, Helvetica, sans-serif;
+    font-size: 21px; }
+  .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between; }
+    .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
+      flex: 3 1 100px;
+      padding: 6px 15px; }
+      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
+        flex: 5 1; }
+      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
+        flex: 4 1; }
+      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
+        flex: 2 0; }
+      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
+        flex: 1 0; }
 
 @media (max-width: 650px) {
   .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable {
@@ -423,6 +420,10 @@
 .LP-HorizontalLine {
   color: #565656; }
 
+@media (max-width: 650px) {
+  .LP-MainContainer {
+    width: 100%; } }
+
 .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
   width: 700px;
   box-shadow: 0 0 10px #565656;