Guest User

Untitled

a guest
Jan 7th, 2025
32
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 61.92 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en" data-overlayscrollbars-initialize>
  4.  
  5. <!----------------------------------------------------
  6.  
  7. credits:
  8.  
  9. base code by annasthms (sept. 23, 2018)
  10. https://pastebin.com/MgWwmmCw
  11.  
  12. ----------------------------------------------------->
  13.  
  14. <head>
  15.  
  16. <title>{Title}</title>
  17.  
  18. <!-- icon that appears on the site's tab -->
  19. <link rel="shortcut icon" href="{image:favicon}" type="image/gif">
  20. <link rel="shortcut icon" href="https://files.catbox.moe/nle7dx.png" type="image/gif">
  21. <!-- rss feed -->
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. <!-- necessary for media query -->
  24. <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
  25.  
  26. {block:Description}
  27. <meta name="description" content="{MetaDescription}" />
  28. {/block:Description}
  29.  
  30. <!-- icons and fonts -->
  31. <link href="//fonts.googleapis.com/css?&display=swap&family=
  32. Berkshire+Swash
  33. |Comic+Neue:300,400
  34. |Concert+One
  35. |DotGothic16
  36. |Fenix
  37. |Fondamento
  38. |Gaegu
  39. |Gamja+Flower
  40. |Hedvig+Letters+Sans
  41. |Inconsolata
  42. |Itim
  43. |Karla:300
  44. |Kosugi+Maru
  45. |Libre+Baskerville
  46. |Lora
  47. |Montserrat+Alternates:300
  48. |Montserrat:300
  49. |Mulish:300
  50. |Nanum+Gothic
  51. |Nanum+Gothic+Coding
  52. |Nanum+Pen+Script
  53. |Pangolin
  54. |Poppins:300
  55. |Press+Start+2P
  56. |Raleway:300
  57. |Roboto+Slab:300
  58. |Rock+Salt
  59. |Saira:300
  60. |Short+Stack
  61. |Silkscreen:400,700
  62. |Work+Sans:300
  63. "rel="stylesheet" crossorigin>
  64.  
  65. <!-- color, images, text, and font options -->
  66. <!-- images -->
  67. <meta name="image:&#9654; &mdash; IMAGES">
  68. <meta name="image:&#9660; &mdash; WINDOW TAB ICON">
  69. <meta name="image:favicon" content=""/>
  70. <meta name="image:&#9660; &mdash; ALT CONTROLS">
  71. <meta name="image:home icon" content=""/>
  72. <meta name="image:about icon" content=""/>
  73. <meta name="image:ask icon" content=""/>
  74. <meta name="image:archive icon" content=""/>
  75. <meta name="image:followed icon" content=""/>
  76. <meta name="image:&#9660; &mdash; ALT CONTROLS ANIM">
  77. <meta name="image:home2 icon" content=""/>
  78. <meta name="image:about2 icon" content=""/>
  79. <meta name="image:ask2 icon" content=""/>
  80. <meta name="image:archive2 icon" content=""/>
  81. <meta name="image:followed2 icon" content=""/>
  82. <!-- only one body background -->
  83. <meta name="image:&#9660; &mdash; BACKGROUND STATIC">
  84. <meta name="image:background static" content=""/>
  85. <!-- changing body backgrounds -->
  86. <meta name="image:&#9660; &mdash; BACKGROUND HOURLY">
  87. <meta name="image:background day" content=""/>
  88. <meta name="image:background noon" content=""/>
  89. <meta name="image:background evening" content=""/>
  90. <meta name="image:background night" content=""/>
  91. <!-- only one container background -->
  92. <meta name="image:&#9660; &mdash; CONTAINER BG STATIC">
  93. <meta name="image:top bg" content=""/>
  94. <meta name="image:bottoms bg" content=""/>
  95. <!-- changing container backgrounds -->
  96. <meta name="image:&#9660; &mdash; CONTAINER BG HOURLY">
  97. <meta name="image:bottoms day" content=""/>
  98. <meta name="image:bottoms noon" content=""/>
  99. <meta name="image:bottoms evening" content=""/>
  100. <meta name="image:bottoms night" content=""/>
  101. <meta name="image:&#9660; &mdash; CUSTOM CURSOR">
  102. <meta name="image:main cursor">
  103. <meta name="image:clicked cursor">
  104. <meta name="image:hovered cursor">
  105. <meta name="image:&#9660; &mdash; NON-TIPPYJS TOOLTIP">
  106. <meta name="image:tooltip bg" content=""/>
  107.  
  108. <!-- color -->
  109. <meta name="color:&#9654; &mdash; COLORS">
  110. <meta name="color:&#9660; &mdash; BACKGROUNDS">
  111. <meta name="color:background color">
  112. <meta name="color:top small bg color" content="#ffffff"/>
  113. <meta name="color:top large bg color" content="#ffffff"/>
  114. <meta name="color:bottom small bg color">
  115. <meta name="color:bottom large bg color">
  116. <meta name="color:&#9660; &mdash; TEXT">
  117. <meta name="color:blockquote" content="#bbbbbb"/>
  118. <meta name="color:text" content="#888888"/>
  119. <meta name="color:links" content="#888888"/>
  120. <meta name="color:link hover" content="#bbbbbb"/>
  121. <meta name="color:npf audio info"/>
  122. <meta name="color:&#9660; &mdash; HIGHLIGHT">
  123. <meta name="color:highlight bg">
  124. <meta name="color:highlight text">
  125. <meta name="color:&#9660; &mdash; LIKE AND REBLOG ICONS">
  126. <meta name="color:like button" content="#bbbbbb"/>
  127. <meta name="color:like button hover" content="#ec5a5a"/>
  128. <meta name="color:like button clicked" content="#ec5a5a"/>
  129. <meta name="color:reblog button hover" content="#888888"/>
  130. <meta name="color:reblog button" content="#bbbbbb"/>
  131. <meta name="color:&#9660; &mdash; TAGS ICON">
  132. <meta name="color:tags button" content="#bbbbbb"/>
  133. <meta name="color:tags button hover" content="#888888"/>
  134. <meta name="color:tags button clicked" content=""/>
  135. <meta name="color:&#9660; &mdash; BORDERS + LINES">
  136. <meta name="color:permalink line" content="#bbbbbb"/>
  137. <meta name="color:bordered posts" content="#888888">
  138. <meta name="color:&#9660; &mdash; TOOLTIPS">
  139. <meta name="color:tooltip font" content="#888888"/>
  140. <meta name="color:tooltip background" content="#fff"/>
  141. <meta name="color:tooltip arrow" content="#fff"/>
  142. <meta name="color:tooltip border" content="#000"/>
  143. <meta name="select:npf caption spacing" content="0em">
  144. <meta name="select:npf caption spacing" content="1em">
  145.  
  146. <!-- select -->
  147. <meta name="select:&#9654; &mdash; SELECT">
  148. <meta name="select:font" content="Mulish">
  149. <meta name="select:font" content="Berkshire Swash">
  150. <meta name="select:font" content="Comic Neue">
  151. <meta name="select:font" content="Concert One">
  152. <meta name="select:font" content="DotGothic16">
  153. <meta name="select:font" content="Fenix">
  154. <meta name="select:font" content="Fondamento">
  155. <meta name="select:font" content="Gaegu">
  156. <meta name="select:font" content="Gamja Flower">
  157. <meta name="select:font" content="Hedvig Letters Sans">
  158. <meta name="select:font" content="Inconsolata">
  159. <meta name="select:font" content="Itim">
  160. <meta name="select:font" content="Karla">
  161. <meta name="select:font" content="Kosugi Maru">
  162. <meta name="select:font" content="Libre Baskerville">
  163. <meta name="select:font" content="Lora">
  164. <meta name="select:font" content="Montserrat">
  165. <meta name="select:font" content="Montserrat Alternates">
  166. <meta name="select:font" content="Nanum Gothic">
  167. <meta name="select:font" content="Nanum Gothic Coding">
  168. <meta name="select:font" content="Nanum Pen Script">
  169. <meta name="select:font" content="Pangolin">
  170. <meta name="select:font" content="Poppins">
  171. <meta name="select:font" content="Press Start 2P">
  172. <meta name="select:font" content="Raleway">
  173. <meta name="select:font" content="Roboto Slab">
  174. <meta name="select:font" content="Rock Salt">
  175. <meta name="select:font" content="Saira">
  176. <meta name="select:font" content="Short Stack">
  177. <meta name="select:font" content="Silkscreen">
  178. <meta name="select:font" content="Work Sans">
  179. <meta name="select:text align" content="left">
  180. <meta name="select:text align" content="center">
  181. <meta name="select:text align" content="right">
  182. <!-- footer: permalink date text -->
  183. <meta name="select:footer align" content="left">
  184. <meta name="select:footer align" content="center">
  185. <meta name="select:footer align" content="right">
  186. <meta name="select:pagination align" content="left">
  187. <meta name="select:pagination align" content="center">
  188. <meta name="select:pagination align" content="right">
  189. <meta name="select:permalink line" content="dashed">
  190. <meta name="select:permalink line" content="solid">
  191. <meta name="select:permalink line" content="dotted">
  192. <meta name="select:permalink line size" content="2px">
  193. <meta name="select:permalink line size" content="1px">
  194. <meta name="select:permalink line size" content="0px">
  195. <meta name="select:tooltip border" content="0px">
  196. <meta name="select:tooltip border" content="1px">
  197. <meta name="select:tooltip border" content="2px">
  198.  
  199. <!-- on/off -->
  200. <meta name="if:&#9654; &mdash; ON/OFF">
  201. <meta name="if:&#9660; &mdash; PHOTOSET CAPTIONS">
  202. <meta name="if:movephotosetcaption">
  203. <meta name="if:unmovephotosetcaption">
  204. <meta name="if:&#9660; &mdash; HIDDEN TAGS">
  205. <meta name="if:hiddentags">
  206. <meta name="if:&#9660; &mdash; ALT CONTROLS ANIM">
  207. <meta name="if:altcontrolsanim">
  208. <meta name="if:&#9660; &mdash; BACKGROUND IMAGE">
  209. <meta name="if:full bg">
  210. <meta name="if:background static">
  211. <meta name="if:background hourly">
  212. <meta name="if:&#9660; &mdash; BACKGROUND COLOR">
  213. <meta name="if:background color">
  214. <meta name="if:&#9660; &mdash; CONTAINER BG IMAGE">
  215. <meta name="if:top static">
  216. <meta name="if:bottoms static">
  217. <meta name="if:bottoms hourly">
  218. <meta name="if:&#9660; &mdash; CONTAINER BG COLOR">
  219. <meta name="if:top small bg color">
  220. <meta name="if:top large bg color">
  221. <meta name="if:bottom small bg color">
  222. <meta name="if:bottom large bg color">
  223. <meta name="if:&#9660; &mdash; LINKS">
  224. <meta name="if:bold links">
  225. <meta name="if:italic links">
  226. <meta name="if:underline links">
  227. <meta name="if:rainbow links">
  228. <meta name="if:rainbow link hover">
  229. <meta name="if:&#9660; &mdash; TOOLTIPS">
  230. <meta name="if:no tippyjs">
  231. <meta name="if:tippyjs">
  232. <meta name="if:bold tooltip">
  233. <meta name="if:tooltip border">
  234. <meta name="if:&#9660; &mdash; EXTRA">
  235. <meta name="if:custom cursor">
  236. <meta name="if:css scrollbar">
  237. <meta name="if:overlayscrollbar">
  238. <meta name="if:overlayscrollbardark">
  239. <meta name="if:overlayscrollbarcolor">
  240. <meta name="if:bordered posts">
  241. <meta name="if:&#9660; &mdash; REDIRECTION">
  242. <!-- lets entire blog redirect to a different page -->
  243. <meta name="if:redirect url">
  244.  
  245. <!-- text -->
  246. <meta name="text:&#9654; &mdash; TEXT">
  247. <meta name="text:text size" content="25">
  248. <meta name="text:tooltip text size" content="22">
  249. <meta name="text:tag text size" content="24">
  250. <!-- footer: permalink date text -->
  251. <meta name="text:footer text size" content="27">
  252. <meta name="text:&#9660; &mdash; LIKE AND REBLOG ICONS">
  253. <meta name="text:svg height" content="27">
  254. <meta name="text:svg width" content="27">
  255. <meta name="text:&#9660; &mdash; REBLOGGED USER ICONS">
  256. <meta name="text:icons height" content="54">
  257. <meta name="text:icons width" content="54">
  258. <meta name="text:&#9660; &mdash; REDIRECTION">
  259. <meta name="text:redirect url">
  260.  
  261. <!-- scripts -->
  262.  
  263. <!-- css -->
  264. <style type="text/css">
  265. /* hide community mature label overlay */
  266. .community-label-cover__wrapper {
  267. display: none}
  268.  
  269. /* hide mobile tumblr buttons */
  270. .tmblr-iframe--follow-teaser, .follow-teaser, .iframe-controls--phone-mobile, .tmblr-iframe--app-cta-button {
  271. display:none!important;
  272. visibility:hidden!important;
  273. height:0!important;}
  274.  
  275. /* alternate tumblr controls, display at the top of .top container */
  276. .tumblr-controlx {
  277. display: flex;
  278. align-items: center;
  279. justify-content: center;
  280. gap: 40px;
  281. margin-top:30px;
  282. margin-right:-50px;
  283. margin-bottom:30px;}
  284.  
  285. /* not displayed */
  286. .dashboard {
  287. display:none;}
  288. .messaged {
  289. display:none;}
  290. /* end of not displayed */
  291.  
  292. .home {
  293. height:48px;
  294. width:48px;
  295. background-image: url('{image:home icon}');}
  296. {block:ifaltcontrolsanim}
  297. .home:hover {
  298. background-image: url('{image:home2 icon}');}
  299. {/block:ifaltcontrolsanim}
  300. .about {
  301. height:48px;
  302. width:48px;
  303. background-image: url('{image:about icon}');}
  304. {block:ifaltcontrolsanim}
  305. .about:hover {
  306. background-image: url('{image:about2 icon}');}
  307. {/block:ifaltcontrolsanim}
  308. .ask {
  309. height:48px;
  310. width:48px;
  311. background-image: url('{image:ask icon}');}
  312. {block:ifaltcontrolsanim}
  313. .ask:hover {
  314. background-image: url('{image:ask2 icon}');}
  315. {/block:ifaltcontrolsanim}
  316. .archive {
  317. height:48px;
  318. width:48px;
  319. background-image: url('{image:archive icon}');}
  320. {block:ifaltcontrolsanim}
  321. .archive:hover {
  322. background-image: url('{image:archive2 icon}');}
  323. {/block:ifaltcontrolsanim}
  324. .followed {
  325. height:48px;
  326. width:48px;
  327. background-image: url('{image:followed icon}');}
  328. {block:ifaltcontrolsanim}
  329. .followed:hover {
  330. background-image: url('{image:followed2 icon}');}
  331. {/block:ifaltcontrolsanim}
  332.  
  333. /* highlight colors */
  334. ::selection {
  335. background: {color:highlight bg};
  336. color:{color:highlight text};}
  337. ::-moz-selection {
  338. background: {color:highlight bg};
  339. color:{color:highlight text};}
  340.  
  341. /* scrollbars */
  342. {block:ifcssscrollbar}
  343. ::-webkit-scrollbar {
  344. width: 14px; /* width of total scrollbar */
  345. background: #ddd; /* background of scrollbar */
  346. border: 0px solid #000; /* border around whole scrollbar */
  347. -moz-border-radius:10px;
  348. -webkit-border-radius:10px;}
  349. ::-webkit-scrollbar-thumb {
  350. background: #fff; /* color of the moving part of the scrollbar */
  351. border: 0px solid #000; /*border around moving part of scrollbar */
  352. -moz-border-radius:10px;
  353. -webkit-border-radius:10px;}
  354. ::-webkit-scrollbar-thumb {
  355. min-height: 111px;}
  356. {/block:ifcssscrollbar}
  357.  
  358. /* custom cursors */
  359. {block:ifcustomcursor}
  360. /* custom main cursor */
  361. .cursor {
  362. width: 100%;
  363. height: 100%;
  364. cursor:url('{image:main cursor}'), auto !important;}
  365. /* custom hovered cursor */
  366. a:hover {
  367. cursor:url('{image:hovered cursor}'), pointer !important;}
  368. /* custom clicked cursor */
  369. .cursor:active {
  370. cursor: url('{image:clicked cursor}'), auto !important;}
  371. {/block:ifcustomcursor}
  372.  
  373. /* links */
  374. a {
  375. word-break: break-word;
  376. text-decoration: none;
  377. color: {color:links};
  378. {block:ifboldlinks}
  379. font-weight:bold;
  380. {/block:ifboldlinks}
  381. {block:ifunderlinelinks}
  382. text-decoration:underline;
  383. {/block:ifunderlinelinks}
  384. {block:ifitaliclinks}
  385. font-style:italic;
  386. {/block:ifitaliclinks}
  387. {block:ifrainbowlinks}
  388. animation: glow 1s infinite ease;
  389. {/block:ifrainbowlinks}}
  390. a:hover {
  391. color: {color:link hover};
  392. {block:ifrainbowlinkhover}
  393. animation: glow 1s infinite ease;
  394. {/block:ifrainbowlinkhover}}
  395. p:first-child {
  396. margin-top: 0;
  397. /* dunno if this line below is necessary yet */
  398. margin-bottom: 0;}
  399. p:last-child {
  400. margin-bottom: 0;}
  401.  
  402. /* rainbow links */
  403. {block:ifrainbowlinks}
  404. @keyframes glow{
  405. 0% {color: #ff0000;}
  406. 10% {color: #ff8000;}
  407. 20% {color: #ffff00;}
  408. 30% {color: #80ff00;}
  409. 40% {color: #00ff00;}
  410. 50% {color: #00ff80;}
  411. 60% {color: #00ffff;}
  412. 70% {color: #0080ff;}
  413. 80% {color: #0000ff;}
  414. 90% {color: #8000ff;}
  415. 100% {color: #ff0080;}}
  416. {/block:ifrainbowlinks}
  417.  
  418. {block:ifrainbowlinkhover}
  419. @keyframes glow{
  420. 0% {color: #ff0000;}
  421. 10% {color: #ff8000;}
  422. 20% {color: #ffff00;}
  423. 30% {color: #80ff00;}
  424. 40% {color: #00ff00;}
  425. 50% {color: #00ff80;}
  426. 60% {color: #00ffff;}
  427. 70% {color: #0080ff;}
  428. 80% {color: #0000ff;}
  429. 90% {color: #8000ff;}
  430. 100% {color: #ff0080;}}
  431. {/block:ifrainbowlinkhover}
  432.  
  433. /* tooltips = text that shows upon link hover */
  434. /* tooltips by malihu and octomoosey */
  435. {block:ifnotippyjs}
  436. #s-m-t-tooltip {
  437. font-family:{select:font};
  438. font-size:{text:tooltip text size}px;
  439. background-image: url('{image:tooltip}');
  440. background-color: {color:tooltip background};
  441. color: {color:tooltip font};
  442. z-index: 999999999;
  443. text-transform: normal;
  444. text-align: center;
  445. {block:ifboldtooltip}
  446. font-weight:bold;
  447. {/block:ifboldtooltip}
  448. max-width: 300px;
  449. border-radius: 22px;
  450. word-wrap: break-word;
  451. padding: 5px;
  452. display: block;
  453. /* top right bottom left */
  454. margin:-40px 7px -2px 20px;}
  455. {block:iftooltipborder}
  456. #s-m-t-tooltip {
  457. border:{select:tooltip border} solid {color:tooltip border};}
  458. {/block:iftooltipborder}
  459. {/block:ifnotippyjs}
  460.  
  461. /* tooltips by tippyjs */
  462. {block:iftippyjs}
  463. .tippy-box[data-theme~='custom'] {
  464. font-family:{select:font};
  465. font-size:{text:tooltip text size}px;
  466. {block:ifboldtooltip}
  467. font-weight:bold;
  468. {/block:ifboldtooltip}
  469. text-transform:uppercase;
  470. background-color: {color:tooltip background};
  471. color:{color:tooltip font};
  472. border-radius: 22px;}
  473. .tippy-box[data-placement^="top"] > .tippy-arrow:before {
  474. border-top-color:{color:tooltip arrow} !important;}
  475. .tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
  476. border-bottom-color:{color:tooltip arrow} !important;}
  477. .tippy-box[data-placement^="left"] > .tippy-arrow:before {
  478. border-left-color:{color:tooltip arrow} !important;}
  479. .tippy-box[data-placement^="right"] > .tippy-arrow:before {
  480. border-right-color:{color:tooltip arrow} !important;}
  481. {block:iftooltipborder}
  482.  
  483. {/block:iftooltipborder}
  484. {/block:iftippyjs}
  485.  
  486. *,
  487. *::after,
  488. *::before {
  489. box-sizing: border-box;}
  490.  
  491. /* removes empty space at the bottom of the entire page */
  492. html,
  493. body {
  494. height: 100%;
  495. margin: 0;
  496. /* enable smooth scrolling correctly */
  497. scroll-behavior: smooth !important;}
  498.  
  499. /* removes double scrollbars showing up when using overlayscrollbar */
  500. {block:ifoverlayscrollbar}
  501. html,
  502. body {
  503. overflow-x: initial !important;}
  504. {/block:ifoverlayscrollbar}
  505.  
  506. /* entire page */
  507. body {
  508. {block:iffullbg}
  509. background-size: cover;
  510. background-attachment: fixed;
  511. {/block:iffullbg}
  512. {block:ifbackgroundstatic}
  513. background-image: url('{image:background static}');
  514. {/block:ifbackgroundstatic}
  515. {block:ifbackgroundcolor}
  516. background-color:{color:background color};
  517. {/block:ifbackgroundcolor}
  518. background-position: center;
  519. background-repeat: no-repeat;
  520. position: relative;
  521. overflow: hidden;}
  522.  
  523. /* css grid for container positions */
  524. main {
  525. display: grid;
  526. grid-template-rows: minmax(0, 5fr) minmax(0, 4fr);
  527. justify-items: center;
  528. gap: 6em;
  529. height: 98%;}
  530.  
  531. /* top container */
  532. .top {
  533. height: 85%;
  534. aspect-ratio: 990 / 644;
  535. /* top left bottom right */
  536. margin: 5% 0% 0px 4.5%;
  537. padding: 0px 0px 0px 0px;
  538. overflow-x: hidden;
  539. overflow-y: auto;
  540. position: relative;
  541. {block:iftopsmallbgcolor}
  542. background-color:{color:top small bg color};
  543. {/block:iftopsmallbgcolor}}
  544.  
  545. /* top container in firefox */
  546. @-moz-document url-prefix() {
  547. .top {
  548. margin: 5%;
  549. height: auto;
  550. /* top left bottom right */
  551. padding: 0px 0px 0px 0px;}
  552. .topbg {
  553. {block:iftoplargebgcolor}
  554. background-color:{color:top large bg color};
  555. {/block:iftoplargebgcolor}
  556. background-size: contain;
  557. background-repeat: no-repeat;
  558. background-position: center;
  559. height: 100%;
  560. aspect-ratio: 990 / 687;
  561. margin: 3vh auto 0 auto;}
  562. }
  563.  
  564. /* top container background */
  565. .topbg {
  566. {block:iftoplargebgcolor}
  567. background-color:{color:top large bg color};
  568. {/block:iftoplargebgcolor}
  569. {block:iftopstatic}
  570. background-image: url('{image:top bg}');
  571. {/block:iftopstatic}
  572. background-size: contain;
  573. background-repeat: no-repeat;
  574. background-position: center;
  575. height: 100%;
  576. aspect-ratio: 990 / 687;
  577. margin: 3vh auto 0 auto;}
  578.  
  579. /* bottom container */
  580. .bottoms {
  581. height: 85%;
  582. aspect-ratio: 974 / 559;
  583. /* top left bottom right */
  584. margin: 5% 0% 0px 7%;
  585. padding: 0px 0px 0px 0px;
  586. overflow-x: hidden;
  587. overflow-y: auto;
  588. {block:ifbottomsmallbgcolor}
  589. background-color:{color:bottom small bg color};
  590. {/block:ifbottomsmallbgcolor}}
  591.  
  592. /* bottom container in firefox */
  593. @-moz-document url-prefix() {
  594. .bottoms {
  595. /* top left bottom right */
  596. margin: 3% 0 0 24%;
  597. padding: 0px 0px 0px 0px;}
  598. }
  599.  
  600. /* bottom container background */
  601. .bottomsbg {
  602. {block:ifbottomlargebgcolor}
  603. background-color:{color:bottom large bg color};
  604. {/block:ifbottomlargebgcolor}
  605. {block:ifbottomsstatic}
  606. background-image: url('{image:bottoms bg}');
  607. {/block:ifbottomsstatic}
  608. background-size: contain;
  609. background-repeat: no-repeat;
  610. background-position: center;
  611. height: 100%;
  612. aspect-ratio: 974 / 559;}
  613.  
  614. /* posts inside .top and .bottoms containers */
  615. .content {
  616. justify-content: center;
  617. background-color: transparent;
  618. font-family:{select:font};
  619. font-size:{text:text size}px;
  620. color: {color:text};
  621. width: 100%;
  622. /* top right bottom left */
  623. padding: 0px 20px 0px 20px;
  624. margin-top: 0vh;
  625. overflow: hidden;
  626. overflow-y: hidden;}
  627.  
  628. /* individual posts styling */
  629. .posts {
  630. margin-bottom:150px;
  631. padding-top:0px; /* extra space inbetween posts, had it on 5px */
  632. {block:ifborderedposts}
  633. border-radius: .2rem;
  634. border: 1px solid;
  635. border-color:{color:bordered posts};
  636. margin-bottom:95px;
  637. padding: 10px;
  638. {/block:ifborderedposts}}
  639.  
  640. /* posts text alignment */
  641. .text {
  642. margin-left:0px;
  643. text-align:{select:text align};}
  644.  
  645. /* about page text, wrap a div class=textabt around about page text too */
  646. .textabt {
  647. text-align: center !important;}
  648.  
  649. /* blockquote */
  650. blockquote {
  651. border-left: 3px solid {color:blockquote};
  652. margin-left: 3%;
  653. margin-top: 2%;
  654. padding: 5px 5px 5px 15px;}
  655.  
  656. /* title text */
  657. h1 {
  658. font-size:1em;
  659. display: block;
  660. margin-block-start: 0em;
  661. margin-block-end: 0.67em;
  662. margin-inline-start: 0px;
  663. margin-inline-end: 0px;
  664. font-weight: bold;}
  665. h2 {
  666. margin-block-start: auto;}
  667.  
  668. /* reblogger icon & username: on same row */
  669. .commenter, .answerer, .something {
  670. display:flex; /* row layout */
  671. align-items:center; /* aligns vertically (center) */
  672. gap:10px; /* gap between icon and username */
  673. padding-bottom:5px;
  674. padding-top:5px;
  675. {block:ifborderedposts}
  676. padding-bottom: 12px !important;
  677. padding-top: 20px !important;
  678. {/block:ifborderedposts}}
  679.  
  680. /* rounds out the reblogged user icons */
  681. .askerimg img, .answerer img, .replier img, .commenter img{
  682. border-radius: 100%;
  683. height:{text:icons height}px;
  684. width:{text:icons width}px;
  685. margin-left:1px;}
  686.  
  687. /* reblogged and ask post usernames styling */
  688. .username, .asker {
  689. text-transform:lowercase;
  690. font-weight:bold;
  691. /* top right bottom left */
  692. margin: 0px 0px 0px 0px;}
  693.  
  694. /* permalink line styling for the date under posts */
  695. .footer{
  696. /* top right bottom left */
  697. margin:-30px -1px 40px -1px;
  698. text-align:{select:footer align};
  699. text-transform:uppercase;
  700. font-size:{text:footer text size}px;
  701. border-bottom:{select:permalink line size} {select:permalink line} {color:permalink line};
  702. {block:ifborderedposts}
  703. margin-top:-18px !important;
  704. margin-bottom:15px !important;
  705. {/block:ifborderedposts}}
  706.  
  707. /* tags */
  708. {block:ifhiddentags}
  709. /* seyche tags script styling */
  710. a.tag-button {
  711. color: {color:tags button};
  712. /* top right bottom left */
  713. padding:5px 0px 10px 0px;
  714. margin:-76px 64px 0px 0px;
  715. {block:ifcustomcursor}
  716. cursor:url('{image:hovered cursor}'), pointer !important;
  717. {/block:ifcustomcursor}
  718. display: inline-block;
  719. vertical-align: middle;
  720. {block:ifborderedposts}
  721. margin-top:-51px !important;
  722. {/block:ifborderedposts}}
  723. a.tag-button svg {
  724. height:{text:svg height}px;
  725. width:{text:svg width}px;}
  726. a.tag-button:hover {
  727. {block:ifcustomcursor}
  728. cursor:url('{image:hovered cursor}'), pointer !important;
  729. {/block:ifcustomcursor}
  730. color: {color:tags button hover};}
  731. a.tag-button.tag-clicked svg {
  732. color: #:{color:tags button clicked};}
  733. {block:ifhiddentags}
  734. .tags {
  735. {block:ifhiddentags}
  736. display: none;
  737. {block:ifhiddentags}
  738. /* top right bottom left */
  739. margin:-35px 0px 20px 0px;
  740. text-align:left;
  741. text-transform: none;
  742. font-size:{text:tag text size}px;
  743. {block:ifborderedposts}
  744. margin-top:-4px !important;
  745. {/block:ifborderedposts}}
  746.  
  747. /* pagination */
  748. .pagination {
  749. text-align:{select:pagination align};
  750. margin-top:-150px;
  751. overflow:hidden;
  752. {block:ifborderedposts}
  753. margin-top:-60px !important;
  754. overflow:hidden;
  755. {/block:ifborderedposts}}
  756.  
  757. /* permalink page notes */
  758. ol.notes{
  759. list-style-type:none;
  760. text-align: center;
  761. padding:0;
  762. margin:0;}
  763. ol.notes li.note img{
  764. width:16px;
  765. height:16px;
  766. border-radius: 100%; /* rounds out the icons */
  767. margin-right:5px; /* space between icon and username */}
  768. ol.notes li.note{
  769. margin:0px;}
  770.  
  771. /* single photo posts */
  772. .photo {
  773. width:auto;
  774. height:auto;}
  775. .photo img {
  776. max-width:100%;
  777. width:100%;
  778. height:100%;}
  779. /* maybe make this usable again
  780. .npf_inst.npf_photo img {
  781. width: auto;
  782. height: 100%;} */
  783.  
  784. /* .npf_inst.npf_photo img used to have
  785. width: 100%;
  786. height: auto; */
  787.  
  788. /* test waters out with this div below
  789. makes some single photo posts full size */
  790. .tmblr-full img:not(.npf_audio img) {
  791. position: relative;
  792. width: 100% !important;}
  793.  
  794. /* makes custom cursor show up over npf photos */
  795. .npf_inst.npf_photo img {
  796. {block:ifcustomcursor}
  797. cursor:url('{image:hovered cursor}'), pointer !important;
  798. {/block:ifcustomcursor}}
  799. .post-content a.post_media_photo_anchor, .post a.post_media_photo_anchor, body a.post_media_photo_anchor {
  800. {block:ifcustomcursor}
  801. cursor:url('{image:hovered cursor}'), pointer !important;
  802. {/block:ifcustomcursor}}
  803. a.post_media_photo_anchor {
  804. {block:ifcustomcursor}
  805. cursor:url('{image:hovered cursor}'), pointer !important;
  806. {/block:ifcustomcursor}}
  807.  
  808. /* videos */
  809. .video {
  810. background: transparent;
  811. overflow: hidden;
  812. display: flex;
  813. justify-content: center;}
  814. .video iframe, .video object, .video embed {
  815. width: 100%;
  816. height: 100%;}
  817. .tumblr_video_container {
  818. padding: 0 0 0 0;
  819. margin: 0 0 0 0;
  820. width: 100% !important;
  821. height: auto !important;}
  822.  
  823. /* spotify, bandcamp, soundcloud */
  824. .spotify_audio_player {
  825. height:80px!important;
  826. width:100%!important;}
  827. .bandcamp_audio_player {
  828. height:120px!important;
  829. width:100%!important;
  830. /* top right bottom left
  831. margin: 0px 10px 10px 36px;*/}
  832. .soundcloud_audio_player {
  833. height:150px!important;
  834. width:100%!important;}
  835.  
  836. /* audio legacy posts */
  837. .playbutton {
  838. width: 24px;
  839. top: 3px;
  840. overflow: hidden;
  841. position: relative;
  842. z-index: 1000;
  843. /* top right bottom left */
  844. margin: 15px 24px 13px 16px;
  845. border-radius:100%;}
  846. /* player */
  847. .playbox {
  848. background-color: white;
  849. position: absolute;
  850. z-index: 1000;
  851. margin-top: 70px;
  852. margin-left: 70px;
  853. -webkit-border-radius: 100px;
  854. -moz-border-radius: 100px;
  855. border-radius: 100px;
  856. opacity: 0.6;}
  857. /* album art */
  858. .cover {
  859. position: relative;
  860. z-index: 1;
  861. width:200px;}
  862. /* track info text */
  863. .trackinfo {
  864. text-align: left;
  865. margin-bottom: 10px;
  866. background: transparent;
  867. color: #888888;
  868. top: -30px;
  869. left: 105px;
  870. position: relative;
  871. margin-left: 120px;
  872. /* padding-top: 120px; */
  873. height: 110px;
  874. margin-top: -120px;
  875. display: flex;
  876. flex-direction: column;
  877. align-items: flex-start;}
  878. .trackname {}
  879. .artist {}
  880. .album {}
  881.  
  882. /* like and reblog buttons */
  883. .controls .my-like .like_button iframe {
  884. {block:ifcustomcursor}
  885. cursor:url('{image:hovered cursor}'), pointer !important;
  886. {/block:ifcustomcursor}
  887. position:absolute;
  888. top:0;
  889. left:0;
  890. bottom:0;
  891. right:0;
  892. z-index:2;
  893. opacity:0;}
  894. .svg {
  895. {block:ifcustomcursor}
  896. cursor:url('{image:hovered cursor}'), pointer !important;
  897. {/block:ifcustomcursor}
  898. height:{text:svg height}px;
  899. width:{text:svg width}px;
  900. opacity:1;
  901. padding:1px;
  902. overflow:visible;
  903. display:inline-block;
  904. vertical-align:top;}
  905. .controls a {
  906. {block:ifcustomcursor}
  907. cursor:url('{image:hovered cursor}'), pointer !important;
  908. {/block:ifcustomcursor}
  909. fill:{color:like button};
  910. position:relative;
  911. display:inline-block;
  912. overflow:visible;
  913. /* top right bottom left */
  914. padding:5px 0px 10px 0px;
  915. margin:-38px 35px 0px 0px;
  916. height:{text:svg height}px;
  917. width:{text:svg width}px;}
  918. .controls .my-like:hover {
  919. {block:ifcustomcursor}
  920. cursor:url('{image:hovered cursor}'), pointer !important;
  921. {/block:ifcustomcursor}
  922. fill:{color:like button hover};}
  923. .controls .reblog {
  924. opacity:1;
  925. /* top right bottom left */
  926. margin:-37px 5px 0px 0px;
  927. fill:{color:reblog button};}
  928. .controls .reblog:hover{
  929. {block:ifcustomcursor}
  930. cursor:url('{image:hovered cursor}'), pointer !important;
  931. {/block:ifcustomcursor}
  932. fill:{color:reblog button hover};}
  933. .controls .reblog svg {
  934. height:{text:svg height}px;
  935. width:{text:svg width}px;
  936. margin-top:1px;}
  937. .controls .my-like .liked + .svg {
  938. {block:ifcustomcursor}
  939. cursor:url('{image:hovered cursor}'), pointer !important;
  940. {/block:ifcustomcursor}
  941. opacity:1;}
  942. .controls .my-like .liked + .svg path {
  943. {block:ifcustomcursor}
  944. cursor:url('{image:hovered cursor}'), pointer !important;
  945. {/block:ifcustomcursor}
  946. fill:{color:like button clicked};}
  947. .controls .my-like {
  948. {block:ifcustomcursor}
  949. cursor:url('{image:hovered cursor}'), pointer !important;
  950. {/block:ifcustomcursor}
  951. background-image: url() !important;
  952. /* top right bottom left */
  953. margin:-38px 35px 0px 0px;
  954. height:{text:svg height}px;
  955. width:{text:svg width}px;
  956. display:inline-block;
  957. vertical-align:top;}
  958.  
  959. /* script for like and reblog buttons */
  960. <script>
  961. window.onload = function () {
  962. document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' ); document.addEventListener( 'click', function ( event ) {
  963. var myLike = event.target;
  964. if( myLike.className.indexOf( 'my-like' ) > -1 ) {
  965. var frame = document.getElementById( 'my-like-frame' ),
  966. liked = ( myLike.className == 'my-liked' ),
  967. command = liked ? 'unlike' : 'like',
  968. reblog = myLike.getAttribute( 'data-reblog' ),
  969. id = myLike.getAttribute( 'data-id' ),
  970. oauth = reblog.slice( -8 );
  971. frame.src = 'https://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
  972. liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
  973. };
  974. }, false );
  975. };
  976. </script>
  977.  
  978. /*media queries*/
  979. /* small devices (phones, 768px and down) */
  980. @media (max-width: 768px) {
  981.  
  982. }
  983.  
  984. /* Small devices (portrait tablets and large phones, 600px and up) */
  985. @media (min-width: 600px) {...}
  986.  
  987. /* Medium devices (landscape tablets, 768px and up) */
  988. @media (min-width: 768px) {
  989.  
  990. }
  991.  
  992. /* DONE */
  993. /* Large devices (laptops/desktops, 992px and up) */
  994. @media (min-width: 992px) {
  995.  
  996. }
  997.  
  998. /* Extra large devices (large laptops and desktops, 1200px and up) */
  999. @media (min-width: 1200px) {
  1000.  
  1001. }
  1002.  
  1003. {CustomCSS}
  1004. </style>
  1005.  
  1006. </head>
  1007. {block:ifcustomcursor}
  1008. <div class="cursor">
  1009. {/block:ifcustomcursor}
  1010. <body data-overlayscrollbars-initialize>
  1011.  
  1012. <main>
  1013. <div class="topbg">
  1014. <div class="top" data-overlayscrollbars-initialize>
  1015. <div class="content">
  1016. <!--
  1017.  
  1018. begin posts
  1019.  
  1020. -->
  1021.  
  1022.  
  1023. <!-- bychloethemes alternate tumblr controls -->
  1024. <link href='https://static.tumblr.com/8pnyeus/AuJogrujr/tumblrcontrols.css' rel='stylesheet' type='text/css'>
  1025.  
  1026. <div class="tumblr-controlx">
  1027.  
  1028. <!-- home button -->
  1029. <a href="/" title="inicio">
  1030.  
  1031. <div class="home">
  1032. {image:homeicon}
  1033. </div>
  1034.  
  1035. </a>
  1036.  
  1037. <!-- about me button -->
  1038. <a href="/quien" title="quién?">
  1039.  
  1040. <div class="about">
  1041. {image:abouticon}
  1042. </div>
  1043.  
  1044. </a>
  1045.  
  1046. <!-- ask button -->
  1047. <a href="/ask" title="pregúnteme">
  1048.  
  1049. <div class="ask">
  1050. {image:askicon}
  1051. </div>
  1052.  
  1053. </a>
  1054.  
  1055. <!-- archive button -->
  1056. <a href="/archive" title="archivo">
  1057.  
  1058. <div class="archive">
  1059. {image:archiveicon}
  1060. </div>
  1061.  
  1062. </a>
  1063.  
  1064. <!-- follow button -->
  1065. <a href="#" title="seguir" onClick="MyWindow=window.open('https://tumblr.com/follow/{name}','MyWindow','width=600,height=360,top=120,left=400'); return false;">
  1066.  
  1067. <div class="followed">
  1068. {image:followedicon}
  1069. </div>
  1070.  
  1071. </a>
  1072.  
  1073. <!-- message button -->
  1074. <a href="https://tumblr.com/message/{name}"title="message" target="_blank">
  1075.  
  1076. <div class="messaged">
  1077. {image:messagedicon}
  1078. </div>
  1079.  
  1080. </a>
  1081.  
  1082. <!-- dashboard button -->
  1083. <a href="https://tumblr.com/dashboard" title="dashboard">
  1084.  
  1085. <div class="dashboard">
  1086. {image:dashboardicon}
  1087. </div>
  1088.  
  1089. </a>
  1090.  
  1091.  
  1092. </div> <!-- <div class="tumblr-controlx"> -->
  1093. <br>
  1094. <!--end of alternate tumblr controls-->
  1095.  
  1096.  
  1097. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1098. <div class="posts" post-type="{PostType}" id="{PostID}" posts-selector>
  1099.  
  1100. <!-- title -->
  1101. {block:Title}
  1102.  
  1103.  
  1104. <a href="{Permalink}" class="title">
  1105. {Title}
  1106. </a>
  1107.  
  1108. {/block:Title}
  1109. <!-- end title -->
  1110.  
  1111.  
  1112. <!-- text -->
  1113. {block:Text}
  1114.  
  1115. <div class="text">
  1116.  
  1117. {block:NotReblog}
  1118. {Body}
  1119. {/block:NotReblog}
  1120.  
  1121. {block:RebloggedFrom}
  1122. {block:Reblogs}
  1123. <div class="comment_container">
  1124. <div class="commenter">
  1125. <img src="{PortraitURL-64}"/>
  1126. <span>
  1127.  
  1128. {block:HasPermalink}
  1129. <a href="{Permalink}">
  1130. {/block:HasPermalink}
  1131.  
  1132. <div class="username">
  1133. {Username}
  1134. </div>
  1135.  
  1136. {block:HasPermalink}
  1137. </a>
  1138. {/block:HasPermalink}
  1139.  
  1140. </span>
  1141. </div> <!-- <div class="commenter"> -->
  1142.  
  1143. <div class="comment">
  1144. {Body}
  1145. </div>
  1146.  
  1147. </div> <!-- <div class="comment container"> -->
  1148. {/block:Reblogs}
  1149. {/block:RebloggedFrom}
  1150.  
  1151. </div> <!-- <div class="text"> -->
  1152.  
  1153. {/block:Text}
  1154. <!-- end text -->
  1155.  
  1156.  
  1157. <!-- photo -->
  1158. {block:Photo}
  1159.  
  1160. <div class="photo">
  1161. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  1162. </div>
  1163.  
  1164. {/block:Photo}
  1165. <!-- end photo -->
  1166.  
  1167.  
  1168. <!-- photoset -->
  1169. {block:Photoset}
  1170.  
  1171. <div class="set">
  1172. <center>
  1173. <div class="pxu">
  1174. <div class="photo-slideshow"
  1175. id="photoset_{PostID}"
  1176. data-layout="{PhotosetLayout}">
  1177.  
  1178. {block:Photos}
  1179.  
  1180. <div class="photo-data">
  1181. <div class="pxu-photo">
  1182. <img
  1183. src="{PhotoURL-500}"
  1184. width="{PhotoWidth-500}"
  1185. height="{PhotoHeight-500}"
  1186. data-highres="{PhotoURL-HighRes}"
  1187. data-width="{PhotoWidth-HighRes}"
  1188. data-height="{PhotoHeight-HighRes}">
  1189. </div> <!-- <div class="pxu-photo"> -->
  1190.  
  1191. <a class="tumblr-box"
  1192. rel="post-{PostID}"
  1193. href="{PhotoURL-HighRes}">
  1194. </a>
  1195. </div> <!-- <div class="photo-data"> -->
  1196.  
  1197. {/block:Photos}
  1198.  
  1199. </div> <!-- <div class="photo-slideshow"> -->
  1200. </div> <!-- <div class="pxu"> -->
  1201. </center>
  1202. </div> <!-- <div class="set"> -->
  1203.  
  1204. {/block:Photoset}
  1205. <!-- end photoset -->
  1206.  
  1207.  
  1208. <!-- quote -->
  1209. {block:Quote}
  1210.  
  1211. <div class="quote-words">
  1212. {Quote}
  1213. </div>
  1214.  
  1215. {block:Source}
  1216. <div class="quote-source">
  1217. {Source}
  1218. </div>
  1219. {/block:Source}
  1220.  
  1221. {/block:Quote}
  1222. <!-- end quote -->
  1223.  
  1224.  
  1225. <!-- link -->
  1226. {block:Link}
  1227.  
  1228. <a href="{URL}"
  1229. class="path{block:Description} has-desc{/block:Description}"
  1230. {Target}>
  1231. {Name}
  1232. </a>
  1233.  
  1234. {block:Description}
  1235. <div class="link-description">
  1236.  
  1237. {block:NotReblog}
  1238. {Description}
  1239. {/block:NotReblog}
  1240.  
  1241. {block:RebloggedFrom}
  1242. {block:Reblogs}
  1243. <div class="comment_container">
  1244. <div class="commenter">
  1245. <img src="{PortraitURL-64}"/>
  1246. <span>
  1247.  
  1248. {block:HasPermalink}
  1249. <a href="{Permalink}">
  1250. {/block:HasPermalink}
  1251.  
  1252. <div class="username">
  1253. {Username}
  1254. </div>
  1255.  
  1256. {block:HasPermalink}
  1257. </a>
  1258. {/block:HasPermalink}
  1259.  
  1260. </span>
  1261. </div> <!-- <div class="commenter"> -->
  1262.  
  1263. <div class="comment">
  1264. {Body}
  1265. </div>
  1266.  
  1267. </div> <!-- <div class="comment container="> -->
  1268. {/block:Reblogs}
  1269. {/block:RebloggedFrom}
  1270.  
  1271. </div> <!-- <div class="link-description"> -->
  1272. {/block:Description}
  1273.  
  1274. {/block:Link}
  1275. <!-- end link -->
  1276.  
  1277.  
  1278. <!-- chat -->
  1279. {block:Chat}
  1280.  
  1281. <div>
  1282.  
  1283. {block:Lines}
  1284. <div class="line">
  1285. <span class="label">
  1286.  
  1287. {block:Label}
  1288. {Label}
  1289. {/block:Label}
  1290.  
  1291. </span>
  1292. {Line}
  1293. </div>
  1294. {/block:Lines}
  1295.  
  1296. </div>
  1297.  
  1298. {/block:Chat}
  1299. <!-- end chat -->
  1300.  
  1301.  
  1302. <!-- audio -->
  1303. {block:Audio}
  1304.  
  1305. <div class="playbox">
  1306. <div class="playbutton">
  1307. {block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}
  1308. </div>
  1309. </div>
  1310.  
  1311. {block:AlbumArt}
  1312. <img src="{AlbumArtURL}" class="cover">
  1313. {/block:AlbumArt}
  1314.  
  1315. <div class="trackinfo">
  1316.  
  1317. <div class="trackname">
  1318. {block:TrackName}<b>song:</b>&nbsp;{TrackName}{/block:TrackName}
  1319. </div>
  1320.  
  1321. <div class="artist">
  1322. {block:Artist}<b>artist:</b>&nbsp;{Artist}{/block:Artist}
  1323. </div>
  1324.  
  1325. <div class="album">
  1326. {block:Album}<b>album:</b>&nbsp;{Album}{/block:Album}
  1327. </div>
  1328.  
  1329. </div>
  1330.  
  1331. {/block:Audio}
  1332. <!-- end audio -->
  1333.  
  1334.  
  1335. <!-- video -->
  1336. {block:Video}
  1337.  
  1338. <div class="video">
  1339. {Video-700}
  1340. </div>
  1341.  
  1342. {/block:Video}
  1343. <!-- end video -->
  1344.  
  1345.  
  1346. <!-- questions -->
  1347. {block:Answer}
  1348. <div class="question_container">
  1349.  
  1350. <div class="something">
  1351. <div class="askerimg">
  1352. <img src="{AskerPortraitURL-64}"/>
  1353. </div>
  1354.  
  1355. <div class="asker">
  1356. {Asker}
  1357. </div> <!-- <div class="asker"> -->
  1358. </div>
  1359.  
  1360. <div class="question_text">
  1361. {Question}
  1362. </div>
  1363.  
  1364. </div> <!-- <div class="question_container"> -->
  1365.  
  1366. {block:Answerer}
  1367.  
  1368. <div class="answer_container">
  1369.  
  1370. <div class="something">
  1371. <div class="answerer">
  1372. <img src="{AnswererPortraitURL-64}"/>
  1373. {Answerer}
  1374. </div> <!-- <div class="answerer"> -->
  1375. </div>
  1376.  
  1377. <div class="answer_text">
  1378. {Answer}
  1379. </div>
  1380.  
  1381. </div> <!-- <div class="answer_container"> -->
  1382.  
  1383. {block:Reblogs}
  1384. <div class="reply_container">
  1385.  
  1386. <div class="something">
  1387. <div class="replier">
  1388. <img src="{PortraitURL-64}"/>
  1389. </div>
  1390.  
  1391. {block:HasPermalink}
  1392. <a href="{Permalink}">
  1393. {/block:HasPermalink}
  1394.  
  1395. <div class="username">
  1396. {Username}
  1397. </div>
  1398. </div>
  1399.  
  1400. {block:HasPermalink}
  1401. </a>
  1402. {/block:HasPermalink}
  1403.  
  1404. <div class="reply">
  1405. {Body}
  1406. </div>
  1407.  
  1408. </div> <!-- <div class="reply_container"> -->
  1409. {/block:Reblogs}
  1410. {/block:Answerer}
  1411.  
  1412. {block:NotReblog}
  1413. <div class="answer_container">
  1414.  
  1415. <div class="something">
  1416. <div class="answerer">
  1417. <img src="{PortraitURL-64}"/>
  1418.  
  1419. <a href="{Permalink}">
  1420. {Name}
  1421. </a>
  1422. </div> <!-- <div class="answerer"> -->
  1423. </div>
  1424.  
  1425. <div class="answer_text">
  1426. {Answer}
  1427. </div>
  1428.  
  1429. </div> <!-- <div class="answer_container"> -->
  1430. {/block:NotReblog}
  1431.  
  1432. {/block:Answer}
  1433. <!-- end questions -->
  1434.  
  1435.  
  1436. <!-- caption -->
  1437. {block:Caption}
  1438.  
  1439. <div class="caption">
  1440. {block:NotReblog}
  1441. {Caption}
  1442. {/block:NotReblog}
  1443.  
  1444. {block:RebloggedFrom}
  1445. {block:Reblogs}
  1446. <div class="comment_container">
  1447. <div class="commenter">
  1448. <img src="{PortraitURL-64}" />
  1449. <span>
  1450.  
  1451. {block:HasPermalink}
  1452. <a href="{Permalink}">
  1453. {/block:HasPermalink}
  1454.  
  1455. <div class="username">
  1456. {Username}
  1457. </div>
  1458.  
  1459. {block:HasPermalink}
  1460. </a>
  1461. {/block:HasPermalink}
  1462.  
  1463. </span>
  1464. </div> <!-- <div class="commenter"> -->
  1465.  
  1466. <div class="comment">
  1467. {Body}
  1468. </div>
  1469.  
  1470. </div> <!-- <div class="comment_container"> -->
  1471. {/block:Reblogs}
  1472. {/block:RebloggedFrom}
  1473. </div> <!-- <div class="caption"> -->
  1474.  
  1475. {/block:Caption}
  1476. <!-- end caption -->
  1477.  
  1478.  
  1479. <!-- date, footer, tags, permalink line + page, like + reblog buttons -->
  1480. {block:Date}
  1481.  
  1482. <div class="footer">
  1483. <br>
  1484. <!-- change notes name here -->
  1485. <a href="{Permalink}"
  1486. title="{NoteCount} notas"
  1487. data-toggle="tooltip">
  1488. {Month}. {DayOfMonth}. {Year}.
  1489. </a>
  1490.  
  1491. {block:RebloggedFrom}
  1492. <a href="{ReblogParentURL}"
  1493. style="float:right;font-size:22px"
  1494. title="via">
  1495. </a>
  1496. {/block:RebloggedFrom}
  1497.  
  1498. <!-- permalink line, like + reblog button icons -->
  1499. <div class="controls">
  1500.  
  1501. <a href="{ReblogURL}"
  1502. target="_blank"
  1503. class="reblog"
  1504. style="float:right;"
  1505. title="rebloguear">
  1506.  
  1507. <div class="svg">
  1508. <svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 576 512">
  1509. <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"/>
  1510. </g>
  1511. </g>
  1512. </svg>
  1513. </div> <!-- <div class="svg"> -->
  1514. </a>
  1515.  
  1516. <a class="my-like"
  1517. style="float:right;"
  1518. title="like"
  1519. data-reblog="{ReblogURL}"
  1520. data-id="{PostID}">
  1521. {LikeButton}
  1522.  
  1523. <div class="svg">
  1524. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  1525. <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"/>
  1526. </g>
  1527. </g>
  1528. </svg>
  1529. </div> <!-- <div class="svg"> -->
  1530. </a>
  1531.  
  1532. </div> <!-- <div class="controls"> -->
  1533.  
  1534. </div> <!-- <div class="footer"> -->
  1535. <!-- end permalink line, like + reblog button icons -->
  1536.  
  1537. <!-- tags -->
  1538. {block:HasTags}
  1539. <a class="tag-button"
  1540. style="float:right;"
  1541. title="show tags">
  1542. <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">
  1543. <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>
  1544. <line x1="7" y1="7" x2="7.01" y2="7"></line>
  1545. </svg>
  1546. </a>
  1547. {/block:HasTags}
  1548.  
  1549. {block:HasTags}
  1550. <div class="tags">
  1551. {block:Tags}
  1552. <a href="{TagURL}" init-tags>#{Tag}&#32;</a>
  1553. {/block:Tags}
  1554. </div>
  1555. {/block:HasTags}
  1556. <!-- end tags -->
  1557.  
  1558. <!-- permalink page source names -->
  1559. {block:PermalinkPage}
  1560. {block:RebloggedFrom}
  1561.  
  1562. <center>
  1563.  
  1564. <b>reblogged from</b>: <a href="{ReblogParentURL}">{ReblogParentName}</a> /
  1565. <b>originally by</b>: <a href="{ReblogRootURL}">{ReblogRootName}</a>
  1566. {/block:RebloggedFrom}
  1567.  
  1568. {block:ContentSource} /
  1569. <b>content source</b>: <a href="{SourceURL}">{SourceTitle}</a>
  1570. {/block:ContentSource}
  1571.  
  1572. </center>
  1573.  
  1574. <br>
  1575. <!-- end permalink page source names -->
  1576.  
  1577. <!-- permalink page notes -->
  1578. <div class="notes">
  1579.  
  1580. {block:NoteCount}
  1581. {block:PostNotes}
  1582. {PostNotes}
  1583. {/block:PostNotes}
  1584. {/block:NoteCount}
  1585.  
  1586. </div>
  1587. <!-- end permalink page notes -->
  1588.  
  1589. {/block:PermalinkPage}
  1590. {/block:Date}
  1591. <!-- end date, footer, tags, permalink line + page, like + reblog buttons -->
  1592.  
  1593.  
  1594. </div> <!-- <div class="posts"> -->
  1595. {/block:Posts}
  1596. <!--
  1597.  
  1598. end posts
  1599.  
  1600. -->
  1601.  
  1602.  
  1603. <!-- pagination pages and arrows -->
  1604. <div class="pagination">
  1605. {block:Pagination}
  1606.  
  1607. {block:PreviousPage}
  1608. <a href="{PreviousPage}" class="jump_page">←</a>
  1609. {/block:PreviousPage}
  1610.  
  1611. {block:JumpPagination length="5"}
  1612. {block:CurrentPage}
  1613. <span class="current_page">
  1614. {PageNumber}
  1615. </span>
  1616. {/block:CurrentPage}
  1617.  
  1618. {block:JumpPage}
  1619. <a class="jump_page" href="{URL}">
  1620. {PageNumber}
  1621. </a>
  1622. {/block:JumpPage}
  1623. {/block:JumpPagination}
  1624.  
  1625. {block:NextPage}
  1626. <a href="{NextPage}" class="jump_page">→</a>
  1627. {/block:NextPage}
  1628.  
  1629. {/block:Pagination}
  1630. </div> <!-- <div class="pagination"> -->
  1631. <!-- end pagination pages and arrows -->
  1632.  
  1633.  
  1634. <!-- scripts -->
  1635. <!-- jquery -->
  1636. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  1637. <script>window.jQuery || document.write('<script src="https://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  1638.  
  1639. <!-- smoothscroll -->
  1640. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  1641.  
  1642. <!-- overlayscrollbar -->
  1643. {block:ifoverlayscrollbar}
  1644. <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.5.0/styles/overlayscrollbars.css" rel="stylesheet" />
  1645. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.5.0/browser/overlayscrollbars.browser.es6.min.js" defer></script>
  1646.  
  1647. <!-- change height size of overlayscrollbar -->
  1648. <style>
  1649. .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  1650. min-height: 100px;
  1651. max-height: 100px;}
  1652. .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  1653. min-width: 100px;
  1654. max-width: 100px;}
  1655. </style>
  1656. {/block:ifoverlayscrollbar}
  1657.  
  1658. <!-- overlayscrollbar custom color theme -->
  1659. {block:ifoverlayscrollbarcolor}
  1660. <script>
  1661. window.addEventListener("load", (event) => {
  1662. var {
  1663. OverlayScrollbars,
  1664. ScrollbarsHidingPlugin,
  1665. SizeObserverPlugin,
  1666. ClickScrollPlugin
  1667. } = OverlayScrollbarsGlobal;
  1668. document.querySelectorAll('[data-overlayscrollbars-initialize]').forEach((elm) => {
  1669. OverlayScrollbars(elm, {
  1670. scrollbars: {
  1671. theme: 'os-theme-custom'
  1672. }
  1673. });
  1674. });
  1675. });
  1676. </script>
  1677.  
  1678. <style>
  1679. .os-theme-custom {
  1680. --os-size: 12px;
  1681. --os-padding-perpendicular: 0;
  1682. --os-padding-axis: 0;
  1683. --os-track-border-radius: 0;
  1684. --os-track-bg: red;
  1685. --os-track-bg-hover: green;
  1686. --os-track-bg-active: yellow;
  1687. --os-track-border: pink;
  1688. --os-track-border-hover: orange;
  1689. --os-track-border-active: purple;
  1690. --os-handle-bg: cyan;
  1691. --os-handle-bg-hover: lime;
  1692. --os-handle-bg-active: black;
  1693. --os-handle-border: red;
  1694. --os-handle-border-hover: red;
  1695. --os-handle-border-active: red;
  1696. --os-handle-min-size: 33px;
  1697. --os-handle-max-size: red;
  1698. --os-handle-perpendicular-size: 100%;
  1699. --os-handle-perpendicular-size-hover: 100%;
  1700. --os-handle-perpendicular-size-active: 100%;
  1701. --os-handle-interactive-area-offset: 0;
  1702. /* rounds out the corners of scrollbar */
  1703. --os-track-border-radius: 10px;
  1704. --os-handle-border-radius: 10px;}
  1705. </style>
  1706. {/block:ifoverlayscrollbarcolor}
  1707.  
  1708. <!-- overlayscrollbar dark color theme -->
  1709. {block:ifoverlayscrollbardark}
  1710. <script>
  1711. window.addEventListener("load", (event) => {
  1712. var {
  1713. OverlayScrollbars,
  1714. ScrollbarsHidingPlugin,
  1715. SizeObserverPlugin,
  1716. ClickScrollPlugin
  1717. } = OverlayScrollbarsGlobal;
  1718. document.querySelectorAll('[data-overlayscrollbars-initialize]').forEach((elm) => {
  1719. OverlayScrollbars(elm, {
  1720. scrollbars: {
  1721. theme: 'os-theme-dark'
  1722. }
  1723. });
  1724. });
  1725. });
  1726. </script>
  1727.  
  1728. <style>
  1729. .os-theme-dark {
  1730. --os-handle-bg: #bbbbbb;
  1731. --os-handle-bg-hover: #888888;
  1732. --os-handle-bg-active: #888888;}
  1733. </style>
  1734. {/block:ifoverlayscrollbardark}
  1735.  
  1736. <!-- remove unecessary tumblr url strings in redirects by magnusthemes -->
  1737. <script>
  1738. $(document).ready(function(){
  1739. $('a[href*="t.umblr.com/redirect"]').each(function(){
  1740. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1741. var replaceURL = decodeURIComponent(originalURL);
  1742. $(this).attr("href", replaceURL);
  1743. });
  1744. });
  1745. </script>
  1746.  
  1747. <!-- seyche click icon to show tags script -->
  1748. {block:ifhiddentags}
  1749. <script>
  1750. $(document).ready(function(){
  1751. $('.tags').hide();
  1752. $('.tag-button').click(function() {
  1753. $(this).closest('.posts').find('.tags').slideToggle(500);
  1754. $(this).toggleClass('tag-clicked');
  1755. return false;
  1756. });
  1757. });
  1758. </script>
  1759. {/block:ifhiddentags}
  1760.  
  1761. <!--
  1762. NPF images fix v4.0 by @glenthemes [2023]
  1763. 💌 gitlab.com/glen-npf/v4-beta
  1764. --->
  1765. <link href="//glen-npf.gitlab.io/v4-beta/main.css" rel="stylesheet">
  1766. <script src="//glen-npf.gitlab.io/v4-beta/use.js"></script>
  1767. <style>
  1768. :root {
  1769. --NPF-Images-Spacing:4px;
  1770. --NPF-Caption-Spacing:{select:npf caption spacing};
  1771. {block:ifmovephotosetcaption}
  1772. --NPF-Move-1st-Photoset:"yes";
  1773. {/block:ifmovephotosetcaption}
  1774. {block:ifunmovephotosetcaption}
  1775. --NPF-Move-1st-Photoset:"no";
  1776. {/block:ifunmovephotosetcaption}
  1777. --Text-Container-Selector:".text";
  1778. --Text-Reblogs-Selector:".comment_container";
  1779. }
  1780. </style>
  1781.  
  1782. <!--✻✻✻✻✻✻ resize iframes: @glenthemes ✻✻✻✻✻✻-->
  1783. <script src="https://glen-iframes.gitlab.io/i/use.js"></script>
  1784.  
  1785. <!--✻✻✻✻✻✻ spoilerTags by @glenthemes ✻✻✻✻✻✻-->
  1786. <script src="//spoilertags.gitlab.io/s/v2/filter.js"></script>
  1787. <link href="https://static.tumblr.com/7uvywyd/cdos7v4xx/spoilertags_style.css" rel="stylesheet">
  1788. <script>
  1789. document.addEventListener("DOMContentLoaded", () => {
  1790. spoilerTagsV2({
  1791. filter: [
  1792. "#spoiler",
  1793. "#spoilers",
  1794. "#mature label",
  1795. ],
  1796.  
  1797. message: "this post contains the following:",
  1798. includeHashtag: "no",
  1799. tagSeparator: ", ",
  1800. viewPostText: "show anyway",
  1801. shrinkPosts: "yes"
  1802. })
  1803. })
  1804. </script>
  1805. <style spoilertags>
  1806. :root {
  1807. --Spoiler-Overlay-Color:#ffffff;
  1808. --Spoiler-Warning-Padding:25px;
  1809. --Spoiler-Warning-Color:#1a1919;
  1810. --Spoiler-Warning-Row-Spacing:1em;
  1811. --Spoiler-Tags-Color:#1a1919;
  1812. --Spoiler-Button-Padding:0.7rem;
  1813. --Spoiler-Button-Background:#ffffff;
  1814. --Spoiler-Button-Border:#eeeeee;
  1815. --Spoiler-Button-Roundness:4px;
  1816. --Spoiler-Button-Text-Color:#444444;
  1817. --Spoiler-Button-HOVER-Border:#222222;
  1818. --Spoiler-Button-HOVER-Background:#222222;
  1819. --Spoiler-Button-HOVER-Text-Color:#efefef;
  1820. --Spoiler-Button-HOVER-Speed:0.25s;
  1821. --Spoiler-Fade-Speed:0.4s;
  1822. --Shrink-Posts-Speed:0.1s;}
  1823. .show-spoiler button {
  1824. font-family:inherit;
  1825. font-weight:bold;
  1826. text-transform:uppercase;
  1827. letter-spacing:1px;
  1828. {block:ifcustomcursor}
  1829. cursor:url('{image:hovered cursor}'), pointer;
  1830. {/block:ifcustomcursor}
  1831. font-size:12px;
  1832. }
  1833. </style>
  1834.  
  1835. <!--✻✻✻✻✻✻ UN-BLUE POLLS by @glenthemes ✻✻✻✻✻✻-->
  1836. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  1837. <style>
  1838. .poll-post {
  1839. --Poll-Question-Font-Size: {text:text size}px;
  1840. --Poll-Option-Background-Color: #fcfcfc;
  1841. --Poll-Option-Corner-Rounding: 18px;
  1842. --Poll-Option-Border-Size: 2px;
  1843. --Poll-Option-Border-Color: #eee;
  1844. --Poll-Option-Padding: 11px;
  1845. --Poll-Option-Font-Size: {text:text size}px;
  1846. --Poll-Option-Spacing: 10px;
  1847. --Poll-Option-Text-Color: #666666;
  1848. --Poll-Option-HOVER-Border-Color: #eee;
  1849. --Poll-Option-HOVER-Background-Color: #eee;
  1850. --Poll-Option-HOVER-Text-Color: #1a1b1d;
  1851. --Poll-Option-HOVER-Speed: 0.2s;}
  1852. </style>
  1853.  
  1854. <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
  1855. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  1856. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  1857. <script>
  1858. tumblr_npf_audio({
  1859. emptyTitleText: "intitulada",
  1860. emptyArtistText: "intitulada",
  1861. emptyAlbumText: "intitulada",
  1862.  
  1863. titleLabel: "canción:",
  1864. artistLabel: "artista:",
  1865. albumLabel: "álbum:"
  1866. });
  1867. </script>
  1868. <style edit-npf-audio-player>
  1869.  
  1870. /*--- variables for npf audio players ---*/
  1871. .npf-audio-wrapper {
  1872. /*--- npf audio play & pause --*/
  1873. --NPF-Audio-Buttons-Padding: 16px;
  1874. --NPF-Audio-Buttons-BG: rgba(0, 0, 0, 0.52);
  1875. --NPF-Audio-Buttons-Size: 26px;
  1876. --NPF-Audio-Buttons-Color: #eeeeee;
  1877. --NPF-Audio-Buttons-Spacing: 0px;
  1878.  
  1879. /*--- npf audio album image ---*/
  1880. --NPF-Audio-Image-Size: 200px;
  1881. --NPF-Audio-Image-Spacing: 0px;
  1882.  
  1883. /*--- npf audio info/details text ---*/
  1884. --NPF-Audio-Info-Padding: 25px;
  1885. --NPF-Audio-Info-BG: transparent;
  1886. --NPF-Audio-Info-Font-Size: 25px;
  1887. --NPF-Audio-Info-Text-Color: {color:npf audio info};
  1888. }
  1889.  
  1890. .npf-audio-wrapper {
  1891. /*
  1892. position:relative; helps us set stuff up
  1893. for position:absolute; later
  1894. */
  1895. position:relative;
  1896. width:100%;
  1897.  
  1898. /*
  1899. reverse the horizontal order of the
  1900. npf audio player, so that the image comes first
  1901. */
  1902. flex-direction:row-reverse;
  1903.  
  1904. /*
  1905. z-index determines which elements on a
  1906. webpage appear on top of others.
  1907.  
  1908. it's like stacking sheets of paper,
  1909. where a higher z-index means the
  1910. element is on top, and takes priority
  1911. over other elements.
  1912.  
  1913. z-index:0; (together with position:relative;)
  1914. helps us set stuff up for z-index:2; later.
  1915. */
  1916. z-index:0;
  1917. }
  1918.  
  1919. .npf-audio-image {
  1920. margin-right:calc(0px - var(--NPF-Audio-Image-Size));
  1921. }
  1922.  
  1923. .npf-audio-background {
  1924. margin-left:var(--NPF-Audio-Image-Size);
  1925. background-color: var(--NPF-Audio-Info-BG);
  1926. padding: var(--NPF-Audio-Info-Padding);
  1927. }
  1928.  
  1929. .npf-audio-buttons {
  1930. /*
  1931. because we set position:relative; on the container,
  1932. the buttons container will now position itself
  1933. based on where the container is.
  1934.  
  1935. without position:relative on the container,
  1936. position:absolute; on the buttons will cause them
  1937. to fly outside of the posts.
  1938. */
  1939. position:absolute;
  1940. top:0;left:0;
  1941.  
  1942. /*
  1943. this next line is to override the existing
  1944. styling from the npf audio plugin
  1945. */
  1946. margin-right:0;
  1947.  
  1948. /*
  1949. the next 3 lines creates a container space
  1950. that is the same size as the album image,
  1951. then positions its inner contents both
  1952. vertically & horizontally.
  1953. */
  1954. display:flex;
  1955. align-items:center; /* positions stuff vertically */
  1956. justify-content:center; /* positions stuff horizontally */
  1957.  
  1958. width:var(--NPF-Audio-Image-Size);
  1959. height:var(--NPF-Audio-Image-Size);
  1960.  
  1961. /*
  1962. because we set position:relative; and
  1963. z-index:0; on the container earlier,
  1964. z-index:2; here means that it will
  1965. appear on top of the album image rather
  1966. than beneath it.
  1967. */
  1968. z-index:2;
  1969.  
  1970. {block:ifcustomcursor}
  1971. cursor:url('{image:hovered cursor}'), pointer !important;
  1972. {/block:ifcustomcursor}
  1973. }
  1974.  
  1975. .npf-audio-play, .npf-audio-pause {
  1976. /*
  1977. the next 3 lines creates a container space
  1978. that is the same size as the album image,
  1979. then positions its inner contents both
  1980. vertically & horizontally.
  1981. */
  1982. display:flex;
  1983. align-items:center; /* positions stuff vertically */
  1984. justify-content:center; /* positions stuff horizontally */
  1985.  
  1986. /*
  1987. what we're doing in the next few lines is
  1988. creating the "circle" that's around the
  1989. play & pause buttons.
  1990.  
  1991. instead of using padding, I'm using width
  1992. and height to create the size of the circle,
  1993. then placing the icons in the center.
  1994. */
  1995. width:calc(var(--NPF-Audio-Buttons-Size) + (var(--NPF-Audio-Buttons-Padding) * 2));
  1996. height:calc(var(--NPF-Audio-Buttons-Size) + (var(--NPF-Audio-Buttons-Padding) * 2));
  1997. background:var(--NPF-Audio-Buttons-BG);
  1998. border-radius:100%;
  1999. }
  2000.  
  2001. /*
  2002. the next 2 lines is to override the existing
  2003. styling from the npf audio player.
  2004.  
  2005. this means, whenever an icon is showing,
  2006. instead of "display:block",
  2007. use "display:flex" instead.
  2008.  
  2009. "display:flex" can center things well,
  2010. whilst "display:block" cannot.
  2011. */
  2012. .npf-audio-play[style*="display: block;"],
  2013. .npf-audio-pause[style*="display: block;"]{
  2014. display:flex!important;
  2015. }
  2016.  
  2017. .npf-audio-play svg, .npf-audio-pause svg {
  2018. width:var(--NPF-Audio-Buttons-Size);
  2019. height:var(--NPF-Audio-Buttons-Size);
  2020. }
  2021.  
  2022. /*
  2023. the next 2 lines is to override the existing
  2024. styling from the npf audio player, just
  2025. to make the icons appear more centered.
  2026. */
  2027. .npf-audio-play svg { margin-left:2px!important; }
  2028. .npf-audio-pause svg { margin-left:0!important; }
  2029.  
  2030. .npf-audio-details {
  2031. font-size:var(--NPF-Audio-Info-Font-Size);
  2032. }
  2033.  
  2034. .npf-audio-title-label,
  2035. .npf-audio-artist-label,
  2036. .npf-audio-album-label {
  2037. font-weight: bold;
  2038. }
  2039.  
  2040. .npf-audio-title,
  2041. .npf-audio-artist,
  2042. .npf-audio-album {
  2043. color: var(--NPF-Audio-Info-Text-Color);
  2044. }
  2045.  
  2046. figcaption.audio-caption,
  2047. figcaption.audio-caption + audio[controls]{
  2048. display:none!important;
  2049. }
  2050. </style>
  2051.  
  2052.  
  2053. <!-- shecodes.io script to change background image based on time of day -->
  2054. {block:ifbackgroundhourly}
  2055. <script>
  2056. const body = document.querySelector('body');
  2057. const date = new Date();
  2058. const hour = date.getHours(); /*
  2059. extra info:
  2060. > sign means "after" and < sign means "before"
  2061. hours before 6am = night
  2062. hours before 12pm = day
  2063. hours before 6pm = afternoon
  2064. hours before 12am = night */
  2065. if (hour < 6) {
  2066. body.style.backgroundImage = "url('{image:background night}')";}
  2067. else if (hour < 12) {
  2068. body.style.backgroundImage = "url('{image:background day}')";}
  2069. else if (hour < 18) {
  2070. body.style.backgroundImage = "url('{image:background noon}')";}
  2071. else {
  2072. body.style.backgroundImage = "url('{image:background evening}')";}
  2073. </script>
  2074. {/block:ifbackgroundhourly}
  2075.  
  2076. <!-- shecodes.io script to change bottomsbg image based on time of day -->
  2077. {block:ifbottomshourly}
  2078. <script>
  2079. addEventListener("DOMContentLoaded", (event) => {
  2080. const body = document.querySelector('.bottomsbg');
  2081. const date = new Date();
  2082. const hour = date.getHours(); /*
  2083. extra info:
  2084. > sign means "after" and < sign means "before"
  2085. hours before 6am = night
  2086. hours before 12pm = day
  2087. hours before 6pm = afternoon
  2088. hours before 12am = night */
  2089. if (hour < 6) {
  2090. body.style.backgroundImage = "url('{image:bottoms night}')";}
  2091. else if (hour < 12) {
  2092. body.style.backgroundImage = "url('{image:bottoms day}')";}
  2093. else if (hour < 18) {
  2094. body.style.backgroundImage = "url('{image:bottoms noon}')";}
  2095. else {
  2096. body.style.backgroundImage = "url('{image:bottoms evening}')";}
  2097. });
  2098. </script>
  2099. {/block:ifbottomshourly}
  2100.  
  2101. <!-- script to redirect to a different site
  2102. enable and input site name in tumblr theme editor -->
  2103. {block:ifredirecturl}
  2104. <script type="text/javascript">
  2105. location.replace("{text:redirect url}");
  2106. </script>
  2107. {/block:ifredirecturl}
  2108.  
  2109. <!-- felicitysmoak gifv to gif script -->
  2110. <script>
  2111. $('img[src*="media.tumblr.com"]').each(function() {
  2112. var newsrc = $(this).attr('src').replace('gifv','gif');
  2113. $(this).attr('src', newsrc);
  2114. });
  2115.  
  2116. $('a[href*="media.tumblr.com"]').each(function() {
  2117. var newhref = $(this).attr('href').replace('gifv','gif');
  2118. $(this).attr('href', newhref);
  2119. });
  2120.  
  2121. $('div[data-lowres*="media.tumblr.com').each(function() {
  2122. var newdata = $(this).attr('data-lowres').replace('gifv','gif');
  2123. $(this).attr('data-lowres', newdata);
  2124. });
  2125.  
  2126. $('div[data-highres*="media.tumblr.com').each(function() {
  2127. var newdata = $(this).attr('data-highres').replace('gifv','gif');
  2128. $(this).attr('data-highres', newdata);
  2129. });
  2130. </script>
  2131.  
  2132. <!-- responsive legacy pxu photoset from gukthemes + pixel union part 1-->
  2133. <link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  2134. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  2135. <link href="//static.tumblr.com/wupwnyt/qWVoc4phj/resizing.css" rel="stylesheet" type="text/css"/>
  2136. <script>
  2137. /* responsive legacy pxu photoset from gukthemes + pixel union part 2*/
  2138. $(document).ready(function(){
  2139. $('.photo-slideshow').pxuPhotoset({
  2140. lightbox:true,
  2141. rounded:false,
  2142. gutter:'0px',
  2143. borderRadius:'0px',
  2144. photoset:'.photo-slideshow',
  2145. photoWrap:'.photo-data',
  2146. photo:'.pxu-photo'
  2147. });
  2148.  
  2149. }); /* end document ready function */
  2150. </script>
  2151.  
  2152. <!-- borntobewildcodes customize anonymous name for ask posts -->
  2153. <script>
  2154. $(document).ready(function(){
  2155. $(".asker").text(function () {
  2156. return $(this).text().replace("Anonymous", "anon");
  2157. });
  2158. });
  2159. </script>
  2160. <!-- borntobewildcodes customize anonymous icon for ask posts -->
  2161. <script>
  2162. $(document).ready(function(){
  2163. var oldSrc = 'https://assets.tumblr.com/images/anonymous_avatar_48.gif';
  2164. var newSrc = 'NEW ANONYMOUS IMAGE URL HERE';
  2165. $('img[src="' + oldSrc + '"]').attr('src', newSrc);
  2166. });
  2167. </script>
  2168.  
  2169. <!-- tooltips by malihu and octomoosey -->
  2170. {block:ifnotippyjs}
  2171. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  2172. <script>
  2173. (function($){
  2174. $(document).ready(function(){
  2175. $("a[title]").style_my_tooltips({
  2176. tip_follows_cursor:true,
  2177. tip_delay_time:0,
  2178. tip_fade_speed:0,
  2179. attribute:"title"
  2180. });
  2181. });
  2182. })(jQuery);
  2183. </script>
  2184. {/block:ifnotippyjs}
  2185.  
  2186. <!-- tooltips by tippyjs -->
  2187. {block:iftippyjs}
  2188. <script src="https://unpkg.com/@popperjs/core@2"></script>
  2189. <script src="https://unpkg.com/tippy.js@6"></script>
  2190. <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css">
  2191. <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/border.css"/>
  2192. <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/svg-arrow.css"/>
  2193. <link rel="stylesheet" href="https://unpkg.com/[email protected]/animations/shift-away.css"/>
  2194. <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/backdrop.css"/>
  2195. <script>
  2196. const commonOptions = {
  2197. theme: "custom",
  2198. arrow: true,
  2199. animation: "scale-subtle",
  2200. followCursor: true,
  2201. placement: "top",
  2202. touch: "hold",
  2203. };
  2204.  
  2205. tippy("[title]", {
  2206. ...commonOptions,
  2207. content(reference) {
  2208. const title = reference.getAttribute("title");
  2209. reference.removeAttribute("title");
  2210. return title;
  2211. },
  2212. });
  2213. </script>
  2214. {/block:iftippyjs}
  2215.  
  2216.  
  2217. </div> <!-- <div class="topbg"> -->
  2218. </div> <!-- <div class="top"> -->
  2219. </div> <!-- <div class="content"> -->
  2220.  
  2221. <div class="bottomsbg">
  2222. <div class="bottoms">
  2223. <div class="content">
  2224.  
  2225. </div> <!-- <div class="bottomsbg"> -->
  2226. </div> <!-- <div class="bottoms"> -->
  2227. </div> <!-- <div class="content"> -->
  2228.  
  2229. </main>
  2230.  
  2231. </body>
  2232. {block:ifcustomcursor}
  2233. </div> <!-- <div class="cursor"> -->
  2234. {/block:ifcustomcursor}
  2235.  
  2236. </html>
Add Comment
Please, Sign In to add comment