Files
pillar/src/styles/_join.sass
Francesco Siddi 2c5dc34ea2 Introducing Pillar Framework
Refactor of pillar-server and pillar-web into a single python package. This
simplifies the overall architecture of pillar applications.

Special thanks @sybren and @venomgfx
2016-08-19 09:19:06 +02:00

177 lines
2.9 KiB
Sass

$slide-height: 600px
.join
position: relative
.slide
position: relative
display: flex
justify-content: center
width: 100%
&.icons
margin: 50px auto 100px auto
flex-direction: row
justify-content: space-around
.join__points_item
display: inline-block
width: 20%
padding: 0 20px
text-align: center
.join__points_item-icon
font-size: 4em
display: block
color: $color-text-dark-secondary
margin: 0 0 15px 0
.join__points_item-title
display: block
font-family: $font-headings
font-size: 1.5em
line-height: 1.2em
color: lighten($color-text, 10%)
.join__points_item-description
margin-top: 25px
display: block
&.image
flex-direction: column
height: $slide-height
width: 100%
background:
repeat: no-repeat
size: cover
color: white
.lead
z-index: 1
max-width: 500px
font-size: 1.2em
padding: 0 50px
text-shadow: 0 0 25px rgba(black, .8)
h1
font:
family: $font-headings
a
color: white
&.right
align-self: flex-end
&.main
text-align: center
align-items: center
h1
z-index: 1
font:
family: $font-headings
font-size: 3.5em
margin: 0
padding: 0 0 15px 0
text-shadow: 0 0 30px rgba(black, .5)
h2
z-index: 1
font:
size: 1.4em
family: $font-headings
margin: 0
padding: 0
weight: 400
max-width: 500px
text-shadow: 0 0 25px rgba(black, .8)
&.subscribe
.box
padding: 15px 65rpx
margin: 25px auto
+container-box
h2
text-align: center
padding: 0 0 15px 0
ul
max-width: 300px
margin: 0 30px
padding: 0
list-style-type: none
li
position: relative
padding: 0
margin: 0
&:after
position: absolute
content: '\f00c'
font-size: 75%
top: 3px
left: -15px
font-family: "FontAwesome"
color: $color-success
a.subscribe
display: inline-block
width: 100%
text-align: center
button.subscribe
color: $color-text-dark
border-color: $color-text-dark
margin: 25px auto 25px auto
transition: opacity .1s
&:hover
opacity: .8
i
padding-left: 10px
.overlay
z-index: 1
.gradient
position: absolute
width: 100%
height: 100%
top: 0
left: 0
right: 0
bottom: 0
z-index: 0
background: linear-gradient(to top, rgba(5,6,6,0.6) 0%, transparent 80%)
&.left
background: linear-gradient(to right, rgba(5,6,6,0.6) 0%, transparent 80%)
&.right
background: linear-gradient(to left, rgba(5,6,6,0.6) 0%, transparent 80%)
button
color: white
border-color: white
padding: 5px 25px
margin: 45px auto 0 auto
font:
family: $font-headings
size: 1.6em
&:hover, &:focus
background-color: rgba(white, .2)
&:active
background-color: rgba(white, .4)
color: white