refactor: make timeline-style opt-in instead of opt-out

To opt-in, add .timeline class alongside ul.posts

less/mixins.less

@@ -48,8 +48,8 @@
 	white-space: nowrap;
 }
 
-.timeline {
-	.posts > [component="post"], .timeline-event {
+.timeline-style {
+	> [component="post"], .timeline-event {
 		position: relative;	// for absolutely positioned pseudo-element, below
 		border-left: 2px solid lighten(@brand-primary, 30%);
 		margin-left: 2.5rem;
@@ -74,7 +74,7 @@
 	}
 
 	@media (max-width: @screen-sm-max) {
-		.posts > [component="post"] {
+		[component="post"] {
 			border: 0;
 			padding: @post-padding 0;
 
@@ -84,7 +84,7 @@
 			}
 		}
 
-		.posts [component="post"]:last-child:after {
+		[component="post"]:last-child:after {
 			display: none;
 		}
 
@@ -114,7 +114,7 @@
 		border-left-style: dashed;
 	}
 
-	.posts [component="post"]:last-child:after {
+	[component="post"]:last-child:after {
 		content: '';
 		width: 1rem;
 		position: absolute;
@@ -123,7 +123,7 @@
 		border-bottom: 2px solid lighten(@brand-primary, 30%);
 	}
 
-	.posts .timeline-event {
+	[component="topic/event"].timeline-event {
 		text-align: left;
 		justify-content: left;
 		font-size: 1em;

less/topic.less

@@ -412,8 +412,6 @@
 
 
 .topic {
-	.timeline;
-
 	&.deleted {
 		.opacity(0.3);
 
@@ -423,6 +421,10 @@
 	}
 
 	.posts {
+		&.timeline {
+			.timeline-style;
+		}
+
 		list-style-type: none;
 		padding: 0;
 

templates/topic.tpl

@@ -57,7 +57,7 @@
 		<!-- IMPORT partials/topic/deleted-message.tpl -->
 		{{{ end }}}
 
-		<ul component="topic" class="posts" data-tid="{tid}" data-cid="{cid}">
+		<ul component="topic" class="posts timeline" data-tid="{tid}" data-cid="{cid}">
 			{{{each posts}}}
 				<li component="post" class="{{{ if posts.deleted }}}deleted{{{ end }}} {{{ if posts.selfPost }}}self-post{{{ end }}} {{{ if posts.topicOwnerPost }}}topic-owner-post{{{ end }}}" <!-- IMPORT partials/data/topic.tpl -->>
 					<a component="post/anchor" data-index="{posts.index}" id="{posts.index}"></a>