client/css: improve appearance on small screens

client/css/forms.styl

@@ -36,13 +36,13 @@ form.tabular
         li
             display: table-row
             label:not(.radio):not(.checkbox):not(.file-dropper)
+                box-sizing: border-box
                 display: table-cell
                 width: 33%
                 text-align: right
                 padding-right: 1em
     .messages, .buttons
         margin-left: 33%
-        padding-left: 1em
 
 form.horizontal
     display: inline-block

client/css/help.styl

@@ -1,7 +1,8 @@
 @import colors
 
 #help
-    width: 40em
+    width: 100%
+    max-width: 45em
     nav
         margin-bottom: 1.5em
     td, th
@@ -16,9 +17,18 @@
         &:first-child
             margin-top: 0
     nav
-        text-align: center
         ul
             margin: 0 auto
             text-align: left
     nav.secondary
         font-size: 0.95em
+
+    @media (max-width: 600px)
+        th, thead
+            display: none
+        table, tr, td, tbody
+            display: block
+        tr
+            margin-bottom: 0.8em
+        pre
+            white-space: pre-wrap

client/css/main.styl

@@ -13,6 +13,12 @@ body
     font-family: 'Droid Sans', sans-serif
     font-size: 12pt
     line-height: 18pt
+    @media (max-width: 800px)
+        font-size: 10pt
+        line-height: 15pt
+    @media (max-width: 1200px)
+        font-size: 11pt
+        line-height: 16.5pt
 
 h1, h2, h3
     font-weight: normal
@@ -40,9 +46,10 @@ form .fa-question-circle-o
     vertical-align: middle
 
 #content-holder
-    margin: 2em
+    padding: 1.5vw
     text-align: center
     >.content-wrapper
+        box-sizing: border-box /* make max-width: 100% on this element include padding */
         text-align: left
         display: inline-block
         margin: 0 auto
@@ -50,7 +57,7 @@ form .fa-question-circle-o
             margin-top: 0
     >.content-wrapper:not(.transparent)
         background: $top-nav-color
-        padding: 2em
+        padding: 2vw
 
 hr
     border: 0

client/css/tags.styl

@@ -31,6 +31,10 @@
                 display: inline
                 &:not(:last-child):after
                     content: ', '
+        @media (max-width: 800px)
+            .implications, .suggestions
+                display: none
+
 .tag-list-header
     text-align: left
     form
@@ -41,22 +45,36 @@
         font-size: 0.95em
         color: $inactive-link-color
 
-.tag-categories
-    td, th
-        padding: .2em
-        &:first-child
-            padding-left: 0
-        &:last-child
-            padding-right: 0
-        &.name
-            width: 12em
-        &.color
-            text-align: center
-            width: 5em
-        &.usages
-            text-align: center
-            width: 5em
-    tfoot
-        display: none
+.content-wrapper.tag
+    width: 100%
+    max-width: 30em
+    form
+        width: 100%
+        label:not(.radio):not(.checkbox):not(.file-dropper)
+            width: 6em
+        .messages, .buttons
+            margin-left: 6em
+
+.content-wrapper.tag-categories
+    width: 100%
+    max-width: 35em
+    table
+        width: 100%
+        td, th
+            padding: .2em
+            &:first-child
+                padding-left: 0
+            &:last-child
+                padding-right: 0
+            &.name
+                width: 35%
+            &.color
+                text-align: center
+                width: 35%
+            &.usages
+                text-align: center
+                width: 10%
+        tfoot
+            display: none
     .messages, form
         width: auto

client/css/users.styl

@@ -25,8 +25,9 @@
 
 
 #user
-    width: 30em
-    .text-nav
+    width: 100%
+    max-width: 35em
+    nav.text-nav
         margin-bottom: 1.5em
 
     #user-summary

client/html/help_search_general.tpl

@@ -13,17 +13,17 @@ can be of following form:</p>
         <tr>
             <td><code>&lt;value&gt;</code></td>
             <td>anonymous tokens</td>
-            <td>basic filters</td>
+            <td>used for basic filters</td>
         </tr>
         <tr>
             <td><code>&lt;key&gt;:&lt;value&gt;</code></td>
             <td>named tokens</td>
-            <td>advanced filters</td>
+            <td>used for advanced filters</td>
         </tr>
         <tr>
             <td><code>sort:&lt;style&gt;</code></td>
             <td>sort style tokens</td>
-            <td>sort the results</td>
+            <td>used to sort the results</td>
         </tr>
         <tr>
             <td><code>special:&lt;value&gt;</code></td>