switch post previews to use flexbox, add better styling for cropped thumbnails

app/assets/stylesheets/common/main_layout.scss

@@ -38,12 +38,16 @@ div#page {
     }
 
     input[type=text] {
-      width: 10em;
-
       /* ensure expanded search box renders above post thumbnails. */
       z-index: 1;
       position: relative;
     }
+
+    button[type=submit] {
+      padding: 2px 6px;
+      background: #EEE;
+      border-left: none;
+    }
   }
 
   aside#sidebar > section {

app/assets/stylesheets/common/paginator.scss

@@ -10,11 +10,10 @@ div.paginator {
     a {
       margin: 0 0.25em;
       padding: 0.25em 0.75em;
-      border: 1px solid #EAEAEA;
     }
 
-    a.arrow {
-      border: none;
+    &.more {
+      color: grey;
     }
 
     a.arrow:hover {
@@ -22,10 +21,6 @@ div.paginator {
       color: $link_color;
     }
 
-    a.current {
-      border: 1px solid #AAA;
-    }
-
     a:hover {
       background: $link_color;
       color: white;

app/assets/stylesheets/specific/posts.scss

@@ -4,7 +4,6 @@ article.post-preview {
   height: 154px;
   width: 154px;
   margin: 0 10px 10px 0;
-  float: left;
   overflow: hidden;
   text-align: center;
   @include inline-block;
@@ -26,13 +25,6 @@ article.post-preview {
     margin: auto;
   }
 
-  &.large-cropped {
-    height: auto;
-    weidth: auto;
-    float: none;
-    display: block;
-  }
-
   &[data-tags~=animated]:before, &[data-file-ext=swf]:before, &[data-file-ext=webm]:before, &[data-file-ext=mp4]:before, &[data-file-ext=zip]:before {
     @include animated-icon;
   }
@@ -171,7 +163,6 @@ body[data-user-can-approve-posts="true"] .post-preview {
   white-space: nowrap;
   
   article.post-preview {
-    float: none;
     width: auto;
     border: none;
     margin: 0;
@@ -314,13 +305,6 @@ div#c-posts {
   }
 
   div#a-index {
-    div#jlist-rss-ads-for-show {
-      float: right;
-      position: absolute;
-      top: 0;
-      right: 10px;
-    }
-
     menu#post-sections {
       margin-bottom: 0.5em;
       font-size: $h3_size;

app/assets/stylesheets/specific/z_responsive.scss

@@ -22,12 +22,17 @@
   }
 
   div#page aside#sidebar {
+    padding: 5px;
+
     input#tags {
-      width: 75%;
+      width: 80%;
     }
 
-    input[type=submit] {
-      width: 20%;
+    button[type=submit] {
+      font-size: 1.4em;
+      background-color: #EEE;
+      height: 42px;
+      padding: 2px 10px;
     }
   }
 
@@ -136,34 +141,26 @@
     }
   }
 
+  #posts #posts-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
   article.post-preview {
-    margin: 0.5vw;
-    width: 48vw;
-    height: 48vw;    
+    float: none;
+    margin: 0; 
     text-align: center;
     vertical-align: middle;
     display: inline-block;
 
-    &.cropped {
-      width: 32vw;
-      height: 32vw;    
-    }
-
     a {
-      //width: 48.5vw;
-      //display: block;
       margin: 0 auto;
     }
 
     img {
-      //object-fit: contain;
-      margin: 0 auto;
       border: none !important;
-
-      &.cropped {
-        width: 32vw;
-        height: 32vw;
-      }
     }
 
     &[data-tags~=animated]:before, &[data-file-ext=swf]:before, &[data-file-ext=webm]:before, &[data-file-ext=mp4]:before, &[data-file-ext=zip]:before {
@@ -175,6 +172,19 @@
     }
   }
 
+  .user-disable-cropped-false {
+    article {
+      width: 32vw;
+      height: 32vw;
+      margin: 0 auto;
+    }
+
+    img {
+      width: 32vw;
+      height: 32vw;
+    }
+  }
+
   img#image {
     margin-top: 5px;
   }