ControlC ControlC.com

Theme: CLEAN

Views: 1,329Total Chars: 52,315
Created: 4/6/18 7:42:07AM ET
Self Destructs: Never
<!----

©borntobewildcodes.tumblr.com | CLEAN (vol.3)

+ Do not redistribute this theme or remove the credits.
+ Edit as long as you keep the credits intact
+ Contact me if you have any questions or concerns.
+ If you want a custom theme you can commission me.
+ Thanks for using my theme, I hope that you enjoy it.

Other credits:

- Jquery
- Disqus
- Google fonts
- Font Awesome icons
- Masonry by David Desandro
- Infinite scroll by Paul Irish
- PXU Photosets
- Masonry with Infinite Scroll and PXU Photosets tutorial by @shythemes
- Load more buttons tutorial by @shythemes
- Hide stuff tutorial by @lmthemes

---->

<!DOCTYPE html>
<head>

<title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{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}

<meta name="image:Background" content=""/>
<meta name="image:Container background" content=""/>
<meta name="image:Sidebar background" content=""/>
<meta name="image:About background" content=""/>
<meta name="image:Navigation background" content=""/>
<meta name="image:Avatar" content=""/>

<meta name="color:Background" content="#FFFFFF"/>
<meta name="color:Container background" content="#F6F6F6" />
<meta name="color:Sidebar background" content="#FFFFFF" />
<meta name="color:Navigation background" content="#FFFFFF" />
<meta name="color:About background" content="#FFFFFF" />
<meta name="color:Description" content="#333333"/>
<meta name="color:Search box background" content="#EEEEEE" />
<meta name="color:Search box text" content="#FFFFFF"/>
<meta name="color:Blog title" content="#000000" />
<meta name="color:Blog title background" content="#EEEEEE" />
<meta name="color:Sidebar icon" content="#000000" />
<meta name="color:Sidebar icon background" content="#EEEEEE" />
<meta name="color:Navigation link" content="#000000" />
<meta name="color:Navigation icon" content="#000000" />
<meta name="color:Post background" content="#FFFFFF"/>
<meta name="color:Post info background" content="#FFFFFF"/>
<meta name="color:Post info" content="#AFAFAF"/>
<meta name="color:Link post background" content="#EEEEEE"/>
<meta name="color:Ask bubble" content="#EEEEEE"/>
<meta name="color:Title" content="#111111"/>
<meta name="color:Text" content="#333333"/>
<meta name="color:Link" content="#AFAFAF"/>
<meta name="color:Hover" content="#222222"/>
<meta name="color:Bold" content="#000000"/>
<meta name="color:Italic" content="#AFAFAF"/>
<meta name="color:Buttons" content="#222222"/>
<meta name="color:Borders" content="#DDDDDD"/>
<meta name="color:Pagination" content="#AFAFAF"/>
<meta name="color:Scrollbar" content="#DDDDDD"/>
<meta name="color:Scrollbar background" content="#FFFFFF"/>

<meta name="select:Container box shadow" content="255,255,255" title="white">
<meta name="select:Container box shadow" content="0,0,0" title="black">
<meta name="select:Container box shadow" content="220,37,37" title="red">
<meta name="select:Container box shadow" content="254,98,153" title="pink">
<meta name="select:Container box shadow" content="254,98,153" title="pink">
<meta name="select:Container box shadow" content="167,125,194" title="purple">
<meta name="select:Container box shadow" content="57,74,203" title="indigo">
<meta name="select:Container box shadow" content="82,158,204" title="blue">
<meta name="select:Container box shadow" content="86,188,138" title="green">
<meta name="select:Container box shadow" content="90,201,225" title="turquoise">
<meta name="select:Container box shadow" content="255,216,0" title="yellow">
<meta name="select:Container box shadow" content="242,153,46" title="orange">
<meta name="select:Container box shadow" content="97,61,18" title="brown">

<meta name="font:Body font" content="Helvetica"/>
<meta name="select:Body font size" content="12px" title="12px">
<meta name="select:Body font size" content="13px" title="13px">
<meta name="select:Body font size" content="14px" title="14px">
<meta name="select:Body font size" content="15px" title="15px">
<meta name="select:Body font size" content="16px" title="16px">

<meta name="select:Title font" content="Julius Sans One" title="Julius Sans One">
<meta name="select:Title font" content="Open Sans" title="Open Sans">
<meta name="select:Title font" content="Roboto" title="Roboto">
<meta name="select:Title font" content="Playfair Display" title="Playfair Display">
<meta name="select:Title font" content="Montserrat" title="Montserrat">

<meta name="select:Title font size" content="22px" title="22px">
<meta name="select:Title font size" content="25px" title="25px">
<meta name="select:Title font size" content="27px" title="27px">
<meta name="select:Title font size" content="30px" title="30px">
<meta name="select:Title font size" content="32px" title="32px">

<meta name="select:Blog title font size" content="20px" title="20px">
<meta name="select:Blog title font size" content="22px" title="22px">
<meta name="select:Blog title font size" content="25px" title="25px">
<meta name="select:Blog title font size" content="27px" title="27px">
<meta name="select:Blog title font size" content="30px" title="30px">
<meta name="select:Blog title font size" content="32px" title="32px">

<meta name="select:Sidebar title font size" content="20px" title="20px">
<meta name="select:Sidebar title font size" content="22px" title="22px">
<meta name="select:Sidebar title font size" content="25px" title="25px">
<meta name="select:Sidebar title font size" content="27px" title="27px">
<meta name="select:Sidebar title font size" content="30px" title="30px">
<meta name="select:Sidebar title font size" content="32px" title="32px">

<meta name="select:Post width" content="400" title="400px">
<meta name="select:Post width" content="500" title="500px">

