Fix formatting issues on browse page

src/jade/templates/mod.jade

@@ -7,6 +7,8 @@
 
 .view__mod
     a
+        .left
             img.logo
+        .right
             h3.name: p
             .description: p

src/scss/templates/browse_page.scss

@@ -6,9 +6,17 @@ All rights reserved.
 */
 
 .view__browse_page {
+    .mods {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: stretch;
 
         .view__mod {
+            flex: 1 1 100%;
+            flex-wrap: nowrap;
+
             margin: 0 1em 1em 0;
-        width: 37em;
+            max-width: calc(50% - 1em);
+        }
     }
 }

src/scss/templates/mod.scss

@@ -6,53 +6,43 @@ All rights reserved.
 */
 
 .view__mod {
-    position: relative; height: 18em;
+    a {
-
         background: $color-background-panel;
-    display: inline-block;
+        color: $color-text;
-    padding: 0.2em;
+        display: flex;
+        min-height: 16em;
+        padding: 1.2em;
         text-decoration: none;
-    vertical-align: top;
-
-    transition:
-        height $animate-normal,
-        opacity $animate-normal;
 
         &:hover {
             border: 0.2em solid $color-link;
-        padding: 0;
+            padding: 1.0em;
 
-        .name {
+            h3 {
                 color: $color-link;
                 text-decoration: underline;
             }
         }
 
-    &.empty {
+        .left {
-        height: 0;
+            flex: 0 0 33%;
+            padding: 0.5em;
+
+            img {
+                max-width: calc(100% - 1.0em);
+            }
         }
 
-    &.removing {
+        .right {
-        height: 0;
+            flex: 1 1 66%;
-        opacity: 0;
-    }
-
-    .description {
-        margin: 1em;
-    }
-
-    a {
-        color: $color-text;
-        text-decoration: none;
-    }
 
             h3 {
                 font-size: $font-size-normal;
-        margin-top: 1em;
             }
 
-    img {
+            .description {
-        float: left;
+                margin-top: 1em;
-        margin: 1em;
+            }
+        }
     }
 }