UNPKG

@huntoreocodes/hunter-normalize

Version:

This is a simple css normalizer that combines the popular modern-normalize package with some extra css normalizations I am including.

85 lines (72 loc) 1.81 kB
/****************************************************** * * Made with the help of: * https://www.joshwcomeau.com/css/custom-css-reset/ * * Uses modern-normalize for the bulk: * https://github.com/sindresorhus/modern-normalize * NPM LINK: * https://www.npmjs.com/package/modern-normalize * * Permission for use was given by creators. ******************************************&&*********/ /* Handles the bulk of css normalization */ @import './modern-normalize.css'; /* Remove default padding and margins */ * { padding: 0; margin: 0; } /* The default height of 1.15 is less accessible and harder to read than 1.5 */ :root { line-height: 1.5; } /* Ensure the better box model is applied, while allowing tweaking if needed on elements. */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } /* This makes text rendering more readable on modern hardware. !!Only effects MacOS!! */ body { -webkit-font-smoothing: antialiased; } /* 1) Images by default are in-line. Typically when we want to use images, we want them to be there own block. 2) Ensures large images shrink to fit inside container. Relevant for high-dpi mobile screens. */ img { display: block; /* 1 */ max-inline-size: 100%; /* 2 */ } /* This prevents text from overflowing outside the container, by breaking a word to wrap onto a new line. */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* 1) This changes the text-wrapping for paragraphs to force a final line to contain at minimum 2 words. !!Not supported by all browsers!! 2) This makes the line wrap algorithm ensure each line of text is roughly the same length. */ p /* 1 */ { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 /* 2 */ { text-wrap: balance; }