Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en" data-overlayscrollbars-initialize>
- <!----------------------------------------------------
- credits:
- base code by annasthms (sept. 23, 2018)
- https://pastebin.com/MgWwmmCw
- ----------------------------------------------------->
- <head>
- <title>{Title}</title>
- <!-- icon that appears on the site's tab -->
- <link rel="shortcut icon" href="{image:favicon}" type="image/gif">
- <link rel="shortcut icon" href="https://files.catbox.moe/nle7dx.png" type="image/gif">
- <!-- rss feed -->
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <!-- necessary for media query -->
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
- {block:Description}
- <meta name="description" content="{MetaDescription}" />
- {/block:Description}
- <!-- icons and fonts -->
- <link href="//fonts.googleapis.com/css?&display=swap&family=
- Berkshire+Swash
- |Comic+Neue:300,400
- |Concert+One
- |DotGothic16
- |Fenix
- |Fondamento
- |Gaegu
- |Gamja+Flower
- |Hedvig+Letters+Sans
- |Inconsolata
- |Itim
- |Karla:300
- |Kosugi+Maru
- |Libre+Baskerville
- |Lora
- |Montserrat+Alternates:300
- |Montserrat:300
- |Mulish:300
- |Nanum+Gothic
- |Nanum+Gothic+Coding
- |Nanum+Pen+Script
- |Pangolin
- |Poppins:300
- |Press+Start+2P
- |Raleway:300
- |Roboto+Slab:300
- |Rock+Salt
- |Saira:300
- |Short+Stack
- |Silkscreen:400,700
- |Work+Sans:300
- "rel="stylesheet" crossorigin>
- <!-- color, images, text, and font options -->
- <!-- images -->
- <meta name="image:▶ — IMAGES">
- <meta name="image:▼ — WINDOW TAB ICON">
- <meta name="image:favicon" content=""/>
- <meta name="image:▼ — ALT CONTROLS">
- <meta name="image:home icon" content=""/>
- <meta name="image:about icon" content=""/>
- <meta name="image:ask icon" content=""/>
- <meta name="image:archive icon" content=""/>
- <meta name="image:followed icon" content=""/>
- <meta name="image:▼ — ALT CONTROLS ANIM">
- <meta name="image:home2 icon" content=""/>
- <meta name="image:about2 icon" content=""/>
- <meta name="image:ask2 icon" content=""/>
- <meta name="image:archive2 icon" content=""/>
- <meta name="image:followed2 icon" content=""/>
- <!-- only one body background -->
- <meta name="image:▼ — BACKGROUND STATIC">
- <meta name="image:background static" content=""/>
- <!-- changing body backgrounds -->
- <meta name="image:▼ — BACKGROUND HOURLY">
- <meta name="image:background day" content=""/>
- <meta name="image:background noon" content=""/>
- <meta name="image:background evening" content=""/>
- <meta name="image:background night" content=""/>
- <!-- only one container background -->
- <meta name="image:▼ — CONTAINER BG STATIC">
- <meta name="image:top bg" content=""/>
- <meta name="image:bottoms bg" content=""/>
- <!-- changing container backgrounds -->
- <meta name="image:▼ — CONTAINER BG HOURLY">
- <meta name="image:bottoms day" content=""/>
- <meta name="image:bottoms noon" content=""/>
- <meta name="image:bottoms evening" content=""/>
- <meta name="image:bottoms night" content=""/>
- <meta name="image:▼ — CUSTOM CURSOR">
- <meta name="image:main cursor">
- <meta name="image:clicked cursor">
- <meta name="image:hovered cursor">
- <meta name="image:▼ — NON-TIPPYJS TOOLTIP">
- <meta name="image:tooltip bg" content=""/>
- <!-- color -->
- <meta name="color:▶ — COLORS">
- <meta name="color:▼ — BACKGROUNDS">
- <meta name="color:background color">
- <meta name="color:top small bg color" content="#ffffff"/>
- <meta name="color:top large bg color" content="#ffffff"/>
- <meta name="color:bottom small bg color">
- <meta name="color:bottom large bg color">
- <meta name="color:▼ — TEXT">
- <meta name="color:blockquote" content="#bbbbbb"/>
- <meta name="color:text" content="#888888"/>
- <meta name="color:links" content="#888888"/>
- <meta name="color:link hover" content="#bbbbbb"/>
- <meta name="color:npf audio info"/>
- <meta name="color:▼ — HIGHLIGHT">
- <meta name="color:highlight bg">
- <meta name="color:highlight text">
- <meta name="color:▼ — LIKE AND REBLOG ICONS">
- <meta name="color:like button" content="#bbbbbb"/>
- <meta name="color:like button hover" content="#ec5a5a"/>
- <meta name="color:like button clicked" content="#ec5a5a"/>
- <meta name="color:reblog button hover" content="#888888"/>
- <meta name="color:reblog button" content="#bbbbbb"/>
- <meta name="color:▼ — TAGS ICON">
- <meta name="color:tags button" content="#bbbbbb"/>
- <meta name="color:tags button hover" content="#888888"/>
- <meta name="color:tags button clicked" content=""/>
- <meta name="color:▼ — BORDERS + LINES">
- <meta name="color:permalink line" content="#bbbbbb"/>
- <meta name="color:bordered posts" content="#888888">
- <meta name="color:▼ — TOOLTIPS">
- <meta name="color:tooltip font" content="#888888"/>
- <meta name="color:tooltip background" content="#fff"/>
- <meta name="color:tooltip arrow" content="#fff"/>
- <meta name="color:tooltip border" content="#000"/>
- <meta name="select:npf caption spacing" content="0em">
- <meta name="select:npf caption spacing" content="1em">
- <!-- select -->
- <meta name="select:▶ — SELECT">
- <meta name="select:font" content="Mulish">
- <meta name="select:font" content="Berkshire Swash">
- <meta name="select:font" content="Comic Neue">
- <meta name="select:font" content="Concert One">
- <meta name="select:font" content="DotGothic16">
- <meta name="select:font" content="Fenix">
- <meta name="select:font" content="Fondamento">
- <meta name="select:font" content="Gaegu">
- <meta name="select:font" content="Gamja Flower">
- <meta name="select:font" content="Hedvig Letters Sans">
- <meta name="select:font" content="Inconsolata">
- <meta name="select:font" content="Itim">
- <meta name="select:font" content="Karla">
- <meta name="select:font" content="Kosugi Maru">
- <meta name="select:font" content="Libre Baskerville">
- <meta name="select:font" content="Lora">
- <meta name="select:font" content="Montserrat">
- <meta name="select:font" content="Montserrat Alternates">
- <meta name="select:font" content="Nanum Gothic">
- <meta name="select:font" content="Nanum Gothic Coding">
- <meta name="select:font" content="Nanum Pen Script">
- <meta name="select:font" content="Pangolin">
- <meta name="select:font" content="Poppins">
- <meta name="select:font" content="Press Start 2P">
- <meta name="select:font" content="Raleway">
- <meta name="select:font" content="Roboto Slab">
- <meta name="select:font" content="Rock Salt">
- <meta name="select:font" content="Saira">
- <meta name="select:font" content="Short Stack">
- <meta name="select:font" content="Silkscreen">
- <meta name="select:font" content="Work Sans">
- <meta name="select:text align" content="left">
- <meta name="select:text align" content="center">
- <meta name="select:text align" content="right">
- <!-- footer: permalink date text -->
- <meta name="select:footer align" content="left">
- <meta name="select:footer align" content="center">
- <meta name="select:footer align" content="right">
- <meta name="select:pagination align" content="left">
- <meta name="select:pagination align" content="center">
- <meta name="select:pagination align" content="right">
- <meta name="select:permalink line" content="dashed">
- <meta name="select:permalink line" content="solid">
- <meta name="select:permalink line" content="dotted">
- <meta name="select:permalink line size" content="2px">
- <meta name="select:permalink line size" content="1px">
- <meta name="select:permalink line size" content="0px">
- <meta name="select:tooltip border" content="0px">
- <meta name="select:tooltip border" content="1px">
- <meta name="select:tooltip border" content="2px">
- <!-- on/off -->
- <meta name="if:▶ — ON/OFF">
- <meta name="if:▼ — PHOTOSET CAPTIONS">
- <meta name="if:movephotosetcaption">
- <meta name="if:unmovephotosetcaption">
- <meta name="if:▼ — HIDDEN TAGS">
- <meta name="if:hiddentags">
- <meta name="if:▼ — ALT CONTROLS ANIM">
- <meta name="if:altcontrolsanim">
- <meta name="if:▼ — BACKGROUND IMAGE">
- <meta name="if:full bg">
- <meta name="if:background static">
- <meta name="if:background hourly">
- <meta name="if:▼ — BACKGROUND COLOR">
- <meta name="if:background color">
- <meta name="if:▼ — CONTAINER BG IMAGE">
- <meta name="if:top static">
- <meta name="if:bottoms static">
- <meta name="if:bottoms hourly">
- <meta name="if:▼ — CONTAINER BG COLOR">
- <meta name="if:top small bg color">
- <meta name="if:top large bg color">
- <meta name="if:bottom small bg color">
- <meta name="if:bottom large bg color">
- <meta name="if:▼ — LINKS">
- <meta name="if:bold links">
- <meta name="if:italic links">
- <meta name="if:underline links">
- <meta name="if:rainbow links">
- <meta name="if:rainbow link hover">
- <meta name="if:▼ — TOOLTIPS">
- <meta name="if:no tippyjs">
- <meta name="if:tippyjs">
- <meta name="if:bold tooltip">
- <meta name="if:tooltip border">
- <meta name="if:▼ — EXTRA">
- <meta name="if:custom cursor">
- <meta name="if:css scrollbar">
- <meta name="if:overlayscrollbar">
- <meta name="if:overlayscrollbardark">
- <meta name="if:overlayscrollbarcolor">
- <meta name="if:bordered posts">
- <meta name="if:▼ — REDIRECTION">
- <!-- lets entire blog redirect to a different page -->
- <meta name="if:redirect url">
- <!-- text -->
- <meta name="text:▶ — TEXT">
- <meta name="text:text size" content="25">
- <meta name="text:tooltip text size" content="22">
- <meta name="text:tag text size" content="24">
- <!-- footer: permalink date text -->
- <meta name="text:footer text size" content="27">
- <meta name="text:▼ — LIKE AND REBLOG ICONS">
- <meta name="text:svg height" content="27">
- <meta name="text:svg width" content="27">
- <meta name="text:▼ — REBLOGGED USER ICONS">
- <meta name="text:icons height" content="54">
- <meta name="text:icons width" content="54">
- <meta name="text:▼ — REDIRECTION">
- <meta name="text:redirect url">
- <!-- scripts -->
- <!-- css -->
- <style type="text/css">
- /* hide community mature label overlay */
- .community-label-cover__wrapper {
- display: none}
- /* hide mobile tumblr buttons */
- .tmblr-iframe--follow-teaser, .follow-teaser, .iframe-controls--phone-mobile, .tmblr-iframe--app-cta-button {
- display:none!important;
- visibility:hidden!important;
- height:0!important;}
- /* alternate tumblr controls, display at the top of .top container */
- .tumblr-controlx {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 40px;
- margin-top:30px;
- margin-right:-50px;
- margin-bottom:30px;}
- /* not displayed */
- .dashboard {
- display:none;}
- .messaged {
- display:none;}
- /* end of not displayed */
- .home {
- height:48px;
- width:48px;
- background-image: url('{image:home icon}');}
- {block:ifaltcontrolsanim}
- .home:hover {
- background-image: url('{image:home2 icon}');}
- {/block:ifaltcontrolsanim}
- .about {
- height:48px;
- width:48px;
- background-image: url('{image:about icon}');}
- {block:ifaltcontrolsanim}
- .about:hover {
- background-image: url('{image:about2 icon}');}
- {/block:ifaltcontrolsanim}
- .ask {
- height:48px;
- width:48px;
- background-image: url('{image:ask icon}');}
- {block:ifaltcontrolsanim}
- .ask:hover {
- background-image: url('{image:ask2 icon}');}
- {/block:ifaltcontrolsanim}
- .archive {
- height:48px;
- width:48px;
- background-image: url('{image:archive icon}');}
- {block:ifaltcontrolsanim}
- .archive:hover {
- background-image: url('{image:archive2 icon}');}
- {/block:ifaltcontrolsanim}
- .followed {
- height:48px;
- width:48px;
- background-image: url('{image:followed icon}');}
- {block:ifaltcontrolsanim}
- .followed:hover {
- background-image: url('{image:followed2 icon}');}
- {/block:ifaltcontrolsanim}
- /* highlight colors */
- ::selection {
- background: {color:highlight bg};
- color:{color:highlight text};}
- ::-moz-selection {
- background: {color:highlight bg};
- color:{color:highlight text};}
- /* scrollbars */
- {block:ifcssscrollbar}
- ::-webkit-scrollbar {
- width: 14px; /* width of total scrollbar */
- background: #ddd; /* background of scrollbar */
- border: 0px solid #000; /* border around whole scrollbar */
- -moz-border-radius:10px;
- -webkit-border-radius:10px;}
- ::-webkit-scrollbar-thumb {
- background: #fff; /* color of the moving part of the scrollbar */
- border: 0px solid #000; /*border around moving part of scrollbar */
- -moz-border-radius:10px;
- -webkit-border-radius:10px;}
- ::-webkit-scrollbar-thumb {
- min-height: 111px;}
- {/block:ifcssscrollbar}
- /* custom cursors */
- {block:ifcustomcursor}
- /* custom main cursor */
- .cursor {
- width: 100%;
- height: 100%;
- cursor:url('{image:main cursor}'), auto !important;}
- /* custom hovered cursor */
- a:hover {
- cursor:url('{image:hovered cursor}'), pointer !important;}
- /* custom clicked cursor */
- .cursor:active {
- cursor: url('{image:clicked cursor}'), auto !important;}
- {/block:ifcustomcursor}
- /* links */
- a {
- word-break: break-word;
- text-decoration: none;
- color: {color:links};
- {block:ifboldlinks}
- font-weight:bold;
- {/block:ifboldlinks}
- {block:ifunderlinelinks}
- text-decoration:underline;
- {/block:ifunderlinelinks}
- {block:ifitaliclinks}
- font-style:italic;
- {/block:ifitaliclinks}
- {block:ifrainbowlinks}
- animation: glow 1s infinite ease;
- {/block:ifrainbowlinks}}
- a:hover {
- color: {color:link hover};
- {block:ifrainbowlinkhover}
- animation: glow 1s infinite ease;
- {/block:ifrainbowlinkhover}}
- p:first-child {
- margin-top: 0;
- /* dunno if this line below is necessary yet */
- margin-bottom: 0;}
- p:last-child {
- margin-bottom: 0;}
- /* rainbow links */
- {block:ifrainbowlinks}
- @keyframes glow{
- 0% {color: #ff0000;}
- 10% {color: #ff8000;}
- 20% {color: #ffff00;}
- 30% {color: #80ff00;}
- 40% {color: #00ff00;}
- 50% {color: #00ff80;}
- 60% {color: #00ffff;}
- 70% {color: #0080ff;}
- 80% {color: #0000ff;}
- 90% {color: #8000ff;}
- 100% {color: #ff0080;}}
- {/block:ifrainbowlinks}
- {block:ifrainbowlinkhover}
- @keyframes glow{
- 0% {color: #ff0000;}
- 10% {color: #ff8000;}
- 20% {color: #ffff00;}
- 30% {color: #80ff00;}
- 40% {color: #00ff00;}
- 50% {color: #00ff80;}
- 60% {color: #00ffff;}
- 70% {color: #0080ff;}
- 80% {color: #0000ff;}
- 90% {color: #8000ff;}
- 100% {color: #ff0080;}}
- {/block:ifrainbowlinkhover}
- /* tooltips = text that shows upon link hover */
- /* tooltips by malihu and octomoosey */
- {block:ifnotippyjs}
- #s-m-t-tooltip {
- font-family:{select:font};
- font-size:{text:tooltip text size}px;
- background-image: url('{image:tooltip}');
- background-color: {color:tooltip background};
- color: {color:tooltip font};
- z-index: 999999999;
- text-transform: normal;
- text-align: center;
- {block:ifboldtooltip}
- font-weight:bold;
- {/block:ifboldtooltip}
- max-width: 300px;
- border-radius: 22px;
- word-wrap: break-word;
- padding: 5px;
- display: block;
- /* top right bottom left */
- margin:-40px 7px -2px 20px;}
- {block:iftooltipborder}
- #s-m-t-tooltip {
- border:{select:tooltip border} solid {color:tooltip border};}
- {/block:iftooltipborder}
- {/block:ifnotippyjs}
- /* tooltips by tippyjs */
- {block:iftippyjs}
- .tippy-box[data-theme~='custom'] {
- font-family:{select:font};
- font-size:{text:tooltip text size}px;
- {block:ifboldtooltip}
- font-weight:bold;
- {/block:ifboldtooltip}
- text-transform:uppercase;
- background-color: {color:tooltip background};
- color:{color:tooltip font};
- border-radius: 22px;}
- .tippy-box[data-placement^="top"] > .tippy-arrow:before {
- border-top-color:{color:tooltip arrow} !important;}
- .tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
- border-bottom-color:{color:tooltip arrow} !important;}
- .tippy-box[data-placement^="left"] > .tippy-arrow:before {
- border-left-color:{color:tooltip arrow} !important;}
- .tippy-box[data-placement^="right"] > .tippy-arrow:before {
- border-right-color:{color:tooltip arrow} !important;}
- {block:iftooltipborder}
- {/block:iftooltipborder}
- {/block:iftippyjs}
- *,
- *::after,
- *::before {
- box-sizing: border-box;}
- /* removes empty space at the bottom of the entire page */
- html,
- body {
- height: 100%;
- margin: 0;
- /* enable smooth scrolling correctly */
- scroll-behavior: smooth !important;}
- /* removes double scrollbars showing up when using overlayscrollbar */
- {block:ifoverlayscrollbar}
- html,
- body {
- overflow-x: initial !important;}
- {/block:ifoverlayscrollbar}
- /* entire page */
- body {
- {block:iffullbg}
- background-size: cover;
- background-attachment: fixed;
- {/block:iffullbg}
- {block:ifbackgroundstatic}
- background-image: url('{image:background static}');
- {/block:ifbackgroundstatic}
- {block:ifbackgroundcolor}
- background-color:{color:background color};
- {/block:ifbackgroundcolor}
- background-position: center;
- background-repeat: no-repeat;
- position: relative;
- overflow: hidden;}
- /* css grid for container positions */
- main {
- display: grid;
- grid-template-rows: minmax(0, 5fr) minmax(0, 4fr);
- justify-items: center;
- gap: 6em;
- height: 98%;}
- /* top container */
- .top {
- height: 85%;
- aspect-ratio: 990 / 644;
- /* top left bottom right */
- margin: 5% 0% 0px 4.5%;
- padding: 0px 0px 0px 0px;
- overflow-x: hidden;
- overflow-y: auto;
- position: relative;
- {block:iftopsmallbgcolor}
- background-color:{color:top small bg color};
- {/block:iftopsmallbgcolor}}
- /* top container in firefox */
- @-moz-document url-prefix() {
- .top {
- margin: 5%;
- height: auto;
- /* top left bottom right */
- padding: 0px 0px 0px 0px;}
- .topbg {
- {block:iftoplargebgcolor}
- background-color:{color:top large bg color};
- {/block:iftoplargebgcolor}
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center;
- height: 100%;
- aspect-ratio: 990 / 687;
- margin: 3vh auto 0 auto;}
- }
- /* top container background */
- .topbg {
- {block:iftoplargebgcolor}
- background-color:{color:top large bg color};
- {/block:iftoplargebgcolor}
- {block:iftopstatic}
- background-image: url('{image:top bg}');
- {/block:iftopstatic}
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center;
- height: 100%;
- aspect-ratio: 990 / 687;
- margin: 3vh auto 0 auto;}
- /* bottom container */
- .bottoms {
- height: 85%;
- aspect-ratio: 974 / 559;
- /* top left bottom right */
- margin: 5% 0% 0px 7%;
- padding: 0px 0px 0px 0px;
- overflow-x: hidden;
- overflow-y: auto;
- {block:ifbottomsmallbgcolor}
- background-color:{color:bottom small bg color};
- {/block:ifbottomsmallbgcolor}}
- /* bottom container in firefox */
- @-moz-document url-prefix() {
- .bottoms {
- /* top left bottom right */
- margin: 3% 0 0 24%;
- padding: 0px 0px 0px 0px;}
- }
- /* bottom container background */
- .bottomsbg {
- {block:ifbottomlargebgcolor}
- background-color:{color:bottom large bg color};
- {/block:ifbottomlargebgcolor}
- {block:ifbottomsstatic}
- background-image: url('{image:bottoms bg}');
- {/block:ifbottomsstatic}
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center;
- height: 100%;
- aspect-ratio: 974 / 559;}
- /* posts inside .top and .bottoms containers */
- .content {
- justify-content: center;
- background-color: transparent;
- font-family:{select:font};
- font-size:{text:text size}px;
- color: {color:text};
- width: 100%;
- /* top right bottom left */
- padding: 0px 20px 0px 20px;
- margin-top: 0vh;
- overflow: hidden;
- overflow-y: hidden;}
- /* individual posts styling */
- .posts {
- margin-bottom:150px;
- padding-top:0px; /* extra space inbetween posts, had it on 5px */
- {block:ifborderedposts}
- border-radius: .2rem;
- border: 1px solid;
- border-color:{color:bordered posts};
- margin-bottom:95px;
- padding: 10px;
- {/block:ifborderedposts}}
- /* posts text alignment */
- .text {
- margin-left:0px;
- text-align:{select:text align};}
- /* about page text, wrap a div class=textabt around about page text too */
- .textabt {
- text-align: center !important;}
- /* blockquote */
- blockquote {
- border-left: 3px solid {color:blockquote};
- margin-left: 3%;
- margin-top: 2%;
- padding: 5px 5px 5px 15px;}
- /* title text */
- h1 {
- font-size:1em;
- display: block;
- margin-block-start: 0em;
- margin-block-end: 0.67em;
- margin-inline-start: 0px;
- margin-inline-end: 0px;
- font-weight: bold;}
- h2 {
- margin-block-start: auto;}
- /* reblogger icon & username: on same row */
- .commenter, .answerer, .something {
- display:flex; /* row layout */
- align-items:center; /* aligns vertically (center) */
- gap:10px; /* gap between icon and username */
- padding-bottom:5px;
- padding-top:5px;
- {block:ifborderedposts}
- padding-bottom: 12px !important;
- padding-top: 20px !important;
- {/block:ifborderedposts}}
- /* rounds out the reblogged user icons */
- .askerimg img, .answerer img, .replier img, .commenter img{
- border-radius: 100%;
- height:{text:icons height}px;
- width:{text:icons width}px;
- margin-left:1px;}
- /* reblogged and ask post usernames styling */
- .username, .asker {
- text-transform:lowercase;
- font-weight:bold;
- /* top right bottom left */
- margin: 0px 0px 0px 0px;}
- /* permalink line styling for the date under posts */
- .footer{
- /* top right bottom left */
- margin:-30px -1px 40px -1px;
- text-align:{select:footer align};
- text-transform:uppercase;
- font-size:{text:footer text size}px;
- border-bottom:{select:permalink line size} {select:permalink line} {color:permalink line};
- {block:ifborderedposts}
- margin-top:-18px !important;
- margin-bottom:15px !important;
- {/block:ifborderedposts}}
- /* tags */
- {block:ifhiddentags}
- /* seyche tags script styling */
- a.tag-button {
- color: {color:tags button};
- /* top right bottom left */
- padding:5px 0px 10px 0px;
- margin:-76px 64px 0px 0px;
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}
- display: inline-block;
- vertical-align: middle;
- {block:ifborderedposts}
- margin-top:-51px !important;
- {/block:ifborderedposts}}
- a.tag-button svg {
- height:{text:svg height}px;
- width:{text:svg width}px;}
- a.tag-button:hover {
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}
- color: {color:tags button hover};}
- a.tag-button.tag-clicked svg {
- color: #:{color:tags button clicked};}
- {block:ifhiddentags}
- .tags {
- {block:ifhiddentags}
- display: none;
- {block:ifhiddentags}
- /* top right bottom left */
- margin:-35px 0px 20px 0px;
- text-align:left;
- text-transform: none;
- font-size:{text:tag text size}px;
- {block:ifborderedposts}
- margin-top:-4px !important;
- {/block:ifborderedposts}}
- /* pagination */
- .pagination {
- text-align:{select:pagination align};
- margin-top:-150px;
- overflow:hidden;
- {block:ifborderedposts}
- margin-top:-60px !important;
- overflow:hidden;
- {/block:ifborderedposts}}
- /* permalink page notes */
- ol.notes{
- list-style-type:none;
- text-align: center;
- padding:0;
- margin:0;}
- ol.notes li.note img{
- width:16px;
- height:16px;
- border-radius: 100%; /* rounds out the icons */
- margin-right:5px; /* space between icon and username */}
- ol.notes li.note{
- margin:0px;}
- /* single photo posts */
- .photo {
- width:auto;
- height:auto;}
- .photo img {
- max-width:100%;
- width:100%;
- height:100%;}
- /* maybe make this usable again
- .npf_inst.npf_photo img {
- width: auto;
- height: 100%;} */
- /* .npf_inst.npf_photo img used to have
- width: 100%;
- height: auto; */
- /* test waters out with this div below
- makes some single photo posts full size */
- .tmblr-full img:not(.npf_audio img) {
- position: relative;
- width: 100% !important;}
- /* makes custom cursor show up over npf photos */
- .npf_inst.npf_photo img {
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}}
- .post-content a.post_media_photo_anchor, .post a.post_media_photo_anchor, body a.post_media_photo_anchor {
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}}
- a.post_media_photo_anchor {
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}}
- /* videos */
- .video {
- background: transparent;
- overflow: hidden;
- display: flex;
- justify-content: center;}
- .video iframe, .video object, .video embed {
- width: 100%;
- height: 100%;}
- .tumblr_video_container {
- padding: 0 0 0 0;
- margin: 0 0 0 0;
- width: 100% !important;
- height: auto !important;}
- /* spotify, bandcamp, soundcloud */
- .spotify_audio_player {
- height:80px!important;
- width:100%!important;}
- .bandcamp_audio_player {
- height:120px!important;
- width:100%!important;
- /* top right bottom left
- margin: 0px 10px 10px 36px;*/}
- .soundcloud_audio_player {
- height:150px!important;
- width:100%!important;}
- /* audio legacy posts */
- .playbutton {
- width: 24px;
- top: 3px;
- overflow: hidden;
- position: relative;
- z-index: 1000;
- /* top right bottom left */
- margin: 15px 24px 13px 16px;
- border-radius:100%;}
- /* player */
- .playbox {
- background-color: white;
- position: absolute;
- z-index: 1000;
- margin-top: 70px;
- margin-left: 70px;
- -webkit-border-radius: 100px;
- -moz-border-radius: 100px;
- border-radius: 100px;
- opacity: 0.6;}
- /* album art */
- .cover {
- position: relative;
- z-index: 1;
- width:200px;}
- /* track info text */
- .trackinfo {
- text-align: left;
- margin-bottom: 10px;
- background: transparent;
- color: #888888;
- top: -30px;
- left: 105px;
- position: relative;
- margin-left: 120px;
- /* padding-top: 120px; */
- height: 110px;
- margin-top: -120px;
- display: flex;
- flex-direction: column;
- align-items: flex-start;}
- .trackname {}
- .artist {}
- .album {}
- /* like and reblog buttons */
- .controls .my-like .like_button iframe {
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}
- position:absolute;
- top:0;
- left:0;
- bottom:0;
- right:0;
- z-index:2;
- opacity:0;}
- .svg {
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}
- height:{text:svg height}px;
- width:{text:svg width}px;
- opacity:1;
- padding:1px;
- overflow:visible;
- display:inline-block;
- vertical-align:top;}
- .controls a {
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}
- fill:{color:like button};
- position:relative;
- display:inline-block;
- overflow:visible;
- /* top right bottom left */
- padding:5px 0px 10px 0px;
- margin:-38px 35px 0px 0px;
- height:{text:svg height}px;
- width:{text:svg width}px;}
- .controls .my-like:hover {
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}
- fill:{color:like button hover};}
- .controls .reblog {
- opacity:1;
- /* top right bottom left */
- margin:-37px 5px 0px 0px;
- fill:{color:reblog button};}
- .controls .reblog:hover{
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}
- fill:{color:reblog button hover};}
- .controls .reblog svg {
- height:{text:svg height}px;
- width:{text:svg width}px;
- margin-top:1px;}
- .controls .my-like .liked + .svg {
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}
- opacity:1;}
- .controls .my-like .liked + .svg path {
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}
- fill:{color:like button clicked};}
- .controls .my-like {
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}
- background-image: url() !important;
- /* top right bottom left */
- margin:-38px 35px 0px 0px;
- height:{text:svg height}px;
- width:{text:svg width}px;
- display:inline-block;
- vertical-align:top;}
- /* script for like and reblog buttons */
- <script>
- window.onload = function () {
- document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' ); document.addEventListener( 'click', function ( event ) {
- var myLike = event.target;
- if( myLike.className.indexOf( 'my-like' ) > -1 ) {
- var frame = document.getElementById( 'my-like-frame' ),
- liked = ( myLike.className == 'my-liked' ),
- command = liked ? 'unlike' : 'like',
- reblog = myLike.getAttribute( 'data-reblog' ),
- id = myLike.getAttribute( 'data-id' ),
- oauth = reblog.slice( -8 );
- frame.src = 'https://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
- liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
- };
- }, false );
- };
- </script>
- /*media queries*/
- /* small devices (phones, 768px and down) */
- @media (max-width: 768px) {
- }
- /* Small devices (portrait tablets and large phones, 600px and up) */
- @media (min-width: 600px) {...}
- /* Medium devices (landscape tablets, 768px and up) */
- @media (min-width: 768px) {
- }
- /* DONE */
- /* Large devices (laptops/desktops, 992px and up) */
- @media (min-width: 992px) {
- }
- /* Extra large devices (large laptops and desktops, 1200px and up) */
- @media (min-width: 1200px) {
- }
- {CustomCSS}
- </style>
- </head>
- {block:ifcustomcursor}
- <div class="cursor">
- {/block:ifcustomcursor}
- <body data-overlayscrollbars-initialize>
- <main>
- <div class="topbg">
- <div class="top" data-overlayscrollbars-initialize>
- <div class="content">
- <!--
- begin posts
- -->
- <!-- bychloethemes alternate tumblr controls -->
- <link href='https://static.tumblr.com/8pnyeus/AuJogrujr/tumblrcontrols.css' rel='stylesheet' type='text/css'>
- <div class="tumblr-controlx">
- <!-- home button -->
- <a href="/" title="inicio">
- <div class="home">
- {image:homeicon}
- </div>
- </a>
- <!-- about me button -->
- <a href="/quien" title="quién?">
- <div class="about">
- {image:abouticon}
- </div>
- </a>
- <!-- ask button -->
- <a href="/ask" title="pregúnteme">
- <div class="ask">
- {image:askicon}
- </div>
- </a>
- <!-- archive button -->
- <a href="/archive" title="archivo">
- <div class="archive">
- {image:archiveicon}
- </div>
- </a>
- <!-- follow button -->
- <a href="#" title="seguir" onClick="MyWindow=window.open('https://tumblr.com/follow/{name}','MyWindow','width=600,height=360,top=120,left=400'); return false;">
- <div class="followed">
- {image:followedicon}
- </div>
- </a>
- <!-- message button -->
- <a href="https://tumblr.com/message/{name}"title="message" target="_blank">
- <div class="messaged">
- {image:messagedicon}
- </div>
- </a>
- <!-- dashboard button -->
- <a href="https://tumblr.com/dashboard" title="dashboard">
- <div class="dashboard">
- {image:dashboardicon}
- </div>
- </a>
- </div> <!-- <div class="tumblr-controlx"> -->
- <br>
- <!--end of alternate tumblr controls-->
- {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
- <div class="posts" post-type="{PostType}" id="{PostID}" posts-selector>
- <!-- title -->
- {block:Title}
- <a href="{Permalink}" class="title">
- {Title}
- </a>
- {/block:Title}
- <!-- end title -->
- <!-- text -->
- {block:Text}
- <div class="text">
- {block:NotReblog}
- {Body}
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="comment_container">
- <div class="commenter">
- <img src="{PortraitURL-64}"/>
- <span>
- {block:HasPermalink}
- <a href="{Permalink}">
- {/block:HasPermalink}
- <div class="username">
- {Username}
- </div>
- {block:HasPermalink}
- </a>
- {/block:HasPermalink}
- </span>
- </div> <!-- <div class="commenter"> -->
- <div class="comment">
- {Body}
- </div>
- </div> <!-- <div class="comment container"> -->
- {/block:Reblogs}
- {/block:RebloggedFrom}
- </div> <!-- <div class="text"> -->
- {/block:Text}
- <!-- end text -->
- <!-- photo -->
- {block:Photo}
- <div class="photo">
- <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
- </div>
- {/block:Photo}
- <!-- end photo -->
- <!-- photoset -->
- {block:Photoset}
- <div class="set">
- <center>
- <div class="pxu">
- <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> <!-- <div class="pxu-photo"> -->
- <a class="tumblr-box"
- rel="post-{PostID}"
- href="{PhotoURL-HighRes}">
- </a>
- </div> <!-- <div class="photo-data"> -->
- {/block:Photos}
- </div> <!-- <div class="photo-slideshow"> -->
- </div> <!-- <div class="pxu"> -->
- </center>
- </div> <!-- <div class="set"> -->
- {/block:Photoset}
- <!-- end photoset -->
- <!-- quote -->
- {block:Quote}
- <div class="quote-words">
- {Quote}
- </div>
- {block:Source}
- <div class="quote-source">
- {Source}
- </div>
- {/block:Source}
- {/block:Quote}
- <!-- end quote -->
- <!-- link -->
- {block:Link}
- <a href="{URL}"
- class="path{block:Description} has-desc{/block:Description}"
- {Target}>
- {Name}
- </a>
- {block:Description}
- <div class="link-description">
- {block:NotReblog}
- {Description}
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="comment_container">
- <div class="commenter">
- <img src="{PortraitURL-64}"/>
- <span>
- {block:HasPermalink}
- <a href="{Permalink}">
- {/block:HasPermalink}
- <div class="username">
- {Username}
- </div>
- {block:HasPermalink}
- </a>
- {/block:HasPermalink}
- </span>
- </div> <!-- <div class="commenter"> -->
- <div class="comment">
- {Body}
- </div>
- </div> <!-- <div class="comment container="> -->
- {/block:Reblogs}
- {/block:RebloggedFrom}
- </div> <!-- <div class="link-description"> -->
- {/block:Description}
- {/block:Link}
- <!-- end link -->
- <!-- chat -->
- {block:Chat}
- <div>
- {block:Lines}
- <div class="line">
- <span class="label">
- {block:Label}
- {Label}
- {/block:Label}
- </span>
- {Line}
- </div>
- {/block:Lines}
- </div>
- {/block:Chat}
- <!-- end chat -->
- <!-- audio -->
- {block:Audio}
- <div class="playbox">
- <div class="playbutton">
- {block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}
- </div>
- </div>
- {block:AlbumArt}
- <img src="{AlbumArtURL}" class="cover">
- {/block:AlbumArt}
- <div class="trackinfo">
- <div class="trackname">
- {block:TrackName}<b>song:</b> {TrackName}{/block:TrackName}
- </div>
- <div class="artist">
- {block:Artist}<b>artist:</b> {Artist}{/block:Artist}
- </div>
- <div class="album">
- {block:Album}<b>album:</b> {Album}{/block:Album}
- </div>
- </div>
- {/block:Audio}
- <!-- end audio -->
- <!-- video -->
- {block:Video}
- <div class="video">
- {Video-700}
- </div>
- {/block:Video}
- <!-- end video -->
- <!-- questions -->
- {block:Answer}
- <div class="question_container">
- <div class="something">
- <div class="askerimg">
- <img src="{AskerPortraitURL-64}"/>
- </div>
- <div class="asker">
- {Asker}
- </div> <!-- <div class="asker"> -->
- </div>
- <div class="question_text">
- {Question}
- </div>
- </div> <!-- <div class="question_container"> -->
- {block:Answerer}
- <div class="answer_container">
- <div class="something">
- <div class="answerer">
- <img src="{AnswererPortraitURL-64}"/>
- {Answerer}
- </div> <!-- <div class="answerer"> -->
- </div>
- <div class="answer_text">
- {Answer}
- </div>
- </div> <!-- <div class="answer_container"> -->
- {block:Reblogs}
- <div class="reply_container">
- <div class="something">
- <div class="replier">
- <img src="{PortraitURL-64}"/>
- </div>
- {block:HasPermalink}
- <a href="{Permalink}">
- {/block:HasPermalink}
- <div class="username">
- {Username}
- </div>
- </div>
- {block:HasPermalink}
- </a>
- {/block:HasPermalink}
- <div class="reply">
- {Body}
- </div>
- </div> <!-- <div class="reply_container"> -->
- {/block:Reblogs}
- {/block:Answerer}
- {block:NotReblog}
- <div class="answer_container">
- <div class="something">
- <div class="answerer">
- <img src="{PortraitURL-64}"/>
- <a href="{Permalink}">
- {Name}
- </a>
- </div> <!-- <div class="answerer"> -->
- </div>
- <div class="answer_text">
- {Answer}
- </div>
- </div> <!-- <div class="answer_container"> -->
- {/block:NotReblog}
- {/block:Answer}
- <!-- end questions -->
- <!-- caption -->
- {block:Caption}
- <div class="caption">
- {block:NotReblog}
- {Caption}
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="comment_container">
- <div class="commenter">
- <img src="{PortraitURL-64}" />
- <span>
- {block:HasPermalink}
- <a href="{Permalink}">
- {/block:HasPermalink}
- <div class="username">
- {Username}
- </div>
- {block:HasPermalink}
- </a>
- {/block:HasPermalink}
- </span>
- </div> <!-- <div class="commenter"> -->
- <div class="comment">
- {Body}
- </div>
- </div> <!-- <div class="comment_container"> -->
- {/block:Reblogs}
- {/block:RebloggedFrom}
- </div> <!-- <div class="caption"> -->
- {/block:Caption}
- <!-- end caption -->
- <!-- date, footer, tags, permalink line + page, like + reblog buttons -->
- {block:Date}
- <div class="footer">
- <br>
- <!-- change notes name here -->
- <a href="{Permalink}"
- title="{NoteCount} notas"
- data-toggle="tooltip">
- {Month}. {DayOfMonth}. {Year}.
- </a>
- {block:RebloggedFrom}
- <a href="{ReblogParentURL}"
- style="float:right;font-size:22px"
- title="via">
- </a>
- {/block:RebloggedFrom}
- <!-- permalink line, like + reblog button icons -->
- <div class="controls">
- <a href="{ReblogURL}"
- target="_blank"
- class="reblog"
- style="float:right;"
- title="rebloguear">
- <div class="svg">
- <svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 576 512">
- <path d="M272 416c17.7 0 32-14.3 32-32s-14.3-32-32-32H160c-17.7 0-32-14.3-32-32V192h32c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l32 0 0 128c0 53 43 96 96 96H272zM304 96c-17.7 0-32 14.3-32 32s14.3 32 32 32l112 0c17.7 0 32 14.3 32 32l0 128H416c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8l-32 0V192c0-53-43-96-96-96L304 96z"/>
- </g>
- </g>
- </svg>
- </div> <!-- <div class="svg"> -->
- </a>
- <a class="my-like"
- style="float:right;"
- title="like"
- data-reblog="{ReblogURL}"
- data-id="{PostID}">
- {LikeButton}
- <div class="svg">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
- <path d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"/>
- </g>
- </g>
- </svg>
- </div> <!-- <div class="svg"> -->
- </a>
- </div> <!-- <div class="controls"> -->
- </div> <!-- <div class="footer"> -->
- <!-- end permalink line, like + reblog button icons -->
- <!-- tags -->
- {block:HasTags}
- <a class="tag-button"
- style="float:right;"
- title="show tags">
- <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag">
- <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
- <line x1="7" y1="7" x2="7.01" y2="7"></line>
- </svg>
- </a>
- {/block:HasTags}
- {block:HasTags}
- <div class="tags">
- {block:Tags}
- <a href="{TagURL}" init-tags>#{Tag} </a>
- {/block:Tags}
- </div>
- {/block:HasTags}
- <!-- end tags -->
- <!-- permalink page source names -->
- {block:PermalinkPage}
- {block:RebloggedFrom}
- <center>
- <b>reblogged from</b>: <a href="{ReblogParentURL}">{ReblogParentName}</a> /
- <b>originally by</b>: <a href="{ReblogRootURL}">{ReblogRootName}</a>
- {/block:RebloggedFrom}
- {block:ContentSource} /
- <b>content source</b>: <a href="{SourceURL}">{SourceTitle}</a>
- {/block:ContentSource}
- </center>
- <br>
- <!-- end permalink page source names -->
- <!-- permalink page notes -->
- <div class="notes">
- {block:NoteCount}
- {block:PostNotes}
- {PostNotes}
- {/block:PostNotes}
- {/block:NoteCount}
- </div>
- <!-- end permalink page notes -->
- {/block:PermalinkPage}
- {/block:Date}
- <!-- end date, footer, tags, permalink line + page, like + reblog buttons -->
- </div> <!-- <div class="posts"> -->
- {/block:Posts}
- <!--
- end posts
- -->
- <!-- pagination pages and arrows -->
- <div class="pagination">
- {block:Pagination}
- {block:PreviousPage}
- <a href="{PreviousPage}" class="jump_page">←</a>
- {/block:PreviousPage}
- {block:JumpPagination length="5"}
- {block:CurrentPage}
- <span class="current_page">
- {PageNumber}
- </span>
- {/block:CurrentPage}
- {block:JumpPage}
- <a class="jump_page" href="{URL}">
- {PageNumber}
- </a>
- {/block:JumpPage}
- {/block:JumpPagination}
- {block:NextPage}
- <a href="{NextPage}" class="jump_page">→</a>
- {/block:NextPage}
- {/block:Pagination}
- </div> <!-- <div class="pagination"> -->
- <!-- end pagination pages and arrows -->
- <!-- scripts -->
- <!-- jquery -->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
- <script>window.jQuery || document.write('<script src="https://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
- <!-- smoothscroll -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
- <!-- overlayscrollbar -->
- {block:ifoverlayscrollbar}
- <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.5.0/styles/overlayscrollbars.css" rel="stylesheet" />
- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.5.0/browser/overlayscrollbars.browser.es6.min.js" defer></script>
- <!-- change height size of overlayscrollbar -->
- <style>
- .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- min-height: 100px;
- max-height: 100px;}
- .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- min-width: 100px;
- max-width: 100px;}
- </style>
- {/block:ifoverlayscrollbar}
- <!-- overlayscrollbar custom color theme -->
- {block:ifoverlayscrollbarcolor}
- <script>
- window.addEventListener("load", (event) => {
- var {
- OverlayScrollbars,
- ScrollbarsHidingPlugin,
- SizeObserverPlugin,
- ClickScrollPlugin
- } = OverlayScrollbarsGlobal;
- document.querySelectorAll('[data-overlayscrollbars-initialize]').forEach((elm) => {
- OverlayScrollbars(elm, {
- scrollbars: {
- theme: 'os-theme-custom'
- }
- });
- });
- });
- </script>
- <style>
- .os-theme-custom {
- --os-size: 12px;
- --os-padding-perpendicular: 0;
- --os-padding-axis: 0;
- --os-track-border-radius: 0;
- --os-track-bg: red;
- --os-track-bg-hover: green;
- --os-track-bg-active: yellow;
- --os-track-border: pink;
- --os-track-border-hover: orange;
- --os-track-border-active: purple;
- --os-handle-bg: cyan;
- --os-handle-bg-hover: lime;
- --os-handle-bg-active: black;
- --os-handle-border: red;
- --os-handle-border-hover: red;
- --os-handle-border-active: red;
- --os-handle-min-size: 33px;
- --os-handle-max-size: red;
- --os-handle-perpendicular-size: 100%;
- --os-handle-perpendicular-size-hover: 100%;
- --os-handle-perpendicular-size-active: 100%;
- --os-handle-interactive-area-offset: 0;
- /* rounds out the corners of scrollbar */
- --os-track-border-radius: 10px;
- --os-handle-border-radius: 10px;}
- </style>
- {/block:ifoverlayscrollbarcolor}
- <!-- overlayscrollbar dark color theme -->
- {block:ifoverlayscrollbardark}
- <script>
- window.addEventListener("load", (event) => {
- var {
- OverlayScrollbars,
- ScrollbarsHidingPlugin,
- SizeObserverPlugin,
- ClickScrollPlugin
- } = OverlayScrollbarsGlobal;
- document.querySelectorAll('[data-overlayscrollbars-initialize]').forEach((elm) => {
- OverlayScrollbars(elm, {
- scrollbars: {
- theme: 'os-theme-dark'
- }
- });
- });
- });
- </script>
- <style>
- .os-theme-dark {
- --os-handle-bg: #bbbbbb;
- --os-handle-bg-hover: #888888;
- --os-handle-bg-active: #888888;}
- </style>
- {/block:ifoverlayscrollbardark}
- <!-- remove unecessary tumblr url strings in redirects by magnusthemes -->
- <script>
- $(document).ready(function(){
- $('a[href*="t.umblr.com/redirect"]').each(function(){
- var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
- var replaceURL = decodeURIComponent(originalURL);
- $(this).attr("href", replaceURL);
- });
- });
- </script>
- <!-- seyche click icon to show tags script -->
- {block:ifhiddentags}
- <script>
- $(document).ready(function(){
- $('.tags').hide();
- $('.tag-button').click(function() {
- $(this).closest('.posts').find('.tags').slideToggle(500);
- $(this).toggleClass('tag-clicked');
- return false;
- });
- });
- </script>
- {/block:ifhiddentags}
- <!--
- NPF images fix v4.0 by @glenthemes [2023]
- 💌 gitlab.com/glen-npf/v4-beta
- --->
- <link href="//glen-npf.gitlab.io/v4-beta/main.css" rel="stylesheet">
- <script src="//glen-npf.gitlab.io/v4-beta/use.js"></script>
- <style>
- :root {
- --NPF-Images-Spacing:4px;
- --NPF-Caption-Spacing:{select:npf caption spacing};
- {block:ifmovephotosetcaption}
- --NPF-Move-1st-Photoset:"yes";
- {/block:ifmovephotosetcaption}
- {block:ifunmovephotosetcaption}
- --NPF-Move-1st-Photoset:"no";
- {/block:ifunmovephotosetcaption}
- --Text-Container-Selector:".text";
- --Text-Reblogs-Selector:".comment_container";
- }
- </style>
- <!--✻✻✻✻✻✻ resize iframes: @glenthemes ✻✻✻✻✻✻-->
- <script src="https://glen-iframes.gitlab.io/i/use.js"></script>
- <!--✻✻✻✻✻✻ spoilerTags by @glenthemes ✻✻✻✻✻✻-->
- <script src="//spoilertags.gitlab.io/s/v2/filter.js"></script>
- <link href="https://static.tumblr.com/7uvywyd/cdos7v4xx/spoilertags_style.css" rel="stylesheet">
- <script>
- document.addEventListener("DOMContentLoaded", () => {
- spoilerTagsV2({
- filter: [
- "#spoiler",
- "#spoilers",
- "#mature label",
- ],
- message: "this post contains the following:",
- includeHashtag: "no",
- tagSeparator: ", ",
- viewPostText: "show anyway",
- shrinkPosts: "yes"
- })
- })
- </script>
- <style spoilertags>
- :root {
- --Spoiler-Overlay-Color:#ffffff;
- --Spoiler-Warning-Padding:25px;
- --Spoiler-Warning-Color:#1a1919;
- --Spoiler-Warning-Row-Spacing:1em;
- --Spoiler-Tags-Color:#1a1919;
- --Spoiler-Button-Padding:0.7rem;
- --Spoiler-Button-Background:#ffffff;
- --Spoiler-Button-Border:#eeeeee;
- --Spoiler-Button-Roundness:4px;
- --Spoiler-Button-Text-Color:#444444;
- --Spoiler-Button-HOVER-Border:#222222;
- --Spoiler-Button-HOVER-Background:#222222;
- --Spoiler-Button-HOVER-Text-Color:#efefef;
- --Spoiler-Button-HOVER-Speed:0.25s;
- --Spoiler-Fade-Speed:0.4s;
- --Shrink-Posts-Speed:0.1s;}
- .show-spoiler button {
- font-family:inherit;
- font-weight:bold;
- text-transform:uppercase;
- letter-spacing:1px;
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer;
- {/block:ifcustomcursor}
- font-size:12px;
- }
- </style>
- <!--✻✻✻✻✻✻ UN-BLUE POLLS by @glenthemes ✻✻✻✻✻✻-->
- <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
- <style>
- .poll-post {
- --Poll-Question-Font-Size: {text:text size}px;
- --Poll-Option-Background-Color: #fcfcfc;
- --Poll-Option-Corner-Rounding: 18px;
- --Poll-Option-Border-Size: 2px;
- --Poll-Option-Border-Color: #eee;
- --Poll-Option-Padding: 11px;
- --Poll-Option-Font-Size: {text:text size}px;
- --Poll-Option-Spacing: 10px;
- --Poll-Option-Text-Color: #666666;
- --Poll-Option-HOVER-Border-Color: #eee;
- --Poll-Option-HOVER-Background-Color: #eee;
- --Poll-Option-HOVER-Text-Color: #1a1b1d;
- --Poll-Option-HOVER-Speed: 0.2s;}
- </style>
- <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
- <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
- <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
- <script>
- tumblr_npf_audio({
- emptyTitleText: "intitulada",
- emptyArtistText: "intitulada",
- emptyAlbumText: "intitulada",
- titleLabel: "canción:",
- artistLabel: "artista:",
- albumLabel: "álbum:"
- });
- </script>
- <style edit-npf-audio-player>
- /*--- variables for npf audio players ---*/
- .npf-audio-wrapper {
- /*--- npf audio play & pause --*/
- --NPF-Audio-Buttons-Padding: 16px;
- --NPF-Audio-Buttons-BG: rgba(0, 0, 0, 0.52);
- --NPF-Audio-Buttons-Size: 26px;
- --NPF-Audio-Buttons-Color: #eeeeee;
- --NPF-Audio-Buttons-Spacing: 0px;
- /*--- npf audio album image ---*/
- --NPF-Audio-Image-Size: 200px;
- --NPF-Audio-Image-Spacing: 0px;
- /*--- npf audio info/details text ---*/
- --NPF-Audio-Info-Padding: 25px;
- --NPF-Audio-Info-BG: transparent;
- --NPF-Audio-Info-Font-Size: 25px;
- --NPF-Audio-Info-Text-Color: {color:npf audio info};
- }
- .npf-audio-wrapper {
- /*
- position:relative; helps us set stuff up
- for position:absolute; later
- */
- position:relative;
- width:100%;
- /*
- reverse the horizontal order of the
- npf audio player, so that the image comes first
- */
- flex-direction:row-reverse;
- /*
- z-index determines which elements on a
- webpage appear on top of others.
- it's like stacking sheets of paper,
- where a higher z-index means the
- element is on top, and takes priority
- over other elements.
- z-index:0; (together with position:relative;)
- helps us set stuff up for z-index:2; later.
- */
- z-index:0;
- }
- .npf-audio-image {
- margin-right:calc(0px - var(--NPF-Audio-Image-Size));
- }
- .npf-audio-background {
- margin-left:var(--NPF-Audio-Image-Size);
- background-color: var(--NPF-Audio-Info-BG);
- padding: var(--NPF-Audio-Info-Padding);
- }
- .npf-audio-buttons {
- /*
- because we set position:relative; on the container,
- the buttons container will now position itself
- based on where the container is.
- without position:relative on the container,
- position:absolute; on the buttons will cause them
- to fly outside of the posts.
- */
- position:absolute;
- top:0;left:0;
- /*
- this next line is to override the existing
- styling from the npf audio plugin
- */
- margin-right:0;
- /*
- the next 3 lines creates a container space
- that is the same size as the album image,
- then positions its inner contents both
- vertically & horizontally.
- */
- display:flex;
- align-items:center; /* positions stuff vertically */
- justify-content:center; /* positions stuff horizontally */
- width:var(--NPF-Audio-Image-Size);
- height:var(--NPF-Audio-Image-Size);
- /*
- because we set position:relative; and
- z-index:0; on the container earlier,
- z-index:2; here means that it will
- appear on top of the album image rather
- than beneath it.
- */
- z-index:2;
- {block:ifcustomcursor}
- cursor:url('{image:hovered cursor}'), pointer !important;
- {/block:ifcustomcursor}
- }
- .npf-audio-play, .npf-audio-pause {
- /*
- the next 3 lines creates a container space
- that is the same size as the album image,
- then positions its inner contents both
- vertically & horizontally.
- */
- display:flex;
- align-items:center; /* positions stuff vertically */
- justify-content:center; /* positions stuff horizontally */
- /*
- what we're doing in the next few lines is
- creating the "circle" that's around the
- play & pause buttons.
- instead of using padding, I'm using width
- and height to create the size of the circle,
- then placing the icons in the center.
- */
- width:calc(var(--NPF-Audio-Buttons-Size) + (var(--NPF-Audio-Buttons-Padding) * 2));
- height:calc(var(--NPF-Audio-Buttons-Size) + (var(--NPF-Audio-Buttons-Padding) * 2));
- background:var(--NPF-Audio-Buttons-BG);
- border-radius:100%;
- }
- /*
- the next 2 lines is to override the existing
- styling from the npf audio player.
- this means, whenever an icon is showing,
- instead of "display:block",
- use "display:flex" instead.
- "display:flex" can center things well,
- whilst "display:block" cannot.
- */
- .npf-audio-play[style*="display: block;"],
- .npf-audio-pause[style*="display: block;"]{
- display:flex!important;
- }
- .npf-audio-play svg, .npf-audio-pause svg {
- width:var(--NPF-Audio-Buttons-Size);
- height:var(--NPF-Audio-Buttons-Size);
- }
- /*
- the next 2 lines is to override the existing
- styling from the npf audio player, just
- to make the icons appear more centered.
- */
- .npf-audio-play svg { margin-left:2px!important; }
- .npf-audio-pause svg { margin-left:0!important; }
- .npf-audio-details {
- font-size:var(--NPF-Audio-Info-Font-Size);
- }
- .npf-audio-title-label,
- .npf-audio-artist-label,
- .npf-audio-album-label {
- font-weight: bold;
- }
- .npf-audio-title,
- .npf-audio-artist,
- .npf-audio-album {
- color: var(--NPF-Audio-Info-Text-Color);
- }
- figcaption.audio-caption,
- figcaption.audio-caption + audio[controls]{
- display:none!important;
- }
- </style>
- <!-- shecodes.io script to change background image based on time of day -->
- {block:ifbackgroundhourly}
- <script>
- const body = document.querySelector('body');
- const date = new Date();
- const hour = date.getHours(); /*
- extra info:
- > sign means "after" and < sign means "before"
- hours before 6am = night
- hours before 12pm = day
- hours before 6pm = afternoon
- hours before 12am = night */
- if (hour < 6) {
- body.style.backgroundImage = "url('{image:background night}')";}
- else if (hour < 12) {
- body.style.backgroundImage = "url('{image:background day}')";}
- else if (hour < 18) {
- body.style.backgroundImage = "url('{image:background noon}')";}
- else {
- body.style.backgroundImage = "url('{image:background evening}')";}
- </script>
- {/block:ifbackgroundhourly}
- <!-- shecodes.io script to change bottomsbg image based on time of day -->
- {block:ifbottomshourly}
- <script>
- addEventListener("DOMContentLoaded", (event) => {
- const body = document.querySelector('.bottomsbg');
- const date = new Date();
- const hour = date.getHours(); /*
- extra info:
- > sign means "after" and < sign means "before"
- hours before 6am = night
- hours before 12pm = day
- hours before 6pm = afternoon
- hours before 12am = night */
- if (hour < 6) {
- body.style.backgroundImage = "url('{image:bottoms night}')";}
- else if (hour < 12) {
- body.style.backgroundImage = "url('{image:bottoms day}')";}
- else if (hour < 18) {
- body.style.backgroundImage = "url('{image:bottoms noon}')";}
- else {
- body.style.backgroundImage = "url('{image:bottoms evening}')";}
- });
- </script>
- {/block:ifbottomshourly}
- <!-- script to redirect to a different site
- enable and input site name in tumblr theme editor -->
- {block:ifredirecturl}
- <script type="text/javascript">
- location.replace("{text:redirect url}");
- </script>
- {/block:ifredirecturl}
- <!-- felicitysmoak gifv to gif script -->
- <script>
- $('img[src*="media.tumblr.com"]').each(function() {
- var newsrc = $(this).attr('src').replace('gifv','gif');
- $(this).attr('src', newsrc);
- });
- $('a[href*="media.tumblr.com"]').each(function() {
- var newhref = $(this).attr('href').replace('gifv','gif');
- $(this).attr('href', newhref);
- });
- $('div[data-lowres*="media.tumblr.com').each(function() {
- var newdata = $(this).attr('data-lowres').replace('gifv','gif');
- $(this).attr('data-lowres', newdata);
- });
- $('div[data-highres*="media.tumblr.com').each(function() {
- var newdata = $(this).attr('data-highres').replace('gifv','gif');
- $(this).attr('data-highres', newdata);
- });
- </script>
- <!-- responsive legacy pxu photoset from gukthemes + pixel union part 1-->
- <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"/>
- <script>
- /* responsive legacy pxu photoset from gukthemes + pixel union part 2*/
- $(document).ready(function(){
- $('.photo-slideshow').pxuPhotoset({
- lightbox:true,
- rounded:false,
- gutter:'0px',
- borderRadius:'0px',
- photoset:'.photo-slideshow',
- photoWrap:'.photo-data',
- photo:'.pxu-photo'
- });
- }); /* end document ready function */
- </script>
- <!-- borntobewildcodes customize anonymous name for ask posts -->
- <script>
- $(document).ready(function(){
- $(".asker").text(function () {
- return $(this).text().replace("Anonymous", "anon");
- });
- });
- </script>
- <!-- borntobewildcodes customize anonymous icon for ask posts -->
- <script>
- $(document).ready(function(){
- var oldSrc = 'https://assets.tumblr.com/images/anonymous_avatar_48.gif';
- var newSrc = 'NEW ANONYMOUS IMAGE URL HERE';
- $('img[src="' + oldSrc + '"]').attr('src', newSrc);
- });
- </script>
- <!-- tooltips by malihu and octomoosey -->
- {block:ifnotippyjs}
- <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("a[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:0,
- tip_fade_speed:0,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- {/block:ifnotippyjs}
- <!-- tooltips by tippyjs -->
- {block:iftippyjs}
- <script src="https://unpkg.com/@popperjs/core@2"></script>
- <script src="https://unpkg.com/tippy.js@6"></script>
- <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css">
- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/border.css"/>
- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/svg-arrow.css"/>
- <link rel="stylesheet" href="https://unpkg.com/[email protected]/animations/shift-away.css"/>
- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/backdrop.css"/>
- <script>
- const commonOptions = {
- theme: "custom",
- arrow: true,
- animation: "scale-subtle",
- followCursor: true,
- placement: "top",
- touch: "hold",
- };
- tippy("[title]", {
- ...commonOptions,
- content(reference) {
- const title = reference.getAttribute("title");
- reference.removeAttribute("title");
- return title;
- },
- });
- </script>
- {/block:iftippyjs}
- </div> <!-- <div class="topbg"> -->
- </div> <!-- <div class="top"> -->
- </div> <!-- <div class="content"> -->
- <div class="bottomsbg">
- <div class="bottoms">
- <div class="content">
- </div> <!-- <div class="bottomsbg"> -->
- </div> <!-- <div class="bottoms"> -->
- </div> <!-- <div class="content"> -->
- </main>
- </body>
- {block:ifcustomcursor}
- </div> <!-- <div class="cursor"> -->
- {/block:ifcustomcursor}
- </html>
Add Comment
Please, Sign In to add comment