API tools faq
paste
Advertisement
userbru

theme thirty-four.

userbru
Apr 8th, 2024 (edited)
1,717
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.11 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="shortcut icon" href="{Favicon}" />
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  6. <title>{Title}</title>
  7. {block:Description}
  8. <meta name="description" content="{MetaDescription}" />
  9. {/block:Description}
  10. {NewPostStyles}
  11. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  12. <link rel="stylesheet" type="text/css" href="https://assets.tumblr.com/fonts/favorit/stylesheet.css?v=1">
  13.  
  14. <!--
  15.  
  16.  
  17. THEME BY BRU
  18. icons by phosphoricons, cappuccicons
  19. scrollbar by shythemes
  20. tumblr controls, masonry by maziekeen
  21.  
  22.  
  23.  
  24. -->
  25.  
  26.  
  27. {block:Options}
  28. <meta name="image:background" content="" />
  29. <meta name="image:sidebar" content="" />
  30. <meta name="image:menu icon" content=""/>
  31. <meta name="color:background" content="#f8f8f8" />
  32. <meta name="color:borders" content="#d9d9d9"/>
  33. <meta name="color:posts" content="#fff" />
  34. <meta name="color:text" content="#222" />
  35. <meta name="color:links" content="#222" />
  36. <meta name="color:hover" content="" />
  37.  
  38.  
  39.  
  40. <meta name="text:DesktopTitle" content="Write your description title here.">
  41. <meta name="text:DesktopDesc" content="Write your description here.">
  42. <meta name="text:Link 1" content="" />
  43. <meta name="text:Link 1 Title" content="link 1"/>
  44. <meta name="text:Link 2" content="" />
  45. <meta name="text:Link 2 Title" content="link 2"/>
  46. <meta name="text:Link 3" content="" />
  47. <meta name="text:Link 3 Title" content="link 3"/>
  48. <meta name="text:Link 4" content="" />
  49. <meta name="text:Link 4 Title" content="link 4"/>
  50. <meta name="text:Link 5" content="" />
  51. <meta name="text:Link 5 Title" content="link 5"/>
  52.  
  53. {/block:Options}
  54.  
  55. <!--- SCRIPTS --->
  56.  
  57.  
  58. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  59. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  60. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  61. <script>
  62. (function($){
  63. $(document).ready(function(){
  64. $("[title]").style_my_tooltips();
  65. });
  66. })(jQuery);
  67. </script>
  68.  
  69. <!---- FONTS --->
  70. <link rel="preconnect" href="https://fonts.googleapis.com">
  71. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  72. <link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Inter&family=Kanit&family=Nunito+Sans&family=Poppins&display=swap" rel="stylesheet">
  73.  
  74.  
  75. <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]"></script>
  76. <script src="//pull.cappuccicons.com/cpf.js"></script>
  77.  
  78.  
  79.  
  80. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  81. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  82.  
  83. <!--
  84. NPF images fix v3.0 by @glenthemes [2021]
  85. 💌 git.io/JRBt7
  86. --->
  87. <script src="//npf-images-v3.github.io/script.js"></script>
  88. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  89. <style tmblr-npf>
  90. :root {
  91. --NPF-Caption-Spacing:1em;
  92. --NPF-Image-Spacing:4px;
  93. }
  94. </style>
  95.  
  96. <style>
  97. /* Theme Options */
  98. :root {
  99. --background-image: url({image:background});
  100. --background-color: {color:background};
  101. --spacing: 1rem;
  102. --posts: {color:posts};
  103. --accent: {AccentColor};
  104. --text: {color:text};
  105. --links: {color:links};
  106. --title-font: {TitleFont}
  107. --header-image: url({HeaderImage});
  108. }
  109. * {
  110. box-sizing:border-box;
  111. }
  112. body {
  113. margin: 0;
  114. background-color: var(--background-color);
  115. background-image: var(--background-image);
  116. {block:iffullbackground}
  117. background-size: cover;
  118. {/block:iffullbackground}
  119. background-attachment: fixed;
  120. font-family: 'Inter', sans-serif;
  121. word-wrap: break-word;
  122. font-size: 13.5px;
  123. color:{color:text};
  124. }
  125. .flex {
  126. display: flex;
  127. flex-wrap: wrap;
  128. }
  129.  
  130. .centered {
  131. align-items: center;
  132. justify-content: center;
  133. }
  134.  
  135. .align-center {
  136. align-items: center;
  137. }
  138.  
  139. .justify-center {
  140. justify-content: center;
  141. }
  142.  
  143.  
  144. /* SCROLLBAR */
  145.  
  146. ::-webkit-scrollbar {
  147. width:0px;
  148. height:0px;
  149. }
  150. ::-webkit-scrollbar {
  151. background-color:rgb(255,255,255); /* background color */
  152. }
  153. ::-webkit-scrollbar-track {
  154. border:8px solid rgb(255,255,255); /* background color */
  155. background-color:rgb(230,230,230); /* light border color */
  156. }
  157. ::-webkit-scrollbar-thumb {
  158. border:8px solid rgb(255,255,255); /* background color */
  159. background-color:rgb(144,144,144); /* dark border color */
  160. min-height:0px;
  161. min-width:0px;
  162. }
  163.  
  164. /* ----- TUMBLR CONTROLS ---- */
  165.  
  166.  
  167. .controls-button {
  168. position: fixed;
  169. cursor: help;
  170. top: 20px;
  171. right: 2rem;
  172. z-index: 1000;
  173. cursor: pointer;
  174. right:1.5rem;
  175. color:{color:text};
  176. font-size:15px;
  177. }
  178.  
  179. .tmblr-iframe {
  180. z-index: 999999999!important;
  181. opacity: 0;
  182. visibility: hidden;
  183. width:30px;
  184. -webkit-transition: all 0.5s;
  185. -moz-transition: all 0.5s;
  186. -ms-transition: all 0.5s;
  187. -o-transition: all 0.5s;
  188. transition: all 0.5s;
  189. }
  190.  
  191. body.controls-click .tmblr-iframe {
  192. opacity: 1;
  193. margin-right: 4rem;
  194. display:inline;
  195. vertical-align:bottom;
  196. visibility: visible;
  197. -webkit-transition: all 0.5s;
  198. -moz-transition: all 0.5s;
  199. -ms-transition: all 0.5s;
  200. -o-transition: all 0.5s;
  201. transition: all 0.5s;
  202. }
  203.  
  204. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  205.  
  206.  
  207. /* --- TOOLTIPS --*/
  208.  
  209. #s-m-t-tooltip {
  210. z-index: 9999;
  211. background: #fff;
  212. font-size: 13px;
  213. padding:10px;
  214. font-family:'Poppins', sans-serif;
  215. line-height: 13px;
  216. letter-spacing: 1px;
  217. border-radius:5%;
  218. background-color:{color:hover};
  219. color:{color:text};
  220. moz-border-radius-bottomright: 5px;
  221. border-bottom-right-radius: 5px;
  222. -moz-border-radius-topleft: 5px;
  223. border-top-left-radius: 5px;
  224. -moz-border-radius-bottomleft: 5px;
  225. border-bottom-left-radius: 5px;
  226. -moz-border-radius-topright: 5px;
  227. border-top-right-radius: 5px;
  228. -o-transition: all 0.3s ease-out;
  229. -webkit-transition: all 0.3s ease-out;
  230. -moz-transition: all 0.3s ease-out;
  231. text-transform: normal
  232. max-width: 150px;
  233. word-wrap: break-word;
  234. display: block;
  235. margin: 24px 14px 7px 12px;
  236. }
  237.  
  238.  
  239. .topmenu {
  240. background:{color:posts};
  241. padding:10px;
  242. width:100%;
  243. position:fixed;
  244. z-index:99999!important;
  245. height:50px;
  246. }
  247.  
  248. .title {
  249. text-transform:normal;
  250. font-weight:400;
  251. font-size:15px;
  252. text-align:left;
  253. font-family: 'Dela Gothic One', sans-serif;
  254. margin-right:10px;
  255. }
  256.  
  257. .title a {
  258. color:{color:links};
  259. }
  260.  
  261. .title a:hover{
  262. color:{color:hover};
  263. }
  264.  
  265. .topmenu img {
  266. margin-left:10px;
  267. margin-right:10px;
  268. border-radius:5px;
  269. vertical-align:middle;
  270. width:30px!important;
  271. height:30px!important;
  272. }
  273.  
  274. .sr-text {
  275. border: 0;
  276. clip: rect(1px, 1px, 1px, 1px);
  277. clip-path: inset(50%);
  278. height: 1px;
  279. margin: -1px;
  280. overflow: hidden;
  281. padding: 0;
  282. position: absolute;
  283. width: 1px;
  284. word-wrap: normal !important;
  285. }
  286.  
  287. .sidebar {
  288. align-items:center;
  289. position: fixed;
  290. top: {text:post margin}px;
  291. text-align: center;
  292. margin-top:190px;
  293. width:350px;
  294. padding:10px;
  295. margin-left:280px;
  296. border-radius:10px;
  297. background:{color:posts};
  298. border:1px solid {color:borders};
  299. }
  300.  
  301. .sidebar img {
  302. max-width:300px;
  303. border-radius:10px;
  304. margin-bottom:10px;
  305. margin-top:10px;
  306. }
  307.  
  308.  
  309. .desctitle {
  310. text-transform:normal;
  311. font-weight:600;
  312. font-size:15px;
  313. text-align:center;
  314. font-family: 'Kanit', sans-serif;
  315. margin-right:10px;
  316. color:{color:links};
  317. }
  318.  
  319.  
  320. .description {
  321. font-size:14px;
  322. text-align:center;
  323. margin-bottom:20px;
  324. margin-top:10px;
  325. width:300px;
  326. margin-left:10px;
  327. margin-right:10px;
  328. }
  329.  
  330. nav {
  331. max-width:300px!important;
  332. text-align:center;
  333. font-size:17px;
  334. margin-left:10px;
  335. margin-right:10px;
  336. margin-top:15px;
  337. font-weight:600;
  338. margin-bottom:10px;
  339. }
  340.  
  341. nav a {
  342. padding:10px;
  343. -webkit-transition: all 0.3s;
  344. -moz-transition: all 0.3s;
  345. -ms-transition: all 0.3s;
  346. -o-transition: all 0.3s;
  347. transition: all 0.3s;
  348. }
  349.  
  350. nav a:hover {
  351. background:{color:hover};
  352. border-radius:10px;
  353. -webkit-transition: all 0.3s;
  354. -moz-transition: all 0.3s;
  355. -ms-transition: all 0.3s;
  356. -o-transition: all 0.3s;
  357. transition: all 0.3s;
  358. color:{color:text};
  359. }
  360.  
  361. a {
  362. color:{color:links};
  363. -webkit-transition: all 0.3s;
  364. -moz-transition: all 0.3s;
  365. -ms-transition: all 0.3s;
  366. -o-transition: all 0.3s;
  367. transition: all 0.3s;
  368. }
  369.  
  370. a:hover {
  371. color:{color:hover};
  372. border-radius:10px;
  373. -webkit-transition: all 0.3s;
  374. -moz-transition: all 0.3s;
  375. -ms-transition: all 0.3s;
  376. -o-transition: all 0.3s;
  377. transition: all 0.3s;
  378. }
  379.  
  380. main {
  381. width: 100%;
  382. margin: auto;
  383. margin-left:350px;
  384. max-width: 1230px;
  385. justify-content: space-around;
  386. align-items: flex-start;
  387. }
  388.  
  389. section {
  390. width: calc(100% - 540px);
  391. margin-left:80px;
  392. margin-top:50px;
  393. }
  394.  
  395. article {
  396. margin-left:420px;
  397. }
  398. article .info,
  399. .npf-link-block,
  400. article .answer,
  401. .tags,
  402. .reblog-header,
  403. article .quote,
  404. article .question,
  405. article .replies,
  406. article .source,
  407. .pagination,
  408. article h1,
  409. article h2 {
  410. padding: var(--spacing);
  411. }
  412.  
  413.  
  414.  
  415. .info { font-family: 'Poppins', sans-serif; font-size:14px;}
  416. .info a {margin-right:10px;}
  417.  
  418. article .question,
  419. article .answer {
  420. margin: var(--spacing);
  421. border-radius: .2rem;
  422. border: 1px solid {color:borders};
  423. }
  424.  
  425. a.asker {
  426. font-weight:bold;
  427. }
  428.  
  429. .ask-icon {
  430. display: inline-block;
  431. vertical-align: middle;
  432. width: 3.5em;
  433. height: 3.5em;
  434. border-radius:5px;
  435. margin-right: 1em;
  436. padding:5px;
  437. }
  438.  
  439. .tags {
  440. padding-top: 0;
  441. font-size:14px;
  442. }
  443.  
  444. .tags a {
  445. padding:1.5px;
  446. }
  447.  
  448.  
  449. a.pinned-post {
  450. font-weight: bold;
  451. color: {color:links};
  452. vertical-align:middle;
  453. }
  454.  
  455.  
  456. .spotify_audio_player,
  457. article iframe[src*='soundcloud'] {
  458. max-height: calc(170px + var(--spacing));
  459. border: 0;
  460. padding: var(--spacing);
  461. padding-bottom: 0;
  462. }
  463.  
  464. .npf-link-block {
  465. margin: var(--spacing) !important;
  466. }
  467.  
  468. article .caption p {
  469. padding: var(--spacing);
  470. padding-bottom: 0;
  471. margin: 0;
  472. margin-bottom:20px;
  473. }
  474.  
  475. .caption {
  476. border-bottom:1px solid {color:Borders};
  477. }
  478.  
  479. .reblog-content {
  480. white-space: pre-wrap;
  481. }
  482.  
  483. .caption:last-child p,
  484. .reblog-content p:last-of-type {
  485. padding-bottom: var(--spacing);
  486. }
  487.  
  488. .reblog-header img {
  489. max-width: 30px;
  490. margin-right: .4rem;
  491. border-radius: .2rem;
  492. }
  493.  
  494. .reblog-header:is(:not(.original)) {
  495. border-top: 1px solid {color:borders};
  496. }
  497.  
  498. .reblog-header,
  499. .reblog-content {
  500. padding-bottom: 0;
  501. border-bottom:1px solid {color:borders};
  502. }
  503.  
  504.  
  505. .reblog-header a {
  506. font-weight:600;
  507. margin-bottom:10px;
  508. }
  509. p:empty {
  510. display: none;
  511. }
  512.  
  513. article .info {
  514. justify-content: space-between;
  515. font-family: 'Kanit', sans-serif;
  516. text-transform:uppercase;
  517.  
  518. }
  519.  
  520. .pagination {
  521. justify-content: space-around;
  522. }
  523.  
  524. article .info a {
  525. color: var(--info-text);
  526. }
  527.  
  528.  
  529. article h1 {
  530. margin: 0;
  531. font-size: 2rem;
  532. }
  533.  
  534. article,
  535. .pagination {
  536. max-width: 540px;
  537. background: var(--posts);
  538. width: 100%;
  539. border: 1px solid {color:borders};
  540. border-radius: 10px;
  541. margin: calc(var(--spacing) * 4) auto;
  542. }
  543.  
  544. article {
  545. padding:10px;
  546. }
  547.  
  548.  
  549.  
  550. ol.notes li {
  551. padding: 10px;
  552. }
  553.  
  554. ol.notes img {
  555. display: none;
  556. }
  557.  
  558. article img {
  559. display: block;
  560. }
  561.  
  562. article iframe,
  563. article img {
  564. max-width: 100%;
  565. }
  566.  
  567. a {
  568. text-decoration: none;
  569. color: var(--links);
  570. }
  571.  
  572. blockquote {
  573. padding: var(--spacing);
  574. border-left: 2px solid {color:borders};
  575. }
  576.  
  577. blockquote p {
  578. padding: 0!important;
  579. }
  580.  
  581.  
  582. .tmblr-full>.audio-caption .album-cover {
  583. width:70px;
  584. height:70px;
  585. border-radius:5px;
  586. margin-bottom:10px;
  587. }
  588.  
  589. /*---- CREDIT -----*/
  590.  
  591. #credit {
  592. position: fixed;
  593. bottom: 20px;
  594. right: 20px;
  595. font-size: 20px;
  596. }
  597.  
  598. #credit a:hover {
  599. background:{color:hover};
  600. border-radius:10px;
  601. -webkit-transition: all 0.3s;
  602. -moz-transition: all 0.3s;
  603. -ms-transition: all 0.3s;
  604. -o-transition: all 0.3s;
  605. transition: all 0.3s;
  606. color:{color:text};
  607. }
  608.  
  609. @media only screen and (max-width: 1100px) {
  610. section {
  611. width: 100%;
  612. }
  613.  
  614. article {
  615. margin: 100px auto;
  616. }
  617.  
  618. .sidebar {
  619. display:none;
  620. }
  621. }
  622.  
  623. {CustomCSS}
  624. </style>
  625. </head>
  626. <body class="{block:homepage}home{/block:homepage}{block:tagpage}tag{/block:tagpage}{block:searchpage}search{/block:searchpage}{block:submitpage}submit-{/block:submitpage}{block:AskPage}ask{/block:AskPage}-page">
  627.  
  628. <div class="topmenu">
  629.  
  630. <div class="title"><img src="{image:menu icon}"> <a href="/">{Title}</a></div>
  631.  
  632. <div title="Tumblr Controls" class="controls-button"><i class="cp cp-more"></i></div>
  633.  
  634. </div>
  635.  
  636. <div class="sidebar">
  637.  
  638. <img src="{image:sidebar}">
  639.  
  640. <div class="desctitle">{text:DesktopTitle}</div>
  641. <div class="description">
  642. {text:DesktopDesc}
  643. </div>
  644. <nav>
  645. <a href="/" title="home"><i class="cp cp-home-o"></i></a>
  646. <a href="/ask" title="inbox"><i class="cp cp-chat-o"></i></a>
  647. <a href="{text:Link 1}" title="{text:Link 1 Title}"><i class="cp cp-compass-o
  648. "></i></a>
  649. <a href="{text:Link 2}" title="{text:Link 2 Title}"><i class="cp cp-ghost-o"></i></a>
  650. <a href="{text:Link 3}" title="{text:Link 3 Title}"><i class="cp cp-heart-o"></i></a>
  651. <a href="{text:Link 4}" title="{text:Link 4 Title}"><i class="cp cp-pikachu"></i></a>
  652. <a href="{text:Link 5}" title="{text:Link 5 Title}"><i class="cp cp-rainbow-o"></i></a>
  653. </nav>
  654. </div>
  655.  
  656.  
  657. <!-- main container -->
  658. <main class="flex">
  659.  
  660.  
  661. <!-- posts -->
  662. <section>
  663. {block:Posts}
  664. <article id="post-{PostID}" class="{posttype}-post posts">
  665. {block:Photo}
  666. <div class="legacy-photo"><img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos"></div>
  667. {/block:Photo}
  668.  
  669. {block:Photoset}
  670. <div class="legacy-photoset">{Photoset}</div>
  671. {/block:Photoset}
  672.  
  673. {block:Panorama}
  674. <div class="legacy-photo"><img src="{photourl-panorama}" alt="{photoalt}"></div>
  675. {/block:Panorama}
  676.  
  677. <!-- quote posts -->
  678. {block:Quote}
  679. <div class="quote">
  680. "{Quote}"
  681. </div>
  682. <div class="source">
  683. -{Source}
  684. </div>
  685. {/block:Quote}
  686.  
  687. <!-- chat posts -->
  688. {block:Chat}
  689. <ul class="chat">
  690. {block:Lines}
  691. <li>
  692. {block:Label}{Label}{/block:Label}
  693. {Line}
  694. </li>
  695. {/block:Lines}
  696. </ul>
  697. {/block:Chat}
  698. {block:link}
  699. <div class="npf-link-block">
  700. <a href="{URL}">
  701. {Name}
  702. </a>
  703. </div>
  704. {/block:link}
  705. {block:Video}
  706. {Video-500}
  707. {/block:Video}
  708. {block:Audio}
  709. {audioembed}
  710. {/block:Audio}
  711. {block:Answer}
  712. <div class="question">
  713. <img src="{AskerPortraitURL-64}" class="ask-icon" style="border-radius:100%;">
  714. {Asker} asked: {Question}
  715. </div>
  716. {block:Answerer}
  717. <div class="answer">
  718. {Answerer} answered: {Answer}
  719. </div>
  720. {/block:Answerer}
  721. {block:NotReblog}
  722. <div class="replies">
  723. {Replies}
  724. </div>
  725. {/block:NotReblog}
  726. {/block:Answer}
  727. <div class="caption {block:notreblog} original-post {/block:notreblog}">
  728. {block:Text}
  729. {block:Title}<h2>{Title}</h2>{/block:Title}
  730. {/block:Text}
  731. {block:notreblog}
  732. {block:caption}{Caption}{/block:caption}
  733. {block:Text}{body}{/block:Text}
  734. {/block:notreblog}
  735. {block:Rebloggedfrom}
  736. {block:Reblogs}
  737. <div class="reblogs">
  738. <div class="reblog-header {block:IsOriginalEntry}original{/block:IsOriginalEntry} flex align-center">
  739. <a href="{permalink}" target="_blank"><img src="{PortraitURL-64}" alt="{username}'s avatar"></a>
  740. <a href="{permalink}" target="_blank" {block:isdeactivated}class="inactive"{/block:isdeactivated}>
  741. {username}
  742. </a>
  743. </div>
  744. <div class="reblog-content">
  745. {Body}
  746. </div>
  747. </div>
  748. {/block:Reblogs}
  749. {/block:RebloggedFrom}
  750. </div>
  751. {block:Date}
  752.  
  753. <div class="info flex align-center">
  754. <div class="perma-info">
  755. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post" title="{PinnedPostLabel}"><i class="ph ph-push-pin" style="font-size:14px;"></i></a> {/block:PinnedPostLabel}
  756. <a href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}" title="{TimeAgo}">{ShortMonth} {DayofMonth}, {Year} </a>
  757. <a href="{permalink}" title="{NoteCountWithLabel}"> {NoteCount} </a>
  758. {block:permalinkpage}
  759. {block:RebloggedFrom}
  760. <a href="{reblogparenturl}" title="reblogged from">
  761. <i class="ph ph-caret-left"></i>
  762. </a>
  763. <a href="{reblogrooturl}" title="original poster">
  764. <i class="ph ph-user-focus"></i>
  765. </a>
  766.  
  767. {/block:RebloggedFrom}
  768. {/block:permalinkpage}
  769. </div>
  770.  
  771. </div>
  772. {/block:Date}
  773. {block:Hastags}
  774. <div class="tags">
  775. {block:Tags}
  776. <a href="{TagURL}">#{Tag}</a>
  777. {/block:Tags}
  778. </div>
  779. {/block:Hastags}
  780. {PostNotes}
  781. </article>
  782.  
  783.  
  784.  
  785. {/block:Posts}
  786. {block:Pagination}
  787. <div class="pagination flex centered">
  788. {block:previouspage}
  789. <a href="{previouspage}">Prev</a>
  790. {/block:previouspage}
  791. {block:nextpage}
  792. <a href="{nextpage}">Next</a>
  793. {/block:nextpage}
  794. </div>
  795. {/block:pagination}
  796. </section>
  797. </main>
  798. <!----- CREDIT ----->
  799.  
  800. <a href="https://geminicodes.tumblr.com" title="by bru" id="credit"><i class="ph ph-moon"></i></a>
  801.  
  802. <!-- masonry navigation -->
  803. <script src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
  804.  
  805. <script type="text/javascript">
  806. // masonry navigation
  807. var elements = document.getElementsByClassName('masonry-navigation');
  808. var msnry;
  809. var nElements = elements.length;
  810. for(var i = 0; i < nElements; i++){
  811. msnry = new Masonry( elements[i], {
  812. // columnWidth: 268,
  813. gutter: 10,
  814. itemSelector: '.masonry-navigation-item',
  815. });
  816. }
  817. </script>
  818. </body>
  819.  
  820. <!--- TUMBLR CONTROLS -->
  821.  
  822. <script src=“//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  823.  
  824. <script>
  825. $('.controls-button').click(function(){
  826. $('body').toggleClass('controls-click');
  827. });
  828. </script>
  829.  
  830.  
  831.  
  832. <script>
  833. // remove empty p tags
  834. for (const p of document.querySelectorAll('p')) {
  835. if (p.innerHTML.trim() === '') {
  836. p.remove()
  837. }
  838. }
  839. // create posts array
  840. let posts = []
  841. {block:Posts}
  842. posts.push({ npf: JSON.parse({JSNPF}), id: {JSPostId}})
  843. {/block:Posts}
  844.  
  845. //function for updating post types
  846. function updateTypes(type, article) {
  847. article.classList.remove('text-post')
  848. article.classList.add(`${ type }-post`, 'npf-post')
  849. }
  850.  
  851. // loop through array to get each post
  852. for (const post of posts) {
  853. let npf = post.npf
  854. let article = document.getElementById(`post-${post.id}`)
  855. // select captions that have something in them
  856. let caption = article.querySelector('.caption:is(:not(:empty))')
  857. if (caption != null && article.classList.contains('text-post')) {
  858. // if content exists
  859. if (npf.trail.length || npf.content.length) {
  860. // assign various post types based on NPF data
  861. switch (npf.trail[0]?.content[0]?.type ?? npf.content[0].type) {
  862. case 'image':
  863. updateTypes('photos', article)
  864. if (article.querySelector('.npf_row') == null) {
  865. caption.prepend(article.querySelector('figure'))
  866. }
  867. break
  868. case 'video':
  869. updateTypes('video', article)
  870. let video = article.querySelector('figure')
  871. caption.prepend(video)
  872. break
  873. case 'link':
  874. updateTypes('link', article)
  875. case 'audio':
  876. updateTypes('audio', article)
  877. break
  878. case 'quote':
  879. updateTypes('quote', article)
  880. }
  881.  
  882. // if there are photos
  883. if (article.classList.contains('photos-post')) {
  884. let photoset = document.createElement('div')
  885. photoset.classList.add('npf-photos')
  886. caption.prepend(photoset)
  887. // find where a photoset would be split up by another content block
  888. let photoBreak = article.querySelector('.reblog-content p, .reblog-content h1, .reblog-content h2')
  889. let elements = []
  890. if (photoBreak) {
  891. let prevElement = photoBreak.parentNode.firstElementChild
  892. while (prevElement !== photoBreak) {
  893. elements.push(prevElement)
  894. prevElement = prevElement.nextElementSibling
  895. }
  896. }
  897. // if there is nothing that breaks up the photoset, select all rows
  898. else {
  899. elements = article.querySelectorAll('.npf_row')
  900. }
  901. // move each row to the top
  902. for (const el of elements) {
  903. photoset.append(el)
  904. }
  905. if (article.querySelectorAll('.npf_row').length > 1) {
  906. updateTypes('photoset', article)
  907. }
  908. else {
  909. updateTypes('photo', article)
  910. }
  911. }
  912.  
  913. // clean up any potential stray reblog headers
  914. let reblogHeader = article.querySelector('.reblog-header')
  915. let reblogContent = article.querySelector('.reblog-content')
  916. if (reblogHeader?.nextElementSibling === reblogContent && reblogContent?.childElementCount === 0) {
  917. reblogHeader.remove()
  918. reblogContent.remove()
  919. }
  920. }
  921. }
  922. }
  923. </script>
  924. </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!