Use list-asset() mixin component for project index

src/styles/_config.sass

@@ -139,6 +139,7 @@ $link-color: $primary
 
 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
 $font-size-base: .9rem
+$font-size-xs: .75rem
 
 $dropdown-border-width: 0
 $dropdown-box-shadow: 0 10px 25px rgba($black, .1)

src/styles/_project.sass

@@ -995,9 +995,6 @@ a.learn-more
 							font-size: 1.6em
 							left: 7px
 
-					.ribbon
-						+ribbon
-
 				.info
 					width: 100%
 					height: 100%
@@ -2087,3 +2084,6 @@ section.node-children
 				margin: 25px 0 0 0
 				padding: 5px 35px
 				text-align: center
+
+.ribbon
+	+ribbon

src/styles/_utils.sass

@@ -507,28 +507,22 @@
 
 =ribbon
 	background-color: $color-success
-	cursor: default
+	border: thin dashed rgba(white, .5)
+	color: white
+	pointer-events: none
+	font-size: 70%
 	overflow: hidden
-	white-space: nowrap
 	position: absolute
 	right: -40px
 	top: 10px
-	-webkit-transform: rotate(45deg)
-	-moz-transform: rotate(45deg)
-	-ms-transform: rotate(45deg)
-	-o-transform: rotate(45deg)
 	transform: rotate(45deg)
+	white-space: nowrap
 
 	span
-		border: thin dashed rgba(white, .5)
-		color: white
 		display: block
-		font-size: 70%
 		margin: 1px 0
 		padding: 3px 50px
-		text:
+
-			align: center
-			transform: uppercase
 
 @mixin text-background($text-color, $background-color, $roundness, $padding)
 	border-radius: $roundness
@@ -672,3 +666,6 @@
 	img
 		// Just re-use Bootstrap's mixin here.
 		+img-fluid
+
+.overflow-hidden
+	overflow: hidden

src/styles/components/_card.sass

@@ -5,6 +5,9 @@
 			min-width: 30%
 			max-width: 30%
 
+	.card.asset
+		margin-left: 10px
+		margin-right: 10px
 
 .card-padless
 	.card
@@ -21,3 +24,22 @@
 	&:hover
 		img
 			opacity: 1
+
+
+.card.asset
+	color: $color-text
+
+	&.free
+		overflow: hidden
+
+		&:after
+			+ribbon
+			content: 'FREE'
+			padding: 2px 50px
+
+	.card-body
+		font-size: $font-size-xs
+
+	.card-img-top
+		background-size: cover
+		background-position: center

src/templates/mixins/components.pug

@@ -62,8 +62,28 @@ mixin card-deck(columns)
 // +card(data-url="{{ url_for('projects.view', project_url=project.url) }}", tabindex='{{ loop.index }}')
 // #}
 mixin card()
-	.card.card-fade.cursor-pointer.mb-4.js-project-go&attributes(attributes)
+	.card&attributes(attributes)
 		if block
 			block
 		else
 			p No card content defined.
+
+mixin list-asset(name, url, image, type, date)
+	a(href=url).card.asset&attributes(attributes)
+		if image
+			.embed-responsive.embed-responsive-16by9
+				.card-img-top.embed-responsive-item(style="background-image: url(" + image + ")")
+
+		.card-body
+			if name
+				h6.card-title.mb-1
+					=name
+
+			ul.card-text.list-unstyled.d-flex.text-black-50
+				if type
+					li.pr-2=type
+				if date
+					li=date
+
+		if block
+			block

src/templates/projects/view_embed.pug

@@ -1,5 +1,6 @@
-| {% block body %}
+include ../mixins/components
 
+| {% block body %}
 #node-container
 	section.node-preview.project
 		| {% if header_video_file %}
@@ -34,52 +35,17 @@
 		a.learn-more(href="{{ url_for( 'projects.view', project_url=project.url) }}") LEARN MORE
 		| #}
 
-		.node-extra
+		.p-4
-
 			| {% if activity_stream %}
-			.node-updates
+			+card-deck(3)
-				ul.node-updates-list
 				| {% for n in activity_stream %}
 				| {% if n.node_type not in ['comment'] %}
-					li.node-updates-list-item(
+				+list-asset(
-						data-node_id="{{ n._id }}",
+					'{{ n.name }}',
-						class="{{ n.node_type }} {{ n.properties.content_type | hide_none }}")
+					'{{ url_for_node(node=n) }}',
-						a.image(href="{{ url_for_node(node=n) }}")
+					"{% if n.picture %}{{ n.picture.thumbnail('l', api=api) }}{% endif %}",
-							| {% if n.picture %}
+					"{% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %}",
-							img(src="{{ n.picture.thumbnail('l', api=api) }}")
+					"{{ n._updated | pretty_date }}")(class="{% if n.permissions.world %}free{% endif %}")
-							| {% endif %}
-
-							| {% if n.node_type == 'post' %}
-							i.pi-newspaper
-							| {% elif n.node_type == 'texture' or n.node_type == 'group_texture' %}
-							i.pi-texture
-							| {% elif 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 %}
-
-							| {% if n.permissions.world %}
-							.ribbon
-								span free
-							| {% endif %}
-
-						.info
-							a.title(href="{{ url_for_node(node=n) }}") {{ n.name }}
-							p.description(href="{{ url_for_node(node=n) }}")
-								| {% if n.node_type == 'post' %}
-								| {{ n.properties | markdowned('content') | striptags | truncate(140, end="... <small>read more</small>") | safe | hide_none }}
-								| {% else %}
-								| {{ n | markdowned('description') | striptags | truncate(140, end="... <small>read more</small>") | safe | hide_none }}
-								| {% endif %}
-							span.details
-								span.what {% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %} ·
-								span.when  {{ n._updated | pretty_date }} by
-								span.who {{ n.user.full_name }}
 				| {% endif %}
 				| {% endfor %}
 			| {% endif %}