We’re taking a break

class: center middle

# We're Taking a Break

---
name: whiteboard
class: center middle big can-edit

Hello

---

class: fullscreen bottom center countdown-clouds
background-image: url('assets/img/bg/unsplash_71vAb1FXB6g.jpg')
background-size: cover

<div class="countdown blink-colon noupdate-60" id="clouds" style="top:0;right:0;bottom:1em;left:0;margin:0;padding:0;font-size:350px;background:none;" data-warnwhen="0">
<code class="countdown-time"><span class="countdown-digits minutes">30</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
</div>

.f4[JavaScript for Shiny Users]

<style type="text/css">
.countdown-clouds .countdown.running .countdown-digits {
  color: var(--dark-blue);
}
.countdown-clouds .countdown.finished .countdown-digits {
  color: var(--pink);
}
</style>

---

class: fullscreen relative
background-image: url('assets/img/bg/unsplash_bpt7mjgrBRQ.jpg')
background-size: cover

<div class="f3 b absolute top-0 right-1 mt3">JavaScript For Shiny Users</div>

<div class="f3 white b absolute bottom-0 right-1 tr mv2 f-lato">
Will Be Back<br>
at .can-edit[13:30]
</div>

---

class: fullscreen relative
background-image: url('assets/img/bg/unsplash_sK1nYjXcXCY.jpg')
background-size: cover

<div class="flex w-100 pt4">
<div class="f-marker f2 black-80 tc w-60">Be back by</div>
</div>
<div class="flex w-100 pt2">
<div class="f-marker f2 black-80 tc w-60 can-edit">10:30</div>
</div>

<div class="js4shiny-hex-sticker"><img src="assets/img/js4shiny_400.png" /></div>

<style type="text/css">
.js4shiny-hex-sticker {
  position: absolute;
  opacity: 0.7;
  width: 10%;
  right: 278px;
  top: 338px;
  transform: rotate(-10deg);
  filter: drop-shadow(0px 0px 1px #686868);
}
</style>

---
name: lunch
class: break white center top
background-image: url('assets/img/bg/unsplash_FH3nWjvia-U.jpg')
background-size: cover

<div class="f2 white f-nunito mt3 can-edit key-location">Continental Ballroom Room 6</div>

---
background-image: url('https://media.giphy.com/media/AaeanOqPuenS0/giphy.gif')
background-size: cover

<div class="countdown blink-colon noupdate-15" id="falling-hex" style="top:0;right:0;bottom:0;left:0;" data-warnwhen="300">
<code class="countdown-time"><span class="countdown-digits minutes">20</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
</div>

.center.absolute.bottom-1.left-0.right-0.white.f6.o-70[
JavaScript for Shiny Users
]

<style type="text/css">
#falling-hex.countdown{
  background: none;
  border: none!important;
  left: 0;
  right: 0;
  font-size: 400px;
  box-shadow: none;
  opacity: 0.75;
}
#falling-hex.countdown .countdown-digits {
  color: white;
  font-weight: bold;
  font-family: var(--font-header);
}
#falling-hex.countdown.running .countdown-digits {
  color: white;
}
#falling-hex.countdown.warning .countdown-digits {
  color: var(--yellow);
}
#falling-hex.countdown.finished .countdown-digits {
  color: var(--light-pink);
}
</style>