Improved post view on small layout

- post notes no longer disappear
- post image is larger
- sidebar stacks into columns
- things from sidebar are centered

public_html/css/post.css

@@ -22,12 +22,9 @@
     line-height: 1.33em;
 }
 
-#post-view-wrapper #sidebar h1 {
+#post-view-wrapper #sidebar .box {
-    margin-top: 1.5em;
+    margin-bottom: 1.5em;
-}
+    text-align: left;
-
-#post-view-wrapper #sidebar h1:first-of-type {
-    margin-top: 0;
 }
 
 @media all and (min-width: 62.5em) {
@@ -59,10 +56,16 @@
     #post-view-wrapper #sidebar {
         order: 2;
         margin-bottom: 1em;
+        text-align: center;
+    }
+    #post-view-wrapper #sidebar .box {
+        display: inline-block;
+        width: 15em;
+        vertical-align: top;
     }
     #post-view-wrapper #post-view {
         margin: 0 auto;
-        max-width: 100%;
+        width: 100%;
         order: 1;
     }
 }
@@ -131,7 +134,6 @@
     display: flex;
     justify-content: space-around;
     margin-bottom: 2em;
-    max-width: 30em;
 }
 #sidebar .essential li {
     display: block;

public_html/templates/post.tpl

@@ -81,6 +81,7 @@ if (forceHttpInPermalinks > 0) {
             <% } %>
         </ul>
 
+        <div class="box">
             <h1>Tags (<%= _.size(post.tags) %>)</h1>
             <ul class="tags">
                 <% _.each(post.tags, function(tag) { %>
@@ -96,9 +97,10 @@ if (forceHttpInPermalinks > 0) {
                     </li>
                 <% }) %>
             </ul>
+        </div>
 
+        <div class="box">
             <h1>Details</h1>
-
             <div class="author-box">
                 <% if (post.user.name) { %>
                     <a href="#/user/<%= post.user.name %>">
@@ -124,7 +126,6 @@ if (forceHttpInPermalinks > 0) {
             </div>
 
             <ul class="other-info">
-
                 <li>
                     Rating:
                     <span class="safety-<%= post.safety %>">
@@ -196,8 +197,10 @@ if (forceHttpInPermalinks > 0) {
                     <% }) %>
                 </ul>
             <% } %>
+        </div>
 
         <% if (_.any(post.relations)) { %>
+            <div class="box">
                 <h1>Related posts</h1>
                 <ul class="related">
                     <% _.each(post.relations, function(relatedPost) { %>
@@ -208,11 +211,12 @@ if (forceHttpInPermalinks > 0) {
                         </li>
                     <% }) %>
                 </ul>
+            </div>
         <% } %>
 
         <% if (_.any(privileges) || _.any(editPrivileges) || post.contentType === 'image') { %>
+            <div class="box">
                 <h1>Options</h1>
-
                 <ul class="operations">
                     <% if (_.any(editPrivileges)) { %>
                         <li>
@@ -276,8 +280,8 @@ if (forceHttpInPermalinks > 0) {
                         <a data-fit-mode="original" href="#">original</a>
                     </li>
                 </ul>
+            </div>
         <% } %>
-
     </div>
 
     <div id="post-view">