<meta name="if:Inverted Controls" content="0"/>
<meta name="if:Infinite Scroll" content="0"/>
<meta name="if:Load More" content="0"/>
<meta name="if:Sidebar Position Right" content="0" />
<meta name="if:Sidebar Element Background Transparent" content="0" />
<meta name="if:Container Background Stretch" content="0" />
<meta name="if:Sidebar Background Stretch" content="0" />
<meta name="if:About Background Stretch" content="0" />
<meta name="if:Navigation Background Stretch" content="0" />
<meta name="if:Show Search Box" content="1" />
<meta name="if:Show Blog title" content="1" />
<meta name="if:Show About" content="1" />
<meta name="if:Show Avatar" content="1" />
<meta name="if:Show Description" content="1" />
<meta name="if:Show Navigation" content="1" />
<meta name="if:Show Navigation Icons" content="1" />
<meta name="if:Show Info On Hover" content="0" />
<meta name="if:Faded Images" content="0" />
<meta name="if:Monochrome Images" content="0" />
<meta name="if:Show Captions" content="1" />
<meta name="if:Show Tags" content="1" />
<meta name="if:Ask Enabled" content="1" />
<meta name="if:Submissions Enabled" content="1" />
<meta name="if:Show Archive Link" content="1" />
<meta name="if:Disqus Shortname" content="0"/>

<meta name="if:Show Link One" content="1" />
<meta name="if:Show Link Two" content="1" />
<meta name="if:Show Link Three" content="1" />
<meta name="if:Show Link Four" content="1" />
<meta name="if:Show Link Five" content="1" />

<meta name="text:Link One Title" content="Link one" />
<meta name="text:Link One Url" content="http://"/>
<meta name="text:Link Two Title" content="Link two"/>
<meta name="text:Link Two Url" content="http://"/>
<meta name="text:Link Three Title" content="Link three" />
<meta name="text:Link Three Url" content="http://" />
<meta name="text:Link Four Title" content="Link four" />
<meta name="text:Link Four Url" content="http://" />
<meta name="text:Link Five Title" content="Link five" />
<meta name="text:Link Five Url" content="http://" />

<meta name="if:Show Tag One" content="1" />
<meta name="if:Show Tag Two" content="1" />
<meta name="if:Show Tag Three" content="1" />
<meta name="if:Show Tag Four" content="1" />
<meta name="if:Show Tag Five" content="1" />
<meta name="if:Show Tag Six" content="1" />

<meta name="text:Tag One Title" content="tag" />
<meta name="text:Tag One Url" content="http://"/>
<meta name="text:Tag Two Title" content="tag"/>
<meta name="text:Tag Two Url" content="http://"/>
<meta name="text:Tag Three Title" content="tag" />
<meta name="text:Tag Three Url" content="http://" />
<meta name="text:Tag Four Title" content="tag" />
<meta name="text:Tag Four Url" content="http://" />
<meta name="text:Tag Five Title" content="tag" />
<meta name="text:Tag Five Url" content="http://" />
<meta name="text:Tag Six Title" content="tag" />
<meta name="text:Tag Six Url" content="http://" />

<meta name="if:Facebook" content="1" />
<meta name="if:Twitter" content="1" />
<meta name="if:Instagram" content="1" />
<meta name="if:Deviantart" content="1" />
<meta name="if:Flickr" content="1" />

<meta name="text:Facebook url" content="http://" />
<meta name="text:Twitter url" content="http://" />
<meta name="text:Instagram url" content="http://" />
<meta name="text:Deviantart url" content="http://" />
<meta name="text:Flickr url" content="http://" />

<meta name="text:Border radius" content="0px" />
<meta name="text:Blog alias" content="blogalias"/>
<meta name='text:Disqus Shortname' content='' />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->

<style type="text/css">

/* ---------------------------- GENERAL ----------------------------- */

/* -------- BASICS ------- */

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: {color:text};
font-family: {font:Body font};
font-size: {select:Body font size};
line-height: calc({select:Body font size} + 5px);
background-color: {color:Background};
background-image:url({image:Background});
background-attachment: fixed;
background-repeat: repeat;
word-wrap: break-word;
}

/* Headings */

h1 { font-size:{select:Title font size}; }
h2 { font-size:calc({select:Title font size} - 5px); }
h3 { font-size:calc({select:Title font size} - 7px); }

h1, h2, h3{
margin: 10px 0 20px 0;
color:{color:Title};
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}

h1:after, .title:after {
content: '';
display:block;
width:40px;
height:2px;
border-bottom:1px solid {color:Link};
}

.entry h1:first-child, .entry h2:first-child, .entry h3:first-child {
margin-top:10px;
}

/* Paragraph */

p { margin:5px 0;}

p:first-of-type { margin-top:0;}

p:last-of-type { margin-bottom:0;}

small, big, sub, pre {
font-size:1em!important;
line-height:1.4em!important;
vertical-align:baseline!important;
}

blockquote {
padding:.25em 0 .25em 15px;
margin:.5em 0;
border-left:1px solid {color:Borders};
}

/* Bold and italic */

b, strong, b a, strong a {
font-weight:bold!important;
color: {color:Bold};
}

i, em {
color: {color:Italic};
transition:all .3s linear;
-webkit-transition:all .3s linear;
-o-transition:all .3s linear;
-moz-transition:all .3s linear;
}

/* Links */

a {
color:{color:Link};
text-decoration:none;
transition:all .3s linear;
-webkit-transition:all .3s linear;
-o-transition:all .3s linear;
-moz-transition:all .3s linear;
}

a, a img {cursor:pointer;}

a:hover {
color:{color:Hover}!important;
text-decoration:none;
}

ul, ol, li {
margin: 5px 10px;
padding: 0;
}

/* Line break */

hr {
border:none;
box-shadow:0;
margin:2em auto;
width:75px;
border-top:1px solid {color:Borders};
}

pre {
padding:0;
margin:0;
line-height:inherit!important;
background:transparent;
font-family:inherit!Important;
font-size:inherit!important;
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}

/* Tumblr lightbox */

.tmblr-lightbox {background:rgba({RGBcolor:Background}, .95)!important;}

.tmblr-lightbox img {opacity:0;}

.lightbox-caption {
color:{color:Title}!important;
font-family:inherit!important;
font-size:1em!important;
font-weight:normal!important;
text-shadow:none!important;
}

