diff --git a/action.html b/action.html index a867f8e3d..fe2978d2f 100644 --- a/action.html +++ b/action.html @@ -35,21 +35,6 @@ .masthead-homepage:before { min-height: 600px } } - ul.list-logos - { - width: 900px; - margin: 0 auto; - padding: 0; - } - - ul.list-logos li { width: 15% } - - @media (max-width: 900px) - { - ul.list-logos { width: 100% } - ul.list-logos li { width: 140px } - } - /* Collapse global header with following masthead */ .global-header { diff --git a/index.html b/index.html index 2b88b1ef1..5df496e27 100644 --- a/index.html +++ b/index.html @@ -46,21 +46,6 @@ .masthead-homepage:before { min-height: 600px } } - ul.list-logos - { - width: 900px; - margin: 0 auto; - padding: 0; - } - - ul.list-logos li { width: 15% } - - @media (max-width: 900px) - { - ul.list-logos { width: 100% } - ul.list-logos li { width: 140px } - } - /* Collapse global header with following masthead */ .global-header { diff --git a/stylesheets/staging.scss b/stylesheets/staging.scss index 2ce0e9ffc..d472f9761 100644 --- a/stylesheets/staging.scss +++ b/stylesheets/staging.scss @@ -34,6 +34,20 @@ } } +// Media Queries - TODO: Add more sizes, switch to ems, switch to mobile-first + +$screen-sizes: ( + desktop-sm: 900px +); + +@mixin break-point($type, $target-width: min-width, $media-type: screen) { + $screen-size: map-get($screen-sizes, $type); + + @media #{$media-type} and (#{$target-width}: #{$screen-size}) { + @content; + } +} + // Colors $color-red: #cf1b41; $color-red-medium: #aa1c3a; @@ -567,3 +581,32 @@ ul.checkmark li:before { float: left; width: 2em; } + +// Supporters List in Footer + +ul.list-logos.muted { + width: 900px; + margin: 0 auto; + padding: 0; + + li { + width: 15%; + + a:link, a:visited { + border-bottom: 1px solid transparent; + } + + a:hover, a:active { + border-color: transparentize($color-red, .3); + } + } + + @include break-point(desktop-sm, max-width) { + width: 100%; + + li { + width: 140px; + } + } +} +