added breakpoints for nav bar

client/scss/_media-queries.scss

@@ -1,101 +1,24 @@
-@media (max-width: 1100px) {
+@media (max-width: $break-point-x-large) {
   // hide site description in nav bar
   .site-description {
     display: none;
   }
 
-  // stack horizontal-splits
+}
-  .column--med-10 {
+
-    width: 100%;
+@media (max-width: $break-point-large ) {
-  }
 
 }
 
-@media (max-width: 800px ) {
+@media (max-width: $break-point-medium) {
-
-  body, button, input, textarea, label, select, option, p, h3 {
-    font-size: medium;
-  }
-
-  .text--pull-quote {
-    font-size: 1.5rem;
-  }
-
-  .column--sml-10 {
-    width: 100%;
-  }
-
-  .nav-bar-logo {
-    height: 1rem;
-  }
-
-  .link--nav, .link--nav-active {
-    padding: 1rem 0.5rem 1rem 0.5rem;
-  }
-
-  .select--arrow {
-    padding-right: 1.5em;
-  }
-
-  #showlite-body #asset-display-component {
-    max-width: 100%;
-  }
-
-  #showlite-body #asset-status {
-    padding: 2em;
-  }
-
-}
-
-@media (max-width: 500px) {
-
-  .nav-bar-logo {
-    height: 1rem;
-  }
-
-  .row--padded {
-    padding: 1rem;
-  }
-
-  .row--short {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
-  .row--margined {
-    margin: 1rem;
-  }
-
-  body, button, input, textarea, label, select, option, p, h3, .fine-print {
-    font-size: small;
-  }
-
-  .text--pull-quote, .button--large {
-    font-size: medium;
-  }
-
-  .grid-item {
-    width: calc(100% - 2em);
-    float: none;
-    padding: 1em;
-    margin: 0px;
-  }
-
-  .info-message--success, .info-message--failure {
-    font-size: small;
-  }
 
 
 }
 
-@media (max-width: 360px) {
+@media (max-width: $break-point-small) {
-
+
-  body, button, input, textarea, label, select, option, p, h3, .fine-print {
+}
-    font-size: x-small;
+
-  }
+@media (max-width: $break-point-x-small ) {
-
-  .text--pull-quote, .button--large {
-    font-size: small;
-  }
 
 }

client/scss/_text.scss

@@ -5,37 +5,41 @@ h1, h2, h3, h4, p {
 }
 
 h1 {
- font-size: 2.5em;
+ font-size: $text-xx-large;
 }
 
 h2 {
-  font-size: xx-large;
+  font-size: $text-x-large;
 }
 
 h3 {
-  font-size: x-large;
+  font-size: $text-large;
   font-weight: bold;
 }
 
 p, body, button, input, textarea, label, select, option {
   font-family: 'Lekton', monospace;
-  font-size: large;
+  font-size: $text-large;
 }
 
 .text--extra-large {
-  font-size: 2.5em;
+  font-size: $text-xx-large;
 }
 
 .text--large {
-  font-size: x-large;
+  font-size: $text-large;
+}
+
+.text--medium {
+  font-size: $text-medium;
 }
 
 .text--small {
-  font-size: medium;
+  font-size: $text-small;
 }
 
 .text--extra-small {
-  font-size: small;
+  font-size: $text-x-small;
 }
 
 .text--underline {
@@ -65,3 +69,97 @@ p, body, button, input, textarea, label, select, option {
 .text--success {
   color: $success-color;
 }
+
+@media (max-width: $break-point-x-large ) {
+  h1 {
+    font-size: $text-x-large;
+  }
+
+  h2 {
+    font-size: $text-large;
+  }
+
+  h3 {
+    font-size: $text-medium;
+  }
+
+  p, body, button, input, textarea, label, select, option {
+    font-size: $text-medium;
+  }
+
+  .text--extra-large {
+    font-size: $text-x-large;
+  }
+
+  .text--large {
+    font-size: $text-medium;
+  }
+
+  .text--medium {
+    font-size: $text-small;
+  }
+
+}
+
+@media (max-width: $break-point-medium) {
+
+  h1 {
+    font-size: $text-large;
+  }
+
+  h2 {
+    font-size: $text-medium;
+  }
+
+  h3 {
+    font-size: $text-small;
+  }
+
+  p, body, button, input, textarea, label, select, option {
+    font-size: $text-small;
+  }
+
+  .text--extra-large {
+    font-size: $text-large;
+  }
+
+  .text--large {
+    font-size: $text-medium;
+  }
+
+  .text--small {
+    font-size: $text-x-small;
+  }
+
+
+}
+
+@media (max-width: $break-point-x-small) {
+
+  h1 {
+    font-size: $text-medium;
+    font-weight: bold;
+  }
+
+  h2 {
+    font-size: $text-small;
+  }
+
+  p, body, button, input, textarea, label, select, option {
+    font-size: $text-x-small;
+  }
+
+  .text--extra-large {
+    font-size: $text-x-small;
+    font-weight: bold;
+  }
+
+  .text--large {
+    font-size: $text-x-small;
+  }
+
+  .text--medium {
+    font-size: $text-x-small;
+  }
+
+}

client/scss/_variables.scss

@@ -20,3 +20,18 @@ $button-full-width: calc(100% - 2px);
 
 $input-padding: 0.3em;
 $input-full-width: calc(100% - 0.6em);
+
+$text-xx-large: 2.5em;
+$text-x-large: xx-large;
+$text-large: x-large;
+$text-medium: large;
+$text-small: medium;
+$text-x-small: small;
+
+$break-point-xx-large: 1400px;
+$break-point-x-large: 1290px;
+$break-point-large: 1000px;
+$break-point-medium: 800px;
+$break-point-small: 500px;
+$break-point-x-small: 400px;
+

client/scss/components/_horizontal-split.scss

@@ -7,3 +7,22 @@
     width: 50%;
   }
 };
+
+
+
+@media (max-width: $break-point-large ) {
+
+  .horizontal-split {
+    display       : flex;
+    flex-direction : column;
+    justify-content: space-between;
+    align-items    : flex-start;
+    .column {
+      width: 100%;
+      padding-left: 0;
+      padding-right: 0;
+      padding-bottom: $secondary-padding;
+    }
+  };
+
+}

client/scss/components/_label.scss

@@ -9,3 +9,12 @@
   padding-right: $thin-padding;
   cursor: pointer;
 }
+
+@media (max-width: $break-point-medium ) {
+
+  // note: bolding break point lines up with row-label break point
+  .label, .label-radio {
+    font-weight: bold;
+  }
+
+}

client/scss/components/_nav-bar.scss

@@ -15,3 +15,21 @@
 .nav-bar-logo {
   cursor: pointer;
 }
+
+@media (max-width: $break-point-medium ) {
+  .nav-bar-link {
+    padding-top: calc(1em - 2px);
+    padding-right: 1em;
+    padding-bottom: calc(1em - 2px);
+    padding-left: 1em;
+  }
+}
+
+@media (max-width: $break-point-small ) {
+  .nav-bar-link {
+    padding-top: calc(0.5em - 2px);
+    padding-right: 0.5em;
+    padding-bottom: calc(0.5em - 2px);
+    padding-left: 0.5em;
+  }
+}

client/scss/components/_row.scss

@@ -17,3 +17,19 @@
   align-self: center;
   width: 70%;
 }
+
+
+@media (max-width: $break-point-medium ) {
+
+  .row-labeled {
+    flex-direction: column;
+  }
+
+  .row-labeled-label {
+    width: 100%;
+  }
+  .row-labeled-content {
+    width: 100%;
+  }
+
+}