bespoke-theme-aria3d/lib/example-nebula-theme.styl

Default theme for ARIA-3D presentations with Bespoke.js

@import 'normalizecss/normalize.css'

$background = #111
$orange = #F30
$white = #ddd
$serif = didot, times new roman, serif
$sans-serif = futura, helvetica, arial, arial, sans-serif
$monospace = prestige elite std, consolas, courier new, monospace
$emdash = '\2014'

*
  margin: 0
  padding: 0

html
  text-size-adjust: auto

.bespoke-parent
  font-size: 1.5em
  background: $background
  color: $white
  font-family: $sans-serif
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  overflow: hidden
  text-align: center
  transition: background 1s ease
  background-position: 50% 50%

.bespoke-scale-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  pointer-events: none
  z-index: 1
  .bespoke-active
    pointer-events: auto

.bespoke-slide
  transition: opacity .5s ease
  width: 940px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  z-index: 1

.bespoke-active
  transition-delay: .5s
  &[data-bespoke-backdrop]
    transition-delay: .75s

.bespoke-inactive
  opacity: 0
  pointer-events: none

.bespoke-backdrop
  transition: opacity 1s ease
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  opacity: 0
  &-active
    opacity: 1

.bespoke-progress-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  height: .3vw
  z-index: 1

.bespoke-progress-bar
  background: $white
  position: absolute
  top: 0
  left: 0
  height: 100%
  transition: width 1s ease

.bespoke-bullet
  transition: opacity .3s ease

.bespoke-bullet-inactive
  opacity: 0

strong
  font-weight: 400

hr
  width: 50%
  margin: 1rem auto
  height: 1px
  border: 0
  background: $white

h1, h2, h3, p, li
  padding-left: 20px
  padding-right: 20px

h1, h2, h3, h4, p, li, pre
  font-weight: 200

h1
  letter-spacing: .3em
  text-transform: uppercase
  font-weight: 400
  line-height: 1.4em
  padding: 1em
  border: 1px solid $white
  border-left-width: 0
  border-right-width: 0
  margin: 0.17em 0
  position: relative
  min-width: 8em

h2
  letter-spacing: .3em
  text-transform: uppercase
  font-weight: 400
  line-height: 1.1em
  padding: 0
  padding-left: @letter-spacing
  margin: 0.17em 0
  position: relative

h3
  font-family: $serif
  font-style: italic
  font-size: 1.2em
  line-height: 1.6em
  margin: .5em 0

h4
  text-transform: uppercase
  font-size: .8em
  line-height: 1.8em
  letter-spacing: .3em
  margin: 1em 0

ul, ol
  padding: 0
  margin: 0
  text-align: left

li
  list-style: none
  margin: .2em
  font-style: normal
  transform: translateX(-6px)
  &:before
    content: $emdash
    margin-right: 4px

pre
  background: none !important

code
  font-family: $monospace !important
  font-style: normal
  font-weight: 200 !important
  text-align: left

a
  padding-left: .3em
  color: currentColor
  text-decoration: none
  border-bottom: 1px solid currentColor

.emphatic
  background: $orange

.single-words
  word-spacing: 9999px
  line-height: 2.9em
  overflow: hidden

.bespoke-backdrop
  opacity: 0
  transition: opacity 1s ease, transform 6s ease
  background-size: cover
  background-position: 50% 50%
  transform: translateZ(0) scale(1.3)
  &-active,
  &-before
    transform: translateZ(0)
  &-before
    transition-delay: .2s
  &-active
    opacity: 0.5