Skip to content

Instantly share code, notes, and snippets.

@andrewjkerr
Last active August 29, 2015 14:13
Show Gist options
  • Save andrewjkerr/0dbaecb7c9bd9b1e389d to your computer and use it in GitHub Desktop.
Save andrewjkerr/0dbaecb7c9bd9b1e389d to your computer and use it in GitHub Desktop.
My semi-custom Tumblr theme.
<!DOCTYPE html>
<!--
Original Theme: Ashley v0.6
Original Author: Jxnblk [http://jxnblk.com]
For: Tumblr [http://tumblr.com/]
Terms: Protected under Creative Commons. [http://creativecommons.org/licenses/by-nc/3.0/]
Modified Theme: type v0.1
Modified Author: andrewjkerr [https://andrewjkerr.github.io]
License: CC BY-NC [http://creativecommons.org/licenses/by-nc/3.0/]
-->
<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="#09b"/>
<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}">
<meta name=viewport content='width=device-width, initial-scale=1'>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display:block;
}
audio, canvas, video {
display:inline-block;
}
audio:not([controls]) {
display:none;
height:0;
} [hidden] {
display:none;
}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl {
margin:0;
padding:0;
}
a:focus {
outline:thin dotted;
}
a:active, a:hover {
outline:0;
}
b, strong {
font-weight:bold;
}
dfn {
font-style:italic;
}
hr {
-moz-box-sizing:content-box;
box-sizing:content-box;
height:0;
}
mark {
background:#ff0;
color:#000;
}
code, kbd, pre, samp {
font-family:monospace, serif;
font-size:1em;
}
q {
quotes:"\201C" "\201D" "\2018" "\2019";
}
small {
font-size:80%;
}
sub, sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}
sup {
top:-0.5em;
}
sub {
bottom:-0.25em;
}
img {
border:0;
}
svg:not(:root) {
overflow:hidden;
}
figure {
margin:0;
}
fieldset {
border:1px solid #c0c0c0;
margin:0 2px;
padding:0.35em 0.625em 0.75em;
}
legend {
border:0;
padding:0;
}
button, input, select, textarea {
font-family:inherit;
font-size:100%;
margin:0;
}
button, input {
line-height:normal;
}
button, select {
text-transform:none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance:button;
cursor:pointer;
}
button[disabled], html input[disabled] {
cursor:default;
}
input[type="checkbox"], input[type="radio"] {
box-sizing:border-box;
padding:0;
}
input[type="search"] {
-webkit-appearance:textfield;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none;
}
button::-moz-focus-inner, input::-moz-focus-inner {
border:0;
padding:0;
}
textarea {
overflow:auto;
vertical-align:top;
}
table {
border-collapse:collapse;
border-spacing:0;
}
body {
color: {color:Text};
background: #f5f7f9;
font-family: 'Whitney SSm A','Whitney SSm B',Helvetica,Arial;
font-size: 100%;
line-height: 1.5;
font-weight: 200;
}
h1, h2, .h1, .h2 {
font-weight: 400;
line-height: 1.25;
margin-top: .5em;
}
h1, .h1 {
font-size: 32px;
}
h2, .h2 {
font-size: 24px;
}
h3, .h3 {
font-size: 20px;
}
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 { margin-top: 1em; }
@media screen and (min-width: 480px) {
h1, .h1 { font-size: 48px; }
h2, .h2 { font-size: 32px; }
h3, .h3 { font-size: 24px; }
p, .p, ul, ol { font-size: 16px;}
small, .small { font-size: 14px;}
}
@media screen and (min-width: 640px) {
h1, .h1 { font-size: 64px; }
h2, .h2 { font-size: 48px; }
h3, .h3 { font-size: 32px; }
}
.wrap {
max-width: 48em;
margin: 0 auto;
overflow: hidden;
}
article {
margin-top: 2em;
}
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;
overflow: hidden;
}
.logo {
float: left;
margin-right: 1em;
}
header h1, header p {
margin: 0;
}
header p {
text-align: justify;
}
header a {
color: {color:Link};
}
header a:hover {
text-decoration: underline;
}
a.post-title {
color: {color:Text};
}
a.post-title:hover {
text-decoration: none;
color: {color:Link};
}
.post img,
.photoset,
.photoset img,
.photoset_row {
max-width: 100%;
}
.post {
background: #fff;
border: 2px solid #eaecee;
}
.post p {
padding: 0 25px;
font-weight: 100;
}
.post h2, .post h3 {
padding: 0 25px;
}
.post img {
display: block;
margin: 0 auto;
}
.post iframe, .video object {
width: 100%;
max-width: 100%;
margin-top: 35px;
margin-left: 35px;
}
.post blockquote {
padding-left: 1em;
border-left: 1px solid #ddd;
}
.post ul, .post ol {
margin-left: 2em;
padding: 0 25px;
}
.post footer ul, .post footer ol {
margin: 0;
padding: 15px 25px;
}
.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;
overflow: 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;
}
ul.pages li {
display: inline-block;
margin-right: 1em;
}
ul.pages li a {
display: block;
height: 3em;
line-height: 3em;
}
/* 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: #777;
}
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:Link};
font-weight: bold;
}
.action {
display: block;
margin-left: 3em;
}
.notes blockquote {
line-height: 1.5;
margin-left: 3em;
}
.notes blockquote a {
color: #000;
}
header h1 {
text-align: center;
}
header h3 {
text-align: center;
}
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
{CustomCSS}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://andrewjkerr.github.io/js/typed.js"></script>
<script>
$(function(){
$(".typed-element").typed({
strings: ["a hacker.", "a developer.", "a student.", "Andrew."],
typeSpeed: 25,
loop: false,
callback: function(){ $(".tagline").fadeIn( "slow" ); $(".typed").animate({'padding-top': 25}, "slow") }
});
});
</script>
<script>
$(document).ready(function() {
$(".tagline").hide();
});
</script>
</head>
<body>
<header>
<!-- Typed header -->
<span style="height: 175px; width: 500px; display: block; margin: 0 auto; text-align: center">
<h1 class="typed" style="padding-top: 50px">I'm <span class="typed-element"></span></h1>
<h3 class="tagline" style="display:none">hacker / developer / student</h4>
</span>
<!-- Nav -->
<p style="text-align: center; margin-bottom: 10px"><a href="http://andrewjkerr.tumblr.com">Home</a> // <a href="http://andrewjkerr.tumblr.com/ask">Ask</a></p>
<!-- Description -->
<p>Just a nerd who likes music, funny things, and computers. Currently an intern at <a href="https://www.blockscore.com">BlockScore</a> in Mountain View. Future security intern at <a href="https://www.tumblr.com">Tumblr</a> in New York City. Normally Software Engineering student at the University of Florida.</p>
</header>
<div class="content wrap">
<section class="posts">
{block:NoSearchResults}
<h2>Sorry, nothing found for &ldquo;{SearchQuery}&rdquo;.</h2>
{/block:NoSearchResults}
{block:TagPage}
<h2 class="h1">#{Tag}</h2>
{/block:TagPage}
{block:Posts}
<article class="post {PostType}">
{block:Text}
{block:Title}
<a href="{Permalink}" class="post-title"><h2>{Title}</h2></a>
{/block:Title}
{Body}
{block:More}<a href="{Permalink}" 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}
{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}"{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}" title="{DayOfWeek}, {DayOfMonth} {Month} {Year}, {24Hour}:{Minutes}:{Seconds}">{DayOfWeek}, {DayOfMonth} {Month} {Year}</a></li>
{block:RebloggedFrom}<li class="source">&nbsp;(reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>)</li>{/block:RebloggedFrom}
{block:NoteCount}<li class="source"><a href="{Permalink}">{NoteCountWithLabel}</a></li>{/block:NoteCount}
</ul>
{block:PermalinkPage}
{block:HasTags}
<ul class="tags">
{block:Tags}
<li>
<a href="{TagURL}">#{Tag}</a>
</li>
{/block:Tags}
</ul>
{/block:HasTags}
{/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:Pagination}
<div class="pagination p">
<span class="previous">{block:NextPage}<a href="{NextPage}" class="previous">{/block:NextPage}&laquo; Older Posts{block:NextPage}</a>{/block:NextPage}</span>
<span class="page-numbers">{CurrentPage}/{TotalPages}</span>
<span class="next">{block:PreviousPage}<a href="{PreviousPage}">{/block:PreviousPage}Newer Posts &raquo;{block:PreviousPage}</a>{/block:PreviousPage}</span>
</div>
{/block:Pagination}
<hr style="display: block; margin: 0 auto; margin-top: 15px; margin-bottom: 0px" />
</section> <!-- /posts -->
</div> <!-- /content -->
<footer class="small wrap" style="max-width: 55em;">
<p class="small">Theme - Modified <a href="https://www.tumblr.com/theme/37012">Ashley</a> | Content is licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY</a>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment