API tools faq
paste
Advertisement
userbru

theme twenty-seven

userbru
Mar 13th, 2023 (edited)
1,656
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  9. <meta charset="utf-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.  
  12. <!--- THEME BY USERBRU
  13.  
  14. BASE CODE BY SEYCHE.TUMBLR.COM
  15. tumblr controls magnusthemes
  16. icons from font-awesome, phosphoricons
  17. npf fix by glenthemes
  18. day/night toggle by egg.design
  19.  
  20.  
  21. --->
  22.  
  23. <!---- scripts ---->
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  25. <link rel="stylesheet" href=
  26. "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
  27. </link>
  28. <script src="https://unpkg.com/@phosphor-icons/web"></script>
  29.  
  30. <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  31. <!----- VARIABLES AND OPTIONS ----->
  32.  
  33. <meta name="image:sidebar" content=""/>
  34.  
  35. <meta name="color:background" content="#ffffff"/>
  36. <meta name="color:text" content="#707070"/>
  37. <meta name="color:link" content="#313131"/>
  38. <meta name="color:accent" content="#f2992e"/>
  39. <meta name="color:borders" content="#dcdcdc"/>
  40. <meta name="color:ask background" content="#f7dfd9"/>
  41. <meta name="color:ask text" content="#fff"/>
  42. <meta name="color:selection text" content="#000"/>
  43. <meta name="color:selection background" content="#f0bfb3"/>
  44. <meta name="color:Dark Mode Links" content="#fff8f8"/>
  45. <meta name="color:Dark Mode Post Backgrounds" content="#21262c"/>
  46.  
  47. <meta name="if:scroll to top" content="0"/>
  48.  
  49. <meta name="select:Post Width" content="400px" title="400px"/>
  50. <meta name="select:Post Width" content="500px" title="500px"/>
  51. <meta name="select:Post Width" content="540px" title="540px"/>
  52.  
  53. <meta name="text:desktop description" content=""/>
  54. <meta name="text:post margin" content="150"/>
  55.  
  56. <meta name="text:link 1 URL" content=""/>
  57. <meta name="text:link 1" content=""/>
  58. <meta name="text:link 2 URL" content=""/>
  59. <meta name="text:link 2" content=""/>
  60. <meta name="text:link 3 URL" content=""/>
  61. <meta name="text:link 3" content=""/>
  62. <meta name="text:link 4 URL" content=""/>
  63. <meta name="text:link 4" content=""/>
  64.  
  65.  
  66.  
  67. <!--- NPF FIX --->
  68.  
  69. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  70.  
  71. <!--
  72. NPF images fix v3.0 by @glenthemes [2021]
  73. 💌 git.io/JRBt7
  74. --->
  75. <script src="//npf-images-v3.github.io/script.js"></script>
  76. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  77. <style tmblr-npf>
  78. :root {
  79. --NPF-Caption-Spacing:1em;
  80. --NPF-Image-Spacing:4px;
  81. }
  82. </style>
  83.  
  84. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  85.  
  86.  
  87.  
  88. <!----- CSS ----->
  89.  
  90. <style type="text/css">
  91.  
  92. /*---- scrollbar ----*/
  93. ::-webkit-scrollbar {
  94. width:17px;
  95. height:17px;
  96. }
  97. ::-webkit-scrollbar {
  98. background-color:{color:Background}; /* background color */
  99. }
  100. ::-webkit-scrollbar-track {
  101. border:8px solid {color:Background}; /* background color */
  102. background-color:{color:Accent}; /* light border color */
  103. }
  104. ::-webkit-scrollbar-thumb {
  105. border:8px solid {color:Background}; /* background color */
  106. background-color:{color:Accent}; /* dark border color */
  107. min-height:24px;
  108. min-width:24px;
  109. }
  110.  
  111.  
  112. /*----- BASIC STYLING -----*/
  113.  
  114. body {
  115. font-family: 'Roboto';
  116. font-size:12.5px;
  117. font-style:lowercase;
  118. color: {color:text};
  119. background-color: {color:background};
  120. line-height: 160%;
  121. word-wrap: break-word;
  122. letter-spacing: 0.04em;
  123. margin: 0;
  124. padding: 0;
  125. }
  126.  
  127. ::selection {
  128. color:{color:selection text};
  129. background:{color:selection background};
  130. }
  131. a {
  132. color: {color:link};
  133. text-decoration: none;
  134. -webkit-transition: all 0.3s;
  135. -moz-transition: all 0.3s;
  136. -ms-transition: all 0.3s;
  137. -o-transition: all 0.3s;
  138. transition: all 0.3s;
  139. }
  140.  
  141. a:hover {
  142. color: {color:accent};
  143. -webkit-transition: all 0.3s;
  144. -moz-transition: all 0.3s;
  145. -ms-transition: all 0.3s;
  146. -o-transition: all 0.3s;
  147. transition: all 0.3s;
  148. }
  149.  
  150. blockquote {
  151. padding: 0 0 0 1.5em;
  152. border-left: 1px solid {color:borders};
  153. margin: 1.5em 0 1.5em 1.5em;
  154. }
  155.  
  156. h1, h2, h3, h4, h5, .title {
  157. letter-spacing: 0.06em;
  158. line-height: 145%;
  159. font-weight: bold;
  160. }
  161.  
  162. h1, .title {font-size: 1.5em;}
  163. h2 {font-size: 1.3em;}
  164. h3 {font-size: 1.25em;}
  165. h4 {font-size: 1.1em;}
  166. h5 {font-size: 1em;}
  167.  
  168. small {font-size: 0.9em;}
  169. big {font-size: 1.1em;}
  170.  
  171. hr {
  172. height: 1px;
  173. border: none;
  174. box-shadow: none;
  175. background-color: {color:borders};
  176. }
  177.  
  178. u {
  179. border-bottom:1px solid {color:Accent};
  180. font-weight:bold;
  181. color:{color:Accent};
  182. }
  183.  
  184. b {
  185. color:{color:Accent};
  186. }
  187.  
  188. pre {
  189. line-height: inherit;
  190. font-size: inherit;
  191. white-space: pre-wrap;
  192. white-space: -moz-pre-wrap;
  193. white-space: -pre-wrap;
  194. white-space: -o-pre-wrap;
  195. word-wrap: break-word;
  196. }
  197.  
  198. /* CONTROLS ---- */
  199.  
  200.  
  201. .controls-button {
  202. position: fixed;
  203. cursor: help;
  204. top: 20px;
  205. right: 2rem;
  206. z-index: 1000;
  207. cursor: pointer;
  208. right:1.5rem;
  209. color:{color:Accent};
  210. }
  211.  
  212. .tmblr-iframe {
  213. z-index: 999999999!important;
  214. opacity: 0;
  215. visibility: hidden;
  216. width:30px;
  217. -webkit-transition: all 0.5s;
  218. -moz-transition: all 0.5s;
  219. -ms-transition: all 0.5s;
  220. -o-transition: all 0.5s;
  221. transition: all 0.5s;
  222. }
  223.  
  224. body.controls-click .tmblr-iframe {
  225. opacity: 1;
  226. margin-right: 4rem;
  227. display:inline;
  228. vertical-align:bottom;
  229. visibility: visible;
  230. -webkit-transition: all 0.5s;
  231. -moz-transition: all 0.5s;
  232. -ms-transition: all 0.5s;
  233. -o-transition: all 0.5s;
  234. transition: all 0.5s;
  235. }
  236.  
  237. /*----- SIDEBAR -----*/
  238.  
  239. #sidebar {
  240. width: 300px;
  241. position: fixed;
  242. top: {text:post margin}px;
  243. text-align: center;
  244. padding:10px;
  245. }
  246.  
  247.  
  248. {block:ifSidebarImage}
  249. #side-img {
  250. margin-bottom: 1.5em;
  251. border-radius:1px 50px 50px 50px;
  252. border:4px solid {color:accent};
  253. width:100px;
  254. margin-left:80px;
  255. }
  256. {/block:ifSidebarImage}
  257.  
  258. #description, nav {margin-top: 1.25em;}
  259. nav a {margin: auto 0.5em;}
  260.  
  261. .title a {
  262. color:{color:Accent};
  263. }
  264.  
  265. .subtitle {
  266. text-align:center;
  267. font-style:normal;
  268. font-family:{text:Font Family};
  269. font-weight:300;
  270. font-size:12px;
  271. margin-bottom:10px;
  272. }
  273.  
  274. /*----- POSTS -----*/
  275.  
  276. main {
  277. position: relative;
  278. width: calc(300px + {select:post width} + 150px);
  279. margin: auto;
  280. }
  281.  
  282. section {
  283. position: relative;
  284. width: {select:post width};
  285. margin-left: 400px;
  286.  
  287. }
  288.  
  289. article {
  290. width: 100%;
  291. position: relative;
  292. margin: {text:post margin}px auto;
  293. padding:10px;
  294. }
  295.  
  296. .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%;}
  297.  
  298. /*----- CAPTIONS -----*/
  299.  
  300. .caption {margin-top: 2em; list-style-type: none;}
  301. .text-caption:first-of-type {margin-top: 0;}
  302.  
  303. .user-icon, .ask-icon {
  304. display: inline-block;
  305. vertical-align: middle;
  306. width: 2em;
  307. height: 2em;
  308. margin-right: 1em;
  309. }
  310.  
  311. .username {
  312. display: inline-block;
  313. vertical-align: middle;
  314. font-weight: bold;
  315. }
  316.  
  317. .deactive::after {
  318. content: '(deactivated)';
  319. margin-left: 1em;
  320. opacity: 0.75;
  321. color: {color:text};
  322. }
  323.  
  324. p.tmblr-attribution {margin-top: 1em !important;}
  325.  
  326. /*----- TEXT -----*/
  327.  
  328. h1.post-title {margin-top: 0;}
  329.  
  330. /*----- LINK -----*/
  331.  
  332. a.link-wrap {display: block; border: 1px solid {color:borders};}
  333. .link {padding: 2em;}
  334. .link-host, .link-txt {margin-top: 1.5em;}
  335.  
  336. .npf-link-block {
  337. margin-top: 1.5em;
  338. background-color: inherit;
  339. border: 1px solid inherit;
  340. color: inherit;
  341. }
  342.  
  343. /*----- PHOTO -----*/
  344.  
  345. img {
  346. margin: 0;
  347. display: block;
  348. height: auto;
  349. max-width: 100%;
  350. }
  351.  
  352. .photo img {width: 100%;}
  353. .vignette, #vignette {opacity: 0;}
  354. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  355.  
  356. .lightbox-image, #tumblr_lightbox img {
  357. box-shadow: none !important;
  358. border-radius: 0 !important;
  359. max-width: none;
  360. }
  361.  
  362. #tumblr_lightbox_caption, .lightbox-caption {
  363. color: #fff !important;
  364. font-family: inherit;
  365. margin-top: 1em !important;
  366. }
  367.  
  368. /*----- PHOTOSET -----*/
  369.  
  370. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  371. margin-left: 0 !important;
  372. margin-right: 0 !important;
  373. }
  374.  
  375. /*----- QUOTE -----*/
  376.  
  377. .quote {line-height: 160%; font-size: 1.25em;}
  378.  
  379. .quote p:first-of-type {margin-top: 0;}
  380. .quote p:last-of-type {margin-bottom: 0;}
  381.  
  382. .source {margin-top: 1.5em;}
  383.  
  384. /*----- CHAT -----*/
  385.  
  386. .chat {padding: 0; margin: 0;}
  387. .chat li {list-style-type: none; margin-top: 1em;}
  388. .chat li:first-of-type {margin-top: 0;}
  389. .chatter {font-weight: bold;}
  390.  
  391. p.npf_chat, p.npf_chat b {font-family: inherit;}
  392.  
  393. /*----- ANSWER -----*/
  394.  
  395.  
  396.  
  397. .askerbg {
  398.  
  399. padding: 0px;
  400. border-radius: 100px;
  401.  
  402. }
  403.  
  404. .askerbg img {
  405.  
  406. border-radius:100px!important;
  407.  
  408. }
  409.  
  410.  
  411.  
  412. .question {
  413.  
  414. width: auto;
  415. margin-top: 10px;
  416. margin-bottom:20px;
  417. color:{color:ask text};
  418. padding: 10px;
  419. border-radius: 7px;
  420. background:{color:ask background};
  421.  
  422. }
  423.  
  424.  
  425.  
  426. /*----- AUDIO -----*/
  427.  
  428. .audiopost {padding: 2em; border: 1px solid {color:borders};}
  429.  
  430. .album-art {
  431. z-index: 1;
  432. display: inline-block;
  433. vertical-align: middle;
  434. float: left;
  435. width: 100px;
  436. height: 100px;
  437. }
  438.  
  439. .audio-player-wrap {
  440. width: 100px;
  441. height: 100px;
  442. display: inline-block;
  443. }
  444.  
  445. .button {
  446. width: 30px;
  447. height: 30px;
  448. overflow: hidden;
  449. position: relative;
  450. z-index: 2;
  451. margin: 7px;
  452. }
  453.  
  454. .audiobox {
  455. background-color: #f2f2f2;
  456. z-index: 3;
  457. position: absolute;
  458. margin: 28px 0 0 28px;
  459. border-radius: 50%;
  460. }
  461.  
  462. .audioinfo {
  463. display: inline-block;
  464. height: 100px;
  465. max-width: calc(100% - 100px);
  466. margin-left: 100px;
  467. display: flex;
  468. justify-content: center;
  469. flex-direction: column;
  470. box-sizing: border-box;
  471. padding-left: 2em;
  472. }
  473.  
  474. .audioinfo li {list-style-type: none;}
  475. .track {font-weight: bold;}
  476.  
  477. /*----- INFO -----*/
  478.  
  479. .info {margin-top: 2em;}
  480. .info a {display: inline-block; vertical-align: middle;}
  481.  
  482. .likeb {
  483. position: relative;
  484. display: inline-block;
  485. height: 1.6em;
  486. margin-bottom: -1px;
  487. }
  488.  
  489. .likeb .like_button iframe {
  490. position: absolute;
  491. top: 0;
  492. left: 0;
  493. bottom: 0;
  494. right: 0;
  495. z-index: 2;
  496. opacity: 0;
  497. }
  498.  
  499. .like_button iframe {width: 100% !important; height: 100% !important;}
  500. .likeb .liked + .actual-button {color: red;}
  501. .likeb .liked + .actual-button:after {content: 'd';}
  502.  
  503. .info a, .tags a {margin-right: 0.75em;}
  504.  
  505. a.pinned-post {font-weight: bold; color: {color:accent};}
  506.  
  507. /*---- POST NOTES -----*/
  508.  
  509. .notes {margin: {text:post margin}px 0;}
  510.  
  511. ol.notes {
  512. max-width: 100%;
  513. padding: 0;
  514. margin: 2em 0 0 0;
  515. }
  516.  
  517. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  518.  
  519. ol.notes li.note img.avatar {
  520. margin-right: 1em;
  521. vertical-align: middle;
  522. display: inline-block;
  523. width: 1.25em;
  524. height: 1.25em;
  525. }
  526.  
  527. /*---- PAGINATION -----*/
  528.  
  529. #page-navigation {text-align: center; font-weight:600; text-transform:uppercase;}
  530. #page-navigation a, .current-page {margin: 0 0.5em; border:1px solid {color:Accent}; padding:5px; border-radius:2px;}
  531. .current-page {font-weight: bold; color: {color:accent};}
  532.  
  533. /*---- CREDIT -----*/
  534.  
  535. #credit {
  536. position: fixed;
  537. bottom: 20px;
  538. right: 20px;
  539. font-size: 15px;
  540. }
  541.  
  542. #scrollToTop:link,
  543. #scrollToTop:visited {
  544.  
  545. display: none;
  546. position: fixed;
  547. bottom:48px;
  548. right:17px;
  549. font-size: 20px;
  550. padding: 13px;
  551. color:{color:Link};
  552.  
  553. }
  554.  
  555. /* maziekeen's theme 221 - MASONRY NAVIGATION CSS PART */
  556. .masonry-navigation {
  557. width: 100%;
  558. border-bottom: 1px solid #e2e2e2;
  559. margin-bottom:15px;
  560. }
  561.  
  562. .masonry-navigation:last-child {
  563. border:none;
  564. }
  565.  
  566. .masonry-navigation-item.one-column {
  567. width: 100%;
  568. padding: 0 5px;
  569. margin-bottom: 10px;
  570. }
  571.  
  572. .masonry-navigation-item.one-column ul {
  573. display: flex;
  574. flex-wrap: wrap;
  575. margin: 0;
  576. padding: 0;
  577. }
  578.  
  579. /* if you have any problem with one colum lists (ul li) you edit here */
  580. .masonry-navigation-item.one-column ul li {
  581. margin: 4px 15px;
  582. padding: 0;
  583. }
  584.  
  585. /* if they don't display two columns correctly, try to decrease the value on width: 240px */
  586. .masonry-navigation-item.two-columns {
  587. width: 240px;
  588. padding: 0 5px;
  589. margin-bottom: 10px;
  590. }
  591.  
  592. /* if they don't display three columns correctly, try to decrease the value on width: 160px */
  593. .masonry-navigation-item.three-columns {
  594. width: 160px;
  595. padding: 0 5px;
  596. margin-bottom: 10px;
  597. }
  598.  
  599. /* edit height: 215px to adjust the box height if you add the class scroll in the html */
  600. .masonry-navigation-item.scroll {
  601. height:215px;
  602. overflow-y: scroll;
  603. }
  604. /* maziekeen's theme 221 - MASONRY NAVIGATION CSS PART */
  605. /*---- day/night toggle ---*/
  606.  
  607. /*---- day/night toggle ---*/
  608.  
  609. body.night {
  610. background:{color:Dark Mode Post Backgrounds}!important;
  611. color:white!important;
  612. transition:.6s;
  613. }
  614.  
  615. .daynight span {
  616. margin-bottom:100px;
  617. margin-left:500px;
  618. font-size: 13px;
  619. cursor:pointer;
  620. padding-top:30px;
  621. }
  622.  
  623. body.night credit, body.night a, body.night b, body.night i, body.night search { color:{color:Dark Mode Links}!important; }
  624.  
  625. body.night aside, body.night scrollbar, body.night footer, body.night article { background:{color:Dark Mode Post Backgrounds}!important; padding:10px; border-radius:10px; }
  626.  
  627.  
  628.  
  629.  
  630. /*----
  631.  
  632. MEDIA QUERIES AND RESPONSIVENESS:
  633.  
  634. if you change the basic layout (i.e. sidebar to header), you MUST modify or delete this section, or else your theme will get screwed up on smaller screen sizes. if you're unfamiliar with media queries and/or you aren't interested in making responsive themes, I recommend deleting this whole section.
  635.  
  636. -----*/
  637.  
  638. /*--- for small desktop/tablet screens. converts sidebar to header ---*/
  639.  
  640. @media only screen and (max-width: 1100px) {
  641. main {width: {select:post width};}
  642.  
  643. #sidebar {
  644. position: relative;
  645. margin: {text:post margin}px auto;
  646. width: 100%;
  647. top: auto;
  648. }
  649.  
  650. section {margin-left: 0;}
  651. }
  652.  
  653. /*--- for mobile devices ---*/
  654.  
  655. @media only screen and (max-width: 720px) {
  656. main, section {width: 80vw;}
  657. }
  658.  
  659. /*---- END OF MEDIA QUERIES -----*/
  660.  
  661. {CustomCSS}
  662.  
  663. </style>
  664. </head>
  665.  
  666. <!----- HTML ----->
  667.  
  668. <body>
  669.  
  670. <!-- main = main container -->
  671.  
  672. <main>
  673.  
  674. <!----- SIDEBAR ----->
  675. <aside id="sidebar">
  676. {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img" alt="Sidebar image"/></a>{/block:ifSidebarImage}
  677. <div class="title"><a href="/">{Title}</a></div>
  678. <div class="subtitle">@{name}</div>
  679. {block:Description}<div id="description">{text:desktop description}</div>{/block:Description}
  680. <nav>
  681. <a href="/" title="home"><i class="fas fa-home"></i></a>
  682. <a href="/ask" title"message"><i class="far fa-comment-alt"></i></a>
  683. <a href="{text:Link 1 URL}" title="{text:Link 1}"><i class="fas fa-at"></i></a>
  684. <a href="{text:Link 2 URL}" title="{text:Link 2}"><i class="fas fa-tasks"></i></a>
  685. <a href="{text:Link 3 URL}" title="{text:Link 3}"><i class="far fa-edit"></i></a>
  686. <a href="{text:Link 4 URL}" title="{text:Link 4}"><i class="far fa-heart"></i></a>
  687. <p>
  688. <div class="daynight">
  689. <i class="ph-bold ph-lightbulb" style="color:#816e6e; font-size:14px; border:1px solid {color:accent}; border-radius:10px; padding:5px" title="Turn off the lights"></i></div>
  690. </p>
  691.  
  692.  
  693. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  694. </nav>
  695. </aside>
  696. <!----- TAG AND DAY PAGES ----->
  697.  
  698. <!-- section = post container -->
  699.  
  700. <section>
  701.  
  702. {block:TagPage}
  703. <article>
  704. Viewing posts filed under #{Tag}
  705. </article>
  706. {/block:TagPage}
  707.  
  708. {block:DayPage}
  709. <article>
  710. Viewing posts made on {Month} {DayOfMonth}, {Year}
  711. </article>
  712. {/block:DayPage}
  713.  
  714. <!----- POSTS ----->
  715.  
  716. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  717.  
  718. <article class="posts" id="{PostID}" post-type="{PostType}">
  719.  
  720. {block:Text}
  721. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  722. {block:NotReblog}
  723. <li class="caption text-caption">
  724. {Body}
  725. </li>
  726. {/block:NotReblog}
  727. {block:RebloggedFrom}
  728. {block:Reblogs}
  729. <li class="caption text-caption source-head">
  730. <img src="{PortraitURL-64}" class="user-icon">
  731. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  732. {Body}
  733. </li>
  734. {/block:Reblogs}
  735. {/block:RebloggedFrom}
  736. {/block:Text}
  737.  
  738. {block:Link}
  739. <a href="{URL}" class="link-wrap">
  740. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  741. <div class="link">
  742. <div class="title">{Name}</div>
  743. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  744. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  745. </div>
  746. </a>
  747. {block:Description}
  748. {block:NotReblog}
  749. <li class="caption">
  750. {Description}
  751. </li>
  752. {/block:NotReblog}
  753. {/block:Description}
  754. {block:RebloggedFrom}
  755. {block:Reblogs}
  756. <li class="caption">
  757. <img src="{PortraitURL-64}" class="user-icon">
  758. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  759. {Body}
  760. </li>
  761. {/block:Reblogs}
  762. {/block:RebloggedFrom}
  763. {/block:Link}
  764.  
  765. {block:Photo}
  766. <div class="photo">
  767. {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}
  768. </div>
  769. {block:Caption}
  770. {block:NotReblog}
  771. <li class="caption">
  772. {Caption}
  773. </li>
  774. {/block:NotReblog}
  775. {block:RebloggedFrom}
  776. {block:Reblogs}
  777. <li class="caption">
  778. <img src="{PortraitURL-64}" class="user-icon">
  779. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  780. {Body}
  781. </li>
  782. {/block:Reblogs}
  783. {/block:RebloggedFrom}
  784. {/block:Caption}
  785. {/block:Photo}
  786.  
  787. {block:Photoset}
  788. <div class="photo">{Photoset-700}</div>
  789. {block:Caption}
  790. {block:NotReblog}
  791. <li class="caption">
  792. {Caption}
  793. </li>
  794. {/block:NotReblog}
  795. {block:RebloggedFrom}
  796. {block:Reblogs}
  797. <li class="caption">
  798. <img src="{PortraitURL-64}" class="user-icon">
  799. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  800. {Body}
  801. </li>
  802. {/block:Reblogs}
  803. {/block:RebloggedFrom}
  804. {/block:Caption}
  805. {/block:Photoset}
  806.  
  807. {block:Video}
  808. <div class="video">{Video-500}</div>
  809. {block:Caption}
  810. {block:NotReblog}
  811. <li class="caption">
  812. {Caption}
  813. </li>
  814. {/block:NotReblog}
  815. {block:RebloggedFrom}
  816. {block:Reblogs}
  817. <li class="caption">
  818. <img src="{PortraitURL-64}" class="user-icon">
  819. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  820. {Body}
  821. </li>
  822. {/block:Reblogs}
  823. {/block:RebloggedFrom}
  824. {/block:Caption}
  825. {/block:Video}
  826.  
  827. {block:Quote}
  828. <div class="quote">{Quote}</div>
  829. {block:Source}<div class="source">{Source}</div>{/block:Source}
  830. {/block:Quote}
  831.  
  832. {block:Chat}
  833. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  834. <ul class="chat">{block:Lines}
  835. <li>
  836. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  837. {Line}
  838. </li>
  839. {/block:Lines}</ul>
  840. {/block:Chat}
  841.  
  842. {block:Answer}
  843. <table style="padding-bottom:5px;margin-bottom:5px;">
  844. <tr>
  845. <td class="askerbg" style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-64}"></td><td style="vertical-align:top;"><strong>{Asker} asked:</strong>
  846. <div class="question">{Question}</div>
  847. </td>
  848. </tr>
  849. </table>
  850. {Answer}
  851. {/block:Answer}
  852.  
  853. {block:Audio}
  854. <div class="audiopost">
  855. <div class="audiobox">
  856. <div class="button">
  857. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  858. </div>
  859. </div>
  860. {block:AlbumArt}
  861. <img src="{AlbumArtURL}" class="album-art">
  862. {/block:AlbumArt}
  863. <div class="audioinfo">
  864. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  865. {block:Artist}<li>{Artist}</li>{/block:Artist}
  866. {block:Album}<li>{Album}</li>{/block:Album}
  867. </div>
  868. </div>
  869. {block:Caption}
  870. {block:NotReblog}
  871. <li class="caption">
  872. {Caption}
  873. </li>
  874. {/block:NotReblog}
  875. {block:RebloggedFrom}
  876. {block:Reblogs}
  877. <li class="caption">
  878. <img src="{PortraitURL-64}" class="user-icon">
  879. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  880. {Body}
  881. </li>
  882. {/block:Reblogs}
  883. {/block:RebloggedFrom}
  884. {/block:Caption}
  885. {/block:Audio}
  886.  
  887. <!----- INFO ----->
  888.  
  889. {block:Date}
  890. <div class="info">
  891. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post"><i class="fas fa-thumbtack"></i> {PinnedPostLabel}</a>{/block:PinnedPostLabel}
  892. <a href="{Permalink}">{DayOfMonth}/{MonthNumberWithZero}</a>
  893. {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  894.  
  895. <!-- reblog info and content source on permalink pages -->
  896.  
  897. {block:PermalinkPage}
  898.  
  899. {block:RebloggedFrom}
  900. <a href="{ReblogParentURL}">via</a>
  901. <a href="{ReblogRootURL}">originally</a>
  902. {/block:RebloggedFrom}
  903. {block:ContentSource}<a href="{SourceURL}">{lang:Source}</a>{/block:ContentSource}
  904.  
  905. {/block:PermalinkPage}
  906.  
  907. <!-- like and reblog buttons -->
  908.  
  909. <a href="{ReblogURL}" target="_blank"><i class="fas fa-sync-alt"></i></a>
  910. <a class="likeb" href="#">{LikeButton}<span class="actual-button"><i class="far fa-heart"></i></span></a>
  911.  
  912. </div>
  913. {/block:Date}
  914.  
  915. <!----- TAGS ----->
  916.  
  917. {block:HasTags}
  918. <div class="tags">
  919. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  920. </div>
  921. {/block:HasTags}
  922.  
  923. <!----- POST NOTES ----->
  924.  
  925. {block:PermalinkPage}{block:Date}
  926. {block:NoteCount}{block:PostNotes}
  927. <div class="notes">
  928. {PostNotes-64}
  929. </div>
  930. {/block:PostNotes}{/block:NoteCount}
  931. {/block:Date}{/block:PermalinkPage}
  932.  
  933. </article>
  934. {/block:Posts}
  935.  
  936. <!-- end of posts container -->
  937.  
  938. </section>
  939.  
  940. <!----- PAGINATION ----->
  941.  
  942. {block:Pagination}
  943. <article id="page-navigation">
  944. {block:PreviousPage}<a href="{PreviousPage}">previous page</a>{/block:PreviousPage}
  945. {block:JumpPagination length="5"}
  946. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  947. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  948. {/block:JumpPagination}
  949. {block:NextPage}<a href="{NextPage}">next page</a>{/block:NextPage}
  950. </article>
  951. {/block:Pagination}
  952.  
  953. <!-- end of main container -->
  954.  
  955. </main>
  956.  
  957.  
  958. <!--- TUMBLR CONTROLS -->
  959.  
  960.  
  961. <div title="Tumblr Controls" class="controls-button"><i class="ph-bold ph-dots-three-outline" style="font-size:20px"></i></div>
  962.  
  963.  
  964. <!----- CREDIT do not remove. ----->
  965.  
  966. <a href="https://userbru.tumblr.com" title="by userbru" id="credit"><i class="far fa-moon"></i></a>
  967.  
  968.  
  969.  
  970. <!--- TUMBLR CONTROLS -->
  971.  
  972. <script src=“//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  973.  
  974. <script>
  975. $('.controls-button').click(function(){
  976. $('body').toggleClass('controls-click');
  977. });
  978. </script>
  979.  
  980. <!-- masonry navigation -->
  981. <script src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
  982.  
  983. <script type="text/javascript">
  984. // masonry navigation
  985. var elements = document.getElementsByClassName('masonry-navigation');
  986. var msnry;
  987. var nElements = elements.length;
  988. for(var i = 0; i < nElements; i++){
  989. msnry = new Masonry( elements[i], {
  990. // columnWidth: 268,
  991. gutter: 10,
  992. itemSelector: '.masonry-navigation-item',
  993. });
  994. }
  995. </script>
  996.  
  997. <!---- day/night toggle----->
  998.  
  999. <script>
  1000. const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
  1001.  
  1002. if (currentTheme === 'night') {
  1003. $( 'body' ).addClass( 'night');
  1004. }
  1005.  
  1006. $(document).ready(function(){
  1007. $('.daynight').click(function(){
  1008. $(document).ready(function(){
  1009. $('.daynight').click(function(){
  1010. let theme = 'daynight';
  1011. $('body').toggleClass('night');
  1012. $('.daynight span').toggleClass('fa-sun');
  1013. if ($('body').hasClass('night')) {
  1014. theme = 'night';
  1015. }
  1016. localStorage.setItem('theme', theme);
  1017. });
  1018. });
  1019. });
  1020. });
  1021. </script>
  1022.  
  1023.  
  1024. </body>
  1025. </html>
  1026.  
  1027.  
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!