Mobile Improvements

Author: lolleko

assets/styles/landing.scss

@@ -7,51 +7,50 @@ main, header {
     margin-right: auto;
 }
 
-header {
-    #title {
-        margin-top: 30px;
-        font-size: 72px;
-        width: 100%;
-        text-align: center;
-        font-weight: 300;
-    }
+#title {
+    margin-top: 30px;
+    font-size: 72px;
+    width: 100%;
+    text-align: center;
+    font-weight: 300;
+}
+
+.title-bold {
+    font-weight: 400;
+}
 
-    .title-bold {
-        font-weight: 400;
+#headline {
+    font-size: 24px;
+    text-align: center;
+}
+
+nav {
+    margin-top: 20px;
+    text-align: center;
+    color: #5690fc;
+    width: auto;
+    font-size: 28px;
+    font-weight: 400;
+
+    a:hover {
+        color: $grey-accent;
     }
 
-    #headline {
-        font-size: 24px;
-        text-align: center;
+    .nav-item {
+        display: inline-block;
+        margin-right: 20px;
     }
 
-    nav {
-        margin-top: 20px;
-        text-align: center;
-        color: #5690fc;
-        width: auto;
-        font-size: 28px;
-        font-weight: 400;
-
-        a:hover {
-            color: $grey-accent;
-        }
-
-        .nav-item {
-            display: inline-block;
-            margin-right: 20px;
-        }
-
-        a:last-child .nav-item {
-            margin-right: 0px;
-        }
+    a:last-child .nav-item {
+        margin-right: 0px;
     }
 }
 
 #features {
     margin-top: 30px;
     margin-bottom: 20px;
     display: flex;
+    flex-wrap: wrap;    
 }
 
 .feature-item {
@@ -81,18 +80,53 @@ header {
 #example {
     margin-top: 70px;
     width: 100%;
+}
 
-    #ts-declarations, #ts-source {
-        display: inline-block;
-        overflow: hidden;
+#ts-declarations, #ts-source {
+    display: inline-block;
+    overflow: hidden;
+}
+
+#ts-declarations {
+    flex: 40%;
+}
+
+#ts-source {
+    flex: 60%;
+    border-left: solid 2px #5690fc;
+}
+
+@media screen and (max-width: 900px) {
+    main, header {
+        width: 100%;
+    }
+
+    nav {
+        font-size: 24px;
+    }
+
+    #title {
+        font-size: 42px;
+        margin-top: 15px;
+    }
+
+    .example-item {
+        font-size: 9px;
+    }
+
+    #example {
+        margin-top: 25px;
+    }
+
+    #features {
+        margin-top: 10px;
     }
 
-    #ts-declarations {
-        flex: 40%;
+    .feature-header {
+        font-size: 16px;
     }
 
-    #ts-source {
-        flex: 60%;
-        border-left: solid 2px #5690fc;
+    .feature-item {
+        flex: 100%;
     }
 }

assets/styles/play.scss

@@ -51,12 +51,14 @@ $output-height: 120px;
         border-bottom: 1px $grey-accent solid;
     }
 
-    #editor-ts {
+    #editor-ts, #editor-lua {
         flex: 50%;
     }
 
-    #editor-lua {
-        flex: 50%;
+    @media screen and (max-width: 600px) {
+        #editor-ts, #editor-lua {
+            flex: 100%;
+        }
     }
 
     #editor-output {