.lightbox-image {
-moz-box-shadow:none!important;
-webkit-box-shadow:none!important;
box-shadow:none!important;
-moz-border-radius:0px!important;
-webkit-border-radius:0px!important;
border-radius:0px!important;
padding:0px!important;
border:0!important;
opacity:1!important;
}

.vignette {opacity:0!Important;}

/* Webkit scrollbar */

::-webkit-scrollbar {
width: 9px;
height: 0;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 0;
display: block;
background-color: {color:Scrollbar background};
border-bottom-right-radius:30px;
}

::-webkit-scrollbar-track-piece {
background-color: {color:Scrollbar background};
}

::-webkit-scrollbar-thumb:vertical {
height: 0;
background-color: {color:Scrollbar};
border: 4px solid {color:Scrollbar background};
}

/* Selection */

::-moz-selection {
background: {color:Hover};
color: {color:Background};
}

::selection {
background: {color:Hover};
color: {color:Background};
}

/* Tumblr controls */

iframe.tmblr-iframe {
top:0px!important;
right:35px!important;
{block:ifInvertedControls}
filter:invert(100%) hue-rotate(180deg);
-webkit-filter:invert(100%) hue-rotate(180deg);
-moz-filter:invert(100%) hue-rotate(180deg);
-o-filter:invert(100%) hue-rotate(180deg);
-ms-filter:invert(100%) hue-rotate(180deg);
{/block:ifInvertedControls}
transform:scale(0.8);
transform-origin:100% 0;
-webkit-transform:scale(0.8);
-webkit-transform-origin:100% 0;
-o-transform:scale(0.8);
-o-transform-origin:100% 0;
-moz-transform:scale(0.8);
-moz-transform-origin:100% 0;
-ms-transform:scale(0.8);
-ms-transform-origin:100% 0;
z-index:100000!important;
}

iframe.tmblr-iframe:hover {
opacity:0.6!important;
}

/* Tooltips */

.ui-tooltip {
position:absolute;
z-index:9999;
padding-top:10px;
}

.ui-tooltip-content {
background:{color:Background};
padding:0 4px;
font-style:italic;
color:{color:Link};
text-transform:lowercase;
border:1px solid {color:Borders};
}

img {
margin:0;
opacity:1;
border:0;
text-decoration:none;
max-width:100%;
height:auto;
display:block;
}

/* Image style */

{block:IfFadedImages}
img {
-webkit-transition: opacity 0.8s linear;
-moz-transition: opacity 0.8s linear;
-o-transition: opacity 0.8s linear;
-ms-transition: opacity 0.8s linear;
opacity: 0.60;
}

img:hover {
-webkit-transition: opacity 0.8s linear;
-moz-transition: opacity 0.8s linear;
-o-transition: opacity 0.8s linear;
-ms-transition: opacity 0.8s linear;
opacity: 1;
}
{/block:IfFadedImages}

{block:IfMonochromeImages}
img {
-webkit-filter: grayscale(1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

img:hover {
filter: none;
-webkit-filter: grayscale(0);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
{/block:IfMonochromeImages}

/* Fix */

iframe, img, embed, object, video {
max-width: 100%;
border: none;
}

input, textarea, select, a { outline: none; }

/*-- CREDIT --*/

#credit {
position:fixed;
top:9px;
right:10px;
width:25px;
height:25px;
z-index: 100000;
}

#credit img {
border: 1px solid {color:Borders};
}

#credit img:hover {
border: 1px solid {color:Hover};
}

/*------------------------------- CONTAINER -----------------------------*/

#container {
position:fixed;
top:50%;
left:50%;
height:80vh;
width:calc({select:Post width}px + 308px)!important;
background:{color:Container background};
background-image:url({image:Container background});
{block:ifContainerBackgroundStretch}
background-size:cover;
{/block:ifContainerBackgroundStretch}
border:1px solid {color:Borders};
-webkit-box-shadow: 3px 3px 3px 0 rgba({select:Container box shadow}, 0.5);
-moz-box-shadow: 3px 3px 3px 0 rgba({select:Container box shadow}, 0.5);
box-shadow: 3px 3px 3px 0 rgba({select:Container box shadow}, 0.5);
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

/* -------- SIDEBAR ------- */

#sidebar{
position:fixed;
top:0px;
left:0px;
height:100%;
width:230px;
background:{color:Sidebar background};
background-image:url({image:Sidebar background});
{block:ifSidebarBackgroundStretch}
background-size:cover;
{/block:ifSidebarBackgroundStretch}
border-right:1px solid {color:Borders};
z-index:100;
{block:IfSidebarPositionRight}
margin-left:calc({select:Post width}px + 78px)!important;
border-left:1px solid {color:Borders};
border-right:none;
{/block:IfSidebarPositionRight}
}

/* Search box */

#search {
position:fixed;
text-align:center;
margin-top:10px;
margin-left:10px;
color:{color:Search box text};
background:{color:Search box background};
{block:IfSidebarElementBackgroundTransparent}
background:transparent;
{/block:IfSidebarElementBackgroundTransparent}
width:160px;
height:32px;
z-index:100;
overflow:hidden;
}

.search-icon{
position:absolute;
margin-left:5px;
margin-top:6px;
z-index:10000;
}

.search-icon svg {
color:{color:Sidebar icon};
padding:2.5px;
font-size:13px;
}

input,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder
{
font-size:40px;
color:{color:Search box text};
}

/*-- About box --*/

.open-about{
position:absolute;
margin-top:11px;
margin-left:calc(100% - 30px);
cursor:pointer;
}

.open-about svg {
position:fixed;
display:inline-block;
width:30px;
height:30px;
line-height:30px;
font-size:15px;
color:{color:Sidebar icon};
vertical-align:middle;
}

.open-about svg:hover {
color:{color:Hover};
}

#about {
position:fixed;
margin:-1px 0;
width:230px;
height:calc(100% + 2px);
background:{color:About background};
background-image:url({image:About background});
{block:ifAboutBackgroundStretch}
background-size:cover;
{/block:ifAboutBackgroundStretch}
z-index:1000;
display:none;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}

#about-panel {
position:absolute;
top:calc(50% - 10px);
left:50%;
width:80%;
max-height:calc(100% - 80px);
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

/* Avatar */

#avatar {
margin:0 auto;
width:80px;
height:80px;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}

#avatar img {
width:80px;
height:80px;
border-radius:80px;
border:2px solid {color:Borders};
}

#avatar img:hover{
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

/* Description */

#description {
color:{color:Description};
margin-top:20px;
margin-left:auto;
margin-right:auto;
max-height:330px;
padding:0 10px;
font-size:12px;
line-height:20px;
text-align:justify;
overflow-y:auto;
}

.close-about {
position:absolute;
bottom:45px;
margin-left:calc(100% - 30px);
cursor:pointer;
}

.close-about svg {
position:fixed;
width:50px;
height:46px;
line-height:46px;
font-size:15px;
color:{color:Navigation icon};
vertical-align:middle;
}

.close-about svg:hover {
color:{color:Hover};
}

/* Blog title */

#blog-title {
position:absolute;
left:50%;
top:50%;
width:190px;
height:auto;
padding:10px 5px;
line-height:25px;
letter-spacing:2px;
text-align:center;
color:{color:Blog title};
background:{color:Blog title background};
{block:IfSidebarElementBackgroundTransparent}
background:transparent;
{/block:IfSidebarElementBackgroundTransparent}
font-size:{select:Blog title font size};
font-family:{select:Title font};
border-top:1px solid {color:Borders};
border-bottom:1px solid {color:Borders};
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

.blogtitle:hover{
background:{color:Borders};
color:{color:Hover};
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}

/*-- Navigation icons --*/

.open-icons {
position:absolute;
bottom:15px;
margin-left:calc(100% - 30px);
width:15px;
height:15px;
cursor:pointer;
text-align:center;
z-index:100;
}

.open-icons svg {
font-size:15px;
color:{color:Sidebar icon};
vertical-align:middle;
}

.open-icons svg:hover {
color:{color:Hover};
}

.rotate svg{
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

#icons {
position:absolute;
bottom:-35px;
margin-left:calc(100% - 108px);
width:150px;
height:150px;
text-align:center;
border-radius:100px;
display:none;
}

#icons svg {
padding:5px 7px;
width:10px;
border:1px solid {color:Borders};
border-radius:20px;
color:{color:Sidebar icon};
background:{color:Sidebar icon background};
{block:IfSidebarElementBackgroundTransparent}
background:transparent;
{/block:IfSidebarElementBackgroundTransparent}
vertical-align:middle;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}

#icons svg:hover {
background:{color:Sidebar icon background};
color:{color:Hover};
}

.icon1{
position:absolute;
margin-left:2px;
margin-top:80px;
}

.icon2{
position:absolute;
margin-left:1px;
margin-top:50px;
}

.icon3{
position:absolute;
margin-left:14px;
margin-top:21px;
}

.icon4{
position:absolute;
margin-left:39px;
margin-top:3px;
}

.icon5{
position:absolute;
margin-left:70px;
margin-top:0px;
cursor:pointer;
}

/*-- Navigation --*/

#navigation {
position:fixed;
margin:-1px 0;
width:230px;
height:calc(100% + 2px);
background:{color:Navigation background};
background-image:url({image:Navigation background});
{block:ifNavigationBackgroundStretch}
background-size:cover;
{/block:ifNavigationBackgroundStretch}
overflow:hidden;
display:none;
z-index:1000;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}

#navigation-panel {
position:absolute;
top:calc(50% - 10px);
left:50%;
width:80%;
max-height:calc(100% - 90px);
padding:0px 10px;
overflow-y:auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

/* Navigation links */

#navigation-links a {
display:block;
margin-left:0px;
margin-top:0px;
width:100%;
padding:2px;
font-size:12px;
line-height:25px;
text-align:right;
color:{color:Navigation link};
border-bottom:1px solid {color:Borders};
}

#navigation-links a:hover {
background:{color:Borders};
color:{color:Hover};
padding:2px 5px;
width:calc(100% - 6px);
}

#navigation-links span {
float:left;
color:{color:Navigation icon};
}

#navigation-links a:hover span {
color:{color:Hover};
}

/* Social links */

#social-links {
margin-top:25px;
margin-left:0px;
width:100%;
text-align:center;
}

#social-links svg {
display:inline-block;
padding:4px;
margin:3px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
color:{color:Navigation icon};
border:1px solid {color:Borders};
}

#social-links svg:hover {
background:{color:Borders};
color:{color:Hover};
}

/* Tag links */

#tag-links {
margin-top:15px;
width:100%;
text-align:center;
}

#tag-links a {
display:inline-block;
margin:5px 4px;
font-size:12px;
color:{color:Navigation link};
padding:3px 6px;
border-bottom:1px solid {color:Borders};
}

#tag-links a:hover {
background:{color:Borders};
color:{color:Hover};
}

.close-navigation {
position:absolute;
bottom:55px;
margin-left:calc(100% - 30px);
cursor:pointer;
}

.close-navigation svg {
position:fixed;
width:50px;
height:46px;
line-height:46px;
font-size:15px;
color:{color:Navigation icon};
vertical-align:middle;
}

.open-navigation svg:hover {
color:{color:Hover};
}


/* ---------- POSTS AND ENTRIES ---------- */

#containerin {
margin-top:0px;
margin-left:230px;
margin-right:auto;
width: calc({select:Post width}px + 80px);
height: 80vh;
{block:IfSidebarPositionRight}
margin-left: 0;
{/block:IfSidebarPositionRight}
overflow: hidden;
overflow-y: auto;
}

#posts {
margin-top: 18px;
margin-left: auto;
margin-right: auto;
width: calc({select:Post width}px + 40px);
overflow: hidden;
}

.entry {
display: inline-block;
float: left;
margin: 18px;
width: {select:Post width}px;
height: auto;
overflow: hidden;
background: {color:Post background};
border: 1px solid{color:Borders};
border-radius: {text:Border radius};
overflow: hidden;
}

.entry img { max-width: 100%; }

.content {
margin: 0px;
padding: 10px;
background: {color:Post background};
}

