Add larger media queries, add font-size media queries on html
This commit is contained in:
@@ -17,9 +17,36 @@ html {
|
||||
overflow-y: scroll; /* [2] */
|
||||
min-height: 100%; /* [3] */
|
||||
color: $color;
|
||||
font-size: em($font-size, 16px); /* [1] */
|
||||
font-family: $font-family;
|
||||
line-height: $line-height; /* [1] */
|
||||
|
||||
@media (max-width: $to-small) {
|
||||
font-size: em(12px);
|
||||
}
|
||||
|
||||
@media (min-width: $from-small) and (max-width: $to-medium) {
|
||||
font-size: em(13px);
|
||||
}
|
||||
|
||||
@media (min-width: $from-medium) and (max-width: $to-large) {
|
||||
font-size: em(14px);
|
||||
}
|
||||
|
||||
@media (min-width: $from-large) and (max-width: $to-huge) {
|
||||
font-size: em($font-size); /* [1] */
|
||||
}
|
||||
|
||||
@media (min-width: $from-huge) and (max-width: $to-gigantic) {
|
||||
font-size: em(18px);
|
||||
}
|
||||
|
||||
@media (min-width: $from-gigantic) and (max-width: $to-colossal) {
|
||||
font-size: em(21px);
|
||||
}
|
||||
|
||||
@media (min-width: $from-colossal) {
|
||||
font-size: em(24px);
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
|
||||
@@ -64,3 +64,9 @@ $from-big: 1400px !default;
|
||||
$to-big: $from-big - 1 !default;
|
||||
$from-huge: 1600px !default;
|
||||
$to-huge: $from-huge - 1 !default;
|
||||
$from-enormous: 1800px !default;
|
||||
$to-enormous: $from-enormous - 1 !default;
|
||||
$from-gigantic: 2000px !default;
|
||||
$to-gigantic: $from-gigantic - 1 !default;
|
||||
$from-colossal: 2400px !default;
|
||||
$to-colossal: $from-colossal - 1 !default;
|
||||
|
||||
Reference in New Issue
Block a user