Finalizing commit. Improved css layout for mobile. Fixed non-stardart…

…, small width layouts

client/index.html

@@ -13,7 +13,7 @@
     <pre class="Shadowmaker" tabindex="-1"></pre>
     <form class="Modal" method="post" action="http://localhost:9000/login" accept-charset="utf-8" tabindex="-1">
         <div tabindex="-1" class="Modal-inputs">
-            <h2 tabindex="-1">Who are you?</h2>
+            <h1 tabindex="-1">Who are you?</h1>
             <p tabindex="-1" class="Modal-input">
                 <label for="name">Full name:</label>
                 <input type="text" id="name" placeholder="Type your name" autocomplete="name" autofocus aria-label="Type your name here" tabindex="0" />

client/styles/main.css

@@ -57,12 +57,14 @@
     padding: 0; } }
 
 @media (min-width: 161px) {
-  .Modal {
-    padding: 2rem; }
   .Modal--anonymous {
-    padding: 0.4rem 0.7rem 0.4rem 0.7rem; }
+    padding: 0.3rem 0.7rem 0.3rem 0.7rem; }
   .Modal--login {
-    padding: 0.4rem 2.3rem 0.4rem 2.3rem; } }
+    padding: 0.3rem 2.3rem 0.3rem 2.3rem; } }
+
+@media (min-width: 161px) and (max-width: 320px) {
+  .Modal {
+    padding: 2rem; } }
 
 @media (min-width: 0px) and (max-width: 320px) {
   html {
@@ -128,7 +130,9 @@
   .Modal p label,
   input {
     display: table-row;
-    width: 50%; } }
+    width: 50%; }
+  .Modal {
+    padding: 4rem; } }
 
 @media (min-width: 639px) {
   html {
@@ -137,7 +141,8 @@
     width: 15%; }
   .Modal {
     width: 30%;
-    display: table; }
+    display: table;
+    padding: 3rem; }
   .Modal-input {
     display: inline-flex; }
   .Modal div button {
@@ -196,8 +201,7 @@
   -webkit-border: 2px solid #DBDBDB; }
 
 html > *,
-h1,
-h2 {
+h1 {
   font-family: 'Nunito', sans-serif;
   font-weight: 400; }
 
@@ -209,18 +213,12 @@ html {
   height: 100%;
   display: flex; }
 
-h1,
-h2 {
+h1 {
+  font-size: 1.875rem;
   margin-top: 0;
   word-break: break-all;
   word-wrap: break-word; }
 
-h1 {
-  font-size: 1.875rem; }
-
-h2 {
-  font-size: 1.75rem; }
-
 .MainHeader {
   background-color: #353744;
   display: flex;

client/styles/main.scss

@@ -4,8 +4,7 @@
 @import 'utils.scss';
 @import 'functions.scss';
 html > *,
-h1,
-h2 {
+h1 {
     font-family: 'Nunito', sans-serif;
     font-weight: 400;
 }
@@ -19,21 +18,13 @@ html {
     display: flex;
 }
 
-h1,
-h2 {
+h1 {
+    font-size: 1.875rem;
     margin-top: 0;
     word-break: break-all;
     word-wrap: break-word;
 }
 
-h1 {
-    font-size: 1.875rem;
-}
-
-h2 {
-    font-size: 1.75rem;
-}
-
 .MainHeader {
     background-color: $c-header;
     display: flex;

client/styles/screen.scss

@@ -52,14 +52,18 @@
 
 @media (min-width:161px) {
 
-    .Modal {
-        padding: 2rem;
-    }
     .Modal--anonymous {
-        padding: 0.4rem 0.7rem 0.4rem 0.7rem;
+        padding: 0.3rem 0.7rem 0.3rem 0.7rem;
     }
     .Modal--login {
-        padding: 0.4rem 2.3rem 0.4rem 2.3rem;
+        padding: 0.3rem 2.3rem 0.3rem 2.3rem;
+    }
+}
+
+@media (min-width:161px) and (max-width:320px) {
+
+    .Modal {
+        padding: 2rem;
     }
 }
 
@@ -88,6 +92,7 @@
     .Modal div p input {
         overflow-y: auto;
     }
+
     .Modal div p input {
         padding: 0 0 0 0.4rem;
     }
@@ -151,6 +156,9 @@
         display: table-row;
         width: 50%;
     }
+    .Modal {
+        padding: 4rem;
+    }
 }
 
 @media (min-width:639px) {
@@ -163,6 +171,7 @@
     .Modal {
         width: 30%;
         display: table;
+        padding: 3rem;
     }
     .Modal-input {
         display: inline-flex;