Skip to content

Commit

Permalink
Fix footer sponsor images being cut off at some screen widths
Browse files Browse the repository at this point in the history 
Changes scaling of sponsor images so they always stay the same size for
all screen widths.
  • Loading branch information
@martinemde
martinemde committed Aug 18, 2023
1 parent a2ae029 commit 5a4f3e3
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 101 deletions.
89 changes: 23 additions & 66 deletions app/assets/stylesheets/modules/footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,30 +53,17 @@
display: inline-block;
}

.footer__sponsors-wrap {
margin-top: 60px;
.footer__sponsors {
margin: 60px auto 0;
padding-top: 45px;
width: 90%;
max-width: 940px;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.1); }
@media (min-width: 1040px) {
.footer__sponsors-wrap {
margin-right: auto;
margin-left: auto;
max-width: 940px; } }

.footer__sponsors {
margin: 0 2%;}
@media (max-width: 579px) {
.footer__sponsors {
margin: 0 10%;
width: 78%; } }
@media (min-width: 580px) and (max-width: 1039px) {
.footer__sponsors {
margin: 0 10%;
width: 90%; } }

.footer__sponsor {
margin-bottom: 36px;
float: left;
margin: 0 26px 36px;
display: inline-block;
height: 100px;
width: 90px;
background-image: url(/sponsors.png);
Expand All @@ -95,52 +82,22 @@
outline: none; }
.footer__sponsor__ruby_central {
background-position: 0 4px; }
@media (max-width: 1039px) {
.footer__sponsor {
width: 100px; }
.footer__sponsor__dockyard {
background-position: 0 -232px; }
.footer__sponsor__dnsimple {
background-position: 0 -330px; }
.footer__sponsor__datadog {
background-position: 0 -695px; }
.footer__sponsor__runscope {
background-position: 0 -526px; }
.footer__sponsor__fastly {
background-position: 0 -606px; }
.footer__sponsor__honeybadger {
background-position: 0 -804px; }
.footer__sponsor__domainr {
background-position: 0 -892px; }
.footer__sponsor__whitesource {
background-position: 0 -983px; }
}
@media (min-width: 1040px) {
.footer__sponsor {
width: 90px; }
.footer__sponsor__dockyard {
background-position: 0 -204px; }
.footer__sponsor__dnsimple {
background-position: 0 -291px; }
.footer__sponsor__datadog {
background-position: 0 -634px; }
.footer__sponsor__runscope {
background-position: 0 -469px; }
.footer__sponsor__fastly {
background-position: 0 -541px; }
.footer__sponsor__honeybadger {
background-position: 0 -717px; }
.footer__sponsor__domainr {
background-position: 0 -804px; }
.footer__sponsor__whitesource {
background-position: 0 -885px; }
}
@media (max-width: 579px) {
.footer__sponsor:nth-child(odd) {
margin-right: 18%; } }
@media (min-width: 580px) {
.footer__sponsor {
margin:0 30px 36px 30px; } }
.footer__sponsor__dockyard {
background-position: 0 -204px; }
.footer__sponsor__dnsimple {
background-position: 0 -291px; }
.footer__sponsor__datadog {
background-position: 0 -624px; }
.footer__sponsor__runscope {
background-position: 0 -469px; }
.footer__sponsor__fastly {
background-position: 0 -541px; }
.footer__sponsor__honeybadger {
background-position: 0 -717px; }
.footer__sponsor__domainr {
background-position: 0 -804px; }
.footer__sponsor__whitesource {
background-position: 0 -885px; }

