From 1fac97e3f8052493ebc6169a2502479d843d44dd Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Mon, 17 Sep 2018 12:52:01 +0200
Subject: [PATCH] Homepage: style sidebar and cleanup CSS

homepage.sass is like 10 lines now :)
---
 src/styles/_homepage.sass  | 466 -------------------------------------
 src/templates/homepage.pug |  90 ++-----
 2 files changed, 20 insertions(+), 536 deletions(-)

diff --git a/src/styles/_homepage.sass b/src/styles/_homepage.sass
index 72d1d5b..a90c135 100644
--- a/src/styles/_homepage.sass
+++ b/src/styles/_homepage.sass
@@ -1,471 +1,5 @@
-
-
-.title-underline
-	padding-bottom: 5px
-	position: relative
-	margin-bottom: 20px
-
-	&:before
-		background-color: $primary
-		content: ' '
-		display: block
-		height: 2px
-		top: 125%
-		position: absolute
-		width: 50px
-
-
-nav#nav-tabs,
-nav#sub-nav-tabs
-	ul#nav-tabs__list,
-	ul#sub-nav-tabs__list
-		margin: 0
-		padding: 0
-		list-style: none
-		border-bottom: thin solid $color-background
-		+clearfix
-
-		li.nav-tabs__list-tab
-			float: left
-			border: none
-			border-bottom: 3px solid transparent
-			color: $color-text-dark-primary
-			user-select: none
-
-			&:hover
-				border-color: rgba($color-secondary, .3)
-				cursor: pointer
-				color: $color-text-dark
-				a
-					color: $color-text-dark
-
-			a
-				display: block
-				text-decoration: none
-				padding: 10px 15px 5px
-				color: $color-text-dark-primary
-
-			i
-				margin-right: 5px
-				color: $color-text-dark-secondary
-				font-size: .9em
-
-				&.pi-blender
-					margin-right: 10px
-
-			span
-				color: $color-text-dark-hint
-				margin-left: 5px
-
-			&.active
-				border-color: $color-secondary
-				color: $color-secondary-dark
-				a, i
-					color: $color-secondary-dark
-
-			&.disabled
-				border-color: $color-background-light
-				color: $color-text-dark-hint
-				cursor: default
-				a, i
-					color: $color-text-dark-hint
-
-				&:hover
-					border-color: $color-background-light
-					pointer-events: none
-
-.dashboard-container
-	word-break: break-word
-
-section.stream
-	ul.activity-stream__list
-		$activity-stream-thumbnail-size: 110px
-
-		> li
-			position: relative
-			display: flex
-			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
-
-			&:hover
-				.title
-					text-decoration: underline
-				&.video
-					a.image
-						&:hover
-							i
-								font-size: 3.5em
-							img
-								opacity: .9
-						img
-							opacity: .7
-							z-index: 0
-							transition: opacity 150ms ease-in-out
-
-						i
-							+position-center-translate
-							z-index: 1
-							color: rgba(white, .6)
-							font-size: 3em
-							transition: font-size 100ms ease-in-out
-
-			&.comment
-				.activity-stream__list-details
-					padding: 0
-					.title
-						color: $color-text-dark
-						padding: 7px 10px 2px 10px
-						font-size: 1em
-						margin: 0
-
-					ul.meta
-						+list-meta
-						font-size: .9em
-						padding: 0 10px 7px 10px
-
-						li
-							&.where-parent:before
-								content: '\e83a'
-								font-family: 'pillar-font'
-
-							&.what:before
-								display: none
-
-			&.post
-				.activity-stream__list-thumbnail
-					border-color: $node-type-post
-					background-color: $node-type-post
-				.activity-stream__list-details .title
-					color: darken($node-type-post, 15%)
-					font:
-						size: 1.3em
-						weight: 500
-
-			&.asset, &.comment, &.post
-				&:hover
-					cursor: pointer
-			&.empty
-				display: none
-				color: $color-text-dark-primary
-				padding: 20px
-				text-align: center
-				span
-					color: $color-primary
-					&:hover
-						text-decoration: underline
-						cursor: pointer
-
-			&.with-picture
-				min-height: $activity-stream-thumbnail-size
-
-				.activity-stream__list-thumbnail
-					background-color: black
-					width: $activity-stream-thumbnail-size * 1.69
-					min-width: $activity-stream-thumbnail-size * 1.69
-
-					.activity-stream__list-thumbnail-icon
-						position: absolute
-						top: 0
-						left: 0
-						right: 0
-						bottom: 0
-						font-size: 1.3em
-						text-shadow: 1px 1px 0 rgba(black, .2)
-						background-image: linear-gradient(10deg, rgba(black, .5) 0%, transparent 40%)
-
-						i
-							position: absolute
-							bottom: -8px
-							left: 20px
-							top: initial
-							right: initial
-							color: white
-
-			.activity-stream__list-thumbnail
-				position: relative
-				display: flex
-				justify-content: center
-				align-items: center
-				overflow: hidden
-				width: 35px
-				height: auto
-				min-width: 35px
-				min-height: auto
-
-				+media-xs
-					display: none
-
-
-				&.image i
-					color: $node-type-asset_image
-				&.file i
-					color: $node-type-asset_file
-				&.video i
-					color: $node-type-asset_video
-
-				i
-					+position-center-translate
-					left: 23px
-					top: 21px
-					font-size: 1.1em
-
-				img
-					max-height: $activity-stream-thumbnail-size
-					+position-center-translate
-
-			.activity-stream__list-details
-				display: flex
-				flex-direction: column
-				justify-content: space-around
-				flex: 1
-				overflow: hidden
-				position: relative
-				max-width: 100%
-				padding: 10px 0
-
-				+media-xs
-					margin-left: 0
-
-				.ribbon
-					right: -47px
-					top: 5px
-					font-size: 12px
-
-					span
-						padding: 1px 50px
-
-				.title
-					padding: 0 10px
-					color: $color-text-dark
-
-					span
-						@include badge(hsl(hue($color-success), 60%, 45%), 3px)
-						font-size: .7em
-						padding: 1px 5px
-						margin-right: 5px
-
-
-section.random-asset
-	border-bottom: thin solid $color-background-dark
-
-	ul.random-asset__list
-		list-style: none
-		padding: 0
-
-		> li
-			align-items: center
-			border-top: thin solid $color-background
-			display: flex
-			padding: 7px 0
-			position: relative
-			overflow: hidden
-
-			&:first-child
-				border-top: none
-
-			.ribbon
-				right: -47px
-				top: 5px
-				font:
-					size: 12px
-					weight: 500
-
-				z-index: 1
-
-				span
-					padding: 1px 50px
-
-			.random-asset__list-thumbnail
-				background-color: $color-background
-				display: block
-				height: 50px
-				margin-right: 15px
-				min-height: 50px
-				min-width: 50px
-				overflow: hidden
-				position: relative
-				width: 50px
-
-				img
-					width: 100%
-
-				i
-					+position-center-translate
-					font-size: 1.6em
-					color: $color-text-light
-
-				&.image
-					background-color: $node-type-asset_image
-				&.file
-					background-color: $node-type-asset_file
-					font-size: .8em
-				&.video
-					background-color: $node-type-asset_video
-					font-size: .8em
-				&.None
-					background-color: $node-type-group
-
-			.random-asset__list-details
-				.title
-					display: block
-					font-size: 1em
-					color: $color-text-dark-primary
-
-					&:hover
-						color: $color-primary
-
-				ul.meta
-					+list-meta
-					padding-top: 5px
-					font-size: .9em
-
-					li
-						&:before
-							left: -5px
-						&.what
-							text-transform: capitalize
-
-			&.featured
-				align-items: flex-start
-				flex-direction: column
-				padding: 0
-
-				a.title
-					font-size: 1.1em
-					padding: 10px 0 5px
-					display: block
-					color: $color-text
-
-					&:hover
-						color: $color-primary
-
-				a.random-asset__thumbnail
-					display: block
-					position: relative
-
-					&.video
-						background-color: black
-						img
-							opacity: .7
-
-					img
-						transition: opacity 150ms ease-in-out
-						width: 100%
-						max-width: 100%
-
-					i
-						+position-center-translate
-						color: white
-						font-size: 3em
-						text-shadow: 0 0 25px black
-						transition: font-size 150ms ease-in-out
-
-					&:hover
-						i
-							font-size: 3.5em
-						img
-							opacity: .85
-
-				ul.meta
-					+list-meta
-					padding-bottom: 10px
-
-
-section.announcement
-	+container-box
-	margin-left: 15px
-	margin-right: 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
-
-			+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
-
-
 body.homepage
 	.blog
-		// Custom tweak to Bootstrap grid for the only case when
-		// the post is inside a column (it's usually centered in the page).
-		.col-md-9
-			flex: 1
-			max-width: 100%
-
 		.jumbotron
 			padding-top: 6em
 			padding-bottom: 6em
diff --git a/src/templates/homepage.pug b/src/templates/homepage.pug
index 8f14ef6..79efa15 100644
--- a/src/templates/homepage.pug
+++ b/src/templates/homepage.pug
@@ -52,18 +52,18 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 
 		.col-md-3.col-xl-2
 			section.pt-3
-				h6.title-underline In Production
+				h6.title-underline Films In Production
 				a(href="/p/spring/")
 					img(src="{{ url_for('static', filename='assets/img/projects/spring_450x150.jpg')}}")
 
 				p.text-muted.pt-2.
 					A poetic short film about a mountain spirit and her wise little dog. #[a(href="/p/spring/") Check it out].
 
-			section.stream.py-3
-				h6.title-underline Latest Assets
+			section.py-3
+				h6.title-underline What's Going On
 
 				| {% if activity_stream %}
-				.card-padless.p-2
+				.card-padless
 					| {% for child in activity_stream %}
 					| {% if child.node_type not in ['comment'] %}
 					| {{ asset_list_item(child, current_user) }}
