DLS comment list

dls-comment-list.html

<section id="comments" class="row section">
	<div class="large-12 columns">
		<h1>Comments</h1>
	</div>
	<span class="gist"><a class="icon icon-ajmn-embed" href="https://gist.github.com/capitalJT/2c78cdf407f8e8acd960" target="_blank"></a></span>
	<hr>
	<div class="large-12 columns comments-section">
		<ul class="comment-list">
			<li class="comment-container">
				<div class="comment-meta">
					<img class="avatar" src="http://placeimg.com/100/100/people" alt="Avatar">
					<h5 class="comment-name"><a href="#">Junius Koolen</a></h5>
				</div>
				<div class="comment-text">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, nisl a ultricies tempor, urna dui viverra lorem, tincidunt imperdiet nulla ipsum in dolor. Cras mattis lorem a laoreet venenatis. Aliquam erat volutpat. Curabitur feugiat sapien at ligula sodales, et tincidunt justo tincidunt.</p>
				</div>
			</li>
			<li class="comment-container">
				<div class="comment-meta">
					<img class="avatar" src="http://placeimg.com/100/100/tech/sepia" alt="Avatar">
					<h5 class="comment-name"><a href="#">Matthias Guinness</a></h5>
				</div>
				<div class="comment-text">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, nisl a ultricies tempor, urna dui viverra lorem, tincidunt imperdiet nulla ipsum in dolor. Cras mattis lorem a laoreet venenatis. Aliquam erat volutpat. Curabitur feugiat sapien at ligula sodales, et tincidunt justo tincidunt.</p>
				</div>
			</li>
			<li class="comment-container">
				<div class="comment-meta">
					<img class="avatar" src="http://placeimg.com/100/100/any/sepia" alt="Avatar">
					<h5 class="comment-name"><a href="#">Jacobus Sneiders</a></h5>
				</div>
				<div class="comment-text">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, nisl a ultricies tempor, urna dui viverra lorem, tincidunt imperdiet nulla ipsum in dolor. Cras mattis lorem a laoreet venenatis. Aliquam erat volutpat. Curabitur feugiat sapien at ligula sodales, et tincidunt justo tincidunt.</p>
				</div>
			</li>
			<li class="comment-container">
				<div class="comment-meta">
					<img class="avatar" src="http://placeimg.com/100/100/people/grayscale" alt="Avatar">
					<h5 class="comment-name"><a href="#">Fergus Althuis</a></h5>
				</div>
				<div class="comment-text">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, nisl a ultricies tempor, urna dui viverra lorem, tincidunt imperdiet nulla ipsum in dolor. Cras mattis lorem a laoreet venenatis. Aliquam erat volutpat. Curabitur feugiat sapien at ligula sodales, et tincidunt justo tincidunt.</p>
				</div>
			</li>
		</ul>
	</div>
</section>

dls-comment-list.scss

.comments-section{
	.comment-list{
		list-style-type: none;
		margin-left: 0;
	}
	.comment-container{
		margin-bottom: 1em;
		list-style: none;
		clear: both;
		overflow: hidden;
	}
	.comment-meta{
		float: left;
		width:4.5em;		
	}
	.avatar{
		@include ht-w($Value: 60);
		display: block;
		border: solid thin $color-shadow;
		margin-bottom: 0.5em;
	}
	.comment-name{
		@extend %small-font-size;
		display: block;
	}
	.comment-text{
		margin-left: 4.8em;
	}
}
 
/* Medium screens - min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) {
	.comments-section{
		.comment-meta{
			width:6.5em;
		}
		.avatar{
			@include ht-w($Value: 100);
		}
		.comment-text{
			margin-left: 7.5em;
		}
	}
}