Responsive components

static/styles/_base/_forms.scss

@@ -100,34 +100,36 @@ select {
   @include clearfix();
 
   #{$all-text-inputs} {
-    width: 75%;
-    float: left;
-    border-radius: $base-border-radius 0 0 $base-border-radius;
-    margin: 0;
-    border-right: none;
+    border-radius: 4px;
+    width: 100%;
+    margin: 0 0 .5rem 0;
   }
 
   input[type="submit"],
   button,
   .button {
-    @include rem(height, 4.0rem);
-    width: 25%;
-    float: left;
-    border-radius: 0 $base-border-radius $base-border-radius 0;
+    border-radius: 4px;
+    width: 100%;
+    margin: 0;
   }
 
   @include media($medium) {
-    #{$all-text-inputs} {
-      width: 60%;
+   #{$all-text-inputs} {
+      width: 75%;
       float: left;
-      border-radius: $base-border-radius 0 0 $base-border-radius;
+      margin: 0;
+      border-radius: 4px 0 0 4px;
+      border-right: none;
     }
 
-    input[type="submit"] {
-      width: 40%;
+    input[type="submit"],
+    button,
+    .button {
+      @include rem(height, 4.0rem);
+      width: 25%;
       float: left;
-      border-radius: 0 $base-border-radius $base-border-radius 0;
-    }
+      border-radius: 0 4px 4px 0;
+    }    
   }
 }
 

static/styles/_base/_typography.scss

@@ -21,32 +21,32 @@ h1, h2, h3, h4, h5, h6 {
 
 h1,
 .h1 {
-  @include font-size(3.2);
+  @include font-size(2.6);
   font-weight: 600;
 }
 
 h2,
 .h2 {
-  @include font-size(2.8);
+  @include font-size(2.2);
   font-weight: 600;
-  margin-bottom: 1em;
+  margin-bottom: .5em;
 }
 
 h3,
 .h3 {
-  @include font-size(2.4);
+  @include font-size(2.0);
   font-weight: 600;
 }
 
 h4,
 .h4 {
-  @include font-size(2.0);
+  @include font-size(1.6);
   font-weight: 600;
 }
 
 h5,
 .h5 {
-  @include font-size(1.6);
+  @include font-size(1.4);
   font-weight: 600;
 }
 
@@ -56,6 +56,38 @@ h6,
   font-weight: 600;
 }
 
+@include media($medium) {
+  h1,
+  .h1 {
+    @include font-size(3.2);
+  }
+
+  h2,
+  .h2 {
+    @include font-size(2.8);
+  }
+
+  h3,
+  .h3 {
+    @include font-size(2.4);
+  }
+
+  h4,
+  .h4 {
+    @include font-size(2.0);
+  }
+
+  h5,
+  .h5 {
+    @include font-size(1.6);
+  }
+
+  h6,
+  .h6 {
+    @include font-size(1.4);
+  }
+}
+
 p {
   margin-bottom: 1em;
   -webkit-margin-before: 0;
@@ -128,17 +160,29 @@ cite {
 // Universal text classes
 
 .text--display {
-  @include font-size(4.0);
+  @include font-size(2.6);
   margin-bottom: .5em;
+
+  @include media($medium) {
+    @include font-size(4.0);
+  }
 }
 
 .text--hero {
-  @include font-size(2.4);
+  @include font-size(1.8);
   margin-bottom: 1em;
+
+  @include media($medium) {
+    @include font-size(2.4);
+  }
 }
 
 .text--lead {
-  @include font-size(1.8);
+  @include font-size(1.6);
+
+  @include media($medium) {
+    @include font-size(1.8);
+  }
 }
 
 .text--query {
@@ -153,6 +197,15 @@ cite {
   color: #fff;
 }
 
+.text--small {
+  @include font-size(1.0);
+  margin: 0;
+
+  @include media($medium) {
+      @include font-size(1.0);
+  }
+}
+
 // Data styles
 // When we're presenting data but not using semantic headers
 .data {

static/styles/_base/_variables.scss

@@ -53,6 +53,7 @@ $data-debt-2: darken($data-debt, 10%);
 // UI Colors
 $meta-box-color: #FBFBFD;
 $committee-bg: #DCDCE0;
+$modal-border: #5E6D82;
 
 // Background Color
 $base-background-color: white;

static/styles/_components/_cards.scss

@@ -2,29 +2,27 @@
 
 // If we're showing a grid of cards. Default is 2 across
 .card-grid {
-	@include clearfix();
-	@include rem(padding, 2.0rem 0);
-	clear: both;
+  @include clearfix();
+  padding: 2rem 0;
+  clear: both;
 
-	.card {
-		@include span-columns(12);
-		height: 230px;
-		margin-bottom: 10px;
-	}	
+  @include media($medium) {
+    .card {
+      @include span-columns(6);    
+    }
+  }
 }
 
 .card {
-	@include rem(padding, 2.0rem);
-	border: 1px solid $light-blue-gray;
-	background: $meta-box-color;
-}
-
-.card--icon {
-	.card__icon {
-		@include span-columns(2 of 12);
-	}
+  @include clearfix();
+  margin-bottom: 2rem;
 
-	.card__content {
-		@include span-columns(10 of 12);
-	}
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.card {
+  @include rem(padding, 2.0rem);
+  border: 1px solid $light-blue-gray;
+  background: $meta-box-color;
 }

static/styles/_components/_components.scss

@@ -21,6 +21,7 @@
 @import "charts";
 @import "cards";
 @import "images";
+@import "modals";
 
 // Remove for production
 @import "styleguide";

static/styles/_components/_footer.scss

@@ -14,20 +14,36 @@ footer {
 }
 
 .footer__left {
-    @include span-columns(12);
     img {
         margin-right: 1.25em;
     }
 }
 
 .footer__right {
-    @include span-columns(12);
-    text-align: right;
+    margin-top: 1rem;
+
+    @include media($medium) {
+        margin-top: 0;
+        text-align: right;
+    }
+}
+
+.footer__left,
+.footer__right {
+    @include clearfix;
+
+    @include media($medium) {
+        @include span-columns(6);
+    }
 }
 
 .footer__nav {
     li {
         display: inline-block;
         padding: 0 .625em;
+
+        &:first-child {
+            padding-left: 0;
+        }
     }
 }