API tools faq
paste
Advertisement
userbru

theme thirty-two.

userbru
Dec 5th, 2023 (edited)
1,742
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.30 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3.  
  4.  
  5. THEME BY BRU
  6.  
  7. base from eggdesign's npf buildatheme
  8. icons by cappuccicons, phosphoricons
  9. tooltips by aidensthemes
  10. masonry & controls by maziekeen
  11.  
  12.  
  13.  
  14.  
  15. -->
  16. <html>
  17. <head>
  18. <title>{Title}</title>
  19. <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
  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. {block:Options}
  24. <meta name="color:background" content="#ffe9d1"/>
  25. <meta name="color:posts" content="#f7f7f7"/>
  26. <meta name="color:text" content="#2d2d2d"/>
  27. <meta name="color:links" content="#529ecc" />
  28. <meta name="color:tags" content="#171717" />
  29. <meta name="color:sidebar links" content="#000000"/>
  30. <meta name="color:search background" content="#fff" />
  31. <meta name="color:search text" content="#000"/>
  32. <meta name="color:borders" content="#838383"/>
  33. <meta name="color:tape background" content="#64c5ff"/>
  34. <meta name="text:border width" content="1px"/>
  35. <meta name="text:border radius" content="4px"/>
  36. <meta name="text:font size" content="16px" />
  37. <meta name="image:background" content=""/>
  38. <meta name="image:side image" content=""/>
  39. <meta name="color:night mode accent" content="#529ecc" />
  40. <meta name="color:night mode background" content="#0c0c0c" />
  41. <meta name="color:night mode posts" content="#222222" />
  42. <meta name="color:night mode text" content="#fff" />
  43. <meta name="if:Remove background image in night mode" content=""/>
  44. <meta name="if:full background" content=""/>
  45.  
  46. <meta name="select:Font" content="Helvetica" title="Helvetica" />
  47. <meta name="select:Font" content="Roboto" title="Roboto" />
  48. <meta name="select:Font" content="Favorit" title="Favorit" />
  49. <meta name="select:Font" content="Calluna" title="Calluna" />
  50. <meta name="select:Font" content="Fairwater" title="Fairwater" />
  51. <meta name="select:Font" content="Source Code Pro" title="Source Code Pro" />
  52.  
  53. <meta name="text:Alt Description" content=""/>
  54. <meta name="text:Link 1 URL" content="/"/>
  55. <meta name="text:Link 1 Title" content="home"/>
  56. <meta name="text:Link 2 URL" content="/ask"/>
  57. <meta name="text:Link 2 Title" content="inbox"/>
  58. <meta name="text:Link 3 URL" content=""/>
  59. <meta name="text:Link 3 Title" content=""/>
  60. <meta name="text:Link 4 URL" content=""/>
  61. <meta name="text:Link 4 Title" content=""/>
  62. <meta name="text:Link 5 URL" content=""/>
  63. <meta name="text:Link 5 Title" content=""/>
  64. <meta name="text:Link 6 URL" content=""/>
  65. <meta name="text:Link 6 Title" content=""/>
  66. <meta name="text:Link 7 URL" content=""/>
  67. <meta name="text:Link 7 Title" content=""/>
  68.  
  69. {/block:Options}
  70.  
  71. {NewPostStyles}
  72. <script>
  73. const themed = localStorage.getItem('night-mode');
  74. if (themed === "enabled") {
  75. sessionStorage.setItem('night-mode', 'enabled');
  76. document.documentElement.classList.add('night-mode-theme');
  77. }
  78. </script>
  79. <script src="https://static.tumblr.com/svdghan/gFJrolu7g/daynight.js"></script>
  80.  
  81. <script src="//pull.cappuccicons.com/cpf.js"></script>
  82. <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]"></script>
  83.  
  84.  
  85. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  86. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  87. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  88. <script>
  89. (function($){
  90. $(document).ready(function(){
  91. $("[title]").style_my_tooltips();
  92. });
  93. })(jQuery);
  94. </script>
  95.  
  96. <style>
  97. @import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900');
  98.  
  99. * {
  100. box-sizing: border-box;
  101. }
  102. :root {
  103. --background-image: url({image:background});
  104. --background: {color:background};
  105. --accent: {AccentColor};
  106. --text: {color:text};
  107. --borders: {color:borders};
  108. --spacing: 1rem;
  109. --border-width: {text:border width};
  110. --border-radius: {text:border radius};
  111. --posts: {color:posts};
  112. --tags: {color:tags};
  113. --links: {color:links};
  114. --sidebar-links: {color:sidebar links};
  115. --search-background: {color:search background};
  116. --search-text: {color:search text};
  117. --headerimage: url({HeaderImage});
  118. --tape: {color:tape background};
  119.  
  120. --invert: invert(0);
  121. --night-mode-accent: {color:night mode accent};
  122.  
  123. }
  124.  
  125. .night-mode-theme {
  126. --background: {color:night mode background};
  127. --accent: var(--night-mode-accent);
  128. {block:ifRemoveBackgroundImageInNightMode}
  129. --background-image: url('');
  130. {/block:ifRemoveBackgroundImageInNightMode}
  131. --text: white;
  132. --posts: {color:night mode posts};
  133. --invert: invert(1);
  134. --links: var(--night-mode-accent);
  135. --tags: var(--night-mode-accent);
  136. }
  137.  
  138. body {
  139. font-family: {select:Font}, sans-serif;
  140. font-size: clamp(.92rem, {text:font size}, 20px);
  141. margin: 0;
  142. height: 100vh;
  143. color: var(--text);
  144. background: var(--background) var(--background-image) center center fixed;
  145. {block:iffullbackground}
  146. background-size: cover;
  147. {/block:iffullbackground}}
  148.  
  149.  
  150. ::-webkit-scrollbar-thumb:vertical {
  151. background-color:{color:links};
  152. -moz-border-radius:10px;
  153. -webkit-border-radius:10px;
  154. }
  155.  
  156. ::-webkit-scrollbar {
  157. width:7px;
  158. height:5px;
  159. background-color:#ffffff;
  160. }
  161.  
  162.  
  163.  
  164. #s-m-t-tooltip {
  165. z-index: 9999;
  166. background: #fff;
  167. font-size: 14px;
  168. padding:10px;
  169. font-family: {select:Font}, sans-serif;
  170. line-height: 13px;
  171. letter-spacing: 1px;
  172. border-radius:5%;
  173. background-color:var(--links);
  174. color:var(--text);
  175. moz-border-radius-bottomright: 5px;
  176. border-bottom-right-radius: 5px;
  177. -moz-border-radius-topleft: 5px;
  178. border-top-left-radius: 5px;
  179. -moz-border-radius-bottomleft: 5px;
  180. border-bottom-left-radius: 5px;
  181. -moz-border-radius-topright: 5px;
  182. border-top-right-radius: 5px;
  183. -o-transition: all 0.3s ease-out;
  184. -webkit-transition: all 0.3s ease-out;
  185. -moz-transition: all 0.3s ease-out;
  186. text-transform: normal
  187. max-width: 150px;
  188. word-wrap: break-word;
  189. display: block;
  190. margin: 24px 14px 7px 12px;
  191. }
  192.  
  193. a {
  194. position: relative;
  195. color: var(--links);
  196. text-decoration: none;
  197. -webkit-transition: all 0.3s;
  198. -moz-transition: all 0.3s;
  199. -ms-transition: all 0.3s;
  200. -o-transition: all 0.3s;
  201. transition: all 0.3s;
  202. }
  203.  
  204. a:hover {
  205. text-decoration: underline;
  206. -webkit-transition: all 0.3s;
  207. -moz-transition: all 0.3s;
  208. -ms-transition: all 0.3s;
  209. -o-transition: all 0.3s;
  210. transition: all 0.3s;
  211. }
  212.  
  213. /* ----- TUMBLR CONTROLS ---- */
  214.  
  215.  
  216. .controls-button {
  217. position: fixed;
  218. cursor: help;
  219. top: 20px;
  220. right: 2rem;
  221. z-index: 1000;
  222. cursor: pointer;
  223. right:1.5rem;
  224. color:{color:text};
  225. }
  226.  
  227. .tmblr-iframe {
  228. z-index: 999999999!important;
  229. opacity: 0;
  230. visibility: hidden;
  231. width:30px;
  232. -webkit-transition: all 0.5s;
  233. -moz-transition: all 0.5s;
  234. -ms-transition: all 0.5s;
  235. -o-transition: all 0.5s;
  236. transition: all 0.5s;
  237. }
  238.  
  239. body.controls-click .tmblr-iframe {
  240. opacity: 1;
  241. margin-right: 4rem;
  242. display:inline;
  243. vertical-align:bottom;
  244. visibility: visible;
  245. -webkit-transition: all 0.5s;
  246. -moz-transition: all 0.5s;
  247. -ms-transition: all 0.5s;
  248. -o-transition: all 0.5s;
  249. transition: all 0.5s;
  250. }
  251.  
  252. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  253.  
  254.  
  255. article a {
  256. text-decoration: none;
  257. }
  258.  
  259. article a:hover {
  260. text-decoration: underline;
  261. }
  262.  
  263. article iframe, .tumblr_video_container {
  264. max-width: 100%;
  265. }
  266.  
  267. .blog-title {
  268. font-family: {TitleFont};
  269. }
  270.  
  271. main, .pagination {
  272. display: flex;
  273. flex-wrap: wrap;
  274. align-items: flex-start;
  275. justify-content: space-around;
  276. }
  277.  
  278. main {
  279. max-width:1100px;
  280. margin:auto;
  281. }
  282.  
  283. article, .pagination {
  284. width: 100%;
  285. position:relative;
  286. max-width: 540px;
  287. margin: calc(var(--spacing) * 4) auto;
  288. border: var(--border-width) solid var(--borders);
  289. border-radius: var(--border-radius);
  290. background:var(--posts);
  291. }
  292. aside .pagination {
  293. margin: var(--spacing) auto auto auto;
  294. }
  295.  
  296. article img {
  297. max-width: 100%;
  298. }
  299.  
  300. .link-container {
  301. padding: var(--spacing);
  302. margin:var(--spacing);
  303. border:var(--border-width) solid var(--borders);
  304. border-radius: var(--border-radius);
  305. }
  306.  
  307. .caption:empty, p:empty {
  308. display:none;
  309. }
  310.  
  311. .reblog-header a {
  312. display: flex;
  313. align-items:center;
  314. }
  315.  
  316. .reblog-header img {
  317. padding-right: .4rem;
  318. max-height: 2rem;
  319. max-width:2rem;
  320. }
  321. .contained :is(header, footer, main) {
  322. width: 100%;
  323. max-width: 1000px;
  324. margin: 1rem auto;
  325. background: var(--background);
  326. border: var(--border-width) solid var(--borders);
  327. }
  328.  
  329. .contained header {
  330. margin-bottom: 0;
  331. padding: var(--spacing);
  332. }
  333. .contained main {
  334. height: 70vh;
  335. overflow: auto;
  336.  
  337. }
  338.  
  339. .contained article, .contained .pagination {
  340. max-width: 500px;
  341. }
  342.  
  343. main a:hover {
  344. text-decoration:none;
  345. }
  346.  
  347.  
  348.  
  349. .grid main {
  350. max-width: 98%;
  351. }
  352.  
  353. .grid section {
  354. column-count: 2;
  355. break-inside: avoid;
  356. grid-gap: calc(var(--spacing) * 2);
  357. margin-bottom:var(--spacing);
  358. }
  359.  
  360. .grid article {
  361. display: inline-block;
  362. max-width: calc(100% - var(--spacing));
  363. margin: var(--spacing) 0;
  364. }
  365.  
  366. .original-post, .reblog-header, .tags, .post-info, .pagination, .quote-container, .replies, .question {
  367. padding: var(--spacing);
  368. }
  369.  
  370. .note-info a {
  371. font-size:16px;
  372. }
  373.  
  374.  
  375. .reblog-content p, .reblog-content h2, .reblog-content h1 {
  376. margin-left: var(--spacing);
  377. margin-right: var(--spacing);
  378. }
  379.  
  380. .quote-container, .replies, .question {
  381. border: var(--border-width) solid var(--borders);
  382. margin: var(--spacing);
  383. }
  384.  
  385. .asker-icon {
  386. width:30px;
  387. border-radius:100%;
  388. vertical-align:middle;
  389. margin-right:10px;
  390. }
  391.  
  392. .description, aside h2 {
  393. padding: calc(var(--spacing) /2) 0;
  394. margin: 0;
  395. }
  396. #search-form input {
  397. padding: calc(var(--spacing) / 2);
  398. width:100%;
  399. background:var(--search-background);
  400. margin: calc(var(--spacing) /2) 0 0 0;
  401. border:var(--border-width) solid var(--borders);
  402. border-radius:var(--border-radius);
  403. color:var(--search-text);
  404. }
  405. ::placeholder {
  406. color:var(--search-text);
  407. }
  408.  
  409. .post-info, .like-and-reblog, .contained {
  410. display: flex;
  411. flex-wrap: wrap;
  412. align-items: center;
  413. justify-content: space-between;
  414. }
  415. .pinned {
  416. font-weight:bold;
  417. color:var(--accent);
  418. }
  419.  
  420. .pinned {
  421. font-weight:bold;
  422. }
  423. .pinned-tape {
  424. color:transparent;
  425. width: 40%;
  426. position: absolute;
  427. height: 1.6rem;
  428. display: block;
  429. box-shadow: 0px 1px 2px rgba(0, 0, 0, .08);
  430. background: var(--tape);
  431. border-bottom-right-radius: 2px;
  432. transform: skew(6deg) rotateZ(-1deg);
  433. border-radius: 6px/14px 0;
  434. z-index: 2;
  435. opacity: .2;
  436. top: -.8rem;
  437. margin-left: -20%;
  438. left: 50%;
  439.  
  440. }
  441.  
  442.  
  443.  
  444.  
  445. .like-and-reblog .reblog_button, .like-and-reblog .like_button:not(.liked) {
  446. filter: var(--invert);
  447. }
  448. aside {
  449. width: calc(30% - calc(var(--spacing) * 2));
  450. height:100vh;
  451. position: sticky;
  452. top: 0;
  453. }
  454.  
  455. .side-image {
  456. margin-top:100px;
  457. margin-bottom:-50px;
  458. margin-left:0px;
  459. margin-right:0px;
  460. }
  461.  
  462. .side-image img {
  463. border-radius:15px;
  464. width:300px;
  465. }
  466.  
  467. .sidebar-navi {
  468. margin-left:10px;
  469. margin-right:10px;
  470. }
  471.  
  472. .sidebar-navi a {
  473. padding:5px;
  474. font-size:18px;
  475. font-weight:bold;
  476. }
  477.  
  478. .sidebar-container {
  479. background: var(--posts);
  480. margin: calc(var(--spacing) * 4) auto 0 auto;
  481. border: var(--border-width) solid var(--borders);
  482. padding:var(--spacing);
  483. max-width: 300px;
  484. border-radius: var(--border-radius);
  485. }
  486. .sidebar-style-dash {
  487. padding:0;
  488. text-align:center;
  489. }
  490.  
  491. .sidebar-style-dash .pagination {
  492. border:0 solid transparent;
  493. }
  494. .sidebar-style-dash :is(h2, div){
  495. padding:var(--spacing);
  496. }
  497. .sidebar-style-dash h2 + div, .sidebar-style-dash div + div {
  498. padding-top:0;
  499. }
  500.  
  501. .sidebar-style-bubble {
  502. padding: 0;
  503. border: var(--border-width) solid var(--borders);
  504. background: var(--posts);
  505. padding:var(--spacing);
  506. border-radius: var(--border-radius);
  507. }
  508.  
  509. .bubble {
  510. display:flex;
  511. flex-wrap:wrap;
  512. align-items:center;
  513. }
  514.  
  515. .sidebar-container a {
  516. color:var(--links);
  517. }
  518.  
  519. .bubble-desc {
  520. border:var(--border-width) solid var(--borders);
  521. padding: var(--spacing);
  522. width:100%;
  523. background:var(--posts);
  524. border-radius:.6rem;
  525. border-top-left-radius:0;
  526. margin:var(--spacing) 0;
  527. }
  528.  
  529. .header-image {
  530. margin-bottom: 24px!important;
  531. }
  532.  
  533. .sidebar-style-bubble img {
  534. width:48px;
  535. border-radius:50%;
  536. margin-right:.4rem;
  537. }
  538.  
  539. {block:ShowHeaderImage}
  540. {block:ShowAvatar}
  541. .header-image + * {
  542. margin-top:24px;
  543. }
  544. {/block:ShowAvatar}
  545. {/block:ShowHeaderImage}
  546.  
  547. .header-image img {
  548. width:48px;
  549. background:#facade;
  550. height:48px;
  551. {block:ShowHeaderImage}
  552. position:absolute;
  553. bottom: -24px;
  554. {/block:ShowHeaderImage}
  555. border-radius:50%;
  556. }
  557. section {
  558. width: 70%;
  559. }
  560.  
  561. .contained section {
  562. width:60%;
  563. }
  564.  
  565. .post-info {
  566. border-top:1px solid {color:borders};
  567. }
  568.  
  569. .post-info a {
  570. padding:3px;
  571. text-align:center!important;
  572. }
  573.  
  574. .header-image {
  575. position: relative;
  576. {block:ShowHeaderImage}
  577. display:flex;
  578. width:100%;
  579. justify-content:center;
  580. background: var(--headerimage) center center;
  581. aspect-ratio: 3/1;
  582. background-size:cover;
  583. {/block:ShowHeaderImage}
  584. }
  585. .reblog_button {
  586. margin-right: .6rem;
  587. }
  588. .like_button {
  589. height:20px;
  590. }
  591.  
  592. .pages-container, .nav-container {
  593. margin: calc(var(--spacing) /4) 0;
  594. }
  595. .pages-container a, .nav-container a, .pagination a, .tags a {
  596. display: inline-block;
  597. margin-right: .4rem;
  598. color: var(--text);
  599. text-decoration:none;
  600. }
  601.  
  602. aside a {
  603. color: var(--sidebar-links);
  604. }
  605.  
  606. .tags a {
  607. color: var(--tags);
  608. }
  609.  
  610. .pages-container a {
  611. font-weight:bold;
  612. color:var(--accent);
  613. }
  614.  
  615. .reblogs a, .caption a {
  616. color:{color:links};
  617. }
  618.  
  619. .reblogs-title {
  620. padding:10px;
  621. }
  622.  
  623. .tumblr_audio_player {
  624. width: 100%;
  625. }
  626.  
  627. .spotify_audio_player {
  628. margin-bottom:-200px;
  629. }
  630.  
  631. article.notes li {
  632. list-style-type:circle;
  633. padding:10px;
  634. }
  635.  
  636. a.poll-row {
  637. width:60%;
  638. }
  639.  
  640.  
  641. @media only screen and (max-width: 1100px) {
  642. main, .contained main, section {
  643. width: 80%;
  644. height: auto;
  645. }
  646. aside, .sidebar-container{
  647. width: 80%;
  648. max-width:100%;
  649. height: auto;
  650. position:relative;
  651. }
  652. .sidebar-container {
  653. max-width:90%;
  654. margin:var(--spacing) auto;
  655. }
  656.  
  657. article {
  658. max-width:90%;
  659. margin: var(--spacing) auto;
  660. }
  661.  
  662. .grid section {
  663. column-count: 1;
  664. }
  665.  
  666. .side-image img {
  667. display:none;
  668. }
  669.  
  670. }
  671.  
  672. .screen-reader {
  673. border: 0;
  674. clip: rect(1px, 1px, 1px, 1px);
  675. clip-path: inset(50%);
  676. height: 1px;
  677. margin: -1px;
  678. overflow: hidden;
  679. padding: 0;
  680. position: absolute;
  681. width: 1px;
  682. word-wrap: normal !important;
  683. }
  684. #daynight-toggle {
  685. cursor:pointer;
  686. background:;
  687. position:fixed;
  688. top:var(--spacing);
  689. left:var(--spacing);
  690. z-index:2;
  691. height:2rem;
  692. width:2rem;
  693. border-radius:50%;
  694. background:white;
  695. display:flex;
  696. border:var(--border-width) solid var(--borders);
  697. flex-wrap:wrap;
  698. justify-content:center;
  699. align-items:center;
  700. }
  701.  
  702. #daynight-toggle:before {
  703. content:'☀';
  704. }
  705.  
  706. #daynight-toggle.night-mode-toggle:before {
  707. content:'';
  708. width:1rem;
  709. height:1rem;
  710. transform:translate(-.32rem, -.32rem);
  711. border-radius: 50%;
  712. box-shadow: .32rem .32rem 0 0 black;
  713. }
  714.  
  715.  
  716. /*---- CREDIT -----*/
  717.  
  718. #credit {
  719. position: fixed;
  720. bottom: 20px;
  721. right: 20px;
  722. font-size: 15px;
  723. }
  724.  
  725. {CustomCSS}
  726. </style>
  727. </head>
  728. <body class="default {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">
  729. <button id="daynight-toggle"><span class="screen-reader">toggle day and night mode</span></button>
  730. <main>
  731. <section>
  732. {block:SearchPage}
  733. <article>
  734. <div class="reblogs-title">{lang:Found SearchResultCount results for SearchQuery}</div>
  735. </article>
  736. {/block:SearchPage}
  737. {block:TagPage}
  738. <article>
  739. <div class="reblogs-title">{lang:Showing TagResultCount posts tagged Tag}</div>
  740. </article>
  741. {/block:TagPage}
  742. {block:DayPage}
  743. <article>
  744. <div class="reblogs-title">{lang:Viewing everything posted on Month DayOfMonth Year}</div>
  745. </article>
  746. {/block:DayPage}
  747. {block:Posts}
  748. <!-- {block:NoRebloggedFrom}
  749. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  750. {/block:NoRebloggedFrom} -->
  751. {block:ContentSource}<!-- {SourceURL}
  752. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  753. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  754. {/block:ContentSource}
  755. <article id="post-{PostID}">
  756. {block:PinnedPostLabel}<div class="pinned pinned-tape"><i></i></div>{/block:PinnedPostLabel}
  757.  
  758.  
  759. {block:RebloggedFrom}
  760. <div class="reblog-header">
  761. <a href="{permalink}" {block:isdeactivated}class="inactive"{/block:isdeactivated}>
  762. <img src={ReblogRootPortraitURL-64} alt="{ReblogRootName}"> {ReblogRootName}
  763. </a>
  764. </div>
  765. {/block:RebloggedFrom}
  766. {block:Photo}
  767. <img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos">
  768. {/block:Photo}
  769.  
  770. {block:Photoset}
  771. {Photoset}
  772. {/block:Photoset}
  773.  
  774. {block:Panorama}
  775. <img src="{photourl-panorama}" alt="{photoalt}">
  776. {/block:Panorama}
  777.  
  778. {block:Quote}
  779. <div class="quote-container">
  780. <div class="quote">
  781. "{Quote}"
  782. </div>
  783. <div class="source">
  784. -{Source}
  785. </div>
  786. </div>
  787. {/block:Quote}
  788.  
  789. {block:Chat}
  790. <ul class="chat">
  791. {block:Lines}
  792. <li>
  793. {block:Label}{Label}{/block:Label}
  794. {Line}
  795. </li>
  796. {/block:Lines}
  797. </ul>
  798. {/block:Chat}
  799.  
  800. {block:link}
  801. <div class="link-container">
  802. <a href="{URL}">
  803. {Name}
  804. </a>
  805. </div>
  806. {/block:link}
  807.  
  808. {block:Video}
  809. {Video-700}
  810. {/block:Video}
  811.  
  812. {block:Audio}
  813. {audioembed}
  814. {/block:Audio}
  815.  
  816. {block:Answer}
  817. <div class="question">
  818. <img src="{AskerPortraitUrl-64}" class="asker-icon"> {Asker} asked: {Question}
  819. </div>
  820. {block:Answerer}
  821. <div class="replies">
  822. {Answerer}: {Answer}
  823. </div>
  824. {/block:Answerer}
  825. {block:NotReblog}
  826. <div class="replies">
  827. {Replies}
  828. </div>
  829. {/block:NotReblog}
  830. {/block:Answer}
  831. <!-- captions -->
  832. <div class="caption {block:notreblog} original-post {/block:notreblog}">
  833. {block:Text}
  834. {block:Title}<h2>{Title}</h2>{/block:Title}
  835. {/block:Text}
  836. {block:notreblog}
  837. {block:caption}{Caption}{/block:caption}
  838. {block:Text}{body}{/block:Text}
  839. {/block:notreblog}
  840. {block:Rebloggedfrom}
  841. {block:Reblogs}
  842. <div class="reblogs">
  843. {block:IsNotOriginalEntry}
  844. <div class="reblog-header">
  845. <a href="{permalink}" {block:isdeactivated}class="inactive"{/block:isdeactivated}>
  846. <img src={PortraitURL-64} alt="{username}"> {username}
  847. </a>
  848. </div>
  849. {/block:IsNotOriginalEntry}
  850. <div class="reblog-content">
  851. {Body}
  852. </div>
  853. </div>
  854. {/block:Reblogs}
  855. {/block:RebloggedFrom}
  856. </div>
  857. {block:Date}<div class="post-info">
  858. <div class="note-info">
  859. <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonth}" title="{TimeAgo}"><i class="ph ph-calendar"></i></a> <a href="{Permalink}" title="{NoteCountWithLabel}"> <i class="ph ph-pulse"></i> </a></div>
  860. </div>{/block:Date}
  861. {block:Hastags}
  862. <div class="tags">
  863. {block:Tags}
  864. <a href="{TagURL}">#{Tag}</a>
  865. {/block:Tags}
  866. </div>
  867. {/block:Hastags}
  868. {PostNotes}
  869. </article>
  870. {/block:Posts}
  871.  
  872. {block:Pagination}
  873. <div class="pagination flex centered">
  874. {block:previouspage}
  875. <a href="{previouspage}">Prev</a>
  876. {/block:previouspage}
  877. {block:JumpPagination length="5"}
  878. {block:CurrentPage}
  879. <span class="current-page">
  880. {PageNumber}
  881. </span>
  882. {/block:CurrentPage}
  883. {block:JumpPage}
  884. <a href="{URL}">
  885. {PageNumber}
  886. </a>
  887. {/block:JumpPage}
  888. {/block:JumpPagination}
  889. {block:nextpage}
  890. <a href="{nextpage}">Next</a>
  891. {/block:nextpage}
  892. </div>
  893. {/block:Pagination}
  894. </section>
  895. <aside>
  896. <div class="side-image"><img src="{image:side image}"></div>
  897. <div class="sidebar-container sidebar-style-bubble">
  898. <div class="bubble">
  899. <a href="/"><img src="{PortraitURL-128}"></a> <a href="/">@{name}</a>
  900. <div class="bubble-desc"><div class="description">{text:Alt Description}</div>
  901. <form action="/search" method="get" id="search-form">
  902. <input type="text" name="q" class="query" value="" placeholder="Search">
  903. </form></div>
  904. <div class="sidebar-navi">
  905. <a href="{text:Link 1 URL}" title="{text:Link 1 Title}"> <i class="cp cp-home-o"></i> </a>
  906. <a href="{text:Link 2 URL}" title="{text:Link 2 Title}"> <i class="cp cp-envelope-o"></i></a>
  907. <a href="{text:Link 3 URL}" title="{text:Link 3 Title}"> <i class="cp cp-bee-o"></i> </a>
  908. <a href="{text:Link 4 URL}" title="{text:Link 4 Title}"> <i class="cp cp-bear-o"></i> </a>
  909. <a href="{text:Link 5 URL}" title="{text:Link 5 Title}"> <i class="cp cp-butterfly-o"></i> </a>
  910. <a href="{text:Link 6 URL}" title="{text:Link 6 Title}"> <i class="cp cp-cat-o"></i> </a>
  911. <a href="{text:Link 7 URL}" title="{text:Link 7 Title}"> <i class="cp cp-cow-o"></i> </a>
  912. </div>
  913. </div>
  914. </div>
  915. </aside>
  916. <div title="Tumblr Controls" class="controls-button"><i class="cp cp-more" style="font-size:20px"></i></div>
  917.  
  918.  
  919. </main>
  920. <!----- CREDIT ----->
  921.  
  922. <a href="https://geminicodes.tumblr.com" title="by bru" id="credit"><i class="ph ph-moon"></i></a>
  923. <!-- masonry navigation -->
  924. <script src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
  925.  
  926. <script type="text/javascript">
  927. // masonry navigation
  928. var elements = document.getElementsByClassName('masonry-navigation');
  929. var msnry;
  930. var nElements = elements.length;
  931. for(var i = 0; i < nElements; i++){
  932. msnry = new Masonry( elements[i], {
  933. // columnWidth: 268,
  934. gutter: 10,
  935. itemSelector: '.masonry-navigation-item',
  936. });
  937. }
  938. </script>
  939. </body>
  940.  
  941. <!--- TUMBLR CONTROLS -->
  942.  
  943. <script src=“//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  944.  
  945. <script>
  946. $('.controls-button').click(function(){
  947. $('body').toggleClass('controls-click');
  948. });
  949. </script>
  950.  
  951. </body>
  952. </html>
  953.  
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!