$base_font_size is overriden in _media-queries.scss

[dgmstuart]

Similarly to https://github.com/johnotander/pixyll/issues/196 - there's a variable in _variables.scss for $base_font_size (14px by default), but this is overriden in _media-queries.scss:

@media screen and (min-width: $viewport-large) {     
  html {                                             
    font-size: 20px;                                 
  }                                                  
}  

I'm guessing this should be expressed in terms of the $base_font_size - e.g 1.5rem for simplicity (21px) or 1.4286rem for exactness (20.0004px)

[dgmstuart]

Actually this won't work, since the $base_font_size is also set on the html element. Perhaps a better approach would be to have $base_font_size set on html and to have the media queries modify it by applying rem to body?

[dgmstuart]

Actually that won't work either since p etc. are defined in terms of rem. Perhaps the solution is some sass math:

@media screen and (min-width: $viewport-large) {     
  html {                                             
    font-size: $base-font-size * 20/14;                                 
  }                                                  
}  

That preserves the right relative sizes while letting the base size be configured through _variables.scss

[WilliamSGodfrey]

@dgmstuart ,

Thanks, that was exactly what I was looking for. I like your sass math solution, it worked good enough for me.

Note, that I think you'll also want to change the @media screen and (min-width: $viewport-small) {... and @media screen and (min-width: $viewport-medium) {... to:

@media screen and (min-width: $viewport-small) {
  html {
    font-size: $base-font-size * 16/14;
  }

and

@media screen and (min-width: $viewport-medium) {
  html {
    font-size: $base-font-size * 18/14;
  }
}

This enabled my _variables.scss changes to make it through.

[dgmstuart]

Cool - glad you could sort it :)

On 1 Feb 2016, 01:45 +0000, Will Godfreynotifications@github.com, wrote:

@dgmstuart(https://github.com/dgmstuart),

Thanks, that was exactly what I was looking for. I like your sass math solution, it worked good enough for me.

Note, that I think you'll also want to change the@media screen and (min-width: $viewport-small) {...and@media screen and (min-width: $viewport-medium) {...to:

@media screenand (min-width:$viewport-small) {html{font-size:$base-font-size*16/14; }

and

@media screenand (min-width:$viewport-medium) {html{font-size:$base-font-size*18/14; } }

This enabled my_variables.scsschanges to make it through.

—
Reply to this email directly orview it on GitHub(https://github.com/johnotander/pixyll/issues/264#issuecomment-177692898).