diff --git a/wherehows-web/app/styles/abstracts/_mixins.scss b/wherehows-web/app/styles/abstracts/_mixins.scss index e7fde0a2c2..e750e719d2 100644 --- a/wherehows-web/app/styles/abstracts/_mixins.scss +++ b/wherehows-web/app/styles/abstracts/_mixins.scss @@ -98,3 +98,26 @@ #{$property}: $value; } + + +/// Maintains the aspect ratio for a wrapped element +/// @param {Number} $width number value for the container's width ratio +/// @param {Number} $height number value for the container's with ratio +@mixin aspect-ratio($width, $height) { + position: relative; + + &::before { + content: ""; + display: block; + width: 100%; + padding-top: ($height / $width) * 100%; + } + + > * { + top: 0; + bottom: 0; + left: 0; + right: 0; + position: absolute; + } +} diff --git a/wherehows-web/app/styles/components/feature-card/_feature-card.scss b/wherehows-web/app/styles/components/feature-card/_feature-card.scss index 8b7b6c9743..95627701a0 100644 --- a/wherehows-web/app/styles/components/feature-card/_feature-card.scss +++ b/wherehows-web/app/styles/components/feature-card/_feature-card.scss @@ -1,5 +1,4 @@ .feature-card { - height: 160px; border-radius: 2px; margin: 30px 0; padding: 10px; @@ -16,3 +15,8 @@ color: set-color(black, dune); } } + +/// Wrap cards in containers with 1:1 ar +.feature-container { + @include aspect-ratio(1, 1); +} diff --git a/wherehows-web/app/templates/index.hbs b/wherehows-web/app/templates/index.hbs index c44c352273..c458ee7ac9 100644 --- a/wherehows-web/app/templates/index.hbs +++ b/wherehows-web/app/templates/index.hbs @@ -1,15 +1,21 @@