Cleanup: Tweak comments and sort classes.

src/styles/components/_timeline.sass

@@ -3,16 +3,16 @@
 		opacity: 0
 		animation: fade-in 500ms forwards
 
-	.group-date
+		&-date // .group-date
-		color: rgba($color-text, .4)
+			color: $color-text-dark-hint
 
-	.group-title
+		&-title // .group-title
-		@extend .border-bottom
+			@extend .border-bottom
-		@extend .bg-white
+			@extend .bg-white
-		@extend .text-uppercase
+			@extend .text-uppercase
-		@extend .font-weight-bold
+			@extend .font-weight-bold
-		a
+			a
-			color: $color-text
+				color: $color-text
 
 	.node-details-description
 		font:
@@ -33,14 +33,20 @@ body.is-mobile
 		.js-asset-list
 			@extend .card-deck-vertical
 
-.timeline-dark
-	.group-date
-		color: $color-text-light-hint
 
-	.group-title
+// Overrides for when the timeline is against a dark background.
-		@extend .bg-transparent
+.timeline-dark
-		border-bottom-color: rgba($color-background, .2) !important
+	.group
-		color: rgba($color-background, .6)
+		animation: fade-in 500ms forwards
+		opacity: 0
+
+		&-date // .group-date
+			color: $color-text-light-hint
+
+		&-title // .group-title
+			@extend .bg-transparent
+			border-bottom-color: rgba($color-background, .2) !important
+			color: rgba($color-background, .6)
 
 	blockquote
 		background-color: rgba($color-background, .1)

src/templates/mixins/components.pug

@@ -73,7 +73,8 @@ mixin list-asset(name, url, image, type, date)
 	if block
 		block
 
-// used together with timeline.js
+
+//- Used together with timeline.js
 mixin timeline(projectid, sortdirection)
 	section.timeline.placeholder(
 		data-project-id=projectid,