API tools faq
paste
Advertisement
userbru

theme thirty-three.

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