/* marginarticlepaddingborder.css is leading */ $padding-left: $article-gutter; $padding-right: 8rem; * { box-sizing: border-box; } h1, h2 { color: $heading-color; } form h3, legend { font-size: 1rem; font-weight: bold; } .body { background: $background-color; box-shadow: 0 0 5px #aaa; height: 300px; display: inline-block; margin: 1rem; overflow-y: scroll; width: 300px; font: 10px/1.5 sans-serif; padding: 1rem; } ol, ul { padding-left: 0 } article, section, form, main > h1, body > nav > ul, body > header > a, .prevnext { clear: both; /* overflow: hidden; table th sticky doesn't work with overflow */ width: 90% } @media (max-width: 640px) { article, section, form, main > h1, body > nav > ul, body > header > a, .prevnext { width: 100% } } @media (min-width: 1300px) { article, section, main > h1, body > nav > ul, body > header > a, .prevnext { width: 1280px } } article > p, section > p { padding-right: 33% } /* good enough for now, but ideal would be to use html, body for this so we can have styled pages without any markup like main, article etc) Also take better advantage of cascading by defining markupless entirely, then combinations of main and article (but preferablly without styling main for very old browsers) Notice that IE9 and less we have no styling at all (which is better then fushizzled styling) because it doesn't recognize article etc tags */ .home h1, main h2, article h1 { margin-bottom: 0 } article > p:first-child, section > p:first-child { padding-top: 1rem; padding-top: $article-gutter; } article, section, body > nav > ul, .prevnext { margin: 0 auto; } article, section { background: $body-color; padding: 0rem $article-gutter $article-gutter $article-gutter } section h1, section h2, article h1, article h2 { margin-left: -1rem !important; margin-right: -1rem !important; padding-left: 1rem } h1, h2 { padding-right: 3rem; padding-right: $padding-right; margin-bottom: 0; margin-top: 0 } h1 { margin: 0 auto; padding-left: 1rem; padding-right: 1rem } article h1 { padding: 95px 3rem 1rem 0rem; padding: 95px 0 0 1rem; /* margin-left: 0; margin-right: 0 */ } header { padding: 0 1rem /* TODO or percentage width? needed at all? */ } /* outstanding elements that are self reponsible for their padding and margins */ /* FIXME aside image not responsive for now */ article > figure, aside, section > a, section > figure, article header, article h1, section h1, form h1, .viewport { margin-left: -1rem; margin-right: -1rem } article > img { height: auto } object { margin-left: 0; margin-right: 0; width: 100%; } article h1, section h1, section h2 { background: $background-color } .wide { width: 100% }