diff --git a/src/styles/components/_timeline.sass b/src/styles/components/_timeline.sass
index 4d291f6d..f455b93a 100644
--- a/src/styles/components/_timeline.sass
+++ b/src/styles/components/_timeline.sass
@@ -3,16 +3,16 @@
 		opacity: 0
 		animation: fade-in 500ms forwards
 
-	.group-date
-		color: rgba($color-text, .4)
+		&-date // .group-date
+			color: $color-text-dark-hint
 
-	.group-title
-		@extend .border-bottom
-		@extend .bg-white
-		@extend .text-uppercase
-		@extend .font-weight-bold
-		a
-			color: $color-text
+		&-title // .group-title
+			@extend .border-bottom
+			@extend .bg-white
+			@extend .text-uppercase
+			@extend .font-weight-bold
+			a
+				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
-		@extend .bg-transparent
-		border-bottom-color: rgba($color-background, .2) !important
-		color: rgba($color-background, .6)
+// Overrides for when the timeline is against a dark background.
+.timeline-dark
+	.group
+		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)
diff --git a/src/templates/mixins/components.pug b/src/templates/mixins/components.pug
index 8b66064f..d64ba27c 100644
--- a/src/templates/mixins/components.pug
+++ b/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,