simpilify style on mobile

server/assets/layouts/base.tmpl

@@ -20,7 +20,7 @@
                 {{ template "content" . }}
             </div>
         </div>
-        <div id="footer" class="padded mono">
+        <div id="footer" class="padded mono text-right">
             senan kelly, 2019
             <span class="light">&#124;</span>
             <a href="https://github.com/sentriz/gonic">github</a>

server/assets/pages/home.tmpl

@@ -49,7 +49,7 @@
         <div class="text-right">
         {{ range $user := .AllUsers }}
             <i>{{ $user.Name }}</i>
-            <span class="light">{{ $user.CreatedAt.Format "jan 02, 2006" }}</span>
+            <span class="light no-small">{{ $user.CreatedAt.Format "jan 02, 2006" }}</span>
             <span class="light">&#124;</span>
             <a href="/admin/change_password?user={{ $user.Name }}">change password</a>
             <span class="light">&#124;</span>
@@ -71,12 +71,12 @@
     <div class="box-title">
         <i class="mdi mdi-folder-multiple"></i> recent folders
     </div>
-    <div class="left-cut block-right">
+    <div class="block-right">
         <table id="recent-folders">
         {{ range $folder := .RecentFolders }}
             <tr>
-            <td><span>{{ $folder.RightPath }}</span></td>
+            <td class="text-right">{{ $folder.RightPath }}</td>
-            <td><span class="light">{{ $folder.CreatedAt | humanDate }}</span></td>
+            <td class="no-small"><span class="light">{{ $folder.CreatedAt | humanDate }}</span></td>
             </tr>
         {{ end }}
         </table>

server/assets/partials/box.tmpl

@@ -4,5 +4,5 @@
 <link rel="stylesheet" href="/admin/static/stylesheets/main.css">
 <link rel="shortcut icon" href="/admin/static/images/favicon.ico" type="image/x-icon">
 <link rel="icon" href="/admin/static/images/favicon.ico" type="image/x-icon">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+<meta name="viewport" content="width=device-width, initial-scale=0.8, user-scalable=no">
 {{ end }}

server/assets/stylesheets/main.css

@@ -1,3 +1,28 @@
+body {
+    max-width: 780px;
+    margin: 0 auto;
+    padding: 20px;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    line-height: 1rem;
+}
+
+@media only screen and (max-width: 780px) {
+    .no-small {
+        display: none;
+    }
+}
+
+@media only screen and (min-width: 780px) {
+    table#stats td:first-child::after,
+    table#recent-folders td:first-child::after {
+        content: " ";
+        white-space: pre;
+    }
+}
+
 form input[type],
 form select,
 form textarea {
@@ -13,10 +38,16 @@ form {
     align-items: flex-end;
 }
 
-form>* {
+form > * {
     width: 100%;
 }
 
+form input {
+    padding: 3px;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+}
+
 form input[type=password],
 form input[type=text] {
     margin-bottom: 0.25rem;
@@ -24,6 +55,8 @@ form input[type=text] {
 
 form input[type=submit] {
     width: 8rem;
+    background-color: white;
+    cursor: pointer;
 }
 
 div {
@@ -31,16 +64,6 @@ div {
     padding: 0;
 }
 
-body {
-    max-width: 800px;
-    margin: 0 auto;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    line-height: 1rem;
-}
-
 table td, 
 table th {
     border: none;
@@ -52,12 +75,6 @@ table {
     white-space: nowrap;
 }
 
-table#stats td:first-child,
-table#recent-folders td:first-child {
-    display: inline-block;
-    margin-right: 10px;
-}
-
 a,
 a:visited {
     color: #0064c1;
@@ -69,7 +86,7 @@ a:hover {
 }
 
 
-#content>* {
+#content > * {
     margin: 2rem 0;
 }
 
@@ -85,10 +102,6 @@ a:hover {
     height: auto;
 }
 
-#footer {
-    text-align: right;
-}
-
 #flashes {
     background-color: #fd1b1b1c;
     border-right: 2px solid #fd1b1b1c;
@@ -99,7 +112,7 @@ a:hover {
     text-align: right;
 }
 
-.block-right>* {
+.block-right > * {
     margin-left: auto;
 }