diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/reset.css | 30 | ||||
| -rw-r--r-- | css/reveal.css | 102 | ||||
| -rw-r--r-- | css/reveal.scss | 107 | ||||
| -rw-r--r-- | css/theme/template/settings.scss | 4 | ||||
| -rw-r--r-- | css/theme/template/theme.scss | 4 |
5 files changed, 113 insertions, 134 deletions
diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..e238539 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,30 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v4.0 | 20180602 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +main, menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, main, menu, nav, section { + display: block; +}
\ No newline at end of file diff --git a/css/reveal.css b/css/reveal.css index eda311e..4a9c604 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -6,33 +6,6 @@ * Copyright (C) 2018 Hakim El Hattab, http://hakim.se */ /********************************************* - * RESET STYLES - *********************************************/ -html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe, -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre, -.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code, -.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp, -.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var, -.reveal b, .reveal u, .reveal center, -.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li, -.reveal fieldset, .reveal form, .reveal label, .reveal legend, -.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td, -.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed, -.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup, -.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary, -.reveal time, .reveal mark, .reveal audio, .reveal video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; } - -.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure, -.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section { - display: block; } - -/********************************************* * GLOBAL STYLES *********************************************/ html, @@ -44,6 +17,7 @@ body { body { position: relative; line-height: 1; + margin: 0; background-color: #fff; color: #000; } @@ -512,7 +486,8 @@ body { perspective-origin: 50% 40%; } .reveal .slides > section { - -ms-perspective: 600px; } + -webkit-perspective: 600px; + perspective: 600px; } .reveal .slides > section, .reveal .slides > section > section { @@ -989,34 +964,35 @@ body { .no-transforms { overflow-y: auto; } +.no-transforms .reveal { + overflow: visible; } + .no-transforms .reveal .slides { position: relative; width: 80%; - height: auto !important; + max-width: 1280px; + height: auto; top: 0; - left: 50%; - margin: 0; + margin: 0 auto; text-align: center; } .no-transforms .reveal .controls, .no-transforms .reveal .progress { - display: none !important; } + display: none; } .no-transforms .reveal .slides section { - display: block !important; - opacity: 1 !important; - position: relative !important; + display: block; + opacity: 1; + position: relative; height: auto; min-height: 0; top: 0; - left: -50%; + left: 0; + margin: 10vh 0; margin: 70px 0; -webkit-transform: none; transform: none; } -.no-transforms .reveal .slides section section { - left: 0; } - .reveal .no-transition, .reveal .no-transition * { transition: none !important; } @@ -1294,9 +1270,9 @@ body { transition-duration: 1200ms; } /********************************************* - * LINK PREVIEW OVERLAY + * OVERLAY FOR LINK PREVIEWS AND HELP *********************************************/ -.reveal .overlay { +.reveal > .overlay { position: absolute; top: 0; left: 0; @@ -1308,11 +1284,11 @@ body { visibility: hidden; transition: all 0.3s ease; } -.reveal .overlay.visible { +.reveal > .overlay.visible { opacity: 1; visibility: visible; } -.reveal .overlay .spinner { +.reveal > .overlay .spinner { position: absolute; display: block; top: 50%; @@ -1326,7 +1302,7 @@ body { opacity: 0.6; transition: all 0.3s ease; } -.reveal .overlay header { +.reveal > .overlay header { position: absolute; left: 0; top: 0; @@ -1335,7 +1311,7 @@ body { z-index: 2; border-bottom: 1px solid #222; } -.reveal .overlay header a { +.reveal > .overlay header a { display: inline-block; width: 40px; height: 40px; @@ -1345,10 +1321,10 @@ body { opacity: 0.6; box-sizing: border-box; } -.reveal .overlay header a:hover { +.reveal > .overlay header a:hover { opacity: 1; } -.reveal .overlay header a .icon { +.reveal > .overlay header a .icon { display: inline-block; width: 20px; height: 20px; @@ -1356,13 +1332,13 @@ body { background-size: 100%; background-repeat: no-repeat; } -.reveal .overlay header a.close .icon { +.reveal > .overlay header a.close .icon { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); } -.reveal .overlay header a.external .icon { +.reveal > .overlay header a.external .icon { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); } -.reveal .overlay .viewport { +.reveal > .overlay .viewport { position: absolute; display: -webkit-box; display: -ms-flexbox; @@ -1372,7 +1348,7 @@ body { bottom: 0; left: 0; } -.reveal .overlay.overlay-preview .viewport iframe { +.reveal > .overlay.overlay-preview .viewport iframe { width: 100%; height: 100%; max-width: 100%; @@ -1382,11 +1358,11 @@ body { visibility: hidden; transition: all 0.3s ease; } -.reveal .overlay.overlay-preview.loaded .viewport iframe { +.reveal > .overlay.overlay-preview.loaded .viewport iframe { opacity: 1; visibility: visible; } -.reveal .overlay.overlay-preview.loaded .viewport-inner { +.reveal > .overlay.overlay-preview.loaded .viewport-inner { position: absolute; z-index: -1; left: 0; @@ -1395,46 +1371,46 @@ body { text-align: center; letter-spacing: normal; } -.reveal .overlay.overlay-preview .x-frame-error { +.reveal > .overlay.overlay-preview .x-frame-error { opacity: 0; transition: opacity 0.3s ease 0.3s; } -.reveal .overlay.overlay-preview.loaded .x-frame-error { +.reveal > .overlay.overlay-preview.loaded .x-frame-error { opacity: 1; } -.reveal .overlay.overlay-preview.loaded .spinner { +.reveal > .overlay.overlay-preview.loaded .spinner { opacity: 0; visibility: hidden; -webkit-transform: scale(0.2); transform: scale(0.2); } -.reveal .overlay.overlay-help .viewport { +.reveal > .overlay.overlay-help .viewport { overflow: auto; color: #fff; } -.reveal .overlay.overlay-help .viewport .viewport-inner { +.reveal > .overlay.overlay-help .viewport .viewport-inner { width: 600px; margin: auto; padding: 20px 20px 80px 20px; text-align: center; letter-spacing: normal; } -.reveal .overlay.overlay-help .viewport .viewport-inner .title { +.reveal > .overlay.overlay-help .viewport .viewport-inner .title { font-size: 20px; } -.reveal .overlay.overlay-help .viewport .viewport-inner table { +.reveal > .overlay.overlay-help .viewport .viewport-inner table { border: 1px solid #fff; border-collapse: collapse; font-size: 16px; } -.reveal .overlay.overlay-help .viewport .viewport-inner table th, -.reveal .overlay.overlay-help .viewport .viewport-inner table td { +.reveal > .overlay.overlay-help .viewport .viewport-inner table th, +.reveal > .overlay.overlay-help .viewport .viewport-inner table td { width: 200px; padding: 14px; border: 1px solid #fff; vertical-align: middle; } -.reveal .overlay.overlay-help .viewport .viewport-inner table th { +.reveal > .overlay.overlay-help .viewport .viewport-inner table th { padding-top: 20px; padding-bottom: 20px; } diff --git a/css/reveal.scss b/css/reveal.scss index e6608d4..63d1d45 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -8,37 +8,6 @@ /********************************************* - * RESET STYLES - *********************************************/ - -html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe, -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre, -.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code, -.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp, -.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var, -.reveal b, .reveal u, .reveal center, -.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li, -.reveal fieldset, .reveal form, .reveal label, .reveal legend, -.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td, -.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed, -.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup, -.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary, -.reveal time, .reveal mark, .reveal audio, .reveal video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure, -.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section { - display: block; -} - - -/********************************************* * GLOBAL STYLES *********************************************/ @@ -52,6 +21,7 @@ body { body { position: relative; line-height: 1; + margin: 0; background-color: #fff; color: #000; @@ -618,7 +588,7 @@ $controlsArrowAngleActive: 36deg; } .reveal .slides>section { - -ms-perspective: 600px; + perspective: 600px; } .reveal .slides>section, @@ -1067,37 +1037,38 @@ $controlsArrowAngleActive: 36deg; overflow-y: auto; } +.no-transforms .reveal { + overflow: visible; +} + .no-transforms .reveal .slides { position: relative; width: 80%; - height: auto !important; + max-width: 1280px; + height: auto; top: 0; - left: 50%; - margin: 0; + margin: 0 auto; text-align: center; } .no-transforms .reveal .controls, .no-transforms .reveal .progress { - display: none !important; + display: none; } .no-transforms .reveal .slides section { - display: block !important; - opacity: 1 !important; - position: relative !important; + display: block; + opacity: 1; + position: relative; height: auto; min-height: 0; top: 0; - left: -50%; + left: 0; + margin: 10vh 0; margin: 70px 0; transform: none; } -.no-transforms .reveal .slides section section { - left: 0; -} - .reveal .no-transition, .reveal .no-transition * { transition: none !important; @@ -1416,10 +1387,10 @@ $controlsArrowAngleActive: 36deg; /********************************************* - * LINK PREVIEW OVERLAY + * OVERLAY FOR LINK PREVIEWS AND HELP *********************************************/ -.reveal .overlay { +.reveal > .overlay { position: absolute; top: 0; left: 0; @@ -1431,12 +1402,12 @@ $controlsArrowAngleActive: 36deg; visibility: hidden; transition: all 0.3s ease; } - .reveal .overlay.visible { + .reveal > .overlay.visible { opacity: 1; visibility: visible; } - .reveal .overlay .spinner { + .reveal > .overlay .spinner { position: absolute; display: block; top: 50%; @@ -1452,7 +1423,7 @@ $controlsArrowAngleActive: 36deg; transition: all 0.3s ease; } - .reveal .overlay header { + .reveal > .overlay header { position: absolute; left: 0; top: 0; @@ -1461,7 +1432,7 @@ $controlsArrowAngleActive: 36deg; z-index: 2; border-bottom: 1px solid #222; } - .reveal .overlay header a { + .reveal > .overlay header a { display: inline-block; width: 40px; height: 40px; @@ -1472,10 +1443,10 @@ $controlsArrowAngleActive: 36deg; box-sizing: border-box; } - .reveal .overlay header a:hover { + .reveal > .overlay header a:hover { opacity: 1; } - .reveal .overlay header a .icon { + .reveal > .overlay header a .icon { display: inline-block; width: 20px; height: 20px; @@ -1484,14 +1455,14 @@ $controlsArrowAngleActive: 36deg; background-size: 100%; background-repeat: no-repeat; } - .reveal .overlay header a.close .icon { + .reveal > .overlay header a.close .icon { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); } - .reveal .overlay header a.external .icon { + .reveal > .overlay header a.external .icon { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); } - .reveal .overlay .viewport { + .reveal > .overlay .viewport { position: absolute; display: flex; top: 40px; @@ -1500,7 +1471,7 @@ $controlsArrowAngleActive: 36deg; left: 0; } - .reveal .overlay.overlay-preview .viewport iframe { + .reveal > .overlay.overlay-preview .viewport iframe { width: 100%; height: 100%; max-width: 100%; @@ -1512,12 +1483,12 @@ $controlsArrowAngleActive: 36deg; transition: all 0.3s ease; } - .reveal .overlay.overlay-preview.loaded .viewport iframe { + .reveal > .overlay.overlay-preview.loaded .viewport iframe { opacity: 1; visibility: visible; } - .reveal .overlay.overlay-preview.loaded .viewport-inner { + .reveal > .overlay.overlay-preview.loaded .viewport-inner { position: absolute; z-index: -1; left: 0; @@ -1526,26 +1497,26 @@ $controlsArrowAngleActive: 36deg; text-align: center; letter-spacing: normal; } - .reveal .overlay.overlay-preview .x-frame-error { + .reveal > .overlay.overlay-preview .x-frame-error { opacity: 0; transition: opacity 0.3s ease 0.3s; } - .reveal .overlay.overlay-preview.loaded .x-frame-error { + .reveal > .overlay.overlay-preview.loaded .x-frame-error { opacity: 1; } - .reveal .overlay.overlay-preview.loaded .spinner { + .reveal > .overlay.overlay-preview.loaded .spinner { opacity: 0; visibility: hidden; transform: scale(0.2); } - .reveal .overlay.overlay-help .viewport { + .reveal > .overlay.overlay-help .viewport { overflow: auto; color: #fff; } - .reveal .overlay.overlay-help .viewport .viewport-inner { + .reveal > .overlay.overlay-help .viewport .viewport-inner { width: 600px; margin: auto; padding: 20px 20px 80px 20px; @@ -1553,25 +1524,25 @@ $controlsArrowAngleActive: 36deg; letter-spacing: normal; } - .reveal .overlay.overlay-help .viewport .viewport-inner .title { + .reveal > .overlay.overlay-help .viewport .viewport-inner .title { font-size: 20px; } - .reveal .overlay.overlay-help .viewport .viewport-inner table { + .reveal > .overlay.overlay-help .viewport .viewport-inner table { border: 1px solid #fff; border-collapse: collapse; font-size: 16px; } - .reveal .overlay.overlay-help .viewport .viewport-inner table th, - .reveal .overlay.overlay-help .viewport .viewport-inner table td { + .reveal > .overlay.overlay-help .viewport .viewport-inner table th, + .reveal > .overlay.overlay-help .viewport .viewport-inner table td { width: 200px; padding: 14px; border: 1px solid #fff; vertical-align: middle; } - .reveal .overlay.overlay-help .viewport .viewport-inner table th { + .reveal > .overlay.overlay-help .viewport .viewport-inner table th { padding-top: 20px; padding-bottom: 20px; } diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss index 63c02cf..5a917f8 100644 --- a/css/theme/template/settings.scss +++ b/css/theme/template/settings.scss @@ -28,6 +28,8 @@ $heading2Size: 2.11em; $heading3Size: 1.55em; $heading4Size: 1.00em; +$codeFont: monospace; + // Links and actions $linkColor: #13DAEC; $linkColorHover: lighten( $linkColor, 20% ); @@ -40,4 +42,4 @@ $selectionColor: #fff; // to return a background image or gradient @mixin bodyBackground() { background: $backgroundColor; -}
\ No newline at end of file +} diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index a8f142d..215e2d4 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -162,7 +162,7 @@ body { text-align: left; font-size: 0.55em; - font-family: monospace; + font-family: $codeFont; line-height: 1.2em; word-wrap: break-word; @@ -171,7 +171,7 @@ body { } .reveal code { - font-family: monospace; + font-family: $codeFont; text-transform: none; } |