Last active
January 9, 2020 13:19
-
-
Save hbrysiewicz/49c6d3a07e7f16f8e81f to your computer and use it in GitHub Desktop.
Ember.js Theme for Reveal.js - Based off of the Simple Theme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,600,300italic,700italic); | |
/** | |
* A simple theme for reveal.js presentations, similar | |
* to the default theme. The accent color is rgb(242, 56, 24). | |
* | |
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. | |
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se | |
*/ | |
/********************************************* | |
* GLOBAL STYLES | |
*********************************************/ | |
body { | |
background: rgb(248,239,236) url('/img/background-shades.svg');} | |
.reveal { | |
font-family: "Open Sans", sans-serif; | |
font-size: 36px; | |
font-weight: 300; | |
letter-spacing: -0.02em; | |
color: black; } | |
::selection { | |
color: white; | |
background: rgba(0, 0, 0, 0.99); | |
text-shadow: none; } | |
/********************************************* | |
* HEADERS | |
*********************************************/ | |
.reveal h1, | |
.reveal h2, | |
.reveal h3, | |
.reveal h4, | |
.reveal h5, | |
.reveal h6 { | |
margin: 0 0 20px 0; | |
color: black; | |
font-family: "Open Sans", Impact, sans-serif; | |
line-height: 0.9em; | |
letter-spacing: 0.02em; | |
text-transform: none; | |
text-shadow: none; } | |
.reveal h3 { | |
font-weight: 600; } | |
.reveal h1 { | |
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } | |
/********************************************* | |
* LINKS | |
*********************************************/ | |
.reveal a:not(.image) { | |
color: rgb(242, 56, 24); | |
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: rgb(242, 56, 24); | |
font-weight: 700; | |
text-shadow: none; | |
border: none; } | |
.reveal .roll span:after { | |
color: #fff; | |
background: #00003f; } | |
/********************************************* | |
* IMAGES | |
*********************************************/ | |
.reveal section img { | |
margin: 15px 0px; | |
background: rgba(255, 255, 255, 0.12); | |
border: 4px solid black; | |
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: rgb(242, 56, 24); | |
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } | |
/********************************************* | |
* NAVIGATION CONTROLS | |
*********************************************/ | |
.reveal .controls div.navigate-left, | |
.reveal .controls div.navigate-left.enabled { | |
border-right-color: rgb(242, 56, 24); } | |
.reveal .controls div.navigate-right, | |
.reveal .controls div.navigate-right.enabled { | |
border-left-color: rgb(242, 56, 24); } | |
.reveal .controls div.navigate-up, | |
.reveal .controls div.navigate-up.enabled { | |
border-bottom-color: rgb(242, 56, 24); } | |
.reveal .controls div.navigate-down, | |
.reveal .controls div.navigate-down.enabled { | |
border-top-color: rgb(242, 56, 24); } | |
.reveal .controls div.navigate-left.enabled:hover { | |
border-right-color: #0000f1; } | |
.reveal .controls div.navigate-right.enabled:hover { | |
border-left-color: #0000f1; } | |
.reveal .controls div.navigate-up.enabled:hover { | |
border-bottom-color: #0000f1; } | |
.reveal .controls div.navigate-down.enabled:hover { | |
border-top-color: #0000f1; } | |
/********************************************* | |
* PROGRESS BAR | |
*********************************************/ | |
.reveal .progress { | |
background: rgba(0, 0, 0, 0.2); } | |
.reveal .progress span { | |
background: rgb(242, 56, 24); | |
-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); | |
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); | |
-o-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); } | |
/********************************************* | |
* SLIDE NUMBER | |
*********************************************/ | |
.reveal .slide-number { | |
color: rgb(242, 56, 24); } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I downloaded the background image from the Ember.js website: http://emberjs.com/images/background-shades.svg