A Touch of Technology
Writings from Alex
In the process of working on my presentation for QConSF I pulled out some styling from the official Ember.js website and created a theme for Reveal.js out of it.
I really enjoy using Reveal.js for my presentations because it allows me to display code side-by-side with working or interactive examples. It also allows me to easily embed media and work in a format that I am familiar with. It is also extremely convenient to host and share the slides through github pages, allowing me to provide this url to atendees or others that may wish to reference it later.
So, enjoy!
This file contains 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); } |
The image referred to for the body background I saved from here and I popped it in the img directory within my reveal project.
