API tools faq
paste
Advertisement
enbythemes

macabre theme (temporary icon fix)

enbythemes
Mar 6th, 2025 (edited)
65
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 43.24 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Macabre 2.0
  3. © xroub.tumblr.com - Updated July 2023
  4.  
  5. Base Code Help by seyche and eggdesign
  6. No JS Photosets by eggdesign and annasthms
  7. NPF Fix V3, Spotify Simplifer and NPF Audio Player Fix by glennthemes
  8. Video Resize by Nouvae
  9. Custom Audio Player by annasthms
  10. Phosphor Font Icons by Helena Zhang and Tobias Fried
  11. Pagination Tutorial by ricecodes
  12. Light Switch Toggle by 22mn
  13.  
  14. -->
  15.  
  16. <!DOCTYPE html>
  17. <html lang-"en" data-theme="dark">
  18. <head>
  19. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  23. <meta charset="utf-8">
  24. <script>
  25. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  26. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  27. </script>
  28.  
  29. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  30. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  31. <link href="https://fonts.googleapis.com/css?family={text:Google Font}:700,400" rel="stylesheet">
  32. <script src="https://unpkg.com/@phosphor-icons/web"></script>
  33.  
  34. <!-- META TAGS AND OPTIONS -->
  35. {block:Options}
  36. <meta name="image:Sidebar Icon" content="{PortraitURL-128}">
  37.  
  38. <meta name="color:Light Mode Background" content="#0e001a">
  39. <meta name="color:Light Mode Font" content="#d5cfd8">
  40. <meta name="color:Light Mode Sidebar" content="#251135">
  41. <meta name="color:Light Mode Sidebar Box" content="#0e001a">
  42. <meta name="color:Light Mode Posts" content="#0e001a">
  43. <meta name="color:Light Mode Links" content="#0b854f">
  44. <meta name="color:Light Mode Bold" content="#0b854f">
  45. <meta name="color:Light Mode Blockquote Border" content="#f0f0f0">
  46. <meta name="color:Light Mode Borders" content="#2f1842">
  47.  
  48. <meta name="color:Dark Mode Background" content="#0e001a">
  49. <meta name="color:Dark Mode Font" content="#d5cfd8">
  50. <meta name="color:Dark Mode Sidebar" content="#251135">
  51. <meta name="color:Dark Mode Sidebar Box" content="#0e001a">
  52. <meta name="color:Dark Mode Posts" content="#0e001a">
  53. <meta name="color:Dark Mode Links" content="#0b854f">
  54. <meta name="color:Dark Mode Bold" content="#0b854f">
  55. <meta name="color:Dark Mode Blockquote Border" content="#f0f0f0">
  56. <meta name="color:Dark Mode Borders" content="#2f1842">
  57.  
  58. <meta name="select:Post Size" content="400px">
  59. <meta name="select:Post Size" content="450px">
  60. <meta name="select:Post Size" content="500px">
  61. <meta name="select:Post Size" content="540px">
  62.  
  63. <meta name="select:Photoset Gutter Size" content="1px">
  64. <meta name="select:Photoset Gutter Size" content="2px">
  65. <meta name="select:Photoset Gutter Size" content="3px">
  66. <meta name="select:Photoset Gutter Size" content="4px">
  67. <meta name="select:Photoset Gutter Size" content="5px">
  68.  
  69. <meta name="text:Sidebar Title" content="a short title">
  70.  
  71. <meta name="text:Link One" content="link one">
  72. <meta name="text:Link One URL" content="/">
  73. <meta name="text:Link Two" content="link two">
  74. <meta name="text:Link Two URL" content="/">
  75. <meta name="text:Link Three" content="link three">
  76. <meta name="text:Link Three URL" content="/">
  77. <meta name="text:Link Four" content="link four">
  78. <meta name="text:Link Four URL" content="/">
  79.  
  80. <!--<meta name="text:Post Margin" content="150">-->
  81.  
  82. <meta name="if:Grayscale Sidebar Image" content="">
  83. <meta name="if:Spooky Icons" content="">
  84. {/block:Options}
  85.  
  86. <style edit-npf-audio-player>
  87. .npf-audio-wrapper {
  88. --NPF-Audio-Buttons-Size: 1.4rem;
  89. --NPF-Audio-Buttons-Spacing: 1.3rem;
  90.  
  91. --NPF-Audio-Image-Size: 100px;
  92. --NPF-Audio-Image-Spacing: 0;
  93. }
  94.  
  95. .npf-audio-background {
  96. background-color: rgba(var(--ClrPosts),1);
  97. padding: var(--SmallGap) var(--NormalGap);
  98. }
  99.  
  100. .npf-audio-title-label,
  101. .npf-audio-artist-label,
  102. .npf-audio-album-label {
  103. font-weight: bold;
  104. color: rgba(var(--ClrBold),1);
  105. }
  106. </style>
  107.  
  108. <style>
  109. * {
  110. box-sizing: border-box;
  111. }
  112.  
  113. :root {
  114. --FontBody: 'Trebuchet MS', sans-serif;
  115. --FontHeading: 'Georgia', serif;
  116. --FontSize: {select:font size};
  117. --SidebarWidth: 350px;
  118. --SidebarBoxWidth: ;
  119. --AvatarWidth: 64px;
  120. --PostWidth: {select:post size};
  121. --GutterSize: {select:photoset gutter size};
  122. --PostMargin: 100px;
  123. --NPF-Caption-Spacing: 1em;
  124. --NPF-Image-Spacing: {select:photoset gutter size};
  125.  
  126. --ExSmallGap: 0.25em;
  127. --SmallGap: 0.5em;
  128. --NormalGap: 1em;
  129. --LargeGap: 1.5em;
  130. }
  131.  
  132. :root, html[data-theme='light'] {
  133. --ClrBackground: {RGBcolor:light mode background};
  134. --ClrFont: {RGBcolor:light mode font};
  135. --ClrSidebar: {RGBcolor:light mode sidebar};
  136. --ClrSidebarBox: {RGBcolor:light mode sidebar box};
  137. --ClrPosts: {RGBcolor:light mode posts};
  138. --ClrLinks: {RGBcolor:light mode links};
  139. --ClrBold: {RGBcolor:light mode bold};
  140. --ClrBorders: {RGBcolor:light mode borders};
  141. --ClrBlockquoteBorder: {RGBcolor:light mode blockquote border};
  142. --ClrLightBox: 130,130,130, 0.75;
  143. --TumblrControls: invert(1) hue-rotate(180deg);
  144. --LightOn: block;
  145. --LightOff: none;
  146. --NPF-Audio-Buttons-Color: {color:light mode links};
  147. }
  148.  
  149. :root, html[data-theme='dark'] {
  150. --ClrBackground: {RGBcolor:dark mode background};
  151. --ClrFont: {RGBcolor:dark mode font};
  152. --ClrSidebar: {RGBcolor:dark mode sidebar};
  153. --ClrSidebarBox: {RGBcolor:dark mode sidebar box};
  154. --ClrPosts: {RGBcolor:dark mode posts};
  155. --ClrLinks: {RGBcolor:dark mode links};
  156. --ClrBold: {RGBcolor:dark mode bold};
  157. --ClrBorders: {RGBcolor:dark mode borders};
  158. --ClrBlockquoteBorder: {RGBcolor:dark mode blockquote border};
  159. --ClrLightBox: 50,50,50, 0.75;
  160. --TumblrControls: none;
  161. --LightOn: none;
  162. --LightOff: block;
  163. --NPF-Audio-Buttons-Color: {color:dark mode links};
  164. }
  165.  
  166. /* TRANSITIONS */
  167. html.theme-transition,
  168. html.theme-transition *,
  169. html.theme-transition *:before,
  170. html.theme-transition *:after {
  171. transition: 0s !important;
  172. transition-delay: 0!important;
  173. }
  174.  
  175. a, a:hover, img {
  176. transition: all 0.4s;
  177. -webkit-transition: all 0.4s;
  178. -moz-transition: all 0.4s;
  179. -ms-transition: all 0.4s;
  180. -o-transition: all 0.4s;
  181. }
  182.  
  183. body {
  184. margin: 0;
  185. background: rgba(var(--ClrBackground),1);
  186. font-family: var(--FontBody);
  187. font-size: var(--FontSize);
  188. color: rgba(var(--ClrFont),1);
  189. line-height: 150%;
  190. }
  191.  
  192. a, .like-reblog .reblog:hover {
  193. text-decoration: none;
  194. color: rgba(var(--ClrLinks),1);
  195. }
  196.  
  197. a:hover, .like-reblog .reblog {
  198. color: rgba(var(--ClrFont),1);
  199. }
  200.  
  201. b, bold, strong {
  202. font-weight: 700;
  203. color: rgba(var(--ClrBold),1);
  204. }
  205.  
  206. h1, h2, h3, h4, h5, .text-title, .poll-question {
  207. font-family: var(--FontHeading);
  208. font-weight: 700;
  209. letter-spacing: 0.025em;
  210. }
  211.  
  212. h1, .text-title {font-size: 1.5em;}
  213. h2 {font-size: 1.4em;}
  214. h3, big, .poll-question {font-size: 1.3em;}
  215. h4 {font-size: 1.25em;}
  216. h5 {font-size: 1.1em;}
  217. small {font-size: 0.85em;}
  218.  
  219. blockquote {
  220. margin: var(--SmallGap);
  221. padding: var(--SmallGap) 0 var(--SmallGap) var(--NormalGap);
  222. border-left: 2px solid rgba(var(--ClrBlockquoteBorder),1);
  223. }
  224.  
  225. .flex {
  226. display: flex;
  227. flex-wrap: warp;
  228. }
  229.  
  230. .centered {
  231. justify-content: center;
  232. align-items: center;
  233. }
  234.  
  235. /* TUMBLR CONTROLS */
  236. #controls-click {
  237. position: fixed;
  238. top: var(--NormalGap);
  239. right: var(--NormalGap);
  240. cursor: pointer;
  241. font-size: 18px;
  242. }
  243.  
  244. .turn {
  245. transform: rotate(135deg);
  246. -ms-transform: rotate(135deg);
  247. -moz-transform: rotate(135deg);
  248. -webkit-transform: rotate(135deg);
  249. margin-top: -3px;
  250. }
  251.  
  252. iframe.tmblr-iframe {
  253. z-index: 999999999!important;
  254. margin-top: 3em;
  255. margin-right: var(--NormalGap);
  256. opacity: 0;
  257. visibility: hidden;
  258. transform:scale(0.7);
  259. transform-origin:100% 0;
  260. -webkit-transform:scale(0.7);
  261. -webkit-transform-origin:100% 0;
  262. -o-transform:scale(0.7);
  263. -o-transform-origin:100% 0;
  264. -moz-transform:scale(0.7);
  265. -moz-transform-origin:100% 0;
  266. -ms-transform:scale(0.7);
  267. -ms-transform-origin:100% 0;
  268. -webkit-transition: all 0.5s;
  269. -moz-transition: all 0.5s;
  270. -ms-transition: all 0.5s;
  271. -o-transition: all 0.5s;
  272. transition: all 0.5s;
  273. filter: var(--TumblrControls);
  274. -webkit-filter: var(--TumblrControls);
  275. -o-filter: var(--TumblrControls);
  276. -moz-filter: var(--TumblrControls);
  277. -ms-filter: var(--TumblrControls);
  278. }
  279.  
  280. body.controls-clicked iframe.tmblr-iframe {
  281. opacity: 1.0; visibility: visible;}
  282.  
  283. /* SIDEBAR */
  284. aside {
  285. position: fixed;
  286. width: var(--SidebarWidth);
  287. height: 100vh;
  288. background: rgba(var(--ClrSidebar),1);
  289. margin-top: 0;
  290. top: 0;
  291. }
  292.  
  293. #side-box {
  294. background: rgba(var(--ClrSidebarBox),1);
  295. width: 80%;
  296. }
  297.  
  298. #side-box nav {
  299. background: rgba(var(--ClrSidebar),0.5);
  300. padding: var(--NormalGap) var(--NormalGap);
  301. justify-content: space-between!important;
  302. font-size: 22px;
  303. }
  304.  
  305. #theme-toggle {cursor: pointer;}
  306. .light-on {display: var(--LightOn);}
  307. .light-off {display: var(--LightOff);}
  308.  
  309. .side-user {
  310. padding: var(--NormalGap) var(--NormalGap) 0;
  311. gap: var(--SmallGap);
  312. }
  313.  
  314. .sidebar-icon {
  315. width: 64px;
  316. }
  317.  
  318. {/block:ifGrayscaleSidebarImage}
  319. .sidebar-icon {
  320. filter: brightness(90%) grayscale(100%);
  321. transition: filter 0.4s;
  322. -webkit-transition: filter 0.4s;
  323. -moz-transition: filter 0.4s;
  324. -ms-transition: filter 0.4s;
  325. -o-transition: filter 0.4s;
  326. }
  327.  
  328. #side-box:hover .sidebar-icon {
  329. filter: none;
  330. }
  331. {/block:ifGrayscaleSidebarImage}
  332.  
  333. .sidebar-title {
  334. font-family: var(--FontHeading);
  335. font-weight: 700;
  336. }
  337.  
  338. .description {
  339. padding: var(--NormalGap);
  340. margin: var(--NormalGap);
  341. border: 1px solid rgba(var(--ClrBorders),1);
  342. }
  343.  
  344. .side-custom-links {
  345. padding: 0 var(--NormalGap) var(--SmallGap);
  346. display: flex;
  347. flex-wrap: wrap;
  348. justify-content: space-between!important;
  349. align-items: center;
  350. gap: var(--SmallGap);
  351. }
  352.  
  353. .side-custom-links a {
  354. width: calc(50% - var(--SmallGap) * 2 - var(--SmallGap));
  355. /*width: 42%;*/
  356. flex-grow: 1;
  357. padding: var(--SmallGap);
  358. border: 1px solid rgba(var(--ClrBorders),1);
  359. }
  360.  
  361. /* PAGINATION */
  362. .mobile-pagination {
  363. display: none;
  364. }
  365.  
  366. .pagination {
  367. background: rgba(var(--SidebarBox),0.5);
  368. padding: var(--NormalGap);
  369. justify-content: space-between!important;
  370. }
  371.  
  372. .pagination a, .pagination span {
  373. display: inline-block;
  374. padding: var(--SmallGap);
  375. border: 1px solid rgba(var(--ClrBorders),1);
  376. overflow: hidden;
  377. }
  378.  
  379. .prev a, .next a {
  380. position: absolute;
  381. margin: 0;
  382. z-index: 99999;
  383. }
  384.  
  385. .pagination span, .mobile-pagination span {
  386. background: transparent;
  387. color: rgba(var(--ClrFont),0.4);
  388. }
  389.  
  390. .pagination a:hover, .mobile-pagination a:hover {
  391. background: rgba(var(--ClrLinks),1);
  392. }
  393.  
  394. /* POSTS */
  395. .post-container {
  396. width: calc(100vw - var(--SidebarWidth) - var(--ExLargeGap));
  397. margin-left: calc(var(--SidebarWidth) + var(--NormalGap));
  398. margin-top: 25px;
  399. }
  400.  
  401. article.posts {
  402. width: var(--PostWidth);
  403. background: rgba(var(--ClrPosts),1);
  404. margin: 0 auto var(--PostMargin);
  405. }
  406.  
  407. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
  408.  
  409. /* CAPTIONS */
  410. .caption, .chat {
  411. list-style-type: none;
  412. padding: var(--NormalGap);
  413. background: var(--ClrPosts);
  414. border: 1px solid var(--ClrBorders);
  415. }
  416.  
  417. .username a {font-weight: 700;}
  418.  
  419. .username {
  420. position: relative;
  421. margin-left: 22px;
  422. display: inline-block;
  423. vertical-align: middle;
  424. }
  425.  
  426. .username::before {
  427. font-family: 'phosphor';
  428. {block:ifSpookyIcons}content: '\E916';{/block:ifSpookyIcons}
  429. {block:ifNotSpookyIcons}content: '\E4C2';{/block:ifNotSpookyIcons}
  430. position: absolute;
  431. top: 0;
  432. left: -22px;
  433. opacity: .9;
  434. font-size: 1em;
  435. }
  436.  
  437. .user-icon, .ask-icon, .like-rebloger-icon {
  438. display: inline-block;
  439. vertical-align: middle;
  440. width: 30px;
  441. background: var(--ClrBackground);
  442. padding: var(--ExSmallGap);
  443. border: 1px solid var(--ClrBorders);
  444. }
  445.  
  446. .deactive::after {
  447. content: '(deactivated)';
  448. margin-left: var(--SmallGap);
  449. opacity: 0.75;
  450. color: var(--ClrFont);
  451. }
  452.  
  453. p.tmblr-attribution {margin-top: 1em !important;}
  454.  
  455. a.read_more {
  456. display: block;
  457. background: var(--ClrBackground);
  458. padding: var(--NormalGap) var(--SmallGap);
  459. border: 1px solid var(--ClrBorders);
  460. text-align: center;
  461. }
  462.  
  463. a.read_more:hover {
  464. background: var(--ClrLinks);
  465. color: var(--ClrPosts);
  466. }
  467.  
  468. /* TEXT */
  469. .text-title {
  470. display: block;
  471. padding: var(--NormalGap);
  472. margin: 0;
  473. }
  474.  
  475. .poll-post a.poll-row {
  476. background-color: rgba(var(--ClrLinks),1)!important;
  477. border-radius: 2px!important;
  478. color: rgba(var(--ClrFont),1)!important;
  479. font-size: var(--FontSize)!important;
  480. }
  481.  
  482. .poll-post a.poll-row:hover {
  483. background-color: rgba(var(--ClrLinks),0.5)!important;
  484. }
  485.  
  486. /* PHOTO POSTS */
  487. .photo img {
  488. width: 100%;
  489. }
  490.  
  491. /* PHOTOSET POSTS */
  492. [photoset-layout] {
  493. gap: var(--GutterSize);
  494. }
  495.  
  496. [photoset-layout] div {
  497. cursor: pointer;
  498. }
  499.  
  500. /* QUOTE POSTS */
  501. .quote, .source, p.npf_quote {
  502. padding: var(--NormalGap);
  503. text-align: center;
  504. line-height: 125%;
  505. }
  506.  
  507. .quote {
  508. font-size: 1.5em;
  509. line-height: 145%;
  510. background: rgba(var(--ClrBackground),0.5);
  511. padding-bottom: 30px;
  512. }
  513.  
  514. .source {
  515. position: relative;
  516. margin-top: 15px;
  517. }
  518.  
  519. .source:before {
  520. font-family:'phosphor';
  521. {block:ifSpookyIcons}content: '\E8A6';{/block:ifSpookyIcons}
  522. {block:ifNotSpookyIcons}content: '\E660';{/block:ifNotSpookyIcons}
  523. position: absolute;
  524. top: -30px;
  525. left: calc(50% - 18px);
  526. color: rgba(var(--ClrBold),1);
  527. font-size: 1.5em;
  528. padding: 15px 15px 0;
  529. background: rgba(var(--ClrPosts),1);
  530. border-radius: 50%;
  531. }
  532.  
  533. p.npf_quote {
  534. font-family: var(--FontBody);
  535. font-size: 1.5em;
  536. }
  537.  
  538. p.npf_quote:first-of-type {margin-top: 0;}
  539. p.npf_quote:last-of-type {margin-bottom: 0;}
  540.  
  541. /* LINK POSTS */
  542. a.link-wrap {
  543. display: block;
  544. transition: all .4s ease;
  545. }
  546.  
  547. a.link-wrap img {
  548. width: calc(100% - 12px);
  549. height: 300px;
  550. object-fit: cover;
  551. filter: brightness(80%);
  552. margin: 6px 6px -12px;
  553. transition: all .6s ease;
  554. }
  555.  
  556. a.link-wrap:hover img {filter: brightness(100%);}
  557.  
  558. .link {
  559. padding: 20px;
  560. background: rgba(var(--ClrBackground),0.4);
  561. border: 6px solid rgba(var(--ClrPosts),1);
  562. }
  563.  
  564. .link-txt {
  565. color: rgba(var(--ClrFont),1);
  566. margin-top: .5em;
  567. font-size: .9em;
  568. }
  569.  
  570. .link-title {
  571. font-size: 1.4em;
  572. }
  573.  
  574. .npf-link-block {
  575. border-radius: 0;
  576. border: none;
  577. background-color: rgba(var(--ClrPosts),1);
  578. }
  579.  
  580. .npf-link-block .title {
  581. font-size: 1.4em;
  582. border-bottom: none;
  583. }
  584.  
  585. .npf-link-block.has-poster, .npf-link-block.no-poster {
  586. padding: 0;
  587. margin: 0;
  588. }
  589.  
  590. .npf-link-block .bottom {
  591. background: rgba(var(--ClrBackground),0.4);
  592. }
  593.  
  594. .link-caption {
  595. position: relative;
  596. margin-top: 10px;
  597. }
  598.  
  599. /* CHAT POSTS */
  600. .chat {
  601. list-style: none;
  602. padding: 0;
  603. margin: 0;
  604. }
  605.  
  606. .chat li {margin: 1em 0;}
  607. .chat li:first-of-type {margin-top: 0;}
  608. .chat li:last-of-type {margin-bottom: 0;}
  609.  
  610. .chat .label {
  611. font-weight: 700;
  612. color: rgba(var(--ClrBold),1);
  613. letter-spacing: 1px;
  614. }
  615.  
  616. p.npf_chat {
  617. font-family: var(--FontBody);
  618. margin-top: 1em;
  619. }
  620.  
  621. p.npf_chat b {font-family: var(--FontBody);}
  622.  
  623. /* AUDIO POSTS */
  624. .audio {
  625. padding: 0 var(--SmallGap) var(--NormalGap);
  626. }
  627.  
  628. .audio-info {
  629. padding: var(--NormalGap) var(--NormalGap) var(--SmallGap);
  630. justify-content: flex-start!important;
  631. gap: 0 var(--NormalGap);
  632. }
  633.  
  634. .audio_player {
  635. padding: 0 var(--ExLargeGap) var(--NormalGap);
  636. justify-content: flex-start;
  637. margin-top: var(--SmallGap);
  638. gap: var(--NormalGap);
  639. }
  640.  
  641. .album-art {width: 100px;}
  642. .audio-info p {margin: var(--ExSmallGap) 0; padding: 0;}
  643.  
  644. .audio-buttons {
  645. font-size: 1.25em;
  646. width: 100px;
  647. margin-left: 15px;
  648. justify-content: space-between!important;
  649. }
  650.  
  651. .custom_audio_buttons {
  652. color: rgba(var(--ClrLinks),1);
  653. margin: 4px 0 0;
  654. }
  655.  
  656. .custom_audio_buttons [class^="ph-"] {
  657. color: rgba(var(--ClrLinks),1);
  658. cursor: pointer;
  659. }
  660.  
  661. .custom_audio_error_icon {color: red;}
  662.  
  663. .audio_player .custom_audio_seekbar {
  664. height: 10px;
  665. background: rgba(var(--ClrBackground),1);
  666. width: calc(100% - 150px);
  667. }
  668.  
  669. .audio_player .custom_audio_seekbar_progress {
  670. width: 0;
  671. height: 100%;
  672. background: rgba(var(--ClrLinks),1);
  673. }
  674.  
  675. iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{height:80px!important; width:100%!important;}
  676. iframe.soundcloud_audio_player {height: 150px!important; width: 100%!important;}
  677.  
  678. /* ASK POSTS */
  679. .asker_container {
  680. justify-content: space-between!important;
  681. padding: var(--NormalGap);
  682. }
  683.  
  684. .asker-icon, .question_container {
  685. background: rgba(var(--ClrBackground),0.5);
  686. border-radius: 5px;
  687. border: 1px solid rgba(var(--ClrBorders),1);
  688. }
  689.  
  690. .asker-icon {
  691. width: 48px;
  692. height: 48px;
  693. line-height: 56px;
  694. text-align: center;
  695. margin-right: 10px;
  696. padding: 0 4px;
  697. }
  698.  
  699. .question_container {
  700. width: calc(100% - 58px);
  701. display: flex;
  702. flex-direction: column;
  703. padding: var(--NormalGap);
  704. }
  705.  
  706. .asker-icon .ph {font-size: 1.5em;}
  707. .question_text {margin-top: var(--SmallGap);}
  708.  
  709. /* POST FOOTER */
  710. .footer, .sources {
  711. padding: var(--NormalGap);
  712. background: rgba(var(--ClrBackground),0.5);
  713. }
  714.  
  715. .footer {display: flex; justify-content: space-between;}
  716. .sources {border-top: 1px solid var(--borders);}
  717.  
  718. .post-info .ph, .sources .ph {
  719. color: rgba(var(--ClrFont),1);
  720. padding: 10px;
  721. background: rgba(var(--ClrLinks),1);
  722. }
  723.  
  724. .pinned .ph {
  725. background: transparent;
  726. border: 1px solid rgba(var(--ClrBorders),1);
  727. padding: 9px 10px;
  728. }
  729.  
  730. .post-info a, .sources a {
  731. padding: 8px 10px 6px;
  732. border: 1px solid rgba(var(--ClrBorders),1);
  733. margin-left: -1px;
  734. }
  735.  
  736. .like-reblog .ph {
  737. cursor: pointer;
  738. font-size: 1.1em;
  739. }
  740.  
  741. .like-reblog a {
  742. display: inline-block;
  743. margin: 2px 8px 0;
  744. }
  745.  
  746. .like-reblog .reblog {
  747. /*opacity: 0.8;*/
  748. }
  749.  
  750. .like-reblog .ph {font-size: 1.1em; cursor: pointer;}
  751. .like-reblog .reblog {color: rgba(var(--ClrFont),1); opacity: .8;}
  752. .like-reblog .reblog:hover {color: rgba(var(--ClrLinks),1); opacity: 1;}
  753.  
  754. .likeb {
  755. position: relative;
  756. display: inline-block;
  757. height: 1.2em;
  758. border: none;
  759. }
  760.  
  761. .likeb .like_button iframe {
  762. position: absolute;
  763. top: 0;
  764. left: 0;
  765. bottom: 0;
  766. right: 0;
  767. z-index: 2;
  768. opacity: 0;
  769. }
  770.  
  771. .like_button iframe {width: 100%!important; height: 100%!important;}
  772. .likeb .liked + .actual-button {color: #f05e5e;}
  773. .likeb .liked + .actual-button:after {content: '';}
  774.  
  775. /* TAGS */
  776. .tags {
  777. width: var(--PostWidth);
  778. margin: -80px auto 100px;
  779. }
  780.  
  781. .tags a {
  782. color: rgba(var(--ClrFont),1);
  783. padding: 8px 10px;
  784. border: 1px solid rgba(var(--ClrBorders),1);
  785. display: inline-block;
  786. opacity: 0.8;
  787. margin-bottom: 10px;
  788. }
  789.  
  790. .tags a:not(:last-of-type) {margin-right: 10px;}
  791. .tags a:hover {color: rgba(var(--ClrLinks),1); opacity: 1;}
  792. .tags .ph {font-size: 0.85em; margin-right: 8px;}
  793.  
  794. /* POST NOTES */
  795. .notes {
  796. width: var(--PostWidth);
  797. background: rgba(var(--ClrPosts),1);
  798. margin: 0 auto var(--NormalGap);
  799. padding: var(--SmallGap);
  800. }
  801.  
  802. ol.notes {
  803. width: 100%;
  804. list-style-type: none;
  805. padding: 0;
  806. margin: 0;
  807. }
  808.  
  809. ol.notes li {
  810. margin: var(--SmallGap) 0;
  811. padding: 0 vaR(--SmallGap);
  812. }
  813.  
  814. ol.notes li img {display: none;}
  815.  
  816. .mobile-credit {display: none;}
  817. .credit {
  818. position: fixed;
  819. bottom: 10px;
  820. right: 10px;
  821. background: rgba(var(--ClrPosts),1);
  822. padding: var(--SmallGap);
  823. text-transform: uppercase;
  824. font-size: .9em;
  825. letter-spacing: 0.025em;
  826. }
  827.  
  828. /* MEDIA QUIERES FOR RESPONSIVENESS */
  829. @media only screen and (max-width: 1100px) {
  830. aside {
  831. position: relative;
  832. width: var(--PostWidth);
  833. height: 50%;
  834. padding: var(--NormalGap) 10px;
  835. top: 0; left: 0;
  836. margin: 25px auto;
  837. }
  838.  
  839. .side-box {
  840. position: relative;
  841. transform: none;
  842. top: 0; left: 0;
  843. margin: 0 auto;
  844. width: calc({select:post size} - 40px);
  845. }
  846.  
  847. .side-user {justify-content: flex-start;}
  848. .side-user img.sidebar-icon {filter: none;}
  849.  
  850. .side-custom-links a {
  851. width: fit-content;
  852. width: -moz-fit-content;
  853. margin: 5px 13px 10px 0;
  854. }
  855.  
  856. .side-custom-links a:nth-child(odd) {margin-right: var(--ExSmallGap);}
  857.  
  858. .post-container {
  859. width: var(--PostWidth);
  860. margin: 50px auto;
  861. }
  862.  
  863. .pagination, .credit {display: none;}
  864. .mobile-credit {display: block;}
  865.  
  866. .mobile-pagination {
  867. background: rgba({RGBcolor:posts}, 0.4);
  868. padding: 20px;
  869. display: flex;
  870. justify-content:space-between;
  871. }
  872.  
  873. .mobile-pagination a, .mobile-pagination span {
  874. display: inline-block;
  875. padding: 10px 12px;
  876. border: 1px solid var(--borders);
  877. overflow: hidden;
  878. }
  879.  
  880. .prev a, .next a {
  881. position: absolute;
  882. margin: 0;
  883. z-index: 99999;
  884. }
  885.  
  886. .mobile-pagination span {
  887. background: transparent; color: rgba({RGBcolor:font}, 0.4);}
  888. .mobile-pagination a:hover {background: var(--links);}
  889. }
  890.  
  891. @media only screen and (max-width: 720px) {
  892. aside, .post-container, .tags {
  893. width: 90vw;
  894. }
  895.  
  896. .posts {
  897. width: 100%!important;
  898. }
  899.  
  900. .side-box {width: 100%!important;}
  901. }
  902.  
  903. @media only screen and (max-width: 414px) {
  904. .footer {
  905. flex-direction: column;
  906. gap: var(--LargeGap) 0;
  907. }
  908. }
  909. {CustomCSS}
  910. </style>
  911. </head>
  912. <body>
  913. <div id="controls">
  914. <a id="controls-click" title="Tumblr Controls"><i class="ph ph-gear-six"></i></a>
  915. </div>
  916.  
  917. <!-- SIDEBAR -->
  918. <aside class="flex centered">
  919. <div id="side-box">
  920. <nav class="flex centered">
  921. <a href="/" title="Refresh"><i class="ph ph-house"></i></a>
  922. {Block:AskEnabled}<a href="/ask" title="Ask"><i class="ph ph-envelope"></i></a>{/block:AskEnabled}
  923. {block:SubmissionsEnabled}<a href="/submit" title="Submit"><i class="ph ph-tray-arrow-up"></i></a>{/block:SubmissionsEnabled}
  924. <a href="/archive" title="Archive"><i class="ph ph-calendar-dots"></i></a>
  925. <a id="theme-toggle">
  926. <span class="light-on" title="Light's Off"><i class="ph ph-moon"></i></span>
  927. <span class="light-off" title="Light's On"><i class="ph ph-sun"></i></span>
  928. </a>
  929. </nav>
  930.  
  931. <div class="side-user flex centered">
  932. <img src="{image:sidebar icon}" class="sidebar-icon" alt="Icon">
  933.  
  934. <div class="sidebar-title">{text:sidebar title}</div>
  935. </div>
  936.  
  937. {block:Description}
  938. <div class="description">
  939. {Description}
  940. </div>
  941. {/block:Description}
  942.  
  943. <div class="side-custom-links flex centered">
  944. <a href="{text:link one url}">{text:link one}</a>
  945. <a href="{text:link two url}">{text:link two}</a>
  946. <a href="{text:link three url}">{text:link three}</a>
  947. <a href="{text:link four url}">{text:link four}</a>
  948.  
  949. {block:HasPages}
  950. {block:Pages}
  951. <a href="{URL}">{Label}</a>
  952. {/block:Pages}
  953. {/block:HasPages}
  954. </div>
  955.  
  956. {block:Pagination}
  957. <div class="pagination flex centered">
  958. <div class="prev">{block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage}<span>back</span></div>
  959. <div class="next">{block:NextPage}<a href="{NextPage}">forth</a>{/block:NextPage}<span>forth</span></div>
  960. </div>
  961. {/block:Pagination}
  962.  
  963. </div>
  964. </aside>
  965.  
  966. <!-- POSTS -->
  967. <main class="post-container">
  968. {block:posts inlineMediaWidth="1280"}
  969. <!-- {block:NoRebloggedFrom}
  970. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  971. {/block:NoRebloggedFrom} -->
  972. {block:ContentSource}<!-- {SourceURL}
  973. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  974. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  975. {/block:ContentSource}
  976. <article class="posts" id="{PostID}" post-type="{PostType}">
  977.  
  978. <!-- TEXT POSTS -->
  979. {block:Text}
  980. {block:Title}
  981. <a href="{Permalink}" class="text-title">{Title}</a>
  982. {/block:Title}
  983. {block:NotReblog}
  984. <li class="caption text-caption">
  985. {Body}
  986. </li>
  987. {/block:NotReblog}
  988. {block:RebloggedFrom}
  989. {block:Reblogs}
  990. <li class="caption text-caption">
  991. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  992. {Body}
  993. </li>
  994. {/block:Reblogs}
  995. {/block:RebloggedFrom}
  996. {/block:Text}
  997.  
  998. <!-- PHOTO POSTS -->
  999. {block:Photo}
  1000. <div class="photo">
  1001. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  1002. </div>
  1003. {block:Caption}
  1004. {block:NotReblog}
  1005. <li class="caption">
  1006. {Caption}
  1007. </li>
  1008. {/block:NotReblog}
  1009. {block:RebloggedFrom}
  1010. {block:Reblogs}
  1011. <li class="caption">
  1012. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1013. {Body}
  1014. </li>
  1015. {/block:Reblogs}
  1016. {/block:RebloggedFrom}
  1017. {/block:Caption}
  1018. {/block:Photo}
  1019.  
  1020. <!-- PHOTOSET POSTS -->
  1021. {block:Photoset}
  1022. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  1023. {block:Caption}
  1024. {block:NotReblog}
  1025. <li class="caption">
  1026. {Caption}
  1027. </li>
  1028. {/block:NotReblog}
  1029. {block:RebloggedFrom}
  1030. {block:Reblogs}
  1031. <li class="caption">
  1032. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1033. {Body}
  1034. </li>
  1035. {/block:Reblogs}
  1036. {/block:RebloggedFrom}
  1037. {/block:Caption}
  1038. {/block:Photoset}
  1039.  
  1040. <!-- QUOTE POSTS -->
  1041. {block:Quote}
  1042. <div class="quote">{Quote}</div>
  1043. <div class="source">{Source}</div>
  1044. {/block:Quote}
  1045.  
  1046. <!-- LINK POSTS -->
  1047. {block:Link}
  1048. <a href="{URL}" class="link-wrap">
  1049. {block:Thumbnail}
  1050. <img src="{Thumbnail-HighRes}">
  1051. {/block:Thumbnail}
  1052. <div class="link">
  1053. <div class="link-title">{Name}</div>
  1054. {block:Excerpt}
  1055. <div class="link-txt">
  1056. {Excerpt}
  1057. </div>
  1058. {/block:Excerpt}
  1059. </div>
  1060. </a>
  1061. <div class="caption {block:notreblog} original-post {/block:notreblog}">
  1062.  
  1063. {block:notreblog}
  1064. {block:caption}{Caption}{/block:caption}
  1065. {/block:notreblog}
  1066. {block:Rebloggedfrom}
  1067. {block:Reblogs}
  1068. <div class="reblogs">
  1069. <div class="reblog-header {block:IsOriginalEntry}original{/block:IsOriginalEntry} flex align-center">
  1070. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1071. </a>
  1072. </div>
  1073. <div class="reblog-content">
  1074. {Body}
  1075. </div>
  1076. </div>
  1077. {/block:Reblogs}
  1078. {/block:RebloggedFrom}
  1079. </div>
  1080. {/block:Link}
  1081.  
  1082. <!-- CHAT POSTS -->
  1083. {block:Chat}
  1084. {block:Title}
  1085. <h1 class="ttl">{Title}</h1>
  1086. {/block:Title}
  1087. <div class="caption">
  1088. <ul class="chat">
  1089. {block:Lines}
  1090. <li>{block:Label}
  1091. <span class="label">{Label}</span>{/block:Label}
  1092. {Line}</li>
  1093. {/block:Lines}
  1094. </ul>
  1095. </div>
  1096. {/block:Chat}
  1097.  
  1098. <!-- AUDIO POSTS -->
  1099. {block:Audio}
  1100. <div class="audio">
  1101. <div class="audio-info flex centered">
  1102. {block:AlbumArt}
  1103. <img src="{AlbumArtURL}" class="album-art">
  1104. {/block:AlbumArt}
  1105. <div>
  1106. {block:TrackName}<p><b>{TrackName}</b></p>{/block:TrackName}
  1107. {block:Artist}<p>{Artist}</p>{/block:Artist}
  1108. {block:Album}<p>{Album}</p>{/block:Album}
  1109. </div>
  1110. </div>
  1111. {block:AudioPlayer}
  1112. {AudioPlayer}
  1113. <div class="audio_player flex centered">
  1114. <div class="audio-buttons flex centered">
  1115. <i class="ph-fill ph-skip-back"></i>
  1116. <span class="custom_audio_buttons"></span>
  1117. <i class="ph-fill ph-skip-forward"></i>
  1118. </div>
  1119. <div class="custom_audio_seekbar"></div>
  1120. </div>
  1121. {/block:AudioPlayer}
  1122. </div>
  1123.  
  1124. {block:Caption}
  1125. {block:NotReblog}
  1126. <li class="caption">
  1127. {Caption}
  1128. </li>
  1129. {/block:NotReblog}
  1130. {block:RebloggedFrom}
  1131. {block:Reblogs}
  1132. <li class="caption">
  1133. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1134. {Body}
  1135. </li>
  1136. {/block:Reblogs}
  1137. {/block:RebloggedFrom}
  1138. {/block:Caption}
  1139. {/block:Audio}
  1140.  
  1141. <!-- VIDEO POSTS -->
  1142. {block:Video}
  1143. <div class="video">
  1144. {Video-500}
  1145. </div>
  1146. {block:Caption}
  1147. {block:NotReblog}
  1148. <li class="caption">
  1149. {Caption}
  1150. </li>
  1151. {/block:NotReblog}
  1152. {block:RebloggedFrom}
  1153. {block:Reblogs}
  1154. <li class="caption">
  1155. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1156. {Body}
  1157. </li>
  1158. {/block:Reblogs}
  1159. {/block:RebloggedFrom}
  1160. {/block:Caption}
  1161. {/block:Video}
  1162.  
  1163. <!-- ANSWER POSTS -->
  1164. {block:Answer}
  1165. <div class="asker_container flex">
  1166. <div class="asker-icon">
  1167. {block:ifSpookyIcons}<i class="ph ph-alien"></i>{/block:ifSpookyIcons}
  1168. {block:ifNotSpookyIcons}<i class="ph ph-envelope"></i>{/block:ifNotSpookyIcons}
  1169. </div>
  1170. <div class="question_container">
  1171. <div class="asker"><b>{Asker}</b> asked:</div>
  1172. <div class="question_text">{Question}</div>
  1173. </div>
  1174. </div>
  1175. {block:Answerer}
  1176. <div class="answer_container caption">
  1177. <div class="username">
  1178. <b>{Answerer}</b> replied:
  1179. </div>
  1180. <div class="answer_text">{Answer}</div>
  1181. </div>
  1182. {block:Reblogs}
  1183. <div class="reply_container caption">
  1184. <div class="username">
  1185. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a> {/block:HasPermalink}
  1186. </div>
  1187. <div class="reply">{Body}</div>
  1188. </div>
  1189. {/block:Reblogs}
  1190. {/block:Answerer}
  1191. {block:NotReblog}
  1192. <div class="answer_container">
  1193. <div class="answer_text">{Answer}</div>
  1194. </div>
  1195. {/block:NotReblog}
  1196. {/block:Answer}
  1197.  
  1198. <!-- POST FOOTER -->
  1199. {block:Date}
  1200. <div class="footer">
  1201. <div class="post-info">
  1202. {block:PinnedPostLabel}
  1203. <span class="pinned"><i class="ph ph-push-pin"></i></span>
  1204. {/block:PinnedPostLabel}
  1205. {block:ifSpookyIcons}<i class="ph ph-radioactive"></i>{/block:ifSpookyIcons}
  1206. {block:ifNotSpookyIcons}<i class="ph ph-alarm"></i>{/block:ifNotSpookyIcons}
  1207. <a href="{Permalink}">{Month} {DayofMonth}{DayofMonthSuffix}, {Year}</a>
  1208. {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  1209. </div>
  1210.  
  1211. <!-- CONTROLS -->
  1212. <div class="like-reblog">
  1213. <a href="{ReblogURL}" title="reblog the post" class="reblog"><i class="ph ph-repeat"></i></a>
  1214. <a class="likeb" href="#" title="like the post">{LikeButton}<span class="actual-button"><i class="ph-fill ph-heart"></i></span></a>
  1215. </div>
  1216. </div>
  1217.  
  1218. {block:PermalinkPage}
  1219. {block:RebloggedFrom}
  1220. <div class="sources">
  1221. {block:ifSpookyIcons}<i class="ph ph-ghost"></i>{/block:ifSpookyIcons}
  1222. {block:ifNotSpookyIcons}<i class="ph ph-user"></i>{/block:ifNotSpookyIcons}
  1223. <a href="{ReblogParentURL}">via</a>
  1224. <a href="{ReblogRootURL}">original</a>
  1225. {block:ContentSource}<a href="{SourceURL}">{lang:Source}</a>{/block:ContentSource}
  1226. </div>
  1227. {/block:RebloggedFrom}
  1228. {/block:PermalinkPage}
  1229. {/block:Date}
  1230.  
  1231. </article>
  1232.  
  1233. <!-- TAGS -->
  1234. {block:HasTags}
  1235. <div class="tags">
  1236. {block:Tags}
  1237. <a href="{TagURL}"><i class="ph ph-hash"></i>{Tag}</a>
  1238. {/block:Tags}
  1239. </div>
  1240. {block:HasTags}
  1241.  
  1242. <!-- POST NOTES -->
  1243. {block:PermalinkPage}{block:Date}
  1244. {block:NoteCount}{block:PostNotes}
  1245. <div class="notes">{PostNotes-64}</div>
  1246. {/block:PostNotes}{/block:NoteCount}
  1247. {/block:Date}{/block:PermalinkPage}
  1248. {/block:Posts}
  1249.  
  1250. <!-- MOBILE PAGINATION -->
  1251. {block:Pagination}
  1252. <div class="mobile-pagination">
  1253. <div class="prev">{block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage}<span>back</span></div>
  1254. <div class="next">{block:NextPage}<a href="{NextPage}">forth</a>{/block:NextPage}<span>forth</span></div>
  1255. </div>
  1256. {/block:Pagination}
  1257.  
  1258. <div class="mobile-credit" style="font-size: .9em; text-align: center; opacity: 0.9;">Macabre Theme by <a href="https://enbythemes.tumblr.com">Rou</a></div>
  1259.  
  1260. </main>
  1261. <!-- credit: DO NOT REMOVE. If you ever want to move my credit, send me a message. -->
  1262. <a href="https://enbythemes.tumblr.com" class="credit" title="code by rou">enby</a>
  1263.  
  1264. <!-- SCRIPTS -->
  1265. <!-- NPF -->
  1266. <script src="//npf-images-v3.github.io/script.js"></script>
  1267. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  1268.  
  1269. <!-- PHOTOSETS -->
  1270. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  1271.  
  1272. <!-- AUDIO -->
  1273. <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  1274.  
  1275. <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
  1276. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  1277. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  1278.  
  1279. <!-- VIDEO -->
  1280. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  1281.  
  1282. <script>
  1283. // LIGHT SWITCH TOGGLE
  1284. const toggle = document.getElementById("theme-toggle");
  1285.  
  1286. toggle.onclick = function () {
  1287. document.documentElement.classList.add("theme-transition");
  1288.  
  1289. let currentTheme = document.documentElement.getAttribute("data-theme");
  1290. let targetTheme = "light";
  1291.  
  1292. if (currentTheme === "light") {
  1293. targetTheme = "dark";
  1294. }
  1295.  
  1296. window.setTimeout(function () {
  1297. document.documentElement.classList.remove("theme-transition");
  1298. }, 50);
  1299.  
  1300. document.documentElement.setAttribute("data-theme", targetTheme);
  1301. localStorage.setItem("theme", targetTheme);
  1302. };
  1303.  
  1304. // CONTROLS ON CLICK
  1305. $(document).ready(function(){
  1306. $('#controls-click').click(function(){
  1307. $('body').toggleClass('controls-clicked');
  1308. $('#controls-click').toggleClass('turn');
  1309. });
  1310. });
  1311.  
  1312. // PHOTOSETS BY ANNASTHMS AND EGGDESIGN
  1313. function gatherData(images, arr) {
  1314. for (let i = 0; i < images.length; i++) {
  1315. let currentData = {
  1316. width: images[i].getAttribute("data-width"),
  1317. height: images[i].getAttribute("data-height"),
  1318. low_res: images[i].getAttribute("data-lowres"),
  1319. high_res: images[i].getAttribute("data-highres")
  1320. };
  1321. arr.push(currentData);
  1322. }
  1323. }
  1324. function getIndex(elem) {
  1325. let i = 0;
  1326. while ((elem = elem.previousElementSibling) != null) i++;
  1327. return i;
  1328. }
  1329. function lightbox(elem) {
  1330. let currentPhotoset = elem.parentNode;
  1331. let photosetPhotos = currentPhotoset.getElementsByTagName("div");
  1332. let data = [];
  1333. gatherData(photosetPhotos, data);
  1334. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1335. }
  1336.  
  1337. // CUSTOM AUDIO BY ANNASTHMS
  1338. $(document).ready(function() {
  1339. customAudio({
  1340. post: ".posts",
  1341. wrappers: {
  1342. audio: ".custom_audio_wrapper",
  1343. buttons: ".custom_audio_buttons"
  1344. },
  1345. default: false,
  1346. pauseAll: true,
  1347. playButton: "<i class='ph-fill ph-play'></i>",
  1348. pauseButton: "<i class='ph-fill ph-pause'></i>",
  1349. errorIcon: "<i class='ph-fill ph-x'></i>",
  1350. hideInfoIfError: true,
  1351. });
  1352. });
  1353.  
  1354. // VIDEO RESIZE SCRIPT BY NOUVAE
  1355. function flexFrame() {
  1356. $(".caption").each(function() {
  1357. $(this).find("iframe").wrap("<div class='capframe'></div>");
  1358. flexibleFrames($(".capframe"));
  1359. });
  1360. flexibleFrames($(".video"));
  1361. }
  1362. $(document).ready(flexFrame);
  1363. </script>
  1364.  
  1365. <script>
  1366. tumblr_npf_audio({
  1367. emptyTitleText: "Untitled track",
  1368. emptyArtistText: "Untitled artist",
  1369. emptyAlbumText: "Untitled album",
  1370.  
  1371. titleLabel: "Track:",
  1372. artistLabel: "Artist:",
  1373. albumLabel: "Album:"
  1374. });
  1375. </script>
  1376. </body>
  1377. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!