API tools faq
paste
Advertisement
userbru

theme twenty three.

userbru
Feb 14th, 2022 (edited)
2,574
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.49 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns="https://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>{Title}</title>
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. <link rel="shortcut icon" href="{Favicon}">
  7. {block:Description}
  8. <meta name="description" content="{MetaDescription}">
  9. {/block:Description}
  10. <!--BOXICONS -->
  11. <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  12. <meta name="viewport" content="width=device-width, initial-scale=1">
  13.  
  14. <link rel="preconnect" href="https://fonts.googleapis.com">
  15. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  16. <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
  17. <!--
  18.  
  19. code by bru
  20.  
  21. icons by feathericons, cappuccicons, font-awesome, boxicons
  22. tooltips by tippy
  23. NPF fix by glenthemes
  24. responsive side menu by codinglabs
  25. fade in/out by cory laviska
  26. scroll to top by paulund
  27. animated link by tobias sahlin
  28. not found page by fukuo
  29. search box by glenthemes
  30. popup box by odeysseus
  31.  
  32. -->
  33.  
  34. <meta name="color:Background" content="#fff">
  35. <meta name="color:Posts" content="#fff">
  36. <meta name="color:Text" content="#3f3f3f">
  37. <meta name="color:Borders" content="#f1f1f1">
  38. <meta name="color:Links" content="#333">
  39. <meta name="color:Hover" content="#999">
  40. <meta name="color:Ask Background" content="#dbcefe">
  41. <meta name="color:Select Text" content="#f1f1f1"/>
  42. <meta name="color:Custom Scrollbar" content="#333"/>
  43. <meta name="color:Gradient 1 Tooltips" content="#ffb3b3"/>
  44. <meta name="color:Gradient 2 Tooltips" content="#ffdada"/>
  45. <meta name="color:gradient 1 underline" content="#9e90c3"/>
  46. <meta name="color:gradient 2 underline" content="#c3909c"/>
  47. <meta name="color:Not Found Gradient BG 1" content="#d2c1fe"/>
  48. <meta name="color:Not Found Gradient BG 2" content="#8172aa"/>
  49. <meta name="color:Not Found Text" content="#000"/>
  50. <meta name="color:Not Found Link" content="#ffccd8"/>
  51. <meta name="color:Tumblr Control Toggle" content=""/>
  52.  
  53. <meta name="image:Sidebar Image" content=""/>
  54.  
  55. <meta name="if:Sidebar Image" content="1" />
  56.  
  57. <meta name="text:Desktop Description" content=""/>
  58. <meta name="text:Pop Up" content=""/>
  59. <meta name="text:Home Title" content="Home"/>
  60. <meta name="text:Ask Title" content="Ask"/>
  61. <meta name="text:Link 1 Url" content="/"/>
  62. <meta name="text:Link 1 Title" content="One"/>
  63. <meta name="text:Link 2 Url" content="/"/>
  64. <meta name="text:Link 2 Title" content="Two"/>
  65. <meta name="text:Link 3 Url" content="/"/>
  66. <meta name="text:Link 3 Title" content="Three"/>
  67.  
  68. <!-- SCRIPTS -->
  69.  
  70. <script type="text/javascript">
  71. if(location.href=='https://{name}.tumblr.com/ask') location.replace('https://{name}.tumblr.com/msg');;
  72. </script>
  73.  
  74. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  75.  
  76. <!--
  77. NPF IMAGES READJUSTMENT | @glenthemes
  78. v2.0 [last updated: 2021-06-03]
  79. -->
  80. <link href="//glen-npf-2020.glitch.me/npf-override.css" rel="stylesheet">
  81. <script src="//glen-npf-2020.glitch.me/npf-evenize.js"></script>
  82.  
  83. <style type="text/css">
  84. :root {
  85. --NPF-Image-Spacing:4px;
  86. --NPF-Bottom-Gap-From-Captions:1em;
  87. }
  88. </style>
  89.  
  90. <script type="text/javascript" src="https://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  91.  
  92. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"></link>
  93. <link rel="stylesheet" href="https://static.tumblr.com/svdghan/wUSr83npl/tempcf.css">
  94.  
  95. <link href="https://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  96.  
  97. <script src="https://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:200, tip_fade_speed:300 }); }); })(jQuery); </script>
  98.  
  99. <script src="https://unpkg.com/feather-icons"></script>
  100. <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]"></script>
  101.  
  102. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
  103. $(document).ready(function(){
  104. $('.click,.fade').click(function() {
  105. $('#pop').fadeToggle();
  106. });
  107. });
  108. </script>
  109.  
  110.  
  111. <style type="text/css">
  112.  
  113.  
  114. /*-------------------------------------------------------------------------*/
  115.  
  116.  
  117. /*GENERAL SECTION */
  118.  
  119.  
  120. /* TOOLTIPS */
  121. .tippy-tooltip.gradient-theme {
  122. background-image:linear-gradient(to right, {color:gradient 1 tooltips}, {color:gradient 2 tooltips});
  123. color:var(--boxes);
  124. text-align:center;
  125. font-family:'Public Sans', sans-serif;
  126. font-weight:bold;
  127. text-transform:uppercase;
  128. letter-spacing:1px;
  129. font-size:0.90em;
  130. box-shadow: 7px 7px 7px -9px rgba(000,000,000, 0.45);}
  131.  
  132. .tippy-tooltip.gradient-theme .tippy-svg-arrow {
  133. fill:var(--text);}
  134.  
  135.  
  136. /* ----- TUMBLR CONTROLS ---- */
  137.  
  138.  
  139. iframe.tmblr-iframe {
  140. z-index:99999999999999!important;
  141. top: 15px!important;
  142. right: 15px!important;
  143. opacity:0;
  144. color:white!important;
  145. padding-right:38px;
  146. -webkit-transform:scale(0.75);
  147. -ms-transform:scale(0.75);
  148. transform:scale(0.75);
  149. -webkit-transform-origin:100% 0;
  150. -ms-transform-origin:100% 0;
  151. transform-origin:100% 0;
  152.  
  153. cursor: pointer;
  154. }
  155. iframe.tmblr-iframe:hover {
  156. opacity:1!important;
  157. }
  158. .tumblrcontrols {
  159. position:fixed;
  160. top:23px;
  161. right:15px;
  162. z-index:999999999;
  163. cursor: pointer;
  164. color:{color:Tumblr Control Toggle};
  165. }
  166.  
  167.  
  168. .tumblrcontrols:hover {
  169. stroke: var(--bodyLinkHoverColor);
  170. }
  171.  
  172.  
  173.  
  174. /*END OF GENERAL: TUMBLR CONTROLS */
  175.  
  176. /*GENERAL: SCROLLBAR */
  177.  
  178. ::-webkit-scrollbar {
  179. width:12px;
  180. height:12px;
  181. background:{color:background};
  182. }
  183.  
  184. ::-webkit-scrollbar-thumb {
  185. background:{color:custom scrollbar};
  186. }
  187. ::-webkit-scrollbar,::-webkit-scrollbar-thumb {
  188. border:5px solid {color:background};
  189. }
  190.  
  191.  
  192. /*END OF GENERAL: SCROLLBAR */
  193.  
  194. /*GENERAL: SELECTION */
  195.  
  196. ::selection {
  197. background: {color:select text};
  198. color: {color:text};
  199. }
  200.  
  201. ::-moz-selection {
  202. background: {color:select text};
  203. color: {color:text};
  204. }
  205.  
  206. /*END OF GENERAL: SELECT */
  207.  
  208.  
  209. /* SIDE MENU */
  210. :root{
  211. /* ===== Colors ===== */
  212. --body-color: #E4E9F7;
  213. --sidemenu-color: #FFF;
  214. --primary-color:#9e90c3;
  215. --primary-color-light: #F6F5FF;
  216. --toggle-color: #DDD;
  217. --text-color: #707070;
  218.  
  219. /* ====== Transition ====== */
  220. --tran-03: all 0.2s ease;
  221. --tran-03: all 0.3s ease;
  222. --tran-04: all 0.3s ease;
  223. --tran-05: all 0.3s ease;
  224. }
  225.  
  226.  
  227. /*GENERAL: STYLING */
  228.  
  229.  
  230. body {
  231. font-size:12px;
  232. font-family:'Poppins', sans-serif;
  233. text-align:justify;
  234. margin:0;
  235. line-height:1.5em;
  236. -moz-osx-font-smoothing:grayscale;
  237. -webkit-font-smoothing:antialiased;
  238. font-smoothing:antialiased;
  239. color:{color:text};
  240. background:{color:background};
  241. min-height: 100vh;
  242. opacity: 1;
  243. transition: 1s opacity;
  244.  
  245.  
  246. }
  247.  
  248. body.fade-out {
  249. opacity: 0;
  250. transition: none;
  251. }
  252.  
  253. html {
  254. background-color: {color:background};
  255. }
  256.  
  257.  
  258. #s-m-t-tooltip {
  259. font-size:12px;
  260. font-family:'Poppins', sans-serif;
  261. max-width:300px;
  262. background:{color:posts};
  263. margin:10px;
  264. padding:5px;
  265. border:0px;
  266. border-radius:0px;
  267. color:{color:text};
  268. z-index:999999;
  269. font-style:none;
  270. box-shadow: 0px 0px 0px rgba(0,0,0,.1);
  271. text-transform:lowercase;
  272. }
  273.  
  274. a {
  275. color:{color:links};
  276. text-decoration:none;
  277. position:relative;
  278. cursor:pointer;
  279. -webkit-transition:all 0.2s;
  280. -moz-transition:all 0.2s;
  281. -ms-transition:all 0.2s;
  282. -o-transition:all 0.2s;
  283. transition:all 0.2s;
  284. }
  285.  
  286. a:hover {
  287. text-decoration:none;
  288. color:{color:hover};
  289. -webkit-transition:all 0.2s;
  290. -moz-transition:all 0.2s;
  291. -ms-transition:all 0.2s;
  292. -o-transition:all 0.2s;
  293. transition:all 0.2s;
  294. }
  295.  
  296.  
  297. a::before {
  298. content: "";
  299. position: absolute;
  300. display: block;
  301. width: 100%;
  302. height: 2px;
  303. bottom: 0;
  304. left: 0;
  305. background-image:linear-gradient(to right, {color:gradient 1 underline}, {color:gradient 2 underline});
  306. transform: scaleX(0);
  307. transition: transform 0.3s ease;
  308. }
  309.  
  310. a:hover::before {
  311. transform: scaleX(1);
  312. }
  313.  
  314. .credit {
  315. position:fixed;
  316. bottom:35px;
  317. right:45px;
  318. z-index:10;
  319. }
  320.  
  321. .credit a {
  322. color:{color:links};
  323. }
  324.  
  325. .credit a:hover {
  326. color:{color:hover};
  327. }
  328.  
  329. small, sub, sup {
  330. font-size:12px;
  331. }
  332.  
  333. b, 700, strong {
  334. color:{color:links};
  335. }
  336.  
  337. .entry h1 {
  338. font-size:18px!important;
  339. }
  340.  
  341. pre {
  342. font-size:12px;
  343. font-family:'Poppins', sans-serif;
  344. }
  345.  
  346. blockquote {
  347. display:block;
  348. margin:0;
  349. margin-left:5px;
  350. margin-right:5px;
  351. padding-left:10px;
  352. border-left:1px #f1f1f1 solid;
  353. }
  354.  
  355. blockquote blockquote {
  356. border:none;
  357. padding:0;
  358. margin:0;
  359. }
  360.  
  361. img {
  362. border:0;
  363. max-width:100%;
  364. height:auto;
  365. margin-left:0px;
  366. }
  367.  
  368. hr {
  369. margin:1em 0;
  370. border:0;
  371. height:1px;
  372. -moz-box-sizing:border-box;
  373. box-sizing:border-box;
  374. background-color:{color:borders};
  375. }
  376.  
  377. ol {
  378. margin-left:-25px;
  379. list-style-type:circle;
  380. }
  381.  
  382. ul {
  383. margin-left:-25px;
  384. list-style-type:circle;
  385. }
  386.  
  387. li {
  388. list-style-type:circle;
  389.  
  390. }
  391.  
  392. /*END OF GENERAL: STYLING */
  393.  
  394. /*GENERAL: CONTAINERS */
  395.  
  396. .main {
  397. margin:150px auto;
  398. padding-left:300px;
  399. width:540px;
  400. }
  401.  
  402. .asidecontainer {
  403. position:fixed;
  404. height:100%;
  405. margin-left:-380px;
  406. }
  407.  
  408. /*END OF GENERAL: CONTAINERS */
  409.  
  410. /* --- FEATHERICONS ----*/
  411.  
  412. .feather {
  413. width:23px;
  414. }
  415.  
  416.  
  417.  
  418. /*END OF GENERAL SECTION */
  419.  
  420.  
  421. /*-------------------------------------------------------------------------*/
  422.  
  423.  
  424. /*SIDEBAR SECTION */
  425.  
  426.  
  427. /*SIDEBAR: GENERAL */
  428.  
  429. aside {
  430. width:250px;
  431. height:auto;
  432. border-radius:10%;
  433. padding:10px;
  434. margin-left:0px;
  435. top: {text:post margin}px;
  436. text-align:Center;
  437. position:fixed;
  438. overflow:hidden;
  439. background:{color:posts};
  440. }
  441.  
  442. /*END OF SIDEBAR: GENERAL */
  443.  
  444. /*SIDEBAR: IMAGE */
  445.  
  446. aside img {
  447. width:100px;
  448. float:center;
  449. border-radius:100%;
  450. }
  451.  
  452. /*END OF SIDEBAR: IMAGE */
  453.  
  454. /*SIDEBAR: TITLE*/
  455.  
  456. aside h1 {
  457. margin-top:10px;
  458. }
  459.  
  460. /*END OF SIDEBAR: TITLE*/
  461.  
  462. /*SIDEBAR: DESCRIPTION */
  463.  
  464. .description {
  465. color:{color:text}!important;
  466. }
  467.  
  468. /*END OF SIDEBAR: DESCRIPTION */
  469.  
  470. /*SIDEBAR: NAVIGATION */
  471.  
  472. nav {
  473. overflow:visible;
  474. margin-top:8px;
  475. }
  476.  
  477. nav a {
  478. display:inline-block;
  479. color:{color:links};
  480. margin-bottom:3px;
  481. margin-right:5px;
  482. font-weight:600;
  483. }
  484.  
  485. nav a:hover {
  486. color:{color:hover};
  487. }
  488.  
  489. /*END OF SIDEBAR: NAVIGATION */
  490.  
  491.  
  492. /*END OF SIDEBAR SECTION */
  493.  
  494.  
  495. /*-------------------------------------------------------------------------*/
  496.  
  497.  
  498. /*POSTS SECTION */
  499.  
  500.  
  501. /*POSTS: GENERAL */
  502.  
  503. .content {
  504. margin:0px 0px;
  505. }
  506.  
  507. .entry {
  508. width:580px;
  509. margin-bottom:150px;
  510. background:{color:posts};
  511. padding:10px;
  512. border-radius:2px 2px 2px 2px;
  513.  
  514. }
  515.  
  516. .entry 700, b, strong {
  517. color:{color:links};
  518. }
  519.  
  520. .entry:last-child {
  521. margin-bottom:0;
  522. }
  523.  
  524. .post {
  525. margin:0px 0px 0px 0px;
  526. width:540px;
  527. position:relative;
  528. padding:20px;
  529. }
  530.  
  531. .text:last-child, .text *:last-child {
  532. margin-bottom:0px;
  533. }
  534.  
  535. .vignette, #vignette {
  536. opacity:0;
  537. }
  538.  
  539. .lightbox-image, #tumblr_lightbox img {
  540. box-shadow:none !important;
  541. border-radius:0px !important;
  542. max-width:none;
  543. }
  544. .tmblr-lightbox, #tumblr_lightbox {
  545. background-color:rgba(255,255,255,.75) !important;
  546. }
  547.  
  548. /*END OF POSTS: GENERAL */
  549.  
  550. /*POSTS: CAPTIONS */
  551.  
  552. .caption {
  553. width:540px;
  554. margin-top:10px;
  555. padding:0px;
  556. margin-bottom:0px;
  557. border:0;
  558. text-align:justify;
  559. }
  560.  
  561. .caption blockquote {
  562. max-width:540px;
  563. font-weight:normal;
  564. border:0;
  565. margin:0px 0px 7px 0px;
  566. padding:0;
  567. }
  568.  
  569. .caption blockquote:last-child {
  570. margin:0px;
  571. }
  572.  
  573. .caption p {
  574. padding:0;
  575. margin:0;
  576. }
  577.  
  578. .caps blockquote {
  579. max-width:540px;
  580. margin:10px 0px 10px 0px;
  581. font-weight:normal;
  582. border-left:1px solid {color:borders};
  583. padding-left:10px;
  584. padding-right:10px;
  585. }
  586.  
  587. .caps a.tumblr_blog {
  588. background:linear-gradient(to right, {color:gradient 1 tooltips}, {color:gradient 2 tooltips});
  589. padding:5px;
  590. padding-bottom:5px;
  591. border-radius:1px 10px 10px 10px;
  592. border-bottom:0;
  593. text-overflow:ellipsis;
  594. vertical-align:middle;
  595. font-weight: 600;
  596. text-transform:uppercase;
  597. color:{color:text}!important;
  598. -webkit-transition:all 0.2s;
  599. -moz-transition:all 0.2s;
  600. -ms-transition:all 0.2s;
  601. -o-transition:all 0.2s;
  602. transition:all 0.2s;
  603. margin-top:0px;
  604. margin-bottom:15px;
  605. line-height:30px!important;
  606. }
  607.  
  608. .caps a.tumblr_blog:hover {
  609. color:{color:hover}!important;
  610. text-decoration:none!important;
  611. -webkit-transition:all 0.2s;
  612. -moz-transition:all 0.2s;
  613. -ms-transition:all 0.2s;
  614. -o-transition:all 0.2s;
  615. transition:all 0.2s;
  616. }
  617.  
  618. .caps a.tumblr_blog::before {
  619. content: "";
  620. position: absolute;
  621. display: block;
  622. width: 100%;
  623. height: 0px;
  624. bottom: 0;
  625. left: 0;
  626. background-image:linear-gradient(to right, {color:gradient 1 underline}, {color:gradient 2 underline});
  627. transform: scaleX(0);
  628. transition: transform 0.3s ease;
  629. }
  630.  
  631. .caps .ic{
  632. width:18px;
  633. height:18px;
  634. border-radius:100%;
  635. margin-right:10px;
  636. display:inline-block;
  637. float:left;
  638. background:transparent;
  639. text-align:left;
  640. padding:0;
  641. margin-left:0;
  642. margin-top:0;
  643. }
  644.  
  645. .caps {
  646. margin:0px 0px 0px 0px;
  647. padding:0;
  648. border-left:0;
  649. }
  650.  
  651. .caps p {
  652. margin:5px 0 5px 0;
  653. font-weight:normal;
  654. padding:0;
  655. border-left:0;
  656. }
  657.  
  658. .caps p:last-child {
  659. margin:5px 0 0 0;
  660. }
  661.  
  662. .caps b {
  663. color:{color:links};
  664. font-weight:400;
  665. }
  666.  
  667. .caps hr {
  668. margin:0;
  669. border:0;
  670. }
  671.  
  672. .caps img {
  673. margin-top:10px;
  674. max-width:100%;
  675. display:inline-block;
  676. }
  677.  
  678. /*END OF POSTS: CAPTIONS */
  679.  
  680. /*POSTS: ASKS */
  681.  
  682. .askerbg {
  683.  
  684. padding: 0px;
  685. border-radius: 100px;
  686.  
  687. }
  688.  
  689.  
  690. .askerbg img {
  691. border-radius:100px!important;
  692.  
  693. }
  694.  
  695. .question {
  696.  
  697. width: auto;
  698. font-family: 'Poppins', sans-serif;
  699. margin-top: 10px;
  700. margin-bottom:20px;
  701. color:{color:text};
  702. padding: 10px;
  703. border-radius: 7px;
  704. background:{color:Ask Background};
  705.  
  706. }
  707.  
  708.  
  709. /*END OF POSTS: ASKS */
  710.  
  711. /*POSTS: STYLES */
  712.  
  713. .chat {
  714. list-style-type:none;
  715. margin-bottom:10px;
  716. }
  717.  
  718. .chat .label {
  719. line-height:1.5em;
  720. }
  721.  
  722. .quote {
  723. margin-bottom:5px;
  724. }
  725.  
  726. .source {
  727. }
  728.  
  729. .media {
  730. position:relative;
  731. display:inline-block;
  732. width:100%;
  733. }
  734.  
  735. .media img {
  736. position:relative;
  737. display:inline-block;
  738. width:540px!important;
  739. }
  740.  
  741. .media a {
  742. background-image: none!important;
  743. }
  744.  
  745. .media a::before {
  746. content: "";
  747. position: absolute;
  748. display: block;
  749. width: 100%;
  750. height: 0px!important;
  751. bottom: 0;
  752. left: 0;
  753. background-image:linear-gradient(to right, {color:gradient 1 underline}, {color:gradient 2 underline});
  754. transform: scaleX(0);
  755. transition: transform 0.3s ease;
  756. }
  757.  
  758. a:hover::before {
  759. transform: scaleX(1);
  760. }
  761.  
  762. /*END OF POSTS: STYLES */
  763.  
  764. /*END OF POSTS SECTION /*
  765.  
  766.  
  767. /*-------------------------------------------------------------------------*/
  768.  
  769.  
  770. /*POST INFO SECTION */
  771.  
  772.  
  773. /*POST INFO: BOTTOM */
  774.  
  775. .postinfo {
  776. margin-left:10px;
  777. margin-right:10px;
  778. text-align:left;
  779. font-family: 'Roboto', sans-serif;
  780. background:transparent;
  781. line-height:1.5em!important;
  782. padding-bottom:10px;
  783. }
  784.  
  785. .postinfo b {
  786. }
  787.  
  788. .postinfo a {
  789. display:inline-block;
  790. height:14px;
  791. line-height:10px;
  792. background-size: 0px 0px!important;
  793. }
  794.  
  795. .postinfo i {
  796. font-style: normal;
  797. }
  798.  
  799. .postinfo a:hover {
  800. color:{color:hover};
  801. padding:0px!important;
  802.  
  803. }
  804.  
  805. .postinfo p {
  806. margin-top:-10px!important;
  807. }
  808.  
  809. .like-b {
  810. position:relative;
  811. display:inline-block;
  812. vertical-align:middle;
  813. float:right;
  814. height:1em;
  815. line-height:1em;
  816. overflow:hidden;
  817. margin-bottom:0px;
  818.  
  819. }
  820.  
  821. .like-b .like_button iframe {
  822. position:absolute;
  823. top:0;
  824. left:0;
  825. bottom:0;
  826. right:0;
  827. z-index:2;
  828. opacity:0;
  829. }
  830.  
  831. .like-b .liked + .b {
  832. color:inherit;
  833. }
  834.  
  835. .like-b .liked + .b:after {
  836. content:'d';
  837. color:{Links};
  838. }
  839.  
  840. .tags {
  841. color:{color:links}!important;
  842. word-break:break-word;
  843. text-transform:lowercase;
  844. opacity:1;
  845. font-family:'Poppins', sans-serif!important;
  846. font-size:12px!important;
  847. -webkit-transition: all 0.7s ease;
  848. transition: all 0.7s ease;
  849. -moz-transition: all 0.7s ease;
  850. -o-transition: all 0.7s ease;
  851. text-align:left;
  852. border-top:1px solid {color:Borders};
  853. padding-top:10px;
  854. }
  855.  
  856. .tags a {
  857. font-style:none;
  858. margin-right:2px;
  859. }
  860.  
  861. .tags a:hover {
  862. text-decoration:none;
  863. }
  864.  
  865. .tags a:after { content:","; } .tags a:last-child:after { content:"."; }
  866. }
  867.  
  868. /*END OF POST INFO: BOTTOM */
  869.  
  870. /*POST INFO: PERMALINK */
  871.  
  872.  
  873. ol.notes {
  874. list-style-type:none!important;
  875. font-style:normal;
  876. margin-top:-137px;
  877. margin-left:0px;
  878. width:540px;
  879. }
  880.  
  881. li.note {
  882. margin:10px 0 10px 0;
  883. padding:0;
  884. font-style:normal;
  885. width:540px;
  886. list-style-type:none!important;
  887. }
  888.  
  889. li.note:before {
  890. content:"";
  891. padding:0;
  892. list-style-type:none!important;
  893. }
  894.  
  895. .more_notes_link, .notes_loading {
  896. float:center;
  897. text-align:center!important;
  898. text-transform:lowercase!important;
  899. font-weight:400!important;
  900. }
  901.  
  902. .notes img {
  903. display:none!important;
  904. }
  905.  
  906. .notes {
  907. background-color:{color:posts};
  908. margin-right:0px;
  909. margin-left:0px;
  910. width:580px;
  911. padding:10px;
  912. margin-top:-100px;
  913. }
  914.  
  915. ol.notes li.note blockquote {
  916. border:0;
  917. padding:0px 0px;
  918. margin:0px 0 0 0px;
  919. list-style-type:none!important;
  920. }
  921.  
  922.  
  923. /*END OF POST INFO: PERMALINK */
  924.  
  925.  
  926. /*END OF POST INFO SECTION */
  927.  
  928.  
  929. /*-------------------------------------------------------------------------*/
  930.  
  931.  
  932. /*PAGINATION SECTION */
  933.  
  934.  
  935. /*PAGINATION: GENERAL */
  936.  
  937. .pagi {
  938. margin-top:20px;
  939. text-align:center;
  940. font-size:14px;
  941. margin-left:10px;
  942. padding-top:20px;
  943. width:540px;
  944. }
  945.  
  946. .pagi a {
  947. color:{color:links};
  948. }
  949.  
  950. .pagi a:hover {
  951. color:{color:hover};
  952. }
  953.  
  954. /*END OF PAGINATION: GENERAL */
  955.  
  956.  
  957. /*END OF PAGINATION SECTION */
  958.  
  959.  
  960. /*-------------------------------------------------------------------------*/
  961.  
  962.  
  963.  
  964. /*--- side menu --*/
  965.  
  966. .sidemenu{
  967. position: fixed;
  968. top: -10px;
  969. left: 0;
  970. height: 100%;
  971. width: 250px;
  972. padding: 10px 14px;
  973. background: var(--sidemenu-color);
  974. transition: var(--tran-05);
  975. z-index: 100;
  976. }
  977. .sidemenu.close{
  978. width: 70px;
  979. }
  980.  
  981. /* ===== Reusable code - Here ===== */
  982. .sidemenu li{
  983. height: 50px;
  984. list-style: none;
  985. display: flex;
  986. align-items: center;
  987. margin-top: 10px;
  988. }
  989.  
  990. .sidemenu header .image,
  991. .sidemenu .icon{
  992. min-width: 60px;
  993. border-radius: 6px;
  994. }
  995.  
  996. .sidemenu .icon{
  997. min-width: 60px;
  998. border-radius: 6px;
  999. height: 100%;
  1000. display: flex;
  1001. align-items: center;
  1002. justify-content: center;
  1003. font-size: 20px;
  1004. }
  1005.  
  1006. .sidemenu .text,
  1007. .sidemenu .icon{
  1008. color: var(--text-color);
  1009. transition: var(--tran-03);
  1010. }
  1011.  
  1012. .sidemenu .text{
  1013. font-size: 17px;
  1014. font-weight: 500;
  1015. white-space: nowrap;
  1016. opacity: 1;
  1017. }
  1018. .sidemenu.close .text{
  1019. opacity: 0;
  1020. }
  1021. /* =========================== */
  1022.  
  1023. .sidemenu header{
  1024. position: relative;
  1025. }
  1026.  
  1027. .sidemenu header .image-text{
  1028. display: flex;
  1029. align-items: center;
  1030. margin-top:10px;
  1031. }
  1032. .sidemenu header .logo-text{
  1033. display: flex;
  1034. flex-direction: column;
  1035. }
  1036. header .image-text .title {
  1037. margin-top: 2px;
  1038. font-size: 15px;
  1039. font-weight: 600;
  1040. }
  1041.  
  1042. header .image-text .user {
  1043. font-size: 13px;
  1044. margin-top: -2px;
  1045. display: block;
  1046. }
  1047.  
  1048. .sidemenu header .image{
  1049. display: flex;
  1050. align-items: center;
  1051. justify-content: center;
  1052. }
  1053.  
  1054. .sidemenu header .image img{
  1055. width: 40px;
  1056. border-radius: 6px;
  1057. }
  1058.  
  1059. .sidemenu header .toggle{
  1060. position: absolute;
  1061. top: 50%;
  1062. right: -25px;
  1063. transform: translateY(-50%) rotate(180deg);
  1064. height: 25px;
  1065. width: 25px;
  1066. background-color: var(--primary-color);
  1067. color: var(--sidemenu-color);
  1068. border-radius: 50%;
  1069. display: flex;
  1070. align-items: center;
  1071. justify-content: center;
  1072. font-size: 22px;
  1073. cursor: pointer;
  1074. transition: var(--tran-05);
  1075. }
  1076.  
  1077. .sidemenu.close .toggle{
  1078. transform: translateY(-50%) rotate(0deg);
  1079. }
  1080.  
  1081. .sidemenu .menu{
  1082. margin-top: 40px;
  1083. }
  1084.  
  1085. .sidemenu li.search-box{
  1086. border-radius: 6px;
  1087. background-color: var(--primary-color-light);
  1088. cursor: pointer;
  1089. transition: var(--tran-05);
  1090. }
  1091.  
  1092. .sidemenu li.search-box input{
  1093. height: 100%;
  1094. width: 100%;
  1095. outline: none;
  1096. border: none;
  1097. background-color: var(--primary-color-light);
  1098. color: var(--text-color);
  1099. border-radius: 6px;
  1100. font-size: 17px;
  1101. font-weight: 500;
  1102. transition: var(--tran-05);
  1103. }
  1104. .sidemenu li a{
  1105. list-style: none;
  1106. height: 100%;
  1107. background-color: transparent;
  1108. display: flex;
  1109. align-items: center;
  1110. height: 100%;
  1111. width: 100%;
  1112. border-radius: 6px;
  1113. text-decoration: none;
  1114. transition: var(--tran-03);
  1115. }
  1116.  
  1117. .sidemenu li a:hover{
  1118. background-color: var(--primary-color);
  1119. }
  1120. .sidemenu li a:hover .icon,
  1121. .sidemenu li a:hover .text{
  1122. color: var(--sidemenu-color);
  1123. }
  1124.  
  1125.  
  1126. .sidemenu li a::before {
  1127. content: "";
  1128. position: absolute;
  1129. display: block;
  1130. width: 100%;
  1131. height: 0px;
  1132. bottom: 0;
  1133. left: 0;
  1134. background-image:linear-gradient(to right, {color:gradient 1 underline}, {color:gradient 2 underline});
  1135. transform: scaleX(0);
  1136. transition: transform 0.3s ease;
  1137. }
  1138.  
  1139. .sidemenu .menu-bar{
  1140. height: calc(100% - 55px);
  1141. display: flex;
  1142. flex-direction: column;
  1143. justify-content: space-between;
  1144. overflow-y: scroll;
  1145. }
  1146. .menu-bar::-webkit-scrollbar{
  1147. display: none;
  1148. }
  1149. .sidemenu .menu-bar .mode{
  1150. border-radius: 6px;
  1151. background-color: var(--primary-color-light);
  1152. position: relative;
  1153. transition: var(--tran-05);
  1154. }
  1155.  
  1156. .menu-bar .mode .sun-moon{
  1157. height: 50px;
  1158. width: 60px;
  1159. }
  1160.  
  1161. .mode .sun-moon i{
  1162. position: absolute;
  1163. }
  1164. .mode .sun-moon i.sun{
  1165. opacity: 0;
  1166. }
  1167.  
  1168.  
  1169. .menu-bar .bottom-content .toggle-switch{
  1170. position: absolute;
  1171. right: 0;
  1172. top:-20px;
  1173. height: 100%;
  1174. min-width: 60px;
  1175. display: flex;
  1176. align-items: center;
  1177. justify-content: center;
  1178. border-radius: 6px;
  1179. cursor: pointer;
  1180. }
  1181. .toggle-switch .switch{
  1182. position: relative;
  1183. height: 22px;
  1184. width: 40px;
  1185. border-radius: 25px;
  1186. background-color: var(--toggle-color);
  1187. transition: var(--tran-05);
  1188. }
  1189.  
  1190. .switch::before{
  1191. content: '';
  1192. position: absolute;
  1193. height: 15px;
  1194. width: 15px;
  1195. border-radius: 50%;
  1196. top: 50%;
  1197. left: 5px;
  1198. transform: translateY(-50%);
  1199. background-color: var(--sidemenu-color);
  1200. transition: var(--tran-04);
  1201. }
  1202.  
  1203.  
  1204. .home{
  1205. position: absolute;
  1206. top: 0;
  1207. top: 0;
  1208. left: 250px;
  1209. height: 100vh;
  1210. width: calc(100% - 250px);
  1211. background-color: var(--body-color);
  1212. transition: var(--tran-05);
  1213. }
  1214. .home .text{
  1215. font-size: 30px;
  1216. font-weight: 500;
  1217. color: var(--text-color);
  1218. padding: 12px 60px;
  1219. }
  1220.  
  1221. .sidemenu.close ~ .home{
  1222. left: 78px;
  1223. height: 100vh;
  1224. width: calc(100% - 78px);
  1225. }
  1226.  
  1227.  
  1228.  
  1229. /* POP UP SEARCH */
  1230.  
  1231. .click { cursor:help } /* for question mark cursor on hover */
  1232.  
  1233. #pop {
  1234. width:100%;
  1235. height:100%;
  1236. top:0;left:0;
  1237. position:fixed;
  1238. z-index:999;
  1239. background:rgba(255,255,255,.9); /* background of popup. adjust the .9 for the opacity of the background (1 will be solid white, .5 will be semi transparent, etc.) */
  1240. display:none;
  1241. }
  1242. .fade {
  1243. top:0;
  1244. left:0;
  1245. position:fixed;
  1246. z-index:1000;
  1247. width:100%;
  1248. height:100%;
  1249. }
  1250.  
  1251. .popup {
  1252. top:50%;
  1253. left:50%;
  1254. font-family:'Lora', sans-serif;
  1255. text-transform:lowercase;
  1256. font-weight:400;
  1257. color:{color:Text}!important;
  1258. transform:translate(-50%,-50%);
  1259. position:fixed;
  1260. background:#fff; /* background of popup box */
  1261. padding:20px; /* padding of popup box */
  1262. z-index:10000;
  1263. width:800px!important;
  1264. height:650px;/* width of popup */
  1265. border:1px solid #eee; /* popup border */
  1266. }
  1267.  
  1268. .popup a {
  1269. background:none!important;
  1270. padding:0px!important;
  1271. color:{color:Links}!important;
  1272. text-transform:none!important;
  1273. }
  1274.  
  1275. /* SEARCH BOX */
  1276.  
  1277. #searchblock {
  1278. top:0;
  1279. left:0;
  1280. margin-top:50px;
  1281. margin-left:50px;
  1282. height:0px;
  1283. }
  1284.  
  1285. .typing, .typing::placeholder, #searchentries, #searchentries a, .enter {
  1286. padding:5px;
  1287. text-transform:uppercase;
  1288. letter-spacing:0.5px;
  1289. color:#999;
  1290. font-size:12px;
  1291. background-color:#fff;
  1292. width:200px;
  1293. }
  1294.  
  1295. .typing, #searchentries {
  1296. width:500px;
  1297. border-radius:3px 3px 3px 3px;
  1298. }
  1299.  
  1300. .typing {
  1301. margin-bottom:0px;
  1302. outline:none;
  1303. border:0px solid transparent;
  1304. }
  1305.  
  1306. .typing::placeholder {
  1307. padding:0px;!important;
  1308. }
  1309.  
  1310. #searchentries {
  1311. display:inline-block;
  1312. background-color:#fff!important;
  1313. padding:10px;
  1314. font-family:'Poppins', sans-serif!important;
  1315. font-weight:600!important;
  1316. }
  1317.  
  1318. #searchentries a {
  1319. display:block;
  1320. padding:10px;
  1321. padding:0px!important;
  1322. width:150px;
  1323. background-size:0px 0px!important;
  1324. text-align:center;
  1325. }
  1326.  
  1327. #searchentries a:hover {
  1328. background:none!important;
  1329. padding:0px 0px 0px!important;
  1330. text-transform:normal!important;
  1331. width:150px;
  1332. background-size:0px 0px!important;
  1333. padding:10px;
  1334. }
  1335.  
  1336.  
  1337. #search a::before {
  1338. content: "";
  1339. position: absolute;
  1340. display:inline-block;
  1341. width: 100%;
  1342. height: 0px;
  1343. bottom: 0;
  1344. left: 0;
  1345. background-image:linear-gradient(to right, {color:gradient 1 underline}, {color:gradient 2 underline});
  1346. transform: scaleX(0);
  1347. transition: transform 0.3s ease;
  1348. }
  1349.  
  1350. a:hover::before {
  1351. transform: scaleX(1);
  1352. }
  1353.  
  1354. .enter {
  1355. margin-left:4px;
  1356. margin-bottom:0px;
  1357. outline:none;
  1358. border:0px solid transparent;
  1359. cursor:pointer;
  1360. }
  1361.  
  1362.  
  1363.  
  1364. /* ----------- NOT FOUND PAGE ---------*/
  1365.  
  1366. .wrapper_notfound {
  1367. position: fixed;
  1368. visibility:hidden;
  1369. left: 0px;
  1370. top: 0px;
  1371. width: 100%;
  1372. height: 100%;
  1373. background-image:linear-gradient(to right, {color:Not Found Gradient BG 1}, {color:Not Found Gradient BG 2});
  1374. z-index: 999999999999;
  1375. }
  1376.  
  1377. .actual_notfound {
  1378. position: absolute;
  1379. color:{color:Not Found Text};
  1380. left:50%;
  1381. top:50%;
  1382. font-family:'Poppins', sans-serif;
  1383. transform:translate(-50%, -50%);
  1384. width:calc(600px + 0.25vw);
  1385. font-size:calc(22px + 0.25vw);
  1386. line-height:170%;
  1387. text-align: center;
  1388. }
  1389.  
  1390. .actual_notfound a {
  1391. color:{color:Not Found Link};
  1392. text-decoration: none;
  1393. }
  1394.  
  1395. .actual_notfound::selection {
  1396. color:{color:select background};
  1397. }
  1398.  
  1399. /*-----*/
  1400.  
  1401.  
  1402. /*-- MASONRY NAV --*/
  1403.  
  1404. .masonry-navigation {
  1405. width: 100%;
  1406. border-bottom: 1px solid #e2e2e2;
  1407. margin-bottom:15px;
  1408. }
  1409.  
  1410. .masonry-navigation:last-child {
  1411. border:none;
  1412. }
  1413.  
  1414. .masonry-navigation-item.one-column {
  1415. width: 100%;
  1416. padding: 0 5px;
  1417. margin-bottom: 10px;
  1418. }
  1419.  
  1420. .masonry-navigation-item.one-column ul {
  1421. display: flex;
  1422. flex-wrap: wrap;
  1423. margin: 0;
  1424. padding: 0;
  1425. }
  1426.  
  1427. /* if you have any problem with one colum lists (ul li) you edit here */
  1428. .masonry-navigation-item.one-column ul li {
  1429. margin: 4px 15px;
  1430. padding: 0;
  1431. }
  1432.  
  1433. /* if they don't display two columns correctly, try to decrease the value on width: 240px */
  1434. .masonry-navigation-item.two-columns {
  1435. width: 240px;
  1436. padding: 0 5px;
  1437. margin-bottom: 10px;
  1438. }
  1439.  
  1440. /* if they don't display three columns correctly, try to decrease the value on width: 160px */
  1441. .masonry-navigation-item.three-columns {
  1442. width: 160px;
  1443. padding: 0 5px;
  1444. margin-bottom: 10px;
  1445. }
  1446.  
  1447. /* edit height: 215px to adjust the box height if you add the class scroll in the html */
  1448. .masonry-navigation-item.scroll {
  1449. height:215px;
  1450. overflow-y: scroll;
  1451. }
  1452.  
  1453. </style></head>
  1454.  
  1455. <body>
  1456.  
  1457. <script>
  1458. document.body.classList.add('fade-out');
  1459. window.addEventListener('DOMContentLoaded', () => {
  1460. document.body.classList.remove('fade-out');
  1461. });
  1462.  
  1463. </script>
  1464.  
  1465.  
  1466. <nav class="sidemenu close">
  1467.  
  1468. <header>
  1469. <div class="image-text">
  1470. <span class="image">
  1471. <img src="{PortraitURL-128}" alt="">
  1472. </span>
  1473.  
  1474. <div class="text logo-text">
  1475. <span class="title">{Title}</span>
  1476. <span class="user"><a href="https://tumblr.com/follow/{name}">@{name}</a></span>
  1477. </div>
  1478. </div>
  1479.  
  1480. <i class='bx bx-chevron-right toggle'></i>
  1481. </header>
  1482.  
  1483. <div class="menu-bar">
  1484.  
  1485. <div class="menu">
  1486.  
  1487.  
  1488. <ul class="menu-links">
  1489. <li class="nav-link">
  1490. <a href="/">
  1491. <i class='bx bx-home-alt icon' ></i>
  1492. <span class="text nav-text">Refresh</span>
  1493. </a>
  1494. </li>
  1495.  
  1496. <li class="nav-link">
  1497. <a href="https://tumblr.com/message/{name}">
  1498. <i class='bx bx-message-square-dots icon' ></i>
  1499. <span class="text nav-text">Direct message</span>
  1500. </a>
  1501. </li>
  1502.  
  1503. <li class="nav-link">
  1504. <a href="{text:Pop Up}">
  1505. <i class='bx bx-search icon'></i>
  1506. <span class="text nav-text">Search this blog</span>
  1507. </a>
  1508. </li>
  1509.  
  1510. <div id="pop"> <div class="fade"></div>
  1511. <div class="popup">
  1512.  
  1513. <div id="searchblock">
  1514.  
  1515. <form class="find" action="/tagged/" method="get">
  1516.  
  1517. <a class="expand"><input class="typing" type="text" name="q" value="{SearchQuery}" placeholder="looking for something?" autocomplete="off"/></a>
  1518.  
  1519. <input class="enter" type="submit" value="search"/>
  1520.  
  1521. </form>
  1522.  
  1523. <div id="searchentries">
  1524. <a href="/tagged/">entry #1</a><br>
  1525. <a href="/tagged/">entry #2</a><br>
  1526. <a href="/tagged/">entry #3</a><br>
  1527. <a href="/tagged/">entry #4</a><br>
  1528. <a href="/tagged/">entry #5</a><br>
  1529. <a href="/tagged/">entry #6</a><br>
  1530.  
  1531. </div><!--END 'searchentries' div-->
  1532. </div><!--END 'searchblock' div-->
  1533.  
  1534.  
  1535. </div>
  1536. </div>
  1537.  
  1538.  
  1539. <li class="nav-link">
  1540. <a href="#" class="scrollToTop">
  1541. <i class='bx bx-arrow-to-top icon'></i>
  1542. <span class="text nav-text">Scroll to top</span>
  1543. </a>
  1544. </li>
  1545.  
  1546. <li class="nav-link">
  1547. <a href="/">
  1548. <i class='bx bx-code-alt icon' ></i>
  1549. <span class="text nav-text">Link 1</span>
  1550. </a>
  1551. </li>
  1552.  
  1553. <li class="nav-link">
  1554. <a href="/">
  1555. <i class='bx bx-coffee icon' ></i>
  1556. <span class="text nav-text">Link 2</span>
  1557. </a>
  1558. </li>
  1559.  
  1560. <li class="nav-link">
  1561. <a href="/archive">
  1562. <i class='bx bx-folder icon' ></i>
  1563. <span class="text nav-text">Archive</span>
  1564. </a>
  1565. </li>
  1566.  
  1567. </ul>
  1568. </div>
  1569.  
  1570. <div class="bottom-content">
  1571.  
  1572. <li class="">
  1573. <a href="https://geminicodes.tumblr.com/">
  1574. <i class='bx bx-moon icon'></i>
  1575. <span class="text nav-text">Theme by bru</span>
  1576. </a>
  1577. </li>
  1578.  
  1579. <li class="">
  1580. <a href="https://tumblr.com/dashboard">
  1581. <i class='bx bx-log-out icon' ></i>
  1582. <span class="text nav-text">Back to Dash</span>
  1583. </a>
  1584. </li>
  1585.  
  1586.  
  1587.  
  1588. </div>
  1589. </div>
  1590.  
  1591. </nav>
  1592. <script>
  1593.  
  1594. const body = document.querySelector('body'),
  1595. sidemenu = body.querySelector('nav'),
  1596. toggle = body.querySelector(".toggle"),
  1597. searchBtn = body.querySelector(".search-box"),
  1598. modeSwitch = body.querySelector(".toggle-switch"),
  1599. modeText = body.querySelector(".mode-text");
  1600.  
  1601.  
  1602. toggle.addEventListener("click" , () =>{
  1603. sidemenu.classList.toggle("close");
  1604. })
  1605.  
  1606. searchBtn.addEventListener("click" , () =>{
  1607. sidemenu.classList.remove("close");
  1608. })
  1609. </script>
  1610.  
  1611. <div class="main">
  1612.  
  1613. <div class="credit">
  1614.  
  1615. </div>
  1616.  
  1617. <div class="asidecontainer">
  1618. <aside>
  1619.  
  1620. {block:IfSidebarImage}
  1621. <img src="{image:sidebar image}">
  1622. {/block:IfSidebarImage}
  1623.  
  1624. <h1>
  1625. <a href="/">{title}</a>
  1626. </h1>
  1627.  
  1628. <div class="description">
  1629. {text:Desktop Description}
  1630. </div>
  1631.  
  1632. <nav>
  1633. <a href="/" title="{text:Home Title}"> {text:Home Title}</a>
  1634. <a href="/ask" title="{text:Ask Title}">{text:Ask Title}</a>
  1635. <a href="{text:Link 1 Url}" title="{text:Link 1 Title}">{text:Link 1 Title}</a>
  1636. <a href="{text:Link 2 Url}" title="{text:Link 2 Title}">{text:Link 2 Title}</a>
  1637. <a href="{text:Link 3 Url}" title="{text:Link 3 Title}">{text:Link 3 Title}</a>
  1638. </nav>
  1639.  
  1640. </aside>
  1641. </div>
  1642.  
  1643. <div class="content">
  1644.  
  1645. {block:Posts}
  1646. <article class="entry {block:Photo}ph{/block:Photo}{block:Photoset}ph{/block:Photoset}" id="{PostID}">
  1647. <section class="post" id="{PostID}">
  1648. {block:Audio}
  1649. <div class="audio" id="{PostID}">
  1650. {block:AudioEmbed}
  1651. {AudioEmbed width="540px"}
  1652. {/block:AudioEmbed}
  1653. </div>
  1654. {/block:Audio}
  1655.  
  1656. {block:Photo}
  1657. <div class="media" id="{PostID}">
  1658. <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}"></a>
  1659. </div>
  1660. {/block:Photo}
  1661.  
  1662. {block:Photoset}
  1663. <div class="media photoset" id="{PostID}">
  1664. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1665.  
  1666. {block:Photos}
  1667. <div class="photo-data">
  1668. <div class="pxu-photo">
  1669. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div>
  1670. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>
  1671. {/block:Photos}
  1672. </div></div>
  1673. {/block:Photoset}
  1674.  
  1675. {block:Video}
  1676. <div class="media video" id="{PostID}">{Video-500}</div>
  1677. {/block:Video}
  1678.  
  1679. {block:Answer}
  1680. <table style="padding-bottom:5px;margin-bottom:5px;">
  1681. <tr>
  1682. <td class="askerbg" style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-64}"></td><td style="vertical-align:top;"><strong>{Asker} asked:</strong>
  1683. <div class="question">{Question}</div>
  1684. </td>
  1685. </tr>
  1686. </table>
  1687. {Answer}
  1688. {/block:Answer}
  1689.  
  1690.  
  1691.  
  1692. {block:Chat}
  1693. {block:Title}
  1694. <h1>{Title}</h1>
  1695. {/block:Title}
  1696.  
  1697. <ul class="chat text">
  1698. {block:Lines}
  1699. <li class="line">
  1700. {block:Label}
  1701. <span class="label">{Label}&nbsp; </span>
  1702. {/block:Label}
  1703. {Line}</li>
  1704. {/block:Lines}</ul>
  1705. {/block:Chat}
  1706.  
  1707. {block:Link}
  1708. <h1>
  1709. <a href="{URL}">{Name}</a></h1>
  1710. {block:Description}
  1711. <div class="caption">{Description}</div>
  1712. {/block:Description}
  1713. {/block:Link}
  1714.  
  1715. {block:Quote}
  1716. <div class="quote" id="{PostID}">{Quote}</div>
  1717. {block:Source}
  1718. <div class="source">— {Source}</div>
  1719. {/block:Source}
  1720. {/block:Quote}
  1721.  
  1722. {block:Text}
  1723. {block:Title}
  1724. <h1>{Title}</h1>
  1725. {/block:Title}
  1726. {block:Body}
  1727. <div class="caption">{Body}</div>
  1728. {/block:Body}
  1729. {/block:Text}
  1730.  
  1731. {block:Caption}
  1732. <div class="caption" id="{PostID}">{Caption}</div>
  1733. {/block:Caption}
  1734.  
  1735. </section>
  1736.  
  1737. {block:Date}
  1738. <div class="postinfo">
  1739.  
  1740. <center>{block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post" style="display:inline-block; vertical-align:middle; text-transform:uppercase; font-weight:bold"><i class="fas fa-thumbtack" style="font-size:9px;"></i> pinned post </a>{/block:PinnedPostLabel}</center>
  1741.  
  1742. <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonth}" title="{TimeAgo}" style="text-transform:lowercase"><i class="ph-calendar-blank-bold"></i></a>
  1743.  
  1744.  
  1745. /
  1746.  
  1747. {block:NoteCount}
  1748. <a href="{Permalink}" title="{NoteCountWithLabel}"><i class="ph-activity-bold"></i></a>
  1749. /
  1750. {/block:NoteCount}
  1751.  
  1752.  
  1753. <a href="{ReblogURL}" target="_blank" title="REBLOG"><i class="ph-arrows-clockwise-bold"></i></a>
  1754.  
  1755. <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a>
  1756.  
  1757. {block:HasTags}
  1758. <div class="tags">
  1759. <b>tagged as:</b>
  1760. {block:Tags}
  1761. <a href="{TagURL}">#{Tag}</a></i>
  1762. {/block:Tags}
  1763. </div>
  1764. {/block:HasTags}
  1765.  
  1766. </div>
  1767. {/block:Date}
  1768.  
  1769.  
  1770. </article>
  1771.  
  1772.  
  1773.  
  1774. <!--- TUMBLR CONTROLS -->
  1775.  
  1776. <div class="tumblrcontrols"><i class="fas fa-cog fa-spin"></i></div>
  1777.  
  1778.  
  1779. <center>{block:PostNotes} {PostNotes} {/block:PostNotes}</center> {/block:Posts} <!-- {block:ContentSource}{SourceURL}{/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL}{ReblogParentURL}{/block:RebloggedFrom} --> </div>
  1780.  
  1781.  
  1782. {block:Pagination}
  1783. <div class="pagi">
  1784. {block:PreviousPage}
  1785. <a href="{PreviousPage}" title="previous page">previous</a> /
  1786. {/block:PreviousPage}
  1787. {block:NextPage}
  1788. <a href="{NextPage}" title="next page">next</a>
  1789. {/block:NextPage}
  1790. </div>
  1791. {/block:Pagination}
  1792. </div>
  1793.  
  1794. <!--- NOT FOUND PAGE -->
  1795.  
  1796. <div class="wrapper_notfound">
  1797. <div class="actual_notfound">
  1798. <h1><i class="ph-prohibit-bold" style="display:inline-block; vertical-align:middle"></i> not found!</h1>
  1799. sorry! the url you requested could not be found :(
  1800. <a href="/">try again?</a>
  1801. </div>
  1802. </div>
  1803.  
  1804.  
  1805.  
  1806. <!-- SCRIPTS -->
  1807.  
  1808.  
  1809. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  1810.  
  1811. <script>feather.replace();</script>
  1812.  
  1813. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1814.  
  1815. <script>
  1816. $(document).ready(function(){
  1817. $('.expand').click(function(list){
  1818. list.stopPropagation();
  1819. $("#searchentries").slideToggle('slow');
  1820. });
  1821. });
  1822.  
  1823. $(document).click(function(outside){
  1824. var box = $('#searchentries');
  1825. if(!box.is(outside.target) && box.has(outside.target).length === 0){
  1826. $('#searchentries').slideUp('slow');
  1827. }
  1828. });
  1829. </script>
  1830.  
  1831. <script src=“//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  1832.  
  1833. <script>
  1834. $(document).ready(function(){
  1835. $('.controls-button').click(function(){
  1836. $('body').toggleClass('controls-click');
  1837. });
  1838. });
  1839. </script>
  1840.  
  1841.  
  1842. <script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  1843.  
  1844. <script> $('article').unnest({ yourCaption: ".caption", wrapName: ".caps", newCaptionUsername: true, originalPostCaptionUsername: false, tumblrAvatars: true, tumblrAvatarClass: ".ic", usernameColon: false }); </script>
  1845.  
  1846. <script src="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  1847.  
  1848. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1849.  
  1850. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  1851.  
  1852. <script> $(document).ready(function(){ $('.photo-slideshow').pxuPhotoset({ lightbox: true, rounded: 'corners', gutter: '4px', borderRadius: '0px', photoset: '.photo-slideshow', photoWrap: '.photo-data', photo: '.pxu-photo' }); }); </script>
  1853.  
  1854. <script src="https://unpkg.com/popper.js@1"></script>
  1855. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1856. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1857.  
  1858.  
  1859.  
  1860.  
  1861. <script>
  1862. $(document).ready(function(){
  1863.  
  1864. //Click event to scroll to top
  1865. $('.scrollToTop').click(function(){
  1866. $('html, body').animate({scrollTop : 0},800);
  1867. return false;
  1868. });
  1869.  
  1870. });
  1871. </script>
  1872.  
  1873. <script>
  1874.  
  1875. tippy('a[title]', {
  1876. theme: 'gradient',
  1877. arrow: false,
  1878. zIndex: 9999999999,
  1879. maxWidth: 300,
  1880.  
  1881. content(reference) {
  1882. const title = reference.getAttribute('title');
  1883. reference.removeAttribute('title');
  1884. return title;
  1885. },
  1886. });
  1887.  
  1888.  
  1889. </script>
  1890.  
  1891. <script>
  1892. $(document).ready(function() {
  1893. if ($('p:contains("The URL you requested could not be found.")').html()) {
  1894. $(".wrapper_notfound").css( "visibility", "visible" );
  1895. $(".article_position").remove();
  1896. $('title').prepend( "Not Found | " ); }
  1897. });
  1898. </script>
  1899.  
  1900. <!-- masonry navigation -->
  1901. <script src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
  1902.  
  1903. <script type="text/javascript">
  1904. // masonry navigation
  1905. var elements = document.getElementsByClassName('masonry-navigation');
  1906. var msnry;
  1907. var nElements = elements.length;
  1908. for(var i = 0; i < nElements; i++){
  1909. msnry = new Masonry( elements[i], {
  1910. // columnWidth: 268,
  1911. gutter: 10,
  1912. itemSelector: '.masonry-navigation-item',
  1913. });
  1914. }
  1915. </script>
  1916.  
  1917. </body>
  1918.  
  1919. </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!