From 57b1dc2e09c03187679817ab5c9cbe006f877f7f Mon Sep 17 00:00:00 2001 From: Kriszta Date: Fri, 19 Feb 2016 20:51:47 +0000 Subject: [PATCH] improving grid layout on sponsors page --- app/assets/stylesheets/main.scss | 6 ------ app/assets/stylesheets/partials/_sponsors.scss | 17 ++++++++++++++--- app/views/sponsors/index.html.haml | 4 ++-- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 223dfc130..f124e09da 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -101,12 +101,6 @@ nav a.menu { } } -#sponsors { - li img { - max-height: 120px; - } -} - img.sponsor { max-height: 100px; } diff --git a/app/assets/stylesheets/partials/_sponsors.scss b/app/assets/stylesheets/partials/_sponsors.scss index ec99079ad..bb770abfa 100644 --- a/app/assets/stylesheets/partials/_sponsors.scss +++ b/app/assets/stylesheets/partials/_sponsors.scss @@ -1,7 +1,18 @@ #sponsors { - .sponsor-logo { - height: 100px; - padding-bottom: 20px; + .sponsor { + position: relative; + padding-top: 20%; + margin-bottom: 20px; + } + .sponsor-image { + position: absolute; + top: 50%; + left: 50%; + -moz-transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + max-width: 60%; + max-height: 100%; } } diff --git a/app/views/sponsors/index.html.haml b/app/views/sponsors/index.html.haml index dd04e3b9f..956b98372 100644 --- a/app/views/sponsors/index.html.haml +++ b/app/views/sponsors/index.html.haml @@ -15,5 +15,5 @@ .large-12.columns %ul.small-block-grid-2.medium-block-grid-3.large-block-grid-3#sponsors - @sponsors.each do |sponsor| - %li - = link_to image_tag(sponsor.avatar, class: "sponsor-logo", alt: sponsor.name), sponsor.website + %li.sponsor + = link_to image_tag(sponsor.avatar, class: "sponsor-image", alt: sponsor.name), sponsor.website