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,6 +241,56 @@
 #blog_post-edit-container
 	padding: 25px
 
+.blog_index-item
+	.item-picture
+		position: relative
+		width: 100%
+		max-height: 350px
+		min-height: 200px
+		height: auto
+		overflow: hidden
+		border-top-left-radius: 3px
+		border-top-right-radius: 3px
+		+clearfix
+
+		img
+			+position-center-translate
+			width: 100%
+			border-top-left-radius: 3px
+			border-top-right-radius: 3px
+
+		+media-xs
+			min-height: 150px
+		+media-sm
+			min-height: 150px
+		+media-md
+			min-height: 250px
+		+media-lg
+			min-height: 250px
+
+	.item-content
+		+node-details-description
+
+		+media-xs
+			padding:
+				left: 0
+				right: 0
+
+		img
+			display: block
+			margin: 0 auto
+
+	.item-meta
+		color: $color-text-dark-secondary
+		padding:
+			left: 25px
+			right: 25px
+
+		+media-xs
+			padding:
+				left: 10px
+				right: 10px
+
 #blog_index-container,
 #blog_post-create-container,
 #blog_post-edit-container
@@ -262,117 +309,11 @@
 	+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%
-			max-height: 350px
-			min-height: 200px
-			height: auto
-			overflow: hidden
-			border-top-left-radius: 3px
-			border-top-right-radius: 3px
-			+clearfix
-
-			img
-				+position-center-translate
-				width: 100%
-				border-top-left-radius: 3px
-				border-top-right-radius: 3px
-
-			+media-xs
-				min-height: 150px
-			+media-sm
-				min-height: 150px
-			+media-md
-				min-height: 250px
-			+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:
-					left: 0
-					right: 0
-
-			img
-				display: block
-				margin: 0 auto
-
-		.item-meta
-			color: $color-text-dark-secondary
-			padding:
-				left: 25px
-				right: 25px
-
-			+media-xs
-				padding:
-					left: 10px
-					right: 10px
-
-	.button-create,
-	.button-edit
-		+button($color-success, 3px, true)
 
 	.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