Skip to content

Instantly share code, notes, and snippets.

@MichalCerny

MichalCerny/custom.js

Last active December 18, 2015 07:39
Show Gist options
  • Save MichalCerny/5748041 to your computer and use it in GitHub Desktop.
Save MichalCerny/5748041 to your computer and use it in GitHub Desktop.
Download ZIP
Postach.io templete
Raw
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%'});
})
Raw
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;
}
}
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment