mirror of
https://github.com/vbatts/talks.git
synced 2024-12-26 08:36:31 +00:00
2119 lines
70 KiB
HTML
2119 lines
70 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html class="sl-root decks export offline loaded">
|
|||
|
|
<head>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|||
|
|
<title>What’s next for containers?</title>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" type="text/css" href="lib/offline-v2.css">
|
|||
|
|
|
|||
|
|
<!-- Team CSS -->
|
|||
|
|
<style id="global-css-output" type="text/css">
|
|||
|
|
@import url("https://s3.amazonaws.com/static.slid.es/fonts/overpass2/overpass2.css");
|
|||
|
|
.reveal {
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*fix icon inversion*/
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.reveal svg,
|
|||
|
|
.reveal text,
|
|||
|
|
.reveal tspan,
|
|||
|
|
.reveal svg text {
|
|||
|
|
font-family: "Overpass 2", Overpass, sans-serif !important;
|
|||
|
|
color: currentcolor;
|
|||
|
|
fill: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block {
|
|||
|
|
color: #354045;
|
|||
|
|
fill: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block svg {
|
|||
|
|
color: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background,
|
|||
|
|
.reveal .has-dark-background > .sl-block {
|
|||
|
|
color: white;
|
|||
|
|
fill: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal section > .sl-block .redhat-logo .logotext {
|
|||
|
|
fill: #000000;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background > .sl-block .redhat-logo .logotext {
|
|||
|
|
fill: #ffffff;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background > .sl-block[data-block-type="image"] {
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="none"] {
|
|||
|
|
fill: none !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#a30000"] {
|
|||
|
|
fill: #aa0000 !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#cc2029"],
|
|||
|
|
.reveal [fill="#cb2027"],
|
|||
|
|
.reveal [fill="#c00"] {
|
|||
|
|
fill: #cc0000 !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#fff"] {
|
|||
|
|
fill: #ffffff !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#6d6e70"] {
|
|||
|
|
fill: #6d6e70 !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#231f20"] {
|
|||
|
|
fill: currentcolor !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#efab1f"] {
|
|||
|
|
fill: #efab1f !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#92d400"] {
|
|||
|
|
fill: #92d400 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background [fill="#6d6e70"] {
|
|||
|
|
fill: #266272 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background [fill="#fff"] {
|
|||
|
|
fill: #555555 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background [fill="#fff"] {
|
|||
|
|
fill: #333333 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background [stroke="#231f20"] {
|
|||
|
|
stroke: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal [data-inline-svg="true"] img {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<!-- Theme CSS -->
|
|||
|
|
<style id="theme-css-output" type="text/css">
|
|||
|
|
@import url(//overpassmonotest-30e2.kxcdn.com/overpass-mono.css);
|
|||
|
|
.reveal {
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
.sl-block[data-block-type="snippet"],
|
|||
|
|
.sl-block[data-block-type="image"]
|
|||
|
|
{
|
|||
|
|
text,
|
|||
|
|
tspan,
|
|||
|
|
polygon,
|
|||
|
|
path,
|
|||
|
|
rect,
|
|||
|
|
ellipse {
|
|||
|
|
fill: currentcolor;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/*slide-default*/
|
|||
|
|
|
|||
|
|
/*Custom Ordered Lists */
|
|||
|
|
|
|||
|
|
/*helpers*/
|
|||
|
|
|
|||
|
|
/*fixing left aligned text*/
|
|||
|
|
|
|||
|
|
/*h1,h2,h3,h4,h5,h6{&::first-letter{margin-left:-.09em;}}*/
|
|||
|
|
|
|||
|
|
/*icon absolute brute-fix*/
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
.present .icon.stroked path.long{ stroke-width: 2px ;
|
|||
|
|
-webkit-animation: icon-animation-long 3.5s 1.5s 1;
|
|||
|
|
-moz-animation: icon-animation-long 3.5s 1.5s 1;
|
|||
|
|
animation: icon-animation-long 3.5s 1.5s 1;
|
|||
|
|
}*/
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
.present .icon.stroked path.short{
|
|||
|
|
-webkit-animation: icon-animation-short 3.5s 1.5s 1;
|
|||
|
|
-moz-animation: icon-animation-short 3.5s 1.5s 1;
|
|||
|
|
animation: icon-animation-short 3.5s 1.5s 1;
|
|||
|
|
}*/
|
|||
|
|
|
|||
|
|
/*controls logic*/
|
|||
|
|
|
|||
|
|
/*animated logos with complex svg segments*/
|
|||
|
|
|
|||
|
|
/*transitions*/
|
|||
|
|
|
|||
|
|
/*logos svg files that contain inverted path alternates */
|
|||
|
|
|
|||
|
|
/* call to action */
|
|||
|
|
|
|||
|
|
/* tables in snippets.... the devil */
|
|||
|
|
|
|||
|
|
/* tables in text */
|
|||
|
|
|
|||
|
|
/*testimonial snippet */
|
|||
|
|
|
|||
|
|
/*for inverting images*/
|
|||
|
|
|
|||
|
|
/**/
|
|||
|
|
|
|||
|
|
/*code blocks*/
|
|||
|
|
|
|||
|
|
/* round line arrows */
|
|||
|
|
|
|||
|
|
/*fix icon inversion*/
|
|||
|
|
|
|||
|
|
/*body:hover .corner svg{transform: translate(30%, 30%)}*/
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.reveal.reveal[role="application"] > .backgrounds > .slide-background:not(.stack):first-child,
|
|||
|
|
.reveal.reveal[role="application"] > .backgrounds > .stack:first-child > .slide-background:first-child,
|
|||
|
|
.reveal.reveal[role="application"] .slides > .pdf-page:not(.stack):first-child .slide-background,
|
|||
|
|
.reveal.reveal[role="application"] .slides > .stack:first-child > .pdf-page:first-child .slide-background {
|
|||
|
|
background-color: #900;
|
|||
|
|
color: #fff;
|
|||
|
|
background-size: cover;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-position: 50% 50%;
|
|||
|
|
background-image: linear-gradient(-45deg, #8e0000 20%, #820000 20%, #990000 85%, #890000 85%);
|
|||
|
|
min-height: 100vh;
|
|||
|
|
}
|
|||
|
|
.reveal.reveal[role="application"] > .backgrounds > .slide-background:not(.stack):first-child.has-light-background,
|
|||
|
|
.reveal.reveal[role="application"] > .backgrounds > .stack:first-child > .slide-background:first-child.has-light-background,
|
|||
|
|
.reveal.reveal[role="application"] .slides > .pdf-page:not(.stack):first-child .slide-background.has-light-background,
|
|||
|
|
.reveal.reveal[role="application"] .slides > .stack:first-child > .pdf-page:first-child .slide-background.has-light-background {
|
|||
|
|
background-image: none;
|
|||
|
|
}
|
|||
|
|
.reveal.reveal .slides > .section:first-child,
|
|||
|
|
.reveal.reveal[role="application"] > .slides > .section:first-child .sl-block {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.reveal .name {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.reveal .reveal,
|
|||
|
|
.reveal .sl-block,
|
|||
|
|
.reveal .sl-block-content,
|
|||
|
|
.reveal .sl-block-content div,
|
|||
|
|
.reveal .sl-block-content p,
|
|||
|
|
.reveal .sl-block-content h1,
|
|||
|
|
.reveal .sl-block-content h2,
|
|||
|
|
.reveal .sl-block-content h3,
|
|||
|
|
.reveal .sl-block-content h4 {
|
|||
|
|
font-family: "Overpass 2", overpass, "Hiragino Kaku Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", sans-serif;
|
|||
|
|
}
|
|||
|
|
.reveal .future .sl-block-content,
|
|||
|
|
.reveal .past .sl-block-content {
|
|||
|
|
transition: none !important;
|
|||
|
|
}
|
|||
|
|
.reveal section,
|
|||
|
|
.reveal.reveal .has-dark-background,
|
|||
|
|
.reveal section.background-shade-dark {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.reveal.reveal .has-dark-background a {
|
|||
|
|
color: #eee;
|
|||
|
|
}
|
|||
|
|
.reveal.reveal .has-dark-background a:hover {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.reveal .backgrounds {
|
|||
|
|
background: #f3f4f4;
|
|||
|
|
}
|
|||
|
|
.reveal .slide-background {
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: 50% 50%;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
}
|
|||
|
|
.reveal .slide-background.has-light-background {
|
|||
|
|
/*background-image: url(//s3.amazonaws.com/media-p.slid.es/uploads/team-32/images/1297460/standard-background.svg);*/
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.reveal .backgrounds .paint-it-red {
|
|||
|
|
background-color: #c00 !important;
|
|||
|
|
-moz-background-blend-mode: multiply;
|
|||
|
|
-webkit-background-blend-mode: multiply;
|
|||
|
|
-ms-background-blend-mode: multiply;
|
|||
|
|
background-blend-mode: multiply;
|
|||
|
|
}
|
|||
|
|
.reveal .paint-it-red {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .icon.stroked path,
|
|||
|
|
.reveal section.background-shade-dark .icon.stroked path,
|
|||
|
|
.reveal section.light-foreground .icon.stroked path {
|
|||
|
|
stroke: #fff !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .redhat-product-logotype path,
|
|||
|
|
.reveal section.background-shade-dark .redhat-product-logotype path,
|
|||
|
|
.reveal section.light-foreground .redhat-product-logotype path {
|
|||
|
|
fill: #ffffff;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background text.logotext,
|
|||
|
|
.reveal section.background-shade-dark text.logotext,
|
|||
|
|
.reveal section.light-foreground text.logotext,
|
|||
|
|
.reveal .has-dark-background .logotext text,
|
|||
|
|
.reveal section.background-shade-dark .logotext text,
|
|||
|
|
.reveal section.light-foreground .logotext text,
|
|||
|
|
.reveal .has-dark-background path.logotext,
|
|||
|
|
.reveal section.background-shade-dark path.logotext,
|
|||
|
|
.reveal section.light-foreground path.logotext,
|
|||
|
|
.reveal .has-dark-background path.logotype,
|
|||
|
|
.reveal section.background-shade-dark path.logotype,
|
|||
|
|
.reveal section.light-foreground path.logotype,
|
|||
|
|
.reveal .has-dark-background .logotext path,
|
|||
|
|
.reveal section.background-shade-dark .logotext path,
|
|||
|
|
.reveal section.light-foreground .logotext path {
|
|||
|
|
fill: #fff !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .closing-logo .logotext,
|
|||
|
|
.reveal section.background-shade-dark .closing-logo .logotext,
|
|||
|
|
.reveal section.light-foreground .closing-logo .logotext,
|
|||
|
|
.reveal .has-dark-background .redhat-logo .logotext,
|
|||
|
|
.reveal section.background-shade-dark .redhat-logo .logotext,
|
|||
|
|
.reveal section.light-foreground .redhat-logo .logotext {
|
|||
|
|
fill: #ffffff !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .icon.stroked path {
|
|||
|
|
stroke: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .redhat-logo .logotext {
|
|||
|
|
fill: #000000 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block-content ol li {
|
|||
|
|
position: relative;
|
|||
|
|
padding-bottom: .5em;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block-content ol li > p:first-child {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block-content ol > li::before {
|
|||
|
|
margin-left: -2.5em;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block-content > ol > li:before {
|
|||
|
|
float: left;
|
|||
|
|
text-align: center;
|
|||
|
|
box-shadow: inset 0 0 0 .1em;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block-content ol {
|
|||
|
|
counter-reset: section;
|
|||
|
|
list-style-type: none;
|
|||
|
|
margin: 0 0 0 2.5em;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block-content ol ol {
|
|||
|
|
margin-top: .5em;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block-content ol > li:before {
|
|||
|
|
font-weight: 400;
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 1.75em;
|
|||
|
|
height: 1.75em;
|
|||
|
|
line-height: 1.75em;
|
|||
|
|
text-align: center;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
font-size: .75em;
|
|||
|
|
margin: 0 0.75em 0 -2.5em;
|
|||
|
|
counter-increment: section;
|
|||
|
|
content: counters(section, ".") " ";
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block-content > ol > li ol li:before {
|
|||
|
|
opacity: .5;
|
|||
|
|
text-align: left;
|
|||
|
|
box-shadow: none;
|
|||
|
|
letter-spacing: .1em;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block-content > ol > li > ol > li > ol > li:before {
|
|||
|
|
width: 4em;
|
|||
|
|
left: -3em;
|
|||
|
|
font-size: .75em;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .sl-block-content > ol > li:before {
|
|||
|
|
color: currentcolor;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|||
|
|
box-shadow: inset 0 0 0 0.2em rgba(0, 0, 0, 0.2);
|
|||
|
|
font-weight: 500;
|
|||
|
|
letter-spacing: -0.05em;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block-content > ol ol ol li:before {
|
|||
|
|
opacity: 1;
|
|||
|
|
font-size: .55em !important;
|
|||
|
|
width: 3.5em !important;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block-content > ol ol ol {
|
|||
|
|
margin-left: 1.5em !important;
|
|||
|
|
}
|
|||
|
|
.reveal .uppercase {
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block[data-block-type="text"] > .initial h1,
|
|||
|
|
.reveal .sl-block[data-block-type="text"] > .initial h2,
|
|||
|
|
.reveal .sl-block[data-block-type="text"] > .initial h3 {
|
|||
|
|
text-transform: initial;
|
|||
|
|
}
|
|||
|
|
.reveal .force-mono text,
|
|||
|
|
.reveal .force-mono tspan,
|
|||
|
|
.reveal .force-mono polygon,
|
|||
|
|
.reveal .force-mono path,
|
|||
|
|
.reveal .force-mono rect,
|
|||
|
|
.reveal .force-mono ellipse {
|
|||
|
|
fill: currentcolor !important;
|
|||
|
|
}
|
|||
|
|
.reveal .force-red .stroked path {
|
|||
|
|
stroke: #c00;
|
|||
|
|
}
|
|||
|
|
.reveal .force-red,
|
|||
|
|
.reveal .force-red text,
|
|||
|
|
.reveal .force-red tspan,
|
|||
|
|
.reveal .force-red polygon,
|
|||
|
|
.reveal .force-red path,
|
|||
|
|
.reveal .force-red rect,
|
|||
|
|
.reveal .force-red ellipse {
|
|||
|
|
color: #c00;
|
|||
|
|
fill: currentcolor !important;
|
|||
|
|
}
|
|||
|
|
.reveal .force-red .stroked {
|
|||
|
|
fill: none;
|
|||
|
|
stroke: #cc0000;
|
|||
|
|
}
|
|||
|
|
.reveal .background-shade-dark .sl-block {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.reveal .dark-foreground text.logotext,
|
|||
|
|
.reveal section.background-shade-light text.logotext,
|
|||
|
|
.reveal section.dark-foreground text.logotext,
|
|||
|
|
.reveal .dark-foreground .logotext text,
|
|||
|
|
.reveal section.background-shade-light .logotext text,
|
|||
|
|
.reveal section.dark-foreground .logotext text,
|
|||
|
|
.reveal .dark-foreground path.logotext,
|
|||
|
|
.reveal section.background-shade-light path.logotext,
|
|||
|
|
.reveal section.dark-foreground path.logotext,
|
|||
|
|
.reveal .dark-foreground path.logotype,
|
|||
|
|
.reveal section.background-shade-light path.logotype,
|
|||
|
|
.reveal section.dark-foreground path.logotype,
|
|||
|
|
.reveal .dark-foreground .logotext path,
|
|||
|
|
.reveal section.background-shade-light .logotext path,
|
|||
|
|
.reveal section.dark-foreground .logotext path,
|
|||
|
|
.reveal .dark-foreground .product,
|
|||
|
|
.reveal section.background-shade-light .product,
|
|||
|
|
.reveal section.dark-foreground .product {
|
|||
|
|
fill: currentcolor !important;
|
|||
|
|
}
|
|||
|
|
.reveal .dark-foreground .redhat-logo .logotext,
|
|||
|
|
.reveal section.background-shade-light .redhat-logo .logotext,
|
|||
|
|
.reveal section.dark-foreground .redhat-logo .logotext {
|
|||
|
|
fill: currentcolor !important;
|
|||
|
|
}
|
|||
|
|
.reveal .slide-background.background-shade-dark:after {
|
|||
|
|
content: "";
|
|||
|
|
display: block;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: rgba(40, 40, 40, 0.8);
|
|||
|
|
}
|
|||
|
|
.reveal .slide-background.background-shade-light:after {
|
|||
|
|
content: "";
|
|||
|
|
display: block;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|||
|
|
}
|
|||
|
|
.reveal .slides section {
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
.reveal .slides section h1 {
|
|||
|
|
line-height: 1em;
|
|||
|
|
font-weight: 700 ;
|
|||
|
|
font-size: 3em ;
|
|||
|
|
}
|
|||
|
|
.reveal .slides section h2 {
|
|||
|
|
font-size: 2em;
|
|||
|
|
font-weight: 400 ;
|
|||
|
|
line-height: 1.15em;
|
|||
|
|
}
|
|||
|
|
.reveal .slides section h3 {
|
|||
|
|
font-weight: 700 ;
|
|||
|
|
font-size: 1em ;
|
|||
|
|
line-height: 1.25em;
|
|||
|
|
}
|
|||
|
|
.reveal .slides section p {
|
|||
|
|
margin-bottom: .5em;
|
|||
|
|
}
|
|||
|
|
.reveal .slides section blockquote {
|
|||
|
|
font-style: normal;
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
.reveal .progress {
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
.reveal .progress span {
|
|||
|
|
background-color: #5e6a71;
|
|||
|
|
}
|
|||
|
|
.reveal .absolute-element svg {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 100% !important;
|
|||
|
|
height: 100% !important;
|
|||
|
|
}
|
|||
|
|
.reveal .icon.stroked {
|
|||
|
|
width: 282px;
|
|||
|
|
height: 282px;
|
|||
|
|
}
|
|||
|
|
.reveal .icon.stroked.icon-arrow path {
|
|||
|
|
stroke-width: 4px !important;
|
|||
|
|
}
|
|||
|
|
.reveal .icon.stroked path {
|
|||
|
|
fill: none;
|
|||
|
|
stroke-width: 1.5px;
|
|||
|
|
transition-delay: .5s !important;
|
|||
|
|
stroke-dashoffset: 0;
|
|||
|
|
stroke-width: 1.5;
|
|||
|
|
stroke-linecap: round;
|
|||
|
|
stroke-linejoin: round;
|
|||
|
|
stroke: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal .icon.stroked path.long {
|
|||
|
|
stroke-dasharray: 420,420;
|
|||
|
|
transition: 2.5s all ease;
|
|||
|
|
}
|
|||
|
|
.reveal .icon.stroked path.longer {
|
|||
|
|
stroke-dasharray: 512,512;
|
|||
|
|
transition: 2.5s all ease;
|
|||
|
|
}
|
|||
|
|
.reveal .icon.stroked path.short {
|
|||
|
|
stroke-dasharray: 90,90;
|
|||
|
|
transition: 5s all ease;
|
|||
|
|
}
|
|||
|
|
.reveal .icon.stroked path.shortest {
|
|||
|
|
stroke-dasharray: 5,5;
|
|||
|
|
transition: 2s all ease;
|
|||
|
|
}
|
|||
|
|
.reveal .icon.stroked path.round {
|
|||
|
|
stroke-linecap: round ;
|
|||
|
|
stroke-linejoin: round ;
|
|||
|
|
}
|
|||
|
|
.reveal .icon.stroked path.virtual {
|
|||
|
|
transition: .5s all ease;
|
|||
|
|
stroke-dasharray: 1.1, 3;
|
|||
|
|
stroke-linecap: round ;
|
|||
|
|
}
|
|||
|
|
.reveal .icon.stroked path.dashed {
|
|||
|
|
stroke-dasharray: 3, 3;
|
|||
|
|
}
|
|||
|
|
.reveal .icon.stroked path.hand {
|
|||
|
|
stroke-linecap: round;
|
|||
|
|
}
|
|||
|
|
.reveal .present path.virtual {
|
|||
|
|
-webkit-animation: virtual-outline 60s infinite linear;
|
|||
|
|
-moz-animation: virtual-outline 60s infinite linear;
|
|||
|
|
animation: virtual-outline 60s infinite linear;
|
|||
|
|
}
|
|||
|
|
@-webkit-keyframes virtual-outline {
|
|||
|
|
0% {
|
|||
|
|
stroke-dashoffset: 0;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
stroke-dashoffset: 512;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@-moz-keyframes virtual-outline {
|
|||
|
|
0% {
|
|||
|
|
stroke-dashoffset: 0;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
stroke-dashoffset: 512;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes virtual-outline {
|
|||
|
|
0% {
|
|||
|
|
stroke-dashoffset: 0;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
stroke-dashoffset: 512;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.reveal a {
|
|||
|
|
box-shadow: 0 0.066666em;
|
|||
|
|
}
|
|||
|
|
.reveal .overview section.present {
|
|||
|
|
border: 12px solid white !important;
|
|||
|
|
box-shadow: 0 0 0 10px #ffffff, inset 0 0 0 6px rgba(0, 0, 0, 0.2);
|
|||
|
|
}
|
|||
|
|
.reveal .rh-pattern {
|
|||
|
|
width: 256px;
|
|||
|
|
height: 256px;
|
|||
|
|
}
|
|||
|
|
.reveal .rh-pattern path {
|
|||
|
|
transition: all .5s ease;
|
|||
|
|
}
|
|||
|
|
.reveal .future .rh-pattern path {
|
|||
|
|
stroke-dasharray: 0, 85 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .present .rh-pattern path {
|
|||
|
|
stroke-dasharray: 80, 0 !important;
|
|||
|
|
}
|
|||
|
|
.reveal div[data-block-type="snippet"] .sl-block-content > svg,
|
|||
|
|
.reveal div[data-block-type="snippet"] > .sl-block-content > svg,
|
|||
|
|
.reveal div[data-block-type="snippet"] .icon,
|
|||
|
|
.reveal div[data-block-type="snippet"] .product {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.reveal div[data-block-type="snippet"] .sl-block-content > svg:not(:last-child) {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.reveal div[data-block-type="snippet"] .icon {
|
|||
|
|
top: -15%;
|
|||
|
|
right: -15%;
|
|||
|
|
bottom: -15%;
|
|||
|
|
left: -15%;
|
|||
|
|
width: 130%;
|
|||
|
|
height: 130%;
|
|||
|
|
}
|
|||
|
|
.reveal div[data-block-type="snippet"] {
|
|||
|
|
min-width: 60px !important;
|
|||
|
|
}
|
|||
|
|
.reveal div[data-block-type="text"] {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
.reveal .triangle-element,
|
|||
|
|
.reveal .triangle-element * {
|
|||
|
|
user-select: none;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .closing-logo.logotype path {
|
|||
|
|
fill: black !important;
|
|||
|
|
}
|
|||
|
|
@-webkit-keyframes closing-animation {
|
|||
|
|
0% {
|
|||
|
|
-webkit-transform: scale(4) translate(40%);
|
|||
|
|
transform: scale(4) translate(40%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
80% {
|
|||
|
|
-webkit-transform: scale(1) translate(30%);
|
|||
|
|
transform: scale(1) translate(30%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@-moz-keyframes closing-animation {
|
|||
|
|
0% {
|
|||
|
|
-webkit-transform: scale(4) translate(40%);
|
|||
|
|
transform: scale(4) translate(40%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
80% {
|
|||
|
|
-webkit-transform: scale(1) translate(30%);
|
|||
|
|
transform: scale(1) translate(30%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@-o-keyframes closing-animation {
|
|||
|
|
0% {
|
|||
|
|
-webkit-transform: scale(4) translate(40%);
|
|||
|
|
transform: scale(4) translate(40%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
80% {
|
|||
|
|
-webkit-transform: scale(1) translate(30%);
|
|||
|
|
transform: scale(1) translate(30%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes closing-animation {
|
|||
|
|
0% {
|
|||
|
|
-webkit-transform: scale(4) translate(40%);
|
|||
|
|
transform: scale(4) translate(40%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
80% {
|
|||
|
|
-webkit-transform: scale(1) translate(30%);
|
|||
|
|
transform: scale(1) translate(30%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.reveal .present .closing-logo.icon {
|
|||
|
|
-webkit-animation: closing-animation 1.5s 1;
|
|||
|
|
-moz-animation: closing-animation 1.5s 1;
|
|||
|
|
-o-animation: closing-animation 1.5s 1;
|
|||
|
|
animation: closing-animation 1.5s 1;
|
|||
|
|
}
|
|||
|
|
.reveal .present .closing-logo.logotype {
|
|||
|
|
-webkit-animation: closing-text-animation 1.8s 1;
|
|||
|
|
-moz-animation: closing-text-animation 1.8s 1;
|
|||
|
|
-o-animation: closing-text-animation 1.8s 1;
|
|||
|
|
animation: closing-text-animation 1.8s 1;
|
|||
|
|
}
|
|||
|
|
@-webkit-keyframes closing-text-animation {
|
|||
|
|
0% {
|
|||
|
|
opacity: 0;
|
|||
|
|
-webkit-transform: translate(-10%);
|
|||
|
|
transform: translate(-10%);
|
|||
|
|
}
|
|||
|
|
70% {
|
|||
|
|
-webkit-transform: translate(-10%);
|
|||
|
|
transform: translate(-10%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
transform: none;
|
|||
|
|
opacity: 1;
|
|||
|
|
-webkit-transform: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@-moz-keyframes closing-text-animation {
|
|||
|
|
0% {
|
|||
|
|
opacity: 0;
|
|||
|
|
-webkit-transform: translate(-10%);
|
|||
|
|
transform: translate(-10%);
|
|||
|
|
}
|
|||
|
|
70% {
|
|||
|
|
-webkit-transform: translate(-10%);
|
|||
|
|
transform: translate(-10%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
transform: none;
|
|||
|
|
opacity: 1;
|
|||
|
|
-webkit-transform: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes closing-text-animation {
|
|||
|
|
0% {
|
|||
|
|
opacity: 0;
|
|||
|
|
-webkit-transform: translate(-10%);
|
|||
|
|
transform: translate(-10%);
|
|||
|
|
}
|
|||
|
|
70% {
|
|||
|
|
-webkit-transform: translate(-10%);
|
|||
|
|
transform: translate(-10%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
transform: none;
|
|||
|
|
opacity: 1;
|
|||
|
|
-webkit-transform: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.reveal .brand-pattern-paths path,
|
|||
|
|
.reveal .pattern-path {
|
|||
|
|
stroke-width: 1;
|
|||
|
|
fill: none;
|
|||
|
|
}
|
|||
|
|
.reveal .brand-pattern-paths path {
|
|||
|
|
fill: none !important;
|
|||
|
|
}
|
|||
|
|
.reveal pattern {
|
|||
|
|
patterntransform: scale(2) !important;
|
|||
|
|
}
|
|||
|
|
.reveal pattern.normal use {
|
|||
|
|
stroke: currentcolor;
|
|||
|
|
fill: none;
|
|||
|
|
}
|
|||
|
|
.reveal pattern.light use {
|
|||
|
|
stroke: #fff !important;
|
|||
|
|
fill: none;
|
|||
|
|
}
|
|||
|
|
.reveal pattern.dark use {
|
|||
|
|
stroke: #000 !important;
|
|||
|
|
fill: none;
|
|||
|
|
}
|
|||
|
|
.reveal .brand-pattern {
|
|||
|
|
min-width: 40px;
|
|||
|
|
min-height: 40px;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0 ;
|
|||
|
|
left: 0 ;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.reveal .brand-pattern path,
|
|||
|
|
.reveal .brand-pattern rect {
|
|||
|
|
width: 100% !important;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.reveal .brand-pattern.corporate {
|
|||
|
|
fill: url(#pattern-corporate);
|
|||
|
|
}
|
|||
|
|
.reveal #pattern-corporate-2 use {
|
|||
|
|
stroke: #dd0000;
|
|||
|
|
}
|
|||
|
|
.reveal #pattern-corporate use {
|
|||
|
|
stroke: #cc0000;
|
|||
|
|
}
|
|||
|
|
.reveal section,
|
|||
|
|
.reveal .slide-background {
|
|||
|
|
-webkit-backface-visibility: hidden;
|
|||
|
|
-ms-backface-visibility: hidden;
|
|||
|
|
backface-visibility: hidden;
|
|||
|
|
}
|
|||
|
|
.reveal .slides > section.transition-slide,
|
|||
|
|
.reveal .slides > section.transition-slide + section.future,
|
|||
|
|
.reveal .slides > section.transition-slide + section.present,
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide,
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide + .slide-background.future,
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide + .slide-background.present {
|
|||
|
|
transition: all 1s ease !important;
|
|||
|
|
}
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide {
|
|||
|
|
opacity: 1 ;
|
|||
|
|
}
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide.past {
|
|||
|
|
z-index: 99;
|
|||
|
|
-webkit-transform: translate(-100%, 0);
|
|||
|
|
-ms-transform: translate(-100%, 0);
|
|||
|
|
transform: translate(-100%, 0);
|
|||
|
|
}
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide.future,
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide.present + .slide-background.future {
|
|||
|
|
-webkit-transform: translate(100%, 0);
|
|||
|
|
-ms-transform: translate(100%, 0);
|
|||
|
|
transform: translate(100%, 0);
|
|||
|
|
}
|
|||
|
|
.reveal .slides > section.transition-slide.past {
|
|||
|
|
z-index: 99;
|
|||
|
|
-webkit-transform: translate(-150%, 0);
|
|||
|
|
-ms-transform: translate(-150%, 0);
|
|||
|
|
transform: translate(-150%, 0);
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
.reveal .slides > section.transition-slide.future,
|
|||
|
|
.reveal .slides > section.transition-slide.future + section {
|
|||
|
|
-webkit-transform: translate(150%, 0);
|
|||
|
|
-ms-transform: translate(150%, 0);
|
|||
|
|
transform: translate(150%, 0);
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
.reveal .slides > section.transition-slide-up,
|
|||
|
|
.reveal .slides > section.transition-slide-up + section.future,
|
|||
|
|
.reveal .slides > section.transition-slide-up + section.present,
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide-up,
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide-up + .slide-background.future .backgrounds > .slide-background.transition-slide-up + .slide-background.present {
|
|||
|
|
transition: all 1s ease !important;
|
|||
|
|
}
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide-up {
|
|||
|
|
opacity: 1 ;
|
|||
|
|
}
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide-up.past {
|
|||
|
|
z-index: 99;
|
|||
|
|
-webkit-transform: translate(0, -100%);
|
|||
|
|
-ms-transform: translate(0, -100%);
|
|||
|
|
transform: translate(0, -100%);
|
|||
|
|
}
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide-up.future,
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-slide-up.present + .slide-background.future {
|
|||
|
|
-webkit-transform: translate(0, 100%);
|
|||
|
|
-ms-transform: translate(0, 100%);
|
|||
|
|
transform: translate(0, 100%);
|
|||
|
|
}
|
|||
|
|
.reveal .slides > section.transition-slide-up.past {
|
|||
|
|
z-index: 99;
|
|||
|
|
-webkit-transform: translate(0, -150%);
|
|||
|
|
-ms-transform: translate(0, -150%);
|
|||
|
|
transform: translate(0, -150%);
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
.reveal .slides > section.transition-slide-up.future,
|
|||
|
|
.reveal .slides > section.transition-slide-up.present + section {
|
|||
|
|
-webkit-transform: translate(0, 150%);
|
|||
|
|
-ms-transform: translate(0, 150%);
|
|||
|
|
transform: translate(0, 150%);
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
.reveal .slides > section.transition-zoom-in,
|
|||
|
|
.reveal .slides > section.transition-zoom-in + section.future,
|
|||
|
|
.reveal .slides > section.transition-zoom-in + section.present,
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-zoom-in,
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-zoom-in + .slide-background.future .backgrounds > .slide-background.transition-zoom-in + .slide-background.present {
|
|||
|
|
-webkit-transition: all 1s ease !important;
|
|||
|
|
-moz-transition: all 1s ease !important;
|
|||
|
|
transition: all 1s ease !important;
|
|||
|
|
}
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-zoom-in.past {
|
|||
|
|
opacity: 0 !important;
|
|||
|
|
-webkit-transform: scale(1.5);
|
|||
|
|
-ms-transform: scale(0.1 0.5);
|
|||
|
|
transform: scale(1.5);
|
|||
|
|
}
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-zoom-in.future,
|
|||
|
|
.reveal .backgrounds > .slide-background.transition-zoom-in.present + .slide-background.future {
|
|||
|
|
opacity: 0 !important;
|
|||
|
|
-webkit-transform: scale(0.01);
|
|||
|
|
-ms-transform: scale(0.01);
|
|||
|
|
transform: scale(0.01);
|
|||
|
|
}
|
|||
|
|
.reveal .past {
|
|||
|
|
z-index: -1;
|
|||
|
|
opacity: 0 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .present + .slide-background.future {
|
|||
|
|
z-index: 99;
|
|||
|
|
}
|
|||
|
|
.reveal .slides > section.transition-zoom-in.past {
|
|||
|
|
z-index: 99;
|
|||
|
|
-webkit-transform: scale(1.5);
|
|||
|
|
-ms-transform: scale(1.5);
|
|||
|
|
transform: scale(1.5);
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
.reveal .slides > section.transition-zoom-in.future {
|
|||
|
|
-webkit-transform: scale(0.1);
|
|||
|
|
-ms-transform: scale(0.1);
|
|||
|
|
transform: scale(0.1);
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
@-webkit-keyframes icon-animation-long {
|
|||
|
|
0% {
|
|||
|
|
stroke-dashoffset: 420;
|
|||
|
|
stroke-width: .5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@-moz-keyframes icon-animation-long {
|
|||
|
|
0% {
|
|||
|
|
stroke-dashoffset: 420;
|
|||
|
|
stroke-width: .5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes icon-animation-long {
|
|||
|
|
0% {
|
|||
|
|
stroke-dashoffset: 420;
|
|||
|
|
stroke-width: .5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@-webkit-keyframes icon-animation-short {
|
|||
|
|
0% {
|
|||
|
|
stroke-dashoffset: 90;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@-moz-keyframes icon-animation-short {
|
|||
|
|
0% {
|
|||
|
|
stroke-dashoffset: 90;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes icon-animation-short {
|
|||
|
|
0% {
|
|||
|
|
stroke-dashoffset: 90;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.reveal .present .animate.icon.stroked path,
|
|||
|
|
.reveal .present .animate .icon.stroked path,
|
|||
|
|
.reveal .fragment .icon.stroked path {
|
|||
|
|
animation: 0;
|
|||
|
|
-moz-animation: 0;
|
|||
|
|
-webkit-animation: 0;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.reveal .present .animate.icon.stroked path.long,
|
|||
|
|
.reveal .present .animate .icon.stroked path.long,
|
|||
|
|
.reveal .fragment.visible .icon.stroked path.long {
|
|||
|
|
display: block;
|
|||
|
|
stroke-width: 2px ;
|
|||
|
|
-webkit-animation: icon-animation-long 3.5s 0.5s 1;
|
|||
|
|
-moz-animation: icon-animation-long 3.5s 0.5s 1;
|
|||
|
|
animation: icon-animation-long 3.5s 0.5s 1;
|
|||
|
|
}
|
|||
|
|
.reveal .present .animate.icon.stroked path.short,
|
|||
|
|
.reveal .present .animate .icon.stroked path.short,
|
|||
|
|
.reveal .fragment.visible .icon.stroked path.short {
|
|||
|
|
display: block;
|
|||
|
|
-webkit-animation: icon-animation-short 3.5s 0.5s 1 !important;
|
|||
|
|
-moz-animation: icon-animation-short 3.5s 0.5s 1 !important;
|
|||
|
|
animation: icon-animation-short 3.5s 0.5s 1 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .triangle-element {
|
|||
|
|
transition: all 0.4s cubic-bezier(0.21, 0.9, 0.55, 1) 5s;
|
|||
|
|
}
|
|||
|
|
.reveal.reveal:hover .triangle-element {
|
|||
|
|
transition: all 1s cubic-bezier(0.21, 0.9, 0.55, 1.16) 0s !important;
|
|||
|
|
top: 100% !important;
|
|||
|
|
left: 100% !important;
|
|||
|
|
opacity: 0.95;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .only-dark {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .only-light {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.reveal .thinner .icon.stroked path {
|
|||
|
|
stroke-width: 1px !important;
|
|||
|
|
}
|
|||
|
|
.reveal .thinnest .icon.stroked path {
|
|||
|
|
stroke-width: 0.05em !important;
|
|||
|
|
}
|
|||
|
|
.reveal .thicker .icon.stroked path {
|
|||
|
|
stroke-width: 3px !important;
|
|||
|
|
}
|
|||
|
|
.reveal .thickest .icon.stroked path {
|
|||
|
|
stroke-width: 4px !important;
|
|||
|
|
}
|
|||
|
|
.reveal .angle {
|
|||
|
|
-ms-transform: rotate(-45deg);
|
|||
|
|
-moz-transform: rotate(-45deg);
|
|||
|
|
-webkit-transform: rotate(-45deg);
|
|||
|
|
transform: rotate(-45deg);
|
|||
|
|
}
|
|||
|
|
.reveal .rangle {
|
|||
|
|
-ms-transform: rotate(45deg);
|
|||
|
|
-moz-transform: rotate(45deg);
|
|||
|
|
-webkit-transform: rotate(45deg);
|
|||
|
|
transform: rotate(45deg);
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block > .vertical {
|
|||
|
|
-ms-transform: rotate(-90deg);
|
|||
|
|
-moz-transform: rotate(-90deg);
|
|||
|
|
-webkit-transform: rotate(-90deg);
|
|||
|
|
transform: rotate(-90deg);
|
|||
|
|
}
|
|||
|
|
.reveal .skewed {
|
|||
|
|
transition: all 1s cubic-bezier(0.13, 0.81, 0.08, 1);
|
|||
|
|
-moz-transform: skew(-45deg, 0);
|
|||
|
|
-ms-transform: skew(-45deg, 0);
|
|||
|
|
-webkit-transform: skew(-45deg, 0);
|
|||
|
|
transform: skew(-45deg, 0);
|
|||
|
|
}
|
|||
|
|
.reveal .future .skewed {
|
|||
|
|
margin-left: -800%;
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.reveal .past .skewed {
|
|||
|
|
margin-left: 800%;
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.reveal .item-label,
|
|||
|
|
.reveal .item-box {
|
|||
|
|
letter-spacing: 0em;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.reveal .epic-content-box {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .epic-content-box {
|
|||
|
|
box-shadow: inset 0 0 0.51em rgba(0, 0, 0, 0.25), 0 0.05em 0.05em rgba(255, 255, 255, 0.1);
|
|||
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .epic-content-box {
|
|||
|
|
box-shadow: inset 0 0 0.2em rgba(255, 255, 255, 0.5), 0 0.06666em 0.555em 0 rgba(0, 0, 0, 0.12);
|
|||
|
|
}
|
|||
|
|
.reveal .controls {
|
|||
|
|
bottom: 1%;
|
|||
|
|
right: 1%;
|
|||
|
|
}
|
|||
|
|
.reveal .controls button {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.reveal .controls button.enabled {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
.reveal .controls {
|
|||
|
|
opacity: 0 !important;
|
|||
|
|
transition: opacity .5s ease 4.8s, transform .5s ease 4.8s;
|
|||
|
|
transform: scale(0.4);
|
|||
|
|
}
|
|||
|
|
.reveal.reveal:hover .controls {
|
|||
|
|
transform: scale(1);
|
|||
|
|
opacity: 1 !important;
|
|||
|
|
transition: opacity .5s ease 0s, transform .5s ease 0s;
|
|||
|
|
}
|
|||
|
|
.reveal .backgrounds {
|
|||
|
|
transition-property: height;
|
|||
|
|
transition-duration: 1s;
|
|||
|
|
perspective: 1000px;
|
|||
|
|
transform-style: preserve-3d;
|
|||
|
|
}
|
|||
|
|
.reveal .complex-logo {
|
|||
|
|
min-height: 70px;
|
|||
|
|
min-width: 70px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.reveal .complex-logo,
|
|||
|
|
.reveal .complex-logo svg,
|
|||
|
|
.reveal .complex-logo > div {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.reveal .complex-logo > div.line-icon,
|
|||
|
|
.reveal .complex-logo svg > div.line-icon,
|
|||
|
|
.reveal .complex-logo > div > div.line-icon,
|
|||
|
|
.reveal .complex-logo > div.logomark,
|
|||
|
|
.reveal .complex-logo svg > div.logomark,
|
|||
|
|
.reveal .complex-logo > div > div.logomark {
|
|||
|
|
transform-origin: 12% 50%;
|
|||
|
|
}
|
|||
|
|
.reveal .animated .complex-logo div {
|
|||
|
|
transition: all .5s ease;
|
|||
|
|
}
|
|||
|
|
.reveal .animated .complex-logo div.line-icon {
|
|||
|
|
transition-delay: 2s;
|
|||
|
|
}
|
|||
|
|
.reveal .animated .complex-logo div.line-icon path {
|
|||
|
|
transition: all 1s ease .52s;
|
|||
|
|
stroke-dasharray: 100 ,10;
|
|||
|
|
}
|
|||
|
|
.reveal .animated .complex-logo div.event-name {
|
|||
|
|
transition-delay: 1s;
|
|||
|
|
}
|
|||
|
|
.reveal .animated .complex-logo div.location {
|
|||
|
|
transition-delay: 1.4s;
|
|||
|
|
}
|
|||
|
|
.reveal .future .animated .complex-logo > div {
|
|||
|
|
transition: none;
|
|||
|
|
}
|
|||
|
|
.reveal .future .animated .complex-logo > div.line-icon path {
|
|||
|
|
stroke-dasharray: 0 ,100;
|
|||
|
|
transition: none;
|
|||
|
|
}
|
|||
|
|
.reveal .future .animated .complex-logo {
|
|||
|
|
/*.line-icon{transform:rotate(30deg); opacity:0;}*/
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.reveal .future .animated .complex-logo .logomark {
|
|||
|
|
transform: translate(0, -20%);
|
|||
|
|
}
|
|||
|
|
.reveal .future .animated .complex-logo .location {
|
|||
|
|
transform: translate(0, 0.5em);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.reveal .future .animated .complex-logo .event-name {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate(-0.6em, 0);
|
|||
|
|
}
|
|||
|
|
.reveal .lowercase {
|
|||
|
|
text-transform: lowercase;
|
|||
|
|
}
|
|||
|
|
.reveal .pop-in.fragment {
|
|||
|
|
-webkit-transform: scale(0.2);
|
|||
|
|
-moz-transform: scale(0.2);
|
|||
|
|
-ms-transform: scale(0.2);
|
|||
|
|
transform: scale(0.2);
|
|||
|
|
-webkit-transition: 2s ease 0.25s;
|
|||
|
|
-moz-transition: 2s ease 0.25s;
|
|||
|
|
-ms-transition: 2s ease 0.25s;
|
|||
|
|
transition: 2s ease 0.25s;
|
|||
|
|
-webkit-animation-delay: 0.66s;
|
|||
|
|
-moz-animation-delay: 0.66s;
|
|||
|
|
-ms-animation-delay: 0.66s;
|
|||
|
|
animation-delay: 0.66s;
|
|||
|
|
}
|
|||
|
|
.reveal .pop-in.fragment.visible {
|
|||
|
|
-webkit-transform: scale(1);
|
|||
|
|
-moz-transform: scale(1);
|
|||
|
|
-ms-transform: scale(1);
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
.reveal .pop-in.fragment.current-fragment {
|
|||
|
|
color: #c22;
|
|||
|
|
}
|
|||
|
|
.reveal .grow-width {
|
|||
|
|
-webkit-transition: all 0.5s ease 0.2s;
|
|||
|
|
-moz-transition: all 0.5s ease 0.2s;
|
|||
|
|
-o-transition: all 0.5s ease 0.2s;
|
|||
|
|
-ms-transition: all 0.5s ease 0.2s;
|
|||
|
|
transition: all 0.5s ease 0.2s;
|
|||
|
|
}
|
|||
|
|
.reveal .future .grow-width {
|
|||
|
|
width: 0% !important;
|
|||
|
|
-webkit-transition: none;
|
|||
|
|
-moz-transition: none;
|
|||
|
|
-o-transition: none;
|
|||
|
|
-ms-transition: none;
|
|||
|
|
transition: none;
|
|||
|
|
}
|
|||
|
|
.reveal .stampit {
|
|||
|
|
-webkit-transition: all 1s cubic-bezier(0.79, 0.53, 0.46, 1.3) 1s;
|
|||
|
|
-moz-transition: all 1s cubic-bezier(0.79, 0.53, 0.46, 1.3) 1s;
|
|||
|
|
-ms-transition: all 1s cubic-bezier(0.79, 0.53, 0.46, 1.3) 1s;
|
|||
|
|
transition: all 1s cubic-bezier(0.79, 0.53, 0.46, 1.3) 1s;
|
|||
|
|
}
|
|||
|
|
.reveal .future .stampit {
|
|||
|
|
-webkit-transform: rotate(-12deg) scale(2);
|
|||
|
|
-moz-transform: rotate(-12deg) scale(2);
|
|||
|
|
-ms-transform: rotate(-12deg) scale(2);
|
|||
|
|
transform: rotate(-12deg) scale(2);
|
|||
|
|
-webkit-transition: none;
|
|||
|
|
-moz-transition: none;
|
|||
|
|
-ms-transition: none;
|
|||
|
|
transition: none;
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.reveal .headshot img {
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 4px solid #c00 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .condensed {
|
|||
|
|
letter-spacing: 0.02em;
|
|||
|
|
}
|
|||
|
|
.reveal .condensed li {
|
|||
|
|
margin-bottom: 1em ;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .sl-block .has-dark-background > svg.redhat-logo .logotext {
|
|||
|
|
fill: #ffffff !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .sl-block .reversed.redhat-logo .logotext,
|
|||
|
|
.reveal .has-light-background .sl-block .reversed .redhat-logo .logotext,
|
|||
|
|
.reveal .has-light-background .sl-block .has-dark-background > .redhat-logo .logotext {
|
|||
|
|
fill: #ffffff !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .sl-block .reversed.redhat-logo .logotext,
|
|||
|
|
.reveal .has-dark-background .sl-block .reversed .redhat-logo .logotext,
|
|||
|
|
.reveal .has-dark-background .sl-block .has-light-background > .redhat-logo .logotext {
|
|||
|
|
fill: #000000 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .has-light-background .logo .only-dark path,
|
|||
|
|
.reveal .has-light-background .mono.redhat-logo path {
|
|||
|
|
fill: #000000 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .mono.redhat-logo path {
|
|||
|
|
fill: #ffffff;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .logo .only-dark {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .logo .only-light {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .logo .only-dark {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .logo .only-light {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .reversed svg path {
|
|||
|
|
fill: #ffffff !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .reversed svg path {
|
|||
|
|
fill: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .has-light-background .logo .only-light,
|
|||
|
|
.reveal .has-dark-background .reversed .logo .only-dark {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .has-dark-background .logo .only-dark,
|
|||
|
|
.reveal .has-light-background .logo .only-light {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .has-dark-background .redhat-logo .only-dark,
|
|||
|
|
.reveal .has-light-background .redhat-logo .only-light {
|
|||
|
|
fill: #ffffff !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .has-dark-background .logo .only-light,
|
|||
|
|
.reveal .has-light-background .logo .only-dark,
|
|||
|
|
.reveal .has-dark-background .has-light-background .logo .only-dark,
|
|||
|
|
.reveal .has-dark-background .logo .only-light {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.reveal .future .fade-up,
|
|||
|
|
.reveal .future .fade-down,
|
|||
|
|
.reveal .future .fade-left,
|
|||
|
|
.reveal .future .fade-right,
|
|||
|
|
.reveal .future .fade-zoom {
|
|||
|
|
-webkit-transition: none;
|
|||
|
|
transition: none;
|
|||
|
|
opacity: 0;
|
|||
|
|
filter: alpha(opacity=0);
|
|||
|
|
}
|
|||
|
|
.reveal .future .fade-up,
|
|||
|
|
.reveal .fade-up.fragment {
|
|||
|
|
-webkit-transform: translate(0, 2em);
|
|||
|
|
-ms-transform: translate(0, 2em);
|
|||
|
|
transform: translate(0, 2em);
|
|||
|
|
opacity: 0;
|
|||
|
|
filter: alpha(opacity=0);
|
|||
|
|
}
|
|||
|
|
.reveal .future .fade-down,
|
|||
|
|
.reveal .fade-down.fragment {
|
|||
|
|
-webkit-transform: translate(0, -2em);
|
|||
|
|
-ms-transform: translate(0, -2em);
|
|||
|
|
transform: translate(0, -2em);
|
|||
|
|
opacity: 0;
|
|||
|
|
filter: alpha(opacity=0);
|
|||
|
|
}
|
|||
|
|
.reveal .future .fade-left,
|
|||
|
|
.reveal .fade-left.fragment {
|
|||
|
|
-webkit-transform: translate(2em, 0);
|
|||
|
|
-ms-transform: translate(2em, 0);
|
|||
|
|
transform: translate(2em, 0);
|
|||
|
|
opacity: 0;
|
|||
|
|
filter: alpha(opacity=0);
|
|||
|
|
}
|
|||
|
|
.reveal .future .fade-right,
|
|||
|
|
.reveal .fade-right.fragment {
|
|||
|
|
-webkit-transform: translate(-2em, 0);
|
|||
|
|
-ms-transform: translate(-2em, 0);
|
|||
|
|
transform: translate(-2em, 0);
|
|||
|
|
opacity: 0;
|
|||
|
|
filter: alpha(opacity=0);
|
|||
|
|
}
|
|||
|
|
.reveal .future .fade-zoom,
|
|||
|
|
.reveal .fade-zoom.fragment {
|
|||
|
|
-webkit-transform: scale(0.1);
|
|||
|
|
-ms-transform: scale(0.1);
|
|||
|
|
transform: scale(0.1);
|
|||
|
|
opacity: 0;
|
|||
|
|
filter: alpha(opacity=0);
|
|||
|
|
}
|
|||
|
|
.reveal .future .fade-in {
|
|||
|
|
transition: none;
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.reveal .present .fade-in,
|
|||
|
|
.reveal .present .fade-up,
|
|||
|
|
.reveal .present .fade-down,
|
|||
|
|
.reveal .present .fade-left,
|
|||
|
|
.reveal .present .fade-right,
|
|||
|
|
.reveal .present .fade-zoom {
|
|||
|
|
-webkit-transition: all .5s ease .5s;
|
|||
|
|
transition: all .5s ease .5s;
|
|||
|
|
opacity: 1;
|
|||
|
|
filter: alpha(opacity=100);
|
|||
|
|
}
|
|||
|
|
.reveal .present .fragment.visible.fade-up,
|
|||
|
|
.reveal .present .fragment.visible.fade-down,
|
|||
|
|
.reveal .present .fragment.visible.fade-left,
|
|||
|
|
.reveal .present .fragment.visible.fade-right,
|
|||
|
|
.reveal .present .fragment.visible.fade-zoom {
|
|||
|
|
-webkit-transform: none ;
|
|||
|
|
-ms-transform: none ;
|
|||
|
|
transform: none ;
|
|||
|
|
opacity: 1;
|
|||
|
|
filter: alpha(opacity=100);
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block {
|
|||
|
|
font-family: "Overpass 2", "Hiragino Kaku Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", Overpass, sans-serif !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .icon.stroked {
|
|||
|
|
color: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .icon.stroked path {
|
|||
|
|
stroke: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .only-light-background {
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .only-dark-background {
|
|||
|
|
display: block !important;
|
|||
|
|
}
|
|||
|
|
.reveal a.call-to-action:hover {
|
|||
|
|
background-color: #d00 !important;
|
|||
|
|
box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.05) !important;
|
|||
|
|
text-shadow: none !important;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block[data-block-type="snippet"] table {
|
|||
|
|
width: 100% !important;
|
|||
|
|
max-width: 100% !important;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block[data-block-type="snippet"] table td {
|
|||
|
|
border-color: currentcolor !important;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block[data-block-type="snippet"] table td {
|
|||
|
|
text-align: inherit !important;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block[data-block-type="text"] table {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block[data-block-type="text"] table td {
|
|||
|
|
border-color: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal .sl-block[data-block-type="text"] table td {
|
|||
|
|
text-align: inherit;
|
|||
|
|
}
|
|||
|
|
.reveal.reveal .sl-block[data-block-type="image"] .person {
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: relative !important;
|
|||
|
|
background-color: transparent;
|
|||
|
|
height: auto !important;
|
|||
|
|
}
|
|||
|
|
.reveal.reveal .sl-block[data-block-type="image"] .person:before {
|
|||
|
|
content: "" !important;
|
|||
|
|
display: block !important;
|
|||
|
|
padding-top: 100% ;
|
|||
|
|
position: relative !important ;
|
|||
|
|
/* 4:3 aspect ratio */
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.reveal.reveal .sl-block[data-block-type="image"] .person > img {
|
|||
|
|
position: absolute ;
|
|||
|
|
margin: 0 auto !important;
|
|||
|
|
left: 0% ;
|
|||
|
|
right: 0 ;
|
|||
|
|
width: auto !important;
|
|||
|
|
top: 0 ;
|
|||
|
|
bottom: 0 ;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-1 {
|
|||
|
|
transition-delay: 0.1s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-2 {
|
|||
|
|
transition-delay: 0.2s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-3 {
|
|||
|
|
transition-delay: 0.3s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-4 {
|
|||
|
|
transition-delay: 0.4s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-5 {
|
|||
|
|
transition-delay: 0.5s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-6 {
|
|||
|
|
transition-delay: 0.6s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-7 {
|
|||
|
|
transition-delay: 0.7s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-8 {
|
|||
|
|
transition-delay: 0.8s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-9 {
|
|||
|
|
transition-delay: 0.9s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-10 {
|
|||
|
|
transition-delay: 1s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-11 {
|
|||
|
|
transition-delay: 1.1s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-12 {
|
|||
|
|
transition-delay: 1.2s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-13 {
|
|||
|
|
transition-delay: 1.3s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-14 {
|
|||
|
|
transition-delay: 1.4s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-15 {
|
|||
|
|
transition-delay: 1.5s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-16 {
|
|||
|
|
transition-delay: 1.6s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-17 {
|
|||
|
|
transition-delay: 1.7s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-18 {
|
|||
|
|
transition-delay: 1.8s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-19 {
|
|||
|
|
transition-delay: 1.9s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-20 {
|
|||
|
|
transition-delay: 2s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-21 {
|
|||
|
|
transition-delay: 2.1s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-22 {
|
|||
|
|
transition-delay: 2.2s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-23 {
|
|||
|
|
transition-delay: 2.3s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-24 {
|
|||
|
|
transition-delay: 2.4s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-25 {
|
|||
|
|
transition-delay: 2.5s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-26 {
|
|||
|
|
transition-delay: 2.6s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-27 {
|
|||
|
|
transition-delay: 2.7s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-28 {
|
|||
|
|
transition-delay: 2.8s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-29 {
|
|||
|
|
transition-delay: 2.9s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-30 {
|
|||
|
|
transition-delay: 3s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-31 {
|
|||
|
|
transition-delay: 3.1s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-32 {
|
|||
|
|
transition-delay: 3.2s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-33 {
|
|||
|
|
transition-delay: 3.3s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-34 {
|
|||
|
|
transition-delay: 3.4s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-35 {
|
|||
|
|
transition-delay: 3.5s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-36 {
|
|||
|
|
transition-delay: 3.6s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-37 {
|
|||
|
|
transition-delay: 3.7s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-38 {
|
|||
|
|
transition-delay: 3.8s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-39 {
|
|||
|
|
transition-delay: 3.9s;
|
|||
|
|
}
|
|||
|
|
.reveal .present .delay-40 {
|
|||
|
|
transition-delay: 4s;
|
|||
|
|
}
|
|||
|
|
.reveal .light-foreground .sl-block * {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.reveal .dark-foreground .sl-block * {
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .invert {
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .invert * {
|
|||
|
|
color: #fff ;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .invert .only-light-background {
|
|||
|
|
display: none ;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background .invert .only-dark-background {
|
|||
|
|
display: block !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .invert .only-light-background {
|
|||
|
|
display: block !important ;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .invert .only-dark-background {
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
.reveal .slide-number {
|
|||
|
|
position: absolute !important;
|
|||
|
|
opacity: 1;
|
|||
|
|
right: 1em;
|
|||
|
|
height: 28px;
|
|||
|
|
min-width: 28px;
|
|||
|
|
bottom: auto;
|
|||
|
|
left: auto;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 14px;
|
|||
|
|
border-radius: 28px;
|
|||
|
|
line-height: 28px;
|
|||
|
|
color: white;
|
|||
|
|
text-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4);
|
|||
|
|
top: 1em;
|
|||
|
|
font-family: "Overpass 2", Overpass, sans-serif;
|
|||
|
|
font-weight: 500;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
padding: 4px;
|
|||
|
|
box-sizing: content-box;
|
|||
|
|
}
|
|||
|
|
.reveal .slide-number-delimiter {
|
|||
|
|
margin: 0 1px;
|
|||
|
|
}
|
|||
|
|
.reveal.reveal .present.in-3d-appear {
|
|||
|
|
transform: translatez(0em) !important;
|
|||
|
|
animation: none !important;
|
|||
|
|
transition: transform 1s ease !important;
|
|||
|
|
}
|
|||
|
|
.reveal.reveal .future.in-3d-appear {
|
|||
|
|
transform: translatez(10em) rotateX(21deg) !important;
|
|||
|
|
animation: none !important;
|
|||
|
|
}
|
|||
|
|
.reveal .no-filter img,
|
|||
|
|
.reveal .no-filter {
|
|||
|
|
filter: none !important;
|
|||
|
|
-webkit-filter: none !important;
|
|||
|
|
}
|
|||
|
|
.reveal .present .fade-in-slow {
|
|||
|
|
transition: all 5s ease;
|
|||
|
|
}
|
|||
|
|
.reveal .future .fade-in-slow {
|
|||
|
|
transition: none;
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.reveal .redhat-logo .logotext {
|
|||
|
|
fill: #000000 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background .redhat-logo .logotext {
|
|||
|
|
fill: #ffffff !important;
|
|||
|
|
}
|
|||
|
|
.reveal [data-block-type="table"] .sl-block-content {
|
|||
|
|
font-size: .75em;
|
|||
|
|
background-color: #c00;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.reveal [data-block-type="table"] td {
|
|||
|
|
background-color: #e5e5e5;
|
|||
|
|
color: #333;
|
|||
|
|
border-color: white;
|
|||
|
|
}
|
|||
|
|
.reveal div[data-block-type="table"] th {
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.reveal [data-block-type="table"] tr:nth-child(odd) td {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background > [data-block-type="table"] td {
|
|||
|
|
background-color: #131619;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background > [data-block-type="table"] tr:nth-child(odd) td {
|
|||
|
|
background-color: #232629;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.reveal [data-block-type="code"],
|
|||
|
|
.reveal .hljs {
|
|||
|
|
background-color: white ;
|
|||
|
|
color: rgba(55, 55, 55, 0.85) !important;
|
|||
|
|
}
|
|||
|
|
.reveal section .hljs {
|
|||
|
|
background-color: white !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background [data-block-type="code"],
|
|||
|
|
.reveal .has-dark-background .hljs {
|
|||
|
|
background-color: #012736!important ;
|
|||
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|||
|
|
}
|
|||
|
|
.reveal [data-block-type="code"] pre {
|
|||
|
|
letter-spacing: 0.015em;
|
|||
|
|
line-height: 1.5em;
|
|||
|
|
}
|
|||
|
|
.reveal .has-light-background[data-block-type="code"] pre,
|
|||
|
|
.reveal [data-block-type="code"] pre {
|
|||
|
|
background-color: white ;
|
|||
|
|
color: currentcolor;
|
|||
|
|
padding: 1em !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background [data-block-type="code"] pre {
|
|||
|
|
background-color: #012736 ;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs,
|
|||
|
|
.reveal pre,
|
|||
|
|
.reveal code {
|
|||
|
|
font-family: 'Overpass Mono', monospace !important;
|
|||
|
|
font-weight: 200 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-literal {
|
|||
|
|
color: #ffb612 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-keyword {
|
|||
|
|
color: #ffb612;
|
|||
|
|
font-weight: 700 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-string {
|
|||
|
|
color: #88c639;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-comment {
|
|||
|
|
color: #94a0a7 !important;
|
|||
|
|
font-weight: 400 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-params {
|
|||
|
|
color: #028c98 ;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-attr {
|
|||
|
|
color: #EC7A08 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-tag {
|
|||
|
|
color: #7F5FAE !important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-name {
|
|||
|
|
color: #028c98 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-string {
|
|||
|
|
color: #7f5fae !important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-comment {
|
|||
|
|
color: rgba(125, 125, 125, 0.65) !important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-number {
|
|||
|
|
color: #4e9fdd !important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-attribute {
|
|||
|
|
color: #ec9e34 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-variable {
|
|||
|
|
color: #4e9fdd !important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-built_in {
|
|||
|
|
color: #ee1122!important;
|
|||
|
|
}
|
|||
|
|
.reveal .hljs-selector-class {
|
|||
|
|
color: #55aab2 !important;
|
|||
|
|
}
|
|||
|
|
.reveal [data-line-end-type="line-arrow"] line,
|
|||
|
|
.reveal [data-line-start-type="line-arrow"] line,
|
|||
|
|
.reveal [data-line-end-type="line-arrow"] path {
|
|||
|
|
stroke-linecap: round;
|
|||
|
|
stroke-linejoin: square;
|
|||
|
|
}
|
|||
|
|
.reveal div[data-block-type="line"] line[stroke="#000000"],
|
|||
|
|
.reveal div[data-block-type="line"] path[stroke="#000000"] {
|
|||
|
|
stroke: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="none"] {
|
|||
|
|
fill: none !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#a30000"] {
|
|||
|
|
fill: #aa0000 !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#cc2029"],
|
|||
|
|
.reveal [fill="#cb2027"],
|
|||
|
|
.reveal [fill="#c00"] {
|
|||
|
|
fill: #cc0000 !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#fff"] {
|
|||
|
|
fill: #ffffff !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#6d6e70"] {
|
|||
|
|
fill: #6d6e70 !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#231f20"] {
|
|||
|
|
fill: currentcolor !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#efab1f"] {
|
|||
|
|
fill: #efab1f !important;
|
|||
|
|
}
|
|||
|
|
.reveal [fill="#92d400"] {
|
|||
|
|
fill: #92d400 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background [fill="#6d6e70"] {
|
|||
|
|
fill: #266272 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background [fill="#fff"] {
|
|||
|
|
fill: #555555 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background [fill="#fff"] {
|
|||
|
|
fill: #333333 !important;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background [stroke="#231f20"] {
|
|||
|
|
stroke: currentcolor;
|
|||
|
|
}
|
|||
|
|
.reveal .has-dark-background [fill="#221F1F"],
|
|||
|
|
.reveal .has-dark-background [fill="#221f1f"],
|
|||
|
|
.reveal .has-dark-background [fill="#231F20"],
|
|||
|
|
.reveal .has-dark-background [fill="#010101"] {
|
|||
|
|
fill: #ffffff !important;
|
|||
|
|
}
|
|||
|
|
.reveal [data-inline-svg="true"] img {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.reveal .corner {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
z-index: 8;
|
|||
|
|
}
|
|||
|
|
.reveal .corner svg {
|
|||
|
|
transition: all .75s ease 5s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body class="reveal-viewport theme-font-overpass2 theme-color-no-color">
|
|||
|
|
<div class="reveal">
|
|||
|
|
<div class="slides">
|
|||
|
|
<section data-background-color="#079cd5" data-id="f578020bea69fec6a593f086f93c7452"><div data-block-id="37ff92110d5260fbb6d73ae7a03eb7c2" class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 250px; height: auto;"><div style="z-index: 10;" class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
|
|||
|
|
<h1>What's Next</h1>
|
|||
|
|
|
|||
|
|
<h1>For Containers</h1>
|
|||
|
|
</div></div>
|
|||
|
|
<div data-block-id="d38a6cf93cf1850360e049623f26ca1b" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 200px; top: 475px;" data-block-type="text" class="sl-block"><div style="z-index: 12;" data-placeholder-text="Text" data-placeholder-tag="p" class="sl-block-content">
|
|||
|
|
<p>Vincent Batts (vbatts)</p>
|
|||
|
|
</div></div></section><section data-id="2587bca6e27e0459bf4b2723f0dbe359" data-background-color="#079cd5" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg"><div class="sl-block" data-block-type="code" style="min-width: 30px; min-height: 30px; width: 635px; height: 300px; left: 163px; top: 120px;" data-block-id="6e07ae198e2068bea79895b46fb4b2e2"><div class="sl-block-content" style="z-index: 11;"><pre class="bash"><code>$> finger $(whoami)
|
|||
|
|
Login: vbatts Name: Vincent Batts
|
|||
|
|
Directory: /home/vbatts Shell: /bin/bash
|
|||
|
|
Such mail.
|
|||
|
|
Plan:
|
|||
|
|
OHMAN
|
|||
|
|
$> id -Gn
|
|||
|
|
devel opencontainers docker appc redhat golang slackware</code></pre></div></div></section><section data-background-color="#6ec1e3" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="a27bc586ebe2bdc0dcd7d7d0010de4f3"><div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 46px; top: 120px;" data-block-id="01fc9f71aa8afef958bb13413cc3860f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;" dir="ui"><p><span style="font-size:1.6em">Get Past the Hype</span></p></div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 120px; top: 190px;" data-block-id="dda3b6de341667dbecd8badbaaef8b8b"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui" data-fragment-index="0">
|
|||
|
|
<p><span style="font-size:1.6em">Make Containers Boring</span></p>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 486px; height: 203.721px; left: 283px; top: 318px;" data-block-id="1811fa3f92a191ec5a0240e20d96bf99"><div class="sl-block-content fragment" style="z-index: 13;" data-fragment-index="1"><img data-natural-width="365" data-natural-height="153" data-lazy-loaded="" data-src="let-s-make-containers-boring-10/84e6ddbe805664d194775b25510ba889.gif"></div></div></section><section data-background-color="#b6e7f5" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="bc6da7bf30f133452a208c1eaf3ecd91"><div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 46px; top: 120px;" data-block-id="44a27a8aea6d4b290ce3726214279994"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 10;" dir="ui">
|
|||
|
|
<p><span style="font-size:32px">Common Interfaces</span></p>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 80px; top: 210px;" data-block-id="6fc4f2cc047d172be785d9a8a0efc03e"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;" data-fragment-index="0">
|
|||
|
|
<p>Standards</p>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li>OpenContainers (OCI) <a href="https://github.com/opencontainers/runtime-spec" target="_blank">runtime</a> and <a href="http://github.com/opencontainers/image-spec" target="_blank">image</a> specification</li>
|
|||
|
|
<li><a href="https://cncf.io/" target="_blank">Cloud Native Compute Foundation (CNCF)</a></li>
|
|||
|
|
<li>
|
|||
|
|
<a href="https://github.com/containernetworking/cni" target="_blank">Container Network Interface (CNI)</a> </li>
|
|||
|
|
</ul>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 80px; top: 350px;" data-block-id="0c3f2bf328d95c1886e954ec83bd3f2c"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="0">
|
|||
|
|
<p>Interface</p>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="https://github.com/kubernetes/kubernetes/blob/master/docs/proposals/container-runtime-interface-v1.md" target="_blank">Kubernetes Container Runtime Interface (CRI)</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div></div></section><section class="stack" data-id="296f5492de71921cdcc9101bc181b8a2"><section data-background-color="#d6f1fa" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="f8c611373ef67e5d3326289d7979e78c"><div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 46px; top: 120px;" data-block-id="9c452bce859ef147c29caaff121225e3"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;" dir="ui">
|
|||
|
|
<p><span style="font-size:32px">What is needed next?</span></p>
|
|||
|
|
</div></div>
|
|||
|
|
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 160px; top: 210px;" data-block-id="441489365496ecd365e62c0b701d382b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
|||
|
|
<ul>
|
|||
|
|
<li><span style="font-size:1.2em">Unified plumbing</span></li>
|
|||
|
|
<li><span style="font-size:1.2em">Discoverable</span></li>
|
|||
|
|
<li><span style="font-size:24px">UX</span></li>
|
|||
|
|
</ul>
|
|||
|
|
</div></div></section><section data-background-color="#d6f1fa" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="d907a15dea82c41732b4e9b4b8a569f1"><div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 180px; top: 280px;" data-block-id="f94b495baf782eb27f41f6133115c524"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;" dir="ui">
|
|||
|
|
<pre style="text-align: center;"><span style="font-size:1.2em">“Getting your chi right with systemd”
|
|||
|
|
|
|||
|
|
Then it all makes sense</span></pre>
|
|||
|
|
</div></div>
|
|||
|
|
|
|||
|
|
</section><section data-background-color="#d6f1fa" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="f7d8268af84b7dacb16f8d6297b18464"><div class="sl-block" data-block-type="text" style="height: auto; width: 892px; left: 34px; top: 252px;" data-block-id="0fb59c297d9886a9c74abac2072cae93"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 10;" dir="ui">
|
|||
|
|
<ul>
|
|||
|
|
<li class="fragment" data-fragment-index="0">
|
|||
|
|
<pre>systemd-nspawn -M httpd bash</pre>
|
|||
|
|
</li>
|
|||
|
|
<li class="fragment" data-fragment-index="1">
|
|||
|
|
<pre>machinectl start httpd</pre>
|
|||
|
|
</li>
|
|||
|
|
<li class="fragment" data-fragment-index="2">
|
|||
|
|
<pre>systemctl start systemd-nspawn@httpd.service</pre>
|
|||
|
|
</li>
|
|||
|
|
<li class="fragment" data-fragment-index="3">
|
|||
|
|
<pre>systemd-run -M httpd /usr/bin/tail -f /dev/null</pre>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<p>(has to be an already running container)</p>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<pre>machinectl shell httpd /usr/bin/systemctl status run-u69.service</pre>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div></div>
|
|||
|
|
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 46px; top: 120px;" data-block-id="26d6793dcbe2b9a61b6b5380b6d4f29e"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
|
|||
|
|
<p><span style="font-size:32px">Let's start a container</span></p>
|
|||
|
|
</div></div></section><section data-background-color="#d6f1fa" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="9c25060f3896ce1a78c6fc73f0d17302"><div class="sl-block" data-block-type="text" style="height: auto; width: 892px; left: 34px; top: 252px;" data-block-id="cbeddf1d86255ae15bf98e0ea8352f7d"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;" dir="ui">
|
|||
|
|
<ul>
|
|||
|
|
<li class="fragment" data-fragment-index="0">
|
|||
|
|
<pre>machinectl status httpd</pre>
|
|||
|
|
</li>
|
|||
|
|
<li class="fragment" data-fragment-index="1">
|
|||
|
|
<pre>systemctl status systemd-nspawn@httpd.service</pre>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div></div>
|
|||
|
|
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 180px; top: 405px;" data-block-id="755250e75ed3b34700dbcade77f1803b"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" data-fragment-index="2">
|
|||
|
|
<p style="text-align: center;">Different views/properties for the same service</p>
|
|||
|
|
</div></div></section><section data-background-color="#d6f1fa" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="9aeb02010f4767daa45dd9e352ec2e1c">
|
|||
|
|
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; width: 892px; left: 26px; top: 178px;" data-block-id="1367dc9dff4fd146613a96d892636458"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;" dir="ui">
|
|||
|
|
<pre>/etc/systemd || /usr/lib/systemd</pre>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 160px; top: 405px;" data-block-id="44b40d9d9328dda2b28011462d105b59"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
|||
|
|
<ul>
|
|||
|
|
<li class="fragment" data-fragment-index="4">
|
|||
|
|
<pre>systemd.nspawn(5)</pre>
|
|||
|
|
</li>
|
|||
|
|
<li class="fragment" data-fragment-index="5">
|
|||
|
|
<pre>systemd.network(5)</pre>
|
|||
|
|
</li>
|
|||
|
|
<li class="fragment" data-fragment-index="6">
|
|||
|
|
<pre>systemd.resource-control(5)</pre>
|
|||
|
|
</li>
|
|||
|
|
<li class="fragment" data-fragment-index="7">
|
|||
|
|
<pre>systemd.directives(7)</pre>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 780px; left: 20px; top: 210px;" data-block-id="e3b7833a5c09d6c1d048b3104aabcb54"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
|||
|
|
<ul>
|
|||
|
|
<li class="fragment" data-fragment-index="0">
|
|||
|
|
<pre>./nspawn/https.nspawn</pre>
|
|||
|
|
</li>
|
|||
|
|
<li class="fragment" data-fragment-index="1">
|
|||
|
|
<pre>./system/systemd-nspawn@httpd.service.d/50-Memory.conf</pre>
|
|||
|
|
</li>
|
|||
|
|
<li class="fragment" data-fragment-index="2">
|
|||
|
|
<pre>./system/lamp-stack.slice</pre>
|
|||
|
|
</li>
|
|||
|
|
<li class="fragment" data-fragment-index="3">
|
|||
|
|
<pre>./system/machines.target.wants/systemd-nspawn@httpd.service</pre>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div></div></section><section data-background-color="#d6f1fa" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="78585055ba8c568e3fcfd0c0117bd642">
|
|||
|
|
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; width: 892px; left: 26px; top: 178px;" data-block-id="38307ca047e9d5e23adc66e13a50d199"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;" dir="ui">
|
|||
|
|
<pre>/etc/systemd/user || /home/$USER/.config/systemd/user</pre>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 80px; top: 280px;" data-block-id="a9418d115a49b46fe194f7d5f5da9107"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" data-fragment-index="0">
|
|||
|
|
<p><span style="font-size:1.2em">Next?</span></p>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 180px; top: 335px;" data-block-id="7245c67bf8f202a12c0e9598ef45a0a4"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="0">
|
|||
|
|
<ul>
|
|||
|
|
<li>Limited user service containers</li>
|
|||
|
|
<li>bwrap@.service ?</li>
|
|||
|
|
<li>Different from user namespaced nspawn containers</li>
|
|||
|
|
</ul>
|
|||
|
|
</div></div></section></section><section class="stack" data-id="74dc132775ac5f41dba857b9109b56a0"><section data-background-color="#bed9b3" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="ac3d8f09236a0d4ab624219c52f4e76b">
|
|||
|
|
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 80px; top: 110px;" data-block-id="c8a3800577866e52db96a9a5f320bf43"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;">
|
|||
|
|
<h3>Other Points:</h3>
|
|||
|
|
</div></div>
|
|||
|
|
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 160px; top: 210px;" data-block-id="d53f06c1d160136b15a03e31340f5ba8"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
|||
|
|
<pre>Pulling from OpenContainers image
|
|||
|
|
|
|||
|
|
|
|||
|
|
It's in the same vein as portable services</pre>
|
|||
|
|
</div></div></section><section data-background-color="#bed9b3" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="f3e79b1aa1dfca9127f46d92685424a3">
|
|||
|
|
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 80px; top: 110px;" data-block-id="6508eb2e84d5eca83eaa202883ce339f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 10;">
|
|||
|
|
<h3>Other Points:</h3>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; width: 681px; left: 119px; top: 250px;" data-block-id="3508ea5a219f2eb8744e04af931af67c"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;">
|
|||
|
|
<pre>Really glad to see `--network-zone=<NAME>` in v230</pre>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; width: 681px; left: 119px; top: 344px;" data-block-id="f8497d4c8a45b47eea1e79621dd2bdf9"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
|||
|
|
<pre>Would be nice if `--port` could expose to localhost</pre>
|
|||
|
|
</div></div></section><section data-background-color="#bed9b3" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="37a815472d263693f28dede64c8706b6">
|
|||
|
|
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 80px; top: 110px;" data-block-id="dad49d07021705c32802ef923b8be6ed"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;">
|
|||
|
|
<h3>Other Points:</h3>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 814px; left: 80px; top: 210px;" data-block-id="e03e27646b66e3d067b460215bbea860"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui"><pre>User namespaces. Cool and Crazy, but VFS needs to be <em>right</em> <br>(without `chown -R `)
|
|||
|
|
<br>overlayfs == copy up<br>
|
|||
|
|
UID/GID shift.
|
|||
|
|
<a href="https://github.com/systemd/systemd/issues/2404" target="_blank">https://github.com/systemd/systemd/issues/2404</a>
|
|||
|
|
<a href="https://lkml.org/lkml/2016/5/4/411" target="_blank">https://lkml.org/lkml/2016/5/4/411</a>
|
|||
|
|
Current iteration: <a href="https://lkml.org/lkml/2016/5/12/655" target="_blank">https://lkml.org/lkml/2016/5/12/655</a>
|
|||
|
|
Not looking like its issues will get sorted out any time soon.</pre></div></div></section><section data-background-color="#bed9b3" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="b4311770985df18ba225c24074748813">
|
|||
|
|
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 80px; top: 110px;" data-block-id="34e53523e3ec4fca63879350ebae5362"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;">
|
|||
|
|
<h3>Other Points:</h3>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; width: 814px; left: 80px; top: 210px;" data-block-id="fb95e690456d63e65cab829d3ad1b7ce"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
|
|||
|
|
<pre>cgroup namespace + limited user containers</pre>
|
|||
|
|
|
|||
|
|
<p> </p>
|
|||
|
|
|
|||
|
|
<p>currently requires a privileged helper to provide ownership for the pid</p>
|
|||
|
|
|
|||
|
|
<p> </p>
|
|||
|
|
|
|||
|
|
<p>Aleksa Sarai (SUSE) is on v10 of patchset on LKML</p>
|
|||
|
|
</div></div></section><section data-background-color="#bed9b3" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="412dfa095aae2df8cfd9efdd89740119">
|
|||
|
|
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 80px; top: 110px;" data-block-id="1b0a72e8cf619f684f968ac508f1451e"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;">
|
|||
|
|
<h3>Other Points:</h3>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 816px; left: 80px; top: 281px;" data-block-id="1dc76935c663c17a408287b63af854fc"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
|||
|
|
<pre>`machinectl login <name>` is still blocked by selinux on fedora
|
|||
|
|
|
|||
|
|
<a href="https://bugzilla.redhat.com/show_bug.cgi?id=1310464" target="_blank">https://bugzilla.redhat.com/show_bug.cgi?id=1310464</a></pre>
|
|||
|
|
|
|||
|
|
<p> </p>
|
|||
|
|
|
|||
|
|
<p>(the 4 prior BZs were closed as WONTFIX or because EOL)</p>
|
|||
|
|
</div></div></section></section><section data-background-color="#a4cb92" data-background-image="let-s-make-containers-boring-10/90253bef29aa6cf3d220ad379dc57d8c.svg" data-id="53351a5f906376c8708398dc25711079"><div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 54px; top: 169px;" data-block-id="997abab638815010987fb0a1be14b099"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 10;" dir="ui" data-fragment-index="0">
|
|||
|
|
<p><span style="font-size:32px">Thanks!</span></p>
|
|||
|
|
</div></div>
|
|||
|
|
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 360px; height: 333.409px; left: 300px; top: 236px;" data-block-id="a32ebf7820968e70c4a3d4ce2d0c2982"><div class="sl-block-content fragment" style="z-index: 12;" data-fragment-index="0"><img data-natural-width="352" data-natural-height="326" data-lazy-loaded="" data-src="let-s-make-containers-boring-10/e205b50cd19c36e45048cd51a314ae7f.gif"></div></div>
|
|||
|
|
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 40px; top: 120px;" data-block-id="860244bd56cdf1f14b14909f238d8ea2"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui">
|
|||
|
|
<p><span style="font-size:32px">Questions?</span></p>
|
|||
|
|
</div></div></section>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var SLConfig = {"deck": {"id":813888,"slug":"let-s-make-containers-boring-10","title":"What’s next for containers?","description":"","width":960,"height":700,"visibility":"self","published_at":null,"sanitize_messages":null,"thumbnail_url":"https://s3.amazonaws.com/media-p.slid.es/thumbnails/c6b5226357dc3abf72dccb017ea8c01a/thumb.jpg","view_count":0,"user":{"id":352550,"username":"vbatts","name":"Vincent Batts","description":"","thumbnail_url":"https://www.gravatar.com/avatar/a76bbb02d3ce311820f53ef484c0f8bf?s=140\u0026d=https%3A%2F%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png","paid":true,"pro":true,"lite":false,"team_id":32,"settings":{"id":185974,"present_controls":true,"present_upsizing":true,"present_pointer":false,"present_notes":true,"default_deck_tag_id":null},"enterprise":true,"membership":{"role":"member","manager":false,"activated":true}},"background_transition":"none","transition":"none","theme_id":176,"theme_font":"overpass2","theme_color":"no-color","auto_slide_interval":0,"comments_enabled":true,"forking_enabled":false,"rolling_links":false,"center":false,"shuffle":null,"should_loop":false,"share_notes":null,"slide_number":null,"slide_count":18,"rtl":false,"version":2,"collaborative":false,"deck_user_editor_limit":1,"data_updated_at":1510757111346,"font_typekit":null,"font_google":null,"notes":{"f8c611373ef67e5d3326289d7979e78c":"dbus-http (https://github.com/larskarlitski/dbus-http) is a great step, but the DBUS interface is not all-inclusive.","ac3d8f09236a0d4ab624219c52f4e76b":"mounting an image on loopback is clever, but not ideal and likely to expose kernel differences from the image creator and consumer.\nRead-only? Overlayfs? copy-up?\n\nunlike --pull-dkr, this is a versioned metadata and layout.\n\nTar Archives are awful, but this is the reason folks still use them."}}};
|
|||
|
|
|
|||
|
|
SLConfig.theme = {"id":176,"created_at":"2014-05-27T12:38:16.183Z","updated_at":"2018-05-04T07:53:25.097Z","name":"Red Hat Corporate","thumbnail_url":"https://s3.amazonaws.com/media-p.slid.es/thumbnails/66755080be2b0c8c0146bfa70069ef16/thumb.jpg?1525420403","sanitize_messages":null,"slide_template_ids":[56706,56689,28642,36442,27160,26765,26762,56684,56696,56704,56703],"font_typekit":"","font_google":"","width":960,"height":700};
|
|||
|
|
|
|||
|
|
// Use local fonts
|
|||
|
|
SLConfig.fonts_url = 'lib/fonts/';
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script src="lib/head.min.js"></script>
|
|||
|
|
<script src="lib/reveal.min.js"></script>
|
|||
|
|
<script src="lib/offline.js"></script>
|
|||
|
|
|
|||
|
|
<!-- Initialize the presentation -->
|
|||
|
|
<script>
|
|||
|
|
Reveal.initialize({
|
|||
|
|
width: 960,
|
|||
|
|
height: 700,
|
|||
|
|
margin: 0.05,
|
|||
|
|
|
|||
|
|
controls: true,
|
|||
|
|
progress: true,
|
|||
|
|
history: true,
|
|||
|
|
mouseWheel: false,
|
|||
|
|
showNotes: false,
|
|||
|
|
slideNumber: false,
|
|||
|
|
|
|||
|
|
autoSlide: 0 || 0,
|
|||
|
|
autoSlideStoppable: true,
|
|||
|
|
|
|||
|
|
center: false,
|
|||
|
|
shuffle: false,
|
|||
|
|
loop: false,
|
|||
|
|
rtl: false,
|
|||
|
|
|
|||
|
|
transition: "none",
|
|||
|
|
backgroundTransition: "none",
|
|||
|
|
|
|||
|
|
dependencies: [
|
|||
|
|
{ src: 'lib/reveal-plugins/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|||
|
|
{ src: 'lib/reveal-plugins/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|||
|
|
{ src: 'lib/reveal-plugins/highlight/highlight.js', async: true, callback: function() { hljs.initHighlighting(); hljs.initHighlightingOnLoad(); } },
|
|||
|
|
{ src: 'lib/reveal-plugins/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
|
|||
|
|
{ src: 'lib/reveal-plugins/zoom/zoom.js', async: true }
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script id="theme-js-output" type="text/javascript">var themeHTMLOutput = document.getElementById('theme-html-output');
|
|||
|
|
if( themeHTMLOutput ) {
|
|||
|
|
themeHTMLOutput.innerHTML = '<link rel="stylesheet" href="https://overpassmonotest-30e2.kxcdn.com/overpass-mono.css" />';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// (function() {
|
|||
|
|
//
|
|||
|
|
// var slidesInitInterval = setInterval( function() {
|
|||
|
|
// if( window.SL && window.SL.view ) {
|
|||
|
|
// // If we're in the editor, wait for the Blocks controller
|
|||
|
|
// // to be initialized
|
|||
|
|
// if( SL.editor ) {
|
|||
|
|
//
|
|||
|
|
// if( SL.editor.controllers && SL.editor.controllers.Blocks && SL.editor.controllers.Blocks.textSaved ) {
|
|||
|
|
// SL.editor.controllers.Blocks.textSaved.add( function( element ) {
|
|||
|
|
// var html = element.html();
|
|||
|
|
// html = html.replace( /(@RedHat | @redhat)/g, '@redhat' );
|
|||
|
|
// html = html.replace( 'redhat.com', 'redhat.com' );
|
|||
|
|
// html = html.replace( /(Red Hat|red hat|RedHat|Red hat|Redhat|redHat|red Hat)/g, '<span class="name">Red Hat</span>' );
|
|||
|
|
// html = html.replace( /( redhat |redhat )/g, ' <span class="name">Red Hat</span> ' );
|
|||
|
|
// html = html.replace( 'REDHAT', '<span class="name">RED HAT</span>' );
|
|||
|
|
// html = html.replace( 'redhat<', '<span class="name">Red Hat</span><' );
|
|||
|
|
// html = html.replace( 'openshift', '<span class="name">OpenShift</span>' );
|
|||
|
|
// html = html.replace( '<span class="name"><span class="name">Red Hat</span></span>', '<span class="name">Red Hat</span>' );
|
|||
|
|
// html = html.replace( 'redhat.com', 'redhat.com' );
|
|||
|
|
// html = html.replace( 'REDHAT.COM', 'REDHAT.COM' );
|
|||
|
|
// html = html.replace( '@redhat', '@redhat' );
|
|||
|
|
// html = html.replace( /(@RedHatNews | @redhatnews)/g, '@RedHatNews' );
|
|||
|
|
// html = html.replace( /(@RedHat | @redhat)/g, '@RedHatInc' );
|
|||
|
|
// html = html.replace( /(RHEL-OSP|RHELOSP|Red Hat Enterprise Linux OpenStack Platform)/g, 'Red Hat OpenStack Platform' );
|
|||
|
|
// html = html.replace( /(openstack |openstack|open stack|openStack|Openstack)/g, 'OpenStack' );
|
|||
|
|
// html = html.replace( 'openstack', 'OpenStack' );
|
|||
|
|
// html = html.replace( 'openstack<', 'OpenStack<' );
|
|||
|
|
//
|
|||
|
|
// element.html( html );
|
|||
|
|
// } );
|
|||
|
|
//
|
|||
|
|
// clearInterval( slidesInitInterval );
|
|||
|
|
// }
|
|||
|
|
//
|
|||
|
|
// }
|
|||
|
|
// else {
|
|||
|
|
// clearInterval( slidesInitInterval );
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// }, 500 );
|
|||
|
|
//
|
|||
|
|
// })();
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// piwik script
|
|||
|
|
var _paq = _paq || [];
|
|||
|
|
_paq.push(["trackPageView"]);
|
|||
|
|
_paq.push(["enableLinkTracking"]);
|
|||
|
|
|
|||
|
|
(function() {
|
|||
|
|
var u = (("https:" == document.location.protocol) ? "https" : "http") +
|
|||
|
|
"://engstats.redhat.com/piwik/";
|
|||
|
|
_paq.push(["setTrackerUrl", u+"piwik.php"]);
|
|||
|
|
_paq.push(["setSiteId", "8"]);
|
|||
|
|
var d=document, g=d.createElement("script"),
|
|||
|
|
s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
|
|||
|
|
g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function sliceString(selector) {
|
|||
|
|
var elements = document.getElementsByClassName(selector);
|
|||
|
|
|
|||
|
|
|
|||
|
|
for (var h=0; h<elements.length; h++){
|
|||
|
|
var string = elements[h].innerText,
|
|||
|
|
total = string.length,
|
|||
|
|
div = '';
|
|||
|
|
|
|||
|
|
// futile attempt to clean space
|
|||
|
|
var string = elements[h].innerText.trim();
|
|||
|
|
|
|||
|
|
for (var i=0; i<total; i++) {
|
|||
|
|
var letter = string.charAt(i);
|
|||
|
|
div+= '<span class="'+letter+'">'+letter+'</span>';
|
|||
|
|
}
|
|||
|
|
elements[h].innerHTML = div;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
sliceString('lettering');
|
|||
|
|
sliceString('lettering'); //no rogue spaces when fired twice for some reason
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// function sliceString(selector) {
|
|||
|
|
// if (!document.querySelector) return;
|
|||
|
|
// var string = document.querySelector(selector).innerText,
|
|||
|
|
// total = string.length,
|
|||
|
|
// html = '';
|
|||
|
|
// for (var i=0; i<total; i++) {
|
|||
|
|
// var letter = string.charAt(i);
|
|||
|
|
// html+= '<span class="'+letter+'">'+letter+'</span>';
|
|||
|
|
// }
|
|||
|
|
// document.querySelector(selector).innerHTML = html;
|
|||
|
|
//}
|
|||
|
|
//sliceString('.lettering');</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|