Created
April 26, 2012 12:21
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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&byline=0&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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"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