` element in my work and instead add text to `
` elements will not likely render the properties derived from `@mixin inter-body-text` unless applied directly to the `
` element. \n\n---\n\n### What it does\nProvides `@mixins` for the following classes:\n* CSS import for `Inter` font from Google's API\n* `html`: given a `10px` base font-size to better control all elements that use `rem` for sizing\n* `body`: given a `1.6rem` base font-size to ensure actual body font-sizing is readable / ideal\n* `h1` to `h6`\n\n### Mobile Adjustments\nThe `body`, and headers `h1` to `h4` have associated mobile versions. These are new `@mixins` which have the same name but include `-mobile` as suffix. \nEasiest way to use these (apart from programmatically detecting resizing in your app's framework) is to import the `breakpoints.scss` stylesheet to apply them in the same place that you apply the original `@mixins`. \n\nHere's an example of how one might set up their `styles.scss` (main SCSS file):\n```SCSS\n@import '~@riapacheco/yutes/main.scss'; // resets, smoothing, and utility shorthand classes access\n@import '~@riapacheco/yutes/breakpoints.scss'; // access breakpoint logic\n@import '~@riapacheco/yutes/inter-mixins.scss'; // new sizing/adjustments for \"Inter\" font\n\nhtml {\n @include inter-html-text;\n}\n\nbody {\n @include inter-body-text;\n @include if-viewport(small) { @include inter-body-text-mobile; }\n}\n\nh1 {\n @include inter-h1;\n @include if-viewport(small) { @include inter-h1-mobile; }\n}\n\n// and so on and so forth -- EXCLUDING h5 and h6 for mobile versions\n\n```","readmeFilename":"readme.md"}