Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</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 charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!---
- constellation theme by SAGE / https://demontimes.tumblr.com
- credits:
- - base code by seyche / https://seyche.tumblr.com
- - phosphor icons / phosphoricons.com
- - pxu photosets by pixel union with modifications by bychloethemes / https://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
- - npf images fix by glenthemes / https://glenthemes.tumblr.com/post/659034084446748672/npf-images-v3
- - time ago plugin by chloethemes / https://bychloethemes.tumblr.com/plugins/timeago
- - notes shortener by shythemes / https://shythemes.tumblr.com/post/156021137818/hello-i-was-wondering-if-you-knew-how-to-shorten
- - tippy.js tooltips / https://atomiks.github.io/tippyjs/
- - google fonts / https://fonts.google.com/
- --->
- <!----- VARIABLES AND OPTIONS ----->
- <meta name="image:Sidebar" content=""/>
- <meta name="color:Background" content="#001328"/>
- <meta name="color:Posts" content="#112039"/>
- <meta name="color:Text Shadow" content="#0038b0"/>
- <meta name="color:Box Shadow" content="#001623"/>
- <meta name="color:Title" content="#cedeff"/>
- <meta name="color:Text" content="#9aabc6"/>
- <meta name="color:Link" content="#94bfff"/>
- <meta name="color:Accent" content="#5aa2ff"/>
- <meta name="color:Borders" content="#283f5d"/>
- <meta name="select:Border Radius" content="0px" title="0px"/>
- <meta name="select:Border Radius" content="5px" title="5px"/>
- <meta name="select:Border Radius" content="10px" title="10px"/>
- <meta name="text:Title Font Size" content="18"/>
- <meta name="text:Post Margin" content="100"/>
- <meta name="text:Google Font" content="Karla"/>
- <meta name="text:Font Size" content="15"/>
- <meta name="text:Custom Description" content="custom description"/>
- <meta name="text:Like Color Code" content="004fb6"/>
- <meta name="if:side image circle" content="1"/>
- <meta name="if:hover tags" content="1"/>
- <meta name="if:top info" content="1"/>
- <meta name="if:glow" content="1"/>
- <meta name="text:Home Link" content="home"/>
- <meta name="text:Ask Link" content="ask"/>
- <meta name="text:Archive Link" content="archive"/>
- <meta name="text:Link 1 URL" content="/"/>
- <meta name="text:Link 1" content="link 1 name"/>
- <meta name="text:Link 1 icon" content="moon"/>
- <meta name="text:Link 2 URL" content="/"/>
- <meta name="text:Link 2" content="link 2 name"/>
- <meta name="text:Link 2 icon" content="sparkle"/>
- <meta name="text:Link 3 URL" content="/"/>
- <meta name="text:Link 3" content="link 3 name"/>
- <meta name="text:Link 3 icon" content="planet"/>
- <meta name="text:Link 4 URL" content="/"/>
- <meta name="text:Link 4" content="link 4 name"/>
- <meta name="text:Link 4 icon" content="star"/>
- <!---- PHOTOSET ---->
- <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
- <!--
- NPF images fix v3.0 by @glenthemes [2021]
- 💌 git.io/JRBt7
- --->
- <script src="//npf-images-v3.github.io/script.js"></script>
- <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
- <style tmblr-npf>
- :root {
- --NPF-Caption-Spacing:1em;
- --NPF-Image-Spacing:4px;
- }
- </style>
- <!----- GOOGLE FONTS ---->
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family={text:google font}:wght@400;700&display=swap" rel="stylesheet">
- <!---- ICONS ---->
- <script src="https://unpkg.com/phosphor-icons"></script>
- <script src="https://unpkg.com/[email protected]"></script>
- <!---- TOOLTIPS ---->
- <script src="https://unpkg.com/popper.js@1"></script>
- <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
- <!---- TIME AGO ----->
- <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".time-ago").timeAgo({
- time: "short",
- spaces: true,
- words: false,
- prefix: "",
- suffix: "ago",
- });
- });
- </script>
- <!----- CSS ----->
- <style type="text/css">
- /*----- TOOLTIPS -----*/
- .tippy-tooltip.custom-theme {
- background-color: {color:posts};
- color: {color:title};
- {block:ifglow}
- text-shadow:0 0 10px;
- {/block:ifglow}
- text-align: center;
- text-transform: uppercase;
- letter-spacing: 0.2em;
- font-size: 0.8em;
- border-radius:10px;
- box-shadow:1px 1px 5px 1px {color:box shadow};
- margin: 5px 0;
- }
- /*---- SCROLLBAR ----- */
- ::-webkit-scrollbar {
- width: 8px;
- height: 8px;
- background-color: {color:background};
- }
- ::-webkit-scrollbar-track {
- background-color: {color:background};
- border-radius: 5px;}
- ::-webkit-scrollbar-thumb {
- background:{color:accent};
- min-height: 35px;
- min-width: 35px;
- border-radius: 5px;
- }
- /*----- BASIC STYLING -----*/
- body {
- font-family: '{text:google font}', sans-serif;
- font-size: {text:font size}px;
- color: {color:text};
- background-color: {color:background};
- line-height: 160%;
- word-wrap: break-word;
- letter-spacing: 0.04em;
- margin: 0;
- padding: 0;
- }
- a {
- color: {color:link};
- text-decoration: none;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- a:hover {
- color: {color:accent};
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- #hua {
- display: inline-block;
- position: relative;
- }
- #hua:after {
- content: '';
- position: absolute;
- width: 100%;
- transform: scaleX(0);
- height: 2px;
- bottom: 0;
- left: 0;
- background-color: {color:link};
- transform-origin: bottom right;
- transition: transform 0.25s ease-out;
- }
- #hua:hover:after {
- transform: scaleX(1);
- transform-origin: bottom left;
- }
- blockquote {
- padding: 0 0 0 1.5em;
- border-left: 1px solid {color:borders};
- margin: 1.5em 0 1.5em 1.5em;
- }
- ul {list-style-type:circle;}
- ol {list-style-type: decimal-leading-zero;}
- li::marker {color:{color:accent}}
- h1, h2, h3, h4, h5 {
- letter-spacing: 0.06em;
- line-height: 145%;
- font-weight: bold;
- text-shadow:1px 1px 2px {color:text shadow};
- }
- h1 {font-size: 1.45em;}
- h2 {font-size: 1.3em;}
- h3 {font-size: 1.25em;}
- h4 {font-size: 1.1em;}
- h5 {font-size: 1em;}
- small {font-size: 0.9em;}
- big {font-size: 1.1em;}
- hr {
- height: 1px;
- border: none;
- box-shadow: none;
- background-color: {color:borders};
- }
- pre {
- line-height: inherit;
- font-size: inherit;
- white-space: pre-wrap;
- white-space: -moz-pre-wrap;
- white-space: -pre-wrap;
- white-space: -o-pre-wrap;
- word-wrap: break-word;
- }
- b, strong {
- color:{color:title};
- font-weight:800;
- }
- b a:hover {
- color:{color:accent};
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- .tmblr-iframe-compact .tmblr-iframe--unified-controls {
- z-index: 999999999!important;
- opacity:0;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
- opacity:1;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- /*----- SIDEBAR -----*/
- #sidebar {
- width: 350px;
- position: fixed;
- top: {text:post margin}px;
- text-align: center;
- }
- #side-wrap {
- width: 350px;
- display:flex;
- justify-content:center;
- flex-wrap:wrap;
- }
- {block:ifSidebarImage}
- #side-img {
- margin-bottom: 1em;
- margin-top:.5em;
- border-radius:{select:border radius};
- padding:2px;
- background:{color:accent};
- {block:ifglow}
- box-shadow:0 0 10px {color:accent};
- {/block:ifglow}
- width:300px;
- {block:ifsideimagecircle}
- height:300px;
- border-radius:100%;
- object-fit:cover;
- {/block:ifsideimagecircle}
- }
- {/block:ifSidebarImage}
- #top-wrap {
- text-shadow:1px 1px 2px {color:text shadow};
- border-radius:{select:border radius};
- display:flex;
- justify-content:space-evenly;
- align-items:center;
- flex-wrap:nowrap;
- margin-bottom:1em;
- padding-left:1em;
- padding-right:1em;
- }
- #top-wrap .title {
- width:240px;
- text-align:right;
- }
- #top-wrap .title a {
- color:{color:title};
- font-size:{text:title font size}px;
- {block:ifglow}
- text-shadow:0 0 10px;
- {/block:ifglow}
- }
- #top-wrap .title a:hover {color:{color:accent};}
- #top-wrap .title li {
- display:block;
- margin-left:.5em;
- font-weight:normal;
- font-size:.9em;
- }
- #top-wrap .title li b {
- font-size:1.5em;
- font-weight:800;
- color:{color:title};
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- #top-wrap .navicon {
- width:60px;
- }
- #top-wrap .navicon img {
- width:55px;
- height:55px;
- border-radius:100%;
- padding:2px;
- background:{color:title};
- {block:ifglow}
- box-shadow:0 0 10px {color:title};
- {/block:ifglow}
- }
- #bottom-wrap {
- display:flex;
- justify-content:space-evenly;
- align-items:center;
- margin-top:1em;
- padding-left:1em;
- padding-right:1em;
- }
- #description {
- width:200px;
- text-align:left;
- text-shadow:1px 1px 2px {color:text shadow};
- }
- #description a {
- display: inline-block;
- position: relative;
- border-bottom:2px solid {color:borders};
- }
- #description a:after {
- content: '';
- position: absolute;
- width: 100%;
- transform: scaleX(0);
- height: 2px;
- bottom: -2px;
- left: 0;
- background:{color:link};
- transform-origin: bottom right;
- transition: transform 0.25s ease-out;
- }
- #description a:hover:after {
- transform: scaleX(1);
- transform-origin: bottom left;
- }
- nav {
- position: relative;
- width: 30px;
- height: 30px;
- padding:2em;
- border-radius: 50%;
- margin-left:.5em;
- }
- nav a {
- display: block;
- position: absolute;
- top: 50%; left: 50%;
- width: 1em; height: 1em;
- margin: -2em;
- {block:ifglow}
- text-shadow:0 0 10px;
- {/block:ifglow}
- }
- nav i {
- font-size:1.4em;
- color:{color:title};
- }
- nav i:hover {color:{color:accent};}
- .deg1 { transform: rotate(-10deg) translate(3.7em) rotate(10deg); }
- .deg2 { transform: rotate(22deg) translate(4.6em) rotate(-22deg); }
- .deg3 { transform: rotate(55deg) translate(4.8em) rotate(-55deg); }
- .deg4 { transform: rotate(93deg) translate(3.9em) rotate(-93deg); }
- .deg5 { transform: rotate(132deg) translate(2.6em) rotate(-132deg); }
- .deg6 { transform: rotate(205deg) translate(1.3em) rotate(-205deg); }
- .deg7 { transform: rotate(302deg) translate(2.1em) rotate(-302deg); }
- /*------ TAG & DAY PAGES -----*/
- .tdpage {text-shadow:1px 1px 2px {color:text shadow};}
- /*----- POSTS -----*/
- main {
- position: relative;
- width: calc(250px + 540px + 150px);
- margin: auto;
- }
- section {
- position: relative;
- width: 540px;
- margin-left: 425px;
- }
- article {
- width: 100%;
- position: relative;
- margin: {text:post margin}px auto;
- }
- .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
- /*----- CAPTIONS -----*/
- .caption {
- margin-top: 1em;
- list-style-type: none;
- border-radius:{select:border radius};
- background:{color:posts};
- box-shadow:1px 1px 5px 1px {color:box shadow};
- padding:1em;
- }
- .caption a {
- display: inline-block;
- position: relative;
- border-bottom:2px solid {color:borders};
- }
- .caption a:hover {border-bottom:2px solid {color:link};}
- .text-caption:first-of-type {margin-top: 0;}
- a.read_more {
- text-transform: uppercase;
- letter-spacing: 1px;
- font-weight: bold;
- color: {color:title};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a.read_more:hover {
- color: {color:accent};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .user-icon, .ask-icon {
- display: inline-block;
- vertical-align: middle;
- width: 2em;
- height: 2em;
- border-radius:100%;
- margin-right: 1em;
- border:2px solid {color:accent};
- padding:2px;
- }
- .username {
- display: inline-block;
- vertical-align: middle;
- font-weight: bold;
- }
- .username a {
- display: inline-block;
- position: relative;
- color:{color:title};
- border-bottom:2px solid transparent;
- }
- .username a:hover {color:{color:accent};}
- .username a:after {
- content: '';
- position: absolute;
- width: 100%;
- transform: scaleX(0);
- height: 2px;
- bottom: -2px;
- left: 0;
- background:{color:title};
- transform-origin: bottom right;
- transition: transform 0.25s ease-out;
- }
- .username a:hover:after {
- transform: scaleX(1);
- transform-origin: bottom left;
- }
- .deactive::after {
- content: '(deactivated)';
- margin-left: 1em;
- opacity: 0.75;
- color: {color:text};
- }
- p.tmblr-attribution {margin-top: 1em !important;}
- /*----- TEXT -----*/
- h1.post-title {margin-top: 0;}
- /*----- LINK -----*/
- a.link-wrap {
- display: block;
- border-radius:{select:border radius};
- background:{color:posts};
- box-shadow:1px 1px 5px 1px {color:box shadow};
- }
- .link {
- padding: 2em;
- }
- .link .title {font-weight:bold;}
- .link-host {color:{color:title};}
- .link-txt {color:{color:text};}
- .link-host, .link-txt {margin-top: 1em;}
- .npf-link-block {
- margin-top: 1.5em;
- background-color: inherit;
- border: 1px solid inherit;
- color: inherit;
- }
- /*----- PHOTO -----*/
- img {
- margin: 0;
- display: block;
- height: auto;
- max-width: 100%;
- }
- .photo img {width: 100%;}
- .vignette, #vignette {opacity: 0;}
- .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
- .lightbox-image, #tumblr_lightbox img {
- box-shadow: none !important;
- border-radius: 0 !important;
- max-width: none;
- }
- #tumblr_lightbox_caption, .lightbox-caption {
- color: #fff !important;
- font-family: inherit;
- margin-top: 1em !important;
- }
- /*----- PHOTOSET -----*/
- .post-content div.npf_row, .post div.npf_row, body div.npf_row {
- margin-left: 0 !important;
- margin-right: 0 !important;
- }
- /*----- QUOTE -----*/
- .quote {
- line-height: 160%;
- font-size: 1.25em;
- color:{color:title};
- border-radius:{select:border radius};
- background:{color:posts};
- box-shadow:1px 1px 5px 1px {color:box shadow};
- padding:1em;
- }
- .quote:before {content:'"'; font-size:1.3em; font-weight:bold;margin-right:.2em;}
- .quote:after {content:'"'; font-size:1.3em; font-weight:bold;margin-left:.2em;}
- .quote p:first-of-type {margin-top: 0;}
- .quote p:last-of-type {margin-bottom: 0;}
- .source {
- margin-top: 1.5em;
- margin-left:1.5em;
- text-shadow:1px 1px 2px {color:text shadow};
- font-weight:bold;
- text-align:center;
- }
- .source:before {content:"—"; margin-right:.5em;}
- /*----- CHAT -----*/
- .chat {padding: 0; margin: 0;}
- .chat li {list-style-type: none; margin-top:.5em;}
- .chat li:first-of-type {margin-top: 0;}
- .chatter {font-weight: bold; color:{color:title};}
- .chat li:nth-child(odd) {
- color:{color:background};
- background:{color:accent};
- padding:1em;
- border-radius:0 {select:border radius} {select:border radius} {select:border radius};
- }
- .chat li:nth-child(odd) .chatter {color:{color:background};}
- .chat li:nth-child(even) {
- color:{color:text};
- text-align:right;
- background:{color:posts};
- padding:1em;
- border-radius:{select:border radius} {select:border radius} 0 {select:border radius};
- }
- p.npf_chat, p.npf_chat b {font-family: inherit;}
- /*----- ANSWER -----*/
- .ask-wrap {
- padding: 1.5em;
- color:{color:background};
- border-radius:0 {select:border radius} {select:border radius} {select:border radius};
- background:{color:accent};
- }
- .ask-icon {border:2px solid {color:title};}
- .ask-wrap .asking {
- display: inline-block;
- margin-left: .5em;
- }
- .asking b {
- font-weight:bold;
- color:{color:background};
- text-transform:lowercase;
- }
- .asking a {
- font-weight:bold;
- color:{color:background};
- border-bottom:2px solid {color:borders};
- }
- .asking a:hover {
- color:{color:borders};
- border-bottom:2px solid {color:background};
- }
- .question {
- margin-top: 1em;
- }
- .question p:first-of-type {margin-top: 0;}
- .question p:last-of-type {margin-bottom: 0;}
- /*----- AUDIO -----*/
- .audiopost {
- padding: 2em;
- color:{color:background};
- background:{color:accent};
- box-shadow:1px 1px 5px 1px {color:box shadow};
- border-radius:{select:border radius};
- }
- .album-art {
- z-index: 1;
- display: inline-block;
- vertical-align: middle;
- float: right;
- width: 100px;
- height: 100px;
- border-radius:{select:border radius};
- }
- .audio-player-wrap {
- width: 100px;
- height: 100px;
- display: inline-block;
- }
- .button {
- width: 30px;
- height: 30px;
- overflow: hidden;
- position: relative;
- z-index: 2;
- margin: 7px;
- }
- .audiobox {
- background-color: #f2f2f2;
- z-index: 3;
- position: absolute;
- margin: 28px 0 0 28px;
- border-radius: 50%;
- }
- .audioinfo {
- display: inline-block;
- height: 100px;
- max-width: calc(100% - 100px);
- margin-left: 100px;
- display: flex;
- justify-content: center;
- flex-direction: column;
- box-sizing: border-box;
- padding-left: 2em;
- }
- .audioinfo li {
- list-style-type: none;
- }
- .audioinfo li b {
- color:{color:background};
- }
- .track {
- font-weight: bold;
- }
- /*----- INFO -----*/
- .topinfo {
- position:relative;
- margin-top:{text:post margin}px;
- margin-bottom:calc(-{text:post margin}px + 20px);
- text-shadow:1px 1px 2px {color:text shadow};
- text-align:center;
- }
- .topinfo .user-icon {
- width: 1.5em;
- height: 1.5em;
- margin-right:.5em;
- padding:2px;
- }
- .topinfo a {
- display:inline-block;
- vertical-align:middle;
- margin-top:.2em;
- font-weight:bold;
- font-size:.9em;
- }
- .topinfo i {
- font-size:1em;
- display:inline-block;
- vertical-align:bottom;
- margin:0 .5em 0 .5em;
- color:{color:accent};
- {block:ifglow}
- text-shadow:0 0 10px;
- {/block:ifglow}
- }
- .info {
- padding-top:1em;
- text-shadow:1px 1px 2px {color:text shadow};
- }
- .info a {
- display: inline-block;
- vertical-align: top;
- margin-top:.2em;
- text-transform:lowercase;
- }
- .info a b {
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .info a b:hover {
- color:{color:accent};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .info i {
- color:{color:title};
- font-size:1.3em;
- padding:5px;
- {block:ifglow}
- text-shadow: 0 0 10px;
- {/block:ifglow}
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .info-right {float:right;}
- .likeb {
- position: relative;
- display: inline-block;
- }
- .likeb .like_button iframe {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- z-index: 2;
- opacity: 0;
- }
- .like_button iframe {width: 100% !important; height: 100% !important;}
- .likeb .liked + .actual-button {color: #{text:like color code};}
- .likeb .liked + .actual-button:after {content: 'd';}
- .info a, .tags a {margin-right: 1.25em;}
- {block:ifhovertags}
- .tags {
- max-height:0;
- opacity:0;
- -webkit-transition: all 0.7s ease;
- transition: all 0.7s ease;
- -moz-transition: all 0.7s ease;
- -o-transition: all 0.7s ease;
- }
- {/block:ifhovertags}
- .tags {margin-top:.5em;}
- .tags i {
- font-size:1.3em;
- color:{color:title};
- padding:5px;
- {block:ifglow}
- text-shadow:0 0 10px;
- {/block:ifglow}
- }
- .tags a {
- display:inline-block;
- vertical-align:top;
- margin-top:.2em;
- margin-bottom:1em;
- font-size:.9em;
- color:{color:link};
- text-shadow:1px 1px 2px {color:text shadow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .tags a:hover {
- color:{color:accent};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- {block:ifhovertags}
- .posts:hover .tags {
- opacity:1;
- max-height:500px;
- -webkit-transition: all 0.7s ease;
- transition: all 0.7s ease;
- -moz-transition: all 0.7s ease;
- -o-transition: all 0.7s ease;}
- }
- {block:ifhovertags}
- /*---- PERMALINK PAGE ----*/
- .perma-page {
- margin:1em 0 1em 0;
- }
- .perma-page #info {
- display:block;
- margin:.5em 0 .5em 0;
- text-shadow:1px 1px 2px {color:text shadow};
- }
- .perma-page #info i {
- color:{color:title};
- font-size:1.3em;
- padding:5px;
- {block:ifglow}
- text-shadow:0 0 10px;
- {/block:ifglow}
- }
- .perma-page #info span {
- display: inline-block;
- vertical-align: top;
- margin-top:.2em;
- text-transform:lowercase;
- }
- /*---- POST NOTES -----*/
- .notes {margin: 1em 0;}
- .notes-title {text-align:center;}
- .notes-title span {
- display:inline-block;
- vertical-align:top;
- font-size:1.1em;
- color:{color:title};
- font-weight:bold;
- text-shadow:1px 1px 2px {color:text shadow};
- }
- .notes-title i {
- font-size:1.4em;
- color:{color:accent};
- {block:ifglow}
- text-shadow:0 0 10px;
- {/block:ifglow}
- margin-right:.5em;
- }
- ol.notes {
- max-width: 100%;
- padding: 1em 0;
- margin: .5em 0 0 0;
- text-shadow:1px 1px 2px {color:text shadow};
- border-top:1px solid {color:borders};
- }
- ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
- ol.notes li.note img.avatar {
- margin-right: 1em;
- vertical-align: middle;
- display: inline-block;
- width: 1.25em;
- height: 1.25em;
- }
- /*---- PAGINATION -----*/
- #page-navigation {
- position:relative;
- text-align: center;
- width:540px;
- margin-left:400px;
- text-shadow:1px 1px 2px {color:text shadow};
- }
- #page-navigation span {
- display:inline-block;
- vertical-align:top;
- margin-top:.5em;
- letter-spacing:1.5px;
- color:{color:text};
- }
- #page-navigation i {
- color:{color:title};
- font-size:1.3em;
- padding:.5em;
- {block:ifglow}
- text-shadow:0 0 10px;
- {/block:ifglow}
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- #page-navigation i:hover {color:{color:accent};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- #page-navigation a {margin: 0 0.5em;}
- /*---- CREDIT -----*/
- .credit {
- position: fixed;
- bottom: 20px;
- right: 20px;
- font-size: 1.4em;
- color:{color:title};
- {block:ifglow}
- text-shadow:0 0 10px;
- {/block:ifglow}
- }
- .credit a:hover {
- color:{color:accent};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- {CustomCSS}
- </style>
- </head>
- <!----- HTML ----->
- <body>
- <!-- main = main container -->
- <main>
- <!----- SIDEBAR ----->
- <aside id="sidebar">
- <div id="top-wrap">
- <div class="navicon"><img src="{portraiturl-128}"></div>
- <div class="title">
- <li><b><a href="/">{Title}</a></b></li>
- <li>@{name}</li>
- </div>
- </div>
- <div id="side-wrap">
- {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img" alt="Sidebar image"/></a>{/block:ifSidebarImage}
- <div id="bottom-wrap">
- {block:ifCustomDescription}<div id="description">{text:custom description}</div>{/block:ifCustomDescription}
- <nav>
- {block:ifhomelink}<a class="deg7" title="{text:home link}" href="/"><i class="ph-house"></i></a>{/block:ifhomelink}
- {block:ifasklink}<a class="deg6" title="{text:ask link}" href="/ask"><i class="ph-chat-circle"></i></a>{/block:ifasklink}
- {block:ifarchivelink}<a class="deg5" title="{text:archive link}" href="/archive"><i class="ph-clock-counter-clockwise"></i></a>{/block:ifarchivelink}
- {block:ifLink1}<a class="deg4" title="{text:Link 1}" href="{text:Link 1 URL}"><i class="ph-{text:link 1 icon}"></i></a>{/block:ifLink1}
- {block:ifLink2}<a class="deg3" title="{text:Link 2}" href="{text:Link 2 URL}"><i class="ph-{text:link 2 icon}"></i></a>{/block:ifLink2}
- {block:ifLink3}<a class="deg2" title="{text:Link 3}" href="{text:Link 3 URL}"><i class="ph-{text:link 3 icon}"></i></a>{/block:ifLink3}
- {block:ifLink4}<a class="deg1" title="{text:Link 4}" href="{text:Link 4 URL}"><i class="ph-{text:link 4 icon}"></i></a>{/block:ifLink4}
- </nav>
- </div>
- </div>
- </aside>
- <!----- TAG AND DAY PAGES ----->
- <!-- section = post container -->
- <section>
- {block:TagPage}
- <article>
- <div class="tdpage">
- showing <b>{tagresultcount}</b> posts tagged <b>#{Tag}</b>
- </div>
- </article>
- {/block:TagPage}
- {block:DayPage}
- <article>
- <div class="tdpage">
- showing posts made on <b>{Month} {DayOfMonth}, {Year}</b>
- </div>
- </article>
- {/block:DayPage}
- <!----- POSTS ----->
- {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
- <!---- TOP INFO ---->
- {block:indexpage}
- {block:iftopinfo}
- <div class="topinfo">
- {block:RebloggedFrom}
- <img src="{ReblogParentPortraitURL-64}" class="user-icon"><a id="hua" title="via" href="{reblogparenturl}">{reblogparentname}</a>
- <i class="ph-repeat-bold"></i>
- <img src="{ReblogRootPortraitURL-64}" class="user-icon"><a id="hua" title="source" href="{reblogrooturl}">{reblogrootname}</a>
- {/block:RebloggedFrom}
- {block:notreblog}
- <a id="hua" href="{permalink}">original post</a>
- {/block:notreblog}
- </div>
- {/block:iftopinfo}
- {/block:indexpage}
- <article class="posts" id="{PostID}" post-type="{PostType}">
- {block:Text}
- {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
- {block:NotReblog}
- <li class="caption text-caption">
- {Body}
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <li class="caption text-caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- {Body}
- </li>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Text}
- {block:Link}
- <a href="{URL}" class="link-wrap">
- {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
- <div class="link">
- <div class="title">{Name}</div>
- {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
- {block:Host}<div class="link-host">{Host}</div>{/block:Host}
- </div>
- </a>
- {block:Description}
- {block:NotReblog}
- <li class="caption">
- {Description}
- </li>
- {/block:NotReblog}
- {/block:Description}
- {block:RebloggedFrom}
- {block:Reblogs}
- <li class="caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- {Body}
- </li>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Link}
- {block:Photo}
- <div class="photo">
- {LinkOpenTag}<a href="#" 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>{LinkCloseTag}
- </div>
- {block:Caption}
- {block:NotReblog}
- <li class="caption">
- {Caption}
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <li class="caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- {Body}
- </li>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Caption}
- {/block:Photo}
- {block:Photoset}
- <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
- {block:Caption}
- {block:NotReblog}
- <li class="caption">
- {Caption}
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <li class="caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- {Body}
- </li>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Caption}
- {/block:Photoset}
- {block:Video}
- <div class="video">{Video-500}</div>
- {block:Caption}
- {block:NotReblog}
- <li class="caption">
- {Caption}
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <li class="caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- {Body}
- </li>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Caption}
- {/block:Video}
- {block:Quote}
- <div class="quote">{Quote}</div>
- {block:Source}<div class="source">{Source}</div>{/block:Source}
- {/block:Quote}
- {block:Chat}
- {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
- <ul class="chat">{block:Lines}
- <li>
- {block:Label}<div class="chatter">{Label}</div>{/block:Label}
- {Line}
- </li>
- {/block:Lines}</ul>
- {/block:Chat}
- {block:Answer}
- <div class="ask-wrap">
- <img src="{AskerPortraitURL-64}" class="ask-icon">
- <div class="asking"><b>{Asker}</b> sent a message</div>
- <div class="question">{Question}</div>
- </div>
- {block:Answerer}
- <li class="caption">
- <img src="{AnswererPortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
- {Answer}
- </li>
- {/block:Answerer}
- {block:NotReblog}
- <li class="caption">
- {Replies}
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <li class="caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- {Body}
- </li>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Answer}
- {block:Audio}
- <div class="audiopost">
- <div class="audiobox">
- <div class="button">
- {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
- </div>
- </div>
- {block:AlbumArt}
- <img src="{AlbumArtURL}" class="album-art">
- {/block:AlbumArt}
- <div class="audioinfo">
- {block:TrackName}<li class="track"><b>{TrackName}</b></li>{/block:TrackName}
- {block:Artist}<li>{Artist}</li>{/block:Artist}
- {block:Album}<li>{Album}</li>{/block:Album}
- </div>
- </div>
- {block:Caption}
- {block:NotReblog}
- <li class="caption">
- {Caption}
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <li class="caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- {Body}
- </li>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Caption}
- {/block:Audio}
- <!----- INFO ----->
- {block:Date}
- <div class="info">
- {block:PinnedPostLabel}
- <i id="pinpost" class="ph-push-pin" title="pinned post"></i><a id="hua" title="pinned post" href="{permalink}">pinned</a>
- {/block:PinnedPostLabel}
- <i class="ph-calendar-blank"></i><a class="time-ago" id="hua" title="{Month} {DayOfMonth}, {Year}" href="{Permalink}">{timestamp}</a>
- {block:NoteCount}<i class="ph-activity"></i><a class="notecount" id="hua" title="{notecountwithlabel}" href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
- <!-- like and reblog buttons -->
- <div class="info-right">
- <i class="ph-arrows-clockwise"></i> <a id="hua" title="reblog" href="{ReblogURL}" target="_blank">reblog</a>
- <i class="ph-heart"></i> <a title="like" class="likeb" id="hua" href="#">{LikeButton}<span class="actual-button">like</span></a>
- </div>
- </div>
- {/block:Date}
- <!-- reblog info and content source on permalink pages -->
- {block:PermalinkPage}
- <div class="perma-page">
- {block:RebloggedFrom}
- <div id="info"><i class="ph-repeat"></i> <span>via: <a id="hua" href="{ReblogParentURL}">{ReblogParentName}</a></span></div>
- <div id="info"><i class="ph-map-pin"></i> <span>originally: <a id="hua" href="{ReblogRootURL}">{ReblogRootName}</a></span></div>
- {/block:RebloggedFrom}
- {block:ContentSource}<div id="info"><i class="ph-info"></i> <span><a id="hua" href="{SourceURL}">{lang:Source}</a></span></div>{/block:ContentSource}
- </div>
- {/block:PermalinkPage}
- <!----- TAGS ----->
- {block:HasTags}
- <div class="tags">
- <i class="ph ph-tag"></i>
- {block:Tags}<a id="hua" href="{TagURL}">#{Tag}</a>{/block:Tags}
- </div>
- {/block:HasTags}
- <!----- POST NOTES ----->
- {block:PermalinkPage}{block:Date}
- {block:NoteCount}{block:PostNotes}
- <div class="notes">
- <div class="notes-title"><i class="ph-activity"></i><span>activity</span></div>
- {PostNotes-64}
- </div>
- {/block:PostNotes}{/block:NoteCount}
- {/block:Date}{/block:PermalinkPage}
- </article>
- {/block:Posts}
- <!-- end of posts container -->
- </section>
- <!----- PAGINATION ----->
- {block:Pagination}
- <article id="page-navigation">
- {block:PreviousPage}<a title="previous page" href="{PreviousPage}"><i class="ph-caret-left"></i></a>{/block:PreviousPage}
- <span>page <b>{currentpage}</b> of {totalpages}</span>
- {block:NextPage}<a title="next page" href="{NextPage}"><i class="ph-caret-right"></i></a>{/block:NextPage}
- </article>
- {/block:Pagination}
- <!-- end of main container -->
- </main>
- <a href="https://demontimes.tumblr.com" title="constellation theme by sage" class="credit"><i class="ph-ghost"></i></a>
- <script>
- /// photoset
- $(document).ready(function(){
- $('.photo-slideshow').pxuPhotoset({
- lightbox: true,
- rounded: 'corners',
- gutter: '4px',
- borderRadius: '{select:border radius}',
- photoset: '.photo-slideshow',
- photoWrap: '.photo-data',
- photo: '.pxu-photo'
- });
- });
- // tooltips
- tippy('[title]', {
- theme: 'custom',
- arrow: false,
- followCursor: true,
- delay: 100,
- placement: 'top',
- zIndex: 9999999999,
- maxWidth: 400,
- content(reference) {
- const title = reference.getAttribute('title');
- reference.removeAttribute('title');
- return title;
- },
- });
- // notes
- $('article').find('.notecount').each(function(){
- var n = $(this).html().split(' ')[0].replace(/,/g, '');
- if (n > 999) {
- n = Math.floor(n / 100) / 10;
- $(this).text(n + 'k notes');
- }
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment