/** | |
* White theme for reveal.js. This is the opposite of the 'black' theme. | |
* | |
* By Hakim El Hattab, http://hakim.se | |
*/ | |
@font-face { | |
font-family: 'work_sansregular'; | |
src: url("../../lib/font/worksans-regular-webfont.eot"); | |
src: url("../../lib/font/worksans-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/worksans-regular-webfont.woff") format("woff"), url("../../lib/font/worksans-regular-webfont.ttf") format("truetype"), url("../../lib/font/worksans-regular-webfont.svg#f310d4dccd89e059e79d3b6deebb4725") format("svg"); | |
font-style: normal; | |
font-weight: 400; } | |
@font-face { | |
font-family: 'work_sanssemibold'; | |
src: url("../../lib/font/worksans-semibold-webfont.woff2") format("woff2"), url("../../lib/font/worksans-semibold-webfont.woff") format("woff"); | |
font-weight: normal; | |
font-style: 600; | |
letter-spacing: 0.35rem; } | |
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { | |
color: #fff; } | |
.no-border { | |
border-width: 0px !important; | |
box-shadow: 0 0 0 0 !important; } | |
.img-small { | |
height: 30%; | |
width: 30%; } | |
/********************************************* | |
* GLOBAL STYLES | |
*********************************************/ | |
body { | |
background: #fff; | |
background-color: #fff; } | |
.reveal { | |
font-family: "work_sansregular", Helvetica, sans-serif; | |
font-size: 42px; | |
font-weight: normal; | |
color: #3731AA; } | |
::selection { | |
color: #fff; | |
background: #8de4dc; | |
text-shadow: none; } | |
::-moz-selection { | |
color: #fff; | |
background: #8de4dc; | |
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: #3731AA; | |
font-family: "work_sanssemibold", Helvetica, sans-serif; | |
font-weight: 600; | |
line-height: 1.2; | |
letter-spacing: normal; | |
text-transform: none; | |
text-shadow: none; | |
word-wrap: break-word; } | |
.reveal h1 { | |
font-size: 2.5em; } | |
.reveal h2 { | |
font-size: 1.6em; } | |
.reveal h3 { | |
font-size: 1.3em; } | |
.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: 5px; | |
font-style: italic; | |
background: rgba(255, 255, 255, 0.05); | |
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } | |
.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; | |
font-size: smaller; } | |
.reveal sub { | |
vertical-align: sub; | |
font-size: smaller; } | |
.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: #2EC4B6; | |
text-decoration: none; | |
-webkit-transition: color .15s ease; | |
-moz-transition: color .15s ease; | |
transition: color .15s ease; } | |
.reveal a:hover { | |
color: #64dbd0; | |
text-shadow: none; | |
border: none; } | |
.reveal .roll span:after { | |
color: #fff; | |
background: #1f867c; } | |
/********************************************* | |
* IMAGES | |
*********************************************/ | |
.reveal section img { | |
margin: 15px 0px; | |
background: rgba(255, 255, 255, 0.12); | |
border: 4px solid #3731AA; | |
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: #2EC4B6; | |
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } | |
/********************************************* | |
* NAVIGATION CONTROLS | |
*********************************************/ | |
.reveal .controls { | |
color: #2EC4B6; } | |
/********************************************* | |
* PROGRESS BAR | |
*********************************************/ | |
.reveal .progress { | |
background: rgba(0, 0, 0, 0.2); | |
color: #2EC4B6; } | |
.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); } | |
/********************************************* | |
* PRINT BACKGROUND | |
*********************************************/ | |
@media print { | |
.backgrounds { | |
background-color: #fff; } } | |
.reveal h2 { | |
color: #3731AA; } | |
html { | |
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f9f9f9 70%) no-repeat; | |
min-height: 100%; } | |
body { | |
background: none; | |
overflow-x: hidden; } | |
.reveal:before { | |
background: | |
url("/intro-bg.png") no-repeat 70% -6em, | |
url("/intro-bg-wide-tile.png") no-repeat center -6em; | |
background-size: 150%; | |
min-width: 100%; | |
min-height: 100%; | |
content: " "; | |
display: inline-block; | |
z-index: -10; | |
position: relative; } | |
.slides { | |
z-index: 1; | |
} | |
.footer { | |
display: block; | |
bottom: 80px; | |
left: 15px; | |
background-color: white; | |
border-top: 2px solid rgba(0, 0, 0, 0.05); | |
position: relative; } | |
.footer p { | |
margin: 2rem 0; | |
padding: 0 0 0 6rem; | |
color: #3731AA; | |
font-family: "work_sansregular", Helvetica, sans-serif; } | |
.footer .docker { | |
display: inline-block; | |
background: url(/docker-logo.png) no-repeat center bottom; } | |
.footer .deislabs { | |
width: 5.5rem; | |
height: 7.3rem; | |
display: inline-block; | |
position: absolute; | |
top: -4rem; } | |
.footer .deislabs span { | |
background: url(/deislabs.svg) no-repeat center bottom; | |
width: 100%; | |
height: 3rem; | |
background-size: contain; | |
display: inline-block; | |
text-indent: -999em; | |
position: absolute; | |
bottom: 0; } | |
.footer .deislabs em { | |
width: 3rem; | |
height: 3rem; | |
display: inline-block; | |
position: absolute; | |
background-blend-mode: multiply; | |
mix-blend-mode: multiply; | |
content: " "; } | |
.footer .deislabs em.dl-tr { | |
background: url(/deislabs-tr.svg) no-repeat 50% 50%; | |
background-size: contain; | |
left: 0; | |
top: 0; } | |
.footer .deislabs em.dl-sq { | |
background: url(/deislabs-sq.svg) no-repeat 50% 50%; | |
background-size: contain; | |
right: 0; | |
bottom: 1.8rem; } | |
.footer .deislabs em.dl-ci { | |
background: url(/deislabs-ci.svg) no-repeat 50% 50%; | |
background-size: contain; | |
left: 0; | |
bottom: 1.8rem; } | |
.footer .deislabs a { | |
display: inline-block; | |
width: 5.5rem; | |
height: 7.3rem; | |
/*&:hover { | |
em { | |
&.dl-tr { | |
left: 2.2rem; | |
top: 2.5rem; | |
} | |
&.dl-sq { | |
right: 2.5rem; | |
} | |
&.dl-ci { | |
bottom: 4.2rem; | |
} | |
} | |
}*/ } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment