/*
Stylesheet for `templates/about.html`
*/
@import mixins
@import variables
$centered-section-min-width: 500px
div.bg
$img-height: 650px
position: fixed
width: 100%
left: 0
z-index: -1
img-1
background: url(../img/about/bg1.png) no-repeat
background-size: cover
height: 600px
top: -300px
img-2
background: url(../img/about/bg2.png) no-repeat
background-size: cover
height: $img-height + 300
top: 1150px
img-3
background: url(../img/about/bg3.png) no-repeat
background-size: cover
height: $img-height + 300
top: 2050px
img-4
background: url(../img/about/bg4.png) no-repeat
background-size: cover
height: $img-height + 400
top: 3200px
div.section
background-color: white
border: 1px solid $baseColor2
margin-bottom: 200px
margin-top: 300px
padding-bottom: 80px
padding-top: 20px
overflow: hidden
top
margin-top: 0px
div#wrap
width: 100%
position: relative
padding-top: 56.782% // aspect ration, 9 / 16
iframe#vimeo
border: 1px solid $baseColor3
margin-top: 40px
position: absolute
top: 0
left: 0
height: none
width: none
div.centered
font-size: 110%
line-height: 150%
margin-left: auto
margin-right: auto
min-width: 500px
width: 65%
how
b
font-family: monospace
font-size: 110%
ul
list-style: none
span
color: $baseColor1
font-weight: bold
h1
color: $baseColor1
span
color: $baseColor2
a
color: #727070
font-style: italic
text-decoration: none
&:hover
@extend .t3
color: #575757
span#title
color: $baseColor1
font-weight: bold
div.person
font-size: 80%
overflow: hidden
top
margin-top: 40px
>div
$image-min-width: 100px
display: inline-block
height: 100%
margin-bottom: 40px
vertical-align: top
&.photo
margin-right: 40px
width: $image-min-width
img
display: block
height: $image-min-width
width: $image-min-width
&.bio
min-width: $centered-section-min-width - $image-min-width - 50px
width: 70%
h1
font-size: 130%
margin: 0