ControlC ControlC.com

thm 02 - dream

Views: 199Total Chars: 23,571
Created: 1/1/18 7:02:11AM ET
Self Destructs: Never
<!DOCYTPE>
<html>

<!--

credits:

- icon font by saturnthms: http://saturnthms.com/font
- fitVids by by Chris Coyier and Paravel: http://fitvidsjs.com/
- infinite scroll by paul irish

- dream theme by annasthms

-->

<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://solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">

<meta name="color:title" content="" />
<meta name="color:color 1" content="" />
<meta name="color:color 2" content="" />
<meta name="color:color 3" content="#7f7f7f" />
<meta name="color:font" content="#000000" />
<meta name="color:blog background" content="#ffffff" />
<meta name="color:title and nav bar background" content="#ffffff" />
<meta name="color:post background" content="#ffffff" />
<meta name="color:footer background" content="#ffffff" />

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

<meta name="if:infinite scroll" content="1" />
<meta name="if:manual load" content="1" />
<meta name="if:inverted tumblr controls" content="0" />

<meta name="text:google font" content=""/>
<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};
background: {color:blog background};
}
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;
}
body.stop {
overflow: hidden;
}

@media screen and (min-width: 840px) {
section#posts {
width: 800px;
}
.content {
width: 700px;
}
}
@media screen and (min-width: 740px) and (max-width: 840px) {
section#posts {
width: 700px;
}
.content {
width: 600px;
}
}
@media screen and (min-width: 640px) and (max-width: 740px) {
section#posts {
width: 600px;
}
.content {
width: 500px;
}
}
@media screen and (max-width: 640px) {
section#posts {
width: 500px;
}
.content {
width: 400px;
}
}

div#title {
height: 30vh;
text-align: center;
background: {color:title and nav bar background};
}
div#title div {
top: 50%;
transform: translateY(-50%);
color: {color:title};
font-size: 40px;
}
nav {
height: 60px;
line-height: 60px;
text-align: center;
text-transform: uppercase;
background: {color:title and nav bar background};
position: absolute;
width: 100%;
z-index: 10;
}
nav.fixed {
position: fixed;
top: 0;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
width: calc(100% - 16px);
}
nav a {
color: {color:title};
padding: 0 5px;
margin: 0 5px;
transition: 0.2s all ease-in-out;
font-weight: bold;
}
nav a:hover {
color: {color:color 2};
}
div#blog-avatar {
position: absolute;
top: 10px;
left: -10px;
opacity: 0;
transition: 0.35s all ease-in-out;
}
div#blog-avatar a {
margin: 0;
padding: 0;
}
nav.fixed div#blog-avatar {
left: 10px;
opacity: 1;
}
div#blog-avatar img {
height: 40px;
border-radius: 10px;
}
.scroll-up {
position: absolute;
left: 3px;
top: 3px;
width: 34px;
height: 34px;
line-height: 40px;
text-align: center;
background: #fff;
border-radius: 10px;
opacity: 0;
transition: 0.35s all ease-in-out;
color: {color:font};
cursor: pointer;
}
.scroll-up:hover {
opacity: 0.8;
}
div#search {
display: inline-block;
position: absolute;
top: 0;
right: 16px;
line-height: 60px;
color: {color:title};
cursor: pointer;
}
div#search:hover {
color: {color:color 2};
}

section#posts {
left: 50%;
transform: translateX(-50%);
padding: 70px 0 32px 0;
}
.post {
margin: 32px 0;
}
@keyframes fade {
from {opacity:0;}
top {opacity:1;}
}
.post.new {
animation: fade 2s;
}
.post.center {
text-align: center;
}

.info, .content {
display: inline-block;
vertical-align: top;
}
.info {
padding: 32px 8px 0;
margin-right: 8px;
box-sizing: border-box;
width: 85px;
text-align: right;
}
.info:before {
content: '';
position: absolute;
height: 3px;
width: 100%;
background: {color:color 1};
left: 0;
top: 20px;
}
a.permalink {
font-size: 12.8px;
color: {color:color 2};
}
.date {
text-transform: uppercase;
}
div.notes {
font-variant: small-caps;
}
.reblog-info {
font-size: 12px;
margin-top: 6px;
text-transform: uppercase;
}
.reblog-info a {
color: {color:color 2};
}
.reblog-info a:hover {
color: {color:color 3};
}
a.via {
margin-right: 8px;
}
.tags {
margin-top: 8px;
}
a.tag {
display: block;
font-variant: small-caps;
font-weight: bold;
line-height: 16px;
margin: 6px 0;
word-break: break-word;
}
.buttons {
margin-top: 12px;
font-size: 14px;
}
.like-button, .reblog-button {
display: inline-block;
}
.like-button {
margin-right: 8px;
}
.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;
color: {color:color 2};
}
.like_button:hover + .new-like-button > span {
color: {color:color 1};
}
.like_button.liked + .new-like-button > span {
color: {color:color 1};
}
.reblog-button a {
color: {color:color 2};
}
.reblog-button a:hover {
color: {color:color 1};
}

