CSS: Blog cleanup

src/styles/blog.sass

@@ -87,9 +87,6 @@
 @import components/checkbox
 @import components/overlay
 
-.container-fluid.blog
-	padding: 0
-
 #blog_container
 	+media-xs
 		flex-direction: column
@@ -244,43 +241,7 @@
 #blog_post-edit-container
 	padding: 25px
 
-#blog_index-container,
-#blog_post-create-container,
-#blog_post-edit-container
-	+container-box
-	width: 75%
-
-	+media-xs
-		border-radius: 0
-		width: 100%
-		clear: both
-		display: block
-	+media-sm
-		width: 100%
-	+media-md
-		width: 100%
-	+media-lg
-		width: 100%
-
-	.blog_index-header
-		border-top-left-radius: 3px
-		border-top-right-radius: 3px
-		display: block
-		overflow: hidden
-		position: relative
-		text-align: center
-		width: 100%
-
-		img
-			width: 100%
-
 .blog_index-item
-		max-width: 780px
-
-		&:hover
-			.item-info a
-				color: $color-primary
-
 	.item-picture
 		position: relative
 		width: 100%
@@ -307,15 +268,8 @@
 		+media-lg
 			min-height: 250px
 
-		ul.meta
-			+list-meta
-			font-size: .9em
-			padding: 0px 25px 5px
-
 	.item-content
 		+node-details-description
-			font-size: 1.3em
-			padding: 15px 25px 25px
 
 		+media-xs
 			padding:
@@ -337,42 +291,29 @@
 				left: 10px
 				right: 10px
 
-	.button-create,
+#blog_index-container,
-	.button-edit
+#blog_post-create-container,
-		+button($color-success, 3px, true)
+#blog_post-edit-container
+	+container-box
+	width: 75%
+
+	+media-xs
+		border-radius: 0
+		width: 100%
+		clear: both
+		display: block
+	+media-sm
+		width: 100%
+	+media-md
+		width: 100%
+	+media-lg
+		width: 100%
+
 
 	.item-picture+.button-back+.button-edit
 		right: 20px
 		top: 20px
 
-	.comments-container
-		padding:
-			left: 20px
-			right: 20px
-		max-width: 680px
-		margin: 0 auto
-
-		+media-lg
-			padding:
-				left: 0
-				right: 0
-
-		.comment-reply-container
-			background-color: transparent
-
-			.comment-reply-field
-				textarea, .comment-reply-meta
-					background-color: $color-background-light
-
-				&.filled
-					.comment-reply-meta
-						background-color: $color-success
-
-		.comment-reply-form
-			+media-xs
-				padding:
-					left: 0
-
 #blog_post-edit-form
 	padding: 0
 
@@ -432,12 +373,6 @@
 	+media-lg
 		width: 25%
 
-	.button-create
-		display: block
-		width: 100%
-		+button($color-success, 6px)
-		margin: 0
-
 	.button-back
 		+button($color-info, 6px, true)
 		display: block
@@ -536,104 +471,6 @@
 					text-decoration: none
 					color: $color-primary
 
-
-#blog_container
-	&.cloud-blog
-		#blog_index-container,
-		#blog_post-create-container,
-		#blog_post-edit-container
-			width: 100%
-			padding: 25px 30px 20px 30px
-
-		#blog_index-container+#blog_index-sidebar
-			display: none
-
-	#blog_index-container,
-	&.cloud-blog #blog_index-container
-		+media-sm
-			width: 100%
-
-		+media-xs
-			width: 100%
-
-		padding: 0 0 50px 0
-		margin: 0 auto
-
-		.blog_index-item
-			+media-xs
-				width: 100%
-				padding: 10px 25px
-
-			&.list
-				margin: 0 auto
-				padding: 15px 0
-				margin: 0 auto
-				border-bottom: thin solid $color-background-dark
-
-				&:last-child
-					border-bottom: none
-
-				+media-xs
-					width: 100%
-					padding: 15px 10px
-					margin: 0
-
-				a.item-title
-					padding:
-						top: 0
-						bottom: 5px
-					font:
-						size: 1.6em
-						weight: 400
-
-				.item-info
-					color: $color-text-dark-secondary
-					font-size: .9em
-					padding:
-						left: 25px
-						right: 25px
-
-				.item-header
-					width: 50px
-					height: 50px
-					position: absolute
-					top: 20px
-					border-radius: 3px
-					background-color: $color-background-dark
-					overflow: hidden
-
-					img
-						+position-center-translate
-						width: 100%
-
-					i
-						+position-center-translate
-						font-size: 1.2em
-						color: $color-text-dark-hint
-
-					&.nothumb
-						border-radius: 50%
-
-				a.item-title, .item-info
-					padding-left: 70px
-
-#blog_index-container
-	.blog_index-item
-		position: relative
-
-		+media-xs
-			padding: 25px 0 20px 0
-
-		&.list
-			padding: 15px 10px
-			margin: 0
-
-			+media-xs
-				width: 100%
-				padding: 15px 10px
-				margin: 0
-
-
 .blog-archive-navigation
 	+media-xs
 		font-size: 1em
@@ -663,16 +500,7 @@
 		color: $color-text-dark-secondary
 		pointer-events: none
 
-.blog-action
+// Specific tweaks for blogs in the context of a project.
-	display: flex
-	padding: 10px
-	position: absolute
-	right: 0
-	top: 0
-	z-index: 1
-
-
-// Specific tweaks for blogs in the context of a project
 #project_context
 	.blog_index-item
 		+media-xs
@@ -697,3 +525,29 @@
 
 	.blog-archive-navigation
 		margin-left: 35px
+
+// Used on the blog.
+.comments-compact
+	.comments-list
+		border: none
+		padding: 0 0 15px 0
+
+	.comments-container
+		max-width: 680px
+		margin: 0 auto
+
+		.comment-reply-container
+			background-color: transparent
+
+			.comment-reply-field
+				textarea, .comment-reply-meta
+					background-color: $color-background-light
+
+				&.filled
+					.comment-reply-meta
+						background-color: $color-success
+
+		.comment-reply-form
+			+media-xs
+				padding:
+					left: 0