/*--------------------------- RESPONSIVE DESIGN ---------------------------*/

@media only screen and (max-width: 720px) {

#container {
top:0;
left:0;
width:100vw!important;
height:100vh!important;
min-width:300px;
-webkit-transform: translateX(0%) translateY(0%);
-moz-transform: translateX(0%) translateY(0%);
-ms-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
overflow-y:auto!important;
}

#sidebar {
margin-left:0px!important;
width:100%;
min-width:300px;
height:30vh;
border-right:none;
border-right:none;
border-bottom:1px solid {color:Borders};
}

#about {
width:100%;
min-width:300px;
height:30vh;
}

#avatar {
float:left;
margin-top:20px;
margin-left:20px;
width:80px;
height:80px;
}

#description{
margin-top:10px;
max-height:160px;
width:calc(100% - 140px);
}

#navigation {
width:100%;
min-width:300px;
height:30vh;
}

#containerin {
margin:auto;
margin-top:200px;
width:100vw!important;
height:auto;
padding-bottom:20px;
overflow:hidden;
}

#credit {
bottom:9px;
top:auto;
}

iframe.tmblr-iframe {
bottom:-10px!important;
top:auto!important;
}

}
/* End media only screen 700 */

@media only screen and (max-width: 414px) {

#posts {
width:100vw;
margin-left:0px;
background:blue;
}

.entry {
width:calc(100vw - 46px);
}

#pagcon {
width:calc(100vw - 46px);
}

}
/* End media only screen 414 */
/* End responsive design */

/* Caption */

.comment {
padding:0px 10px;
padding-top:5px;
list-style:none;
border-bottom:1px solid {color:Borders};
}

.comment:last-of-type {
padding-bottom:0!important;
border-bottom:1px solid transparent;
}

/* -------- POSTS STYLES ------- */

/* Titles */

.title {
margin:10px;
margin-top:0px;
color:{color:Title};
font-family:{select:Title Font};
font-size:{select:Title font size};
line-height: -moz-calc({select:Title font size} + 3px);
line-height: -webkit-calc({select:Title font size} + 3px);
line-height: -o-calc({select:Title font size} + 3px);
line-height: calc({select:Title font size} + 3px);
}

.title a { color:{color:Title}; }

.title a:hover { color:{color:Link}; }

.tex li, .tex blockquote {
text-align:left;
}

/* Photoset posts */

.photo-slideshow {
margin-top:5px;
padding-top:5px;
}

/* Quote posts */

.quote {
margin: 10px;
padding: 5px;
font-family: {select:Title font};
font-size: {select:Title font size};
line-height: -moz-calc({select:Title font size} + 3px);
line-height: -webkit-calc({select:Title font size} + 3px);
line-height: -o-calc({select:Title font size} + 3px);
line-height: calc({select:Title font size} + 3px);
color: {color:Italic};
text-align: left;
letter-spacing: 2px;
}

.quote-source {
font-size: 12px;
line-height: 20px;
}

/* Link posts */

.linkthumb img {
width: 100%;
}

.linkp {
background: {color:Link post background};
padding:10px;
}

.linkp svg {
color: {color:Title};
}

/* Chat posts */

.line {
margin: 5px 10px;
line-height: 18px;
}

/* Ask Posts */

.asker {
margin: 5px;
margin-top: 10px;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: auto;
}

.bubble {
width: -moz-calc(100% - 70px);
width: -webkit-calc(100% - 70px);
width: -o-calc(100% - 70px);
width: calc(100% - 70px);
height: auto;
min-height: 35px;
padding: 10px;
line-height: 20px;
background: {color:Ask bubble};
z-index: 10;
}

.triangle {
position: absolute;
margin-left: -moz-calc(100% - 90px);
margin-left: -webkit-calc(100% - 90px);
margin-left: -o-calc(100% - 90px);
margin-left: calc(100% - 90px);
width: 0;
z-index:0;
border-left: 8px solid {color:Ask bubble};
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
}

.asker img {
float: right;
margin-right: 0;
max-width: 30px;
border: 1.5px solid {color:Ask bubble};
border-radius: 2px;
z-index:1000;
opacity:1;
}

.asker a {
margin: 0;
}

.answer {
margin: 10px;
margin-bottom: 0;
}

/* ----------------------- POST INFO ----------------------------- */

.topinfo {
margin:0px;
width: -moz-calc(100% - 30px);
width: -webkit-calc(100% - 30px);
width: -o-calc(100% - 30px);
width: calc(100% - 30px);
height: 10px;
padding: 15px;
line-height: 15px;
background:{color:Post info background};
}

.topinfourl {
margin:0;
font-size: 12px;
}

/* Date */

.topinfod {
float: right;
margin-top:-15px;
font-size:12px;
}

/* Bottom info */

.botinfo {
width: -moz-calc(100% - 30px);
width: -webkit-calc(100% - 30px);
width: -o-calc(100% - 30px);
width: calc(100% - 30px);
height:auto;
min-height: 50px;
margin: 0px;
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 12px;
line-height: 25px;
color: {color:Text};
background:{color:Post info background};
overflow:hidden;
}

.botinfo a {
margin-right: 25px;
color:{color:Post info};
}

.tags {
font-size: 13px;
{block:IndexPage}
{block:ifNotShowTags}
display: none;
{/block:ifNotShowTags}
{/block:IndexPage}
}

.tags a {
margin-right: 5px;
}

.notec {
float: left;
}

/* Butttons */

.buttons {
float:right;
margin-top:0px;
margin-right:-5px;
width:77px;
height:26px;
line-height:26px;
z-index:100;
list-style:none;
{block:ifDisqusShortname}
width: 103px;
{/block:ifDisqusShortname}
{block:PermalinkPage}
width:52px;
{/block:PermalinkPage}
}

.buttons li {
display:inline-block;
margin:0;
margin-left:2px;
margin-right:0;
width:20px;
height:26px;
padding:0px;
text-align:center;
}

.perma svg {
font-size:13px;
color:{color:Buttons};
}

.cmnt svg {
font-size:15px;
color:{color:Buttons};
}

.reblog svg {
font-size:17px;
color:{color:Buttons};
}

.like .like_button {
position:absolute;
width:100%;
height:100%;
}

.like .like_button iframe {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
z-index:10;
opacity:0.0000001;
}

.like svg {
font-size:15px;
color:{color:Buttons};
}

.like .liked + svg {
font-size:14px;
color:#D95E40;
}


/* Permalink pagination */

.permapag {
margin-top: 15px;
margin-left: 0;
}

.permapag a{
font-size:15px;
margin:10px;
margin-top: 20px;
padding:5px;
color:{color:Link};
}

/* Post notes */

.open-pnotes {
margin:10px;
width:150px;
color: {color:Text};
text-align:left;
cursor: pointer;
padding: 5px 10px;
border-bottom: 1.5px solid {color:Borders};
font-size: 15px;
}

.open-pnotes:hover {
color: {color:Hover};
background:{color:Post info background};
}

#notes {
margin: 10px;
width: 500px;
font-size: 13px;
color: {color:Text};
display:none;
}

ol.notes {
padding: 0;
margin: 5px 0;
list-style-type: none;
}

ol.notes li.note {
padding: 5px;
}

ol.notes li.note img.avatar {
float:left;
vertical-align: -5px;
width: 15px;
height: 15px;
margin-left:10px;
margin-right:10px;
}

li.more_notes_link_container {
text-transform: uppercase;
font-size: 13px;
}

/* Disqus box */

#disqusbox {
padding:15px;
}

/* ------------------- PAGINATION AND INFINITE SCROLL -------------------- */

#pagcon {
margin-top:10px;
margin-left:auto;
margin-right:auto;
width:calc({select:Post width}px + 40px)!important;
height:40px;
text-align: center;
z-index:100;
}

/* Pagination */

#pagination {
width:100%;
height:40px;
{block:ifInfiniteScroll}
display: none;
{/block:ifInfiniteScroll}
}

.previous, .next, .load-more, .jump_page, .current_page {
display:inline-block;
margin:5px;
color:{color:Pagination};
width:25px;
height:25px;
line-height:25px;
font-size:calc({select:Body font size} + 5px);
text-align:center;
}

#pagination a {
color:{color:Pagination};
vertical-align:middle;
height:25px;
line-height:25px;
}

#pagination svg {
display:inline;
color:{color:Pagination};
}

#pagination a:hover, #pagination a:hover svg {
color:{color:Hover};
}

/* INFINITE SCROLL */

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

#iscon{
width: 100%;
height: 35px;
z-index: 10000;
}

{block:ifLoadMore}
.load-more{
width:400px;
height:35px;
font-size:{select:Body font size};
}
{/block:ifLoadMore}

/* --------------------------- Custom CSS -------------------------- */

{CustomCSS}

</style>

<meta charset="utf-8">
<title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

</head>

<!------------------------------ HTML ------------------------------->

<body>

<div id="container">

<div id="sidebar">

{block:IfShowSearchBox}
<div id="search">
<div class="search-icon">
<i class="fa fa-search fa"></i>
</div>
<form action="/search" method="get">
<input type="text" name="q" placeholder="Search" value="" style="margin-top:5px; margin-left:15px; width:110px; padding-left:10px; height:19px; border:1px solid transparent; background:transparent; color:{color:Search box text}; font-size: 12px;"/>
</form>
</div>
{/block:IfShowSearchBox}
<!-- End search -->

{block:IfShowAbout}
<div class="open-about"><i class="fas fa-user"></i></div>

<div id="about">

<div id="about-panel">

{block:IfShowAvatar}
<div id="avatar">
<a href="/"><img src="{image:Avatar}"></a>
</div>
{/block:IfShowAvatar}

{block:IfShowDescription}
<div id="description">{Description}</div>
{/block:IfShowDescription}

</div>
<!-- End about-panel -->

<div class="close-about"><i class="fa fa-arrow-right"></i></div>

</div>
<!-- End about -->
{/block:IfShowAbout}

{block:IfShowBlogtitle}
<div id="blog-title">{Title}</div>
{/block:IfShowBlogtitle}

{block:IfShowNavigationIcons}

<div class="open-icons"><i class="fas fa-plus"></i></div>

<div id="icons">

<div class="icon1"><a href="/" title="Index"><i class="fas fa-home"></i></a></div>
{block:ifAskEnabled}
<div class="icon2"><a href="/ask" title="Ask"><i class="far fa-envelope"></i></a></div>
{/block:ifAskEnabled}
{block:ifSubmissionsEnabled}
<div class="icon3"><a href="/submit" title="Submit"><i class="far fa-edit"></i></a></div>
{/block:ifSubmissionsEnabled}
<div class="icon4"><a href="/archive" title="Archive"><i class="fas fa-history"></i></a></div>

{block:IfShowNavigation}
<div class="icon5"><i class="fas fa-list"></i></div>
{/block:IfShowNavigation}

</div>
{/block:IfShowNavigationIcons}

{block:IfShowNavigation}
<div id="navigation">

<div id="navigation-panel">

<div id="navigation-links">
{block:IfShowLinkOne}<a href="{text:Link One Url}"><span>01</span> {text:Link One Title}</a>{/block:IfShowLinkOne}
{block:IfShowLinkTwo}<a href="{text:Link Two Url}"><span>02</span> {text:Link Two Title}</a>{/block:IfShowLinkTwo}
{block:IfShowLinkThree}<a href="{text:Link Three Url}"><span>03</span> {text:Link Three Title}</a>{/block:IfShowLinkThree}
{block:IfShowLinkFour}<a href="{text:Link Four Url}"><span>04</span> {text:Link Four Title}</a>{/block:IfShowLinkFour}
{block:IfShowLinkFive}<a href="{text:Link Five Url}"><span>05</span> {text:Link Five Title}</a>{/block:IfShowLinkFive}
</div>
<!-- End navigation-links -->

<div id="social-links">
{block:IfFacebook}<a href="{text:Facebook url}" target = "_blank"><i class="fab fa-facebook-f"></i></a>{/block:IfFacebook}
{block:IfTwitter}<a href="{text:Twitter url}"><i class="fab fa-twitter"></i></a>{/block:IfTwitter}
{block:IfInstagram}<a href="{text:Instagram url}"><i class="fab fa-instagram"></i></a>{/block:IfInstagram}
{block:IfFlickr}<a href="{text:Flickr url}"><i class="fab fa-flickr"></i></a>{/block:IfFlickr}
{block:IfDeviantart}<a href="{text:Deviantart url}"><i class="fab fa-deviantart"></i></a>{/block:IfDeviantart}
</div>
<!-- End social-links -->

<div id="tag-links">
{block:IfShowTagOne}<a href="{text:Tag One Url}">#{text:Tag One Title}</a>{/block:IfShowTagOne}
{block:IfShowTagTwo}<a href="{text:Tag Two Url}">#{text:Tag Two Title}</a>{/block:IfShowTagTwo}
{block:IfShowTagThree}<a href="{text:Tag Three Url}">#{text:Tag Three Title}</a>{/block:IfShowTagThree}
{block:IfShowTagFour}<a href="{text:Tag Four Url}">#{text:Tag Four Title}</a>{/block:IfShowTagFour}
{block:IfShowTagFive}<a href="{text:Tag Five Url}">#{text:Tag Five Title}</a>{/block:IfShowTagFive}
{block:IfShowTagSix}<a href="{text:Tag Six Url}">#{text:Tag Six Title}</a>{/block:IfShowTagSix}
</div>
<!-- End tag-links -->

</div>
<!-- End navigation-panel -->

<div class="close-navigation"><i class="fa fa-arrow-right"></i></div>

</div>
<!-- End navigation -->
{/block:IfShowNavigation}

</div>
<!-- End sidebar -->

<div id="containerin">

<!-- Posts -->
<section id="posts">

{block:posts}

<article class="entry {block:Caption}captioned{/block:Caption}">

{block:Date}

<div class="topinfo">

<div class="topinfourl">
{block:RebloggedFrom}
<a href="/"> {text:Blog alias}</a>
<i class="fas fa-retweet"></i>
<a href="{ReblogParentURL}" target="_blank"> {ReblogParentName}</a>
{/block:RebloggedFrom}

{block:NotReblog}
<a href="/">{text:Blog alias}</a>
{/block:NotReblog}
</div>
<!-- End topinfourl-->

<div class="topinfod"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}"> {ShortMonth} {DayOfMonthWithZero} </a></div>

</div>
<!-- End topinfo-->

{/block:Date}

<!-- Text post -->
{block:Text}
<div class="content">
{block:Title}
<div class="title">{Title}</div>{/block:Title}
{block:RebloggedFrom}
{block:Reblogs}
<li class="comment {block:Title}{/block:Title}">
<a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
<div class="tex">{body}</div>
</li>
{/block:Reblogs}
{/block:RebloggedFrom}
{block:NotReblog}
<li class="comment {block:Title}{/block:Title}">
<div class="tex">{Body}</div>
</li>
{/block:NotReblog}
</div>
<!-- End content -->
{/block:Text}

<!-- Photo post -->
{block:Photo}
{LinkOpenTag}
<img src="{photoURL-HighRes}" alt="{PhotoAlt}" width="{select:Post width}px"/></a>
{LinkCloseTag}
{/block:Photo}

<!-- Photoset post -->
{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}

<!-- Panorama post -->
{block:Panorama}
{LinkOpenTag}
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}
{/block:Panorama}

<!-- Quote post -->
{block:Quote}
<div class="content">
<div class="quote">
"{Quote}"
</div>
<!-- End quote-->
<div class="quote-source">
— {Source}
</div>
<!-- End source-->
</div>
<!-- End content -->
{/block:Quote}

<!-- Link post -->
{block:Link}
{block:Thumbnail}
<div class="linkthumb">
<img src="{Thumbnail}" alt="{Name}">
</div>
<!-- End linkthumb-->
{/block:Thumbnail}
<div class="linkp">
<a href="{URL}"><h2>{Name} <i class="fa fa-angle-right" aria-hidden="true"></i></h2></a>
{block:Description}
{Description}
{/block:Description}
</div>
<!-- End linkp-->
{/block:Link}

<!-- Chat post -->
{block:Chat}
<div class="content">
{block:Title}<h1>{Title}</h1>{/block:Title}
{block:Lines}
<div class="line">
{block:Label}<b>{Label}</b>{/block:Label} {Line}
</div>
<!-- End line-->
{/block:Lines}
</div>
<!-- End content -->
{/block:Chat}

<!-- Audio post -->
{block:Audio}
<div style="height:85px">{AudioEmbed-640}</div>
{/block:Audio}

<!-- Video post -->
{block:Video}
{Video-500}
{/block:Video}

<!-- Ask post -->
{block:Answer}
<div class="content">
<div class="asker">
<img src="{AskerPortraitURL-48}">
<div class="bubble">
<div class="triangle"></div>
{Asker}
<br> {Question}
</div>
<!-- End bubble-->
</div>
<!-- End asker -->
<div class="answer">
{Answer}
</div>
<!-- End answer -->
</div>
<!-- End content -->
{/block:Answer}

<!-- Caption -->
{block:Caption}
{block:Reblogs}
<li class="comment">
<a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} } class="user" target="_blank">{Username}</a>
<div class="tex">{Body}</div>
</li>
{/block:Reblogs}
{block:NotReblog}
<li class="comment">
<a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank">{Name}</a>
<div class="tex">{Caption}</div>
</li>
{/block:NotReblog}
{/block:Caption}

{block:Date}

<div class="botinfo">

{block:RebloggedFrom}
{block:ContentSource}
Source: <a href="{ReblogRootURL}" target="_blank"> {ReblogRootName}</a><br>
{/block:ContentSource}
{/block:RebloggedFrom}

{block:HasTags}
<div class="tags">
{block:Tags}
<a href="{TagURL}">
#{Tag}</a> &nbsp;
{/block:Tags}<br>
</div>
{/block:HasTags}

