Minimal-mistakes: Reduce posts font size using _variables.scss

Created on 1 Jun 2017  路  3Comments  路  Source: mmistakes/minimal-mistakes

Hi,

I'm trying to reduce the font size on my posts items using _variables.scss but it not applied properly. For me the font is too high.

image

Detailled Screenshot

I've used this settings to review the change, but nothing happen on my posts items. The font it's still the same size (too big for me)

/* type scale */
$type-size-1                : 0.50em !default;  // ~39.056px
$type-size-2                : 0.50em !default;  // ~31.248px
$type-size-3                : 0.50em !default;  // ~25.008px
$type-size-4                : 0.50em !default;  // ~20px
$type-size-5                : 0.50em !default;  // ~16px
$type-size-6                : 0.50em !default;  // ~12px
$type-size-7                : 0.50em !default;  // ~11px
$type-size-8                : 0.50em !default;  // ~10px

I've also tried to change $doc-font-size to 10

I've tried to :
bundle exec jekyll clean
bundle exec jekyll build

Without success yet. The font does not change in matters of size.

Maybe I made a minimal mistake :)

Thanks for your help.

  • [X] This is a question about using the theme.
  • [ ] This is a feature request.
  • [X] I have updated all gems with bundle update.
  • [X] I have tested locally with bundle exec jekyll build.

    - [ ] I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.

Environment informations

  • Minimal Mistakes version: 4.4.1
  • jekyll gem version:
  • Operating system: macOS

Support

Most helpful comment

See these lines in _reset.scss. I'd leave the variable font sizes alone and instead adjust the sizes in the reset. The theme scales the font sizes up/down globally depending on the width of the screen.

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 16px;

  @include breakpoint($medium) {
    font-size: 18px;
  }

  @include breakpoint($large) {
    font-size: 20px;
  }

  @include breakpoint($x-large) {
    font-size: 22px;
  }
}

All 3 comments

See these lines in _reset.scss. I'd leave the variable font sizes alone and instead adjust the sizes in the reset. The theme scales the font sizes up/down globally depending on the width of the screen.

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 16px;

  @include breakpoint($medium) {
    font-size: 18px;
  }

  @include breakpoint($large) {
    font-size: 20px;
  }

  @include breakpoint($x-large) {
    font-size: 22px;
  }
}

Hi @mmistakes ,

It's working, thanks a lot.

perfect!!!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alkamid picture alkamid  路  4Comments

justinrummel picture justinrummel  路  3Comments

deepaksood619 picture deepaksood619  路  5Comments

halirutan picture halirutan  路  4Comments

adinriv picture adinriv  路  3Comments