ControlC ControlC.com

thm 06 - back to the start

Views: 917Total Chars: 34,875
Created: 3/22/18 6:03:27PM ET
Self Destructs: Never
<!DOCTYPE html>
<html>

<!-----------------------------------------------------

credits:

- icon font by saturnthms
- infinite scroll by Paul Irish
- masonry and imagesLoaded by David DeSandro
- pxu photosets (modified) by bychloethemes

- back to the start theme by annasthms (march 21, 2018)
more info @ https://annasthms.tumblr.com/more/thm/06

change log:
added a 'center container' option (march 25, 2018)


rules:

1. don't remove the credit
2. don't steal/claim as yours
3. don't use as a base code

thank you!! ♡♡♡

------------------------------------------------------>

<head>

<title>{block:PostSummary}{PostSummary} | {/block:PostSummary}{block:TagPage}#{Tag} | {/block:TagPage}{block:SearchPage}{SearchQuery} | {/block:SearchPage}{block:DayPage}{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear} | {/block:DayPage}{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

<link href="https://fonts.googleapis.com/css?family={text:google font}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family={text:fancy google font}" rel="stylesheet">
<link href="https://solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
<link href="http://static.tumblr.com/0podkko/1C9otjxkc/jquery-ui.structure.css" rel="stylesheet">
<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>

<meta name="image:blog background" content="" />

<meta name="color:color 1" content="#ffbca0" />
<meta name="color:color 2" content="#e9c7b3" />
<meta name="color:color 3" content="#555555" />
<meta name="color:title" content="#f9aa81" />
<meta name="color:font" content="#666666" />
<meta name="color:post titles" content="#ffbca0" />
<meta name="color:post info" content="#333333" />
<meta name="color:post background" content="#ffffff" />
<meta name="color:sidebar background" content="#ffffff" />
<meta name="color:blog background" content="#ffffff" />
<meta name="color:reblog button hover" content="#fad6ab" />
<meta name="color:like button hover" content="#fad6ab" />
<meta name="color:like button liked" content="#f7c282" />
<meta name="color:search background" content="#ffbca0" />
<meta name="color:search text" content="#ffffff" />
<meta name="color:pagination background" content="#ffffff" />

<meta name="font:font" content="Avalon"/>

<meta name="select:pagination type" content="simple" title="simple" />
<meta name="select:pagination type" content="jump" title="jump pagination" />
<meta name="select:pagination type" content="infinite" title="infinite scroll" />
<meta name="select:pagination type" content="loadmore" title="load more" />

<meta name="if:show avatar" content="1" />
<meta name="if:bold title" content="1" />
<meta name="if:dashboard style captions" content="1" />
<meta name="if:underline post titles" content="1" />
<meta name="if:grayscale photos" content="1" />
<meta name="if:horizontal lines" content="1" />
<meta name="if:show captions on index pages" content="1" />
<meta name="if:hover post info" content="1" />
<meta name="if:show tags on index pages" content="1" />
<meta name="if:always show like button" content="1" />
<meta name="if:fancy post titles" content="1" />
<meta name="if:masonry" content="1" />
<meta name="if:center container" content="0" />
<meta name="if:search bar" content="1" />
<meta name="if:dark tumblr controls" content="1" />

<meta name="text:google font" content="Anaheim"/>
<meta name="text:fancy google font" content="Fascinate Inline" />
<meta name="text:font size" content="1em" />
<meta name="text:photoset gutter" content="4px" />
<meta name="text:blog link one name" content="" />
<meta name="text:blog link one url" content="" />
<meta name="text:blog link two name" content="" />
<meta name="text:blog link two url" content="" />
<meta name="text:blog link three name" content="" />
<meta name="text:blog link three url" content="" />
<meta name="text:blog link four name" content="" />
<meta name="text:blog link four url" content="" />
<meta name="text:blog link five name" content="" />
<meta name="text:blog link five url" content="" />

<style>
* {
position: relative;
font-family: {block:Ifgooglefont}'{text:google font}', {/block:Ifgooglefont}{font:font};
}
body {
color: {color:font};
font-size: {text:font size};
background: {color:blog background} url('{image:blog background}') no-repeat fixed center;
background-size: cover;
}
a {
text-decoration: none;
color: {color:color 1};
}
a:hover {
color: {color:color 2};
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
img {
max-width: 100%;
height: auto;
}
::selection {
background: {color:font};
color: #fff;
}
blockquote {
border-left: 1px solid {color:color 3};
margin: 0;
padding: 0 0 0 4%;
}
blockquote img {
height: 100%;
width: 100%;
}
blockquote img:nth-child(2) {
margin-top: 1em;
}
blockquote iframe {
width: 100%;
}
hr {
border: none;
height: 1px;
background: {color:color 3};
width: 35%;
}
pre {
padding: 1em;
border-left: 1px solid {color:color 3};
white-space: pre-line;
}
strike {
text-decoration: line-through;
}
.none {
display: none !important;
}

body.stop {
overflow: hidden;
}

{block:IfNotmasonry}
{block:Ifcentercontainer}
div#container {
width: calc(50% + 350px);
margin: 0 auto;
}
{/block:Ifcentercontainer}
{/block:IfNotmasonry}

/* sidebar */
aside#blog {
position: fixed;
z-index: 10;
background: {color:sidebar background};
text-align: center;
margin-left: 30px;
padding: 1em 0.5em;
width: 300px;
box-sizing: border-box;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
/* sidebar avatar + title */
img#avatar, div#title {
display: inline-block;
vertical-align: middle;
}
img#avatar {
height: 3em;
margin-right: 1em;
border-radius: 1em;
{block:IfNotshowavatar}display: none;{/block:IfNotshowavatar}
}
div#title {
{block:Ifshowavatar}max-width: 175px;{/block:Ifshowavatar}
{block:IfNotshowavatar}max-width: 200px;{/block:IfNotshowavatar}
letter-spacing: 1px;
font-style: italic;
color: {color:title};
{block:Ifboldtitle}font-weight: bold;{/block:Ifboldtitle}
}
/* sidebar description */
div#description {
margin-top: 15px;
padding: 0 10px;
}
/* sidebar links */
div#links {
margin-top: 1em;
}
div#links a {
margin: 0 0.25em 0.25em;
text-transform: lowercase;
padding: 0 0.25em;
display: inline-block;
}

iframe#ask_form, iframe#submit_form {
margin-top: 0.5em;
}

/* posts container */
section#posts {
margin-left: 350px;
margin-bottom: 3em;
padding-bottom: 3em;
}
/* post + post nates */
.post, div#post-notes {
{block:IndexPage}{block:Ifmasonry}width: 350px;{/block:Ifmasonry}{block:IfNotmasonry}{block:IfNotcentercontainer}width: 65%;{/block:IfNotcentercontainer}{/block:IfNotmasonry}{/block:IndexPage}
{block:PermalinkPage}{block:IfNotcentercontainer}width: 65%;{/block:IfNotcentercontainer}{/block:PermalinkPage}
margin: 30px;
background: {color:post background};
padding: 15px;
}
@keyframes fade {
from {opacity:0;}
top {opacity:1;}
}
.post.new {
animation: fade 2s;
}

/* lists (numbered + bullet) */
.post ul, .post ol {
list-style: none;
padding: 0 0 0 1.5em;
}
.post ol {
counter-reset: lists;
}
.post li:not(:last-of-type) {
margin-bottom: 0.25em;
}
.post ol li:before {
counter-increment: lists;
content: counter(lists) ".";
color: {color:color 2};
position: absolute;
left: -1.15em;
font-weight: bold;
}
.post ul li:before {
content: "\e19c"; /* change this if you want a different icon for lists */
position: absolute;
font-family: 'saturnicons';
color: {color:color 2};
top: 0.35em;
left: -1.75em;
font-size: 0.8em;
}

/* post titles + link posts */
a.title, a.path.has-desc {
color: {color:post titles};
text-align: center;
padding-bottom: 0.5em;
display: block;
}
a.title:hover, a.path.has-desc:hover {
color: {color:color 2};
}
a.path {
text-align: center;
}
a.title div, a.path.has-desc div {
display: inline-block;
padding: 0 0.625em 0.25em;
{block:Ifunderlineposttitles}
margin-bottom: 0.75em;
border-bottom: 1px solid {color:color 2};
{/block:Ifunderlineposttitles}
{block:IfNotunderlineposttitles}margin-bottom: 0.25em;{/block:IfNotunderlineposttitles}
}
.chat a.title {
padding: 0;
}
{block:Iffancyposttitles}
a.title div::first-letter, a.path div::first-letter, .words::first-letter, .caption.not-rb::first-letter {
font-size: 1.5em;
font-style: italic;
margin-right: 2px;
font-family: {text:fancy google font};
line-height: 1em;
}
{/block:Iffancyposttitles}

/* photo + photoset posts */
{block:IndexPage}
a.pic img {
max-width: 100%;
}
{block:Ifgrayscalephotos}
a.pic img, .photo-data img {
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
-moz-transition: 0.75s all ease-in-out;
-webkit-transition: 0.75s all ease-in-out;
transition: 0.75s all ease-in-out;
}
a.pic img:hover, .photo-data:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
{/block:Ifgrayscalephotos}
{/block:IndexPage}
{block:PermalinkPage}
a.pic img {
width: 100%;
}
{/block:PermalinkPage}

/* captions */
.caption, .body, .qna {
word-break: break-word;
}
.caption {
margin-top: 1em;
}
.caption.not-rb {
text-align: center;
}

/* quote posts */
{block:Ifhorizontallines}
.words {
border-bottom: 1px solid {color:color 3};
padding: 0.5em 0.5em 1em;
}
.source {
display: inline-block;
top: -1em;
left: 50%;
-moz-transform: translate(-50%, 25%);
-webkit-transform: translate(-50%, 25%);
transform: translate(-50%, 25%);
background: {color:post background};
padding: 0 0.625em;
max-width: 75%;
text-align: center;
line-height: 1em;
}
{block:Ifhorizontallines}
{block:IfNothorizontallines}
.words {
padding-bottom: 0.5em;
}
.source:before {
content: "\2014";
margin-right: 0.5em;
}
{/block:IfNothorizontallines}

/* chat posts */
.chat table {
border-collapse: collapse;
}
.chat tr:not(:first-of-type) {
border-top: 0.25em solid {color:post background};
}
td.label {
font-weight: bold;
color: {color:color 2};
padding-right: 1em;
}

/* audio posts */
iframe.tumblr_audio_player {
height: 85px;
width: 100%;
}
iframe.spotify_audio_player {
height: 80px;
width: 100%;
}
iframe.soundcloud_audio_player {
width: 100%;
height: 100%;
}

/* ask posts */
.qna:not(:first-child) {
margin-top: 1em;
}
.blog {
margin-bottom: 0.5em;
}
{block:Ifhorizontallines}
.blog:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
top: 55%;
left: 0;
background: {color:color 2};
}
{/block:Ifhorizontallines}
.blog img {
display: inline-block;
left: 0;
top: 0;
border-radius: 100%;
vertical-align: middle;
height: 1.5em;
}
.blog span {
display: inline-block;
top: 0;
text-transform: lowercase;
background: {color:post background};
padding: 0 0.625em;
vertical-align: middle;
}
.speech img {
width: 100%;
height: 100%;
}
.speech p:first-child {
margin-top: 0;
}
.speech p:last-child {
margin-bottom: 0;
}

/* reblogged captions */
.reblogged:not(:last-of-type) {
margin-bottom: 1em;
}
a.title + .reblogged, a.path + .reblogged {
margin-top: -1em;
}
.reblogged p:nth-child(2) {
margin-top: 0.5em;
}

/* post info */
.post-info {
text-transform: lowercase;
font-size: 0.85em;
margin-top: 1em;
color: {color:post info};
{block:Ifhoverpostinfo}{block:IndexPage}
opacity: 0;
-moz-transition: 0.3s all ease-in-out;
-webkit-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
{/block:IndexPage}{/block:Ifhoverpostinfo}
}
{block:Ifhoverpostinfo}{block:IndexPage}
.post:hover .post-info {
opacity: 1;
-moz-transition: 0.8s all ease-in-out;
-webkit-transition: 0.8s all ease-in-out;
transition: 0.8s all ease-in-out;
}
{/block:IndexPage}{/block:Ifhoverpostinfo}
{block:Ifhorizontallines}
.quote .post-info {
margin: 0;
}
{/block:Ifhorizontallines}
.post-info a {
color: {color:post info};
}
.post-info a:hover {
text-decoration: line-through;
}
/* like + reblog buttons */
.buttons, .reblog-button, .like-button {
display: inline-block;
}
.buttons {
position: absolute;
right: 0;
}
.buttons span {
-moz-transition: 0.1s all ease-in-out;
-webkit-transition: 0.1s all ease-in-out;
transition: 0.1s all ease-in-out;
}
.reblog-button a:hover {
text-decoration: none;
color: {color:reblog button hover};
}
.like-button {
width: 1em;
height: 1em;
cursor: pointer;
margin-left: 0.5em;
{block:IfNotalwaysshowlikebutton}{block:IndexPage}display: none;{/block:IndexPage}{/block:IfNotalwaysshowlikebutton}
}
.like_button {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 10;
}
.like_button iframe {
width: 100% !important;
height: 100% !important;
}
.new-like-button {
width: 100%;
height: 100%;
z-index: 1;
}
.like_button:hover + .new-like-button > span {
color: {color:like button hover};
}
.like_button.liked + .new-like-button > span {
color: {color:like button liked};
}
/* tags */
.tags {
margin-top: 0.25em;
word-wrap: break-word;
}
.tags span {
font-size: 0.75em;
}
a.tag {
margin: 0 0.25em;
}
.content-source {
margin-top: 0.25em;
}

/* post notes */
ol.notes {
list-style: none;
padding: 0;
margin: 0;
}
li.note {
margin: 10px 0;
}
li.note:first-child {
margin-top: 0;
}
li.note:last-child {
margin-bottom: 0;
}
li.note blockquote {
margin-top: 0.5em;
}
img.avatar {
display: none;
}

/* photo lightboxes */
.tmblr-lightbox {
background: #fff !important;
background: rgba(255,255,255,0.85) !important;
}
.tmblr-lightbox .vignette {
opacity: 0;
}
.tmblr-lightbox .lightbox-image {
box-shadow: none !important;
}
.lightbox-caption {
color: #000 !important;
text-shadow: none !important;
}

{block:IndexPage}
{block:IfNotshowcaptionsonindexpages}
.caption {
display: none;
}
{/block:IfNotshowcaptionsonindexpages}
{block:IfNotshowtagsonindexpages}
.tags {
display: none;
}
{/block:IfNotshowtagsonindexpages}
{/block:IndexPage}


/* pagination, load more button */
div#pagination {
position: absolute;
bottom: 0;
text-align: center;
background: {color:pagination background};
padding: 0.75em;
font-size: 0.9em;
text-transform: lowercase;
width: 100%;
box-sizing: border-box;
}
div#pagination.infinite, div#pagination.loadmore, span#load-more:not(.loadmore) {
display: none;
}
div#pagination * {
margin: 0 0.35em;
display: inline-block;
}
div#pagination span {
color: {color:color 2};
font-weight: bold;
font-size: 1.1em;
}
div#pagination.simple .page {
display: none;
}
span#load-more {
display: block;
text-transform: lowercase;
margin-top: 1em;
font-size: 0.85em;
letter-spacing: 1px;
color: {color:color 1};
cursor: help;
transition: 0.25s all ease-in-out;
}
span#load-more:hover {
font-weight: bold;
letter-spacing: 0.15em;
}

/* search bar */
{block:Ifsearchbar}
div#search-popup {
position: fixed;
height: 100vh;
width: 100%;
top: 0;
left: 0;
background: {color:search background};
background: rgba({RGBcolor:search background},0.85);
color: {color:search text};
z-index: 10;
{block:Ifhorizontallines}opacity: 0;{/block:Ifhorizontallines}
{block:IfNothorizontallines}display: none;{/block:IfNothorizontallines}
}
div#search-close {
position: absolute;
top: 24px;
right: 24px;
padding: 8px;
font-size: 24px;
color: {color:search text};
cursor: pointer;
}
div#search-container {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
max-width: 600px;
width: 75%;
margin: 0 auto;
}
div#search-title {
font-size: 2em;
margin-bottom: 1em;
}
{block:Ifhorizontallines}
div#search-title::before {
content: "";
position: absolute;
height: 0.1em;
width: 100%;
top: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: {color:search text};
z-index: -1;
}
{/block:Ifhorizontallines}
div#search-title span {
display: inline-block;
}
div#search-form form input {
border: none;
background: transparent;
color: {color:search text};
font-size: 1.5em;
width: 100%;
}
div#search-form form input:focus {
outline: none;
}
div#search-form form input::-webkit-input-placeholder {
color: {color:search text};
text-transform: uppercase;
letter-spacing: 0.5em;
}
div#search-form form input:-ms-input-placeholder {
color: {color:search text};
text-transform: uppercase;
letter-spacing: 0.5em;
}
div#search-form form input::-ms-input-placeholder {
color: {color:search text};
text-transform: uppercase;
letter-spacing: 0.5em;
}
div#search-form form input::placeholder {
color: {color:search text};
text-transform: uppercase;
letter-spacing: 0.5em;
}
{/block:Ifsearchbar}

/* styled tooltip */
.ui-tooltip {
padding: 3px 5px 2px;
margin: 24px 14px 7px 12px;
position: absolute;
font-size: 0.8em;
z-index: 9999;
max-width: 300px;
border-radius: 3px;
background: {color:background};
background: rgba(255,255,255,0.5);
}

/* tumblr controls */
iframe.tmblr-iframe {
position: fixed;
left: 174px !important;
-moz-transform: translateX(-50%) scale(0.8);
-webkit-transform: translateX(-50%) scale(0.8);
transform: translateX(-50%) scale(0.8);
{block:Ifdarktumblrcontrols}filter: invert(100%);{/block:Ifdarktumblrcontrols}
}

/* some fake responsiveness */
@media screen and (max-width: 790px) {
aside#blog {
width: 200px;
}
img#avatar {
display: none;
}
div#description {
max-width: 200px;
}
section#posts {
margin-left: 230px;
}
iframe.tmblr-iframe {
left: 129px !important;
-moz-transform: translateX(-50%) scale(0.6);
-webkit-transform: translateX(-50%) scale(0.6);
transform: translateX(-50%) scale(0.6);
}
}

/* scroll buttons */
a#scroll-up {
position: fixed;
bottom: 31px;
right: 5px;
background: #fff;
padding: 6px 2.5px 2px;
font-size: 0.8em;
}
a#scroll-down {
position: fixed;
bottom: 31px;
right: 23px;
background: #fff;
padding: 6px 2.5px 2px;
font-size: 0.8em;
display: none;
}
a#cred {
position: fixed;
bottom: 5px;
right: 5px;
background: #fff;
padding: 3px 6px;
font-size: 0.8em;
}

{CustomCSS}
</style>

</head>
<body>
<div id="container">
<aside id="blog">
<a href="{BlogURL}"><div id="bn"><img src="{PortraitURL-64}" id="avatar" /><div id="title">{Title}</div></div></a>
<div id="description">{Description}</div>
<div id="links"><a href="{BlogURL}">{lang:Home}</a><a href="/ask">ask</a>{block:Ifbloglinkoneurl}<a href="{text:blog link one url}">{text:blog link one name}</a>{/block:Ifbloglinkoneurl}{block:Ifbloglinktwourl}<a href="{text:blog link two url}">{text:blog link two name}</a>{/block:Ifbloglinktwourl}{block:Ifbloglinkthreeurl}<a href="{text:blog link three url}">{text:blog link three name}</a>{/block:Ifbloglinkthreeurl}{block:Ifbloglinkfoururl}<a href="{text:blog link four url}">{text:blog link four name}</a>{/block:Ifbloglinkfoururl}{block:Ifbloglinkfiveurl}<a href="{text:blog link five url}">{text:blog link five name}</a>{/block:Ifbloglinkfiveurl}<a href="/archive">{lang:Archive}</a>{block:Ifsearchbar}<a href="#" class="search-click">{lang:Search}</a>{/block:Ifsearchbar}</div>
{block:Pagination}{block:IndexPage}<span id="load-more" class="{select:pagination type}">{lang:Load more posts}</span>{/block:IndexPage}{/block:Pagination}
</aside>

