novoland-developer-networks/OfficialSite
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add larger media queries, add font-size media queries on html

Browse Source
This commit is contained in:
Antoine Boulanger
2018-03-28 10:17:20 -04:00
parent 33c6442bdf
commit 84a60a7670
2 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
assets/styles/base/_page.scss
View File

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

30
assets/styles/settings/_config.scss
View File

@@ -52,15 +52,21 @@ $padding: $unit;
// Breakpoints
// =============================================================================
$from-tiny: 500px !default;
$to-tiny: $from-tiny - 1 !default;
$from-small: 700px !default;
$to-small: $from-small - 1 !default;
$from-medium: 1000px !default;
$to-medium: $from-medium - 1 !default;
$from-large: 1200px !default;
$to-large: $from-large - 1 !default;
$from-big: 1400px !default;
$to-big: $from-big - 1 !default;
$from-huge: 1600px !default;
$to-huge: $from-huge - 1 !default;
$from-tiny: 500px !default;
$to-tiny: $from-tiny - 1 !default;
$from-small: 700px !default;
$to-small: $from-small - 1 !default;
$from-medium: 1000px !default;
$to-medium: $from-medium - 1 !default;
$from-large: 1200px !default;
$to-large: $from-large - 1 !default;
$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;