April 2016 Links

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage-min.js"></script>
<div class="ctn">
<h2 class="pg-heading">April 2016 Links</h2>

<div class="article">
    <h3>Poll Results: “front-end” and “front end”</h3>
    <p>The term “front-end” is correct when used as a compound adjective, and the term “front end” is correct when used as a noun.</p>
    <img src="https://cdn.css-tricks.com/wp-content/uploads/2016/04/front-end-results.png" alt="">
    <a href="https://css-tricks.com/poll-results-front-end-front-end" target="_blank">Article</a>
</div>

<div class="article">
    <img src="http://www.geek.com/wp-content/uploads/2016/01/doomhea.jpg" alt="">
    <h3>The average web page is now larger than the original Doom</h3>
    <p>As broadband over wires and mobile devices has expanded, so too has the amount of data contained in the average web page. The average site has gotten so hefty that it would be faster to download the original Doom, which was released in 1993. The web is officially Doom-ed.</p>
    <p>The original Doom game image was around 2.3MB, and the average web page has gotten slightly larger, according to data from MobiForge.</p>
    <img src="http://www.geek.com/wp-content/uploads/2016/04/web-page-size-revisited-revised-625x397.png" alt="">
    <a href="http://www.geek.com/games/the-average-web-page-is-now-larger-than-the-original-doom-1653097/" target="_blank">Article</a>
</div>

<div class="article">
    <h3>Interesting: The Results of The Ultimate CSS Survey</h3>
    <p>As many of you are aware, CSS can be a...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);

* {
  -webkit-font-smoothing: antialiased;
}

body {
    font-family: Roboto;
    padding: 16px;
    line-height: 1.5;
    font-weight: normal;
    color: #ccc;
    background: #292929;
    font-size: 18px;
}

h1, h2, h3, h4 {
    font-weight: normal;
}

h3 ~ p {
    margin-top: 0;
}

p {
    opacity: 0.86;
}

.pg-heading {
    margin-bottom: 0;
}

a {
    color: #4988ED;
    transition: opacity .3s;
}

a:hover {
    opacity: 0.75;
}

.ctn {
    max-width: 660px;
    margin: auto;
}

.pg-heading {
    margin-bottom: 30px;
    text-align: center;
}

.article {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    /* font-size: 13px; */
    /* line-height: 1.428571429; */
    color: #333;
    /* word-break: break-all; */
    /* word-wrap: break-word; */
    background-color: #f5f5f5;
    /* border: 1px solid #ccc; */
    border-radius: 4px;
}

.article a {
    margin-top: 10px;
    display: inline-block;
    padding: 5px 12px;
    background: #4988ED;
    color: white;
    border-radius: 4px;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
    margin: auto;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}