New Homepage: Featuring more in the blog posts

This commit is contained in:
2017-11-09 18:37:25 +01:00
parent a34f3435c1
commit 8288b4eab1
4 changed files with 348 additions and 629 deletions

View File

@@ -26,10 +26,8 @@
+media-xs
width: 100%
section.announcement,
section#blog-stream,
section#random-asset
+container-box
section.blog-stream,
section.random-asset
margin: 20px auto
+media-xs
@@ -42,16 +40,23 @@
section#main,
section#side
h3
margin: 0
padding: 15px
cursor: default
font:
family: $font-body
size: 1.4em
h4
padding-bottom: 5px
margin-bottom: 20px
position: relative
&:before
position: absolute
width: 50px
height: 2px
top: 125%
content: ' '
display: block
background-color: $color-primary
a
color: $color-text-dark
color: $color-text
&:hover
color: $color-primary
cursor: pointer
@@ -68,9 +73,7 @@
li.nav-tabs__list-tab
float: left
font:
size: 1.2em
weight: 400
// font-size: 1.1em
border: none
border-bottom: 3px solid transparent
color: $color-text-dark-primary
@@ -86,7 +89,7 @@
a
display: block
text-decoration: none
padding: 15px 20px 10px 20px
padding: 10px 15px 5px
color: $color-text-dark-primary
i
@@ -119,13 +122,14 @@
pointer-events: none
li.create
float: right
cursor: pointer
display: inline-block
float: right
font:
size: 1.2em
weight: 400
display: inline-block
padding: 10px 10px
padding: 5px 10px
margin-top: 3px
a
color: $color-success
@@ -138,35 +142,27 @@
a
cursor: wait
section#stream
section.stream
background-color: white
border-bottom: thin solid $color-background-dark
padding: 15px 15px 0
position: relative
background-color: $color-background-light
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
h3
padding:
top: 25px
left: 15px
bottom: 0
span
padding-left: 5px
color: $color-text-dark-secondary
ul#activity-stream__list
margin: 0
padding: 15px 0
ul.activity-stream__list
list-style: none
margin: 0
padding: 0
$activity-stream-thumbnail-size: 110px
li.activity-stream__list-item
> li
position: relative
display: flex
margin: 0 10px 5px
background-color: white
border-radius: 3px
box-shadow: 0 0 0 1px rgba(black, .05), 0 2px 2px rgba(black, .1)
padding: 10px 0
overflow: hidden
border-top: thin solid $color-background-dark
&:first-child
border: none
&.active .activity-stream__list-details .title
color: $color-primary
@@ -175,7 +171,6 @@
.title
text-decoration: underline
&.video
border-color: $node-type-asset_video
a.image
&:hover
i
@@ -194,16 +189,9 @@
font-size: 3em
transition: font-size 100ms ease-in-out
&.image
border-color: $node-type-asset_image
&.file
border-color: $node-type-asset_file
&.comment
.activity-stream__list-thumbnail
background: transparent
border-color: $node-type-comment
color: $node-type-comment
font-size: 1.2em
box-shadow: none
@@ -351,73 +339,53 @@
padding: 1px 5px
margin-right: 5px
ul.meta
+list-meta
padding: 5px 10px 0 10px
font-size: .85em
color: $color-text-dark-secondary
display: flex
white-space: nowrap
ul.meta
+list-meta
padding: 5px 10px 0 10px
font-size: .85em
color: $color-text-dark-secondary
display: flex
white-space: nowrap
&.extra
margin-top: auto
&.extra
margin-top: auto
li
padding-left: 10px
&:before
left: -5px
&.where-project
+text-overflow-ellipsis
li
padding-left: 10px
&:before
left: -5px
&.where-project
+text-overflow-ellipsis
ul#activity-stream__filters
margin: 0
section.comments
padding: 0 15px 5px
ul
padding: 0
list-style: none
position: absolute
top: 20px
right: 15px
border-radius: 3px
li
float: left
padding: 5px
cursor: pointer
border: thin solid $color-background
border-right: none
background-color: white
color: $color-text-dark-primary
> ul
list-style-type: none
margin: 10px 0 0
&:hover
color: $color-primary
> li
+text-overflow-ellipsis
border-top: thin solid $color-background-dark
padding: 10px 0
/* First is the 'filter by' label */
&:first-child
border: none
background-color: transparent
border-top-left-radius: 3px
border-bottom-left-radius: 3px
color: $color-text-dark-hint
font-size: .9em
&:nth-child(2)
border-top-left-radius: 3px
border-bottom-left-radius: 3px
> a
+text-overflow-ellipsis
color: $color-text
display: block
padding-bottom: 5px
&:last-child
border-right: thin solid $color-background
border-top-right-radius: 3px
border-bottom-right-radius: 3px
&:active
background-color: $color-background-dark
&.active
background-color: $color-background
&.clear:hover
color: $color-danger
section#blog-stream
section.blog-stream
+media-md
padding-left: 10px
+media-sm
padding-left: 10px
position: relative
.feed
@@ -430,20 +398,17 @@
&:hover
color: $color-primary
ul#blog-stream__list
background-color: $color-background-light
> ul
margin: 0
padding: 0
list-style: none
border:
top: thin solid $color-background
bottom-left-radius: 3px
bottom-right-radius: 3px
border-top: thin solid $color-background
.blog-stream__list-item
> li
+container-box
display: flex
padding: 7px 15px
border-top: thin solid $color-background
padding: 15px
margin-bottom: 15px
&:first-child
border-top: none
@@ -452,14 +417,16 @@
bottom-left-radius: 3px
bottom-right-radius: 3px
&.blog-non-featured
border-radius: 0
margin: 0
&.more
font-size: .9em
justify-content: space-between
a
width: 100%
text-align: right
color: $color-text-dark-secondary
&:hover
color: $color-primary
.blog-stream__list-thumbnail
display: block
@@ -470,7 +437,7 @@
min-height: 50px
margin-right: 15px
background-color: $node-type-post
border-radius: 50%
border-radius: 3px
overflow: hidden
img
@@ -481,10 +448,16 @@
font-size: 1.6em
color: $color-text-light-primary
.description
+node-details-description
padding: 5px 15px
.blog-stream__list-details
.title
display: block
color: $color-text-dark-primary
display: block
font-size: 1.3em
&:hover
color: $color-primary
@@ -504,8 +477,8 @@
padding: 0
a.title
font-size: 1.1em
padding: 10px 0 0 15px
font-size: 1.5em
padding: 20px 0 0 15px
display: block
color: $color-text-dark-primary
&:hover
@@ -514,145 +487,34 @@
a.blog-stream__thumbnail
display: block
position: relative
img
border-top-left-radius: 3px
border-top-right-radius: 3px
width: 100%
ul.meta
+list-meta
padding: 5px 15px 10px 15px
font-size: .9em
padding: 5px 15px 10px
section.random-asset
border-bottom: thin solid $color-background-dark
margin: 40px 0
section.announcement
border-bottom: thin solid $color-background
.header-icons
display: flex
align-items: center
justify-content: center
padding: 20px 0 5px 0
i
font-size: 2.5em
color: $color-info
&.pi-heart-filled
color: $color-danger
margin-left: 5px
img.header
width: 100%
margin: 0 auto
border-top-left-radius: 3px
border-top-right-radius: 3px
iframe
width: 100%
position: relative
left: 15px
margin: 25px auto
+media-sm
height: 500px
+media-md
height: 520px
+media-lg
height: 580px
.text
padding: 15px
.title
padding-bottom: 10px
font:
family: $font-body
size: 1.4em
weight: 300
+media-xs
font-size: 1.4em
strong
color: $color-primary-dark
a
color: $color-text-dark-primary
.lead
font-size: 1em
+list-bullets
ul
margin-top: 10px
padding-left: 10px
hr
border: none
height: 1px
width: 100%
margin: 10px 0
background-color: $color-background
clear: both
+media-xs
padding-left: 10px
.buttons
margin: 15px auto 0 auto
display: flex
align-items: center
justify-content: space-around
flex-wrap: wrap
a
+button($color-text-light, 3px)
padding: 5px 0
margin:
bottom: 5px
right: auto
left: auto
font-size: .9em
opacity: 1
flex: 1
+media-xs
margin: 10px auto
width: 100%
&:first-child
margin-right: 15px
&.blue
+button(hsl(hue($color-info), 60%, 45%), 3px)
&.orange
+button(hsl(hue($color-secondary), 50%, 50%), 3px)
padding: 5px 15px
&.green
+button(hsl(hue($color-success), 60%, 40%), 3px, true)
section#random-asset
h3
padding-bottom: 0
h4
padding-left: 15px
ul.random-asset__list
border-top: thin solid $color-background
background-color: $color-background-light
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
padding: 0
margin: 0
list-style: none
padding: 0 15px
.random-asset__list-item
display: flex
> li
align-items: center
padding: 7px 15px
border-top: thin solid $color-background
display: flex
padding: 7px 0
position: relative
overflow: hidden
@@ -667,21 +529,21 @@
size: 12px
weight: 500
z-index: 1
span
padding: 1px 50px
.random-asset__list-thumbnail
width: 50px
min-width: 50px
height: 50px
min-height: 50px
margin-right: 15px
background-color: $color-background
border-radius: 50%
overflow: hidden
display: block
height: 50px
margin-right: 15px
min-height: 50px
min-width: 50px
overflow: hidden
position: relative
width: 50px
img
width: 100%
@@ -707,6 +569,7 @@
display: block
font-size: 1em
color: $color-text-dark-primary
&:hover
color: $color-primary
@@ -721,28 +584,6 @@
&.what
text-transform: capitalize
&.project
padding: 10px 15px
a.title
font-size: 1.2em
a.random-asset__list-thumbnail
border-radius: 3px
ul.meta
padding-top: 0
li.what
text-transform: initial
a
color: $color-text-dark-primary
&:hover
color: $color-text-dark-primary
text-decoration: none
&.featured
align-items: flex-start
flex-direction: column
@@ -750,7 +591,7 @@
a.title
font-size: 1.1em
padding: 10px 0 0 15px
padding: 10px 0 5px
display: block
color: $color-text-dark-primary
&:hover
@@ -759,7 +600,6 @@
a.random-asset__thumbnail
display: block
position: relative
width: 100%
&.video
background-color: black
@@ -767,8 +607,9 @@
opacity: .7
img
width: 100%
transition: opacity 150ms ease-in-out
width: 100%
max-width: 100%
i
+position-center-translate
@@ -785,11 +626,118 @@
ul.meta
+list-meta
padding: 5px 15px 10px 15px
font-size: .9em
padding-bottom: 10px
li.what
text-transform: capitalize
section.announcement
+container-box
margin: 20px 15px
.header-icons
display: flex
align-items: center
justify-content: center
padding: 20px 0 5px 0
i
font-size: 2.5em
color: $color-info
&.pi-heart-filled
color: $color-danger
margin-left: 5px
img.header
width: 100%
margin: 0 auto
border-top-left-radius: 3px
border-top-right-radius: 3px
iframe
width: 100%
position: relative
left: 15px
margin: 25px auto
+media-sm
height: 500px
+media-md
height: 520px
+media-lg
height: 580px
.text
padding: 15px
.title
padding-bottom: 10px
font:
family: $font-body
size: 1.4em
weight: 300
+media-xs
font-size: 1.4em
strong
color: $color-primary-dark
a
color: $color-text-dark-primary
.lead
font-size: 1em
+list-bullets
ul
margin-top: 10px
padding-left: 10px
hr
border: none
height: 1px
width: 100%
margin: 10px 0
background-color: $color-background
clear: both
+media-xs
padding-left: 10px
.buttons
margin: 15px auto 0 auto
display: flex
align-items: center
justify-content: space-around
flex-wrap: wrap
a
+button($color-text-light, 3px)
padding: 5px 0
margin:
bottom: 5px
right: auto
left: auto
font-size: .9em
opacity: 1
flex: 1
+media-xs
margin: 10px auto
width: 100%
&:first-child
margin-right: 15px
&.blue
+button(hsl(hue($color-info), 60%, 45%), 3px)
&.orange
+button(hsl(hue($color-secondary), 50%, 50%), 3px)
padding: 5px 15px
&.green
+button(hsl(hue($color-success), 60%, 40%), 3px, true)
/* Sections for the non-logged in */
@@ -914,159 +862,8 @@ section.pricing
+button($color-success, 3px, true)
section.supported-by
padding: 50px 0
text-align: center
background-color: $color-background
border-top: 5px solid $color-background-dark
img.logos
max-height: 500px
padding: 60px 0 100px 0
+media-xs
max-width: 100%
section.team
background:
color: white
size: cover
position: 50% 50%
padding: 50px 0 40px 0
text-align: center
h2
padding-bottom: 30px
font-size: 2.2em
color: $color-text-light
.people-container
max-width: $screen-lg
margin: 0 auto 60px auto
.people-intro
opacity: 1
position: relative
top: 0
transition: opacity 100ms ease-in-out, top 150ms ease-out
&.active
opacity: 0
top: 15px
h3
font:
family: $font-body
color: $color-danger
span
color: $color-text-light-primary
.people-faces
padding-top: 40px
display: flex
flex: row flex
flex-wrap: wrap
margin: 0 auto
align-items: center
justify-content: center
width: 100%
max-width: 750px
.face
background-color: $color-background
border-radius: 50%
padding: 4px
opacity: 1
width: 120px
height: 120px
margin: 7px 15px
z-index: 0
position: relative
transition: transform 100ms ease-in-out, background-color 100ms ease-in-out, opacity 100ms ease-in-out
+media-xs
height: initial
margin-top: 20px
&:hover
transform: scale(1.1)
z-index: 1
background-color: $color-primary
img
opacity: .8
img
position: relative
width: 100%
border-radius: 50%
transition: opacity 150ms ease-in-out
.people-bio
display: block
width: 100%
position: relative
+media-xs
display: none
.bio
opacity: 0
visibility: hidden
margin: 0
padding: 0
position: absolute
top: -370px
left: 50%
transform: translateX(-50%)
transition: opacity 180ms ease-in-out, top 150ms ease-out
&.active
top: -370px
opacity: 1
visibility: visible
h3
position: relative
top: -18px
font-family: $font-body
color: $color-info
small
position: absolute
left: 50%
transform: translateX(-50%)
bottom: -22px
white-space: nowrap
font-size: .6em
color: $color-text-light-primary
span
color: $color-text-light-hint
&.online
.people-faces
max-width: 1000px
.people-bio
.bio
top: -250px
&.active
top: -240px
body.homepage
.dashboard-container
+media-xs
flex-direction: column-reverse
flex-direction: row-reverse
#main
+media-xs
width: 100%

View File

@@ -226,10 +226,21 @@
margin-bottom: 0
padding-bottom: 100px
.supported-by
img
padding: 50px 0
text-align: center
background-color: $color-background
border-top: 5px solid $color-background-dark
img.logos
padding: 60px 0 100px 0
max-height: 500px
max-width: 100%
+media-xs
max-width: 100%
.assets
padding-bottom: 80px