API tools faq
paste
Advertisement
userbru

theme thirty.

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