mixin getPlayerRow(imageURL, username, status)
	tr.dota2-player
		td.dota2-player-image
			img(src=imageURL, alt=username)
		td.dota2-player-name= username
		td.dota2-player-status(class=status)= status

article.dota2
	.dota2-loader
		img(src="https://s30.postimg.org/jplrjtj29/dota2.png", alt="Dota 2")
	aside.dota2-loading-details
		.dota2-loading-details-table-container
			table.dota2-loading-details-table
				caption.dota2-loading-details-caption MatchID: 1973674277
					span.dota2-loading-details-caption-mode All Pick
				thead
					tr
						th.dota2-loading-details-player-count(colspan="2") Players: 9/10
						th.dota2-loading-details-time
							time 00:34
							span.loader
				
				tbody.dota2-loading-details-team.radiant
					tr.subheading
						td.dota2-team-heading(colspan="3") The Radiant
					- var radiant = [{image: "http://avatarfiles.alphacoders.com/466/46.jpg", username: "Netofast", status: "ready"}, {image: "http://avatarfiles.alphacoders.com/357/35767.jpg", username: "!!eDuU XD.I.", status: "ready"}, {image: "http://avatarfiles.alphacoders.com/254/25476.jpg", username: "Finne", status: "ready"}, {image: "http://avatarfiles.alphacoders.com/188/18834.jpg", username: "THC-CANNABIS *-*", status: "ready"}, {image: "http://avatarfiles.alphacoders.com/276/27629.png", username: "Alucard", status: "ready"}]
					each player in radiant
						+getPlayerRow(player.image, player.username, player.status)
				tbody.dota2-loading-details-team.dire
					tr.subheading
						td.dota2-team-heading(colspan="3") The Dire
					- var dire = [{image: "http://avatarfiles.alphacoders.com/666/6.jpg", username: "Bananna Peel", status: "ready"}, {image: "http://avatarfiles.alphacoders.com/252/252.jpg", username: "Tai304", status: "loading"}, {image: "http://avatarfiles.alphacoders.com/317/317.jpg", username: "JOHN MCCLANE", status: "ready"}, {image: "http://avatarfiles.alphacoders.com/255/255.jpg", username: "MR. Miyagi", status: "ready"}, {image: "http://avatarfiles.alphacoders.com/239/239.jpg", username: "SonarEclipse", status: "ready"}]
						each player in dire
							+getPlayerRow(player.image, player.username, player.status)
			
			
View Compiled
// colours
$bodyBackground ?= black
$bodyTextColour ?= invert($bodyBackground)
$sidebarColour ?= #25292E
$dotaGreen ?= #2C7020
$sidebarInnerColour ?= #151719
$sidebarPlayerTextColour ?= #949494
$table-heading
	font-size 1.4em
	text-transform uppercase
	line-height 1.4
@font-face{font-family:'Radiance';src:url("http://cdn.dota2.com/apps/dota2/fonts/radiance.eot");src:url("http://cdn.dota2.com/apps/dota2/fonts/radiance.eot?#iefix") format("embedded-opentype"),url("http://cdn.dota2.com/apps/dota2/fonts/radiance.woff") format("woff"),url("http://cdn.dota2.com/apps/dota2/fonts/radiance.ttf") format("truetype"),url("http://cdn.dota2.com/apps/dota2/fonts/radiance.svg#ywftsvg") format("svg");font-weight:normal;font-style:normal}@font-face{font-family:'Radiance-SemiBold';src:url("http://cdn.dota2.com/apps/dota2/fonts/radiance-semibold.eot");src:url("http://cdn.dota2.com/apps/dota2/fonts/radiance-semibold.eot?#iefix") format("embedded-opentype"),url("http://cdn.dota2.com/apps/dota2/fonts/radiance-semibold.woff") format("woff"),url("http://cdn.dota2.com/apps/dota2/fonts/radiance-semibold.ttf") format("truetype"),url("http://cdn.dota2.com/apps/dota2/fonts/radiance-semibold.svg#ywftsvg") format("svg");font-weight:normal;font-style:normal}

html
	height 100%
body
	height 100%
	background-color black
	font-family "Radiance", Verdana
	color white
.dota2
	display table
	height 100%
	&-team-heading
		text-transform uppercase
		font-weight bold
		padding 1em 0
	&-player
		& + &
			td
				padding-top 0.4em
		td
			vertical-align middle
		&-status
			text-align right
			text-transform uppercase
			&.loading
				transition 0.7s ease opacity
				&:hover
					opacity 1
				opacity 0.6
				cursor wait
				&:after
					content "..."
			&.ready
				color $dotaGreen
				font-weight bold
		&-image img
			max-width 2.5em
	&-loader
		display table-cell
		vertical-align middle
		text-align center
		width 100%
	&-loading-details
		&-player-count
			@extend $table-heading
			text-align left
			text-transform uppercase
		&-time
			@extend $table-heading
			text-align right
		&-caption
			text-align initial
			margin-bottom 1.5em
			&-mode
				float right
		display table-cell
		padding 2em 1em 1em 1em
		background $sidebarColour
		&-table
			&-container
				padding 1em
				background $sidebarInnerColour
				box-shadow inset 0 0 1.5em black
			min-width 23em
View Compiled
Rerun