From 25ad8adc68600ba9e77cbd7255a104c004126e21 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 8 Aug 2012 01:14:12 -0400 Subject: themes are now available as separate css files under css/theme/, old theme option in config is no longer supported (closes #104) --- css/main.css | 243 ++++++++++---------------------------------------- css/print-pdf.css | 158 -------------------------------- css/print.css | 170 ----------------------------------- css/print/paper.css | 170 +++++++++++++++++++++++++++++++++++ css/print/pdf.css | 158 ++++++++++++++++++++++++++++++++ css/reset.css | 57 ------------ css/theme/beige.css | 166 ++++++++++++++++++++++++++++++++++ css/theme/default.css | 169 +++++++++++++++++++++++++++++++++++ 8 files changed, 712 insertions(+), 579 deletions(-) delete mode 100644 css/print-pdf.css delete mode 100644 css/print.css create mode 100644 css/print/paper.css create mode 100644 css/print/pdf.css delete mode 100644 css/reset.css create mode 100644 css/theme/beige.css create mode 100644 css/theme/default.css (limited to 'css') diff --git a/css/main.css b/css/main.css index cae560f..c846c37 100644 --- a/css/main.css +++ b/css/main.css @@ -10,21 +10,33 @@ /********************************************* - * FONT-FACE DEFINITIONS + * RESET STYLES *********************************************/ -@font-face { - font-family: 'League Gothic'; - src: url('../lib/font/league_gothic-webfont.eot'); - src: url('../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), - url('../lib/font/league_gothic-webfont.woff') format('woff'), - url('../lib/font/league_gothic-webfont.ttf') format('truetype'), - url('../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); - font-weight: normal; - font-style: normal; +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, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} - font-weight: normal; - font-style: normal; +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; } @@ -32,7 +44,8 @@ * GLOBAL STYLES *********************************************/ -html, body { +html, +body { padding: 0; margin: 0; width: 100%; @@ -43,23 +56,7 @@ html, body { body { position: relative; - padding: 0; - margin: 0; - - font-family: 'Lato', Times, 'Times New Roman', serif; - font-size: 36px; - font-weight: 200; - letter-spacing: -0.02em; - color: #eee; - - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1NTVhNWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWMxZTIwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background-color: #2b2b2b; - background: -moz-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%, rgba(28,30,32,1) 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(85,90,95,1)), color-stop(100%,rgba(28,30,32,1))); - background: -webkit-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); - background: -o-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); - background: -ms-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); - background: radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); + line-height: 1; } @media screen and (max-width: 900px) { @@ -68,52 +65,21 @@ body { } } +::selection { + background:#FF5E99; + color:#fff; + text-shadow: none; +} + /********************************************* * HEADERS *********************************************/ -.reveal h1, -.reveal h2, -.reveal h3, -.reveal h4 { - margin: 0 0 20px 0; - - color: #eee; - - font-family: 'League Gothic', Impact, sans-serif; - line-height: 0.9em; - letter-spacing: 0.02em; - - text-transform: uppercase; - text-shadow: 0px 0px 6px rgba(0,0,0,0.2); -} -.reveal h1 { font-size: 3.77em; } +.reveal h1 { font-size: 3.77em; } .reveal h2 { font-size: 2.11em; } .reveal h3 { font-size: 1.55em; } .reveal h4 { font-size: 1em; } -.reveal h1.inverted, -.reveal h2.inverted, -.reveal h3.inverted, -.reveal h4.inverted { - color: #fff; - text-shadow: 0px 0px 2px rgba(0,0,0,0.2); -} - -.reveal h1 { - text-shadow: 0 1px 0 #ccc, - 0 2px 0 #c9c9c9, - 0 3px 0 #bbb, - 0 4px 0 #b9b9b9, - 0 5px 0 #aaa, - 0 6px 1px rgba(0,0,0,.1), - 0 0 5px rgba(0,0,0,.1), - 0 1px 3px rgba(0,0,0,.3), - 0 3px 5px rgba(0,0,0,.2), - 0 5px 10px rgba(0,0,0,.25), - 0 20px 20px rgba(0,0,0,.15); -} - /********************************************* * VIEW FRAGMENTS @@ -188,6 +154,11 @@ body { margin-bottom: 10px; } +.reveal q, +.reveal blockquote { + quotes: none; +} + .reveal blockquote { display: block; position: relative; @@ -206,6 +177,16 @@ body { content: '”'; } +.reveal q { + font-style: italic; +} + .reveal q:before { + content: '“'; + } + .reveal q:after { + content: '”'; + } + .reveal pre { display: block; position: relative; @@ -254,60 +235,6 @@ body { vertical-align: top; } -.reveal q { - font-style: italic; -} - .reveal q:before { - content: '“'; - } - .reveal q:after { - content: '”'; - } - -.reveal a:not(.image) { - color: hsl(185, 85%, 50%); - text-decoration: none; - - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; -} - - .reveal a:not(.image):hover { - color: hsl(185, 85%, 70%); - - text-shadow: none; - border: none; - border-radius: 2px; - } - -.reveal section img { - margin: 30px 0 0 0; - background: rgba(255,255,255,0.12); - border: 4px solid #eee; - - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; -} - - .reveal a:hover img { - background: rgba(255,255,255,0.2); - border-color: #13DAEC; - - -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); - } - /********************************************* * CONTROLS @@ -328,13 +255,9 @@ body { font-size: 0.83em; position: absolute; opacity: 0.1; - color: #fff; } .reveal .controls a.enabled { opacity: 0.6; - color: hsl(185, 85%, 70%); - - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); } .reveal .controls a.enabled:active { margin-top: 1px; @@ -356,7 +279,6 @@ body { .reveal .controls .down { left: 30px; top: 60px; - } @@ -371,13 +293,10 @@ body { width: 100%; bottom: 0; left: 0; - - background: rgba(0,0,0,0.2); } .reveal .progress span { display: block; - background: hsl(185, 85%, 50%); height: 100%; width: 0px; @@ -455,9 +374,6 @@ body { top: 0; padding: 0 2px; - color: #fff; - background: hsl(185, 60%, 35%); - -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; @@ -983,64 +899,3 @@ body { display: none; } - -/********************************************* - * NEON THEME - *********************************************/ - -.theme-neon .reveal a, -.theme-neon .reveal a:hover, -.theme-neon .reveal .controls a.enabled { - color: #5de048; -} - -.theme-neon .reveal .progress span, -.theme-neon .reveal .roll span:after { - background: #5de048; -} - -.theme-neon .reveal a.image:hover img { - border-color: #5de048; -} - - -/********************************************* - * BEIGE THEME - *********************************************/ - -.theme-beige body { - color: #333; - - background: #f7f3de; - background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1))); - background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); - background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); - background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); - background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); -} - -.theme-beige .reveal h1, -.theme-beige .reveal h2, -.theme-beige .reveal h3, -.theme-beige .reveal h4, -.theme-beige .reveal h5, -.theme-beige .reveal h6 { - color: #333; - text-shadow: none; -} - -.theme-beige .reveal a, -.theme-beige .reveal a:hover, -.theme-beige .reveal .controls a.enabled { - color: #8b743d; -} - -.theme-beige .reveal .progress span, -.theme-beige .reveal .roll span:after { - background: #8b743d; -} - -.theme-beige .reveal a.image:hover img { - border-color: #8b743d; -} diff --git a/css/print-pdf.css b/css/print-pdf.css deleted file mode 100644 index 26bc142..0000000 --- a/css/print-pdf.css +++ /dev/null @@ -1,158 +0,0 @@ -/* 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: 22pt; - width: auto; - height: auto; - border: 0; - margin: 0 5%; - padding: 0; - float: none !important; - overflow: visible; - background: #333; -} - -html { - width: auto; - height: auto; - overflow: visible; -} - -/* SECTION 2: Remove any elements not needed in print. - This would include navigation, ads, sidebars, etc. */ -.nestedarrow, -.controls a, -.reveal .progress, -.reveal.overview, -.fork-reveal, -.share-reveal, -.state-background { - display:none; -} - -/* SECTION 3: Set body font face, size, and color. - Consider using a serif font for readability. */ -body, p, td, li, div, a { - font-size: 22pt; -} - -/* 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-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, -.reveal .slides>section.past, .reveal .slides>section.future, -.reveal.linear .slides>section, .reveal.linear .slides>section>section, -.reveal.linear .slides>section.past, .reveal.linear .slides>section.future { - - visibility: visible; - position: static; - width: 100%; - height: auto; - min-height: initial; - display: block; - overflow: visible; - - left: 0%; - top: 0%; - margin-left: 0px; - margin-top: 50px; - padding: 20px 0px; - - opacity: 1; - - -webkit-transform-style: flat; - -moz-transform-style: flat; - -ms-transform-style: flat; - transform-style: flat; - - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; -} -.reveal section { - page-break-after: always !important; - display: block !important; -} -.reveal section.stack { - margin: 0px !important; - padding: 0px !important; - page-break-after: avoid !important; -} -.reveal section .fragment { - opacity: 1 !important; -} -.reveal img { - box-shadow: none; -} -.reveal .roll { - overflow: visible; - line-height: 1em; -} - -.reveal small a { - font-size: 16pt !important; -} \ No newline at end of file diff --git a/css/print.css b/css/print.css deleted file mode 100644 index 0ac5597..0000000 --- a/css/print.css +++ /dev/null @@ -1,170 +0,0 @@ -/* 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 a, -.reveal .progress, -.reveal.overview, -.fork-reveal, -.share-reveal, -.state-background { - display:none; -} - -/* SECTION 3: Set body font face, size, and color. - Consider using a serif font for readability. */ -body, p, td, li, div, a { - font-size: 13pt; - 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, -.reveal .slides>section.past, .reveal .slides>section.future, -.reveal.linear .slides>section, .reveal.linear .slides>section>section, -.reveal.linear .slides>section.past, .reveal.linear .slides>section.future { - - visibility: visible; - position: static; - width: 90%; - height: auto; - display: block; - overflow: visible; - - left: 0%; - top: 0%; - margin-left: 0px; - margin-top: 0px; - padding: 20px 0px; - - opacity: 1; - - -webkit-transform-style: flat; - -moz-transform-style: flat; - -ms-transform-style: flat; - transform-style: flat; - - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; -} -.reveal section { - page-break-after: always !important; - display: block !important; -} -.reveal section.stack { - page-break-after: avoid !important; -} -.reveal section .fragment { - opacity: 1 !important; -} -.reveal section img { - display: block; - margin: 15px 0px; - background: rgba(255,255,255,1); - border: 1px solid #666; - box-shadow: none; -} \ No newline at end of file diff --git a/css/print/paper.css b/css/print/paper.css new file mode 100644 index 0000000..0ac5597 --- /dev/null +++ b/css/print/paper.css @@ -0,0 +1,170 @@ +/* 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 a, +.reveal .progress, +.reveal.overview, +.fork-reveal, +.share-reveal, +.state-background { + display:none; +} + +/* SECTION 3: Set body font face, size, and color. + Consider using a serif font for readability. */ +body, p, td, li, div, a { + font-size: 13pt; + 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, +.reveal .slides>section.past, .reveal .slides>section.future, +.reveal.linear .slides>section, .reveal.linear .slides>section>section, +.reveal.linear .slides>section.past, .reveal.linear .slides>section.future { + + visibility: visible; + position: static; + width: 90%; + height: auto; + display: block; + overflow: visible; + + left: 0%; + top: 0%; + margin-left: 0px; + margin-top: 0px; + padding: 20px 0px; + + opacity: 1; + + -webkit-transform-style: flat; + -moz-transform-style: flat; + -ms-transform-style: flat; + transform-style: flat; + + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + transform: none; +} +.reveal section { + page-break-after: always !important; + display: block !important; +} +.reveal section.stack { + page-break-after: avoid !important; +} +.reveal section .fragment { + opacity: 1 !important; +} +.reveal section img { + display: block; + margin: 15px 0px; + background: rgba(255,255,255,1); + border: 1px solid #666; + box-shadow: none; +} \ No newline at end of file diff --git a/css/print/pdf.css b/css/print/pdf.css new file mode 100644 index 0000000..26bc142 --- /dev/null +++ b/css/print/pdf.css @@ -0,0 +1,158 @@ +/* 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: 22pt; + width: auto; + height: auto; + border: 0; + margin: 0 5%; + padding: 0; + float: none !important; + overflow: visible; + background: #333; +} + +html { + width: auto; + height: auto; + overflow: visible; +} + +/* SECTION 2: Remove any elements not needed in print. + This would include navigation, ads, sidebars, etc. */ +.nestedarrow, +.controls a, +.reveal .progress, +.reveal.overview, +.fork-reveal, +.share-reveal, +.state-background { + display:none; +} + +/* SECTION 3: Set body font face, size, and color. + Consider using a serif font for readability. */ +body, p, td, li, div, a { + font-size: 22pt; +} + +/* 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-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, +.reveal .slides>section.past, .reveal .slides>section.future, +.reveal.linear .slides>section, .reveal.linear .slides>section>section, +.reveal.linear .slides>section.past, .reveal.linear .slides>section.future { + + visibility: visible; + position: static; + width: 100%; + height: auto; + min-height: initial; + display: block; + overflow: visible; + + left: 0%; + top: 0%; + margin-left: 0px; + margin-top: 50px; + padding: 20px 0px; + + opacity: 1; + + -webkit-transform-style: flat; + -moz-transform-style: flat; + -ms-transform-style: flat; + transform-style: flat; + + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + transform: none; +} +.reveal section { + page-break-after: always !important; + display: block !important; +} +.reveal section.stack { + margin: 0px !important; + padding: 0px !important; + page-break-after: avoid !important; +} +.reveal section .fragment { + opacity: 1 !important; +} +.reveal img { + box-shadow: none; +} +.reveal .roll { + overflow: visible; + line-height: 1em; +} + +.reveal small a { + font-size: 16pt !important; +} \ No newline at end of file diff --git a/css/reset.css b/css/reset.css deleted file mode 100644 index 68f227a..0000000 --- a/css/reset.css +++ /dev/null @@ -1,57 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - 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, -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, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} - - -/* HTML5BP: - These selection declarations have to be separate. - No text-shadow: twitter.com/miketaylr/status/12228805301 - Also: hot pink. */ -::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } -::selection { background:#FF5E99; color:#fff; text-shadow: none; } - diff --git a/css/theme/beige.css b/css/theme/beige.css new file mode 100644 index 0000000..35337e6 --- /dev/null +++ b/css/theme/beige.css @@ -0,0 +1,166 @@ +/** + * A beige theme for reveal.js presentations, similar + * to the default theme. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + +/********************************************* + * FONT-FACE DEFINITIONS + *********************************************/ + +@font-face { + font-family: 'League Gothic'; + src: url('../../lib/font/league_gothic-webfont.eot'); + src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), + url('../../lib/font/league_gothic-webfont.woff') format('woff'), + url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), + url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); + + font-weight: normal; + font-style: normal; +} + + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +body { + font-family: 'Lato', Times, 'Times New Roman', serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #333; + + background: #f7f3de; + background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1))); + background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); + background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); + background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); + background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%); +} + + +/********************************************* + * HEADERS + *********************************************/ + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #333; + font-family: 'League Gothic', Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + + text-transform: uppercase; +} + +.reveal h1 { + text-shadow: 0 1px 0 #ccc, + 0 2px 0 #c9c9c9, + 0 3px 0 #bbb, + 0 4px 0 #b9b9b9, + 0 5px 0 #aaa, + 0 6px 1px rgba(0,0,0,.1), + 0 0 5px rgba(0,0,0,.1), + 0 1px 3px rgba(0,0,0,.3), + 0 3px 5px rgba(0,0,0,.2), + 0 5px 10px rgba(0,0,0,.25), + 0 20px 20px rgba(0,0,0,.15); +} + + +/********************************************* + * LINKS + *********************************************/ + +.reveal a:not(.image) { + color: #8b743d; + text-decoration: none; + + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} + .reveal a:not(.image):hover { + text-shadow: none; + border: none; + border-radius: 2px; + } + +.reveal .roll span:after { + color: #fff; + background: #8b743d; +} + + +/********************************************* + * IMAGES + *********************************************/ + +.reveal section img { + margin: 30px 0 0 0; + background: rgba(255,255,255,0.12); + border: 4px solid #eee; + + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + + .reveal a:hover img { + background: rgba(255,255,255,0.2); + border-color: #8b743d; + + -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + } + + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ + +.reveal .controls a { + color: #fff; +} + .reveal .controls a.enabled { + color: #8b743d; + text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); + } + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.reveal .progress { + background: rgba(0,0,0,0.2); +} + .reveal .progress span { + background: #8b743d; + + -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + } + + diff --git a/css/theme/default.css b/css/theme/default.css new file mode 100644 index 0000000..bd7caa7 --- /dev/null +++ b/css/theme/default.css @@ -0,0 +1,169 @@ +/** + * The default theme for reveal.js presentations. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + +/********************************************* + * FONT-FACE DEFINITIONS + *********************************************/ + +@font-face { + font-family: 'League Gothic'; + src: url('../../lib/font/league_gothic-webfont.eot'); + src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), + url('../../lib/font/league_gothic-webfont.woff') format('woff'), + url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), + url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); + + font-weight: normal; + font-style: normal; +} + + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +body { + font-family: 'Lato', Times, 'Times New Roman', serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #eee; + + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1NTVhNWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWMxZTIwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background-color: #2b2b2b; + background: -moz-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%, rgba(28,30,32,1) 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(85,90,95,1)), color-stop(100%,rgba(28,30,32,1))); + background: -webkit-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); + background: -o-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); + background: -ms-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); + background: radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%); +} + + +/********************************************* + * HEADERS + *********************************************/ + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #eee; + font-family: 'League Gothic', Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + + text-transform: uppercase; + text-shadow: 0px 0px 6px rgba(0,0,0,0.2); +} + +.reveal h1 { + text-shadow: 0 1px 0 #ccc, + 0 2px 0 #c9c9c9, + 0 3px 0 #bbb, + 0 4px 0 #b9b9b9, + 0 5px 0 #aaa, + 0 6px 1px rgba(0,0,0,.1), + 0 0 5px rgba(0,0,0,.1), + 0 1px 3px rgba(0,0,0,.3), + 0 3px 5px rgba(0,0,0,.2), + 0 5px 10px rgba(0,0,0,.25), + 0 20px 20px rgba(0,0,0,.15); +} + + +/********************************************* + * LINKS + *********************************************/ + +.reveal a:not(.image) { + color: hsl(185, 85%, 50%); + text-decoration: none; + + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} + .reveal a:not(.image):hover { + color: hsl(185, 85%, 70%); + + text-shadow: none; + border: none; + border-radius: 2px; + } + +.reveal .roll span:after { + color: #fff; + background: hsl(185, 60%, 35%); +} + + +/********************************************* + * IMAGES + *********************************************/ + +.reveal section img { + margin: 30px 0 0 0; + background: rgba(255,255,255,0.12); + border: 4px solid #eee; + + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + + .reveal a:hover img { + background: rgba(255,255,255,0.2); + border-color: #13DAEC; + + -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + } + + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ + +.reveal .controls a { + color: #fff; +} + .reveal .controls a.enabled { + color: hsl(185, 85%, 70%); + text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); + } + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.reveal .progress { + background: rgba(0,0,0,0.2); +} + .reveal .progress span { + background: hsl(185, 85%, 50%); + + -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + } + + -- cgit v1.2.3