Skip to content

Instantly share code, notes, and snippets.

@sarukuku
Created April 26, 2012 12:21
Show Gist options
  • Save sarukuku/2499229 to your computer and use it in GitHub Desktop.
Save sarukuku/2499229 to your computer and use it in GitHub Desktop.
Responsive blog post template with a picture / youtube embed / vimeo embed / code snippet support.
/**
* Responsive blog post template with a picture / youtube embed / vimeo embed / code snippet support.
*/
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300);
/**
* Natural box-model
*/
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div.container {
position: relative;
max-width: 1024px;
margin: 0 auto;
}
article.blog-post {
width: 100%;
margin: 0 auto;
font-family: Oswald, Arial;
font-weight: 400;
font-size: 15px;
transition: all 0.5s ease-in-out;
overflow: hidden;
}
article.blog-post:hover {
background-color: #F5F5F5;
}
article.blog-post:last-child hr {
display: none;
}
h1.blog-post-heading {
background-color: black;
display: inline-block;
color: white;
font-size: 25px;
text-transform: uppercase;
margin: 0;
padding: 3px;
}
h2.blog-post-time,
h2.blog-post-link {
background-color: black;
display: inline-block;
color: white;
font-size: 13px;
margin: 4px 0 0 0;
padding: 3px;
}
article.blog-post p a {
color: black;
text-decoration: underline;
}
article.blog-post p a:hover {
color: orange;
}
article.blog-post a h1,
article.blog-post a h2,
article.blog-post p a {
transition: all 0.1s ease-in-out;
padding: 0 4px;
}
article.blog-post a:hover h1,
article.blog-post a:hover h2 {
color: orange;
}
article.blog-post p {
border-left: 3px solid black;
padding: 0 0 0 5px;
line-height: 1.7em;
color: #333;
margin: 18px 0;
font-family: Verdana, "Bitstream Vera Sans", sans-serif;
font-size: 14px;
}
article.blog-post img {
display: block;
max-width: 100%;
position: relative;
margin: 0 auto;
border-top: 25px solid black;
border-bottom: 25px solid black;
}
article.blog-post iframe {
display: block;
position: relative;
margin: 0 auto;
max-width: 100%;
}
article.blog-post pre.blog-post-code-snippet {
border-left: 5px dotted black;
padding: 5px 0 5px 15px;
line-height: 1.7em;
vertical-align: baseline;
transition: all 0.1s ease-in-out;
}
article.blog-post pre.blog-post-code-snippet:hover {
border-left: 5px dotted orange;
}
article.blog-post pre.blog-post-code-snippet code {
color: black;
font-family: ‘Lucida Console’, Monaco, monospace;
}
article.blog-post hr {
margin: 40px 0;
}
<!-- content to be placed inside <body>…</body> -->
<div class="container">
<article class="blog-post">
<a href="#"><h1 class="blog-post-heading">Vimeo embed support</h1></a>
<br />
<h2 class="blog-post-time">26.04.2012</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<iframe src="http://player.vimeo.com/video/13703448?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<p>Lorem ipsum dolor sit amet. <a href="#">Lorem ipsum dolor sit amet.</a> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<a href="#"><h2 class="blog-post-link">42⎪COMMENT</h2></a>
<hr />
</article>
<article class="blog-post">
<a href="#"><h1 class="blog-post-heading">YouTube embed support</h1></a>
<br />
<h2 class="blog-post-time">26.04.2012</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<iframe width="560" height="315" src="http://www.youtube.com/embed/316AzLYfAzw" frameborder="0" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet. <a href="#">Lorem ipsum dolor sit amet.</a> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<a href="#"><h2 class="blog-post-link">42⎪COMMENT</h2></a>
<hr />
</article>
<article class="blog-post">
<a href="#"><h1 class="blog-post-heading">Different size pictures are handled gracefully</h1></a>
<br />
<h2 class="blog-post-time">26.04.2012</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<img src="http://lorempixel.com/800/400/" alt="picture" />
<p>Lorem ipsum dolor sit amet. <a href="#">Lorem ipsum dolor sit amet.</a> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<a href="#"><h2 class="blog-post-link">42⎪COMMENT</h2></a>
<hr />
</article>
<article class="blog-post">
<a href="#"><h1 class="blog-post-heading">Different size pictures are handled gracefully</h1></a>
<br />
<h2 class="blog-post-time">26.04.2012</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<img src="http://lorempixel.com/800/600/" alt="picture" />
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<a href="#"><h2 class="blog-post-link">42⎪COMMENT</h2></a>
<hr />
</article>
<article class="blog-post">
<a href="#"><h1 class="blog-post-heading">Different size pictures are handled gracefully</h1></a>
<br />
<h2 class="blog-post-time">26.04.2012</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<img src="http://lorempixel.com/1024/400/" alt="picture" />
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<a href="#"><h2 class="blog-post-link">42⎪COMMENT</h2></a>
<hr />
</article>
<article class="blog-post">
<a href="#"><h1 class="blog-post-heading">Different size pictures are handled gracefully</h1></a>
<br />
<h2 class="blog-post-time">26.04.2012</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<pre class="blog-post-code-snippet">
<code>article.blog-post iframe {
display: block;
position: relative;
margin: 0 auto;
max-width: 100%;
}</code></pre>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<a href="#"><h2 class="blog-post-link">42⎪COMMENT</h2></a>
<hr />
</article>
</div>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment