Created
October 18, 2017 13:36
-
-
Save jmackie/d6a521b54559ca8f2a722def473aef46 to your computer and use it in GitHub Desktop.
Paper-like formatting for HTML documents.
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
| /* ==================================== | |
| * sheets.css | |
| * Author: Jordan Mackie | |
| * License: none (public domain) | |
| * | |
| * | |
| * USAGE | |
| * ----- | |
| * | |
| * <body class="sheets" size="A4"> | |
| * <div class="sheet"> | |
| * <h1>Page One</h1> | |
| * </div> | |
| * | |
| * <div class="sheet"> | |
| * <h1>Page Two</h1> | |
| * </div> | |
| * </body> | |
| * | |
| * ==================================== */ | |
| /* Basic resets, you should probably add more... */ | |
| @page { margin: 0; } | |
| :root { box-sizing: border-box; } | |
| body { margin: 0; } | |
| .sheets[size='A3'] > .sheet { width: 297mm; height: 419mm; } | |
| .sheets[size='A4'] > .sheet { width: 210mm; height: 297mm; } | |
| .sheets[size='A5'] > .sheet { width: 148mm; height: 209mm; } | |
| .sheet { | |
| position: relative; | |
| background-color: #fff; | |
| overflow: hidden; | |
| page-break-after: always; | |
| } | |
| @media only screen { | |
| .sheets { background-color: #e0e0e0; } | |
| .sheet { | |
| margin: 10mm auto; | |
| box-shadow: 0 0 30px rgba(0, 0, 0, .5); | |
| } | |
| } | |
| @media only print { | |
| .sheets[size='A3'] { width: 297mm; } | |
| .sheets[size='A4'] { width: 210mm; } | |
| .sheets[size='A5'] { width: 148mm; } | |
| .sheet { margin: 0; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment