client/css: improve appearance on small screens

7 files changed, 76 insertions, 25 deletions

diff --git a/client/css/comment-control.styl b/client/css/comment-control.styl
index aa12f11..4d203fa 100644
--- a/client/css/comment-control.styl
+++ b/client/css/comment-control.styl
@@ -37,12 +37,12 @@
 
     nav
         vertical-align: middle !important
-        margin: 0 0.3em 0.5em 0 !important
         &.buttons
+            margin: 0 0.3em 0.5em 0 !important
             float: left
         &.actions
             float: left
-            margin-top: 0.3em !important
+            margin: 0.3em 0 0.5em 0 !important
 
 
 .comment
@@ -64,17 +64,18 @@
             display: inline-block
 
     .body
-        width: 100%
-
+        flex-grow: 1
         header
+            white-space: nowrap
             line-height: 16pt
             vertical-align: middle
             margin-bottom: 0.5em
             background: $top-navigation-color
             padding: 0.2em 0.5em
 
+            .nickname, .date, .score-container, .edit
+                margin-right: 2em
             .date, .score-container, .edit, .delete
-                margin-left: 2em
                 font-size: 95%
             .edit, .delete, .score-container a, .nickname a
                 &:not(.inactive)
diff --git a/client/css/comment-list-view.styl b/client/css/comment-list-view.styl
index da29a76..9e93809 100644
--- a/client/css/comment-list-view.styl
+++ b/client/css/comment-list-view.styl
@@ -6,19 +6,31 @@
         margin: 1em 0
         padding: 0
 
-        &>li
-            display: flex
-            margin-bottom: 2em
+        @media (max-width: 700px)
+            &>li
+                margin-bottom: 5em
+                padding: 1vw
+            .post-thumbnail
+                margin-bottom: 1em
+                .thumbnail
+                    width: 50vw
+                    height: 33vw
 
+        @media (min-width: 700px)
+            &>li
+                display: flex
+                margin-bottom: 2em
             .post-thumbnail
                 float: left
-                vertical-align: top
-                margin-right: 1em
                 .thumbnail
                     width: 12em
                     height: 8em
-                a
-                    display: inline-block
 
-            .comments-container
-                width: 100%
+        .post-thumbnail
+            vertical-align: top
+            margin-right: 1em
+            a
+                display: inline-block
+
+        .comments-container
+            width: 100%
diff --git a/client/css/core-general.styl b/client/css/core-general.styl
index 6539712..de8a7fa 100644
--- a/client/css/core-general.styl
+++ b/client/css/core-general.styl
@@ -147,8 +147,8 @@ a .access-key
 
 .messages
     margin: 0 auto
-    width: 30em
-    max-width: 100%
+    width: 100%
+    max-width: 30em
     .message
         margin: 0 0 1em 0
         display: inline-block
diff --git a/client/css/home-view.styl b/client/css/home-view.styl
index f56d1d8..e17e4bb 100644
--- a/client/css/home-view.styl
+++ b/client/css/home-view.styl
@@ -1,5 +1,6 @@
 #home
     text-align: center !important
+    max-width: 100%
 
     header
         margin-bottom: 1em
@@ -21,6 +22,9 @@
             width: auto
         .sep
             margin: 0 0.75em
+        @media (max-width: 500px)
+            .sep, a
+                display: none
 
     .post-container
         margin-bottom: 2em
@@ -35,11 +39,22 @@
     aside
         margin-bottom: 0.3em
         font-size: 90%
+        white-space: nowrap
 
     footer
-        line-height: 100%
+        line-height: 150%
         font-size: 80%
-        .sep
-            margin: 0 0.25em
+        ul
+            padding: 0
+            text-align: center
+            li
+                display: inline
+                white-space: nowrap
+            .sep
+                word-spacing: 1.1em
+                background-repeat: no-repeat
+                background-position: 50% 50%
+                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><circle cx='6' cy='6' r='2' fill='%23000000'/></svg>")
+
     .thumbnail
         margin-right: 0.4em
diff --git a/client/css/post-list-view.styl b/client/css/post-list-view.styl
index 04724e9..02e0ef6 100644
--- a/client/css/post-list-view.styl
+++ b/client/css/post-list-view.styl
@@ -99,19 +99,25 @@
                     outline: 3px solid $main-color
 
 .post-list-header
+    white-space: nowrap
+    text-align: left
+
     label
         display: none
-    text-align: left
     form
         width: auto
+        margin-bottom: 0.75em
         *
             vertical-align: top
+    input
+        margin-bottom: 0.25em
+        margin-right: 0.25em
     input[name=search-text]
         width: 25em
-        max-width: 90vw
     input[name=masstag]
-        width: 15em
-        margin-left: 1em
+        width: 12em
+    .masstag-hint
+        margin-right: 1em
     .append
         font-size: 0.95em
         color: $inactive-link-color
@@ -123,6 +129,7 @@
                 display: none
 
     .safety
+        margin-right: 0.25em
         &.safety-safe
             background-color: $safety-safe
             border-color: @background-color
diff --git a/client/css/post-view.styl b/client/css/post-view.styl
index 9f92bb6..11c66d1 100644
--- a/client/css/post-view.styl
+++ b/client/css/post-view.styl
@@ -4,10 +4,11 @@
     width: 100%
     display: flex !important
     flex-direction: row
+
     >.sidebar
         margin-right: 1em
-        max-width: 20em
         min-width: 20em
+        max-width: 20em
         line-height: 160%
 
         a:active
@@ -42,6 +43,16 @@
         .post-content
             margin: 0
 
+@media (max-width: 800px)
+    .post-view
+        flex-wrap: wrap
+        >.sidebar
+            order: 2
+            min-width: 100%
+            max-width: 0
+        >.content
+            order: 1
+
 
 .post-view .readonly-sidebar
     .details
diff --git a/client/css/user-registration.styl b/client/css/user-registration.styl
index a8642f1..8e1ef8d 100644
--- a/client/css/user-registration.styl
+++ b/client/css/user-registration.styl
@@ -1,13 +1,16 @@
 @import colors
 
 #user-registration
+    padding-bottom: calc(2vw - 1em) !important
     form
         float: left
+        margin-right: 3em
+        margin-bottom: 1em
     .info
         float: left
-        margin-left: 3em
         border-radius: 0.2em
         width: 20em
+        margin-bottom: 1em
         ul
             line-height: 1.8em
             list-style-type: none
@@ -22,3 +25,5 @@
             color: $main-color
         p:first-child
             margin: 0 0 0.5em 0
+        p:last-child
+            margin-bottom: 0