Theme: LIVING CORAL
<!----
©borntobewildcodes.tumblr.com | Living Coral (Created for PANTONE Colour of the Year 2019 Challenge)
+ 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
- Infinite Scroll and PXU Photosets tutorial by @shythemes
- Load more buttons tutorial by @shythemes
---->
<!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="1"/>
<meta name="image:Avatar" content="1"/>
<meta name="color:Background" content="#fefefe"/>
<meta name="color:Menu background" content="#fefefe"/>
<meta name="color:Main icons background" content="#fefefe"/>
<meta name="color:Main icon" content="#000000"/>
<meta name="color:Search box background" content="#fefefe" />
<meta name="color:Search box text" content="#000000"/>
<meta name="color:Sidebar background" content="#fefefe"/>
<meta name="color:Sidebar link" content="#eeeeee"/>
<meta name="color:Sidebar icon" content="#000000"/>
<meta name="color:Description" content="#fefefe"/>
<meta name="color:Triangle background" content="#FF6F61"/>
<meta name="color:Circles background" content="#000000"/>
<meta name="color:Post background" content="#fefefe"/>
<meta name="color:Post info background" content="#fefefe"/>
<meta name="color:Link post background" content="#F1F1F1"/>
<meta name="color:Ask bubble" content="#F1F1F1"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Link" content="#FF6F61"/>
<meta name="color:Hover" content="#548c84"/>
<meta name="color:Bold" content="#000000"/>
<meta name="color:Italic" content="#41b0bf"/>
<meta name="color:Buttons" content="#548c84"/>
<meta name="color:Borders" content="#000000"/>
<meta name="color:Pagination" content="#000000"/>
<meta name="color:Scrollbar" content="#FF6F61"/>
<meta name="color:Scrollbar background" content="#fefefe"/>
<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="30px" title="30px">
<meta name="select:Blog title font size" content="32px" title="32px">
<meta name="select:Blog title font size" content="35px" title="35px">
<meta name="select:Blog title font size" content="37px" title="37px">
<meta name="select:Blog title font size" content="40px" title="40px">
<meta name="select:Blog title font size" content="42px" title="42px">
<meta name="select:Post width" content="400" title="400px">
<meta name="select:Post width" content="500" title="500px">
<meta name="select:Post width" content="540" title="540px">
<meta name="if:Inverted Controls" content="0"/>
<meta name="if:Infinite Scroll" content="0"/>
<meta name="if:Load More" 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" content="Link one"/>
<meta name="text:Link One url" content="http://"/>
<meta name="text:Link Two" content="Link two"/>
<meta name="text:Link Two url" content="http://"/>
<meta name="text:Link Three" content="Link three"/>
<meta name="text:Link Three url" content="http://"/>
<meta name="text:Link Four" content="Link four"/>
<meta name="text:Link Four url" content="http://"/>
<meta name="text:Link Five" content="Link five"/>
<meta name="text:Link Five url" content="http://"/>
<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;
}
/* 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: 0px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 0px;
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: 0px;
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:0!important;
left:auto!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 {
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}
blockquote {
padding:.25em 0 .25em 15px;
margin:.5em 0;
border-left: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;
}
/* Fix */
iframe, img, embed, object, video {
max-width: 100%;
border: none;
}
input, textarea, select, a { outline: none; }
/* Headings */
h1, h2, h3, h4 {
margin:1.5em 0;
font-size:1.5em;
padding:0;
color:{color:Title};
font-weight:bold;
}
h1 {
font-size:{select:Title font size};
}
.entry h1:first-child, .entry h2:first-child, .entry h3:first-child, .entry h4:first-child {margin-top:0;}
/* Paragraph */
p { margin:5px 0px;}
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;
}
/* Bold and italic */
b, strong, b a, strong a {
font-weight:bold!important;
color: {color:Bold};
}
i, em {
color: {color:Italic};
}
/* 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: 0px;
}
/* Line break */
hr {
border:none;
box-shadow:0;
margin:2em auto;
width:75px;
border-top:1px solid {color:Borders};
}
/*-- CREDIT --*/
#credit {
position:fixed;
top:8px;
right:8px;
width:25px;
height:25px;
z-index: 100000;
}
#credit img{
border: 1px solid {color:Borders};
}
#credit img:hover{
border: 1px solid {color:Hover};
}
#big-triangle {
position:fixed;
top:0;
left:0;
width: 0;
height: 0;
border-style: solid;
border-width: 100vh 0 0 100vw;
border-color: transparent transparent transparent {color:Triangle background};
z-index:1;
}
/* ------------------------------- SIDEBAR ------------------------------- */
#open-sidebar {
display:none;
position:fixed;
top:9px;
left:9px;
width:40px;
height:40px;
line-height:40px;
text-align:center;
z-index:10000;
color:{color:Circles};
font-size:15px;
border:1px solid {color:Borders};
cursor:pointer;
}
#open-sidebar:hover {
color:{color:Hover};
}
#side-panel {
position:fixed;
top:0;
left:0;
width:400px;
height:100vh;
z-index:100000;
}
#sidebar {
position:absolute;
top:50%;
left:50px;
width:300px;
max-width:300px;
height:572px;
max-height:100vh;
overflow:hidden;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}
/* Circles */
#circles {
position:absolute;
margin:0;
width:100px;
height:100px;
z-index:100;
}
.circle {
display:inline-block;
margin-bottom:6px;
margin-right:6px;
width:10px;
height:10px;
border-radius:100%;
background:{color:Circles background};
}
/* Blog title */
#blog-title {
position:absolute;
bottom:0;
width:65px;
height:235px;
color:{color:Blog title};
font-family:{select:Title Font};
font-size:{select:Blog title font size};
letter-spacing:1px;
z-index:100;
}
.bt {
position:absolute;
top:50%;
left:50%;
width:239px;
height:65px;
line-height:25px;
overflow:hidden;
transform:translateX(-50%) translateY(-50%) rotate(270deg);
}
/* Description */
#description {
position:absolute;
margin-top:0;
margin-left:237px;
width:60px;
height:calc(100% - 65px);
color:{color:Description};
z-index:100;
overflow:hidden;
}
.desc {
position: absolute;
top:50%;
left:50%;
padding:5px;
width:490px;
height:58px;
font-size:13px;
line-height:20px;
overflow:hidden;
overflow-y:auto;
transform:translateX(-50%) translateY(-50%) rotate(270deg);
}
/* Avatar */
#avatar {
margin-top:36px;
margin-left:35px;
width:160px;
height:190px;
-webkit-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.2);
box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.2);
z-index:1;
}
#avatar img{
width:100%;
height:100%;
}
/* Main icons */
#main-icons {
margin-top:40px;
left:20px;
width:204px;
height:45px;
padding:0 5px;
text-align:center;
border:1px solid {color:Borders};
}
#main-icons a {
display:inline-block;
margin:0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#main-icons i {
margin:0;
margin-top:-1px;
width:45px;
height:45px;
line-height:45px;
text-align:center;
font-size:12px;
color:{color:Main icon};
border-top:1px solid transparent;
border-bottom:1px solid transparent;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#main-icons i:hover {
color:{color:Hover};
border-top:1px solid {color:Hover};
border-bottom:1px solid {color:Hover};
}
/* Navigation */
#navigation {
margin-top:10px;
margin-left:0;
width:136px;
height:205px;
padding-left:80px;
overflow:hidden;
}
#navigation a {
display:block;
margin-top:10px;
font-size:15px;
line-height:25px;
letter-spacing:1px;
color:{color:Sidebar link};
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#navigation a:hover{
color:{color:Hover};
}
#navigation span {
margin-right:10px;
color:{color:Sidebar icon};
}
#navigation a:hover span {
color:{color:Hover};
}
#navigation a:after {
content:'';
margin:1px 0;
display:block;
width:0px;
height:0px;
border-bottom:1px solid {color:Hover};
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#navigation a:hover::after {
width:100%;
}
/* Search box */
#search {
margin-top:0px;
margin-left:80px;
width:204px;
height:30px;
padding:5px;
text-align:center;
border:1px solid {color:Borders};
}
/* Search icon */
#search i {
position:absolute;
width:30px;
margin-left:-15px;
margin-top:10px;
z-index:1000;
color:{color:Search box text};
}
/* Close sidebar */
#close-sidebar {
display:none;
position:fixed;
top:9px;
left:349px;
width:40px;
height:40px;
line-height:40px;
text-align:center;
color:{color:Circles};
font-size:15px;
border:1px solid {color:Borders};
cursor:pointer;
}
#close-sidebar:hover {
color:{color:Hover};
}
/*------------------------------- CONTAINER -----------------------------*/
#container {
position:relative;
margin-top:0px;
margin-left:400px;
width:calc(100vw - 400px);
margin-bottom:10px;
z-index:10!important;
}
/* ---------- POSTS AND ENTRIES ---------- */
#posts {
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:calc({select:Post width}px + 40px)!important;
overflow:hidden;
}
.entry {
display:inline-block;
float: left;
margin:40px 18px;
width:{select:Post width}px;
height:auto;
background:{color:Post background};
overflow:hidden;
border:1px solid {color:Borders};
-webkit-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.2);
box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.2);
}
.entry img { max-width: 100%; }
.content {
padding: 10px;
}
/*--------------------------- RESPONSIVE DESIGN ---------------------------*/
@media only screen and (max-width: 700px) {
#open-sidebar {
display:block;
}
#close-sidebar {
display:block;
}
#side-panel {
display:none;
background:{color:Triangle background};
}
#container {
margin-left:0;
width:100vw;
}
::-webkit-scrollbar {
width: 9px;
height: 0px;
}
#side-panel ::-webkit-scrollbar-button:start:decrement,
#side-panel ::-webkit-scrollbar-button:end:increment {
height: 0px;
display: block;
background:{color:Triangle background};
border-bottom-right-radius:30px;
}
#side-panel ::-webkit-scrollbar-track-piece {
background:{color:Triangle background};
}
#side-panel ::-webkit-scrollbar-thumb:vertical {
height: 0px;
background-color:{color:Scrollbar};
border: 4px solid {color:Triangle background};
}
}
/* End media screen 700 */
@media only screen and (max-width: 414px) {
.entry {
display: inline-block;
float: left;
margin: 18px;
width:calc(100% - 36px)!important;
height:auto;
background:{color:Post background};
overflow: hidden;
}
}
/* End media screen 414 */
/* Caption */
.comment {
padding:0px 10px;
list-style:none;
}
.comment:last-of-type { padding-bottom:0!important;}
.user {
display:inline-block;
line-height:1em;
margin-bottom:.75em;
}
.captioned .comment:first-of-type { margin-top:2em;}
/* -------- 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:150%;
}
.title a { color:{color:Title}; }
.title a:hover { color:{color:L ink}; }
.tex li, .tex blockquote {text-align:left; }
/* 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;
}
.source {
font-size: 12px;
line-height: 20px;
}
/* Link posts */
.linkthumb img {
width:100%;
}
.linkp {
background: {color:Link post background};
padding:10px;
}
.linkp i {
color: {color:Title};
}
/* Chat posts */
.line {
margin: 5px 15px;
line-height: 18px;
}
/* Ask Posts */
.asker {
margin: 5px;
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: 0px;
max-width: 30px;
border: 1.5px solid {color:Ask bubble};
border-radius: 2px;
z-index:1000;
opacity:1;
}
.answer {
margin: 10px 15px;
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:Link};
}
.tags {
{block:IndexPage}
{block:ifNotShowTags}
display: none;
{/block:ifNotShowTags}
{/block:IndexPage}
}
.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 i {
font-size:13px;
color:{color:Buttons};
}
.cmnt i {
font-size:15px;
color:{color:Buttons};
}
.reblog i {
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 i {
font-size:15px;
color:{color:Buttons};
}
.like .liked + i {
font-size:14px;
color:#D95E40;
}
/* Permalink pagination */
.permapag {
margin-top: 15px;
margin-left: 0px;
}
.permapag a {
font-size: 15px;
margin:10px;
margin-top: 20px;
padding:5px;
color:{color:Link};
}
/* Show/hide */
.clickme {
margin: 10px;
width: 130px;
color:{color:Link};
text-align: left;
cursor: pointer;
padding: 5px 10px;
}
.clickme:hover {
color:{color:Hover};
background:{color:Post info background};
}
/* Post notes */
#notes {
margin: 10px;
width: 500px;
font-size: 12px;
color: {color:Text};
display:none;
}
ol.notes {
padding: 0px;
margin: 5px 0px;
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: 12px;
}
/* Disqus box */
#disqusbox {
padding:15px;
}
/* ------------------- PAGINATION AND INFINITE SCROLL -------------------- */
#pagcon {
margin:25px auto;
width:calc({select:Post width}px + 40px)!important;
height:60px;
text-align: center;
z-index:100;
}
/* Pagination */
#pagination {
width: 100%;
height: 35px;
z-index:10000;
{block:ifInfiniteScroll}
display: none;
{/block:ifInfiniteScroll}
}
.previous, .next, .load-more{
display:inline;
margin-left:10px;
width:100px;
height:20px;
padding:8px 10px;
line-height:20px;
font-size:12px;
text-align:center;
color:{color:Pagination};
border:1px solid {color:Borders};
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.previous a:hover, .next a:hover, .load-more a:hover{
color:{color:Pagination};
}
.previous i, .next i, .load-more i{
color:{color:Pagination};
font-size:15px;
margin-left:10px;
text-decoration:none;
}
.previous:hover i, .next:hover i, .load-more:hover i{
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;
}
{/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="big-triangle"></div>
<div id="open-sidebar"><i class="fas fa-align-justify"></i></div>
<div id="side-panel">
<div id="close-sidebar"><i class="fas fa-times"></i></div>
<div id="sidebar" data-aos="fade-up" data-aos-once="true">
<div id="circles">
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span><br>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span><br>
<span class="circle"></span>
<span class="circle"></span><br>
<span class="circle"></span>
<span class="circle"></span><br>
<span class="circle"></span>
<span class="circle"></span>
</div>
<!-- End circles -->
<div id="blog-title">
<div class="bt">
{title}
</div>
<!-- End bt -->
</div>
<!-- End blog-title -->
<div id="description">
<div class="desc">
{Description}
</div>
<!-- End desc -->
</div>
<!-- End description -->
<div id="avatar"><img src="{image:Avatar}"></div>
<div id="main-icons">
<a href="/" title="Index"><i class="fas fa-home"></i></a>
{block:ifAskEnabled}
<a href="/ask" title="Ask"><i class="far fa-envelope-open"></i></a>
{/block:ifAskEnabled}
{block:ifSubmissionsEnabled}
<a href="/submit" title="Submit"><i class="far fa-edit"></i></a>
{/block:ifSubmissionsEnabled}
{block:ifShowArchiveLink}
<a href="/archive" title="Archive"><i class="fas fa-history"></i></a>
{/block:ifShowArchiveLink}
</div>
<!-- End main-icons -->
<div id="navigation">
{block:IfShowLinkOne}
<a href="{text:Link One url}"><span> 01 </span>{text:Link One}</span></a>
{/block:IfShowLinkOne}
{block:IfShowLinkTwo}
<a href="{text:Link Two url}"><span> 02 </span>{text:Link Two}</span></a>
{/block:IfShowLinkTwo}
{block:IfShowLinkThree}
<a href="{text:Link Three url}"><span> 03 </span>{text:Link Three}</span></a>
{/block:IfShowLinkThree}
{block:IfShowLinkFour}
<a href="{text:Link Four url}"><span> 04 </span>{text:Link Four}</span></a>
{/block:IfShowLinkFour}
{block:IfShowLinkFive}
<a href="{text:Link Five url}"><span> 05 </span>{text:Link Five}</span></a>
{/block:IfShowLinkFive}
</div>
<!-- End navigation -->
<div id="search">
<form action="/search" method="get">
<input type="text" name="q" value="Search..." style="float:left; margin-top:0; margin-left:5px; width:165px; height:25px; border:1px solid transparent; background:transparent; color:{color:Search box text}; font-size:15px; letter-spacing:1px;"/><span><i class="fa fa-search"></i></span></form>
</div>
<!-- End search -->
</div>
<!-- End sidebar -->
</div>
<!-- End side-panel-->
<div id="container">
<!-- Posts -->
<section id="posts">
{block:posts}
<article class="entry {block:Caption}captioned{/block:Caption}" data-aos="fade-up" data-aos-once="true">
{block:Date}
<div class="topinfo">
<div class="topinfourl">
{block:RebloggedFrom}
<a href="/"> {text:Blog alias}</a>
<i class="fa fa-retweet" aria-hidden="true"></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}
{block:IndexPage}
{LinkOpenTag}
<img src="{photoURL-HighRes}" alt="{PhotoAlt}" width="{select:Post width}px"/></a>
{LinkCloseTag}
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}
<img src="{photoURL-HighRes}" alt="{PhotoAlt}" width="{select:Post width}px"/></a>
{LinkCloseTag}
{/block:PermalinkPage}
{/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}
<!-- Quote post -->
{block:Quote}
<div class="content">
<div class="quote">
"{Quote}"
</div>
<!-- End quote-->
<div class="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}"><h1>{Name} <i class="fa fa-angle-right" aria-hidden="true"></i></h1></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>
{/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="clickme">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-caret-left" aria-hidden="true"></i> Prev post</a>
{/block:PreviousPost}
{block:NextPost}
<a href="{NextPost}"> Next post <i class="fa fa-caret-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="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://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="fa fa-caret-left" aria-hidden="true"></i> NEWER </a>
{/block:PreviousPage}
{block:NextPage}
<a class="next" href="{NextPage}"> OLDER <i class="fa fa-caret-right" aria-hidden="true"></i></a>
{/block:NextPage}
</div>
<!-- End pagination -->
<div id="iscon">
{block:ifLoadMore}
<center>
<a href="#" class="load-more"> LOAD MORE <i class="fa fa-caret-down" aria-hidden="true"></i></a>
</center>
{/block:ifLoadMore}
</div>
<!-- End iscon -->
</div>
<!-- End pagcon -->
{/block:Pagination}
</div>
<!-- End container -->
<!-------------------------------- SCRIPTS -------------------------------->
<!--Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Open+Sans|Roboto|Playfair+Display|Montserrat" rel="stylesheet">
<!-- Font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script type="text/javascript">
$(document).ready(function(){
$("#open-sidebar").click(function(){
$('#side-panel').fadeToggle('slow')
});
$("#close-sidebar").click(function(){
$('#side-panel').fadeToggle('slow')
});
});
</script>
{/block:IndexPage}
<!-- 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>
<!-- Show/Hide tumblr notes -->
<script>
$(document).ready(function(){
$(".clickme").click(function(){
$("#notes").toggle(500);
});
});
</script>
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script type="text/javascript">
AOS.init({
duration: 500,
})
</script>
<!-- CREDIT (do not remove) -->
<div id="credit"><a href="https://borntobewildcodes.tumblr.com" title="theme LIVING CORAL 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> Pasted: Feb 1, 2019, 12:51:11 pm
Views: 411