.container
	ul.timeline
		li
			span.year 2008
			ul.content
				li dignissimos quae quas mollitia velit rerum sit quo!
				li 2008-2
				li 2008-3
		li
			span.year 2009
			ul.content
				li 2009-1
				li 2009-2
				li 2009-3
		li
			span.year 2010
			ul.content
				li 2010-1
				li 2010-2
				li 2010-3
		li
			span.year 2011
			ul.content
				li 2011-1
				li 2011-2
				li 2011-3
				li officia aliquid minima enim eaque quam!
		li
			span.year 2012
			ul.content
				li 2012-1
				li 2012-2
				li 2012-3
		li
			span.year 2013
			ul.content
				li 2013-1
				li 2013-2
				li 2013-3
		li
			span.year 2014
			ul.content
				li 2014-1
				li 2014-2
				li 2014-3
		li
			span.year 2015
			ul.content
				li 2015-1
				li 2015-2
				li 2015-3
		li
			span.year 2016
			ul.content
				li 2016-1
				li 2016-2
				li 2016-3
		li
			span.year.new Sustained Growth

$color: (dark: #3f444c, light: #ffd402, gray: #eef4f7)

=square($w, $h)
	width: $w
	height: $h

body, html
	padding: 0
	margin: 0
	font-family: Calibri, Helvetica, Arial, sans-serif
	letter-spacing: .04em
.container
	max-width: 1140px
	margin: 0 auto
ul
	list-style-type: none
	padding: 0
	margin: 0
	&::after
		content: ''
		display: block
		clear: both
	&.timeline
		display: flex
		flex-wrap: wrap
		padding: 50px 30px
		> li
			width: calc( 100% / 6 )
			// &::before
			// 	content: ''
			// 	display: block
			// 	width: 100%
			// 	margin-top: calc(100% + 15px)
			&:nth-of-type(odd)
				> .content
					transform: translateY(calc(-100% - 24px))
			&:nth-of-type(even)
				> .content
	.year
		color: map-get($color, light)
		background: map-get($color, dark)
		display: block
		position: relative
		padding-left: 24px
		line-height: 24px
		font-weight: bold
		font-size: 18px
		&::before
			content: ''
			+square(40px, 40px)
			position: absolute
			background: map-get($color, light)
			border-radius: 50%
			left: -24px
			top: calc( (40 - 24) / 2 * -1px )
		&.new
			border-radius: 0 24px 24px 0
			&::after
				content: ''
				+square(5px, 5px)
				display: block
				border: 20px solid map-get($color, dark)
				box-sizing: border-box
				border-top-color: transparent
				border-right-color: transparent
				border-bottom-color: transparent
				position: absolute
				right: -30px
				top: -9.5px
	.content
		border-left: 8px solid map-get($color, light)
		margin-left: -8px
		padding: 15px 0
		padding-right: 24px
		> li
			padding-left: 20px
			border-bottom: 4px solid map-get($color, gray)
			padding-bottom: 8px
			position: relative
			margin-left: -8px
			&:last-of-type
				border-bottom: 0
				padding-bottom: 0
			&::before
				content: ''
				display: block
				position: absolute
				+square(3px, 3px)
				border-radius: 50%
				background: map-get($color, gray)
				left: 2px
				top: 8px
@media screen and (max-width: 1140px)
	ul.timeline > li
		width: calc( 100% / 4 )
@media screen and (max-width: 991px)
	ul.timeline > li
		width: calc( 100% / 2 )
@media screen and (max-width: 767px)
	ul.timeline
		display: block
		> li
			width: 100%
			// &::before
			// 	display: none
			&:nth-of-type(odd)
				.content
					transform: none

$(window).on 'load resize', ->
	if $(this).width() < 767
		$('.timeline > li').css 'margin-top', ''
	else
		$('.timeline > li').css 'margin-top', $('.timeline > li').height()
		
# 純 CSS pseudo-element 會參考寬度變化，以 JS 代替