<h1>Notable inventions, <span>1910–2000</span></h1>
<div class="flex-parent">
	<div class="input-flex-container">
		<div class="input">
			<span data-year="1910" data-info="headset"></span>
		</div>
		<div class="input">
			<span data-year="1920" data-info="jungle gym"></span>
		</div>
		<div class="input active">
			<span data-year="1930" data-info="chocolate chip cookie"></span>
		</div>
		<div class="input">
			<span data-year="1940" data-info="Jeep"></span>
		</div>
		<div class="input">
			<span data-year="1950" data-info="leaf blower"></span>
		</div>
		<div class="input">
			<span data-year="1960" data-info="magnetic stripe card"></span>
		</div>
		<div class="input">
			<span data-year="1970" data-info="wireless LAN"></span>
		</div>
		<div class="input">
			<span data-year="1980" data-info="flash memory"></span>
		</div>
		<div class="input">
			<span data-year="1990" data-info="World Wide Web"></span>
		</div>
		<div class="input">
			<span data-year="2000" data-info="Google AdWords"></span>
		</div>
	</div>
	<div class="description-flex-container">
		<p>And future Call of Duty players would thank them.</p>
		<p>Because every kid should get to be Tarzan for a day.</p>
		<p class="active">And the world rejoiced.</p>
		<p>Because building roads is inconvenient.</p>
		<p>Ain’t nobody got time to rake.</p>
		<p>Because paper currency is for noobs.</p>
		<p>Nobody likes cords. Nobody.</p>
		<p>Brighter than glow memory.</p>
		<p>To capitalize on an as-yet nascent market for cat photos.</p>
		<p>Because organic search rankings take work.</p>
	</div>
</div>



<div style="position: absolute; bottom: 40px; right: 10px; font-size: 12px">
	<a href="https://codepen.io/cjl750/pen/XMyRoB" target="_blank">original version with slinky mobile menu</a></div>
<div style="position: absolute; bottom: 15px; right: 10px; font-size: 12px">
	<a href="https://codepen.io/cjl750/pen/wdVxzV" target="_blank">alternate version with custom range input</a></div>
<div style="position: absolute; bottom: 15px; left: 10px; font-size: 18px; font-weight: bold">
	<a href="https://codepen.io/cjl750/pen/MXvYmg" target="_blank">version 4: pure CSS!</a></div>

$numDots: 20
$parentWidthBase: 0.8
$parentWidth: $parentWidthBase * 100vw
$parentMaxWidth: 1000px
$dotWidth: 25px
$dotWidthSm: 17px
$active: #2C3E50
$inactive: #AEB6BF


html, body
	height: 100%
body
	font-family: 'Quicksand', sans-serif
	font-weight: 500
	color: #424949
	background-color: #ECF0F1
	padding: 0 25px
	display: flex
	flex-direction: column
	position: relative
h1
	text-align: center
	height: 38px
	margin: 60px 0
	span
		white-space: nowrap
.flex-parent
	display: flex
	flex-direction: column
	justify-content: center
	align-items: center
	width: 100%
	height: 100%
.input-flex-container
	display: flex
	justify-content: space-around
	align-items: center
	width: $parentWidth
	height: 100px
	max-width: $parentMaxWidth
	position: relative
	z-index: 0
.input
	width: $dotWidth
	height: $dotWidth
	background-color: $active
	position: relative
	border-radius: 50%
	&:hover
		cursor: pointer
	&::before, &::after
		content: ''
		display: block
		position: absolute
		z-index: -1
		top: 50%
		transform: translateY(-50%)
		background-color: $active
		width: $parentWidth / $numDots
		height: 5px
		max-width: $parentMaxWidth / $numDots
	&::before
		left: calc(#{-$parentWidth / $numDots} + #{$dotWidth / 2})
	&::after
		right: calc(#{-$parentWidth / $numDots} + #{$dotWidth / 2})
	&.active
		background-color: $active
		&::before
			background-color: $active
		&::after
			background-color: $inactive
		span
			font-weight: 700
			&::before
				font-size: 13px
			&::after
				font-size: 15px
	&.active ~ .input
		&, &::before, &::after
			background-color: $inactive
	span
		width: 1px
		height: 1px
		position: absolute
		top: 50%
		left: 50%
		transform: translate(-50%, -50%)
		visibility: hidden
		&::before, &::after
			visibility: visible
			position: absolute
			left: 50%
		&::after
			content: attr(data-year)
			top: 25px
			transform: translateX(-50%)
			font-size: 14px
		&::before
			content: attr(data-info)
			top: -65px
			width: 70px
			transform: translateX(-5px) rotateZ(-45deg)
			font-size: 12px
			text-indent: -10px
.description-flex-container
	width: $parentWidth
	font-weight: 400
	font-size: 22px
	margin-top: 100px
	max-width: $parentMaxWidth
	p
		margin-top: 0
		display: none
		&.active
			display: block
		
	
@media (min-width: $parentMaxWidth / $parentWidthBase)
	.input::before
		left: #{-($parentMaxWidth / $numDots) + ($dotWidth / 2)}
	.input::after
		right: #{-($parentMaxWidth / $numDots) + ($dotWidth / 2)}
@media (max-width: 850px)
	.input
		width: $dotWidthSm
		height: $dotWidthSm
		&::before, &::after
			height: 3px
		&::before
			left: calc(#{-$parentWidth / $numDots} + #{$dotWidthSm / 2})
		&::after
			right: calc(#{-$parentWidth / $numDots} + #{$dotWidthSm / 2})


//MOBILE
@media (max-width: 600px)
	.flex-parent
		justify-content: initial
	.input-flex-container
		flex-wrap: wrap
		justify-content: center
		width: 100%
		height: auto
		margin-top: 15vh
	.input
		width: 60px
		height: 60px
		margin: 0 10px 50px
		background-color: $inactive
		&::before, &::after
			content: none
		span
			width: 100%
			height: 100%
			display: block
			&::before
				top: calc(100% + 5px)
				transform: translateX(-50%)
				text-indent: 0
				text-align: center
			&::after
				top: 50%
				transform: translate(-50%, -50%)
				color: #ECF0F1
	.description-flex-container
		margin-top: 30px
		text-align: center

@media (max-width: 400px)
	body
		min-height: 950px //just so our links won't get in the way of our content

$(function(){
	var inputs = $('.input');
	var paras = $('.description-flex-container').find('p');
	inputs.click(function(){
		var t = $(this),
				ind = t.index(),
				matchedPara = paras.eq(ind);
		
		t.add(matchedPara).addClass('active');
		inputs.not(t).add(paras.not(matchedPara)).removeClass('active');
	});
});