Coder Social home page Coder Social logo

Comments (6)

mmistakes avatar mmistakes commented on May 19, 2024

Depends on if you want to change all font sizes globally or not. If you just want to make them all larger or smaller then you can try declaring a font-size on the body element in percentages.

For example to make all type 5% larger you'd do something like body { font-size: 105%; } and to make them all 5% smaller `body { font-size: 95%; }.

If you want to change specific elements then you'll need to change the size on them each. The $doc-font-size variable is really only used to calculate the font-size in rem's as part of a Sass mixin. I'm using that for browsers that support rem's and then a px font-size as a fallback.

from so-simple-theme.

mchelen avatar mchelen commented on May 19, 2024

I tried using body { font-size: 105%; } and larger percentages, but it didn't seem to have an affect on the fonts. The only thing that happened was the entry-wrapper div took up more space horizontally. I used Firebug to confirm the font-size style was being applied, and saw no change in the font size itself when toggling the style on and off.
It could be some issue with my system, but I tried in a few different browsers and had the same result. For reference, I tested using font-size: 200%; in the body {} section of _layout.scss.

from so-simple-theme.

mmistakes avatar mmistakes commented on May 19, 2024

I'd suggest changing each element individually then. The font-size mixin
should make it fairly trivial to update to whatever sizes you want.

On Monday, September 29, 2014, Mike Chelen [email protected] wrote:

I tried using body { font-size: 105%; } and larger percentages, but it
didn't seem to have an affect on the fonts. The only thing that happened
was the entry-wrapper div took up more space horizontally. I used Firebug
to confirm the font-size style was being applied, and saw no change in
the font size itself when toggling the style on and off.
It could be some issue with my system, but I tried in a few different
browsers and had the same result. For reference, I tested using font-size:
200%; in the body {} section of _layout.scss.


Reply to this email directly or view it on GitHub
#95 (comment)
.

from so-simple-theme.

mchelen avatar mchelen commented on May 19, 2024

Ok thanks, I might try making some variables like $font-small $font-medium $font-large to use in places like p and blockquote instead of hardcoded sizes, if that would be helpful for other users I could submit it as a PR.

from so-simple-theme.

mmistakes avatar mmistakes commented on May 19, 2024

Personally that's a bit oversimplified for my taste. I don't think I've ever seen typography handled like that. We're really only talking about a handful of elements that have their sizes defined as part of a typographic scale. Replacing them with a few variables really doesn't gain much I don't think.

from so-simple-theme.

mchelen avatar mchelen commented on May 19, 2024

Ok, that makes sense. If I think of any better way to handle it, I'll submit a PR.

from so-simple-theme.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.