API tools faq
paste
Advertisement
userbru

theme thirty-one

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