SUBWAY (or the highway)

dabblet.css

/**
 * SUBWAY (or the highway)
 */

body{
  font-family: museosans-300, sans-serif;
  font-size: 14px;
  color: #999;
}
.tutorial {
  border: 1px solid #aaa;
  border-bottom-width:0;
  display: table;
  width: 400px;
  vertical-align: top;
}
.tutorial:hover{
  background-color: #fafafa;
}
.tutorial:last-child{
  border-bottom-width: 1px;
}
.status-node, .name { display: table-cell; vertical-align: middle}
.status-node {
  width: 60px;
  height: 40px;
  position: relative;
}
.pipe {
  background-color: #ddd;
  width: 10px;
  height: 100%;
  margin-left: -5px;
  border-top: 1px solid #ddd;
  position: relative;
  z-index:50;
  left: 50%
}
.statusicon {
  height: 26px;
  position: absolute;
  border-radius: 13px;
  width: 26px;
  background-color: #ddd;
  top: 50%;
  left: 50%;
  margin-left: -13px;
  margin-top: -13px;
  z-index: 100;
}
.icon-incomplete, .icon-started, .icon-complete {
  background-color: #fff;
  height: 18px;
  width: 18px;
  border-radius: 9px;
  position: relative;
  top: 4px;
  left: 4px;
  -webkit-background-clip: padding-box;
  overflow: hidden
}
.icon-complete .status, .icon-started .status{
  background-color: #369;
  height: 100%;
}
.icon-started .status {
    width: 50%; 
}

.name {
  padding: 7px 0;
}

dabblet.html

<div>
<div class="tutorial">
	<div class="status-node">
	  <div class="pipe"></div>
	  <div class="statusicon">
	  	<div class="icon-incomplete">
	  	</div>
	  </div>
	</div>
	<div class="name">Some Topic</div>
</div>

<div class="tutorial">
	<div class="status-node">
	  <div class="pipe"></div>
	  <div class="statusicon">
	  	<div class="icon-incomplete">
	  	</div>
	  </div>
	</div>
	<div class="name">Some Tall <br>super gigantic<br>Topic</div>
</div>

<div class="tutorial">
	<div class="status-node">
	  <div class="pipe"></div>
	  <div class="statusicon">
	  	<div class="icon-incomplete">
	  	</div>
	  </div>
	</div>
	<div class="name">Some Topic</div>
</div>
<div class="tutorial">	
  <div class="status-node">
	  <div class="pipe"></div>
	  <div class="statusicon">
	  	<div class="icon-started">
	  		<div class='status'></div>
	  	</div>
	  </div>
	</div>
	<div class="name">Some Topic</div>
</div>

<div class="tutorial">	
  <div class="status-node">
	  <div class="pipe"></div>
	  <div class="statusicon">
	  	<div class="icon-complete">
	  		<div class='status'></div>
	  	</div>
	  </div>
	</div>
	<div class="name">Some Topic</div>
</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}