A Pen by Matthew Daniel Brown on CodePen.
Created
June 5, 2020 22:59
-
-
Save matt-daniel-brown/fde7f334957b6372767bbd88770ff1be to your computer and use it in GitHub Desktop.
wvMaBKM
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header role="banner"> | |
| <hgroup> | |
| <h1>Site Title</h1> | |
| <h2>Page Title or Site Subheader</h2> | |
| </hgroup> | |
| </header> | |
| <main role="main"> | |
| <section> | |
| <h3>Section Title</h3> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed iste architecto doloremque tempore! Dolore deserunt quasi iste, distinctio aut tempore animi adipisci nam doloremque hic doloribus? Sunt beatae cum quaerat!</p> | |
| </section> | |
| </main> | |
| <footer role="contentinfo"> | |
| <p>Copyright © 2020. All Rights Reserved</p> | |
| </footer> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $primary-color: #7100ff; | |
| .container { | |
| margin: 0 auto; | |
| width: 90%; | |
| max-width: 768px; | |
| } | |
| html { box-sizing: border-box !important; } | |
| *, *:before, *:after, *::before, *::after { | |
| box-sizing: inherit !important; | |
| // font-family: $system-fonts; | |
| // text-rendering: optimizeLegibility !important; | |
| // -webkit-font-smoothing: antialiased !important; | |
| // -moz-osx-font-smoothing: grayscale !important; | |
| } | |
| html { | |
| font-size: 21px; | |
| background: ghostwhite; | |
| } | |
| html, body { | |
| height: 100% !important; | |
| min-height: 100vh !important; | |
| width: 100vw !important; | |
| max-width: 100vw !important; | |
| min-width: 320px !important; | |
| overflow-x: hidden; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| position: relative; | |
| } | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| background: white; | |
| } | |
| body, p { | |
| // font-weight: 500; | |
| line-height: 1.5; | |
| font-size: 1em; | |
| } | |
| p { | |
| margin-bottom: 2em; | |
| } | |
| body > * > * { @extend .container; } | |
| [role=banner] { | |
| // background: ghostwhite; | |
| // background: whitesmoke; | |
| // background: $primary-color; | |
| // color: white !important; | |
| background: white; | |
| padding: 2em 0; | |
| h1, h2, h3, h4, h5, h6 { | |
| line-height: 1; | |
| margin: 1rem 0; | |
| } | |
| } | |
| [role=main] { | |
| background: white; | |
| padding: 1em 0; | |
| flex-grow: 1; | |
| section, article, div, aside { | |
| padding: 1em 0; | |
| margin-bottom: 2em; | |
| } | |
| } | |
| [role=contentinfo] { | |
| margin: 0; | |
| max-width: 100vw; | |
| text-align: center; | |
| font-size: small; | |
| padding: 2em 0; | |
| background: ghostwhite; | |
| p { | |
| line-height: 1; | |
| color: gray; | |
| font-weight: 500; | |
| margin: 0 auto; | |
| padding: 0; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.6.0/modern-normalize.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/mobi.css/3.1.1/mobi.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment