Skip to content

Instantly share code, notes, and snippets.

@qwtel

qwtel/ashley.html

Last active December 18, 2015 17:49
Show Gist options
  • Save qwtel/5820906 to your computer and use it in GitHub Desktop.
Save qwtel/5820906 to your computer and use it in GitHub Desktop.
Download ZIP
A modified version of the Ashley Tumblr theme, including profile picture, Google Analytics, Disqus, support for adding gists via <div class="gist">https://gist.github.com/your/gist</div>, waterfall layout pages via masonry, adding icons of the MFG Labs icon set via <i class="icon-name"></i> and automatic code formatting and highlighting.
Raw
ashley.html
<!DOCTYPE html>
<!--
Theme: Ashley v0.4
Author: Jxnblk [http://jxnblk.com]
For: Tumblr [http://tumblr.com/]
Terms: Protected under Creative Commons.
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Custom Variables -->
<meta name="image:Logo" content=""/>
<meta name="text:Colophon" content="Ashley theme by Jxnblk"/>
<meta name="text:GoogleWebFont" content="Gentium Book Basic"/>
<meta name="text:GoogleWebFontURL" content="Gentium+Book+Basic"/>
<meta name="color:Background" content="#fff"/>
<meta name="color:Text" content="#444"/>
<meta name="color:Link" content="#099"/>
<meta name="text:Google Analytics ID" content="" />
<meta name="text:Disqus shortname" content="" />
<!-- for adding gists to tumblr -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/fpifyru/VCxlv9xwi/writecapture.js"></script>
<script src="http://static.tumblr.com/fpifyru/AKFlv9zdu/embedgist.js"></script>
<!-- for waterfall layout project page -->
<script src="http://static.tumblr.com/kyalste/vbLmoo0t4/masonry.pkgd.min.js"></script>
<!-- for using icons like <i class="icon-twitter"></i> -->
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/kyalste/Yo3momu70/mfglabs_iconset.css">
<!-- for automatic syntax highlighting -->
<link rel="stylesheet" type="text/css" href="http://jmblog.github.io/color-themes-for-google-code-prettify/css/themes/github.css"></link>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script>
function styleCode() {
if (typeof disableStyleCode != 'undefined') { return; }
var a = false;
$('code').each(function() {
if (!$(this).hasClass('prettyprint')) {
$(this).addClass('prettyprint');
a = true;
}
});
if (a) { prettyPrint(); }
}
$(function() {
styleCode();
});
$(window).load(function() {
$('.tag-project').masonry({
itemSelector: 'article'
});
});
</script>
<title>{Title}{block:PostSummary} &mdash; {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
<link rel="shortcut icon" href="{Favicon}">
<link rel="apple-touch-icon" href="{PortraitURL-128}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:IfGoogleWebFont}
<link href='http://fonts.googleapis.com/css?family={text:GoogleWebFontURL}' rel='stylesheet' type='text/css'>
{/block:IfGoogleWebFont}
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
* {
margin: 0;
padding: 0;
}
body {
color: {color:Text};
background: {color:Background};
font-family: '{text:GoogleWebFont}', Georgia, serif;
font-size: 100%;
line-height: 1.5;
font-weight: 400;
}
h1, h2, .h1, .h2, h3, .h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.25;
margin-top: .5em;
}
h1, .h1 {
font-size: 32px;
}
h2, .h2 {
font-size: 24px;
}
h3, .h3, h4, h5, h6 {
font-size: 20px;
margin-top: .5em;
}
h1+h2 { margin-top: 0; }
p, .p, ul, ol {
font-size: 18px;
}
small, .small {
font-size: 14px;
}
strong, .strong {
font-weight: 700;
}
p, ul, ol, .gist { margin-top: 1em; }
.wrap {
width: 90%;
padding: 0 5%;
max-width: 48em;
margin: 0 auto;
overflow: hidden;
}
article {
margin-top: 3em;
padding-bottom: 2em;
border-bottom: 1px solid rgb(222, 222, 222);
}
a {
color: {color:Link};
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
header {
width: 90%;
padding: 2em 5% 0;
max-width: 48em;
margin: 0 auto;
}
header:after {
clear: both;
content: '.';
display: block;
height: 0;
visibility: hidden;
}
.logo {
float: left;
margin-right: 1em;
}
header h1, header p {
margin: 0;
}
header a, a.post-title {
color: {color:Text};
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-ms-transition: color 0.2s;
-o-transition: color 0.2s;
transition: color 0.2s;
}
header a:hover, a.post-title:hover {
text-decoration: none;
color: {color:Link};
}
.post img,
.photoset,
.photoset img,
.photoset_row {
max-width: 100%;
}
.post iframe, .video object {
width: 100%;
max-width: 100%;
}
.post blockquote {
padding-left: 1em;
border-left: 1px solid #ddd;
}
.post ul, .post ol {
margin-left: 2em;
}
.post footer ul, .post footer ol {
margin: 1em 0;
}
.quote blockquote {
padding: 0;
border: none;
font-style: italic;
}
.quote .source {
text-align: right;
}
.post footer {
padding: 0;
margin-top: 1em;
color: #aaa;
font-style: italic;
}
.post footer a {
color: #aaa;
}
.post footer a:hover {
color: #999;
}
.post footer .source {
float: right;
margin-right: 0;
}
.post footer ul li {
display: inline-block;
margin-right: 1em;
}
.tags {
margin-top: 1em;
}
.pagination {
margin-top: 4em;
text-align: center;
line-height: 3em;
}
.pagination:after {
clear: both;
content: '.';
display: block;
height: 0;
visibility: hidden;
}
.pagination a {
display: block;
height: 3em;
padding: 0 1em;
border-radius: 0.25em;
}
.pagination a:hover {
background: #eee;
text-decoration: none;
}
.pagination .previous {
float: left;
}
.pagination .next {
float: right;
}
footer.wrap {
padding-top: 2em;
padding-bottom: 2em;
}
ul.pages {
list-style: none;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-size: 18px;
padding: 0.5em 0;
}
ul.pages li {
display: inline-block;
margin-right: 1em;
}
ul.pages li a {
display: block;
color: {color:Text};
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-ms-transition: color 0.2s;
-o-transition: color 0.2s;
transition: color 0.2s;
}
ul.pages li a:hover {
text-decoration: none;
color: {color:Link};
}
/* Permalink Notes */
aside.notes {
margin-top: 4em;
}
ol.notes {
list-style: none;
margin-top: 1em;
border: 1px solid #ddd;
border-radius: 0.25em;
}
ol.notes, ol.notes a {
color: #aaa;
}
li.note {
display: block;
line-height: 2em;
padding: 0.5em 1em;
border-bottom: 1px solid #ddd;
}
li.note:last-child {
border: none;
}
ol.notes li.note img.avatar {
display: block;
float: left;
width: 2em;
height: 2em;
margin-right: 1em;
border-radius: 0.25em;
}
.notes .action a {
color: {color:Text};
}
.action {
display: block;
margin-left: 3em;
}
.notes blockquote {
line-height: 1.5;
margin-left: 3em;
}
#search {
margin-top: 1em;
}
#search input[type=text] {
width: 100%;
color: {color:Text};
font-family: '{text:GoogleWebFont}', Georgia, serif;
font-size: 20px;
background: none;
border: 1px solid rgb(222, 222, 222);
padding: 10px;
outline: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
#search input[type=submit] {
display: none;
}
header .stuff {
clear: both;
}
header .stuff .bubble {
position: relative;
z-index: 2;
float: right;
margin-left: 2em;
margin-bottom: 2em;
margin-top: 5px;
}
header .stuff .bubble img {
width: 72px;
-webkit-border-radius: 128px;
-moz-border-radius: 128px;
border-radius: 128px;
}
pre {
font-family: Consolas, 'Liberation Mono', Courier, monospace;
border: 1px solid rgb(222, 222, 222);
padding: 10px;
margin-top: 1em;
overflow-x: auto;
}
code {
font-size: 16px;
}
p code {
border: 1px solid rgb(222, 222, 222);
}
.tag-project h1, .tag-project .h1 { font-size: 32px; }
.tag-project h2, .tag-project .h2 { font-size: 24px; }
.tag-project h3, .tag-project .h3, .tag-project h4, .tag-project h5, .tag-project h6 { font-size: 20px; }
.tag-project p, .tag-project .p, .tag-project ul, .tag-project ol { font-size: 18px;}
.tag-project code { font-size: 16px; }
.tag-project small, .tag-project .small { font-size: 14px;}
@media screen and (min-width: 480px) {
h1, .h1 { font-size: 48px; }
h2, .h2 { font-size: 32px; }
h3, .h3, h4, h5, h6 { font-size: 24px; }
p, .p, ul, ol { font-size: 20px;}
code { font-size: 18px; }
small, .small { font-size: 16px;}
header .stuff .bubble img {
width: 128px;
}
ul.pages { font-size: 24px; }
}
@media screen and (min-width: 640px) {
h1, .h1 { font-size: 64px; }
h2, .h2 { font-size: 48px; }
h3, .h3, h4, h5, h6 { font-size: 32px; }
.tag-project article {
width: 47%;
padding: 1.5%;
float: left;
overflow: hidden;
}
}
header img {
width: 100%;
}
ul ul, ul ul ul, ol ol, ol ol ol {
margin-top: 0;
}
.muted {
opacity: 0.67;
}
{CustomCSS}
</style>
</head>
<body>
<header>
{block:IfLogoImage}<a href="/"><img src="{image:Logo}" class="logo" /></a>{/block:IfLogoImage}
<div class="stuff">
<a class="bubble" href="/"><img src="{PortraitURL-128}" /></a>
<h1 id="h1"><a href="/">{Title}</a></h1>
{block:Description}
<p>{Description}</p>
{/block:Description}
</div>
</header>
<div class="small wrap">
{block:HasPages}
<ul class="pages">
{block:Pages}
<li><a href="{URL}#h1">{Label}</a></li>
{/block:Pages}
{block:AskEnabled}<li><a href="/ask#h1">{AskLabel}</a></li>{/block:AskEnabled}
</ul>
{/block:HasPages}
<!--
<form id="search" action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="Search"/>
<input type="submit" value="Search"/>
</form>
-->
</div>
<div class="content wrap">
<section class="posts">
{block:NoSearchResults}
<h2>Sorry, nothing found for &ldquo;{SearchQuery}&rdquo;.</h2>
{/block:NoSearchResults}
{block:TagPage}
<div class="tag-{Tag}">
{/block:TagPage}
{block:Posts}
<article class="post {PostType}">
{block:Text}
{block:Title}
<a href="{Permalink}#h1" class="post-title"><h2>{Title}</h2></a>
{/block:Title}
{Body}
{block:More}<a href="{Permalink}#h1" class="p">Read More &raquo;</a>{/block:More}
{/block:Text}
{block:Photo}
{LinkOpenTag}
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
{LinkCloseTag}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}
{block:Photoset}
{Photoset-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}
{block:Quote}
<blockquote>
<p class="h3">&ldquo;{Quote}&rdquo;</p>
{block:Source}
<p class="source">&ndash; {Source}</p>
{/block:Source}
</blockquote>
{/block:Quote}
{block:Link}
<h2><a href="{URL}#h1"{Target}>{Name} &raquo;</a></h2>
{block:Description}
{Description}
{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}
<h2>{Title}</h2>
{/block:Title}
<ul>
{block:Lines}
<li class="{Alt}">
{block:Label}
<b>{Label}</b>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}
{block:Audio}
{AudioEmbed-640}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Audio}
{block:Video}
{Video-700}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}
{block:Answer}
<h2>{Asker} asked: <q>{Question}</q></h2>
{Answer}
{/block:Answer}
{block:Date}
<footer>
<ul class="small">
<li><a href="{Permalink}#h1" title="{DayOfWeek}, {DayOfMonth} {Month} {Year}, {24Hour}:{Minutes}:{Seconds}"><i class="icon-clock"></i> {TimeAgo}</a></li>
{block:RebloggedFrom}<li class="source"> (reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>)</li>{/block:RebloggedFrom}
{block:ContentSource}
<li class="source">via <a href="{SourceURL}">{SourceTitle}</a></li>
{/block:ContentSource}
</ul>
{block:PermalinkPage}
{block:HasTags}
<ul class="tags small">
{block:Tags}
<li>
<a href="{TagURL}#h1">#{Tag}</a>
</li>
{/block:Tags}
</ul>
{/block:HasTags}
{block:IfDisqusShortname}
<div style="margin-top: 2em">
<script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>{block:Permalink}<div id="disqus_thread"></div>
<script type="text/javascript">
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://{text:Disqus Shortname}.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript={text:Disqus Shortname}">comments powered by Disqus.</a></noscript>
{lang:Blog comments powered by Disqus 2}
{/block:Permalink}
<script type="text/javascript">
var disqus_shortname = '{text:Disqus Shortname}';
(function () {
var s = document.createElement('script'); s.async = true;
s.src = 'http://{text:Disqus Shortname}.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
</div>
{/block:IfDisqusShortname}
{/block:PermalinkPage}
</footer>
{/block:Date}
</article> <!-- /post -->
{block:PostNotes}
<aside class="notes">
{block:NoteCount}<p>{NoteCountWithLabel}</p>{/block:NoteCount}
{PostNotes-64}
</aside>
{/block:PostNotes}
{/block:Posts}
{block:TagPage}
</div>
{/block:TagPage}
{block:Pagination}
<div class="pagination p">
<span class="previous">{block:PreviousPage}<a href="{PreviousPage}#h1" class="previous">{/block:PreviousPage}&laquo; Previous{block:PreviousPage}</a>{/block:PreviousPage}</span>
<span class="page-numbers">{CurrentPage}/{TotalPages}</span>
<span class="next">{block:NextPage}<a href="{NextPage}#h1">{/block:NextPage}Next &raquo;{block:NextPage}</a>{/block:NextPage}</span>
</div>
{/block:Pagination}
</section> <!-- /posts -->
</div> <!-- /content -->
<footer class="small wrap">
<ul class="pages">
{block:HasPages}
{block:Pages}
<li><a href="{URL}#h1">{Label}</a></li>
{/block:Pages}
{/block:HasPages}
{block:AskEnabled}<li><a href="/ask#h1">{AskLabel}</a></li>{/block:AskEnabled}
</ul>
{block:IfColophon}<p class="small" style="text-align: center">{text:Colophon}</p>{block:IfColophon}
</footer>
{block:IfGoogleAnalyticsID}
<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', '{text:Google Analytics ID}', 'tumblr.com');
ga('send', 'pageview');
</script>
{/block:IfGoogleAnalyticsID}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment