Skip to content

Instantly share code, notes, and snippets.

@devonzuegel

devonzuegel/index.html

Last active November 3, 2017 18:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save devonzuegel/b7ac09f211403f9fc38ce0f595c457b8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save devonzuegel/b7ac09f211403f9fc38ce0f595c457b8 to your computer and use it in GitHub Desktop.
Download ZIP
Tumblr theme — Idea Collector http://notes.devonzuegel.com/
Raw
index.html
<html>
<head>
<title>{Title}</title>
<meta name="description" content="{MetaDescription}" />
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="http://static.tumblr.com/n0b6kem/qt2njxy0u/style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="color:Link Color" content="#505050"/>
<meta name="text:Twitter" content=""/>
<style type="text/css">{CustomCSS}</style>
<div id='google-analytics' style='opacity: 0'>UA-80549628-1</div>
</head>
<body>
<div class="site {block:IfShowSocialLinks}has-social{/block:IfShowSocialLinks} pure-u-1-3">
<header class="site-header" role="banner">
<div class="inner-wrap">
<h1 class="site-title"><a href="{BlogURL}">{Title}</a></h1>
<nav class="site-nav" role="navigation"><ul>
{block:HasPages}
{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}
<li><a href="http://ideacollector.tumblr.com/archive">Archive</a></li>
{/block:HasPages}
</ul></nav>
</div>
</header>
<div class="wrap"><!--
<ol id="posts">
{block:Posts}{block:Text}
<li class="post text">
{block:Title}
<h4><a href="{Permalink}">{Title}</a></h4>
{/block:Title}
</li>
{/block:Text}{/block:Posts}
</ol>
<div id="recent-posts"></div>
<script>
$(function() {
var url = '/rss';
var $list = $('#recent-posts');
$.ajax({
url: url,
type: 'GET',
dataType: 'xml',
success: function(data) {
var $items = $(data).find('item');
$items.each( function() {
var $item = $(this);
var link = $item.children('link').text();
var title = $item.children('title').text();
var pubdate = $item.children('pubdate').text();
if (link && title) {
console.log($item);
$list.append($('<li><a href="' + link + '">' + title + '</a>' + pubdate + '</li>'));
}
});
}
});
});
</script>
-->
<div id="days">
{block:DayPagination}
{block:PreviousDayPage} <a href="{PreviousDayPage}">&#171; {Month} {DayOfMonth}</a> {/block:PreviousDayPage}
{block:NextDayPage} <a href="{NextDayPage}"> {Month} {DayOfMonth} &#187;</a> {/block:NextDayPage}
{/block:DayPagination}
</div>
<script>
function title_only() {
var elements = document.getElementsByClassName('post-body');
for (var i = 0; i < elements.length; i++) {
var to_remove = elements[i].childNodes;
for (var j = 1; j < to_remove.length; j++) {
to_remove[j].className = 'post-body hidden';
}
}
}
function full_article() {
var elements = document.getElementsByClassName('post-body');
for (var i = 0; i < elements.length; i++) {
var to_remove = elements[i].childNodes;
for (var j = 1; j < to_remove.length; j++) {
to_remove[j].className = 'post-body';
}
}
}
</script>
<div class='controls'>
<div class='pagination'>
{block:Pagination}
<div id='prev' class='pagination-arrow'>
{block:PreviousPage}<a href="{PreviousPage}">&larr;</a>{/block:PreviousPage}
</div>
<div class='page-nums'>
{block:JumpPagination}
{block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
{/block:JumpPagination}
</div>
<div id='next' class='pagination-arrow'>
{block:NextPage}<a href="{NextPage}">&rarr;</a>{/block:NextPage}
</div>
{/block:Pagination}
</div>
<div class='view-options'>
<h3 class='btn'><a href='#' onclick="title_only()">Title only</a></h3>
<h3 class='btn'><a href='#' onclick="full_article()">Full article</a></h3>
</div>
</div>
<div class="main" role="main">
{block:SearchPage}
<article class="single-post">
{block:SearchResults}
<h1>{SearchResultCount} results for {SearchQuery}</h1>
{/block:SearchResults}
{block:NoSearchResults}
<h1>No search results for {SearchQuery}</h1>
{/block:NoSearchResults}
</article>
{/block:SearchPage}
{block:PermalinkPage}
{block:Posts}
<article class="single-post">
{block:Text}
<div class="post-content">
{block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
{block:Date}<div class='date date-permalink-page'>{TimeAgo}</div>{/block:Date}
{Body}
</div>
{/block:Text}
{block:HasTags}
<div class='tags'>
{block:Tags}<a class="meta-item tag-link" href="{TagURL}">{Tag}</a>{/block:Tags}
</div>
{/block:HasTags}
</article><!-- .single-post -->
{/block:Posts}
{/block:PermalinkPage}
{block:IndexPage}
{block:Posts}
<article class="single-post">
{block:Text}
<div class="post-content">
<div class='post-info'>{block:Date}<div class='date inlined date-pull-right'>{TimeAgo}</div>{/block:Date}</div>
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
<div class='post-body'>{Body}</div>
</div>
{/block:Text}
{block:Quote}
<div class="post-content">
<blockquote class="quote {Length}">{Quote}</blockquote>
<p>{block:Source}{Source}{/block:Source}</p>
</div>
{/block:Quote}
</article><!-- .single-post -->
{/block:Posts}
{block:Posts}
<article class="single-post non-text">
{block:Photo}
<div class="post-content">
{block:Caption}<p>{Caption}{URL}</p>{/block:Caption}
{LinkOpenTag}
<img class="photo" src="{PhotoURL-500}" alt="{PhotoAlt}" {block:HighRes}style="display:none"{/block:HighRes} />
{block:HighRes}<img class="photo" src="{PhotoURL-HighRes}" class="highres" alt="{PhotoAlt}">{/block:HighRes}
{LinkCloseTag}
</div>
{/block:Photo}
{block:Photoset}
<div class="post-content">
{block:Caption}<p>{Caption}{URL}</p>{/block:Caption}
{block:Photos}
<img class="photo" src="{PhotoURL-500}" alt="{PhotoAlt}" {block:HighRes}style="display:none"{/block:HighRes} />
{block:HighRes}<img class="photo" src="{PhotoURL-HighRes}" class="highres" alt="{PhotoAlt}">{/block:HighRes}
{/block:Photos}
</div>
{/block:Photoset}
{block:Quote}
<div class="post-content">
<blockquote class="quote {Length}">{Quote}</blockquote>
<p>{block:Source}{Source}{/block:Source}</p>
</div>
{/block:Quote}
{block:Link}
<div class="post-content">
<p><a href="{URL}" {Target}>{Name}</a></p>
{block:Description}{Description}{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post-content">
{block:Title}<h1>{Title}</h1>{/block:Title}
<div class="chat">
{block:Lines}
<div class="line {Alt}">{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</div>
{/block:Lines}
</div>
</div>
{/block:Chat}
{block:Video}
<div class="post-content">
<div class="video-container">{Video-500}</div>
{block:Caption}<p>{Caption}</p>{/block:Caption}
</div>
{/block:Video}
{block:Audio}
<div class="post-content">
{block:AlbumArt}
<img src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}" />
{/block:AlbumArt}
{AudioEmbed}
{block:ExternalAudio}
<div class="meta">
<span class="download_external_audio"><a href="{ExternalAudioURL}">{lang:Download}</a></span>
</div>
{/block:ExternalAudio}
{block:Caption}
<p>{Caption}</p>
{/block:Caption}
</div>
{/block:Audio}
</article><!-- .single-post -->
{/block:Posts}
{/block:IndexPage}
</div><!-- .main -->
</div><!-- .wrap -->
</div><!-- .site -->
<footer class="site-footer {block:IfShowSocialLinks}has-social{/block:IfShowSocialLinks}" role="contentinfo">
<div class="wrap">
<div class="author-bio">
<img class="profile-image" src="{PortraitURL-128}" alt="" />
{block:Description}<p id="description">{Description}</p>{/block:Description}
{block:IfShowSocialLinks}
<ul class="social-links">
{block:IfFacebook}
<li>
<a href="https://www.facebook.com/{text:Facebook}" title="Facebook" target="_blank">
<svg viewBox="0 0 100 100"><use xlink:href="#facebook-icon"></use></svg>
</a>
</li>
{/block:IfFacebook}
{block:IfTwitter}
<li>
<a href="https://twitter.com/{text:Twitter}" title="Twitter" target="_blank">
<svg viewBox="0 0 100 100"><use xlink:href="#twitter-icon"></use></svg>
</a>
</li>
{/block:IfTwitter}
</ul>
{/block:IfShowSocialLinks}
</div>
</div>
<div class="credit">Editorial Theme by <a href="http://mlitzinger.com/">Matt Litzinger</a></div>
</footer><!-- .site-footer -->
<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-80549628-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
Raw
styles.css
.hidden {
display: none;
}
.date-permalink-page {}
.date-pull-right { margin-top: 28px; }
.inlined .date {
margin-top: -30px;
font-family: 'PT Serif' !important;
}
.inlined, .inlined * {
display: inline;
}
.read_more_container {
display: none;
}
.non-text {
display: none;
}
article.single-post .post-content img.photo {
margin: 5px;
float: left;
width: 48%;
}
a:hover,
a:focus,
.site-title a:hover,
.site-title a:focus,
article.single-post .post-content h1 a:hover,
article.single-post .post-content h1 a:focus {
color: {Link Color};
}
.author-bio ul.social-links li a:hover svg use,
.author-bio ul.social-links li a:focus svg use {
fill: {color:Link Color};
}
li ul li {
list-style-type: circle;
padding: 0;
}
li {
padding: 5px 0;
}
li ul {
padding-bottom: 0px !important;
}
.site-title a * {
font-family: 'PT Serif' !important;
}
.site-title a {
color: #929292 !important;
}
.site-title a:hover {
color: #666666 !important;
}
.post-content h1, .post-content h2 {
padding-bottom: 0 !important;
}
h2 a {
color: rgb(43, 43, 43);
}
h2 a:hover {
color: rgb(80, 80, 80);
border-bottom: none;
}
.date {
color: #aaa;
font-style: italic;
padding-bottom: 10px;
font-size: 0.95em;
float: right;
font-family: 'PT Serif' !important;
}
.controls {
font-size: 0.95em;
padding: 20px 0 30px;
}
.controls .btn,
.controls .pagination {
margin-right: 10px;
display: inline;
}
.view-options > * * {
padding: 0;
margin: 0;
}
.view-options a,
.view-options a:hover,
.view-options a:focus {
background: #ccc;
color: white;
padding: 3px 5px;
border-radius: 3px;
display: inline;
border: none;
}
.view-options a:focus {
background: #bbb;
}
.pagination .page-nums *:not(:last-child) {
margin-right: 10px;
}
.pagination .page-nums a,
.pagination-arrow a {
color: #bbb !important;
}
.pagination .page-nums {
display: inline;
}
.pagination .page-nums * {
font-family: 'San Francisco Display', sans-serif !important;
}
.pagination {
float: right;
margin: auto;
text-align: center;
font-family: 'San Francisco Display', sans-serif !important;
background: none;
display: inline;
}
.pagination-arrow {
font-family: 'San Francisco Display', sans-serif !important;
display: inline;
min-width: 20px;
}
#next {
/*margin-left: 20px;*/
}
#prev {
margin-right: 20px;
}
.sidebar {
float: right;
margin: 75px;
}
@media screen and (max-width: 1000px) {
.sidebar {
display: none;
}
}
article.single-post {
padding: 0 !important;
border: none;
}
dsfsdf
blockquote {
margin: 30px;
border-left: 5px solid #efefef !important;
opacity: 0.6;
}
blockquote * {
line-height: 1.53em !important;
}
blockquote p:last-of-type {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
* {
line-height: 1.53em !important;
font-family: 'PT Serif' !important;
}
.wrap, .site-header {
width: 100%;
max-width: 750px;
}
footer {
display: none;
}
.site-title {
text-transform: none;
width: 49%;
}
.site-title a:hover {
border-bottom: none;
}
nav a {
color: #929292 !important;
}
nav a:hover {
color: #666666 !important;
}
.site-header {
padding: 20px 0;
font-weight: 500;
}
h1, h2, h3, h3 *, h1 *, .site-header, h2 *, h2 .tumblr_theme_marker_title, .post-info * {
font-family: 'San Francisco Display', sans-serif !important;
}
pre, code {
font-family: 'Roboto Mono', monospace !important;
font-weight: 500 !important;
}
h2 {
font-weight: bold;
font-size: 1.3em;
margin: 10px 0 0 0;
}
h3, h3 *, .post-info p strong {
color: #bbb;
font-weight: 500;
margin-bottom: 15px;
}
h3, .post-info * {
font-size: 0.95em;
}
h3 * {
font-weight: 500;
}
a {
color: rgba(39, 208, 150, 1);
border-bottom: none;
}
a:hover {
color: rgba(39, 208, 150, 1);
border-bottom: rgba(39, 208, 150, 0.4) 1px solid;
}
.tag-link {
background: rgba(39, 208, 150, 0.8);
color: white;
padding: 3px 7px 3px;
border-radius: 3px;
font-family: 'San Francisco Display', sans-serif !important;
font-weight: 500;
font-size: 0.9em;
margin: 0 6px 6px ;
display: inline-block;
}
.tag-link:hover {
background: rgba(39, 208, 150, 1);
color: white;
margin-right: 5px;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*
BLUE:
color: rgba(64, 153, 255, 1);
border-bottom: 1px solid rgba(39, 208, 150, 1);
border-bottom: 1px solid rgba(39, 208, 150, 1);
color: #505050 !important;
color: #2b2b2b !important;
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment