///////////////////////////////////////////// // Variables ///////////////////////////////////////////// $base-font-size: 30px; $medium-font-size: 1 * $base-font-size; $xx-small-font-size: 0.4 * $base-font-size; $x-small-font-size: 0.6 * $base-font-size; $small-font-size: 0.8 * $base-font-size; $large-font-size: 1.2 * $base-font-size; $x-large-font-size: 1.4 * $base-font-size; $xx-large-font-size: 1.6 * $base-font-size; ///////////////////////////////////////////// // Font imports ///////////////////////////////////////////// @import url("fonts/roboto.css"); @import url("fonts/source-code-pro.css"); ///////////////////////////////////////////// // Styles ///////////////////////////////////////////// body { background: white; .reveal { .slides { ///////////////////////////////////////////// // General slide settings ///////////////////////////////////////////// font-family: 'Roboto', sans-serif; font-size: $medium-font-size; font-weight: normal; color: rgba(0, 0, 0, 0.87); section { ///////////////////////////////////////////// // General section settings ///////////////////////////////////////////// line-height: 1.4; text-align: left; font-weight: inherit; padding: 0; p { margin: 20px 0; line-height: 1.3; } ///////////////////////////////////////////// // Headers ///////////////////////////////////////////// h1, h2, h3, h4, h5, h6 { margin: 0 0 20px 0; color: rgba(0, 0, 0, 0.87); font-family: 'Roboto', sans-serif; line-height: 1.3; letter-spacing: normal; text-transform: none; text-shadow: none; word-wrap: break-word; font-weight: normal; } h1 { font-size: 1.6em; margin: 0 0 0.5em 0; } .rightcolumn { > h1 { margin-left: 54%; } } h2 { font-weight: 500; color: rgba(0, 0, 0, 0.54); font-size: 1.2em; } &.has-dark-background { h1, h2, h3, h4, h5, h6 { color: #fff; } } ///////////////////////////////////////////// // Text modifiers ///////////////////////////////////////////// strong, b { font-weight: bold; } em { font-style: italic; } sup { font-size: 0.5em; position: absolute; vertical-align: super; } sub { vertical-align: sub; } small { display: inline-block; font-size: 0.6em; line-height: 1.2em; vertical-align: top; } dt { font-weight: bold; } dd { margin-left: 40px; } q, blockquote { quotes: none; } blockquote { display: block; position: relative; width: 70%; margin: 20px auto; padding: 5px; font-style: italic; background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); p { &:first-child, &:last-child { display: inline-block; } } } q { font-style: italic; } ///////////////////////////////////////////// // Lists ///////////////////////////////////////////// ol, dl, ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } ol { list-style-type: decimal; } ul { list-style-type: disc; ul { list-style-type: square; ul { list-style-type: circle; } } } ul ul, ul ol, ol ol, ol ul { display: block; margin-left: 40px; } ///////////////////////////////////////////// // Links ///////////////////////////////////////////// a { color: #009; text-decoration: none; -webkit-transition: color 0.15s ease; -moz-transition: color 0.15s ease; transition: color 0.15s ease; img { -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; transition: all 0.15s linear; } &:hover { color: blue; text-shadow: none; border: none; img { background: rgba(255, 255, 255, 0.2); border: none; box-shadow: none; } } } ///////////////////////////////////////////// // Within section divs ///////////////////////////////////////////// div { ///////////////////////////////////////////// // Boxes ///////////////////////////////////////////// &.box { h2 { margin-top: 0; margin-bottom: 0.2em; &:last-child, &:empty { margin-bottom: 0; } } p { margin: 0; } padding: 0.4em 0.7em; margin: 0 -0.7em 0.5em -0.7em; border-radius: 0.25em; &.slide-column div { margin-top: 0; margin-bottom: 0.3em; &:first-child { margin-top: 0; } } &.question { background-color: rgba(255, 215, 67, 0.4); } &.answer { background-color: rgba(153, 205, 58, 0.4); } &.observation { background-color: rgba(210, 180, 140, 0.4); } &.example { background-color: rgba(176, 197, 222, 0.4); } &.def, &.definition { background-color: rgba(245, 222, 179, 0.6); } &.note { background-color: rgba(244, 164, 96, 0.4); } &.ale, &.alert { background-color: rgba(255, 99, 71, 0.4); } &.equ, &.equation { background-color: rgb(235, 235, 235); } &.theorem { background-color: rgb(235, 235, 235); } } ///////////////////////////////////////////// // Column settings ///////////////////////////////////////////// &.css-columns { column-count: 2; column-gap: 2em; column-rule-style: none; padding-left: 0.7em; margin-left: -0.7em; } &.box { break-inside: avoid-column; } &.multi-column-row { display:flex; flex-flow: row nowrap; div.column {flex: 1 1 0%;} div.column[grow="1"] {flex-grow:1;} div.column[grow="2"] {flex-grow:2;} div.column[grow="3"] {flex-grow:3;} div.column[grow="4"] {flex-grow:4;} div.column[grow="5"] {flex-grow:5;} div.column[grow="6"] {flex-grow:6;} div.column[grow="7"] {flex-grow:7;} div.column[grow="8"] {flex-grow:8;} div.column[grow="9"] {flex-grow:9;} } ///////////////////////////////////////////// // Video ///////////////////////////////////////////// /* iframe resizing, see: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */ &.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 0; height: 0; iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } ///////////////////////////////////////////// // Math ///////////////////////////////////////////// span.math.display { width: 100%; display: block; text-align: center; .MathJax_Display { margin-top: 1em; margin-bottom: 1em; } } } ///////////////////////////////////////////// // Media ///////////////////////////////////////////// img { max-width: 100%; margin: 0 auto; display: block; border: none; box-shadow: none; border-radius: 0.25em; &.float-left { float: left; } &.float-right { float: right; } } figure { margin: 0 0 0 0; figcaption { font-size: 0.8em; font-style: italic; text-align: center; } } video { width: 100%; margin: 0 auto; display: block; } &.img-center img { margin: 0 auto; display: block; } &.img-nocenter img { margin: 0 0; display: inline; } ///////////////////////////////////////////// // Source code ///////////////////////////////////////////// div.sourceCode { margin: 0 -0.7em; padding: 0.4em 0.7em; background: rgba(0, 0, 0, 0.03); border-radius: 0.25em; pre { display: block; position: relative; width: 100%; text-align: left; line-height: 1.5em; word-wrap: break-word; box-shadow: none; font-size: 90%; margin: 0; code { display: block; overflow: auto; max-height: 500px; word-wrap: normal; border: none; font-family: 'Source Code Pro', monospace; } } } // Special case: source code inside highlighted box div.box { &.question, &.answer, &.observation, &.example, &.def, &.definition, &.note, &.ale, &.alert, &.equ, &.equation, &.theorem { div.sourceCode { margin: 0; background: rgba(255, 255, 255, 0.4); padding: 0 0.2em; pre { margin: 0.2em 0; } } } } ///////////////////////////////////////////// // References ///////////////////////////////////////////// .references { height: 17.5em; overflow-y: scroll; div { margin-bottom: 0.5em; } } ///////////////////////////////////////////// // Tables ///////////////////////////////////////////// table { margin: auto; border-collapse: collapse; border-spacing: 0; th { font-weight: bold; } th, td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } th[align="center"], td[align="center"] { text-align: center; } th[align="right"], td[align="right"] { text-align: right; } tr:last-child td { border-bottom: none; } } } } ///////////////////////////////////////////// // Progress bar ///////////////////////////////////////////// .progress { background: rgba(0, 0, 0, 0.2); span { background: #777; -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); } } ///////////////////////////////////////////// // Navigation controls ///////////////////////////////////////////// .controls { button { opacity: 0; } .enabled:active { margin-top: 0; } :focus { outline: none; } .slide-number { color: #009; background-color: rgba(255, 255, 255, 0); } } .roll span:after { color: #fff; background: #00004d; } ///////////////////////////////////////////// // Reveal templates ///////////////////////////////////////////// .white { color: #eee; h1, h2 { color: #eee; } } .black { h1, h2 { color: #111; } } ///////////////////////////////////////////// // Speaker notes ///////////////////////////////////////////// .speaker-notes { h1, h2, h3, h4, h5, h6 { color: #FFF; font-weight: bold; margin-bottom: 0.2em; } h1 { text-decoration: underline; margin-bottom: 0.4em; } } ///////////////////////////////////////////// // Font size modifiers ///////////////////////////////////////////// .medium { font-size: $medium-font-size; } .xx-small { font-size: $xx-small-font-size; } .x-small { font-size: $x-small-font-size; } .small { font-size: $small-font-size; } .large { font-size: $large-font-size; } .x-large { font-size: $x-large-font-size; } .xx-large { font-size: $xx-large-font-size; } } ///////////////////////////////////////////// // Text selection ///////////////////////////////////////////// ::selection { color: white; background: rgba(0, 0, 0, 0.85); text-shadow: none; } }