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;
+ }
+ }
+}
+