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

Add new project landing with jumbotron, responsive iframe, gallery and updates.

Browse Source
This commit is contained in:
Sam Lu
2018-07-25 00:08:57 -05:00
parent a4bbff1ad0
commit b91aeadb45
7 changed files with 237 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/styles/_custom-font.sass
View File

@@ -1,4 +0,0 @@
body
font-family: 'Source Sans Pro', sans-serif
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale

8
src/styles/_footer.sass
View File

@@ -33,18 +33,18 @@ footer.container-fluid
h5
color: $dark
font-weight: 600
font-size: 15px
letter-spacing: 0.6px
margin-bottom: 12px
text-transform: uppercase
p
color: #6d6d6e
font-size: 16px
line-height: 30px
.list-unstyled
a
color: #6d6d6e
li
line-height: 30px
a
color: #6d6d6e
font-size: 16px
.social-icons
.list-inline-item:not(:last-child)
margin-right: 22px

1
src/styles/_jumbotron.sass
View File

@@ -20,7 +20,6 @@
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.30)
.lead
max-width: 722px
letter-spacing: 0.4px
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.80)
p
color: white

28
src/styles/_typography.sass Normal file
View File

@@ -0,0 +1,28 @@
html
// changing font-size here, will change all bootstrap font-sizes
font-size: 20px
body
font-family: 'Source Sans Pro', sans-serif
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
h1
font-size: 48px
line-height: 57px
h2
font-size: 36px
line-height: 47px
h3
font-size: 27px
line-height: 38px
h4
font-size 21px
line-height: 34px
h5
font-size: 15px
letter-spacing: 0.6px
p
font-size: 20px
line-height: 32px
.lead
font-size: 20px
letter-spacing: 0.4px

385
src/styles/project-landing.sass
View File

@@ -1,353 +1,36 @@
@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-header
+media-xs
width: 100%
.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: none
color: $color-text
position: absolute
right: 10px
.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
+media-xs
padding-left: 10px
padding-right: 10px
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%)
.landing
h2
text-align: center
margin-bottom: 40px
@import ../styles/breakpoints
@import ../styles/colors
@import ../styles/typography
@import ../styles/navbar
@import ../styles/jumbotron
@import ../styles/navbar-secondary
@import ../styles/cards
@import ../styles/footer
.node-details-title
&.container
max-width: 730px
.iframe-container
position: relative
padding-top: 25px
padding-bottom: 52%
height: 0
margin-top: 16px
margin-bottom: 32px
iframe
position: absolute
top: 0
left: 0
width: 100%
height: 100%
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%
margin-top: 200px
&:first-child
margin-top: 0
.gallery
.container
max-width: 1190px
.col-sm-3
padding: 20px
img
width: 100%

2
src/styles/projects-index-collection.sass
View File

@@ -1,6 +1,6 @@
@import ../styles/breakpoints
@import ../styles/colors
@import ../styles/custom-font
@import ../styles/typography
@import ../styles/navbar
@import ../styles/jumbotron
@import ../styles/navbar-secondary