diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/screen.css | 379 | ||||
| -rw-r--r-- | css/screen2.css | 455 |
2 files changed, 834 insertions, 0 deletions
diff --git a/css/screen.css b/css/screen.css new file mode 100644 index 0000000..a337aa4 --- /dev/null +++ b/css/screen.css @@ -0,0 +1,379 @@ +/* HTML5 ✰ Boilerplate—html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) */ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, +del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, +b, i, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin:0; + padding:0; + border:0; + outline:0; + font-size:100%; + vertical-align:baseline; + background:transparent; +} +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display:block; +} +article:after,aside:after,div:after,form:after,header:after,hgroup:after,nav:after,section:after,ul:after,ol:after{ + clear:both; + content:"."; + display:block; + height:0; + visibility:hidden; +} +nav ul { list-style:none; } +blockquote, q { quotes:none; } +blockquote:before, blockquote:after, +q:before, q:after { content:''; content:none; } +a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } +ins { background-color:#ff9; color:#000; text-decoration:none; } +mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } +del { text-decoration: line-through; } +abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } +table { border-collapse:collapse; border-spacing:0; } +hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } +input, select { vertical-align:middle; } +/* END RESET CSS */ + +/* BASIC STYLING */ +body { font:1em/1.5 sans-serif; } +select, input, textarea, button { font:99% sans-serif; } +pre, code, kbd, samp { font-family: monospace, sans-serif; } +h1,h2,h3,h4,h5,h6 { font-weight: bold; } +h1 {font-size:3em;} +h2 {font-size:2.25em;} +h3 {font-size:1.3125em;} +h4 {font-size:1em} +h5 {font-size:0.875em;;} +h6 {font-size:0.75em;;} +html { overflow-y: scroll; } +a:hover, a:active { outline: none; } +a, a:active, a:visited { color: #8fbbcc; text-decoration:none;position:relative;} +a:hover { + color: #64c2e8; + -moz-transition: all 0.25s ease-out; + -o-transition: all 0.25s ease-out; + -webkit-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +p a:hover { + color: #64c2e8; + text-shadow:#4c4a47 1px 1px 0, #4c4a47 2px 2px 0, #4c4a47 3px 3px 0; + top:-3px; + left:-3px; + -moz-transition: all 0.25s ease-out; + -o-transition: all 0.25s ease-out; + -webkit-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +.ie a:hover { + left:0; + top:0; + text-decoration:underline; +} +ul, ol { margin-left: 2em; } +ol { list-style-type: decimal;} +nav ul, nav li { margin: 0; list-style-type:none;} +small { font-size: 85%; } +strong, th { font-weight: bold; } +td, td img { vertical-align: top; } +sub, sup { font-size: 75%; line-height: 0; position: relative; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } +pre { + padding: 15px; + white-space: pre; + white-space: pre-wrap; + white-space: pre-line; + word-wrap: break-word; +} +textarea { overflow: auto; } +.ie6 legend, .ie7 legend { margin-left: -7px; } +input[type="radio"] { vertical-align: text-bottom; } +input[type="checkbox"] { vertical-align: bottom; } +.ie7 input[type="checkbox"] { vertical-align: baseline; } +.ie6 input { vertical-align: text-bottom; } +label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } +button, input, select, textarea { margin: 0; } +/* colors for form validity */ +input:valid, textarea:valid { } +input:invalid, textarea:invalid { + border-radius: 1px; + -moz-box-shadow: 0px 0px 5px red; + -webkit-box-shadow: 0px 0px 5px red; + box-shadow: 0px 0px 5px red; +} + +/*::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } +::selection { background:#FF5E99; color:#fff; text-shadow: none; }*/ +a:link { -webkit-tap-highlight-color: #FF5E99; } +button { width: auto; overflow: visible; } +.ie7 img { -ms-interpolation-mode: bicubic; } +.clear {clear:both;display:block;} +.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } +.clearfix:after { clear: both; } +.clearfix { zoom: 1; } + +/* Primary Styles | Author: Josh Brewer (twitter.com/jbrewer) */ +html {height:100%;} +body { + background:#2d2a27; + color:#cabfac; + color:rgba(202,191,171,1); + font: normal 1em/1.5 "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Calibri, Arial, Helvetica, sans-serif; + height:100%; + width:100%; +} +span.horizon { + border-top:1px solid #423E39; + height:1px; + margin-left:0; + + position:absolute; +} +span.rising {width:100%; margin-top:10.5em;} +span.setting {width:52em; margin-top:2.5em;margin-left:-22em;} +#main { + border-left: 1px solid #423e39; + margin:0 0 0 4em; + padding:3em 0 0 7em; + position:relative; +} + +.content { + max-width:32em; + position:relative; +} +hgroup { + background:url(../images/brand.png) no-repeat 0 0; + display: block; + direction: ltr; + margin:0 0 5em -4.5625em; + overflow: hidden; + text-align: left; + text-indent: -999em; + height:80px; + width:409px; +} + +/* Really wish H&FJ webfonts were available… but they're not. Image replacement it is. +.brave { + background: #2d2a27; + color:#fef1d8; + font-size:1.05em; + left:30em; + line-height:1; + position:absolute; + text-transform:uppercase; + top:3.85em; + height: 170px; + width: 170px; + -webkit-border-radius: 170px; + -moz-border-radius: 170px; + border-radius: 170px; + background-clip: padding-box; + z-index:100; +} +.brave:before { + content: ""; + background:#9b3d17; + position:absolute; + text-transform:uppercase; + left:10px; + top: 10px; + height:150px; + width: 150px; + -webkit-border-radius: 150px; + -moz-border-radius: 150px; + border-radius: 150px; + background-clip: padding-box; + z-index:-1; +}*/ +.brave { + background: #2d2a27 url(../images/bravenewworld.png) no-repeat 0 0; + color:#fef1d8; + font-size:1em; + left:27.75em; + line-height:1; + position:absolute; + top:1.5em; + height: 176px; + width: 176px; + z-index:100; +} +.brave i { + display:block; + text-indent:-9999em; +} + +hgroup + p, hgroup + p + p { + font-size: 1.3125em; + line-height:1.1429; + margin-bottom:1.5em; + max-width:25em; +} + +.bkmrklt { + font-size:1.3125em; + margin-bottom: 3em; + position:relative; +} +.bkmrklt a { + background:url(../images/bookmarklet-button.png) no-repeat 0 0; + border:0; + direction: ltr; + display:block; + overflow: hidden; + text-indent:-9999em; + text-align: left; + height:57px; + width:215px; +} +.bkmrklt a:hover { + border-bottom:0; +} +.bkmrklt span { + color:#eebe5f; + left: 11em; + letter-spacing:4px; + position: absolute; + text-transform:uppercase; + top: 0.95em; +} + +h3 { + margin:0 0 1em; +} +#main aside { + color:rgba(202,191,171,0.5); + font-size: 0.75em; + line-height: 1.7; + padding-top: .4em; + position: absolute; + right: -21.5em; + width: 16em; +} +#main ol { + margin:0 0 1.5em; +} +#main ol li { + margin-bottom:1em; +} + +#main ol + p { + background:url(../images/bang.png) no-repeat 3px 1px; + font-weight:bold; + padding-left:2em; + margin-left:-2em; +} +.ie #main ol.steps { + display:none; +} + + +footer { + margin:5em 0; +} +footer p {margin-bottom:2.5em;} +footer p a[href="http://twitter.com/jbrewer"], footer p a[href="http://twitter.com/shinypb"] { + border-bottom:0; + color:rgba(143,187,204,0.4); +} +footer p a span {color:rgba(143,187,204,1)} +footer p a[href="http://twitter.com/jbrewer"]:hover span, footer p a[href="http://twitter.com/shinypb"]:hover span { + color:#64c2e8; +} +footer .twitter-share-button { + position:relative; + top:5px; +} + + + + +/* media queries for responsive design */ +/* One-column - iPhone portrait and any 320px device */ +@media (max-width:640px){ + .container{ + width: 320px; + } + #secondary{ + margin-left: 15px; + } +} + +/* One-column - iPhone landscape */ +@media (orientation:landscape) and (min-width:321px) and (max-width:480px){ + /* + .container{ + width: 480px; + }*/ +} + +/* Two-column - iPad */ +@media (min-width:641px) and (max-width:960px){ + hgroup { + margin-bottom:10em; + } + +} + +/* 15" MacBook Pro */ +@media (min-width:1281px) and (max-width:1600px){ + .container{ + width: 1280px; + } +} + +/* 17" MacBook Pro, iMac */ +@media (min-width:1601px) and (max-width:1920px){ + .container{ + width: 1600px; + } +} + +/* HD */ +@media (min-width:1920px) and (max-width:2240px){ + .container{ + width: 1920px; + } +} + +@media all and (orientation:portrait) { + +} + +@media all and (orientation:landscape) { + +} + +/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) + consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ +@media screen and (max-device-width: 480px) { + +} + +/* print styles */ +@media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; + -ms-filter: none !important; } + a, a:visited { color: #444 !important; text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } + tr, img { page-break-inside: avoid; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } +}
\ No newline at end of file diff --git a/css/screen2.css b/css/screen2.css new file mode 100644 index 0000000..1878e8e --- /dev/null +++ b/css/screen2.css @@ -0,0 +1,455 @@ +/* HTML5 ✰ Boilerplate—html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) */ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, +del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, +b, i, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin:0; + padding:0; + border:0; + outline:0; + font-size:100%; + vertical-align:baseline; + background:transparent; +} +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display:block; +} +article:after,aside:after,div:after,form:after,header:after,hgroup:after,nav:after,section:after,ul:after,ol:after{ + clear:both; + content:"."; + display:block; + height:0; + visibility:hidden; +} +nav ul { list-style:none; } +blockquote, q { quotes:none; } +blockquote:before, blockquote:after, +q:before, q:after { content:''; content:none; } +a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } +ins { background-color:#ff9; color:#000; text-decoration:none; } +mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } +del { text-decoration: line-through; } +abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } +table { border-collapse:collapse; border-spacing:0; } +hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } +input, select { vertical-align:middle; } +/* END RESET CSS */ + +/* BASIC STYLING */ +body { font:1em/1.5 sans-serif; } +select, input, textarea, button { font:99% sans-serif; } +pre, code, kbd, samp { font-family: monospace, sans-serif; } +h1,h2,h3,h4,h5,h6 { font-weight: bold; } +h1 {font-size:3em;} +h2 {font-size:2.25em;} +h3 {font-size:1.3125em;} +h4 {font-size:1em} +h5 {font-size:0.875em;;} +h6 {font-size:0.75em;;} +html { overflow-y: scroll; } +a:hover, a:active { outline: none; } +a, a:active, a:visited { color: #8fbbcc; text-decoration:none;position:relative;} +a:hover { + color: #64c2e8; + -moz-transition: all 0.25s ease-out; + -o-transition: all 0.25s ease-out; + -webkit-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +p a:hover { + color: #64c2e8; + text-shadow:#4c4a47 1px 1px 0, #4c4a47 2px 2px 0, #4c4a47 3px 3px 0; + top:-3px; + left:-3px; + -moz-transition: all 0.25s ease-out; + -o-transition: all 0.25s ease-out; + -webkit-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +.ie a:hover { + left:0; + top:0; + text-decoration:underline; +} +ul, ol { margin-left: 2em; } +ol { list-style-type: decimal;} +nav ul, nav li { margin: 0; list-style-type:none;} +small { font-size: 85%; } +strong, th { font-weight: bold; } +td, td img { vertical-align: top; } +sub, sup { font-size: 75%; line-height: 0; position: relative; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } +pre { + padding: 15px; + white-space: pre; + white-space: pre-wrap; + white-space: pre-line; + word-wrap: break-word; +} +textarea { overflow: auto; } +.ie6 legend, .ie7 legend { margin-left: -7px; } +input[type="radio"] { vertical-align: text-bottom; } +input[type="checkbox"] { vertical-align: bottom; } +.ie7 input[type="checkbox"] { vertical-align: baseline; } +.ie6 input { vertical-align: text-bottom; } +label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } +button, input, select, textarea { margin: 0; } +/* colors for form validity */ +input:valid, textarea:valid { } +input:invalid, textarea:invalid { + border-radius: 1px; + -moz-box-shadow: 0px 0px 5px red; + -webkit-box-shadow: 0px 0px 5px red; + box-shadow: 0px 0px 5px red; +} + +/*::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } +::selection { background:#FF5E99; color:#fff; text-shadow: none; }*/ +a:link { -webkit-tap-highlight-color: #FF5E99; } +button { width: auto; overflow: visible; } +.ie7 img { -ms-interpolation-mode: bicubic; } +.clear {clear:both;display:block;} +.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } +.clearfix:after { clear: both; } +.clearfix { zoom: 1; } + +/* Primary Styles | Author: Josh Brewer (twitter.com/jbrewer) */ +html {height:100%;} +body { + background:#2d2a27; + color:#cabfac; + color:rgba(202,191,171,1); + font: normal 1em/1.5 "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Calibri, Arial, Helvetica, sans-serif; + height:100%; + width:100%; +} + +span.horizon { + border-top:1px solid #423E39; + height:1px; + margin-left:0; + position:absolute; +} +span.rising {width:100%; margin-top:15em;} +span.setting {width:100%; margin-top: -20em;} + +#main { + border: 1px solid #423e39; + border-width:0 1px; + margin:0 4em; + padding:3em 0 0 0; + position:relative; +} + +.content { + width:32em; + position:relative; + margin: 0 auto; +} +hgroup { + margin:0 0 12em 0; +} +hgroup h1 { + font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; + font-size:3.5em; + font-weight:200; + line-height:1; + margin-left:1.35em; + text-transform:uppercase; +} +.wf-inactive hgroup h1{ + letter-spacing:4px; +} + +hgroup h1:before { + content: "F"; + background:#fef1d8; + border:1px solid #2d2a27; + color:#2d2a27; + font-size:0.5em; + font-weight:200; + margin-right:0.5em; + padding-top:0.25em; + position:absolute; + text-align:center; + vertical-align:center; + top:0.1em; + left:0; + width:1.5em; + height:1.25em; + -moz-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; + -webkit-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; + -o-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; + box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; +} + + +hgroup h2 { + color:#eebe5f; + font-size:1.3125em; + font-weight:200; + letter-spacing:0.1em; + margin-top:0.5em; +} + +.brave { + background: #2d2a27; + color:#fef1d8; + font-size:1.05em; + left:8em; + line-height:1; + position:absolute; + text-transform:uppercase; + top:5.25em; + height: 7em; + width: 7em; + -webkit-border-radius: 7em; + -moz-border-radius: 7em; + border-radius: 7em; + background-clip: padding-box; + z-index:100; +} +.brave:before { + content: ""; + background:#9b3d17; + position:absolute; + text-transform:uppercase; + left:10px; + top: 10px; + height:6em; + width: 6em; + -webkit-border-radius: 6em; + -moz-border-radius: 6em; + border-radius: 6em; + background-clip: padding-box; + z-index:-1; +} +.brave i { + font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; + font-size:0.8125em; + font-style: normal; + font-weight: normal; + top: 2.25em; + position: relative; + width: 4em; + display: block; + left: 2.25em; +} + +hgroup + p { + font-size: 1.3125em; + line-height:1.1429; + margin-bottom:1.5em; + xwidth:24em; +} +hgroup + p strong { + line-height: 1.25; + font-size: 1.125em; +} +.wf-active hgroup + p strong { + line-height: 1.25; + font-size: 1.25em; +} + +hgroup + p + p { + font-size: 1.25em; + line-height:1.5; + margin-bottom:1.5em; +} +.smcap { + font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; + font-size:0.7em; + font-weight:200; + text-transform:uppercase; +} +.wf-inactive .smcap { + font-size:1em; +} + +.bkmrklt { + font-size:1.3125em; + margin:2em 0 3em; + position:relative; +} + +@-webkit-keyframes drag-me { + from { + top:0; + left:0; + } + to { + top:-20px; + left:30px; + } +} + +.bkmrklt a { + background: rgba(255, 255, 255, 0.1); + border: 1px solid #2D2A27; + color: #F0E4CC; + font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; + font-size: 1.125em; + padding: .5em 1em; + position:relative; + text-align:center; + text-transform: uppercase; + text-shadow:0 1px 1px #2D2A27; + z-index:100; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); + -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); + -o-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); + box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); +} +.bkmrklt a:hover { + -webkit-animation-name: drag-me; + -webkit-animation-duration: 2s; + -webkit-animation-timing-function: ease-in-out; +} +.bkmrklt a:after { + content: attr(data-drag); + display:none; +} +.bkmrklt a:hover:after { + background:rgba(0,0,0,0.8); + display:block; + position:absolute; + top:-3em; + left:30%; + padding:0.5em 1em; + font-family: "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Calibri, Arial, Helvetica, sans-serif; + font-size:0.5em; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.bkmrklt span { + color:#eebe5f; + font-size:0.9125em; + font-weight:200; + left: 11em; + letter-spacing:4px; + margin-left:0.5em; + text-transform:uppercase; +} + + +h3 { + margin:0 0 1.5em; +} +h3 a { + color:rgba(202,191,171,0.75); + font-weight:normal; + position:relative; + top:-4px; +} +#main ol { + margin:0; +} +#main ol li { + margin-bottom:1em; +} +#main ol li:last-child { + margin-bottom:0; +} +#main ol .note { + display:block; + font-size:0.8125em; + margin-top:1em; +} +#main aside { + color:rgba(202,191,171,0.5); + font-size: 0.75em; + line-height: 1.7; + margin:1em 0 4em; +} +aside strong { + margin-left:-8px; +} +#main aside + p { + background:url(../images/bang.png) no-repeat 3px 1px; + font-weight:bold; + padding-left:2em; + margin-left:-2em; +} +.ie #main ol.steps { + display:none; +} + + +footer { + margin:5em 0; +} +footer p {margin-bottom:2.5em;} +footer p a[href="http://twitter.com/jbrewer"], footer p a[href="http://twitter.com/shinypb"] { + border-bottom:0; + color:rgba(143,187,204,0.4); +} +footer p a span {color:rgba(143,187,204,1)} +footer p a[href="http://twitter.com/jbrewer"]:hover span, footer p a[href="http://twitter.com/shinypb"]:hover span { + color:#64c2e8; +} +footer .twitter-share-button { + position:relative; + top:5px; +} + +/* media queries for responsive design */ +/* One-column - iPhone portrait and any 320px device */ +@media (max-width:640px){ + body {font-size:85%;} + .typekit-badge {display:none !important;} + .content{ + width: 310px; + margin:0 auto; + } + #main { + border:0; + margin:0; + padding-top:2em; + } + .rising {margin-top:13em !important;} + .setting {margin-top:-22em !important;} + hgroup h1 {font-size:2.6em !important;} + hgroup h2 {font-size:1.2em;letter-spacing:none !important;} + .brave {left:5.25em;top:4.5em;} + hgroup + p strong {font-size:0.9em;} + .bkmrklt {text-align:center;} + .bkmrklt span {display:block;margin-top:1em;} + footer {font-size:95%;} +} + +/* iPad */ +@media (min-width:641px) and (max-width:960px){ + #main { + margin:0 2em; + } +} + +/* print styles */ +@media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; + -ms-filter: none !important; } + a, a:visited { color: #444 !important; text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } + tr, img { page-break-inside: avoid; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } +}
\ No newline at end of file |