diff --git a/src/jade/templates/mod.jade b/src/jade/templates/mod.jade index 02093aab1..0252c1258 100644 --- a/src/jade/templates/mod.jade +++ b/src/jade/templates/mod.jade @@ -7,6 +7,8 @@ .view__mod a - img.logo - h3.name: p - .description: p + .left + img.logo + .right + h3.name: p + .description: p diff --git a/src/scss/templates/browse_page.scss b/src/scss/templates/browse_page.scss index c5b2bce03..7e0820706 100644 --- a/src/scss/templates/browse_page.scss +++ b/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 { - margin: 0 1em 1em 0; - width: 37em; + .view__mod { + flex: 1 1 100%; + flex-wrap: nowrap; + + margin: 0 1em 1em 0; + max-width: calc(50% - 1em); + } } } diff --git a/src/scss/templates/mod.scss b/src/scss/templates/mod.scss index 73320142a..66133028e 100644 --- a/src/scss/templates/mod.scss +++ b/src/scss/templates/mod.scss @@ -6,53 +6,43 @@ All rights reserved. */ .view__mod { - position: relative; height: 18em; + a { + background: $color-background-panel; + color: $color-text; + display: flex; + min-height: 16em; + padding: 1.2em; + text-decoration: none; - background: $color-background-panel; - display: inline-block; - padding: 0.2em; - text-decoration: none; - vertical-align: top; + &:hover { + border: 0.2em solid $color-link; + padding: 1.0em; - transition: - height $animate-normal, - opacity $animate-normal; + h3 { + color: $color-link; + text-decoration: underline; + } + } - &:hover { - border: 0.2em solid $color-link; - padding: 0; + .left { + flex: 0 0 33%; + padding: 0.5em; - .name { - color: $color-link; - text-decoration: underline; + img { + max-width: calc(100% - 1.0em); + } + } + + .right { + flex: 1 1 66%; + + h3 { + font-size: $font-size-normal; + } + + .description { + margin-top: 1em; + } } } - - &.empty { - height: 0; - } - - &.removing { - height: 0; - opacity: 0; - } - - .description { - margin: 1em; - } - - a { - color: $color-text; - text-decoration: none; - } - - h3 { - font-size: $font-size-normal; - margin-top: 1em; - } - - img { - float: left; - margin: 1em; - } }