further updates for mobile experience

server/static/css/main.css

@@ -69,7 +69,7 @@ body
 }
 
 .grayblock .padded {
-    padding: 3rem; 
+    padding: 0rem; 
 }
 
 .horizontal {
@@ -91,11 +91,13 @@ body
 }
 
 .vertical .content .image {
+    max-width: 90%;
     width: 25rem;
 }
 
 .vertical .content .text {
-    margin-left: 2rem;
+    max-width: 90%;
+    margin: auto;
     width: 26rem;
 }
 
@@ -106,8 +108,6 @@ body
 
 .horizontal .image {
     margin: 1rem;
-    margin-left: 4rem;
-    margin-right: 4rem;
     height: 20rem;
     border-radius: 1rem;
     width: auto;
@@ -211,6 +211,7 @@ body
     display: block;
     text-align: left;
   }
+  
 }
 
 /* Style page content */
@@ -294,21 +295,22 @@ body
     justify-content: center;
     align-items:center;
     /* flex-direction: row; */
-    padding: 0px 2rem 0px 2rem;
+    /*padding: 0px 2rem 0px 2rem;*/
 }
 
 .container .button {
    padding: 1rem 1.5rem 1rem 1.5rem;
    font-size: 2rem;
-   margin: 4rem;
+   margin: 4rem 1rem 1rem 1rem;
    color: black;
    text-decoration: none;
 }
 
 .container .preview {
     width: 20rem;
-    height: 20rem;
+    height: auto;
     margin: 1rem 3rem 4rem 3rem;
+    max-width: 100%;
 }
 
 .container .button.logout {
@@ -329,8 +331,9 @@ body
 }
 
 .sub.container {
-    width: 20rem;
+    width: 40%;
     justify-content: left;
+    display: flex;
 }
 
 .profile {
@@ -350,6 +353,7 @@ body
 .profile .name {
     font-size: 3rem;
     color: #333;
+    text-align: center;
 }
 
 .grey {
@@ -367,3 +371,10 @@ body
     border-radius: 5px; 
     margin-right: 1rem;
 }
+
+
+@media (max-width:800px) { 
+  .sub.container {
+    justify-content: center;
+  }
+}

server/template/footer.html

@@ -1,7 +1,7 @@
 
 <div id="footer">
 
-    <div class="footer">
+    <div class="footer container">
         <p>made by Raphael Maenle </p>  
         <p><a href="mailto:raphael@maenle.net">raphael@maenle.net</a></p>
       <p><a href="/privacy">privacy policy</a></p>