website: Improve mobile styling

Author: probablykasper

src/routes/+layout.svelte

@@ -148,7 +148,9 @@
   .page
     max-width: 800px
     margin: auto
-    padding: 0px 30px
+    padding: 0px 15px
+    @media (min-width: 400px)
+      padding: 0px 30px
     padding-bottom: 100px
   .header-title
     color: var(--primary)

src/routes/prop.svelte

@@ -39,10 +39,12 @@
 
 <style lang="sass">
   .prop
-    display: flex
+    display: block
+    @media (min-width: 450px)
+      display: flex
     padding: 5px 0px
+    align-items: center
   .label
-    display: inline-block
     width: 195px
     flex-shrink: 0
   input[type='text'], textarea

src/routes/split.svelte

@@ -19,7 +19,14 @@
     transition: background 80ms cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1)
     box-shadow: 0px 1px 3px 0px rgba(#000000, 0.05)
     border-radius: 5px
-    padding: 0px 20px
+    padding: 10px
+    flex-direction: column
+    box-shadow: 0px 1px 3px 0px rgba(#000000, 0.05)
+    @media (min-width: 401px)
+      padding: 20px
+    @media (min-width: 701px)
+      flex-direction: row
+    @media(max-width: 700px)
   @media(min-width: 701px)
     section.left
       padding-right: 0px
@@ -28,9 +35,4 @@
       padding-right: 10px
     .spacer
       margin-top: 20px
-  @media(max-width: 700px)
-    .row
-      flex-direction: column
-      padding: 20px
-      box-shadow: 0px 1px 3px 0px rgba(#000000, 0.05)
 </style>