API tools faq
paste
Advertisement
userbru

theme nineteen (v1)

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