Layout and styling of asset groups

src/styles/_apps_base.sass

@@ -429,15 +429,15 @@ $loader-bar-height: 2px
 		visibility: visible
 
 		&:before
-			animation: loader-bar-slide 2.5s linear infinite
+			animation: loader-bar-slide 2s linear infinite
 
 @keyframes loader-bar-slide
 	from
-		left: -$loader-bar-width
-		width: 0%
+		left: -($loader-bar-width / 2)
+		width: 3%
 
 	50%
-		width: 30%
+		width: 20%
 
 	70%
 		width: 70%

src/styles/_config.sass

@@ -150,3 +150,5 @@ $dropdown-item-padding-y: .4rem
 $tooltip-font-size: 0.83rem
 $tooltip-max-width: auto
 $tooltip-opacity: 1
+
+$nav-link-height: 37px

src/styles/_project.sass

@@ -141,13 +141,8 @@ body.blog
 
 /* Header with name and node edit tools */
 #project_context-header
-	transition: box-shadow 250ms ease-in-out
+	right: 0
 	z-index: $z-index-base + 3
-	left: 0
-	width: 100%
-
-	&.is-offset
-		box-shadow: 0 0 25px rgba(black, .2)
 
 
 /* Edit Asset buttons */
@@ -243,11 +238,6 @@ ul.project-edit-tools
 	height: 100%
 	background-color: white
 
-// Add padding to project_context because project_context-header is fixed on top.
-// It contains the New, Edit, Save Changes, etc. buttons.
-#project_context-header+#project_context
-	padding-top: $project_header-height
-
 #node-container
 	background-color: white
 	flex: 1
@@ -604,12 +594,6 @@ section.node-preview
 							color: $color-warning
 							margin-right: 10px
 
-	&.group
-		align-items: center
-		display: flex
-		padding: 20px
-		position: relative
-
 	&.project
 		background-color: black
 		width: 100%
@@ -670,8 +654,7 @@ body.about
 .node-title
 	+project-node-title
 
-section.node-details-container,
-section.node-preview.group
+section.node-details-container
 	position: relative
 
 	.node-details-header
@@ -684,24 +667,8 @@ section.node-preview.group
 			width: 100%
 			max-width: 100%
 
-	.node-details-meta-actions
-		margin-left: auto
-
-		.btn-browsetoggle
-			+button(lighten($color-background-nav, 20%), 3px)
-			width: 48px
-			text-align: center
-			padding: 2px 4px
-			i
-				font-size: 1.3em
-				padding: 0
-				margin: 0
-
-
 .node-details-description
 	+node-details-description
-	padding-left: 20px
-	padding-right: 20px
 
 .node-details-meta
 	background-color: $color-background-light
@@ -1029,12 +996,6 @@ a.learn-more
 							text-transform: capitalize
 
 
-section.node-children
-	&.group, &.storage
-		flex: 1
-		padding: 10px 0 25px 20px
-		+clearfix
-
 .list-node-children-container
 	position: relative
 	width: $list-node-children-item-width

src/styles/components/_card.sass

@@ -1,34 +1,66 @@
 .card-deck
 	// Custom, as of bootstrap 4.1.3 there is no way to do this.
 	&.card-3-columns
-		.card
-			min-width: 30%
-			max-width: 30%
+		@extend .row
+
+		.card
+			@extend .col-md-4
+
+			+media-lg
+				background: green
+
+	&.card-4-columns
+		@extend .row
+
+		.card
+			@extend .col-md-3
+			+media-xs
+				flex: 1 0 50%
+				max-width: 50%
+
+			+media-sm
+				flex: 1 0 33%
+				max-width: 33%
+
+			+media-md
+				flex: 1 0 25%
+				max-width: 25%
+
+			+media-lg
+				flex: 1 0 20%
+				max-width: 20%
 
-	.card.asset
-		margin-left: 10px
-		margin-right: 10px
 
 .card-padless
 	.card
-		border: none
+		@extend .border-0
 
 	.card-body
-		padding: 15px 0
+		@extend .px-0
 
-.card-fade
-	img
-		opacity: .8
-		transition: opacity ease-in-out 150ms
+.card-stretch
+	.card-body
+		@extend .d-flex
+		@extend .flex-column
+
+		.card-text
+			@extend .mt-auto
+
+.card-image-fade
+	.card-img-top
+		opacity: .9
 
 	&:hover
-		img
+		.card-img-top
 			opacity: 1
 
 
 .card.asset
 	color: $color-text
 
+	&:hover
+		text-decoration: none
+
 	&.free
 		overflow: hidden
 
@@ -38,8 +70,21 @@
 			padding: 2px 50px
 
 	.card-body
-		font-size: $font-size-xs
+		position: relative // for placing the progress
+
+		.card-text
+			font-size: $font-size-xs
 
 	.card-img-top
+		background-color: $color-background
 		background-size: cover
 		background-position: center
+
+	.progress
+		height: 3px
+		position: absolute
+		top: -3px
+		width: 100%
+
+.progress-bar
+	background-color: $primary