.content {
padding: 16px;
background: {color:post background};
box-sizing: border-box;
}
.content a:hover, .post-notes a:hover, .content-source a:hover {
color: {color:color 2};
}
.text.content.center {
display: inline-block;
}

.content blockquote {
border-left: 1px solid {color:color 2};
margin: 1em 1em 1em 2%;
padding: 0 0 0 2%;
}
.content ul {
margin: 1em 0 1em 2em;
padding: 0;
list-style: none;
}
.content ul li:before {
content: "\e18c"; /* change this if you want a different icon for lists */
position: absolute;
font-family: 'saturnicons';
font-size: 14px;
color: {color:color 2};
left: -24px;
top: 3px;
}

a.title, a.path.has-desc {
font-size: 28px;
display: inline-block;
margin-bottom: 8px;
}
.pic img {
width: 100%;
}
.tmblr-lightbox {
background: #fff !important;
}
.tmblr-lightbox .vignette {
opacity: 0;
}
.tmblr-lightbox .lightbox-image {
box-shadow: none !important;
}
.caption {
margin-top: 16px;
}
.words, a.path:not(.has-desc) {
font-size: 28px;
}
.source {
margin-top: 8px;
}
.chat table td {
padding: 4px 8px 0 0;
}
td.label {
font-weight: bold;
}
.audio iframe {
width: 100%;
}
iframe.tumblr_audio_player {
height: 85px;
}
iframe.spotify_audio_player {
height: 80px;
}
.qna .blog {
font-size: 20px;
text-transform: lowercase;
color: {color:font};
}
.qna .blog a {
color: {color:font};
}
.qna .blog a:hover {
color: {color:font};
}
.blog img {
height: 20px;
margin-right: 8px;
border-radius: 25%;
}
.speech {
margin-top: 8px;
}
.qna:not(:first-of-type) {
margin-top: 24px;
}
.my.qna {
font-size: 20px;
margin-top: 16px;
}
.reblogged:not(:last-of-type) {
margin-bottom: 20px;
}
.reblogged .blog img, .reblogged .blog a {
display: inline-block;
vertical-align: middle;
}
.reblogged p:nth-child(2) {
margin-top: 0.5em;
}
.content-source {
font-variant: small-caps;
margin: 0 0 0 109px;
}
.content-source span {
font-style: italic;
color: {color:color 3};
}

.post-notes {
margin-top: 16px;
}
ol.notes {
list-style: none;
padding: 0;
margin: 0 0 0 109px;
font-variant: small-caps;
}
li.note {
margin: 15px 0;
}
li.note:first-child {
margin-top: 0;
}
li.note:last-child {
margin-bottom: 0;
}
li.note blockquote {
margin-top: 0.5em;
font-variant: normal;
font-size: 14px;
}
img.avatar {
margin-right: 8px;
border-radius: 100%;
}
a.more_notes_link {
text-transform: lowercase;
}

footer {
text-align: center;
color: {color:color 3};
border-top: 2px solid {color:color 1};
margin-top: 32px;
padding: 16px;
background: {color:footer background};
}
footer a {
color: {color:color 3};
}
.footer-info {
margin: 16px 0;
}
div#links a {
margin: 0 8px;
font-size: 18px;
font-variant: small-caps;
text-transform: lowercase;
}
div#links a:hover {
color: {color:color 1};
}
div#name {
font-weight: bold;
font-variant: small-caps;
}
div#name span {
color: {color:color 1};
font-weight: bold;
}
div#description {
font-size: 14px;
font-variant: small-caps;
}
div#about {
text-transform: uppercase;
font-size: 12.8px;
margin-bottom: 4px;
}
div#credit {
margin-top: 4px;
font-size: 14px;
font-variant: small-caps;
}

div#search-container {
position: fixed;
display: none;
background: {color:post background};
opacity: 0.99;
height: 100vh;
width: 100%;
z-index: 100;
top: 0;
left: 0;
text-align: center;
}
div#search-close {
position: absolute;
top: 24px;
right: 24px;
padding: 8px;
font-size: 24px;
color: {color:color 3};
cursor: pointer;
}
div#search-form {
top: 50%;
transform: translateY(-50%);
}
div#search-form form input {
border: none;
background: transparent;
color: {color:color 1};
font-size: 32px;
text-align: center;
width: 75%;
}
div#search-form form input:focus {
outline: none;
}
div#search-form form input::-webkit-input-placeholder {
color: {color:color 3};
text-transform: uppercase;
letter-spacing: 8px;
}
div#search-form form input::-moz-placeholder {
color: {color:color 3};
text-transform: uppercase;
letter-spacing: 8px;
}
div#search-form form input:-ms-input-placeholder {
color: {color:color 3};
text-transform: uppercase;
letter-spacing: 8px;
}
div#search-form form input:-moz-placeholder {
color: {color:color 3};
text-transform: uppercase;
letter-spacing: 8px;
}
div#search-form form input::placeholder {
color: {color:color 3};
text-transform: uppercase;
letter-spacing: 8px;
}

