LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

added breakpoints for nav bar

Browse source
This commit is contained in:
bill bittner 2018-06-10 16:07:15 -07:00
parent 5b0e463cf6
commit bfc498402c
7 changed files with 193 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
client/scss/_media-queries.scss
View file

@ -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 ) {
}

114
client/scss/_text.scss
View file

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

15
client/scss/_variables.scss
View file

@ -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;

19
client/scss/components/_horizontal-split.scss
View file

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

9
client/scss/components/_label.scss
View file

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

18
client/scss/components/_nav-bar.scss
View file

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

16
client/scss/components/_row.scss
View file

@ -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%;
}
}