API tools faq
paste
Advertisement
userbru

theme twenty-nine.

userbru
Apr 13th, 2023 (edited)
3,573
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 42.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  9. <meta charset="utf-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.  
  12. <!---
  13.  
  14. THEME BY BRU
  15. base code by seyche
  16. custom scrollbar by shythemes
  17. icons by phosphoricons, cappuccicons, boxicons
  18. sidebar menu by codingweblab.com
  19. pop up by odeysseus
  20. masonry, tumblr controls by maziekeen
  21. tooltips by tippy
  22. fade in effect by cory laviska
  23. npf fix by glenthemes
  24.  
  25.  
  26. --->
  27.  
  28. <!----- VARIABLES AND OPTIONS ----->
  29.  
  30. <meta name="image:Sidebar" content=""/>
  31. <meta name="image:Sidebar Icon" content=""/>
  32. <meta name="image:AboutHeader" content=""/>
  33. <meta name="image:AboutIcon" content=""/>
  34.  
  35. <meta name="if:Sidebar Image" content=""/>
  36.  
  37. <meta name="color:Background" content="#0d0118"/>
  38. <meta name="color:Text" content="#ffffff"/>
  39. <meta name="color:Link" content="#ffffff"/>
  40. <meta name="color:Accent" content="#b997ce"/>
  41. <meta name="color:Borders" content="#f1f1f1"/>
  42. <meta name="color:Glow" content="#ffffff">
  43. <meta name="color:Selected Text" content="#201228"/>
  44. <meta name="color:Selected Text Background" content="#b997ce"/>
  45. <meta name="color:Tags Background" content="#0b0312"/>
  46.  
  47.  
  48. <!---- MENU COLORS ---->
  49. <meta name="color:Menu Background" content="#0d0118"/>
  50. <meta name="color:Menu Link Background" content="#0d0118"/>
  51. <meta name="color:Socials" content="#b564ff"/>
  52.  
  53. <!---ABOUT POP UP --->
  54. <meta name="color:About Borders" content="#ffffff"/>
  55.  
  56. <meta name="select:Post Width" content="400px" title="400px"/>
  57. <meta name="select:Post Width" content="500px" title="500px"/>
  58. <meta name="select:Post Width" content="540px" title="540px"/>
  59.  
  60. <meta name="text:Post Margin" content="150"/>
  61.  
  62. <meta name="text:Desktop Description" content="Write your desktop only description here."/>
  63.  
  64. <!--- MENU ---->
  65. <meta name="text:Name" content="Your name here."/>
  66. <meta name="text:Pronouns" content="Pronouns here."/>
  67. <meta name="text:Home" content="Home"/>
  68. <meta name="text:Messages" content="Messages"/>
  69. <meta name="text:Menu Link 1 URL" content="Menu Link 1 Url"/>
  70. <meta name="text:Menu Link 1 Title" content=""/>
  71. <meta name="text:Menu Link 2 URL" content="Menu Link 2 Url"/>
  72. <meta name="text:Menu Link 2 Title" content=""/>
  73. <meta name="text:Menu Link 3 URL" content="Menu Link 3 Url"/>
  74. <meta name="text:Menu Link 3 Title" content=""/>
  75. <meta name="text:Menu Link 4 URL" content="Menu Link 4 Url"/>
  76. <meta name="text:Menu Link 4 Title" content=""/>
  77. <meta name="text:About Pop Up" content=""/>
  78.  
  79.  
  80.  
  81. <!--- SIDEBAR LINKS --->
  82. <meta name="text:Home Link" content="home"/>
  83. <meta name="text:Ask Link" content="ask"/>
  84. <meta name="text:Archive Link" content="archive"/>
  85. <meta name="text:Submit Link" content=""/>
  86. <meta name="text:Link 1 URL" content=""/>
  87. <meta name="text:Link 1" content=""/>
  88. <meta name="text:Link 2 URL" content=""/>
  89. <meta name="text:Link 2" content=""/>
  90. <meta name="text:Link 3 URL" content=""/>
  91. <meta name="text:Link 3" content=""/>
  92.  
  93.  
  94. <!---- FONTS ---->
  95.  
  96. <link rel="preconnect" href="https://fonts.googleapis.com">
  97. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  98. <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  99. <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  100.  
  101. <!---- ICONS --->
  102. <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  103. <script src="//pull.cappuccicons.com/cpf.js"></script>
  104. <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]"></script>
  105.  
  106.  
  107. <!---- SCRIPTS ---->
  108.  
  109. <!--- NPF FIX --->
  110.  
  111. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  112.  
  113. <!--
  114. NPF images fix v3.0 by @glenthemes [2021]
  115. 💌 git.io/JRBt7
  116. --->
  117. <script src="//npf-images-v3.github.io/script.js"></script>
  118. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  119. <style tmblr-npf>
  120. :root {
  121. --NPF-Caption-Spacing:1em;
  122. --NPF-Image-Spacing:4px;
  123. }
  124. </style>
  125.  
  126. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  127.  
  128.  
  129.  
  130. <!--POP UP--->
  131. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
  132. $(document).ready(function(){
  133. $('.click,.fade').click(function() {
  134. $('#pop').fadeToggle();
  135. });
  136. });
  137. </script>
  138. <!---END POP UP--->
  139.  
  140. <!----- CSS ----->
  141.  
  142. <style type="text/css">
  143.  
  144. /*----- BASIC STYLING -----*/
  145.  
  146.  
  147. /*** CUSTOM SCROLLBAR ---*/
  148.  
  149. ::-webkit-scrollbar {
  150. width:17px;
  151. height:17px;
  152. }
  153. ::-webkit-scrollbar {
  154. background-color:{color:Background}; /* background color */
  155. }
  156. ::-webkit-scrollbar-track {
  157. border:8px solid {color:Background}; /* background color */
  158. background-color:{color:Background}; /* light border color */
  159. }
  160. ::-webkit-scrollbar-thumb {
  161. border:8px solid {color:Background}; /* background color */
  162. background-color:rgb(144,144,144); /* dark border color */
  163. min-height:24px;
  164. min-width:24px;
  165. }
  166.  
  167. /* ----- TUMBLR CONTROLS ---- */
  168.  
  169.  
  170. .controls-button {
  171. position: fixed;
  172. cursor: help;
  173. top: 20px;
  174. right: 2rem;
  175. z-index: 1000;
  176. cursor: pointer;
  177. right:1.5rem;
  178. }
  179.  
  180. .tmblr-iframe {
  181. z-index: 999999999!important;
  182. opacity: 0;
  183. visibility: hidden;
  184. width:30px;
  185. -webkit-transition: all 0.5s;
  186. -moz-transition: all 0.5s;
  187. -ms-transition: all 0.5s;
  188. -o-transition: all 0.5s;
  189. transition: all 0.5s;
  190. }
  191.  
  192. body.controls-click .tmblr-iframe {
  193. opacity: 1;
  194. margin-right: 4rem;
  195. display:inline;
  196. vertical-align:bottom;
  197. visibility: visible;
  198. -webkit-transition: all 0.5s;
  199. -moz-transition: all 0.5s;
  200. -ms-transition: all 0.5s;
  201. -o-transition: all 0.5s;
  202. transition: all 0.5s;
  203. }
  204.  
  205. /* -------- TOOLTIPS --------- */
  206.  
  207.  
  208. .tippy-tooltip.gradient-theme {
  209. background-image:linear-gradient(to right, {color:Menu Background}, {color:Tags Background});
  210. border-radius:5px;
  211. color:{color:text};
  212. text-align:center;
  213. font-family:'Poppins', sans-serif!important;
  214. font-weight:bold;
  215. text-transform:uppercase;
  216. letter-spacing:1px;
  217. font-size:0.90em;
  218. box-shadow: 7px 7px 7px -9px rgba(000,000,000, 0.45);}
  219.  
  220. .tippy-tooltip.gradient-theme .tippy-svg-arrow {
  221. fill:var(--text);}
  222.  
  223.  
  224. /*----- MENU -------*/
  225.  
  226. *{
  227. margin: 0;
  228. padding: 0;
  229. box-sizing: border-box;
  230. font-family: "Poppins" , sans-serif!important;
  231. }
  232. .sidebar{
  233. position: fixed;
  234. left: 0;
  235. top: 0;
  236. height: 100%;
  237. width: 78px;
  238. background-image:linear-gradient(to right, {color:Menu Background}, {color:Tags Background});
  239. padding: 6px 14px;
  240. z-index: 99;
  241. transition: all 0.5s ease;
  242. }
  243. .sidebar.open{
  244. width: 250px;
  245. }
  246. .sidebar .logo-details{
  247. height: 60px;
  248. display: flex;
  249. align-items: center;
  250. position: relative;
  251. }
  252. .sidebar .logo-details .icon{
  253. opacity: 0;
  254. transition: all 0.5s ease;
  255. }
  256. .sidebar .logo-details .logo_name{
  257. color: #fff;
  258. font-size: 16px;
  259. font-weight: 600;
  260. opacity: 0;
  261. transition: all 0.5s ease;
  262. }
  263. .sidebar.open .logo-details .icon,
  264. .sidebar.open .logo-details .logo_name{
  265. opacity: 1;
  266. }
  267. .sidebar .logo-details #btn{
  268. position: absolute;
  269. top: 50%;
  270. right: 0;
  271. transform: translateY(-50%);
  272. font-size: 22px;
  273. transition: all 0.4s ease;
  274. font-size: 23px;
  275. text-align: center;
  276. cursor: pointer;
  277. transition: all 0.5s ease;
  278. }
  279. .sidebar.open .logo-details #btn{
  280. text-align: right;
  281. }
  282. .sidebar i{
  283. color: #fff;
  284. height: 60px;
  285. min-width: 50px;
  286. font-size: 28px;
  287. text-align: center;
  288. line-height: 60px;
  289. }
  290. .sidebar .nav-list{
  291. margin-top: 20px;
  292. height: 100%;
  293. }
  294. .sidebar li{
  295. position: relative;
  296. margin: 8px 0;
  297. list-style: none;
  298. }
  299. .sidebar li .tooltip{
  300. position: absolute;
  301. top: -20px;
  302. left: calc(100% + 15px);
  303. z-index: 3;
  304. background: {color:Menu Background};
  305. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  306. padding: 6px 12px;
  307. border-radius: 4px;
  308. font-size: 15px;
  309. font-weight: 400;
  310. opacity: 0;
  311. white-space: nowrap;
  312. pointer-events: none;
  313. transition: 0s;
  314. }
  315. .sidebar li:hover .tooltip{
  316. opacity: 1;
  317. pointer-events: auto;
  318. transition: all 0.4s ease;
  319. top: 50%;
  320. transform: translateY(-50%);
  321. }
  322. .sidebar.open li .tooltip{
  323. display: none;
  324. }
  325. .sidebar input{
  326. font-size: 15px;
  327. color: #FFF;
  328. font-weight: 400;
  329. outline: none;
  330. height: 50px;
  331. width: 100%;
  332. width: 50px;
  333. border: none;
  334. border-radius: 12px;
  335. transition: all 0.5s ease;
  336. background: {color:Tags Background};
  337. }
  338. .sidebar.open input{
  339. padding: 0 20px 0 50px;
  340. width: 100%;
  341. }
  342. .sidebar .bx-search{
  343. position: absolute;
  344. top: 50%;
  345. left: 0;
  346. transform: translateY(-50%);
  347. font-size: 22px;
  348. background: {color:Tags Background};
  349. color: #FFF;
  350. }
  351. .sidebar.open .bx-search:hover{
  352. background: {color:Tags Background};
  353. color: {color:Accent};
  354. }
  355. .sidebar .bx-search:hover{
  356. background: {color:Accent};
  357. color: #11101d;
  358. }
  359. .sidebar li a{
  360. display: flex;
  361. height: 100%;
  362. width: 100%;
  363. border-radius: 12px;
  364. align-items: center;
  365. text-decoration: none;
  366. transition: all 0.4s ease;
  367. background:{color:Menu Link Background};
  368. }
  369. .sidebar li a:hover{
  370. background: {color:Accent};
  371. }
  372. .sidebar li a .links_name{
  373. color: #fff;
  374. font-size: 15px;
  375. font-weight: 400;
  376. white-space: nowrap;
  377. opacity: 0;
  378. pointer-events: none;
  379. transition: 0.4s;
  380. }
  381. .sidebar.open li a .links_name{
  382. opacity: 1;
  383. pointer-events: auto;
  384. }
  385. .sidebar li a:hover .links_name,
  386. .sidebar li a:hover i{
  387. transition: all 0.5s ease;
  388. color: #11101D;
  389. }
  390. .sidebar li i{
  391. height: 50px;
  392. line-height: 50px;
  393. font-size: 18px;
  394. border-radius: 12px;
  395. }
  396. .sidebar li.profile{
  397. position: fixed;
  398. height: 60px;
  399. width: 78px;
  400. left: 0;
  401. bottom: -8px;
  402. padding: 10px 14px;
  403. background:{color:Menu Link Background};
  404. transition: all 0.5s ease;
  405. overflow: hidden;
  406. }
  407. .sidebar.open li.profile{
  408. width: 250px;
  409. }
  410. .sidebar li .profile-details{
  411. display: flex;
  412. align-items: center;
  413. flex-wrap: nowrap;
  414. }
  415. .sidebar li img{
  416. height: 40px;
  417. width: 40px;
  418. object-fit: cover;
  419. border-radius: 6px;
  420. margin-right: 10px;
  421. }
  422. .sidebar li.profile .name,
  423. .sidebar li.profile .pronouns{
  424. font-size: 15px;
  425. font-weight: 400;
  426. color: #fff;
  427. white-space: nowrap;
  428. }
  429. .sidebar li.profile .pronouns{
  430. font-size: 12px;
  431. }
  432. .sidebar .profile #log_out{
  433. position: absolute;
  434. top: 50%;
  435. right: 0;
  436. transform: translateY(-50%);
  437. background: {color:Tags Background};
  438. width: 100%;
  439. height: 60px;
  440. line-height: 60px;
  441. border-radius: 0px;
  442. transition: all 0.5s ease;
  443. }
  444.  
  445. #log_out:hover {
  446. color:{color:Accent};
  447. }
  448.  
  449. .sidebar.open .profile #log_out{
  450. width: 50px;
  451. background: none;
  452. }
  453. .home-section{
  454. position: relative;
  455. background: #E4E9F7;
  456. min-height: 100vh;
  457. top: 0;
  458. left: 78px;
  459. width: calc(100% - 78px);
  460. transition: all 0.5s ease;
  461. z-index: 2;
  462. }
  463. .sidebar.open ~ .home-section{
  464. left: 250px;
  465. width: calc(100% - 250px);
  466. }
  467. .home-section .text{
  468. display: inline-block;
  469. color: #11101d;
  470. font-size: 25px;
  471. font-weight: 500;
  472. margin: 18px
  473. }
  474. @media (max-width: 420px) {
  475. .sidebar li .tooltip{
  476. display: none;
  477. }
  478. }
  479.  
  480. /*---ABOUT---*/
  481.  
  482. /*---- POP UP ----*/
  483.  
  484. .click { cursor:help } /* for question mark cursor on hover */
  485.  
  486. #pop {
  487. width:100%;
  488. height:100%;
  489. top:0;left:0;
  490. position:fixed;
  491. z-index:999;
  492. background:rgba(9,0,18,.9); /* background of popup. adjust the .9 for the opacity of the background (1 will be solid white, .5 will be semi transparent, etc.) */
  493. display:none;
  494. }
  495. .fade {
  496. top:0;
  497. left:0;
  498. position:fixed;
  499. z-index:1000;
  500. width:100%;
  501. height:100%;
  502. }
  503.  
  504. .popup {
  505. top:50%;
  506. left:50%;
  507. transform:translate(-50%,-50%);
  508. position:fixed;
  509. border-radius:10px 10px 10px 10px;
  510. background-image:linear-gradient(to right, {color:Menu Background}, {color:Tags Background}); /* background of popup box */
  511. padding:10px; /* padding of popup box */
  512. z-index:10000;
  513. max-width:690px; /* width of popup */
  514. max-height:800px;
  515. overflow-y:scroll;
  516. overflow-x:hidden;
  517. border:1px solid #140722; /* popup border */
  518. }
  519.  
  520.  
  521. .about-header img {
  522. max-width:640px!important;
  523. display:flex;
  524. align-items:center;
  525. border-radius:10px;
  526. border-radius:10px;
  527. }
  528.  
  529. .about-icon img {
  530. width:80px;
  531. border-radius:100%;
  532. display:flex;
  533. align-items:left;
  534. margin-top:10px;
  535. margin-left:10px;
  536. z-index:9999;
  537. border:3px solid {color:About Borders};
  538. }
  539.  
  540. .basic-info {
  541. font-size:18px;
  542. font-weight:600;
  543. font-family:'Roboto', sans-serif!important;
  544. display:flex;
  545. flex-direction:row;
  546. justify-content: left;
  547. align-items:left;
  548. vertical-align:middle;
  549. margin-top:-50px;
  550. margin-left:100px;
  551. text-shadow: 1px 1px 5px {color:Glow};
  552.  
  553. }
  554.  
  555. .basic-info-sub {
  556. font-size:11px;
  557. font-weight:400;
  558. font-family:'Roboto', sans-serif;
  559. margin-left:10px;
  560.  
  561. }
  562.  
  563. .about-title {
  564. font-size:14px;
  565. text-align:center;
  566. text-shadow: 1px 1px 5px {color:Glow};
  567. font-weight:600;
  568. margin-bottom:10px;
  569. }
  570.  
  571. .about-text {
  572. border:1px solid {color:About Borders};
  573. border-radius:4px;
  574. padding:10px;
  575. text-align:center;
  576. font-size:12px;
  577. font-family:'Poppins', sans-serif;
  578. margin-top:50px;
  579. }
  580.  
  581. .about-text a {
  582. color:{color:Socials};
  583. }
  584.  
  585. .about-text a:hover {
  586. color:{color:Accent};
  587. }
  588.  
  589. .socials {
  590. border:1px solid {color:About Borders};
  591. padding:10px;
  592. display:flex;
  593. flex-direction:row;
  594. justify-content:space-between;
  595. align-items:center;
  596. margin-top:30px;
  597. font-size:25px;
  598. }
  599.  
  600. .socials a {
  601. color:{color:Socials};
  602. }
  603.  
  604.  
  605. /*----END POP UP--*/
  606.  
  607.  
  608. body {
  609. font-family: sans-serif;
  610. font-size: 14px;
  611. color: {color:text};
  612. background-color: {color:background};
  613. line-height: 160%;
  614. word-wrap: break-word;
  615. letter-spacing: 0.04em;
  616. margin: 0;
  617. padding: 0;
  618. opacity: 1;
  619. transition: 1s opacity;
  620. }
  621.  
  622. body.fade-out {
  623. opacity: 0;
  624. transition: none;
  625. }
  626.  
  627. html {
  628. background-color:{color:Background};
  629. }
  630.  
  631. a {
  632. color: {color:link};
  633. text-decoration: none;
  634. -webkit-transition: all 0.3s;
  635. -moz-transition: all 0.3s;
  636. -ms-transition: all 0.3s;
  637. -o-transition: all 0.3s;
  638. transition: all 0.3s;
  639. }
  640.  
  641. a:hover {
  642. color: {color:accent};
  643. -webkit-transition: all 0.3s;
  644. -moz-transition: all 0.3s;
  645. -ms-transition: all 0.3s;
  646. -o-transition: all 0.3s;
  647. transition: all 0.3s;
  648. }
  649.  
  650. blockquote {
  651. padding: 0 0 0 1.5em;
  652. border-left: 1px solid {color:borders};
  653. margin: 1.5em 0 1.5em 1.5em;
  654. }
  655.  
  656. h1, h2, h3, h4, h5, .title {
  657. letter-spacing: 0.06em;
  658. line-height: 145%;
  659. font-weight: bold;
  660. }
  661.  
  662. h1, .title {font-size: 1.5em;}
  663. h2 {font-size: 1.3em;}
  664. h3 {font-size: 1.25em;}
  665. h4 {font-size: 1.1em;}
  666. h5 {font-size: 1em;}
  667.  
  668. small {font-size: 0.9em;}
  669. big {font-size: 1.1em;}
  670.  
  671. hr {
  672. height: 1px;
  673. border: none;
  674. box-shadow: none;
  675. background-color: {color:borders};
  676. }
  677.  
  678. pre {
  679. line-height: inherit;
  680. font-size: inherit;
  681. white-space: pre-wrap;
  682. white-space: -moz-pre-wrap;
  683. white-space: -pre-wrap;
  684. white-space: -o-pre-wrap;
  685. word-wrap: break-word;
  686. }
  687.  
  688. u {
  689. font-weight:bold;
  690. border-bottom:2px solid {color:Accent};
  691. text-decoration:none;
  692. }
  693.  
  694. ::selection {
  695. color:{color:Selected Text};
  696. background:{color:Selected Text Background};
  697. }
  698.  
  699. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  700.  
  701. /*----- ACTUAL SIDEBAR -----*/
  702.  
  703. #sidebar {
  704. width:330px;
  705. position: fixed;
  706. top: {text:post margin}px;
  707. text-align: center;
  708. margin-left:690px;
  709. border-radius:5px;
  710. border:1px solid {color:Borders};
  711. padding:20px;
  712. background-image:linear-gradient(to right, {color:Menu Background}, {color:Tags Background});
  713. box-shadow: 1px 1px 5px {color:Glow};
  714. }
  715.  
  716. {block:ifSidebarImage}
  717. #sidebar img {
  718. width:300px;
  719. }
  720. {/block:ifSidebarImage}
  721.  
  722. .sidebar-icon {
  723. width:60px;
  724.  
  725. }
  726.  
  727. .sidebar-icon img {
  728. border-radius:100%;
  729. border:3px solid {color:Borders};
  730.  
  731. }
  732.  
  733. .title {
  734. text-shadow: 1px 1px 10px {color:Glow};
  735. vertical-align:middle;
  736. text-align:left;
  737. margin-left:70px;
  738. margin-top:-50px;
  739. font-size:18px;
  740. display:flex;
  741. flex-direction:left;
  742.  
  743. }
  744.  
  745. .subtitle {
  746. font-size:10px;
  747. font-family:'Roboto', sans-serif;
  748. text-shadow: 1px 1px 10px {color:Glow};
  749. text-align:left;
  750. margin-left:70px;
  751. }
  752.  
  753.  
  754. {block:ifSidebarImage}
  755. #side-img {
  756. margin-bottom: 1.5em;
  757. width:300px;
  758. border-radius:10px;
  759. }
  760. {/block:ifSidebarImage}
  761.  
  762.  
  763. #description, nav {margin-top: 1.25em;}
  764.  
  765. nav a {
  766. margin: auto 2px;
  767. text-shadow: 1px 1px 5px {color:Glow};
  768. }
  769. #description {
  770. background:{color:Background};
  771. padding:20px;
  772. border-radius:10px;
  773. font-size:12.5px;
  774. border:1px solid {color:Borders};
  775. margin-top:30px;
  776. }
  777.  
  778. #description a {
  779. font-weight:600;
  780. }
  781.  
  782. #description a:hover {
  783. color:{color:Accent};
  784. }
  785.  
  786. /*----- POSTS -----*/
  787.  
  788. main {
  789. position: relative;
  790. width: calc(250px + {select:post width} + 150px);
  791. margin: auto;
  792. }
  793.  
  794. section {
  795. position: relative;
  796. width: {select:post width};
  797. margin-left:0px;
  798. }
  799.  
  800. article {
  801. width: 100%;
  802. position: relative;
  803. margin: {text:post margin}px auto;
  804. background:{color:Menu Background};
  805. padding:20px;
  806. border-radius:10px;
  807. border:1px solid {color:Borders};
  808. box-shadow: 1px 1px 5px {color:Glow};
  809. }
  810.  
  811. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
  812.  
  813. /*----- CAPTIONS -----*/
  814.  
  815. .caption {margin-top: 2em; list-style-type: none;}
  816. .text-caption:first-of-type {margin-top: 0;}
  817.  
  818. .user-icon, .ask-icon {
  819. display: inline-block;
  820. vertical-align: middle;
  821. width: 2.5em;
  822. height: 2.5em;
  823. margin-right: 1em;
  824. border-radius:100%;
  825. }
  826.  
  827. .username {
  828. display: inline-block;
  829. vertical-align: middle;
  830. font-weight: bold;
  831. text-shadow: 1px 1px 3px {color:Glow};
  832. }
  833.  
  834. .deactive::after {
  835. content: '(deactivated)';
  836. margin-left: 1em;
  837. opacity: 0.75;
  838. color: {color:text};
  839. }
  840.  
  841. p.tmblr-attribution {margin-top: 1em !important;}
  842.  
  843. /*----- TEXT -----*/
  844.  
  845. h1.post-title {margin-top: 0;}
  846.  
  847. /*----- LINK -----*/
  848.  
  849. a.link-wrap {display: block; border: 1px solid {color:borders};}
  850. .link {padding: 2em;}
  851. .link-host, .link-txt {margin-top: 1.5em;}
  852.  
  853. .npf-link-block {
  854. margin-top: 1.5em;
  855. background-color: inherit;
  856. border: 1px solid inherit;
  857. color: inherit;
  858. }
  859.  
  860. /*----- PHOTO -----*/
  861.  
  862. img {
  863. margin: 0;
  864. display: block;
  865. height: auto;
  866. max-width: 100%;
  867. }
  868.  
  869. .photo img {width: 100%;}
  870. .vignette, #vignette {opacity: 0;}
  871. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  872.  
  873. .lightbox-image, #tumblr_lightbox img {
  874. box-shadow: none !important;
  875. border-radius: 0 !important;
  876. max-width: none;
  877. }
  878.  
  879. #tumblr_lightbox_caption, .lightbox-caption {
  880. color: #fff !important;
  881. font-family: inherit;
  882. margin-top: 1em !important;
  883. }
  884.  
  885. /*----- PHOTOSET -----*/
  886.  
  887. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  888. margin-left: 0 !important;
  889. margin-right: 0 !important;
  890. }
  891.  
  892. /*----- QUOTE -----*/
  893.  
  894. .quote {line-height: 160%; font-size: 1.25em;}
  895.  
  896. .quote p:first-of-type {margin-top: 0;}
  897. .quote p:last-of-type {margin-bottom: 0;}
  898.  
  899. .source {margin-top: 1.5em;}
  900.  
  901. /*----- CHAT -----*/
  902.  
  903. .chat {padding: 0; margin: 0;}
  904. .chat li {list-style-type: none; margin-top: 1em;}
  905. .chat li:first-of-type {margin-top: 0;}
  906. .chatter {font-weight: bold;}
  907.  
  908. p.npf_chat, p.npf_chat b {font-family: inherit;}
  909.  
  910. /*----- ANSWER -----*/
  911.  
  912. .ask-wrap {border-bottom: 1px solid {color:borders}; padding-bottom: 2em;}
  913.  
  914. .ask-wrap .asking {
  915. display: inline-block;
  916. margin-left: 1em;
  917. font-weight: bold;
  918. }
  919.  
  920. .asking {
  921. text-shadow: 1px 1px 3px {color:Glow};
  922. }
  923.  
  924. .question {
  925. margin-top: 1em;
  926. background:{color:Tags Background};
  927. padding:10px;
  928. height:auto;
  929. border-radius:0px 4px 10px 10px;
  930. }
  931. .question p:first-of-type {margin-top: 0;}
  932. .question p:last-of-type {margin-bottom: 0;}
  933.  
  934. /*----- AUDIO -----*/
  935.  
  936. .audiopost {padding: 2em; border: 1px solid {color:borders};}
  937.  
  938. .album-art {
  939. z-index: 1;
  940. display: inline-block;
  941. vertical-align: middle;
  942. float: left;
  943. width: 100px;
  944. height: 100px;
  945. }
  946.  
  947. .audio-player-wrap {
  948. width: 100px;
  949. height: 100px;
  950. display: inline-block;
  951. }
  952.  
  953. .button {
  954. width: 30px;
  955. height: 30px;
  956. overflow: hidden;
  957. position: relative;
  958. z-index: 2;
  959. margin: 7px;
  960. }
  961.  
  962. .audiobox {
  963. background-color: #f2f2f2;
  964. z-index: 3;
  965. position: absolute;
  966. margin: 28px 0 0 28px;
  967. border-radius: 50%;
  968. }
  969.  
  970. .audioinfo {
  971. display: inline-block;
  972. height: 100px;
  973. max-width: calc(100% - 100px);
  974. margin-left: 100px;
  975. display: flex;
  976. justify-content: center;
  977. flex-direction: column;
  978. box-sizing: border-box;
  979. padding-left: 2em;
  980. }
  981.  
  982. .audioinfo li {list-style-type: none;}
  983. .track {font-weight: bold;}
  984.  
  985. /*----- INFO -----*/
  986.  
  987. .info {
  988. margin-top: 2em;
  989. background-image:linear-gradient(to right, {color:Menu Background}, {color:Tags Background});
  990. padding:10px;
  991. border-radius:10px;
  992. }
  993.  
  994. .info a {display: inline-block; vertical-align: middle;}
  995.  
  996. .likeb {
  997. position: relative;
  998. display: inline-block;
  999. height: 1.6em;
  1000. margin-bottom: -1px;
  1001. }
  1002.  
  1003. .likeb .like_button iframe {
  1004. position: absolute;
  1005. top: 0;
  1006. left: 0;
  1007. bottom: 0;
  1008. right: 0;
  1009. z-index: 2;
  1010. opacity: 0;
  1011. }
  1012.  
  1013. .like_button iframe {width: 100% !important; height: 100% !important;}
  1014. .likeb .liked + .actual-button {color: red;}
  1015. .likeb .liked + .actual-button:after {content: 'd';}
  1016.  
  1017. .info a, .tags a {margin-right: 0.75em;}
  1018.  
  1019. .tags {
  1020. margin-top:15px;
  1021. font-size:12px;
  1022. padding:5px;
  1023. }
  1024.  
  1025. .tags a {
  1026. background:{color:Tags Background};
  1027. padding:2px;
  1028. border-radius:5px;
  1029. }
  1030.  
  1031. .tags a:hover {
  1032. background:{color:Accent};
  1033. color:{color:Background};
  1034. }
  1035.  
  1036. a.pinned-post {font-weight: bold; color: {color:accent};}
  1037.  
  1038. /*---- POST NOTES -----*/
  1039.  
  1040. .notes {margin: {text:post margin}px 0;}
  1041.  
  1042. ol.notes {
  1043. max-width: 100%;
  1044. padding: 0;
  1045. margin: 2em 0 0 0;
  1046. }
  1047.  
  1048. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  1049.  
  1050. ol.notes li.note img.avatar {
  1051. margin-right: 1em;
  1052. vertical-align: middle;
  1053. display: inline-block;
  1054. width: 1.25em;
  1055. height: 1.25em;
  1056. }
  1057.  
  1058. /*---- PAGINATION -----*/
  1059.  
  1060. #page-navigation {text-align: center; width:{select:Post Width}; margin-left:0px;}
  1061. #page-navigation a, .current-page {margin: 0 0.5em;}
  1062. .current-page {font-weight: bold; color: {color:accent};}
  1063.  
  1064. /*---- CREDIT -----*/
  1065.  
  1066. #credit {
  1067. position: fixed;
  1068. bottom: 20px;
  1069. right: 20px;
  1070. font-size: 20px;
  1071. background:{color:Tags Background};
  1072. padding:10px;
  1073. border:1px solid {color:Borders};
  1074. border-radius:4px;
  1075. box-shadow:1px 1px 3px {color:Glow};
  1076.  
  1077. }
  1078.  
  1079. /*---MASONRY ---*/
  1080.  
  1081. .masonry-navigation {
  1082. width: 100%;
  1083. border-bottom: 1px solid #e2e2e2;
  1084. margin-bottom:15px;
  1085. }
  1086.  
  1087. .masonry-navigation:last-child {
  1088. border:none;
  1089. }
  1090.  
  1091. .masonry-navigation-item.one-column {
  1092. width: 100%;
  1093. padding: 0 5px;
  1094. margin-bottom: 10px;
  1095. }
  1096.  
  1097. .masonry-navigation-item.one-column ul {
  1098. display: flex;
  1099. flex-wrap: wrap;
  1100. margin: 0;
  1101. padding: 0;
  1102. }
  1103.  
  1104. /* if you have any problem with one colum lists (ul li) you edit here */
  1105. .masonry-navigation-item.one-column ul li {
  1106. margin: 4px 15px;
  1107. padding: 0;
  1108. }
  1109.  
  1110. /* if they don't display two columns correctly, try to decrease the value on width: 240px */
  1111. .masonry-navigation-item.two-columns {
  1112. width: 240px;
  1113. padding: 0 5px;
  1114. margin-bottom: 10px;
  1115. }
  1116.  
  1117. /* if they don't display three columns correctly, try to decrease the value on width: 160px */
  1118. .masonry-navigation-item.three-columns {
  1119. width: 160px;
  1120. padding: 0 5px;
  1121. margin-bottom: 10px;
  1122. }
  1123.  
  1124. /* edit height: 215px to adjust the box height if you add the class scroll in the html */
  1125. .masonry-navigation-item.scroll {
  1126. height:215px;
  1127. overflow-y: scroll;
  1128. }
  1129.  
  1130.  
  1131. /*----
  1132.  
  1133. MEDIA QUERIES AND RESPONSIVENESS:
  1134.  
  1135. if you change the basic layout (i.e. sidebar to header), you MUST modify or delete this section, or else your theme will get screwed up on smaller screen sizes. if you're unfamiliar with media queries and/or you aren't interested in making responsive themes, I recommend deleting this whole section.
  1136.  
  1137. -----*/
  1138.  
  1139. /*--- for small desktop/tablet screens. converts sidebar to header ---*/
  1140.  
  1141. @media only screen and (max-width: 1100px) {
  1142. main {width: {select:post width};}
  1143.  
  1144. #sidebar {
  1145. position: relative;
  1146. margin: {text:post margin}px auto;
  1147. width: 100%;
  1148. top: auto;
  1149. }
  1150.  
  1151. #sidebar img {
  1152. display:none;
  1153. }
  1154.  
  1155. section {margin-left: 0;}
  1156.  
  1157. .title {
  1158. margin-top:0px;
  1159. margin-bottom:10px;
  1160. text-align:center;
  1161. margin-left:0px;
  1162. }
  1163.  
  1164. .subtitle {
  1165. margin-top:0px;
  1166. margin-bottom:10px;
  1167. text-align:center;
  1168. margin-left:0px;
  1169. }
  1170.  
  1171. .sidebar-icon{
  1172. display:hidden;
  1173. }
  1174. }
  1175. }
  1176.  
  1177. /*--- for mobile devices ---*/
  1178.  
  1179. @media only screen and (max-width: 720px) {
  1180. main, section {width: 80vw;}
  1181. }
  1182.  
  1183. /*---- END OF MEDIA QUERIES -----*/
  1184.  
  1185. {CustomCSS}
  1186.  
  1187. </style>
  1188. </head>
  1189.  
  1190. <!----- HTML ----->
  1191.  
  1192. <body>
  1193.  
  1194. <script>
  1195. document.body.classList.add('fade-out');
  1196. window.addEventListener('DOMContentLoaded', () => {
  1197. document.body.classList.remove('fade-out');
  1198. });
  1199. </script>
  1200.  
  1201.  
  1202. <!-- main = main container -->
  1203.  
  1204. <main>
  1205.  
  1206. <!---- MENU ---->
  1207.  
  1208. <div class="sidebar">
  1209. <div class="logo-details">
  1210. <div class="logo_name">{Title}</div>
  1211. <i class="ph ph-list" id="btn" style="font-size:20px"></i>
  1212. </div>
  1213. <ul class="nav-list">
  1214. <li>
  1215. <i class='bx bx-search' ></i>
  1216. <form class="search" action="javascript:return false">
  1217. <input type="text" class="query" placeholder="Search...">
  1218. </form>
  1219.  
  1220.  
  1221. </li>
  1222. <li>
  1223. <a href="/">
  1224. <i class='bx bx-grid-alt'></i>
  1225. <span class="links_name">{text:Home}</span>
  1226. </a>
  1227. <span class="tooltip">{text:Home}</span>
  1228. </li>
  1229.  
  1230. <li>
  1231. <a href="/ask">
  1232. <i class='bx bx-chat' ></i>
  1233. <span class="links_name">{text:Messages}</span>
  1234. </a>
  1235. <span class="tooltip">{text:Messages}</span>
  1236. </li>
  1237.  
  1238.  
  1239. <li>
  1240. <a href="{text:Menu Link 1 URL}">
  1241. <i class='bx bx-navigation'></i>
  1242. <span class="links_name">{text:Menu Link 1 Title}</span>
  1243. </a>
  1244. <span class="tooltip">{text:Menu Link 1 Title}</span>
  1245. </li>
  1246.  
  1247. <li>
  1248. <a href="{text:Menu Link 2 URL}">
  1249. <i class='bx bx-edit' ></i>
  1250. <span class="links_name">{text:Menu Link 2 Title}</span>
  1251. </a>
  1252. <span class="tooltip">{text:Menu Link 2 Title}</span>
  1253. </li>
  1254.  
  1255. <li>
  1256. <a href="{text:Menu Link 3 URL}">
  1257. <i class='bx bx-heart' ></i>
  1258. <span class="links_name">{text:Menu Link 3 Title}</span>
  1259. </a>
  1260. <span class="tooltip">{text:Menu Link 3 Title}</span>
  1261. </li>
  1262.  
  1263. <li>
  1264. <a href="{text:Menu Link 4 URL}">
  1265. <i class='bx bx-star' ></i>
  1266. <span class="links_name">{text:Menu Link 4 Title}</span>
  1267. </a>
  1268. <span class="tooltip">{text:Menu Link 4 Title}</span>
  1269. </li>
  1270.  
  1271. <li>
  1272. <a href="{text:About Pop Up}">
  1273. <i class='bx bx-user' ></i>
  1274. <span class="links_name">About</span>
  1275. </a>
  1276. <span class="tooltip">About</span>
  1277. </li>
  1278.  
  1279. <li class="profile">
  1280. <div class="profile-details">
  1281. <img src="{PortraitURL-128}">
  1282. <div class="name_pronouns">
  1283. <div class="name">{text:Name}</div>
  1284. <div class="pronouns">{text:Pronouns}</div>
  1285. </div>
  1286. </div>
  1287. <a href="https://tumblr.com/dashboard"><i class='bx bx-log-out' id="log_out" ></i></a>
  1288. </li>
  1289. </ul>
  1290. </div>
  1291.  
  1292. <!---- ABOUT POP UP ----->
  1293. <div id="pop"> <div class="fade"></div>
  1294. <div class="popup">
  1295.  
  1296. <div class="about-header">
  1297. <img src="{image:aboutheader}">
  1298. <div class="about-icon">
  1299. <img src="{image:abouticon}">
  1300. </div>
  1301.  
  1302. <div class="basic-info">
  1303. name here.
  1304.  
  1305. <div class="basic-info-sub">
  1306. age, pronouns
  1307. </div>
  1308. </div>
  1309.  
  1310. </div>
  1311.  
  1312.  
  1313. <div class="about-text">
  1314.  
  1315. <div class="about-title">about me. </div>
  1316.  
  1317. <u>basic info here. you can write your name, your age, your pronouns, nationality, whatever the hell you want.</u>
  1318.  
  1319. <p>
  1320.  
  1321. you can write your about here. whatever info you want, as long as you want. you can create <a href="">links</a>, <b>bold text</b>, <i>make it italic</i>.
  1322.  
  1323. <li>you can make a list.</li>
  1324. <li>another item to that list.</li>
  1325.  
  1326. <p>
  1327.  
  1328.  
  1329.  
  1330.  
  1331. </div>
  1332.  
  1333.  
  1334. <div class="socials">
  1335.  
  1336. <a href="https://twitter.com/" title="twitter"><i class="ph ph-twitter-logo"></i></a>
  1337.  
  1338. <a href="https://open.spotify.com/user/" title="spotify"><i class="ph ph-spotify-logo"></i></a>
  1339.  
  1340. <a href="https://discord.com/users/" title="discord"><i class="ph ph-discord-logo"></i></a>
  1341.  
  1342. <a href="https://archiveofourown.org/users/" title="ao3"><i class="ph ph-bookmark-simple"></i></a>
  1343.  
  1344. <a href="https://letterboxd.com/" title="letterboxd"><i class="ph ph-dots-three-outline"></i></a>
  1345.  
  1346. <a href="https://pinterest.com/" title="pinterest"><i class="ph ph-pinterest-logo"></i></a>
  1347.  
  1348.  
  1349.  
  1350.  
  1351. </div>
  1352.  
  1353.  
  1354. </div>
  1355. </div>
  1356.  
  1357. <!----- END ABOUT POP UP CODE--->
  1358.  
  1359. <!----- SIDEBAR ----->
  1360.  
  1361. <aside id="sidebar">
  1362.  
  1363.  
  1364.  
  1365. {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img" alt="Sidebar image"/></a>{/block:ifSidebarImage}
  1366.  
  1367. <div class="sidebar-icon"><img src="{image:Sidebar Icon}"></div>
  1368.  
  1369. <div class="title"><a href="/">{Title}</a></div>
  1370. <div class="subtitle"><a href="https://tumblr.com/follow/{name}">+@{name}</a></div>
  1371.  
  1372. {block:Description}
  1373. <div id="description">{text:Desktop Description}</div>
  1374. {/block:Description}
  1375.  
  1376. <nav>
  1377. {block:ifHomeLink}<a href="/">{text:Home Link}</a>{/block:ifHomeLink}
  1378. {block:AskEnabled}{block:ifAskLink}<a href="/ask">{text:Ask Link}</a>{/block:ifAskLink}{/block:AskEnabled}
  1379. {block:ifArchiveLink}<a href="/archive">{text:Archive Link}</a>{/block:ifArchiveLink}
  1380. {block:SubmissionsEnabled}{block:ifSubmitLink}<a href="/submit">{text:Submit Link}</a>{/block:ifSubmitLink}{/block:SubmissionsEnabled}
  1381. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  1382. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  1383. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  1384. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  1385. </nav>
  1386.  
  1387.  
  1388. </aside>
  1389.  
  1390. <!----- TAG AND DAY PAGES ----->
  1391.  
  1392. <!-- section = post container -->
  1393.  
  1394. <section>
  1395.  
  1396. {block:TagPage}
  1397. <article>
  1398. Viewing posts filed under #{Tag}
  1399. </article>
  1400. {/block:TagPage}
  1401.  
  1402. {block:DayPage}
  1403. <article>
  1404. Viewing posts made on {Month} {DayOfMonth}, {Year}
  1405. </article>
  1406. {/block:DayPage}
  1407.  
  1408. <!----- POSTS ----->
  1409.  
  1410. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1411. <article class="posts" id="{PostID}" post-type="{PostType}">
  1412.  
  1413. {block:Text}
  1414. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1415. {block:NotReblog}
  1416. <li class="caption text-caption">
  1417. {Body}
  1418. </li>
  1419. {/block:NotReblog}
  1420. {block:RebloggedFrom}
  1421. {block:Reblogs}
  1422. <li class="caption text-caption source-head">
  1423. <img src="{PortraitURL-64}" class="user-icon">
  1424. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1425. {Body}
  1426. </li>
  1427. {/block:Reblogs}
  1428. {/block:RebloggedFrom}
  1429. {/block:Text}
  1430.  
  1431. {block:Link}
  1432. <a href="{URL}" class="link-wrap">
  1433. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  1434. <div class="link">
  1435. <div class="title">{Name}</div>
  1436. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1437. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  1438. </div>
  1439. </a>
  1440. {block:Description}
  1441. {block:NotReblog}
  1442. <li class="caption">
  1443. {Description}
  1444. </li>
  1445. {/block:NotReblog}
  1446. {/block:Description}
  1447. {block:RebloggedFrom}
  1448. {block:Reblogs}
  1449. <li class="caption">
  1450. <img src="{PortraitURL-64}" class="user-icon">
  1451. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1452. {Body}
  1453. </li>
  1454. {/block:Reblogs}
  1455. {/block:RebloggedFrom}
  1456. {/block:Link}
  1457.  
  1458. {block:Photo}
  1459. <div class="photo">
  1460. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  1461. </div>
  1462. {block:Caption}
  1463. {block:NotReblog}
  1464. <li class="caption">
  1465. {Caption}
  1466. </li>
  1467. {/block:NotReblog}
  1468. {block:RebloggedFrom}
  1469. {block:Reblogs}
  1470. <li class="caption">
  1471. <img src="{PortraitURL-64}" class="user-icon">
  1472. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1473. {Body}
  1474. </li>
  1475. {/block:Reblogs}
  1476. {/block:RebloggedFrom}
  1477. {/block:Caption}
  1478. {/block:Photo}
  1479.  
  1480. {block:Photoset}
  1481. <div class="photo">{Photoset-700}</div>
  1482. {block:Caption}
  1483. {block:NotReblog}
  1484. <li class="caption">
  1485. {Caption}
  1486. </li>
  1487. {/block:NotReblog}
  1488. {block:RebloggedFrom}
  1489. {block:Reblogs}
  1490. <li class="caption">
  1491. <img src="{PortraitURL-64}" class="user-icon">
  1492. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1493. {Body}
  1494. </li>
  1495. {/block:Reblogs}
  1496. {/block:RebloggedFrom}
  1497. {/block:Caption}
  1498. {/block:Photoset}
  1499.  
  1500. {block:Video}
  1501. <div class="video">{Video-500}</div>
  1502. {block:Caption}
  1503. {block:NotReblog}
  1504. <li class="caption">
  1505. {Caption}
  1506. </li>
  1507. {/block:NotReblog}
  1508. {block:RebloggedFrom}
  1509. {block:Reblogs}
  1510. <li class="caption">
  1511. <img src="{PortraitURL-64}" class="user-icon">
  1512. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1513. {Body}
  1514. </li>
  1515. {/block:Reblogs}
  1516. {/block:RebloggedFrom}
  1517. {/block:Caption}
  1518. {/block:Video}
  1519.  
  1520. {block:Quote}
  1521. <div class="quote">{Quote}</div>
  1522. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1523. {/block:Quote}
  1524.  
  1525. {block:Chat}
  1526. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1527. <ul class="chat">{block:Lines}
  1528. <li>
  1529. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1530. {Line}
  1531. </li>
  1532. {/block:Lines}</ul>
  1533. {/block:Chat}
  1534.  
  1535. {block:Answer}
  1536. <div class="ask-wrap">
  1537. <img src="{AskerPortraitURL-64}" class="ask-icon">
  1538. ({12HourWithZero}:{Minutes}{AmPm})
  1539. <div class="asking">{Asker}</div>
  1540. <div class="question">{Question}</div>
  1541. </div>
  1542. {block:Answerer}
  1543. <li class="caption">
  1544. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1545. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1546. {Answer}
  1547. </li>
  1548. {/block:Answerer}
  1549. {block:NotReblog}
  1550. <li class="caption">
  1551. {Replies}
  1552. </li>
  1553. {/block:NotReblog}
  1554. {block:RebloggedFrom}
  1555. {block:Reblogs}
  1556. <li class="caption">
  1557. <img src="{PortraitURL-64}" class="user-icon">
  1558. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1559. {Body}
  1560. </li>
  1561. {/block:Reblogs}
  1562. {/block:RebloggedFrom}
  1563. {/block:Answer}
  1564.  
  1565. {block:Audio}
  1566. <div class="audiopost">
  1567. <div class="audiobox">
  1568. <div class="button">
  1569. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1570. </div>
  1571. </div>
  1572. {block:AlbumArt}
  1573. <img src="{AlbumArtURL}" class="album-art">
  1574. {/block:AlbumArt}
  1575. <div class="audioinfo">
  1576. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1577. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1578. {block:Album}<li>{Album}</li>{/block:Album}
  1579. </div>
  1580. </div>
  1581. {block:Caption}
  1582. {block:NotReblog}
  1583. <li class="caption">
  1584. {Caption}
  1585. </li>
  1586. {/block:NotReblog}
  1587. {block:RebloggedFrom}
  1588. {block:Reblogs}
  1589. <li class="caption">
  1590. <img src="{PortraitURL-64}" class="user-icon">
  1591. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1592. {Body}
  1593. </li>
  1594. {/block:Reblogs}
  1595. {/block:RebloggedFrom}
  1596. {/block:Caption}
  1597. {/block:Audio}
  1598.  
  1599. <!----- INFO ----->
  1600.  
  1601. {block:Date}
  1602. <div class="info">
  1603. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post" title="{PinnedPostLabel}"><i class="ph-fill ph-push-pin"></i></a>{/block:PinnedPostLabel}
  1604. <a href="{Permalink}">{Month} {DayOfMonth}, {Year}</a>
  1605. {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  1606.  
  1607. <!-- reblog info and content source on permalink pages -->
  1608.  
  1609. {block:PermalinkPage}
  1610.  
  1611. {block:RebloggedFrom}
  1612. <a href="{ReblogParentURL}">via</a>
  1613. <a href="{ReblogRootURL}">originally</a>
  1614. {/block:RebloggedFrom}
  1615. {block:ContentSource}<a href="{SourceURL}">{lang:Source}</a>{/block:ContentSource}
  1616.  
  1617. {/block:PermalinkPage}
  1618.  
  1619. <!-- like and reblog buttons -->
  1620.  
  1621. <a href="{ReblogURL}" target="_blank" title="reblog this post">reblog</a>
  1622. <a class="likeb" href="#" title="like this post">{LikeButton}<span class="actual-button">like</span></a>
  1623.  
  1624. </div>
  1625. {/block:Date}
  1626.  
  1627. <!----- TAGS ----->
  1628.  
  1629. {block:HasTags}
  1630. <div class="tags">
  1631. {block:Tags}<a href="{TagURL}"><i class="ph-bold ph-hash-straight"></i> {Tag}</a>{/block:Tags}
  1632. </div>
  1633. {/block:HasTags}
  1634.  
  1635. <!----- POST NOTES ----->
  1636.  
  1637. {block:PermalinkPage}{block:Date}
  1638. {block:NoteCount}{block:PostNotes}
  1639. <div class="notes">
  1640. {PostNotes-64}
  1641. </div>
  1642. {/block:PostNotes}{/block:NoteCount}
  1643. {/block:Date}{/block:PermalinkPage}
  1644.  
  1645. </article>
  1646.  
  1647. <!--- TUMBLR CONTROLS -->
  1648.  
  1649.  
  1650. <div title="Tumblr Controls" class="controls-button"><i class="ph ph-gear" style="font-size:20px"></i></div>
  1651.  
  1652. {/block:Posts}
  1653.  
  1654. <!-- end of posts container -->
  1655.  
  1656. </section>
  1657.  
  1658. <!----- PAGINATION ----->
  1659.  
  1660. {block:Pagination}
  1661. <article id="page-navigation">
  1662. {block:PreviousPage}<a href="{PreviousPage}">previous page</a>{/block:PreviousPage}
  1663. {block:JumpPagination length="5"}
  1664. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1665. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1666. {/block:JumpPagination}
  1667. {block:NextPage}<a href="{NextPage}">next page</a>{/block:NextPage}
  1668. </article>
  1669. {/block:Pagination}
  1670.  
  1671. <!-- end of main container -->
  1672.  
  1673. </main>
  1674.  
  1675. <!----- CREDIT ----->
  1676.  
  1677. <a href="https://geminicodes.tumblr.com" title="code by bru" id="credit"><i class="ph-bold ph-moon"></i></a>
  1678.  
  1679. <!--- TUMBLR CONTROLS -->
  1680.  
  1681. <script src=“//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  1682.  
  1683. <script>
  1684. $('.controls-button').click(function(){
  1685. $('body').toggleClass('controls-click');
  1686. });
  1687. </script>
  1688.  
  1689. <!---- MENU --->
  1690.  
  1691. <script>
  1692. let sidebar = document.querySelector(".sidebar");
  1693. let closeBtn = document.querySelector("#btn");
  1694. let searchBtn = document.querySelector(".bx-search");
  1695.  
  1696. closeBtn.addEventListener("click", ()=>{
  1697. sidebar.classList.toggle("open");
  1698. menuBtnChange();//calling the function(optional)
  1699. });
  1700.  
  1701. searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
  1702. sidebar.classList.toggle("open");
  1703. menuBtnChange(); //calling the function(optional)
  1704. });
  1705.  
  1706. // following are the code to change sidebar button(optional)
  1707. function menuBtnChange() {
  1708. if(sidebar.classList.contains("open")){
  1709. closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
  1710. }else {
  1711. closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
  1712. }
  1713. }
  1714. </script>
  1715.  
  1716. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1717. <script>
  1718. $(document).ready(function(){
  1719. $('.search').submit(function(event){
  1720. var value = $('input:first').val();
  1721. location.replace('http://{Name}.tumblr.com/search/' + value);
  1722. });
  1723. });
  1724. </script>
  1725.  
  1726. <!-- masonry navigation -->
  1727. <script src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
  1728.  
  1729. <script type="text/javascript">
  1730. // masonry navigation
  1731. var elements = document.getElementsByClassName('masonry-navigation');
  1732. var msnry;
  1733. var nElements = elements.length;
  1734. for(var i = 0; i < nElements; i++){
  1735. msnry = new Masonry( elements[i], {
  1736. // columnWidth: 268,
  1737. gutter: 10,
  1738. itemSelector: '.masonry-navigation-item',
  1739. });
  1740. }
  1741. </script>
  1742.  
  1743. <!--- tooltips --->
  1744.  
  1745. <script src="https://unpkg.com/popper.js@1"></script>
  1746. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1747. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1748.  
  1749. <script>
  1750.  
  1751. tippy('a[title]', {
  1752. theme: 'gradient',
  1753. arrow: false,
  1754. zIndex: 9999999999,
  1755. maxWidth: 300,
  1756.  
  1757. content(reference) {
  1758. const title = reference.getAttribute('title');
  1759. reference.removeAttribute('title');
  1760. return title;
  1761. },
  1762. });
  1763.  
  1764.  
  1765. </script>
  1766.  
  1767.  
  1768. </body>
  1769. </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!