/** * Solarized Light theme for reveal.js. * Author: Achim Staebler */ @import url(../reveal.js/lib/font/league-gothic/league-gothic.css); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * Solarized colors by Ethan Schoonover */ html * { color-profile: sRGB; rendering-intent: auto; } /********************************************* * GLOBAL STYLES *********************************************/ body { background: #fdf6e3; background-color: #fdf6e3; } .reveal { font-family: "Lato", sans-serif; font-size: 36px; font-weight: normal; color: #657b83; } ::selection { color: #fff; background: #d33682; text-shadow: none; } ::-moz-selection { color: #fff; background: #d33682; text-shadow: none; } .reveal .slides > section, .reveal .slides > section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { margin: 0 0 20px 0; color: #586e75; font-family: "League Gothic", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; text-shadow: none; word-wrap: break-word; } .reveal h1 { font-size: 1.5em; } .reveal h2 { font-size: 1.3em; } .reveal h3 { font-size: 1.1em; } .reveal h4 { font-size: 1em; } .reveal h1 { text-shadow: none; } /********************************************* * OTHER *********************************************/ .reveal p { margin: 20px 0; line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ .reveal img, .reveal video, .reveal iframe { max-width: 95%; max-height: 95%; } .reveal strong, .reveal b { font-weight: bold; } .reveal em { font-style: italic; } .reveal ol, .reveal dl, .reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } .reveal ol { list-style-type: decimal; } .reveal ul { list-style-type: disc; } .reveal ul ul { list-style-type: square; } .reveal ul ul ul { list-style-type: circle; } .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { display: block; margin-left: 40px; } .reveal dt { font-weight: bold; } .reveal dd { margin-left: 40px; } .reveal blockquote { display: block; position: relative; width: 70%; margin: 20px auto; padding: 15px; font-style: italic; background: rgba(88, 110, 117, 0.1); box-shadow: inset 0px 0px 10px 2px rgba(0, 0, 0, 0.5); } .reveal blockquote p:first-child, .reveal blockquote p:last-child { display: inline-block; } .reveal q { font-style: italic; } .reveal pre { display: block; position: relative; width: 90%; margin: 20px auto; text-align: left; font-size: 0.55em; font-family: monospace; line-height: 1.2em; word-wrap: break-word; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } .reveal code { font-family: monospace; text-transform: none; } .reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; word-wrap: normal; } .reveal table { margin: auto; border-collapse: collapse; border-spacing: 0; } .reveal table th { font-weight: bold; } .reveal table th, .reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } .reveal table th[align="center"], .reveal table td[align="center"] { text-align: center; } .reveal table th[align="right"], .reveal table td[align="right"] { text-align: right; } .reveal table tbody tr:last-child th, .reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { vertical-align: super; } .reveal sub { vertical-align: sub; } .reveal small { display: inline-block; font-size: 0.6em; line-height: 1.2em; vertical-align: top; } .reveal small * { vertical-align: top; } /********************************************* * LINKS *********************************************/ .reveal a { color: #586e75; text-decoration: none; -webkit-transition: color .15s ease; -moz-transition: color .15s ease; transition: color .15s ease; } .reveal a:hover { color: #78b9e6; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; background: #1a6091; } /********************************************* * IMAGES *********************************************/ .reveal section img { margin: 15px 0px; background: rgba(255, 255, 255, 0.12); border: 0px solid #657b83; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } .reveal section img.plain { border: 0; box-shadow: none; } .reveal a img { -webkit-transition: all .15s linear; -moz-transition: all .15s linear; transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); border-color: #586e75; box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } /********************************************* * NAVIGATION CONTROLS *********************************************/ .reveal .controls { color: #586e75; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { background: rgba(0, 0, 0, 0.2); color: #586e75; } .reveal .progress span { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /********* * Own additions *********/ .reveal sup, .reveal sub { font-size: 60%; } /********************************************* * ADD: TITLE SLIDE *********************************************/ .white-on-blue { color: #fdf6e3; background-color: #586e75; } .reveal .title { margin: 30px 0 0 0; font-weight: bold; font-style: normal; font-size: 1.5em; text-align: center; } .reveal .subtitle { margin: 10px 0 0 0; font-weight: normal; font-style: italic; font-size: 1.3em; text-align: center; } .reveal .author { margin: 50px 0 0 0; font-weight: normal; font-style: normal; font-size: 1.0em; text-align: center; } .reveal .affiliation { margin: 10px 0 30px 0; font-weight: normal; font-style: normal; font-size: 1.0em; text-align: center; } /********************************************* * ADD: SECTIONS *********************************************/ .reveal .section-title h1 { /* white on blue */ color: #fdf6e3; background-color: #586e75; /* large top margin -> vertical centering */ margin: 100px auto; padding: 50px; /* large bold font */ font-weight: bold; font-style: normal; font-size: 1.5em; } /********************************************* * ADD: FRAGMENT ANIMATION *********************************************/ .fragment.current-visible.visible:not(.current-fragment) { display: none; height:0px; line-height: 0px; font-size: 0px; } /********************************************* * ADD: Quiz *********************************************/ .reveal .slides > section { counter-reset: wwm-counter; } .reveal .answer { display: inline-block; position: relative; width: 400px; text-align: left; margin: 20px; border: 3px solid #586e75; border-radius: 20px; padding: 20px; font-weight: normal; color: black; } .reveal .answer:before { content: counter(wwm-counter, upper-latin) ": "; counter-increment: wwm-counter; margin-right: 0.5em; font-weight: bold; } .reveal .tooltip { visibility: hidden; max-width: 390px; top: 100%; background-color: grey; color: #fdf6e3; text-align: center; padding: 5px; border-radius: 6px; position: absolute; z-index: 1; font-size: 0.5em; } .reveal .show-wrong { background-color: #ffaaaa; border: 3px solid red; } .reveal .show-right { background-color: #aaffaa; border: 3px solid green; } .reveal .show-wrong:hover .tooltip, .reveal .show-right:hover .tooltip { visibility: visible; } /********************************************* * ADD: COMMENT BUBBLES *********************************************/ .reveal .bubble { color: #fdf6e3; background-color: #586e75; padding:10px; border-radius:5px; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35); } .reveal .comment { color: #fdf6e3; background-color: #586e75; position:absolute; padding:10px; border-radius:5px; font-size: 0.5em; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35); } .reveal .comment-left { color: #fdf6e3; background-color: #586e75; position:absolute; padding:5px; font-size: 80%; border-radius:20px 20px 0px 20px; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35); } .reveal .comment-right { color: #fdf6e3; background-color: #586e75; position:absolute; padding:5px; font-size: 80%; border-radius:20px 20px 20px 0px; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35); } .reveal .comment-big { color: #fdf6e3; background-color: #586e75; padding:10px; border-radius:5px; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35); } /********************************************* * ADD: FOOTER COMMENTS * either us footer tag or class *********************************************/ .reveal footer, .reveal .footer { position: absolute; text-align: center; margin: auto; padding: 5px; font-size: 0.5em; left: 100px; width: 724px; top: 750px; } /********************************************* * ADD: GENERIC HIGHLIGHT *********************************************/ .reveal .highlight { background-color: #fdfbaa; } /********************************************* * ADD: margin: auto *********************************************/ .reveal .automargin { margin: 10px auto; } /********************************************* * ADD: ADD SHADOWS (e.g. to images) *********************************************/ .reveal .shadow { box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25); } .reveal table p { margin: 0px; } .reveal .neg80 { margin-top: -80px; } .reveal .neg60 { margin-top: -60px; } /* class for aligning divs in a row */ .reveal .ilb { display: inline-block; vertical-align: top; } /********************************************* * ADD: MathJax equation should get some vertical distance to text before them *********************************************/ .reveal .MathJax_Display { margin-top: 0.5em; } /********************************************* * ADD: Source Highlighting from Pandoc *********************************************/ code { white-space: pre-wrap; } span.smallcaps { font-variant: small-caps; } div.line-block { white-space: pre-line; } div.column { display: inline-block; vertical-align: top; width: 50%; } div.sourceLine, a.sourceLine { display: inline-block; min-height: 1.25em; } a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; } .sourceCode { overflow: visible; } code.sourceCode { white-space: pre; } @media print { code.sourceCode { white-space: pre-wrap; } div.sourceLine, a.sourceLine { text-indent: -1em; padding-left: 1em; } } pre.numberSource div.sourceLine, .numberSource a.sourceLine { position: relative; } pre.numberSource div.sourceLine::before, .numberSource a.sourceLine::before { content: attr(data-line-number); position: absolute; left: -5em; text-align: right; vertical-align: baseline; border: none; pointer-events: all; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 0 4px; width: 4em; } pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; color: #aaaaaa; padding-left: 4px; } @media screen { a.sourceLine::before { text-decoration: underline; color: initial; } } code span.kw { color: #007020; font-weight: bold; } /* Keyword */ code span.dt { color: #902000; } /* DataType */ code span.dv { color: #40a070; } /* DecVal */ code span.bn { color: #40a070; } /* BaseN */ code span.fl { color: #40a070; } /* Float */ code span.ch { color: #4070a0; } /* Char */ code span.st { color: #4070a0; } /* String */ code span.co { color: #60a0b0; font-style: italic; } /* Comment */ code span.ot { color: #007020; } /* Other */ code span.al { color: #ff0000; font-weight: bold; } /* Alert */ code span.fu { color: #06287e; } /* Function */ code span.er { color: #ff0000; font-weight: bold; } /* Error */ code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ code span.cn { color: #880000; } /* Constant */ code span.sc { color: #4070a0; } /* SpecialChar */ code span.vs { color: #4070a0; } /* VerbatimString */ code span.ss { color: #bb6688; } /* SpecialString */ code span.im { } /* Import */ code span.va { color: #19177c; } /* Variable */ code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ code span.op { color: #666666; } /* Operator */ code span.bu { } /* BuiltIn */ code span.ex { } /* Extension */ code span.pp { color: #bc7a00; } /* Preprocessor */ code span.at { color: #7d9029; } /* Attribute */ code span.do { color: #ba2121; font-style: italic; } /* Documentation */ code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */