Improve layout on mobile

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## main
 
+* [WebUI] Improve design a bit and make it responsive on mobile
 * Add proper documentation
 
 ## 0.2.0

static/style.css

@@ -7,6 +7,12 @@ ul, ol {
     padding: 0;
 }
 
+@media (max-width: 500px) {
+    body {
+        font-size: 0.8em;
+    }
+}
+
 .admin {
     color: red;
 }
@@ -15,14 +21,31 @@ ul, ol {
     height: 90vh;
 
     display: grid;
-    grid-template-areas: ". up ."
-    "before focused after"
-    ". down .";
-    grid-template-columns: 1fr 3fr 1fr;
-    grid-template-rows: 1fr 3fr 1fr;
     grid-gap: 1em;
 }
 
+@media (max-width: 500px) {
+    #article_browser {
+        grid-template-areas: "up"
+        "before"
+        "focused"
+        "after"
+        "down";
+        grid-template-rows: 1fr 1fr 50vh 1fr 1fr;
+        grid-gap: 0.2em;
+    }
+}
+
+@media (min-width: 500px) {
+    #article_browser {
+        grid-template-areas: ". up ."
+        "before focused after"
+        ". down .";
+        grid-template-columns: 1fr 3fr 1fr;
+        grid-template-rows: 1fr 3fr 1fr;
+    }
+}
+
 .site_logo {
     display: inline-block;
     padding: 0.1em;
@@ -41,7 +64,6 @@ ul, ol {
 
     align-self: center;
     justify-self: center;
-    margin: 1em;
 
     overflow: hidden;
     height: 100%;
@@ -98,6 +120,14 @@ ul, ol {
     "absolute";
     grid-template-rows: auto 1fr auto;
 }
+@media (max-width: 500px) {
+    .article-other-time {
+        display: grid;
+        grid-template-areas:
+        "relative title";
+        grid-template-columns: 1fr auto;
+    }
+}
 .article-other-time time.relative {
     grid-area: relative;
 }
@@ -109,6 +139,11 @@ ul, ol {
     grid-area: absolute;
     justify-self: end;
 }
+@media (max-width: 500px) {
+    .article-other-time time.absolute {
+        display: none;
+    }
+}
 
 .articles-same-time > ol {
     display: flex;
@@ -123,6 +158,6 @@ ul, ol {
     align-items: center;
 }
 .article-same-time h2 {
-    font-size: 1rem;
+    font-size: 1em;
     font-weight: normal;
 }