This repository has been archived by the owner on Oct 9, 2020. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 8c95f55
Showing
38 changed files
with
4,954 additions
and
0 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| ###Slide deck on how to implement live browser reloading for easier front-end development. | ||
|
|
||
| Built with [reveal.js](http://lab.hakim.se/reveal-js/) by [Hakim](http://hakim.se) |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| /* Default Print Stylesheet Template | ||
| by Rob Glazebrook of CSSnewbie.com | ||
| Last Updated: June 4, 2008 | ||
| Feel free (nay, compelled) to edit, append, and | ||
| manipulate this file as you see fit. */ | ||
|
|
||
|
|
||
| /* SECTION 1: Set default width, margin, float, and | ||
| background. This prevents elements from extending | ||
| beyond the edge of the printed page, and prevents | ||
| unnecessary background images from printing */ | ||
| body { | ||
| background: #fff; | ||
| font-size: 13pt; | ||
| width: auto; | ||
| height: auto; | ||
| border: 0; | ||
| margin: 0 5%; | ||
| padding: 0; | ||
| float: none !important; | ||
| overflow: visible; | ||
| } | ||
| html { | ||
| background: #fff; | ||
| width: auto; | ||
| height: auto; | ||
| overflow: visible; | ||
| } | ||
|
|
||
| /* SECTION 2: Remove any elements not needed in print. | ||
| This would include navigation, ads, sidebars, etc. */ | ||
| .nestedarrow, | ||
| .controls, | ||
| .reveal .progress, | ||
| .reveal.overview, | ||
| .fork-reveal, | ||
| .share-reveal, | ||
| .state-background { | ||
| display: none !important; | ||
| } | ||
|
|
||
| /* SECTION 3: Set body font face, size, and color. | ||
| Consider using a serif font for readability. */ | ||
| body, p, td, li, div, a { | ||
| font-size: 16pt!important; | ||
| font-family: Georgia, "Times New Roman", Times, serif !important; | ||
| color: #000; | ||
| } | ||
|
|
||
| /* SECTION 4: Set heading font face, sizes, and color. | ||
| Diffrentiate your headings from your body text. | ||
| Perhaps use a large sans-serif for distinction. */ | ||
| h1,h2,h3,h4,h5,h6 { | ||
| color: #000!important; | ||
| height: auto; | ||
| line-height: normal; | ||
| font-family: Georgia, "Times New Roman", Times, serif !important; | ||
| text-shadow: 0 0 0 #000 !important; | ||
| text-align: left; | ||
| letter-spacing: normal; | ||
| } | ||
| /* Need to reduce the size of the fonts for printing */ | ||
| h1 { font-size: 26pt !important; } | ||
| h2 { font-size: 22pt !important; } | ||
| h3 { font-size: 20pt !important; } | ||
| h4 { font-size: 20pt !important; font-variant: small-caps; } | ||
| h5 { font-size: 19pt !important; } | ||
| h6 { font-size: 18pt !important; font-style: italic; } | ||
|
|
||
| /* SECTION 5: Make hyperlinks more usable. | ||
| Ensure links are underlined, and consider appending | ||
| the URL to the end of the link for usability. */ | ||
| a:link, | ||
| a:visited { | ||
| color: #000 !important; | ||
| font-weight: bold; | ||
| text-decoration: underline; | ||
| } | ||
| /* | ||
| .reveal a:link:after, | ||
| .reveal a:visited:after { | ||
| content: " (" attr(href) ") "; | ||
| color: #222 !important; | ||
| font-size: 90%; | ||
| } | ||
| */ | ||
|
|
||
|
|
||
| /* SECTION 6: more reveal.js specific additions by @skypanther */ | ||
| ul, ol, div, p { | ||
| visibility: visible; | ||
| position: static; | ||
| width: auto; | ||
| height: auto; | ||
| display: block; | ||
| overflow: visible; | ||
| margin: auto; | ||
| text-align: left !important; | ||
| } | ||
| .reveal .slides { | ||
| position: static; | ||
| width: auto; | ||
| height: auto; | ||
|
|
||
| left: auto; | ||
| top: auto; | ||
| margin-left: auto; | ||
| margin-top: auto; | ||
| padding: auto; | ||
|
|
||
| overflow: visible; | ||
| display: block; | ||
|
|
||
| text-align: center; | ||
| -webkit-perspective: none; | ||
| -moz-perspective: none; | ||
| -ms-perspective: none; | ||
| perspective: none; | ||
|
|
||
| -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ | ||
| -moz-perspective-origin: 50% 50%; | ||
| -ms-perspective-origin: 50% 50%; | ||
| perspective-origin: 50% 50%; | ||
| } | ||
| .reveal .slides>section, | ||
| .reveal .slides>section>section { | ||
|
|
||
| visibility: visible !important; | ||
| position: static !important; | ||
| width: 90% !important; | ||
| height: auto !important; | ||
| display: block !important; | ||
| overflow: visible !important; | ||
|
|
||
| left: 0% !important; | ||
| top: 0% !important; | ||
| margin-left: 0px !important; | ||
| margin-top: 0px !important; | ||
| padding: 20px 0px !important; | ||
|
|
||
| opacity: 1 !important; | ||
|
|
||
| -webkit-transform-style: flat !important; | ||
| -moz-transform-style: flat !important; | ||
| -ms-transform-style: flat !important; | ||
| transform-style: flat !important; | ||
|
|
||
| -webkit-transform: none !important; | ||
| -moz-transform: none !important; | ||
| -ms-transform: none !important; | ||
| transform: none !important; | ||
| } | ||
| .reveal section { | ||
| page-break-after: always !important; | ||
| display: block !important; | ||
| } | ||
| .reveal section .fragment { | ||
| opacity: 1 !important; | ||
| visibility: visible !important; | ||
|
|
||
| -webkit-transform: none !important; | ||
| -moz-transform: none !important; | ||
| -ms-transform: none !important; | ||
| transform: none !important; | ||
| } | ||
| .reveal section:last-of-type { | ||
| page-break-after: avoid !important; | ||
| } | ||
| .reveal section img { | ||
| display: block; | ||
| margin: 15px 0px; | ||
| background: rgba(255,255,255,1); | ||
| border: 1px solid #666; | ||
| box-shadow: none; | ||
| } |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| /* Default Print Stylesheet Template | ||
| by Rob Glazebrook of CSSnewbie.com | ||
| Last Updated: June 4, 2008 | ||
| Feel free (nay, compelled) to edit, append, and | ||
| manipulate this file as you see fit. */ | ||
|
|
||
|
|
||
| /* SECTION 1: Set default width, margin, float, and | ||
| background. This prevents elements from extending | ||
| beyond the edge of the printed page, and prevents | ||
| unnecessary background images from printing */ | ||
|
|
||
| * { | ||
| -webkit-print-color-adjust: exact; | ||
| } | ||
|
|
||
| body { | ||
| font-size: 18pt; | ||
| width: auto; | ||
| height: auto; | ||
| border: 0; | ||
| padding: 0; | ||
| float: none !important; | ||
| overflow: visible; | ||
| } | ||
|
|
||
| html { | ||
| width: 100%; | ||
| height: 100%; | ||
| overflow: visible; | ||
| } | ||
|
|
||
| @page { | ||
| size: letter landscape; | ||
| margin: 0; | ||
| } | ||
|
|
||
| /* SECTION 2: Remove any elements not needed in print. | ||
| This would include navigation, ads, sidebars, etc. */ | ||
| .nestedarrow, | ||
| .controls, | ||
| .reveal .progress, | ||
| .reveal.overview, | ||
| .fork-reveal, | ||
| .share-reveal, | ||
| .state-background { | ||
| display: none !important; | ||
| } | ||
|
|
||
| /* SECTION 3: Set body font face, size, and color. | ||
| Consider using a serif font for readability. */ | ||
| body, p, td, li, div { | ||
| font-size: 18pt; | ||
| } | ||
|
|
||
| /* SECTION 4: Set heading font face, sizes, and color. | ||
| Diffrentiate your headings from your body text. | ||
| Perhaps use a large sans-serif for distinction. */ | ||
| h1,h2,h3,h4,h5,h6 { | ||
| text-shadow: 0 0 0 #000 !important; | ||
| } | ||
|
|
||
| /* SECTION 5: Make hyperlinks more usable. | ||
| Ensure links are underlined, and consider appending | ||
| the URL to the end of the link for usability. */ | ||
| a:link, | ||
| a:visited { | ||
| font-weight: bold; | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
|
|
||
| /* SECTION 6: more reveal.js specific additions by @skypanther */ | ||
| ul, ol, div, p { | ||
| visibility: visible; | ||
| position: static; | ||
| width: auto; | ||
| height: auto; | ||
| display: block; | ||
| overflow: visible; | ||
| margin: auto; | ||
| } | ||
| .reveal .slides { | ||
| position: static; | ||
| width: 100%; | ||
| height: auto; | ||
|
|
||
| left: auto; | ||
| top: auto; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| margin-top: auto; | ||
| padding: auto; | ||
|
|
||
| overflow: visible; | ||
| display: block; | ||
|
|
||
| text-align: center; | ||
|
|
||
| -webkit-perspective: none; | ||
| -moz-perspective: none; | ||
| -ms-perspective: none; | ||
| perspective: none; | ||
|
|
||
| -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ | ||
| -moz-perspective-origin: 50% 50%; | ||
| -ms-perspective-origin: 50% 50%; | ||
| perspective-origin: 50% 50%; | ||
| } | ||
| .reveal .slides section { | ||
|
|
||
| page-break-after: always !important; | ||
|
|
||
| visibility: visible !important; | ||
| position: static !important; | ||
| width: 100% !important; | ||
| height: auto !important; | ||
| min-height: initial !important; | ||
| display: block !important; | ||
| overflow: visible !important; | ||
|
|
||
| left: 0 !important; | ||
| top: 0 !important; | ||
| margin-left: 0px !important; | ||
| margin-top: 50px !important; | ||
| padding: 20px 0px !important; | ||
|
|
||
| opacity: 1 !important; | ||
|
|
||
| -webkit-transform-style: flat !important; | ||
| -moz-transform-style: flat !important; | ||
| -ms-transform-style: flat !important; | ||
| transform-style: flat !important; | ||
|
|
||
| -webkit-transform: none !important; | ||
| -moz-transform: none !important; | ||
| -ms-transform: none !important; | ||
| transform: none !important; | ||
| } | ||
| .reveal section.stack { | ||
| margin: 0px !important; | ||
| padding: 0px !important; | ||
| page-break-after: avoid !important; | ||
| } | ||
| .reveal section .fragment { | ||
| opacity: 1 !important; | ||
| visibility: visible !important; | ||
|
|
||
| -webkit-transform: none !important; | ||
| -moz-transform: none !important; | ||
| -ms-transform: none !important; | ||
| transform: none !important; | ||
| } | ||
| .reveal img { | ||
| box-shadow: none; | ||
| } | ||
| .reveal .roll { | ||
| overflow: visible; | ||
| line-height: 1em; | ||
| } | ||
| .reveal small a { | ||
| font-size: 16pt !important; | ||
| } |
Oops, something went wrong.