dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

maps for font-sizes

Browse source
This commit is contained in:
Raphael Goetter 2017-10-30 18:23:28 +01:00
parent 2862bbff9c
commit e5f4647542
4 changed files with 39 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/knacss-unminified.css
View file

@ -437,7 +437,7 @@ h2, .h2-like {
@media (min-width: 576px) { @media (min-width: 576px) {
h2, .h2-like { h2, .h2-like {
font-size: 2.8rem; font-size: 3.8rem;
} }
} }

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

28
sass/_config/_mixins.scss
View file

@ -1,29 +1,13 @@
// font-size Mixin // font-size Mixin
// compiles to font-size-s + font-size-base on small-plus devices // compiles to font-size mobile + font-size desktop on small-plus devices
// ex. h2 { @include font-size(h2);} // ex. h2 { @include font-size(h2);}
$font-sizes: (
base-size : $font-size-base,
base-size-s: $font-size-s,
h1-size : $h1-size,
h1-size-s : $h1-size-s,
h2-size : $h2-size,
h2-size-s : $h2-size-s,
h3-size : $h3-size,
h3-size-s : $h3-size-s,
h4-size : $h4-size,
h4-size-s : $h4-size-s,
h5-size : $h5-size,
h5-size-s : $h5-size-s,
h6-size : $h6-size,
h6-size-s : $h6-size-s
) !default;
@mixin font-size($elem) { @mixin font-size($elem) {
$base-size: #{$elem}-size; $q: map-get($font-sizes, $elem);
$small-size: #{$elem}-size-s; $mob: map-get($q, "mobile");
font-size: map-get($font-sizes, $small-size); $desk: map-get($q, "desktop");
font-size: $mob;
@include respond-to("small-up") { @include respond-to("small-up") {
font-size: map-get($font-sizes, $base-size); font-size: $desk;
} }
} }

46
sass/_config/_variables.scss
View file

@ -15,22 +15,38 @@ $font-family-headings : sans-serif; // font for h1, h2.. h6
$font-family-monospace : consolas, courier, monospace; // font for code and samples $font-family-monospace : consolas, courier, monospace; // font for code and samples
// font sizes (1.6rem value is "16px" equivalent) // font sizes (1.6rem value is "16px" equivalent)
$font-size-base : 1.6rem !default; $font-size-base : 1.6rem;
$h1-size : 3.2rem !default;
$h2-size : 2.8rem !default;
$h3-size : 2.4rem !default;
$h4-size : 2.0rem !default;
$h5-size : 1.8rem !default;
$h6-size : 1.6rem !default;
// alternate font sizes $font-sizes: (
$font-size-s : 1.4rem !default; base: (
$h1-size-s : 2.8rem !default; mobile : 1.4rem,
$h2-size-s : 2.4rem !default; desktop : $font-size-base
$h3-size-s : 2.0rem !default; ),
$h4-size-s : 1.8rem !default; h1: (
$h5-size-s : 1.6rem !default; mobile : 2.8rem,
$h6-size-s : 1.4rem !default; desktop : 3.2rem
),
h2: (
mobile : 2.4rem,
desktop : 3.8rem
),
h3: (
mobile : 2.0rem,
desktop : 2.4rem
),
h4: (
mobile : 1.8rem,
desktop : 2.0rem
),
h5: (
mobile : 1.6rem,
desktop : 1.8rem
),
h6: (
mobile : 1.4rem,
desktop : 1.6rem
)
) !default;
// line heights // line heights
$line-height-s : 1.3 !default; $line-height-s : 1.3 !default;