button.load-more {
left: 50%;
transform: translateX(-50%);
background: #fff;
border: none;
outline: none;
padding: 6px 12px;
color: {color:color 2};
cursor: pointer;
text-transform: lowercase;
}
button.load-more:hover {
transform: scale(1.35) translateX(-50%);
transform-origin: left;
}

div#pagination {
text-align: center;
{block:Ifinfinitescroll}display:none;{/block:Ifinfinitescroll}
}
div#pagination .page {
margin: 0 10px;
padding: 0 3px;
font-weight: bold;
font-size: 14px;
}
div#pagination span.page {
font-size: 18px;
color: {color:color 2};
}
a.next {
display: none;
}

iframe.tmblr-iframe:not(.fix) {
position: absolute !important;
top: calc(30vh + 65px) !important;
right: -8px !important;
}
iframe.tmblr-iframe.fix {
position: fixed;
top: 65px !important;
}
iframe.tmblr-iframe {
transform: scale(0.75);
transform-origin: right;
{block:Ifinvertedtumblrcontrols}
filter: invert(100%);
{/block:Ifinvertedtumblrcontrols}
}

div#infscr-loading {display:none !important;}

{CustomCSS}

</style>

</head>
<body>

<a href="{BlogURL}"><div id="title"><div>{block:HomePage}{Title}{/block:HomePage}{block:PermalinkPage}{Title}{/block:PermalinkPage}{block:TagPage}#{Tag}{/block:TagPage}{block:DayPage}{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}{/block:DayPage}{block:SearchPage}{SearchQuery}{/block:SearchPage}</div></div></a>

<nav>
<div id="blog-avatar"><a href="{blogURL}"><img src="{PortraitURL-64}" /></a><div class="sf sf-arrow-up scroll-up"></div></div>
{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}
<div id="search" onclick="$('div#search-container').fadeIn(500);$('body').addClass('stop');"><span class="sf sf-search-o"></span></div>
</nav>

<section id="posts">
{block:NoSearchResults}<article class="post">{lang:Sorry no search results found}</article>{/block:NoSearchResults}
{block:Posts}<article class="post {PostType}" id="{PostID}">

{block:Date}<div class="info"><a href="{Permalink}" class="permalink"><div class="date"><div class="day">{DayOfMonthWithZero} {ShortMonth} {Year}</div><div class="time">{24HourWithZero}:{Minutes}</div></div>{block:NoteCount}<div class="notes">{NoteCount}n</div>{/block:NoteCount}</a>{block:RebloggedFrom}<div class="reblog-info"><a href="{ReblogParentURL}" class="via">via</a><a href="{ReblogRootURL}" class="src">src</a></div>{/block:RebloggedFrom}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}" class="tag">{Tag}</a>{/block:Tags}</div>{/block:HasTags}<div class="buttons"><div class="like-button">{LikeButton}<span class="new-like-button"><span class="sf sf-heart-2-o"></span></span></div><div class="reblog-button"><a href="{ReblogURL}" {Target}><span class="sf sf-reblog-o"></span></a></div></div></div>{/block:Date}

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

{block:Text}{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:Text}

{block:Photo}<a href="/image/{PostID}" 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}{Photoset}{/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}>{Name}</a>
{block:Description}{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: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}"/>{Asker}</div><div class="speech">{Question}</div></div>
{block:Answerer}<div class="qna"><div class="blog"><img src="{AnswererPortraitURL-48}"/>{Answerer}</div><div class="speech">{Answer}</div></div>{block:Reblogs}<div class="qna"><div class="blog"><img src="{PortraitURL-64}" />{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a> {/block:HasPermalink}</div><div class="speech">{Body}</div></div>{/block:Reblogs}{/block:Answerer}
{block:NotReblog}<div class="my qna">{Answer}</div>{/block:NotReblog}{/block:Answer}

{block:Caption}<div class="caption">{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}</div>{/block:Caption}
</div>

{block:PermalinkPage}{block:ContentSource}<div class="content-source"><span>souce:</span>&nbsp;<a href="{SourceURL}">{SourceTitle}</a></div>{/block:ContentSource}{/block:PermalinkPage}

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

</article>
{/block:Posts}

</section>

{block:Ifmanualload}{block:IndexPage}<button class="load-more">{lang:Load more posts}</button>{/block:IndexPage}{/block:Ifmanualload}

{block:Pagination}<div id="pagination">
{block:JumpPagination length="5"}{block:CurrentPage}<span class="page">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a href="{URL}" class="page">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}<a href="{NextPage}" class="next">next</a>{/block:NextPage}
</div>{/block:Pagination}

