codeforamerica#1558 fix CSS hover issue in supporters footer

cherscarlett · Jun 14, 2016 · d13580f · d13580f
1 parent 8692034
commit d13580f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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; 
+        }
+    }
+}
+