{block:NoteCount}
<a href="{Permalink}"> {NoteCountWithLabel}</a>
{/block:NoteCount}

<div class="buttons">

{block:IndexPage}
<li class="perma"><a href="{Permalink}"><i class="fa fa-paper-plane" aria-hidden="true"></i></a></li>

{block:ifDisqusShortname}
<li class="cmnt"><a href="{Permalink}#disqus_thread"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
{/block:ifDisqusShortname}
{/block:IndexPage}

<li class="reblog"><a href="{ReblogURL}"><i class="fa fa-retweet" aria-hidden="true"></i></a></li>

<li class="like">{LikeButton}<i class="fa fa-heart" aria-hidden="true"></i></a>

</div>
<!-- End buttons -->

</div>
<!-- End botinfo-->

<!--Permalink page-->
{block:PermalinkPage}

{block:PostNotes}

<div class="open-pnotes">Show/hide post notes</div>

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

{block:PermalinkPagination}
<div class="permapag">
<center>
{block:PreviousPost}
<a href="{PreviousPost}"><i class="fa fa-angle-double-left" aria-hidden="true"></i> Prev post</a>
{/block:PreviousPost}

{block:NextPost}
<a href="{NextPost}"> Next post <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
{/block:NextPost}
</center>
</div><br>
{/block:PermalinkPagination}

{block:ifDisqusShortname}
<div id="disqusbox">

<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '{text:Disqus Shortname}'; // Required - Enter shortname in Tumblr Theme Options
var disqus_url = '{Permalink}';

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + 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">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

</div>
<!-- End disqus box-->
{/block:ifDisqusShortname}

{/block:PermalinkPage}

{/block:Date}

</article>

{/block:Posts}

</section>

{block:Pagination}

<div id="pagcon">

<div id="pagination">
{block:PreviousPage}
<a class="previous" href="{PreviousPage}"><i class="fas fa-caret-left"></i></a>
{/block:PreviousPage}

{block:JumpPagination length="5"}
{block:CurrentPage}<a class="current_page"><i class="fas fa-times"></i></a>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}

{block:NextPage}
<a class="next" href="{NextPage}"><i class="fas fa-caret-right"></i></a>
{/block:NextPage}
</div>
<!--End pagination-->

<div id="iscon">
{block:ifLoadMore}

<a href="#" class="load-more"> LOAD MORE <i class="fas fa-caret-down"></i></a>
{/block:ifLoadMore}
</div>

</div>
<!--End pagcon-->

{/block:Pagination}

</div>
<!-- End containerin -->

</div>
<!-- End container -->

<!-- No via and source in captions -->

{block:ContentSource}
<!-- {SourceURL}
{block:SourceLogo}
<img src="{BlackLogoURL}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}
{SourceLink}
{/block:NoSourceLogo} -->
{/block:ContentSource}
{block:RebloggedFrom}
<!-- {ReblogParentName} -->
{/block:RebloggedFrom}

<!-------------------------------- SCRIPTS -------------------------------->

<!--Google fonts -->

<link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Open+Sans|Roboto|Bigshot+One|Montserrat" rel="stylesheet">

<!-- Font awesome -->

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

<script>
$(document).ready(function(){

$(".open-about").click(function(){
$("#about").fadeIn(10);
$("#icons").fadeOut(10);
$(".open-icons").removeClass( "rotate" );
});

$(".close-about").click(function(){
$("#about").fadeOut(10);
});

$(".open-icons").click(function(){
$(".open-icons").toggleClass( "rotate" );
$("#icons").toggle(10);
});

$(".icon5").click(function(){
$("#navigation").fadeIn(10);
});

$(".close-navigation").click(function(){
$("#navigation").fadeOut(10);
});

$(".open-pnotes").click(function(){
$("#notes").toggle(500);
});

});
</script>


<!-- PXU photoset & responsive photosets -->

<link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
<link href="//static.tumblr.com/wupwnyt/qWVoc4phj/resizing.css" rel="stylesheet" type="text/css"/>

{block:IndexPage}

<script src="https://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

{block:ifInfiniteScroll}<script src="//static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
{/block:ifInfiniteScroll}

{/block:IndexPage}

<script>
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '1px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
{block:IndexPage}
var $container = $('section');
$container.masonry({ itemSelector: 'article' });
$container.imagesLoaded(function(){
$container.masonry();
$container.find('article').animate({ opacity: 1, zIndex: 1 });
});
{block:ifInfiniteScroll}
$container.infinitescroll({
itemSelector: 'article',
navSelector: '.pagination',
nextSelector: '.next',
loadingImg: '',
loadingText: '<em></em>',
bufferPx: 2000
},
function( newElements ) {
var $newElems = $( newElements );
$newElems.find('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '1px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
},
function(){
$container.masonry();
});
$newElems.imagesLoaded(function(){
$container.masonry( 'appended', $newElems );
$newElems.animate({ opacity: 1, zIndex: 1 });
});
});
{/block:ifInfiniteScroll}
$container.infinitescroll({
itemSelector: "article",
navSelector: "#pagination",
nextSelector: ".next",
loadingImg: "",
loadingText: "<em></em>",
bufferPx: 10000,
extraScrollPx: 12000,
errorCallback: function() {
$('.load-more').fadeOut();
}
}, function(newElements) {
var $newElems = $(newElements).css({
opacity: 0
});
$newElems.imagesLoaded(function() {
$newElems.animate({
opacity: 1
});
$container.masonry('appended', $newElems,
true);
});
});
{block:ifLoadMore}
$(window).unbind('.infscr');
$('.load-more').click(function() {
$container.infinitescroll('retrieve');
return false
});
{/block:ifLoadMore}
{/block:IndexPage}
});
</script>

<!-- CREDIT (do not remove) -->

<div id="credit"><a href="http://borntobewildcodes.tumblr.com" title="theme CLEAN by @borntobewildcodes"><img src="https://i.imgur.com/YsnOAtA.png"></a></div>

{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height= "{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
</body>
</html>
52,315 chars, 4,303 words, 2,160 lines·Create new version