Last active
December 29, 2024 01:27
-
-
Save ryanj/60e54843de11a545897e to your computer and use it in GitHub Desktop.
OpenShift Reveal.js slideshow 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
/** | |
* OpenShift theme for Reveal.js | |
* | |
* By Emily Dirsh, [email protected] | |
* FOR INTERNAL USE ONLY | |
*/ | |
@font-face { | |
font-family: 'Overpass'; | |
src: url("overpass-bold-wf.eot"); | |
src: url("overpass-bold-wf.eot?#iefix") format("eot"), url("overpass-bold-wf.woff") format("woff"), url("overpass-bold-wf.svg#webfontzRhIMntw") format("svg"); | |
font-weight: bold; | |
font-style: normal; } | |
@font-face { | |
font-family: 'Overpass'; | |
src: url("overpass-wf.eot"); | |
src: url("overpass-wf.eot?#iefix") format("eot"), url("overpass-wf.woff") format("woff"), url("overpass-wf.svg#webfontiqWxLEM5") format("svg"); | |
font-weight: normal; | |
font-style: normal; } | |
/* OverpassNormal will be taller than surrounding text when | |
bolded, so use Overpass when mixing bolded and normal text | |
*/ | |
@font-face { | |
font-family: 'OverpassNormal'; | |
src: url("overpass-wf.eot"); | |
src: url("overpass-wf.eot?#iefix") format("eot"), url("overpass-wf.woff") format("woff"), url("overpass-wf.svg#webfontiqWxLEM5") format("svg"); | |
font-weight: normal; | |
font-style: normal; } | |
@font-face { | |
font-family: 'OpenSans'; | |
src: url("OpenSans-Regular-webfont.eot"); | |
src: url("OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("OpenSans-Regular-webfont.woff") format("woff"), url("OpenSans-Regular-webfont.ttf") format("truetype"), url("OpenSans-Regular-webfont.svg#open_sansregular") format("svg"); | |
font-weight: normal; | |
font-style: normal; } | |
/********************************************* | |
* GLOBAL STYLES | |
*********************************************/ | |
:root { | |
background-color: #191919; | |
background-image: url("./mts-bottom-transparent.png"), url("./planets.png"), url("./stars.png"), url("./noise.png"); | |
background-repeat: repeat-x, no-repeat, repeat, repeat; | |
background-position: center bottom, center -130px, 100% 122px, 0 0; | |
background-size: auto 25%, auto, auto, auto; | |
} | |
body { | |
background-color: #191919; | |
background-image: url("./mts-bottom-transparent.png"), url("./planets.png"), url("./stars.png"), url("./noise.png"); | |
background-repeat: repeat-x, no-repeat, repeat, repeat; | |
background-position: center bottom, center -130px, 100% 122px, 0 0; | |
background-size: auto 25%, auto, auto, auto; | |
background-color: #222222; } | |
.reveal { | |
font-family: OpenSans, sans-serif; | |
font-size: 34px; | |
font-weight: 200; | |
letter-spacing: -0.02em; | |
color: #eeeeee; | |
background-image: url("./mts-bottom-transparent.png"), url("./planets.png"), url("./stars.png"), url("./noise.png"); | |
background-repeat: repeat-x, no-repeat, repeat, repeat; | |
background-position: center bottom, center -130px, 100% 122px, 0 0; | |
background-size: auto 25%, auto, auto, auto; | |
} | |
::selection { | |
color: black; | |
background: #6db3c7; | |
text-shadow: none; } | |
/********************************************* | |
* HEADERS | |
*********************************************/ | |
.reveal h1, | |
.reveal h2, | |
.reveal h3, | |
.reveal h4, | |
.reveal h5, | |
.reveal h6 { | |
margin: 0 0 20px 0; | |
color: white; | |
font-family: "Overpass", sans-serif; | |
line-height: 0.9em; | |
letter-spacing: auto; | |
text-transform: none; | |
text-shadow: none; } | |
.reveal h1 { | |
text-shadow: none; } | |
/********************************************* | |
* LINKS | |
*********************************************/ | |
.reveal a:not(.image) { | |
color: #6db3c7; | |
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: #71e9f4; | |
text-shadow: none; | |
border: none; } | |
.reveal .roll span:after { | |
color: #fff; | |
background: #4090a7; } | |
/********************************************* | |
* IMAGES | |
*********************************************/ | |
.reveal section img { | |
margin: 15px 0px; } | |
.reveal a:hover img { | |
background: rgba(255, 255, 255, 0.2); | |
border-color: #6db3c7; | |
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: #6db3c7; } | |
.reveal .controls div.navigate-right, | |
.reveal .controls div.navigate-right.enabled { | |
border-left-color: #6db3c7; } | |
.reveal .controls div.navigate-up, | |
.reveal .controls div.navigate-up.enabled { | |
border-bottom-color: #6db3c7; } | |
.reveal .controls div.navigate-down, | |
.reveal .controls div.navigate-down.enabled { | |
border-top-color: #6db3c7; } | |
.reveal .controls div.navigate-left.enabled:hover { | |
border-right-color: #71e9f4; } | |
.reveal .controls div.navigate-right.enabled:hover { | |
border-left-color: #71e9f4; } | |
.reveal .controls div.navigate-up.enabled:hover { | |
border-bottom-color: #71e9f4; } | |
.reveal .controls div.navigate-down.enabled:hover { | |
border-top-color: #71e9f4; } | |
/********************************************* | |
* PROGRESS BAR | |
*********************************************/ | |
.reveal .progress { | |
background: rgba(0, 0, 0, 0.2); } | |
.reveal .progress span { | |
background: #6db3c7; | |
-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); } |
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
@font-face { | |
font-family: 'Overpass'; | |
src:url('fonts/overpass-bold-wf.eot'); | |
src:url('fonts/overpass-bold-wf.eot?#iefix') format('eot'), | |
url('fonts/overpass-bold-wf.woff') format('woff'), | |
url('fonts/overpass-bold-wf.svg#webfontzRhIMntw') format('svg'); | |
font-weight: bold; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'Overpass'; | |
src:url('fonts/overpass-wf.eot'); | |
src:url('fonts/overpass-wf.eot?#iefix') format('eot'), | |
url('fonts/overpass-wf.woff') format('woff'), | |
url('fonts/overpass-wf.svg#webfontiqWxLEM5') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
/* OverpassNormal will be taller than surrounding text when | |
bolded, so use Overpass when mixing bolded and normal text | |
*/ | |
@font-face { | |
font-family: 'OverpassNormal'; | |
src:url('fonts/overpass-wf.eot'); | |
src:url('fonts/overpass-wf.eot?#iefix') format('eot'), | |
url('fonts/overpass-wf.woff') format('woff'), | |
url('fonts/overpass-wf.svg#webfontiqWxLEM5') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment