/* What this code does Page/text formatting - applies optimal length for desktop (approx. 70 characters) - applies optimal length for mobile (approx. 40 characters) Header Formatting - applies proportionate sizing for all headers across mobile devices Pullquote Formatting - applies responsive pullquote formatting Image Formatting - applies responsive image formatting How to implement the code (See CM Business Writing Blog) .page .image-left (left aligned image) .image-right (right aligned image) .pquote-left (left aligned pullquote) .pquote-right (right aligned pullquote) */ /* Page Formatting (line height, mobile responsive width, proportionate font sizing) */ html { font-size: 1em; } body { font-size: 100%; } body, h1, h2, h3, h4, h5, h6 { font-size-adjust: 0.5; } p { margin-bottom: 1.5em; } /* By changing margin-bottom of paragraphs (<p> elements), you change spacing after the paragraph */ .post { font-size: 1em; line-height: 1.5em; font-family: Helvetica; max-width: 40em; margin: auto; } /* By changing max-width of .post you change the maximum width (length) of each line of text. This helps avoid overly long lines. You can also change the alignment of the entire post by changing margin */ @media screen and (min-width: 43.75em) { .post { font-size: 1em; line-height: 1.5em; } } /* Heading Format (proportionate headers across mobile devices) */ /* Level 1 Headings*/ .post h1 { font-size: 2em; line-height: 1.25; } @media screen and (min-width: 43.75em) { h1 { font-size: 2.5em; line-height: 1.125; } } @media screen and (min-width: 56.25em) { h1 { font-size: 3em; line-height: 1.05; } } /* Level 2 Headings */ .post h2 { font-size: 1.625em; line-height: 1.15384615; } @media screen and (min-width: 43.75em) { h2 { font-size: 2em; line-height: 1.25; } } @media screen and (min-width: 56.25em) { h2 { font-size: 2.25em; line-height: 1.25; } } /* Level 3 Headings */ .post h3 { font-size: 1.375em; line-height: 1.13636364; } @media screen and (min-width: 43.75em) { h3 { font-size: 1.5em; line-height: 1.25; } } @media screen and (min-width: 56.25em) { h3 { font-size: 1.75em; line-height: 1.25; } } /* Level 4 Headings */ .post h4 { font-size: 1.125em; line-height: 1.11111111; } @media screen and (min-width: 43.75em) { h4 { line-height: 1.22222222; } } /* Pullquote Formatting */ .post blockquote, q { font-size: 1.25em; line-height: 1.25; margin: 0; } @media screen and (min-width: 43.75em) { blockquote, q { font-size: 1.5em; line-height: 1.45833333; } } .pquote-left { float: left; width: 12.5em; font-weight: bold; padding: .8125em; margin: 0 .8125em .8125em 0; } .pquote-right { float: right; width: 12.5em; font-weight: bold; padding: .8125em; margin: 0 .8125em .8125em 0; } /* By changing width of .pquote you change the width (length) of the pull quote. And you can toggle the bold formatting by deleting “font-weight:bold;” */ @media screen and (max-width:21em) { .pquote-right, .pquote-left { width: 100%; } } /* Image Formatting */ .image-right { float: right; width: 50%; margin: .9125em 0 .9125em .8125em; } .image-left { float: left; width: 50%; margin: .9125em .9125em .9125em 0; } /* Just like .pquote, you can change the width (length) of your images. @media screen and (max-width: 43.75em) { .image-right, .image-left { width: 100%; } } .