From bfc498402c9e7cd407274d83b18261d3e34d855e Mon Sep 17 00:00:00 2001 From: bill bittner Date: Sun, 10 Jun 2018 16:07:15 -0700 Subject: [PATCH] added breakpoints for nav bar --- client/scss/_media-queries.scss | 97 ++------------- client/scss/_text.scss | 114 ++++++++++++++++-- client/scss/_variables.scss | 15 +++ client/scss/components/_horizontal-split.scss | 19 +++ client/scss/components/_label.scss | 9 ++ client/scss/components/_nav-bar.scss | 18 +++ client/scss/components/_row.scss | 16 +++ 7 files changed, 193 insertions(+), 95 deletions(-) diff --git a/client/scss/_media-queries.scss b/client/scss/_media-queries.scss index a36e85ac..638d4b67 100644 --- a/client/scss/_media-queries.scss +++ b/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 ) { - - 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: $break-point-medium) { } -@media (max-width: 360px) { - - body, button, input, textarea, label, select, option, p, h3, .fine-print { - font-size: x-small; - } - - .text--pull-quote, .button--large { - font-size: small; - } +@media (max-width: $break-point-small) { + +} + +@media (max-width: $break-point-x-small ) { } diff --git a/client/scss/_text.scss b/client/scss/_text.scss index 4f97a1cc..cec1c28e 100644 --- a/client/scss/_text.scss +++ b/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; + } + +} diff --git a/client/scss/_variables.scss b/client/scss/_variables.scss index c6826737..2716def5 100644 --- a/client/scss/_variables.scss +++ b/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; + diff --git a/client/scss/components/_horizontal-split.scss b/client/scss/components/_horizontal-split.scss index 01cbfc7b..bd304c3c 100644 --- a/client/scss/components/_horizontal-split.scss +++ b/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; + } + }; + +} diff --git a/client/scss/components/_label.scss b/client/scss/components/_label.scss index 33d22c12..a801c8b6 100644 --- a/client/scss/components/_label.scss +++ b/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; + } + +} diff --git a/client/scss/components/_nav-bar.scss b/client/scss/components/_nav-bar.scss index 3c685c0d..e61211bf 100644 --- a/client/scss/components/_nav-bar.scss +++ b/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; + } +} diff --git a/client/scss/components/_row.scss b/client/scss/components/_row.scss index cdefc403..3b731ac0 100644 --- a/client/scss/components/_row.scss +++ b/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%; + } + +}