archive/blender-cloud
0
1
Fork 1
Code Issues 24 Pull Requests Projects Releases Wiki Activity

New landing page for Hero project

Browse Source
This commit is contained in:
Francesco Siddi
2018-04-16 14:38:08 +02:00
parent cf99383b9c
commit 4769e2e904
3 changed files with 669 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
src/styles/project-landing.sass Normal file
View File

@@ -0,0 +1,347 @@
@import ../../../pillar/src/styles/_config
@import ../../../pillar/src/styles/_utils
$node-latest-thumbnail-size: 160px
$node-latest-gallery-thumbnail-size: 200px
body
background-color: white
.page-body
background-color: white
nav.navbar
background-color: white
.navbar-brand
color: $color-text
li a.navbar-item
color: $color-text
&:hover
color: black
&:focus
color: black
&.active
color: black
.dropdown.open
a
background-color: white
.dropdown.libraries
&:hover
background: none
ul.dropdown-menu
background-color: white
li
a
color: $color-text
&:hover
color: black
background-color: white
.navbar-container
+container-behavior
.navbar-toggle
border: 2px solid $color-text-dark-primary
color: $color-text
.navbar-nav
+media-xs
padding: 10px
.search-input
display: none
.node-details-container
max-width: 620px
font-family: $font-body
font-size: 1.3em
line-height: 1.5em
margin: 0 auto 40px auto
padding-bottom: 40px
border-bottom: thin solid $color-background
p
margin-bottom: 1.3em
header
display: flex
flex-direction: column /* stack flex items vertically */
position: relative
img.header
width: 100%
flex-direction: column /* stack flex items vertically */
position: relative
a.page-card-cta
position: absolute
left: 76%
top: 50%
transform: translate(-50%, -50%)
color: white
font-weight: bold
background: #ff4970
border-radius: 3px
border: none
box-shadow: 1px 1px 0 rgba(black, .2)
padding: 7px 20px
text-decoration: none
text-shadow: none
&:hover
background: lighten(#ff4970, 5%)
h2
text-align: center
margin-bottom: 40px
section
max-width: 1024px
padding-top: 20px
border-top: thin solid $color-background
margin: 0 auto
a.btn
margin: 20px auto
font-size: 1.3em
padding: 9px 18px
border-radius: 8px
color: $color-text-dark
.navbar-secondary
max-width: 620px
margin: 0 auto
.navbar-container
border-bottom: 1px solid #dddddd
.navbar-collapse
padding-left: 0
li
a
padding-left: 20px
padding-right: 20px
color: $color-text
&:hover
&.active
background: none
color: black
box-shadow: 0px 2px 0 rgba(red, .8)
.node-extra
display: flex
flex-direction: column
//padding: 0 20px
width: 100%
.node-updates
flex: 1
font-size: 1.1em
ul
padding: 0
margin: 0 0 15px 0
display: flex
flex-direction: row
flex-wrap: wrap
li
display: flex
flex-direction: column
list-style: none
padding: 5px
cursor: pointer
width: 33.3333%
+media-xs
width: 100%
&.texture, &.group_texture
width: 25%
&:hover
img
opacity: .9
a.title
//color: $color-primary
text-decoration: underline
&.post
.info .title
//color: $node-type-post
font-size: 1.1em
a.image
border: none
//border-color: $node-type-post
background-color: hsl(hue($node-type-post), 20%, 55%)
&.asset.image a.image
border-color: $node-type-asset_image
background-color: hsl(hue($node-type-asset_image), 20%, 55%)
&.asset.file a.image
border-color: $node-type-asset_file
background-color: hsl(hue($node-type-asset_file), 20%, 55%)
&.asset.video a.image
border-color: $node-type-asset_video
background-color: hsl(hue($node-type-asset_video), 20%, 55%)
.image
width: 100%
height: $node-latest-thumbnail-size
min-height: $node-latest-thumbnail-size
max-height: $node-latest-thumbnail-size
background-color: $color-background
margin: 5px auto 10px auto
position: relative
overflow: hidden
border-radius: 0
img
max-height: $node-latest-thumbnail-size
+position-center-translate
i
color: rgba(white, .9)
font-size: 1.8em
position: absolute
bottom: 3px
left: 5px
text-shadow: 1px 1px 0 rgba(black, .2)
&.pi-file-archive
font-size: 1.5em
bottom: 5px
&.pi-newspaper
font-size: 1.6em
left: 7px
.ribbon
+ribbon
.info
width: 100%
height: 100%
display: flex
flex-direction: column
justify-content: space-between
word-break: break-word
.description
font-size: 1em
line-height: 1.8em
padding-top: 8px
color: $color-text-dark-primary
.title
display: block
font-size: 1.3em
color: $color-text-dark
font-weight: 600
+clearfix
+text-overflow-ellipsis
span.details
width: 100%
display: block
font-size: 1em
line-height: 1.2em
padding: 5px 0
color: $color-text-dark-secondary
+clearfix
.who
margin-left: 3px
.what
text-transform: capitalize
$bg-color: #444
$bg-color2: #666
$yellow: rgb(249,229,89)
$almost-white: rgb(255,255,255)
$btn-transparent-color: rgba(249,229,89,1)
$btn-transparent-bg: rgba(249,229,89,0)
section.gallery
max-width: 1024px
margin: 60px auto 0 auto
text-align: center
padding-bottom: 40px
p
color: $almost-white
padding: 0 40px
.thumbnail
float: left
position: relative
width: 23%
padding-bottom: 23%
margin: 0.83%
overflow: hidden
&:hover
box-shadow: 2px 2px 50px 0 rgba(0,0,0,0.3)
.img-container
position: absolute
width: 100%
height: 100%
img
width: 300%
transform: translate(-20%,-10%)
&:hover .img-caption
top: 0
left: 0
.btn-trans
background: rgba(255,255,255,0.4)
.img-caption
position: absolute
width: 100%
height: 100%
background: rgba(0, 0, 0, 0.3)
text-align: center
.table
display: table
.table-cell
display: table-cell
vertical-align: bottom
border: none
@media screen and (max-width: 992px)
.thumbnail
width: 22%
padding-bottom: 22%
margin: 1.5%
.img-container:hover .img-caption
top: 0
left: 0
.img-caption
position: absolute
width: 100%
height: 100%
background: rgba(0, 0, 0, .7)
text-align: center
a
color: $yellow
@media screen and (max-width: 720px)
.thumbnail
width: 29%
padding-bottom: 29%
margin: 2.16%
@media screen and (max-width: 470px)
.thumbnail
width: 44%
padding-bottom: 44%
margin: 3%