API tools faq
paste
Advertisement
userbru

theme twenty-one.

userbru
Jan 15th, 2022 (edited)
657
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.53 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 USERBRU
  15. base by seyche
  16. tumblr controls cyantists
  17. icons from font-awesome and cappuccicons
  18. tooltips by tippy
  19. NPF fix by glenthemes
  20.  
  21. --->
  22.  
  23. <!---- scripts ---->
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  25. <link rel="stylesheet" href=
  26. "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
  27. </link>
  28. <script src="//pull.cappuccicons.com/cpf.js"></script>
  29.  
  30. <link rel="preconnect" href="https://fonts.googleapis.com">
  31. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  32. <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro&family=Roboto&family=Rubik&display=swap" rel="stylesheet">
  33.  
  34. <script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
  35.  
  36.  
  37. <script src="https://unpkg.com/feather-icons"></script>
  38.  
  39. <!----- VARIABLES AND OPTIONS ----->
  40.  
  41. <meta name="image:Sidebar" content=""/>
  42.  
  43.  
  44. <meta name="color:background" content="#282828"/>
  45. <meta name="color:content background" content="#3f3f3f"/>
  46. <meta name="color:posts background" content="#3f3f3f"/>
  47. <meta name="color:text" content="#ffcdcd"/>
  48. <meta name="color:link" content="#c3ee79"/>
  49. <meta name="color:accent" content="#ffafaf"/>
  50. <meta name="color:feather icons" content="#ffafaf"/>
  51. <meta name="color:borders" content="#363636"/>
  52. <meta name="color:askbg" content="#363636"/>
  53. <meta name="color:info" content="#ed9696"/>
  54. <meta name="color:Subtitle" content="#ffafaf"/>
  55. <meta name="color:text shadow" content="#282828"/>
  56. <meta name="color:selected text" content="#000"/>
  57. <meta name="color:selected text bg" content="#ffafaf" />
  58. <meta name="color:gradient 1 tooltips" content="#fb7f7f"/>
  59. <meta name="color:gradient 2 tooltips" content="#ffafaf"/>
  60. <meta name="color:tooltips text" content="#000"/>
  61. <meta name="color:topbar background" content="#282828"/>
  62. <meta name="color:nav links" content="#c3ee79"/>
  63. <meta name="color:nav links hover" content="#fb7f7f"/>
  64. <meta name="color:Scrollbar Background" content="#282828"/>
  65. <meta name="color:Scrollbar Light Border" content="#c3ee79"/>
  66. <meta name="color:Scrollbar Dark Border" content="#fb7f7f"/>
  67.  
  68.  
  69. <meta name="text:Post Margin" content="150"/>
  70. <meta name="text:Desktop Description" content="Write here your desktop description"/>
  71. <meta name="text:Subtitle" content="Write a subtitle here"/>
  72.  
  73. <meta name="text:link 1 title" content="link"/>
  74. <meta name="text:link 1 url" content=""/>
  75. <meta name="text:link 2 title" content="link"/>
  76. <meta name="text:link 2 url" content=""/>
  77. <meta name="text:link 3 title" content="link"/>
  78. <meta name="text:link 3 url" content=""/>
  79. <meta name="text:link 4 title" content="link"/>
  80. <meta name="text:link 4 url" content=""/>
  81. <meta name="text:link 5 title" content="link"/>
  82. <meta name="text:link 5 url" content=""/>
  83. <meta name="text:link 6 title" content="link"/>
  84. <meta name="text:link 6 url" content=""/>
  85.  
  86.  
  87.  
  88. <!--- NPF FIX --->
  89. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  90.  
  91. <!--
  92. NPF images fix v3.0 by @glenthemes [2021]
  93. 💌 git.io/JRBt7
  94. --->
  95. <script src="//npf-images-v3.github.io/script.js"></script>
  96. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  97. <style tmblr-npf>
  98. :root {
  99. --NPF-Caption-Spacing:1em;
  100. --NPF-Image-Spacing:4px;
  101. }
  102. </style>
  103.  
  104. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  105.  
  106.  
  107. <!--- THIS WILL REDIRECT TO THE CUSTOM ASK PAGE, just remove it if you don't want it --->
  108.  
  109. <script type="text/javascript">
  110. if(location.href=='https://{name}.tumblr.com/ask') location.replace('https://{name}.tumblr.com/msg');;
  111. </script>
  112.  
  113. <!----- CSS ----->
  114.  
  115. <style type="text/css">
  116.  
  117.  
  118. /* TOOLTIPS */
  119. .tippy-tooltip.gradient-theme {
  120. background-image:linear-gradient(to right, {color:gradient 1 tooltips}, {color:gradient 2 tooltips});
  121. color:{color:tooltips text};
  122. text-align:center;
  123. font-family:'Roboto', sans-serif;
  124. font-weight:700;
  125. text-transform:uppercase;
  126. letter-spacing:1px;
  127. font-size:0.90em;
  128. box-shadow: 7px 7px 7px -9px rgba(000,000,000, 0.45);}
  129.  
  130. .tippy-tooltip.gradient-theme .tippy-svg-arrow {
  131. fill:var(--text);}
  132. /*TUMBLR CONTROLS*/
  133.  
  134.  
  135. /*---- scrollbar ----*/
  136. ::-webkit-scrollbar {
  137. width:17px;
  138. height:17px;
  139. }
  140. ::-webkit-scrollbar {
  141. background-color:{color:Scrollbar Background}; /* background color */
  142. }
  143. ::-webkit-scrollbar-track {
  144. border:8px solid {color:Scrollbar Background}; /* background color */
  145. background-color:{color:Scrollbar Light Border}; /* light border color */
  146. }
  147. ::-webkit-scrollbar-thumb {
  148. border:8px solid {color:Scrollbar Background}; /* background color */
  149. background-color:{color:Scrollbar Dark Border}; /* dark border color */
  150. min-height:24px;
  151. min-width:24px;
  152. }
  153.  
  154.  
  155. /*----- BASIC STYLING -----*/
  156.  
  157.  
  158. body {
  159. font-family: 'Be Vietnam Pro', sans-serif;
  160. font-size:12.5px;
  161. font-style:lowercase;
  162. color: {color:text};
  163. background-color: {color:background};
  164. line-height: 160%;
  165. word-wrap: break-word;
  166. letter-spacing: 0.04em;
  167. margin: 0;
  168. padding: 0;
  169. opacity: 1;
  170. transition: 1s opacity;
  171. }
  172.  
  173. body.fade-out {
  174. opacity: 0;
  175. transition: none;
  176. }
  177.  
  178. html {
  179. background-color: {color:background};
  180. }
  181.  
  182. ::selection {
  183. color: {color:selected text};
  184. background: {color:selected text bg};
  185. }
  186.  
  187. a {
  188. position: relative;
  189. color: {color:link};
  190. text-decoration: none;
  191. font-family:'Roboto', sans-serif;
  192. font-weight:600;
  193. }
  194.  
  195. a:hover {
  196. color: {color:accent};
  197. }
  198.  
  199. blockquote {
  200. padding: 0 0 0 1.5em;
  201. border-left: 1px solid {color:borders};
  202. margin: 1.5em 0 1.5em 1.5em;
  203. }
  204.  
  205. h1, h2, h3, h4, h5, .title {
  206. letter-spacing: 0.06em;
  207. line-height: 145%;
  208. font-weight: bold;
  209. }
  210.  
  211. h1, .title {font-size: 1.5em;}
  212. h2 {font-size: 1.3em;}
  213. h3 {font-size: 1.25em;}
  214. h4 {font-size: 1.1em;}
  215. h5 {font-size: 1em;}
  216.  
  217. small {font-size: 0.9em;}
  218. big {font-size: 1.1em;}
  219.  
  220. hr {
  221. height: 1px;
  222. border: none;
  223. box-shadow: none;
  224. background-color: {color:borders};
  225. }
  226.  
  227. pre {
  228. line-height: inherit;
  229. font-size: inherit;
  230. white-space: pre-wrap;
  231. white-space: -moz-pre-wrap;
  232. white-space: -pre-wrap;
  233. white-space: -o-pre-wrap;
  234. word-wrap: break-word;
  235. }
  236.  
  237. /* ----- TUMBLR CONTROLS ---- */
  238.  
  239. iframe.tmblr-iframe {
  240. z-index:99999999999999!important;
  241. top: 15px!important;
  242. right: 15px!important;
  243. opacity:0;
  244. padding-right:38px;
  245. -webkit-transform:scale(0.75);
  246. -ms-transform:scale(0.75);
  247. transform:scale(0.75);
  248. -webkit-transform-origin:100% 0;
  249. -ms-transform-origin:100% 0;
  250. transform-origin:100% 0;
  251.  
  252. cursor: pointer;
  253. }
  254. iframe.tmblr-iframe:hover {
  255. opacity:1!important;
  256. }
  257. .controls {
  258. position:fixed;
  259. top:23px;
  260. right:15px;
  261. z-index:999999999;
  262. cursor: pointer;
  263. }
  264.  
  265.  
  266. .controls:hover {
  267. stroke: var(--bodyLinkHoverColor);
  268. }
  269.  
  270.  
  271. /* --- FEATHERICONS ----*/
  272.  
  273. .feather {
  274. width:11px;
  275. vertical-align:middle;
  276. color:{color:feather icons};
  277. }
  278.  
  279. /*----------HEADER---------*/
  280.  
  281.  
  282. .topbar {
  283. width:100%;
  284. height:auto;
  285. background-color:{color:topbar background};
  286. margin-top:-5px;
  287. overflow:hidden;
  288. display:inline-block;
  289. top:0;
  290. position:sticky;
  291. position:-webkit-sticky;
  292. border-bottom:1px solid {color:borders};
  293. z-index:999999;
  294.  
  295.  
  296.  
  297. }
  298.  
  299.  
  300. .navlinks {
  301. text-align:left;
  302. width:justify;
  303. padding:30px;
  304. text-transform:uppercase;
  305. font-size:15px;
  306. margin-left:40px;
  307. font-weight:bold;
  308.  
  309. }
  310.  
  311. .navlinks a {
  312. color:{color:nav links};
  313. margin-right:20px;
  314. }
  315.  
  316. .navlinks a:hover {
  317. color:{color:nav links hover};
  318. width:50px;
  319. height:100px;
  320. font-style:italic;
  321. }
  322.  
  323.  
  324.  
  325. /*----- SIDEBAR -----*/
  326.  
  327. #sidebar {
  328. width: 350px;
  329. margin-left:0px;
  330. position:fixed;
  331. margin-top:10px;
  332. top: {text:post margin}px;
  333. border-radius:5px;
  334. padding:10px;
  335. }
  336.  
  337.  
  338.  
  339. {block:ifSidebarImage}
  340.  
  341. #side-img {
  342. margin-bottom: 1.5em;
  343. border-radius:2%;
  344. width:300px;
  345. height:auto;
  346. }
  347. {/block:ifSidebarImage}
  348.  
  349. #description {
  350. margin-top:1.25em;
  351. font-size:12px;
  352. font-family: 'Be Vietnam Pro', sans-serif;
  353. text-align:center;
  354. text-shadow: 1px 1px 1px {color:text shadow};
  355.  
  356. }
  357.  
  358. .search .query {
  359. color:{color:text};
  360. width:290px;
  361. font-family:'Poppins';
  362. background-color:transparent;
  363. text-align:center;
  364. font-size:10px;
  365. border:0px;
  366. margin-top:20px;
  367. outline:none;
  368. }
  369.  
  370. nav {
  371. margin-top: 1.25em;
  372. border-width:0.1em;
  373. border-style:dashed;
  374. border-radius:3px;
  375. padding:10px;
  376. border-color:{color:navborder};
  377.  
  378. }
  379. nav a {margin: auto 0.5em;}
  380.  
  381. .title {
  382.  
  383. font-family: 'Rubik', sans-serif;
  384. font-size:20px;
  385. font-weight:700;
  386. margin-top:0px;
  387. letter-spacing:1px;
  388. text-align:center;
  389.  
  390. }
  391.  
  392. .title a:hover{
  393. font-style:italic;
  394. }
  395.  
  396. .subtitle {
  397. text-align:center;
  398. font-style:normal;
  399. color:{color:Subtitle};
  400. font-family: 'Poppins', sans-serif;
  401. font-weight:400;
  402. font-size:10px;
  403. margin-bottom:10px;
  404. text-shadow: 1px 1px 1px {color:text shadow};
  405. }
  406.  
  407. .subtitle a:hover{
  408. font-style:italic;
  409. }
  410.  
  411.  
  412. .cat {
  413. padding:30px;
  414. border:1px solid {color:Borders};
  415. margin-bottom:50px;
  416. background:white;
  417. border-radius: 15px 50px 30px;
  418. box-shadow:5px 5px gray;
  419. background:{color:posts background};
  420. }
  421.  
  422.  
  423. /*----- POSTS -----*/
  424.  
  425.  
  426. .container {
  427. width:1100px;
  428. margin-left:calc(50% - 550px);
  429. padding:10px;
  430. height:auto;
  431. margin-top:40px;
  432. border-radius:5px;
  433.  
  434. }
  435.  
  436. main {
  437. position: relative;
  438. width: calc(300px + {select:post width} + 150px);
  439. margin: auto;
  440. }
  441.  
  442. section {
  443. position: relative;
  444. width: {select:post width};
  445. margin-top:120px;
  446. margin-left: 400px;
  447. }
  448.  
  449. article {
  450. width: 100%;
  451. position: relative;
  452. margin: {text:post margin}px auto;
  453. }
  454.  
  455. .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%;}
  456.  
  457.  
  458. .posts {
  459. background:{color:posts background};
  460. border:1px solid {color:borders};
  461. border-radius:5px;
  462. width:560px;
  463. padding:20px;
  464. margin-top:-80px;
  465. margin-left:70px;
  466. padding:30px;
  467. border-radius: 15px 50px 30px;
  468. box-shadow:5px 5px gray;
  469. }
  470.  
  471. /*----- CAPTIONS -----*/
  472.  
  473. .caption {margin-top: 2em; list-style-type: none;}
  474. .text-caption:first-of-type {margin-top: 0;}
  475.  
  476. .user-icon, .ask-icon {
  477. display: inline-block;
  478. vertical-align: middle;
  479. width: 2em;
  480. height: 2em;
  481. margin-right: 1em;
  482. border-radius:100%;
  483. }
  484.  
  485. .username {
  486. display: inline-block;
  487. vertical-align: middle;
  488. font-family:'Roboto', sans-serif;
  489. font-weight: 700;
  490. text-transform:uppercase;
  491. }
  492.  
  493. .deactive::after {
  494. content: '(deactivated)';
  495. margin-left: 1em;
  496. opacity: 0.75;
  497. color: {color:text};
  498. }
  499.  
  500. p.tmblr-attribution {margin-top: 1em !important;}
  501.  
  502. /*----- TEXT -----*/
  503.  
  504. h1.post-title {margin-top: 0;}
  505.  
  506. /*----- LINK -----*/
  507.  
  508. a.link-wrap {display: block; border: 1px solid {color:borders};}
  509. .link {padding: 2em;}
  510. .link-host, .link-txt {margin-top: 1.5em;}
  511.  
  512. .npf-link-block {
  513. margin-top: 1.5em;
  514. background-color: inherit;
  515. border: 1px solid inherit;
  516. color: inherit;
  517. }
  518.  
  519. /*----- PHOTO -----*/
  520.  
  521. img {
  522. margin: 0;
  523. display: block;
  524. height: auto;
  525. max-width: 100%;
  526. }
  527.  
  528. .photo img {width: 100%;}
  529. .vignette, #vignette {opacity: 0;}
  530. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  531.  
  532. .lightbox-image, #tumblr_lightbox img {
  533. box-shadow: none !important;
  534. border-radius: 0 !important;
  535. max-width: none;
  536. }
  537.  
  538. #tumblr_lightbox_caption, .lightbox-caption {
  539. color: #fff !important;
  540. font-family: inherit;
  541. margin-top: 1em !important;
  542. }
  543.  
  544. /*----- PHOTOSET -----*/
  545.  
  546. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  547. margin-left: 0 !important;
  548. margin-right: 0 !important;
  549. }
  550.  
  551. /*----- QUOTE -----*/
  552.  
  553. .quote {line-height: 160%; font-size: 1.25em;}
  554.  
  555. .quote p:first-of-type {margin-top: 0;}
  556. .quote p:last-of-type {margin-bottom: 0;}
  557.  
  558. .source {margin-top: 1.5em;}
  559.  
  560. /*----- CHAT -----*/
  561.  
  562. .chat {padding: 0; margin: 0;}
  563. .chat li {list-style-type: none; margin-top: 1em;}
  564. .chat li:first-of-type {margin-top: 0;}
  565. .chatter {font-weight: bold;}
  566.  
  567. p.npf_chat, p.npf_chat b {font-family: inherit;}
  568.  
  569. /*----- ANSWER -----*/
  570.  
  571.  
  572.  
  573. .askerbg {
  574.  
  575. padding: 0px;
  576. border-radius: 100px;
  577.  
  578. }
  579.  
  580. .askerbg img {
  581.  
  582. border-radius:100px!important;
  583.  
  584. }
  585.  
  586.  
  587.  
  588. .question {
  589.  
  590. width: auto;
  591. font-family:'Poppins';
  592. margin-top: 10px;
  593. margin-bottom:20px;
  594. color:{color:text};
  595. padding: 10px;
  596. border-radius: 7px;
  597. background:{color:askbg};
  598.  
  599. }
  600.  
  601.  
  602.  
  603. /*----- AUDIO -----*/
  604.  
  605. .audiopost {padding: 2em; border: 1px solid {color:borders};}
  606.  
  607. .album-art {
  608. z-index: 1;
  609. display: inline-block;
  610. vertical-align: middle;
  611. float: left;
  612. width: 100px;
  613. height: 100px;
  614. }
  615.  
  616. .audio-player-wrap {
  617. width: 100px;
  618. height: 100px;
  619. display: inline-block;
  620. }
  621.  
  622. .button {
  623. width: 30px;
  624. height: 30px;
  625. overflow: hidden;
  626. position: relative;
  627. z-index: 2;
  628. margin: 7px;
  629. }
  630.  
  631. .audiobox {
  632. background-color: #f2f2f2;
  633. z-index: 3;
  634. position: absolute;
  635. margin: 28px 0 0 28px;
  636. border-radius: 50%;
  637. }
  638.  
  639. .audioinfo {
  640. display: inline-block;
  641. height: 100px;
  642. max-width: calc(100% - 100px);
  643. margin-left: 100px;
  644. display: flex;
  645. justify-content: center;
  646. flex-direction: column;
  647. box-sizing: border-box;
  648. padding-left: 2em;
  649. }
  650.  
  651. .audioinfo li {list-style-type: none;}
  652. .track {font-weight: bold;}
  653.  
  654. /*----- INFO -----*/
  655.  
  656. .info {margin-top: 2em;}
  657. .info a {display: inline-block; vertical-align: middle;}
  658.  
  659. .likeb {
  660. position: relative;
  661. display: inline-block;
  662. height: 1.6em;
  663. margin-bottom: -1px;
  664. }
  665.  
  666. .likeb .like_button iframe {
  667. position: absolute;
  668. top: 0;
  669. left: 0;
  670. bottom: 0;
  671. right: 0;
  672. z-index: 2;
  673. opacity: 0;
  674. }
  675.  
  676. .like_button iframe {width: 100% !important; height: 100% !important;}
  677. .likeb .liked + .actual-button {color: red;}
  678. .likeb .liked + .actual-button:after {content: '';}
  679.  
  680. .info a {
  681.  
  682.  
  683. margin-right: 0.75em;
  684. font-family:'Poppins';
  685. font-style:bold;
  686. color:{color:info};
  687.  
  688. }
  689.  
  690. .tags {
  691. margin-right: 0.75em;
  692. font-size:12px;
  693. font-family: 'Be Vietnam Pro', sans-serif;
  694. text-transform:lowercase;
  695. color:{color:text};
  696. word-wrap:break-word;
  697. }
  698.  
  699. a.pinned-post {font-weight: bold; color: {color:accent};}
  700.  
  701. /*---- POST NOTES -----*/
  702.  
  703. .notes {margin: {text:post margin}px 0;}
  704.  
  705. ol.notes {
  706. max-width: 100%;
  707. padding: 0;
  708. margin: 2em 0 0 0;
  709. }
  710.  
  711. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  712.  
  713. ol.notes li.note img.avatar {
  714. margin-right: 1em;
  715. vertical-align: middle;
  716. display: inline-block;
  717. width: 1.25em;
  718. height: 1.25em;
  719. }
  720.  
  721. /*---- PAGINATION -----*/
  722.  
  723. #page-navigation {text-align: center;}
  724. #page-navigation a, .current-page {margin: 0 0.5em;}
  725. .current-page {font-weight: bold; color: {color:accent};}
  726.  
  727. /*---- CREDIT -----*/
  728.  
  729. #credit {
  730. position: fixed;
  731. bottom: 20px;
  732. right: 20px;
  733. font-size: 10px;
  734. }
  735.  
  736.  
  737. /*----
  738.  
  739. MEDIA QUERIES AND RESPONSIVENESS:
  740.  
  741. 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.
  742.  
  743. -----*/
  744.  
  745. /*--- for small desktop/tablet screens. converts sidebar to header ---*/
  746.  
  747. @media only screen and (max-width: 1100px) {
  748. main {width: {select:post width};}
  749.  
  750. #sidebar {
  751. position: relative;
  752. margin: {text:post margin}px auto;
  753. width: 100%;
  754. top: auto;
  755. }
  756.  
  757. section {margin-left: 0;}
  758. }
  759.  
  760. /*--- for mobile devices ---*/
  761.  
  762. @media only screen and (max-width: 720px) {
  763. main, section {width: 80vw;}
  764. }
  765.  
  766. /*---- END OF MEDIA QUERIES -----*/
  767.  
  768. {CustomCSS}
  769.  
  770. </style>
  771.  
  772. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
  773. $(document).ready(function(){
  774. $('.click,.fade').click(function() {
  775. $('#pop').fadeToggle();
  776. });
  777. });
  778. </script>
  779.  
  780. </head>
  781.  
  782. <!----- HTML ----->
  783.  
  784. <body>
  785.  
  786. <script>
  787. document.body.classList.add('fade-out');
  788. window.addEventListener('DOMContentLoaded', () => {
  789. document.body.classList.remove('fade-out');
  790. });
  791. </script>
  792.  
  793. <div class="topbar">
  794.  
  795. <div class="navlinks">
  796. <a href="/" title="home"><i class="cp cp-rocket"></i></a>
  797. <a href="/ask" title="message"><i class="cp cp-chat"></i></a>
  798. <a href="{text:link 1 url}" title="{text:Link 1 title}"><i class="cp cp-planet"></i></a>
  799. <a href="{text:link 2 url}" title="{text:Link 2 Title}"><i class="cp cp-folder"></i></a>
  800. <a href="{text:link 3 url}" title="{text:Link 3 Title}"><i class="cp cp-cc"></i></a>
  801. <a href="{text:link 4 url}" title="{text:Link 4 Title}"><i class="cp cp-code"></i></a>
  802. <a href="{text:link 5 url}" title="{text:Link 5 Title}"><i class="cp cp-coffee-cup"></i></a>
  803. </div>
  804.  
  805.  
  806. </div>
  807.  
  808.  
  809. <!-- main = main container -->
  810.  
  811. <main>
  812.  
  813. <div class="container">
  814.  
  815.  
  816. <!----- SIDEBAR ----->
  817. <aside id="sidebar">
  818.  
  819. <div class="cat">
  820. {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img" alt="Sidebar image"/></a>{/block:ifSidebarImage}
  821.  
  822. <div class="title"><a href="/">{Title}</a></div>
  823. <div class="subtitle">{text:Subtitle}</a></div>
  824.  
  825. {block:Description}<div id="description">{text:Desktop Description}</div>{/block:Description}
  826.  
  827. <form class="search" action="javascript:return false">
  828. <input type="text" class="query" placeholder="search this blog...">
  829. </form>
  830. </div>
  831.  
  832.  
  833.  
  834.  
  835. </aside>
  836. <!----- TAG AND DAY PAGES ----->
  837.  
  838. <!-- section = post container -->
  839.  
  840. <section>
  841.  
  842.  
  843.  
  844. <!----- POSTS ----->
  845.  
  846. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  847. <article class="posts" id="{PostID}" post-type="{PostType}">
  848.  
  849. {block:Text}
  850. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  851. {block:NotReblog}
  852. <li class="caption text-caption">
  853. {Body}
  854. </li>
  855. {/block:NotReblog}
  856. {block:RebloggedFrom}
  857. {block:Reblogs}
  858. <li class="caption text-caption source-head">
  859. <img src="{PortraitURL-64}" class="user-icon">
  860. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  861. {Body}
  862. </li>
  863. {/block:Reblogs}
  864. {/block:RebloggedFrom}
  865. {/block:Text}
  866.  
  867. {block:Link}
  868. <a href="{URL}" class="link-wrap">
  869. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  870. <div class="link">
  871. <div class="title">{Name}</div>
  872. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  873. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  874. </div>
  875. </a>
  876. {block:Description}
  877. {block:NotReblog}
  878. <li class="caption">
  879. {Description}
  880. </li>
  881. {/block:NotReblog}
  882. {/block:Description}
  883. {block:RebloggedFrom}
  884. {block:Reblogs}
  885. <li class="caption">
  886. <img src="{PortraitURL-64}" class="user-icon">
  887. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  888. {Body}
  889. </li>
  890. {/block:Reblogs}
  891. {/block:RebloggedFrom}
  892. {/block:Link}
  893.  
  894. {block:Photo}
  895. <div class="photo">
  896. {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}
  897. </div>
  898. {block:Caption}
  899. {block:NotReblog}
  900. <li class="caption">
  901. {Caption}
  902. </li>
  903. {/block:NotReblog}
  904. {block:RebloggedFrom}
  905. {block:Reblogs}
  906. <li class="caption">
  907. <img src="{PortraitURL-64}" class="user-icon">
  908. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  909. {Body}
  910. </li>
  911. {/block:Reblogs}
  912. {/block:RebloggedFrom}
  913. {/block:Caption}
  914. {/block:Photo}
  915.  
  916. {block:Photoset}
  917. <div class="photo">{Photoset-700}</div>
  918. {block:Caption}
  919. {block:NotReblog}
  920. <li class="caption">
  921. {Caption}
  922. </li>
  923. {/block:NotReblog}
  924. {block:RebloggedFrom}
  925. {block:Reblogs}
  926. <li class="caption">
  927. <img src="{PortraitURL-64}" class="user-icon">
  928. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  929. {Body}
  930. </li>
  931. {/block:Reblogs}
  932. {/block:RebloggedFrom}
  933. {/block:Caption}
  934. {/block:Photoset}
  935.  
  936. {block:Video}
  937. <div class="video">{Video-500}</div>
  938. {block:Caption}
  939. {block:NotReblog}
  940. <li class="caption">
  941. {Caption}
  942. </li>
  943. {/block:NotReblog}
  944. {block:RebloggedFrom}
  945. {block:Reblogs}
  946. <li class="caption">
  947. <img src="{PortraitURL-64}" class="user-icon">
  948. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  949. {Body}
  950. </li>
  951. {/block:Reblogs}
  952. {/block:RebloggedFrom}
  953. {/block:Caption}
  954. {/block:Video}
  955.  
  956. {block:Quote}
  957. <div class="quote">{Quote}</div>
  958. {block:Source}<div class="source">{Source}</div>{/block:Source}
  959. {/block:Quote}
  960.  
  961. {block:Chat}
  962. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  963. <ul class="chat">{block:Lines}
  964. <li>
  965. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  966. {Line}
  967. </li>
  968. {/block:Lines}</ul>
  969. {/block:Chat}
  970.  
  971. {block:Answer}
  972. <table style="padding-bottom:5px;margin-bottom:5px;">
  973. <tr>
  974. <td class="askerbg" style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-64}"></td><td style="vertical-align:top;"><strong>{Asker} asked:</strong>
  975. <div class="question">{Question}</div>
  976. </td>
  977. </tr>
  978. </table>
  979. {Answer}
  980. {/block:Answer}
  981.  
  982. {block:Audio}
  983. <div class="audiopost">
  984. <div class="audiobox">
  985. <div class="button">
  986. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  987. </div>
  988. </div>
  989. {block:AlbumArt}
  990. <img src="{AlbumArtURL}" class="album-art">
  991. {/block:AlbumArt}
  992. <div class="audioinfo">
  993. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  994. {block:Artist}<li>{Artist}</li>{/block:Artist}
  995. {block:Album}<li>{Album}</li>{/block:Album}
  996. </div>
  997. </div>
  998. {block:Caption}
  999. {block:NotReblog}
  1000. <li class="caption">
  1001. {Caption}
  1002. </li>
  1003. {/block:NotReblog}
  1004. {block:RebloggedFrom}
  1005. {block:Reblogs}
  1006. <li class="caption">
  1007. <img src="{PortraitURL-64}" class="user-icon">
  1008. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1009. {Body}
  1010. </li>
  1011. {/block:Reblogs}
  1012. {/block:RebloggedFrom}
  1013. {/block:Caption}
  1014. {/block:Audio}
  1015.  
  1016. <!----- INFO ----->
  1017.  
  1018. {block:Date}
  1019. <div class="info">
  1020. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post"><i class="fas fa-thumbtack"></i> {PinnedPostLabel}</a>{/block:PinnedPostLabel}
  1021. <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonth}" title="{TimeAgo}" style="text-transform:lowercase"><i data-feather="calendar"></i></a>
  1022. {block:NoteCount} <a href="{Permalink}" title="{NoteCountWithLabel}"><i data-feather="activity"></i></a>{/block:NoteCount}
  1023.  
  1024. <!-- reblog info and content source on permalink pages -->
  1025.  
  1026. {block:PermalinkPage}
  1027.  
  1028. {block:RebloggedFrom}
  1029. <a href="{ReblogParentURL}" title="reblogged from"><i data-feather="chevron-left"></i></a>
  1030. <a href="{ReblogRootURL}" title="original poster"><i data-feather="compass"></i></a>
  1031. {/block:RebloggedFrom}
  1032.  
  1033. {/block:PermalinkPage}
  1034.  
  1035.  
  1036.  
  1037. <!-- like and reblog buttons -->
  1038.  
  1039. <a href="{ReblogURL}" target="_blank" title="reblog this post"><i data-feather="refresh-cw"></i></a>
  1040.  
  1041. <a class="likeb" href="#" title="like this post">{LikeButton}<span class="actual-button"><i class="cp cp-heart-o" style="vertical-align:middle;color:{color:feather icons};font-size:11px;"></i></span></a>
  1042.  
  1043. </div>
  1044. {/block:Date}
  1045.  
  1046. <!----- TAGS ----->
  1047.  
  1048. {block:HasTags}
  1049. <div class="tags">
  1050. {block:Tags}<a href="{TagURL}">#{Tag} &nbsp;</a>{/block:Tags}
  1051. </div>
  1052. {/block:HasTags}
  1053.  
  1054. <!----- POST NOTES ----->
  1055.  
  1056. {block:PermalinkPage}{block:Date}
  1057. {block:NoteCount}{block:PostNotes}
  1058. <div class="notes">
  1059. {PostNotes-64}
  1060. </div>
  1061. {/block:PostNotes}{/block:NoteCount}
  1062. {/block:Date}{/block:PermalinkPage}
  1063.  
  1064. </article>
  1065. {/block:Posts}
  1066.  
  1067. <!-- end of posts container -->
  1068.  
  1069. </section>
  1070.  
  1071. <!----- PAGINATION ----->
  1072.  
  1073. {block:Pagination}
  1074. <article id="page-navigation">
  1075. {block:PreviousPage}<a href="{PreviousPage}">previous page</a>{/block:PreviousPage}
  1076. {block:JumpPagination length="5"}
  1077. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1078. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1079. {/block:JumpPagination}
  1080. {block:NextPage}<a href="{NextPage}">next page</a>{/block:NextPage}
  1081. </article>
  1082. {/block:Pagination}
  1083.  
  1084. <!-- end of main container -->
  1085. </div>
  1086. <!-- tumblr controls -->
  1087.  
  1088. <div class="controls"><i class="cp cp-more"></i></div>
  1089. </main>
  1090.  
  1091. <!----- CREDIT: DO NOT REMOVE ----->
  1092.  
  1093. <a href="https://userbru.tumblr.com" title="by userbru" id="credit"><i class="far fa-moon"></i></a>
  1094.  
  1095.  
  1096.  
  1097.  
  1098. <script>feather.replace();</script>
  1099.  
  1100. <script>
  1101. function openNav() {
  1102. document.getElementById("myNav").style.height = "100%";
  1103. }
  1104.  
  1105. function closeNav() {
  1106. document.getElementById("myNav").style.height = "0%";
  1107. }
  1108. </script>
  1109.  
  1110.  
  1111.  
  1112. </body>
  1113.  
  1114. <script src="https://unpkg.com/popper.js@1"></script>
  1115. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1116. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1117.  
  1118.  
  1119.  
  1120. <script>
  1121.  
  1122.  
  1123. tippy('a[title]', {
  1124. theme: 'gradient',
  1125. arrow: false,
  1126. zIndex: 9999999999,
  1127. maxWidth: 300,
  1128.  
  1129. content(reference) {
  1130. const title = reference.getAttribute('title');
  1131. reference.removeAttribute('title');
  1132. return title;
  1133. },
  1134. });
  1135.  
  1136.  
  1137. </script>
  1138.  
  1139. </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!