archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Refresh styling on /welcome

Browse Source
This commit is contained in:
Pablo Vazquez
2017-10-18 20:04:41 +02:00
parent 53fe047bca
commit 6fe6345b13
2 changed files with 243 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
src/styles/_join.sass
View File

@@ -1,36 +1,255 @@
.navbar-backdrop.join
background-color: white
+media-xs
background-size: initial
.join
position: relative
nav.navbar
background-color: white
.navbar-brand
color: $color-text
li a.navbar-item
color: $color-text
.navbar-container
+container-behavior
#page-header
display: block
padding: 30px 0 150px 0
font-size: .9em
min-height: 500px
.container
+media-sm
margin-left: 0
.page-title, .page-title-summary
.page-title,
.page-title-summary
line-height: 1.2em
text-align: left
text-shadow: none
text-shadow: 1px 1px 0 rgba(black, .5), 0 0 25px rgba(black, .5)
ul
margin-bottom: 25px
li.special
color: $color-danger
.page-header-cta-container
margin: 30px 0 50px 60px
justify-content: flex-start
.page-title-summary
font-size: 1.4em
li.special
color: $color-success
font-weight: bold
.page-section-container .page-card-side
padding: 60px 25px
.page-card
&:nth-child(even)
background-color: white
&-header
margin-bottom: 0
&-side
+media-xs
width: 100%
max-width: 100%
&.text
+media-xs
padding-left: 50px
padding:
bottom: 150px
top: 150px
&.right
background-color: $color-background-light
.page-card-title,
.page-card-summary
padding-left: 25px
.page-card-title:after
left: 25px
.text
+media-xs
padding-left: 25px
&.intro
+media-xs
margin-left: 50px
.page-card-side
+media-sm
max-width: 500px
max-width: 600px
padding:
bottom: 0
top: 50px
&+.page-card-header
padding-top: 0
.page-card-summary
font-size: 1.2em
.page-card-image
align-items: center
display: flex
height: 100%
justify-content: center
&.light
overflow: hidden
position: relative
.learn
color: white
font-size: .8em
text-decoration: underline
.page-card
&-title
color: white
font-weight: bold
&:after
border-color: white
&-summary
color: white
position: relative
text-shadow: 1px 1px 0 rgba(black, .5), 0 0 25px rgba(black, .2)
z-index: 1
p
font-size: .9em
a
color: white
text-decoration: underline
a.page-card-cta
background: #ff4970
border-radius: 3px
border: none
box-shadow: 1px 1px 0 rgba(black, .2)
font-size: .8em
font-weight: bold
margin-top: 25px
padding: 7px 20px
text-decoration: none
text-shadow: none
&:hover
background: lighten(#ff4970, 5%)
.page-card-image
img
+media-xs
display: none
max-width: initial
position: absolute
width: initial
z-index: 0
&.training
margin-top: 45px
a.page-card-cta
background: #0082ff
.page-card-image
img
right: 50px
top: 50%
transform: translateY(-50%)
&.open-movies
.page-card-image
img
top: 50px
left: 50px
&.services
.page-card-image
img
left: 50px
&.subscribe
padding: 40px 0
text-align: center
span strong
color: $color-danger
.page-card-side
width: 100%
max-width: 100%
.page-card-title
line-height: 1.5em
color: white
text-align: center
padding-bottom: 15px
&:after
border: none
.page-card-summary
color: $color-text-light-primary
.page-card-cta
text-align: center
font-size: 1.3em
padding: 7px 35px
margin-right: initial
border: thin solid rgba(white, .8)
border-radius: 3px
.training-other
color: $color-text-dark-secondary
font-size: .9em
padding: 30px
text-align: center
a
color: $color-text-dark-secondary
.pricing
+media-xs
padding-top: 30px
margin-bottom: 0
padding-bottom: 100px
.supported-by
img
max-width: 100%
.assets
padding-bottom: 80px
.flex
+media-xs
flex-direction: column
display: flex
.box
flex: 1
margin: 20px
.page-triplet-container
.triplet-card
+media-xs
margin-top: 20px
.navbar
.nav-item-sign-in
a.navbar-item
background-color: $color-primary
border: none
border-radius: 3px
color: white
height: auto
font-weight: bold
margin-top: 5px
margin-left: 10px
padding: 10px 20px
&:hover
background-color: lighten($color-primary, 10%)
box-shadow: none
.container.wide-on-sm
+media-sm
width: 100%

130
src/styles/_pages.sass
View File

@@ -353,35 +353,8 @@ $page-card-icon-size: 75px
+position-center-translate
/* Subscribe specifics */
&.subscribe
background-color: $color-background-nav
text-align: center
padding: 60px 0
.page-card-side
width: 100%
max-width: 100%
.page-card-title
color: white
text-align: center
padding-bottom: 25px
&:after
border: none
.page-card-summary
color: $color-text-light-primary
.page-card-cta
text-align: center
font-size: 1.5em
padding: 10px 40px
margin-right: initial
a.page-card-cta
+button($color-primary, 3px, true)
padding: 5px 30px
margin-right: 25px
font-size: 1em
@@ -457,106 +430,3 @@ a.page-card-cta
.page-card-header.dark
&:after
border: none
.join.navbar-backdrop-overlay
background: linear-gradient(rgba(white, .3) 0%, transparent 60%)
.join
span.text-background
+text-background(white, darken($color-primary, 30%), 2px, 5px 0)
p
padding: 0
margin-left: -10px
ul
margin: 0
padding: 0
li span.text-background
padding-left: 15px
position: relative
left: -10px
&:before
content: "·"
color: white
position: relative
left: -10px
#page-header
padding: 0 0 0 20px
.page-title
font:
size: 2.8em
.page-title-summary
font:
style: normal
size: 1.4em
weight: 400
.page-header-cta-container
margin: 0
.page-card
&:nth-child(even)
background-color: white
&.right
background-color: $color-background-light
.page-card-title,
.page-card-summary
padding-left: 25px
.page-card-title:after
left: 25px
&.dark.right
.page-card-title,
.page-card-summary
padding-left: 0
.page-card-title:after
left: 0
&.oneofus
display: block
text-align: center
min-height: initial
padding: 25px
color: transparent
background-color: $color-background-light
border-top: thin solid $color-background
font:
size: 1.4em
transition: color 350ms ease-in-out
a, strong
color: transparent
transition: color 350ms ease-in-out
&.active
color: $color-text-dark-primary
a
color: $color-primary
strong
color: $color-danger
.page-card-header
margin-bottom: 0
.page-card-header.dark
margin-bottom: -50px
&:after
border: none
.page-card-side
+media-xs
width: 100%
max-width: 100%
.page-card-image
img
border-radius: 3px