@@ -76,94 +76,44 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_
 							| No assets.
 				| {% endif %}
 
-			section.random-asset.py-3
+			section.py-3.border-bottom.mb-3
 				h6.title-underline
-					a.text-muted(href="{{ url_for('main.nodes_search_index') }}") Explore the Cloud
-				.pb-3.text-muted Random selection of the best assets &amp; tutorials
+					a.text-muted(href="{{ url_for('main.nodes_search_index') }}") Explore
+				.pb-3.text-muted Random awesome in the Cloud.
 
-				ul.random-asset__list.list-unstyled
+				ul.list-unstyled
 					| {% for n in random_featured %}
-					| {% if n.picture and loop.first %}
-					li.random-asset__list-item.project
-						| {% if n.project.picture_square %}
-						a.random-asset__list-thumbnail(
-							href="{{ n.project.url }}")
-							img.image(src="{{ n.project.picture_square.thumbnail('s', api=api) }}")
-						| {% endif %}
-						.random-asset__list-details
-							a.title(href="{{ n.project.url }}") {{ n.project.name }}
-							| {% if n.project.summary %}
-							ul.list-unstyled.d-flex.text-muted
-								li.what
-									a(href="{{ n.project.url }}") {{ n.project.summary }}
-							| {% endif %}
-
-					li.random-asset__list-item.featured
+					li.pt-3.mb-3.border-top.text-truncate.position-relative
 						| {% if n.permissions.world %}
 						.ribbon
 							span FREE
 						| {% endif %}
-						a.random-asset__thumbnail(
+						a.d-block(
 							href="{{ n.url }}",
 							class="{{ n.properties.content_type }}")
 							| {% if n.picture %}
-							img(src="{{ n.picture.thumbnail('l', api=api) }}")
-
+							img.img-fluid(
+								src="{{ n.picture.thumbnail('l', api=api) }}",
+								alt="{{ n.name }}")
 							| {% if n.properties.content_type == 'video' %}
 							i.pi-play
 							| {% endif %}
-
 							| {% endif %}
 
-						a.title(href="{{ n.url }}")
-							| {{ n.name }}
-						ul.list-unstyled.d-flex.text-muted
-							li.what
-								a(href="{{ n.url }}")
-									| {% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}Folder{% endif %}
-							li.where
-								a(href="{{ n.project.url }}")
-									| {{ n.project.name }}
-					| {% else %}
+						h6.pt-2.mb-1.text-truncate
+							a.text-muted.text-truncate(href="{{ n.url }}") {{ n.name }}
 
-					li
-						| {% if n.permissions.world %}
-						.ribbon
-							span FREE
-						| {% endif %}
-						a.random-asset__list-thumbnail(
-							href="{{ n.url }}",
-							class="{{ n.properties.content_type }}")
-							| {% if n.picture %}
-							img.image(src="{{ n.picture.thumbnail('s', api=api) }}")
-							| {% else %}
-							| {% if n.properties.content_type == 'video' %}
-							i.pi-film-thick
-							| {% elif n.properties.content_type == 'image' %}
-							i.pi-picture
-							| {% elif n.properties.content_type == 'file' %}
-							i.pi-file-archive
-							| {% else %}
-							i.pi-folder
-							| {% endif %}
-							| {% endif %}
-						.random-asset__list-details
-							a.title(href="{{ n.url }}") {{ n.name }}
-							ul.list-unstyled.d-flex.text-muted
-								li.what
-									a(href="{{ n.url }}")
-										| {% if n.properties.content_type %}{{ n.properties.content_type }}{% else %}Folder{% endif %}
-								li.where
-									a(href="{{ n.project.url }}") {{ n.project.name }}
-
-					| {% endif %}
+						.d-flex.align-items-baseline
+							a.text-muted.text-truncate(href="{{ n.url }}")
+								small.pr-2.font-weight-bold {{ n.project.name }}
+								small {% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}Folder{% endif %}
 					| {% endfor %}
 
 
 			section.py-3
 				h6.title-underline Latest Comments
 
-				ul.list-unstyled
+				ul.list-unstyled.pt-2
 					| {% if latest_comments %}
 					| {% for n in latest_comments %}
 					li.pb-2.mb-2.border-bottom.text-truncate