.footer__sponsor__logo {
margin-top: 5px;
Expand Down
68 changes: 33 additions & 35 deletions app/views/layouts/application.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,41 +172,39 @@
</div>
</div>
</div>
<div class="footer__sponsors-wrap">
<div class="footer__sponsors">
<a class="footer__sponsor footer__sponsor__ruby_central" href="https://rubycentral.org/" target="_blank">
<%= t("layouts.application.footer.supported_by") %>
<span class="t-hidden">Ruby Central</span>
</a>
<a class="footer__sponsor footer__sponsor__dockyard" href="https://dockyard.com/ruby-on-rails-consulting" target="_blank">
<%= t("layouts.application.footer.designed_by") %>
<span class="t-hidden">DockYard</span>
</a>
<a class="footer__sponsor footer__sponsor__dnsimple" href="https://dnsimple.link/resolving-rubygems" target="_blank">
<%= t("layouts.application.footer.resolved_with") %>
<span class="t-hidden">DNSimple</span>
</a>
<a class="footer__sponsor footer__sponsor__datadog" href="https://www.datadoghq.com/" target="_blank">
<%= t("layouts.application.footer.monitored_by") %>
<span class="t-hidden">Datadog</span>
</a>
<a class="footer__sponsor footer__sponsor__fastly" href="https://www.fastly.com/" target="_blank">
<%= t("layouts.application.footer.gems_served_by") %>
<span class="t-hidden">Fastly</span>
</a>
<a class="footer__sponsor footer__sponsor__honeybadger" href="https://www.honeybadger.io/" target="_blank">
<%= t("layouts.application.footer.monitored_by") %>
<span class="t-hidden">Honeybadger</span>
</a>
<a class="footer__sponsor footer__sponsor__domainr" href="https://domainr.com/" target="_blank">
<%= t("layouts.application.footer.verified_by") %>
<span class="t-hidden">Domainr</span>
</a>
<a class="footer__sponsor footer__sponsor__whitesource" href="https://www.whitesourcesoftware.com/" target="_blank">
<%= t("layouts.application.footer.secured_by") %>
<span class="t-hidden">Whitesource</span>
</a>
</div>
<div class="footer__sponsors">
<a class="footer__sponsor footer__sponsor__ruby_central" href="https://rubycentral.org/" target="_blank">
<%= t("layouts.application.footer.supported_by") %>
<span class="t-hidden">Ruby Central</span>
</a>
<a class="footer__sponsor footer__sponsor__dockyard" href="https://dockyard.com/ruby-on-rails-consulting" target="_blank">
<%= t("layouts.application.footer.designed_by") %>
<span class="t-hidden">DockYard</span>
</a>
<a class="footer__sponsor footer__sponsor__dnsimple" href="https://dnsimple.link/resolving-rubygems" target="_blank">
<%= t("layouts.application.footer.resolved_with") %>
<span class="t-hidden">DNSimple</span>
</a>
<a class="footer__sponsor footer__sponsor__datadog" href="https://www.datadoghq.com/" target="_blank">
<%= t("layouts.application.footer.monitored_by") %>
<span class="t-hidden">Datadog</span>
</a>
<a class="footer__sponsor footer__sponsor__fastly" href="https://www.fastly.com/" target="_blank">
<%= t("layouts.application.footer.gems_served_by") %>
<span class="t-hidden">Fastly</span>
</a>
<a class="footer__sponsor footer__sponsor__honeybadger" href="https://www.honeybadger.io/" target="_blank">
<%= t("layouts.application.footer.monitored_by") %>
<span class="t-hidden">Honeybadger</span>
</a>
<a class="footer__sponsor footer__sponsor__domainr" href="https://domainr.com/" target="_blank">
<%= t("layouts.application.footer.verified_by") %>
<span class="t-hidden">Domainr</span>
</a>
<a class="footer__sponsor footer__sponsor__whitesource" href="https://www.whitesourcesoftware.com/" target="_blank">
<%= t("layouts.application.footer.secured_by") %>
<span class="t-hidden">Whitesource</span>
</a>
</div>
<div class="footer__language_selector">
<% I18n.available_locales.each do |language| %>
Expand Down

0 comments on commit 5a4f3e3

Please sign in to comment.