<footer>
<div class="footer-info" id="links">{block:AskEnabled}<a href="/ask">{AskLabel}</a>{/block:AskEnabled}{block:SubmissionsEnabled} <a href="/submit">{SubmitLabel}</a>{/block:SubmissionsEnabled} <a href="/archive">{lang:Archive}</a><a href="{RSS}">{lang:RSS}</a>{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}</div>
<div class="footer-info" id="name"><a href="{BlogURL}">{Title}</a></div>
<div class="footer-info" id="description">{Description}</div>
<div class="footer-info" id="credit"><a href="https://annasthms.tumblr.com">theme by annasthms</a></div>
</footer>

<div id="search-container"><div id="search-close" onclick="$('div#search-container').fadeOut(500);$('body').removeClass('stop');"><span class="sf sf-cross-o"></span></div><div id="search-form"><form action="/search" method="get"><input type="text" name="q" placeholder="{lang:Search}" /></form></div></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/ouqpclx/heNnjoj2d/jquery.fitvids.js"></script>
<script src="https://unpkg.com/infinite-scroll@3.0.2/dist/infinite-scroll.pkgd.min.js"></script>
<script>
function infinite() {
$container = $('section#posts');
$container.infinitescroll({
navSelector: 'div#pagination',
nextSelector: 'a.next',
itemSelector: '.post',
loading: {
img: '',
msgText: '<em></em>',
},
debug: true,
{block:IfNotmanualload}bufferPx: 0,{/block:IfNotmanualload}
{block:Ifmanualload}errorCallback: function(){$('.load-more').hide();}{/block:Ifmanualload}
}, function(items) {
var $items = $(items);
$items.addClass('new');
$('.video, .body, .caption, .reblogged').fitVids({ customSelector: "iframe[src*='tumblr.com'], iframe[src*='vine.co'], iframe[src='about:blank']" });
$itemsIDs = $items.map(function(){
return this.id;
}).get();
Tumblr.LikeButton.get_status_by_post_ids($itemsIDs);
});
{block:Ifmanualload}
$(window).unbind('.infscr');
$('.load-more').click(function(){
$container.infinitescroll('retrieve');
return false;
});
{/block:Ifmanualload}
function navigation() {
var navHeight = $('nav').outerHeight();
var navPosition = $('nav').position().top;
var containerPadding = navHeight + 10 + 'px';
$('section#posts').css('padding-top', containerPadding);
$(window).scroll(function(){
if ($(document).scrollTop() > navPosition) {
$('nav').addClass('fixed');
$('iframe.tmblr-iframe').addClass('fix');
} else {
$('nav').removeClass('fixed');
$('iframe.tmblr-iframe').removeClass('fix');
}
});
}
function scroll() {
$('.scroll-up').click(function(){
$('html, body').animate({ scrollTop: 0 }, 1500);
return false;
});
}
function title() {
var $blogTitle = $('div#name a').html();
var $titleWords = $blogTitle.split(' ');
var $thisWord, $wordLetters, $wordLettersUpper;
for (i = 0; i < $titleWords.length; i++) {
$thisWord = $titleWords[i];
if ($thisWord.length !== 1) {
$wordLetters = $thisWord.split('');
$wordLettersUpper = $thisWord.toUpperCase();
if ($wordLetters[0] !== '&' && $wordLettersUpper !== 'AND' && $wordLettersUpper !== 'IN' && $wordLettersUpper !== 'OF' && $wordLettersUpper !== 'OR' && $wordLettersUpper !== 'THE') {
$wordLetters[0] = $wordLetters[0];
$wordLetters[0] = '<span>' + $wordLetters[0] + '</span>';
}
$thisWord = $wordLetters.join('');
}
$titleWords[i] = $thisWord;
}
var $newTitle = $titleWords.join(" ");
$('div#name a').html($newTitle);
}
function url(name) {
if (location.href === name + "ask") {
$('.post, .text').addClass('center');
} else if (location.href === name + "submit") {
$('.post, .text').addClass('center');
} else {
$('.video, .body, .caption, .reblogged').fitVids({ customSelector: "iframe[src*='tumblr.com'], iframe[src*='vine.co'], iframe[src='about:blank']" });
};
}
</script>
<script>
$(document).ready(function(){
url('{BlogURL}');
navigation();
scroll();
{block:Ifinfinitescroll}
infinite();
{block:Ifinfinitescroll}
title();
});
</script>
</body>
</html>
23,571 chars, 1,912 words, 807 lines·Create new version