bespoke-theme-aria3d
Version:
Default theme for ARIA-3D presentations with Bespoke.js
205 lines (175 loc) • 3.38 kB
text/stylus
@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
code
font-family: $monospace
font-style: normal
font-weight: 200
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