<section id="posts">
{block:Posts}<article class="post {PostType}" id="{PostID}">

{block:Title}<a href="{Permalink}" class="title"><div>{Title}</div></a>{/block:Title}

{block:Text}
{block:IfNotdashboardstylecaptions}<div class="body">{Body}</div>{/block:IfNotdashboardstylecaptions}
{block:Ifdashboardstylecaptions}{block:NotReblog}<div class="body">{Body}</div>{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}<div class="reblogged"><div class="blog"><img src="{PortraitURL-64}" /><span>{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span></div>{Body}</div>{/block:Reblogs}{/block:RebloggedFrom}{/block:Ifdashboardstylecaptions}
{/block:Text}

{block:Photo}<a href="#" class="pic" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{/block:Photo}

{block:Photoset}

<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>

{/block:Photoset}

{block:Quote}<div class="words">{Quote}</div>{block:Source}<div class="source">{Source}</div>{/block:Source}{/block:Quote}

{block:Link}<a href="{URL}" class="path{block:Description} has-desc{/block:Description}" {Target}><div>{Name}</div></a>
{block:Description}
{block:IfNotdashboardstylecaptions}<div class="desc">{Description}</div>{/block:IfNotdashboardstylecaptions}
{block:Ifdashboardstylecaptions}{block:NotReblog}<div class="desc">{Description}</div>{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}<div class="reblogged"><div class="blog"><img src="{PortraitURL-64}" /><span>{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span></div>{Body}</div>{/block:Reblogs}{/block:RebloggedFrom}{/block:Ifdashboardstylecaptions}
{/block:Description}{/block:Link}

{block:Chat}<table>{block:Lines}<tr><td class="label">{block:Label}<span>{Label}</span>{/block:Label}</td><td>{Line}</td></tr>{/block:Lines}</table>{/block:Chat}

{block:Audio}{block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}{/block:Audio}

{block:Video}{VideoEmbed-500}{/block:Video}

{block:Answer}<div class="qna"><div class="blog"><img src="{AskerPortraitURL-48}"/><span>{Asker}</span></div><span class="speech">{Question}</span></div>
{block:Answerer}<div class="qna"><div class="blog"><img src="{AnswererPortraitURL-48}"/><span>{Answerer}</span></div><span class="speech">{Answer}</span></div>{block:Reblogs}<div class="qna"><div class="blog"><img src="{PortraitURL-64}" /><span>{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a> {/block:HasPermalink}</span></div><span class="speech">{Body}</span></div>{/block:Reblogs}{/block:Answerer}
{block:NotReblog}<div class="qna"><div class="blog"><img src="{PortraitURL-48}" /><span><a href="{Permalink}">{Name}</a></span></div><span class="speech">{Answer}</span></div>{/block:NotReblog}{/block:Answer}

{block:Caption}<div class="caption{block:NotReblog} not-rb{/block:NotReblog}">
{block:IfNotdashboardstylecaptions}{Caption}{/block:IfNotdashboardstylecaptions}
{block:Ifdashboardstylecaptions}{block:NotReblog}{Caption}{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}<div class="reblogged"><div class="blog"><img src="{PortraitURL-64}" /><span>{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span></div>{Body}</div>{/block:Reblogs}{/block:RebloggedFrom}{/block:Ifdashboardstylecaptions}
</div>{/block:Caption}

{block:Date}
<div class="post-info">
<div class="info"><a href="{Permalink}" title="{TimeAgo}">{ShortMonth} {DayOfMonthWithZero}</a>{block:NoteCount}&nbsp;&nbsp;//&nbsp;&nbsp;<a href="{Permalink}">{NoteCount}</a>{/block:NoteCount}{block:RebloggedFrom}&nbsp;&nbsp;//&nbsp;&nbsp;<a href="{ReblogParentURL}" title="{ReblogParentName}">{lang:Via}</a>&nbsp;&nbsp;//&nbsp;&nbsp;<a href="{ReblogRootURL}" title="{ReblogRootName}">{block:English}src{/block:English}{block:NotEnglish}{lang:Source}{/block:NotEnglish}</a>{/block:RebloggedFrom}{block:Submission}&nbsp;&nbsp;//&nbsp;&nbsp;<a href="{SubmitterURL}" {Target}>{lang:By PostAuthorName}</a>{/block:Submission}<div class="buttons"><div class="reblog-button"><a href="{ReblogURL}" {Target}><span class="sf sf-reblog-o"></span></a></div><div class="like-button">{LikeButton}<span class="new-like-button"><span class="sf sf-heart-2-o"></span></span></div></div></div>
{block:HasTags}<div class="tags"><span class="sf sf-bookmark-o"></span>{block:Tags}<a href="{TagURL}" class="tag">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
{block:PermalinkPage}{block:ContentSource}<div class="content-source">{lang:Source}:&nbsp;<a href="{SourceURL}" {Target}>{SourceTitle}</a></div>{/block:ContentSource}{/block:PermalinkPage}
</div>
{/block:Date}

</article>

{block:PostNotes}<div id="post-notes">{PostNotes}</div>{/block:PostNotes}

{/block:Posts}

{block:Pagination}
<div id="pagination" class="{select:pagination type}">
{block:PreviousPage}<a href="{PreviousPage}" class="prev">{lang:Prev}</a>{/block:PreviousPage}
{block:JumpPagination length="3"}{block:CurrentPage}<span class="page">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a href="{URL}" class="jump page">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}<a href="{NextPage}" class="next">{lang:Next}</a>{/block:NextPage}
</div>
{/block:Pagination}

</section>
</div>

{block:Ifsearchbar}
<div id="search-popup">
<div id="search-close" class="search-click"><span class="sf sf-cross-o"></span></div>
<div id="search-container">
<div id="search-title"><span>{lang:Search}</span></div>
<div id="search-form"><form action="/search" method="get"><input type="text" name="q" placeholder="type and press enter" /></form></div>
</div>
</div>
{/block:Ifsearchbar}

<a href="#" id="scroll-up"><span class="sf sf-arrow-up"></span></a>
<a href="#" id="scroll-down"><span class="sf sf-arrow-down"></span></a>
<a href="https://annasthms.tumblr.com/" id="cred" title="theme by annasthms" {Target}>a</a>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="//static.tumblr.com/ouqpclx/heNnjoj2d/jquery.fitvids.js"></script>
<script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<script src="//static.tumblr.com/yfztp0u/brUohnb4m/infinitescroll.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script src="//static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
<script src="//dl.dropbox.com/s/r1lcsrj2ofap7n5/videoResize.min.js?dl=0"></script>
<script src="//dl.dropbox.com/s/vgaat0zpodpepwk/annasthms.js"></script>

<script>
function chatLabels() {
$('td.label').each(function(){
var label = $(this).text().split(":")[0];
$(this).text(label);
});
}
function pagination(pag) {
switch (pag) {
case 'infinite':
{block:Ifmasonry}
$container = $('section#posts').masonry({
itemSelector: '.post',
"gutter": 0,
});
{/block:Ifmasonry}
{block:IfNotmasonry}
$container = $('section#posts');
{/block:IfNotmasonry}
$container.infinitescroll({
navSelector: 'div#pagination',
nextSelector: 'a.next',
itemSelector: '.post',
loading: {
img: '',
msgText: '',
},
debug: true,
bufferPx: 0
}, function(items) {
var $items = $(items);
$items.addClass('new');
$items.find('.photo-slideshow').pxuPhotoset({lightbox: true, rounded: false, gutter: '{text:photoset gutter}', borderRadius: '0px', photoset: '.photo-slideshow', photoWrap: '.photo-data', photo: '.pxu-photo'});
$('.new.video iframe, .new .body iframe, .new .caption iframe, .new .reblogged iframe').videoResize();
{block:Ifmasonry}$container.masonry( 'appended', $items, true );$container.imagesLoaded().progress(function() {$container.masonry('layout');});{/block:Ifmasonry}
$('.new [title]').tooltip({
track: true,
position: {
my: 'left+10 top+20'
}
});
$itemsIDs = $items.map(function(){
return this.id;
}).get();
Tumblr.LikeButton.get_status_by_post_ids($itemsIDs);
$items.removeClass('new');
});
break;
case 'loadmore':
{block:Ifmasonry}
$container = $('section#posts').masonry({
itemSelector: '.post',
"gutter": 0,
});
{/block:Ifmasonry}
{block:IfNotmasonry}
$container = $('section#posts');
{/block:IfNotmasonry}
$container.infinitescroll({
navSelector: 'div#pagination',
nextSelector: 'a.next',
itemSelector: '.post',
loading: {
img: '',
msgText: '',
},
debug: true,
errorCallback: function(){$('#load-more').hide();}
}, function(items) {
var $items = $(items);
$items.addClass('new');
$items.find('.photo-slideshow').pxuPhotoset({lightbox: true, rounded: false, gutter: '{text:photoset gutter}', borderRadius: '0px', photoset: '.photo-slideshow', photoWrap: '.photo-data', photo: '.pxu-photo'});
$('.new.video iframe, .new .body iframe, .new .caption iframe, .new .reblogged iframe').videoResize();
{block:Ifmasonry}$container.masonry( 'appended', $items, true );$container.imagesLoaded().progress(function() {$container.masonry('layout');});{/block:Ifmasonry}
$('.new [title]').tooltip({
track: true,
position: {
my: 'left+10 top+20'
}
});
$itemsIDs = $items.map(function(){
return this.id;
}).get();
Tumblr.LikeButton.get_status_by_post_ids($itemsIDs);
$items.removeClass('new');
});
$(window).unbind('.infscr');
$('#load-more').click(function(){
$container.infinitescroll('retrieve');
return false;
});
break;
default:
{block:Ifmasonry}
$container = $('section#posts').masonry({
itemSelector: '.post',
"gutter": 0,
});
$container.imagesLoaded().progress(function() {$container.masonry('layout');});
{/block:Ifmasonry}
}
}
function photosets() {
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '{text:photoset gutter}',
borderRadius: '0px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
}
function search() {
$searchText = $('div#search-title span');
searchTextWidth = $searchText.width();
$searchTitle = $('div#search-title');
searchTitleWidth = $searchTitle.width();
beforeWidth = searchTitleWidth - searchTextWidth - 10;
beforeLeft = searchTextWidth + 10;
console.log(searchTextWidth, searchTitleWidth, beforeWidth, beforeLeft);
$('head').append('<style>div#search-title::before{width: calc(100% - ' + beforeLeft + 'px);left: ' + beforeLeft + 'px;}</style>');
$('div#search-popup').hide().css('opacity', '1');
}
function scroll() {
var scrolltop = 0;
$('a#scroll-up').click(function(){
scrolltop = $(window).scrollTop();
$('html, body').animate({ scrollTop: 0 }, 1500);
$('a#scroll-down').fadeIn();
return false;
});
$('a#scroll-down').click(function(){
$('html, body').animate({scrollTop: scrolltop}, 1500);
return false;
});
}
function tooltips() {
$('[title]').tooltip({
track: true,
position: {
my: 'left+10 top+20'
}
});
}
function tumblrControls() {
var nav = $('aside#blog'),
iframe = $('iframe.tmblr-iframe'),
navTop = nav.position().top,
navHeight = nav.outerHeight(),
iframeTop = navTop + navHeight + 'px';

$('head').append('<style>iframe.tmblr-iframe{top: ' + iframeTop + ' !important}</style>');
}
function videos() {
if( location.href !== "{BlogURL}ask" && location.href !== "{BlogURL}submit" ) {

}
}
</script>

<script>
$(document).ready(function(){
tumblrControls(); tooltips(); chatLabels(); scroll(); photosets();
$('.video iframe, .body iframe, .caption iframe, .reblogged iframe').videoResize();
{block:Ifsearchbar}
{block:Ifhorizontallines}search();{/block:Ifhorizontallines}
$('.search-click').click(function(){
$('div#search-popup').fadeToggle();
$('body').toggleClass('stop');
return false;
});
{/block:Ifsearchbar}
{block:IndexPage}
pagination('{select:pagination type}');
{/block:IndexPage}
});
</script>

</body>
</html>
34,875 chars, 2,661 words, 1,099 lines·Create new version