Postach.io templete

custom.js

$(document).ready(function(){
  $(".post-body img").each(function() {
		var src=$(this).attr("src");
		var href=src.replace('w600_','');
		$(this).wrap($('<a/>').attr('href', href));
		$(this).parent().addClass("image");
	});

    $(".image").colorbox({rel: 'gal',height:'90%'});
})

style.css

/*
Social icons by http://www.premiumpixels.com/freebies/41-social-media-icons-png/
Background patterny by http://subtlepatterns.com/dotnoise-light-grey/
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,latin-ext);

.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
/* Utilities */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
.align-center {
  text-align: center;
}
.hide {
  display: none;
}
.show {
  display: block;
}
.invisible {
  visibility: hidden;
}
.block {
  *zoom: 1;
  display: block;
}
.block:before,
.block:after {
  display: table;
  content: "";
}
.block:after {
  clear: both;
}
.block:after {
  content: "";
  display: table;
  clear: both;
}
.transition {
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}
.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
/**
 * REM units mixin with PX fallback for legacy browsers with no REM unit support
 * https://github.com/christopher-ramirez/remixings
 */
/* LESS mixins
--------------------------------------------- */
div.post h2,
div.post h3 {
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
  line-height: default;
}

div.post p {
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
  margin: 0;
  padding: 10px 0 10px 0;
}
div.post ul li,
div.post ol li {
  list-style-type: square;
  margin-left: 40px;
  padding: 10px 0 10px 0;
  line-height: 16pt;
  font-size: 20px;
  font-weight: 300;
}
div.post blockquote {
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
  padding: 10px 0 10px 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}
html {
  font-size: 100%;
}
body {
  line-height: 1.65;
  font-family: 'Open Sans', sans-serif;
  height: 100%;
  width: 100%;
  background: #fff url('http://michal.cerny.me/postachio/bgnoise_lg.png') fixed;
}
ul,
li {
  list-style-type: none;
}
ul,
li,
img,
form,
table,
tr,
td,
ol,
p,
h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
  border: 0;
  position: relative;
  color: #000000;
}
p {
  padding: 0;
  margin: 0;
}
a,
button,
input[type="submit"],
input[type="button"] {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-backface-visibility: hidden;
}
a.btn,
button.btn,
input[type="submit"].btn,
input[type="button"].btn {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
a {
  text-decoration: none;
  color: #1abc9c;
}
a:visited {
  color: #1abc9c;
}
a:hover {
  color: #000000;
  text-decoration: none;
  color: #1abc9c;
}
div.header {
  position: fixed;
  top: 0px;
  left: 50%;
  padding: 0;
  margin: 0 0 0 -500px;
  height: 100%;
  padding: 0 2.127659574468085% 0 2.127659574468085%;
  *zoom: 1;
}
div.header div.gradient {
  position: absolute;
  height: 50%;
  top: 50%;
  left: 0;
  width: 100%;
  background: transparent;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, transparent));
  background: -ms-linear-gradient(bottom, #000000, transparent);
  background: -moz-linear-gradient(center bottom, #000000 0%, transparent 100%);
  background: -o-linear-gradient(transparent, #000000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='#000000', GradientType=0);
}
div.header div.title {
  float: left;
  margin: 20px 0 0 20px;
}
div.header div.title h1 {
  display: none;
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: #ffffff;
  font-weight: 400;
  padding: 0;
  margin: 0;
}
div.header div.title ul.social {
  display: inline-block;
  margin: 0 auto;
}
div.header div.title ul.social li {
  list-style-type: none;
  display: inline-block;
}
div.header div.title ul.social li a {
  display: inline-block;
  width: 32px;
  height: 32px;
  color: #000000;
  text-align: center;
  padding-top: 4px;
  margin: 0 5px 0 5px;
}

div.header div.bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
div.header div.site-description {
  position: relative;
  padding: 30px;
  text-align: center;
}
div.header div.site-description h1 {
  font-size: 20px;
  line-height: 30px;
  color: #ffffff;
  padding-bottom: 10px;
}
div.header div.site-description p {
  font-size: 16px;
  line-height: 26px;
  color: #ffffff;
}
div.header a.logo {
  display: block;
  position: relative;
  width: 85px;
  height: 85px;
  background-color: #000000;
  margin: 0 auto;
  margin-top: 80px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 30px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 30px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 30px rgba(50, 50, 50, 0.75);
}
div.header a.logo:hover {
  background-color: #1abc9c;
}
div.header a.logo img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
div.header a.logo i {
  position: relative;
  display: block;
  color: #ffffff;
  font-size: 40px;
  line-height: 40px;
  top: 50%;
  margin-top: -20px;
}
div.header:before,
div.header:after {
  display: table;
  content: "";
}
div.header:after {
  clear: both;
}
div.header:after {
  content: "";
  display: table;
  clear: both;
}
div.posts {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 50px 0 0 -135px;
}
div.post {
  background: #fff;
  margin: 24px 0 20px 0 !important;
-webkit-box-shadow: 0px 0px 30px rgba(50, 50, 50, 0.30);
-moz-box-shadow:    0px 0px 30px rgba(50, 50, 50, 0.30);
box-shadow:         0px 0px 30px rgba(50, 50, 50, 0.30);
}

div.post p {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
}
div.post p.read-more,
div.post p.back {
  font-size: 16px;
}
div.post p.read-more a,
div.post p.back a {
  color: #1abc9c;
}
div.post p.read-more a:hover,
div.post p.back a:hover {
  color: #000000;
}
div.post p.date {
  color: #999999;
  font-size: 16px;
}
div.post p.comments {
  color: #999999;
  font-size: 16px;
}
div.post p.comments a {
  color: #999999;
}
div.post p.comments a:hover {
  color: #1abc9c;
}
div.post h1 {
  font-size: 38px;
  line-height: 46px;
  padding-bottom: 10px;
}
div.post h2 {
  color: #fff;
  background: #333333 url('http://michal.cerny.me/postachio/h2.png') 60px bottom no-repeat;
  padding: 20px 40px 20px 40px;
}
div.post h2 a {
  color: #fff;
}
div.post h2 a:hover {
  color: #ebebeb;
}
div.post div.post-body, div.post div.post-body > p,div.post div.post-body > font,div.post div.post-body > font p, div.post div.post-body > p font{
	font-size: 14px !important;
	font-weight: 300 !important;
	line-height: inherit;
	margin: 0;
	padding: 0;
}

div.posts div.post div.post-body{
	padding: 30px 30px 0 30px;
}

div.post.whole.span7 div.post-body{
	padding: 0px 30px 0 30px;
}
div.post div.post-body ul li,
div.post div.post-body ol li {
  font-weight: 400;
  font-size: 14px;
  line-height: 28px;
}
div.post div.post-info {
  display: block;
  clear: both;
  padding: 10px 30px 20px 30px;
}
div.post div.post-footer {
  display: block;
  clear: both;
  padding: 0px 30px 0px 30px;
}
div.post div.post-info:before,
div.post div.post-info:after {
  display: table;
  content: "";
}
div.post div.post-info:after {
  clear: both;
}
div.post div.post-info:after {
  content: "";
  display: table;
  clear: both;
}
div.post div.post-info .info-left {
  width: 49%;
  float: left;
}
div.post div.post-info .info-right {
  width: 49%;
  float: right;
  text-align: right;
}
div.post div.post-info p.date {
  color: #999999;
}
div.post div.post-comments {
  padding: 0 30px 30px 30px;
}
div.footer {
  padding: 80px 0 40px 0;
  *zoom: 1;
}
div.footer:before,
div.footer:after {
  display: table;
  content: "";
}
div.footer:after {
  clear: both;
}
div.footer:after {
  content: "";
  display: table;
  clear: both;
}
div.footer p.copyright {
  color: #999999;
}
div.footer p.copyright a {
  color: #999999;
}
div.footer p.copyright a:hover {
  color: #1abc9c;
}
div.footer ul {
  display: block;
}
div.footer ul li {
  display: inline;
}
div.footer ul li a {
  text-transform: uppercase;
  display: inline-block;
  margin: 0 30px 0 0;
  color: #1abc9c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}
div.footer ul li a:hover {
  color: #000000;
}
div.footer ul li.link-icon a {
  position: relative;
  top: 2px;
  font-size: 18px;
}

.header h1{
  color: #000;
  text-align: center;
  margin: 20px 0 10px 0;
}
.header p{
  color: #000;
  text-align: center;   
}

div.post h3 {
  clear: both;
  font-size: 25px !important;
  color: #000;
  font-weight: 900 !important;
  margin: 0 !important;
}
div.post > h3 font{
  clear: both;
  font-size: 25px !important;
  color: #000;
  font-weight: 900 !important;
  margin: 0 !important;
}

div.post h4 {
  clear: both;
  font-size: 18px !important;
  color: #000;
  font-weight: 600 !important;
  margin: 20px 0 0 0 !important;
}
div.post > h4 font{
  clear: both;
  font-size: 18px !important;
  color: #000;
  font-weight: 600 !important;
  margin: 20px 0 0 0 !important;
}

.post-body .image{
	float: left;
	width: 185px;
	max-height: 195px;
	overflow: hidden;
	margin: 5px;
}
.cboxPhoto{
	margin: 0 !important;
}
@media (max-width: 1200px) {
  body {
    padding: 0;
  }
  div.header {
  	position: static;
    left: auto;
    float: none;
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  div.header p{
  	  margin: 0 auto;
	  width: 275px;
  }
  div.header.span4 {
    margin: 0;
    padding: 0;
  }
  div.header div.title {
	width: 100%;
	text-align: center;
	margin-left: -5px;
  }
  div.posts {
    padding: 0px 30px;
    margin: 0 auto 0 auto;
    left: auto;
    top: auto;
    position: static;
    display: block;
    float: none;
  }

  div.post h2{
	  font-size: 25px;
  }
}

theme.html

<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
    <meta charset="utf-8">
    <title>{% if is_home %}{{ site.author }}{% elif is_post %}{{ post.title }}{% elif is_link %}{{ link.title }}{% elif is_page %}{{ page.title }}{% endif %} | {{ site.name }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="author" content="{{ site.author }}" />
    <meta name="description" content="{{ site.bio }} - {{ site.author }}" />
    <meta name="copyright" content="Copyright (c) 2013 {{ site.author }}" />
    <meta name="classification" content="blog" />

    {% if is_post %}
    <meta property="article:published_time" content="{{ post.created_at }}" />
    {% endif %}

    <meta property="og:site_name" content="{{ site.name }}" />
    <meta property="og:image" content="{{ account.email|gravatar(128) }}" />
    {% if is_post %}
    <meta property="og:type" content="article" />
    <meta property="og:title" content="{{ post.title }}" />
    <meta property="og:url" content="http://{{ site.domain }}{{ post.permalink }}" />
    <meta property="og:description" content="{{ post.content|striptags|truncate(255)|e }}" />
    {% elif is_page %}
    <meta property="og:type" content="article" />
    <meta property="og:title" content="{{ page.title }}" />
    <meta property="og:url" content="http://{{ site.domain }}{{ page.permalink }}" />
    <meta property="og:description" content="{{ page.content|striptags|truncate(255)|e }}" />
    {% else %}
    <meta property="og:type" content="website" />
    <meta property="og:title" content="{{ site.name }}" />
    <meta property="og:url" content="http://{{ site.domain }}" />
    <meta property="og:description" content="{{ site.bio }}" />
    {% endif %}

    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@{{ site.twitter }}">
    {% if is_post %}
    <meta name="twitter:title" content="{{ post.title }}">
    <meta name="twitter:description" content="{{ post.content|striptags|truncate(255)|e }}...">
    {% elif is_page %}
    <meta name="twitter:title" content="{{ page.title }}">
    <meta name="twitter:description" content=" {{ page.content|striptags|truncate(255)|e }}...">
    {% else %}
    <meta name="twitter:title" content="{{ site.name }}">
    <meta name="twitter:description" content="{{ site.bio|striptags|truncate(255)|e }}...">
    {% endif %}
    <meta name="twitter:creator" content="@{{ site.twitter }}">
    <meta name="twitter:image:src" content="{{ account.email|gravatar(128) }}">
    <meta name="twitter:domain" content="http://{{ site.domain }}">

    <link href="{{ site.atom_url }}" rel="alternate" title="{{ site.name }} Feed" type="application/atom+xml" />
    <link href="{{ static('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" />
    <link href="{{ static('bootstrap/css/bootstrap-responsive.min.css') }}" rel="stylesheet" />
    <link href="{{ static('fontawesome/css/font-awesome.min.css') }}" rel="stylesheet" />
    <link href="http://michal.cerny.me/postachio/style.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="http://michal.cerny.me/postachio/colorbox/colorbox.css" media="screen" />
    <!--[if IE 7]>
        <link href="{{ static('fontawesome/css/font-awesome-ie7.min.css') }}" rel="stylesheet">
    <![endif]-->
    <!--[if lt IE 9]>
      <script src="{{ static('bootstrap/js/html5shiv.js') }}"></script>
    <![endif]-->

</head>
<body>

<div class="row">
    <div class="span3 header">
        <a class="logo" href="/">
            <img class="avatar" src="{{ account.email|gravatar(85) }}" alt="{{ site.author }}" width="100%" height="100%" />
        </a>
        <h1>{{ site.author }}</h1>
        <p>{{ site.bio }}</p>
        <div class="title">
            <h1>{{ site.name }}</h1>
            <ul class="social">
                {% if site.facebook %}
                <li>
                    <a href="{{ site.facebook }}" title="Facebook" target="_blank">
                        <img src="http://michal.cerny.me/postachio/facebook.png" alt="Facebook" />
                    </a>
                </li>
                {% endif %}
                
                {% if site.twitter %}
                <li>
                    <a href="{{ site.twitter }}" title="Twitter" target="_blank">
                        <img src="http://michal.cerny.me/postachio/twitter.png" alt="Twitter" />
                    </a>
                </li>
                {% endif %}
            
                {% if site.googleplus %}
                <li>
                    <a href="{{ site.googleplus }}" title="Google+" target="_blank">
                        <img src="http://michal.cerny.me/postachio/googleplus.png" alt="Google+" />
                    </a>
                </li>
                {% endif %}

                {% if site.linkedin %}
                <li>
                    <a href="{{ site.linkedin }}" title="LinkedIn" target="_blank">
        				<img src="http://michal.cerny.me/postachio/linkedin.png" alt="Linkedin" />
                    </a>
                </li>
                {% endif %}
                <li>
                    <a href="{{ site.atom_url }}" title="RSS" target="_blank">
                        <img src="http://michal.cerny.me/postachio/rss.png" alt="RSS" />
                    </a>
                </li>
            </ul>
        </div>        
    </div>
</div>

<div class="row wrapper">
{% if is_home %}

    <div class="span7 offset1 posts">
        {% if posts %}
            {% for post in posts %}
                <div class="post ">
                    <h2><a href="{{ post.permalink }}">{{ post.title }}</a></h2>
                    <div class="post-body">
                        {% if post.content|striptags|wordcount > 0 %}
                            <p>{{ post.content|striptags|truncate(255) }}</p>
                        {% endif %}
                    </div>
                    <div class="post-info">
                        <div class="info-left">
                            <p class="date">{{ post.created_at|format_date }}</p>
                        </div>
                        <div class="info-right">
                            <p class="read-more"><a href="{{ post.permalink }}">Read More &raquo;</a></p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    </div>

{% elif is_post %}

    <div class="span7 offset1 posts">
        <div class="post whole span7">
            <h2>{{ post.title }}</h2>
            <div class="post-info">
                <div class="info-left">
                    <p class="date">{{ post.created_at|format_date }}</p>
                </div>
                <div class="info-right">
                    <p class="comments">
                        <a href="#" id="comment-url"></a>
                    </p>
                </div>
            </div>
            <div class="post-body">
                {{ post.content }}
            </div>
            <div class="post-footer">
                <p class="back"><a href="/">&laquo; Go Back</a></p>
            </div>
            {% if site.disqus %}
            <div class="post-comments">
                <div id="disqus_thread"></div>
                <script type="text/javascript">
                    var disqus_shortname = '{{ site.disqus }}';
                    (function() {
                        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                    })();
                </script>
            </div>
            {% endif %}
        </div>
    </div>

{% elif is_link %}

    <div class="span7 offset1 posts">
        <div class="post whole span6">
            <h1>{{ link.title }}</h1>
            <div class="post-info">
                <div class="info-left">
                    <p class="date">{{ link.created_at|format_date }}</p>
                </div>
                <div class="info-right">
                    <p class="comments">
                        <a href="/"><i class="icon-comment"></i> 0</a>
                    </p>
                </div>
            </div>
            <div class="post-body">
                {{ link.content }}
                <p><a href="{{ link.url }}"><i class="icon-share"></i> {{ link.url }}</a></p>
            </div>
            <div class="post-footer">
                <p class="back"><a href="/">&laquo; Go Back</a></p>
            </div>
            {% if site.disqus %}
            <div class="post-comments">
                <div id="disqus_thread"></div>
                <script type="text/javascript">
                    var disqus_shortname = '{{ site.disqus }}';
                    (function() {
                        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                    })();
                </script>
            </div>
            {% endif %}
        </div>
    </div>

{% elif is_page %}

    <div class="span7 offset1 posts">
        <div class="post whole span6">
            <h1>{{ page.title }}</h1>
            <div class="post-body">
                {{ page.content }}
            </div>
            <div class="post-footer">
                <p class="back"><a href="/">&laquo; Go Back</a></p>
            </div>
        </div>
    </div>

{% endif %}

</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="{{ static('bootstrap/js/bootstrap.min.js') }}"></script>
<script src="http://michal.cerny.me/postachio/custom.js"></script>
<script src="http://michal.cerny.me/postachio/colorbox/jquery.colorbox-min.js"></script>
{% if is_post or  is_page or is_link and site.disqus%}
<script>
    $(document).ready(function(){
        var loc=$(location).attr('href');
        
        $("#comment-url").attr("href",loc+"#disqus_thread");
        
        (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
        }());
    })
</script>
{% endif %}
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-38006059-8', 'cerny.me');
  ga('send', 'pageview');

</script>
</body>
</html>