Not working for REM on media query

[djmtype]

If I define my scale like this:

$modularscale: (
  base: 1rem,
  ratio: 1.25,
  90rem: (
    base: 1.125rem,
    ratio: 1.333
  )
);

Everything defined within 90rem is ignored.

[scottkellum]

Thanks @djmtype, can you let me know what the CSS output is? Issue #166 may be related.

[scottkellum]

Also, you may be interested in Typetura.js for even more control over how your typography responds to its context 💁‍♂️

[djmtype]

@scottkellum The CSS output is that ignores the media query breakpoint I assigned, 90rem in this case, and falls back to the default modularscale ratio I set up: base 1rem, ratio 1.25

I may be facing the same issue as #166 . I thought by specifying the default settings, that would already be understood as 0(px), and therefore redundant. I'll post back after I test.

Thanks, but I was looking for something without JS. Having typography-related management in both CSS and JS seem silly, at least for this project as I need IE11 supported.

If all else fails, I'll just use the long method of variables or seek out as Sass map that makes this more concise:

$font-size: 1rem;
$ratio: 1.25;

$font-size-alt: 1.125rem;
$ratio-alt: 1.333;

$h5: $font-size;
$h4: $font-size * $ratio;
$h3: $h4 * $ratio;
$h2: $h3 * $ratio;
$h1: $h2 * $ratio;

$h5-alt: $font-size-alt;
$h4-alt: $h5-alt * $ratio-alt;
$h3-alt: $h4-alt * $ratio-alt;
$h2-alt: $h3-alt * $ratio-alt;
$h1-alt: $h2-alt * $ratio-alt;

Then, a mixin:

@mixin h1 {
  font-size: $h1;
  line-height: 1.1;
    @media (min-width: 90rem) {
      font-size: $h1;
    }
}
etc …

[djmtype]

@scottkellum Just tested with the following setup below, and it doesn't work either. I also tried using px equivalencies.

I'm getting the same issue as pointed out in issue #166. I'll close this out and focus further discussion on #166.

$modularscale: (
  base: 1rem,
  ratio: 1.25
  0rem: (
    base: 1rem,
    ratio: 1.25
  ),
  90rem: (
    base: 1.125rem,
    ratio: 1.333
  )
);

[scottkellum]

It’s working for me here. Looks like you’re missing a coma on the 3rd line after ratio: 1.25