API tools faq
paste
rollyjogered

theme 73

rollyjogered
Jan 8th, 2022 (edited)
2,904
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 38.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. theme 73 by pirateskinned
  7.  
  8. please don't: edit & repost / claim as your own
  9. please don't: delete or move the credit
  10. please don't: steal bits of coding
  11.  
  12. -->
  13.  
  14. <title>{Title}</title>
  15.  
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  19.  
  20. <!-- meta tags -->
  21.  
  22. <meta name="image:icon" content="">
  23.  
  24. <meta name="color:background" content="#f9f9f9"/>
  25. <meta name="color:posts" content="#ffffff"/>
  26. <meta name="color:border" content="#eeeeee"/>
  27. <meta name="color:text" content="#4f4e4e"/>
  28. <meta name="color:accent one" content="#bfa085"/>
  29. <meta name="color:accent two" content="#d5c5b8"/>
  30.  
  31. <meta name="select:font family" content="Nunito" title="nunito">
  32. <meta name="select:font family" content="Karla" title="karla">
  33. <meta name="select:font family" content="Lora" title="lora">
  34. <meta name="select:font family" content="Inconsolata" title="inconsolata">
  35. <meta name="select:font family" content="Lato" title="lato">
  36.  
  37. <meta name="text:font size" content="13px">
  38. <meta name="text:post size" content="450px">
  39.  
  40. <meta name="text:link one url" content="/">
  41. <meta name="text:link one name" content="link one">
  42. <meta name="text:link two url" content="/">
  43. <meta name="text:link two name" content="link two">
  44.  
  45.  
  46. <!-- scripts -->
  47.  
  48. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  49.  
  50. <!-- fonts -->
  51.  
  52. <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Karla:wght@400;700&family=Lato:wght@400;700&family=Lora:wght@400;700&family=Nunito:wght@400;700&display=swap" rel="stylesheet">
  53.  
  54. <!-- tooltips -->
  55.  
  56. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  57.  
  58. <script>
  59. (function($){
  60. $(document).ready(function(){
  61. $("[title]").style_my_tooltips({
  62. tip_follows_cursor:true,
  63. tip_delay_time:30,
  64. tip_fade_speed:300,
  65. attribute:"title"
  66. });
  67. });
  68. })(jQuery);
  69. </script>
  70.  
  71. <!-- photosets -->
  72.  
  73. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css">
  74. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  75.  
  76. <!-- icon font -- feathericons.com -->
  77.  
  78. <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  79. <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.css">
  80.  
  81. <script>
  82. $(document).ready(function(){
  83. $('.photo-slideshow').pxuPhotoset({
  84. lightbox: true,
  85. rounded: false,
  86. gutter: '1px',
  87. borderRadius: '0px',
  88. photoset: '.photo-slideshow',
  89. photoWrap: '.photo-data',
  90. photo: '.pxu-photo'
  91. });
  92.  
  93. feather.replace();
  94. });
  95.  
  96. </script>
  97.  
  98. <!--
  99. NPF images fix v3.0 by @glenthemes [2021]
  100. 💌 git.io/JRBt7
  101. --->
  102.  
  103. <link href="https://assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css" rel="stylesheet">
  104. <link rel="stylesheet" href="https://npf-images-v3.github.io/recon.css">
  105. <script src="https://glenthemes.s3.eu-west-2.amazonaws.com/other/npf-images-v3-ps-mod.js"></script>
  106. <style tmblr-npf>
  107. :root {
  108. --NPF-Caption-Spacing:20px;
  109. --NPF-Image-Spacing:1px;
  110. }
  111. </style>
  112.  
  113.  
  114.  
  115. <style type="text/css">
  116.  
  117. /* --- tumblr controls styling by cyantists
  118. http://cyantists.tumblr.com/tumblr_controls/hover --- */
  119.  
  120. iframe.tmblr-iframe {
  121. z-index:99999999999999!important;
  122. top:5px!important;
  123. right:15px!important;
  124. opacity:0;
  125. padding-right:38px;
  126. /* delete invert(1) from here */
  127. filter:invert(1) contrast(150%);
  128. -webkit-filter:invert(1) contrast(150%);
  129. -o-filter:invert(1) contrast(150%);
  130. -moz-filter:invert(1) contrast(150%);
  131. -ms-filter:invert(1) contrast(150%);
  132. /* to here if your blog has a dark background */
  133. transform:scale(0.65);
  134. transform-origin:100% 0;
  135. -webkit-transform:scale(0.65);
  136. -webkit-transform-origin:100% 0;
  137. -o-transform:scale(0.65);
  138. -o-transform-origin:100% 0;
  139. -moz-transform:scale(0.65);
  140. -moz-transform-origin:100% 0;
  141. -ms-transform:scale(0.65);
  142. -ms-transform-origin:100% 0;}
  143.  
  144. iframe.tmblr-iframe:hover {
  145. opacity:0.6!important;}
  146.  
  147. .hcontrols {
  148. position:fixed;
  149. top:5px;
  150. right:5px;
  151. z-index:999999999;}
  152.  
  153. .hcontrols svg {
  154. width:14px;
  155. height:14px;
  156. padding:9px;}
  157.  
  158. /* --- tooltips & scrollbars --- */
  159.  
  160. #s-m-t-tooltip {
  161. position:absolute;
  162. margin-top: 15px;
  163. z-index:9999;
  164. padding:3px 7px;
  165. background:{color:posts};
  166. color:{color:text};
  167. font-size:{text:font size};
  168. border-radius:15px;
  169. box-shadow:0px 0px 5px rgba(0,0,0,0.05);
  170. }
  171.  
  172. ::-webkit-scrollbar-thumb {background-color:{color:accent one}; border-radius:10px;}
  173. ::-webkit-scrollbar {background-color:transparent; width:4px; height:4px;}
  174.  
  175. /* --- basics --- */
  176.  
  177. body {
  178. background-color:{color:background};
  179. color:{color:text};
  180. font-family: '{select:font family}', sans-serif;
  181. font-size:{text:font size};
  182. line-height:1.5em;
  183. font-weight:400;
  184. text-align:left;
  185. margin:0;
  186. }
  187.  
  188. a {
  189. color:{color:text};
  190. text-decoration:none;
  191. -moz-transition-duration: 0.5s;
  192. -o-transition-duration: 0.5s;
  193. -webkit-transition-duration: 0.5s;
  194. transition-duration: 0.5s;
  195. }
  196.  
  197. a:hover {
  198. color:{color:text};
  199. text-decoration:none;
  200. }
  201.  
  202. p a, li a
  203. {border-bottom:1px solid {color:border};}
  204. p a:hover, li a:hover
  205. {border-bottom:1px solid {color:accent one};}
  206.  
  207. img {
  208. border:none;
  209. text-decoration:none;
  210. }
  211.  
  212. b, strong, bold {
  213. font-weight:700;
  214. }
  215.  
  216. u {
  217. text-decoration:none;
  218. }
  219.  
  220. .firstletter, u {
  221. display:block;
  222. float:left;
  223. width:30px;
  224. height:30px;
  225. display:flex;
  226. align-items:center;
  227. justify-content:center;
  228. font-weight:700;
  229. text-transform:uppercase;
  230. font-size:calc({text:font size} + 4px);
  231. margin:0px 10px 0px 0px;
  232. border-radius:7px;
  233. background-color:{color:border};
  234. }
  235.  
  236. s, strike {
  237. text-decoration-color:{color:accent one};
  238. }
  239.  
  240. small, sub, sup, big {
  241. font-size:{text:font size};
  242. line-height:1.5em;
  243. vertical-align:baseline;
  244. }
  245.  
  246. blockquote {
  247. padding:0px 5px 0px 15px;
  248. border-left:1px solid {color:border};
  249. margin-left:5px;
  250. margin-right:0px;
  251. }
  252.  
  253. blockquote img {
  254. max-width:calc(100% - 40px);
  255. height:auto;
  256. }
  257.  
  258. blockquote blockquote {
  259. margin-right:0px;
  260. }
  261.  
  262. blockquote blockquote img {
  263. max-width:calc(100% - 50px);
  264. height:auto;
  265. margin-top:10px;
  266. }
  267.  
  268. pre {
  269. font-family: 'Inconsolata', monospace;
  270. font-weight:600;
  271. font-size:calc({text:font size} + 2px);
  272. padding:10px;
  273. margin:10px 0px;
  274. border:1px solid {color:border};
  275. border-radius:5px;
  276. }
  277.  
  278. pre i, pre em, pre b, pre strong, pre a {
  279. color:{color:text};
  280. }
  281.  
  282. ul {
  283. padding-left:15px;
  284. }
  285.  
  286. ul li {
  287. list-style-type:none;
  288. }
  289.  
  290. ul li:before {
  291. content: "— ";
  292. text-indent: -5px;
  293. }
  294.  
  295. hr {
  296. border:none;
  297. border-bottom:1px solid {color:border};
  298. width:calc(100% - 150px);
  299. margin:20px auto 20px auto;
  300. }
  301.  
  302. svg.feather {
  303. width:18px;
  304. height:18px;
  305. }
  306.  
  307. /* --- header styles --- */
  308.  
  309. h1 {
  310. margin:0px 0px 20px 0px;
  311. font-weight:700;
  312. font-size:2em;
  313. }
  314.  
  315. h1.tagpage {
  316. margin-bottom:40px;
  317. }
  318.  
  319. h2 {
  320. font-weight:400;
  321. text-align:left;
  322. text-transform:uppercase;
  323. font-size:1.5em;
  324. letter-spacing:1px;
  325. word-spacing:2px;
  326. }
  327.  
  328. h2 b, b h2, h2 i, i h2,
  329. h2 strong, strong h2, h2 em, em h2 {
  330. color:{color:text};
  331. }
  332.  
  333. h3 {
  334. font-size:1.7em;
  335. font-weight:400;
  336. margin:10px 0px;
  337. color:{color:accent one};
  338. text-align:center;
  339. text-transform:lowercase;
  340. }
  341.  
  342. /* --- background accent --- */
  343.  
  344. .accent {
  345. position:fixed;
  346. z-index:1;
  347. right:0px;
  348. top:0px;
  349. width:50%;
  350. height:100%;
  351. background-color:{color:accent two};
  352. }
  353.  
  354. /* --- sidebar --- */
  355.  
  356. .side {
  357. position:fixed;
  358. z-index:100;
  359. left:50%;
  360. margin-left:calc((-{text:post size} / 2) - 162px);
  361. margin-top:120px;
  362. width:210px;
  363. height:auto;
  364. background-color:{color:posts};
  365. padding:20px 20px 140px 20px;
  366. border-radius:5px;
  367. border:1px solid {color:border};
  368. overflow:hidden;
  369. }
  370.  
  371. .side-title {
  372. margin-bottom:10px;
  373. font-size:1.8em;
  374. font-weight:700;
  375. letter-spacing:0.5px;
  376. }
  377.  
  378. .side-links {
  379. position:relative;
  380. width:100%;
  381. margin:0px 0px 10px 0px;
  382. display:inline-flex;
  383. flex-wrap:wrap;
  384. align-items:center;
  385. justify-content:flex-start;
  386. }
  387.  
  388. .side-links a {
  389. margin:0px 10px 0px 0px;
  390. color:{color:text};
  391. letter-spacing:0.5px;
  392. border-bottom:1px solid {color:border};
  393. }
  394.  
  395. .side-links a:hover {
  396. border-bottom:1px solid {color:accent one};
  397. }
  398.  
  399. .side-icon-c {
  400. position:absolute;
  401. left:0px;
  402. bottom:0px;
  403. width:120px;
  404. height:120px;
  405. background-color:{color:accent two};
  406. border-radius:0px 60px 0px 0px;
  407. display:flex;
  408. justify-content:center;
  409. align-items:center;
  410. }
  411.  
  412. .side-icon-c:before {
  413. content:'';
  414. position:absolute;
  415. top:-60px;
  416. left:0px;
  417. width:80px;
  418. height:60px;
  419. border-radius:0px 0px 0px 40px;
  420. background-color:transparent;
  421. box-shadow:-40px 0px 0px 0px {color:accent two};
  422. }
  423.  
  424. .side-icon-c:after {
  425. content:'';
  426. position:absolute;
  427. bottom:0px;
  428. right:-80px;
  429. width:80px;
  430. height:60px;
  431. border-radius:0px 0px 0px 40px;
  432. background-color:transparent;
  433. box-shadow:-40px 0px 0px 0px {color:accent two};
  434. }
  435.  
  436. .side-icon {
  437. z-index:105;
  438. top:20px;
  439. left:20px;
  440. width:80px;
  441. height:80px;
  442. border-radius:40px;
  443. background-image:url('{image:icon}');
  444. background-size:cover;
  445. box-shadow:inset 0px 0px 4px 0px rgba({RGBcolor:text},0.5);
  446. }
  447.  
  448. /* --- pagination --- */
  449.  
  450. .pagination {
  451. position:absolute;
  452. left:0px!important;
  453. bottom:20px;
  454. width:230px;
  455. height:40px;
  456. display:flex;
  457. justify-content:flex-end;
  458. align-items:center;
  459. }
  460.  
  461. .pagination a {
  462. margin:0px 0px 0px 10px;
  463. width:40px;
  464. height:40px;
  465. background-color:{color:border};
  466. border-radius:7px;
  467. display:flex;
  468. justify-content:center;
  469. align-items:center;
  470. }
  471.  
  472. .pagination a svg {
  473. width:20px;
  474. height:20px;
  475. }
  476.  
  477. .pagination a:hover {
  478. background-color:{color:accent one};
  479. color:{color:posts};
  480. }
  481.  
  482. /* --- entries --- */
  483.  
  484. .entries {
  485. position:relative;
  486. z-index:90;
  487. top:70px;
  488. left:50%;
  489. margin-left:calc((-{text:post size} / 2) + 150px);
  490. padding-bottom:80px;
  491. width:calc({text:post size} + 2px);
  492. height:auto;
  493. }
  494.  
  495. /* --- posts --- */
  496.  
  497. .post {
  498. position:relative;
  499. width:{text:post size};
  500. margin:0px auto 80px auto;
  501. background-color:{color:posts};
  502. overflow:hidden;
  503. border:1px solid {color:border};
  504. border-radius:5px;
  505. }
  506.  
  507. .post img {
  508. max-width:100%;
  509. height:auto;
  510. display:block;
  511. }
  512.  
  513. /* --- text posts --- */
  514.  
  515. .title {
  516. padding:20px;
  517. width:calc(100% - 40px);
  518. font-size:2em;
  519. line-height:1.1em;
  520. text-align:left;
  521. font-weight:700;
  522. }
  523.  
  524. .title a, .more a {
  525. border-bottom:1px solid {color:border};
  526. }
  527.  
  528. .title a:hover, .more a:hover {
  529. border-bottom:1px solid {color:accent one};
  530. }
  531.  
  532. .more a {
  533. font-size:1.2em;
  534. color:{color:text};
  535. font-weight:bold;
  536. }
  537.  
  538. .txt {
  539. margin:0px;
  540. padding:0px 20px 20px 20px;
  541. }
  542.  
  543. .txt:first-of-type {
  544. padding:20px;
  545. }
  546.  
  547. .txt img {
  548. border-radius:5px;
  549. }
  550.  
  551. .photo-origin img {
  552. border-radius:0px;
  553. }
  554.  
  555. /* --- unnested captions --- */
  556.  
  557. blockquote.tumblr_parent {
  558. border:none;
  559. padding:0px;
  560. margin:0px;
  561. }
  562.  
  563. blockquote.tumblr_parent:last-of-type {
  564. border:none;
  565. margin:0px;
  566. }
  567.  
  568. img.tumblr_avatar {
  569. width:30px;
  570. height:30px;
  571. border-radius:30px;
  572. float:left;
  573. margin-right:10px;
  574. }
  575.  
  576. .tumblr_blog {
  577. width:auto;
  578. height:30px;
  579. display:inline-flex;
  580. align-items:center;
  581. font-weight:600;
  582. }
  583.  
  584. .tumblr_blog a:hover, a.tumblr_blog:hover {color:{color:accent one};}
  585. .tumblr_blog a:not([href]):hover {color:{color:text};}
  586.  
  587. .deactivated {
  588. font-weight:600;
  589. opacity:50%;
  590. margin-left:10px;
  591. }
  592.  
  593. .tmblr-attribution {
  594. display:none;
  595. }
  596.  
  597. /* --- photos --- */
  598.  
  599. .photo-p, .photo-slideshow, .photo-origin {
  600. margin:0px;
  601. overflow:hidden;
  602. }
  603.  
  604. .photo-origin {
  605. margin:-20px;
  606. }
  607.  
  608. .photo-p + .txt,
  609. .photo-slideshow + .txt,
  610. .video + .txt,
  611. .audio + .txt {
  612. padding-top:20px;
  613. }
  614.  
  615. .photo img {
  616. display:block;
  617. }
  618.  
  619. .photo-slideshow img {
  620. border-radius:0px;
  621. }
  622.  
  623. video, .video, .video iframe {
  624. width:{text:post size};
  625. display:block;
  626. }
  627.  
  628. /* --- quotes --- */
  629.  
  630. .quote-p, .npf_quote {
  631. font-weight:700;
  632. text-align:left;
  633. font-size:calc({text:font size} + 8px);
  634. line-height:calc({text:font size} + 12px);
  635. }
  636.  
  637. .source, .npf_quote + p {
  638. margin-top:4px;
  639. text-align:right;
  640. }
  641.  
  642. /* --- audio --- */
  643.  
  644. .audio {
  645. width:100%;
  646. height:80px;
  647. background-size:cover;
  648. background-position:center center;
  649. }
  650.  
  651. .audio-content {
  652. width:100%;
  653. height:100%;
  654. box-sizing:border-box;
  655. padding:20px 0px 20px 20px;
  656. display:flex;
  657. align-items:center;
  658. justify-content:space-between;
  659. backdrop-filter:blur(6px);
  660. }
  661.  
  662. .audio-play {
  663. width:30px;
  664. height:30px;
  665. background-color:#f2f2f2;
  666. border-radius:20px;
  667. margin-right:20px;
  668. overflow:hidden;
  669. }
  670.  
  671. .audio-play iframe {
  672. margin-left:-1px;
  673. margin-top:1px;
  674. }
  675.  
  676. .audio-info {
  677. width:calc(100% - 60px - 100px);
  678. height:auto;
  679. }
  680.  
  681. .audio-info b, .audio-info span {
  682. width:100%;
  683. display:block;
  684. color:#f2f2f2;
  685. }
  686.  
  687. .audio-art {
  688. margin-left:20px;
  689. width:80px;
  690. height:80px;
  691. background-size:cover;
  692. }
  693.  
  694. /* --- asks --- */
  695.  
  696. .question-c, .answer-c {
  697. margin:0px;
  698. padding:20px 20px 0px 20px;
  699. display:flex;
  700. justify-content:space-between;
  701. align-items:flex-end;
  702. }
  703.  
  704. .answer-c {
  705. margin:0px 0px 20px 0px;
  706. }
  707.  
  708. .question-img {
  709. z-index:10;
  710. margin-left:10px;
  711. width:40px;
  712. height:auto;
  713. }
  714.  
  715. .question-img img {
  716. width:40px;
  717. height:40px;
  718. border-radius:40px;
  719. }
  720.  
  721. .answer-img {
  722. z-index:10;
  723. margin-right:10px;
  724. width:40px;
  725. height:auto;
  726. }
  727.  
  728. .answer-img img {
  729. width:40px;
  730. height:40px;
  731. border-radius:40px;
  732. }
  733.  
  734. .question, .answer {
  735. position:relative;
  736. z-index:1;
  737. width:calc(100% - 50px);
  738. height:auto;
  739. background-color:{color:posts};
  740. border:1px solid {color:border};
  741. border-radius:20px;
  742. box-sizing:border-box;
  743. padding:20px 20px 20px 20px;
  744. }
  745.  
  746. .question:before {
  747. content:'';
  748. position:absolute;
  749. z-index:2;
  750. bottom:0px;
  751. right:-26px;
  752. width:25px;
  753. height:21px;
  754. border-radius:0px 0px 0px 15px;
  755. background-color:transparent;
  756. border-left:1px solid {color:border};
  757. border-bottom:1px solid {color:border};
  758. clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
  759. }
  760.  
  761. .question:after {
  762. content:'';
  763. position:absolute;
  764. z-index:1;
  765. bottom:0px;
  766. right:-11px;
  767. width:21px;
  768. height:21px;
  769. background-color:{color:posts};
  770. border-radius:0px 0px 0px 15px;
  771. border-left:1px solid {color:border};
  772. border-bottom:1px solid {color:border};
  773. clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 25% 70%);
  774. }
  775.  
  776. .answer:before {
  777. content:'';
  778. position:absolute;
  779. z-index:2;
  780. bottom:0px;
  781. left:-26px;
  782. width:25px;
  783. height:21px;
  784. border-radius:0px 0px 15px 0px;
  785. border-right:1px solid {color:border};
  786. border-bottom:1px solid {color:border};
  787. clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  788. }
  789.  
  790. .answer:after {
  791. content:'';
  792. position:absolute;
  793. z-index:1;
  794. bottom:0px;
  795. left:-11px;
  796. width:21px;
  797. height:21px;
  798. border-radius:0px 0px 15px 0px;
  799. background-color:{color:posts};
  800. border-right:1px solid {color:border};
  801. border-bottom:1px solid {color:border};
  802. clip-path: polygon(75% 0, 75% 70%, 100% 100%, 0 100%, 0 0);
  803. }
  804.  
  805. .question-asker, .answer-asker {
  806. width:100%;
  807. margin-bottom:5px;
  808. }
  809.  
  810. .question-asker b,
  811. .answer-asker b {
  812. font-weight:700;
  813. text-transform:lowercase;
  814. }
  815.  
  816. .question-asker a:hover,
  817. .answer-asker a:hover {
  818. color:{color:accent one};
  819. }
  820.  
  821. .question-content p:last-of-type,
  822. .answer-content p:last-of-type {
  823. margin-bottom:0px;
  824. }
  825.  
  826. .question-content img,
  827. .answer-content img {
  828. border-radius:5px;
  829. }
  830.  
  831. /* --- chat --- */
  832.  
  833. .chat .txt {
  834. padding:0px;
  835. }
  836.  
  837. .chat .title {
  838. margin:0px 0px 20px 0px;
  839. padding:20px;
  840. }
  841.  
  842. .chat ul {
  843. list-style-type:none;
  844. padding-left:0px;
  845. margin:0px;
  846. }
  847.  
  848. .chat ul li:before {
  849. content: none;
  850. text-indent: 0px;
  851. }
  852.  
  853. .chat ul li {
  854. padding:20px;
  855. }
  856.  
  857. .chat ul li:nth-of-type(even) {
  858. background-color:rgba({RGBcolor:border},0.3);
  859. }
  860.  
  861. .chat .label {
  862. text-transform:uppercase;
  863. font-weight:800;
  864. }
  865.  
  866. /* --- post info --- */
  867.  
  868. .post-date {
  869. position:relative;
  870. z-index:2;
  871. margin:0px 0px 0px 0px;
  872. padding:20px 20px 20px 20px;
  873. width:calc(100% - 40px);
  874. height:auto;
  875. border-top:1px solid {color:border};
  876. display:flex;
  877. flex-wrap:wrap;
  878. align-items:center;
  879. justify-content:space-between;
  880. }
  881.  
  882. .post-date a {
  883. display:flex;
  884. align-items:center;
  885. }
  886.  
  887. .post-date a:hover {
  888. color:{color:accent one};
  889. }
  890.  
  891. .post-date svg {
  892. width:14px;
  893. height:14px;
  894. }
  895.  
  896. .post-date .date-left {
  897. position:relative;
  898. width:auto;
  899. height:auto;
  900. display:flex;
  901. justify-content:flex-start;
  902. }
  903.  
  904. .date-left a {
  905. margin:0px 10px 0px 0px;
  906. }
  907.  
  908. .date-left a svg {
  909. margin:0px 5px 0px 0px;
  910. }
  911.  
  912. .post-date .date-right {
  913. width:80px;
  914. height:auto;
  915. display:flex;
  916. justify-content:flex-end;
  917. }
  918.  
  919. .date-right a:last-of-type {margin-left:10px;}
  920.  
  921. .date-right .like .liked + svg {opacity:1;stroke:{color:accent one};}
  922. .date-right .like .liked + svg path {fill:{color:accent one};}
  923. .date-right .like .like_button {position:relative;}
  924.  
  925. .date-right .like .like_button iframe {
  926. position:absolute;
  927. top:-7px;
  928. left:0px;
  929. width:14px;
  930. height:14px;
  931. z-index:2;
  932. opacity:0;
  933. }
  934.  
  935. .date-perma {
  936. width:100%;
  937. }
  938.  
  939. .date-perma a {
  940. display:inline;
  941. margin-left:5px;
  942. border-bottom:1px solid {color:border};
  943. }
  944.  
  945. .date-perma a:hover {
  946. color:{color:text};
  947. border-bottom:1px solid {color:accent one};
  948. }
  949.  
  950. /* --- pinned --- */
  951.  
  952. .pinned {
  953. color:{color:accent one};
  954. font-weight:700;
  955. margin-right:10px;
  956. }
  957.  
  958. /* --- tags --- */
  959.  
  960. .tags-c {
  961. position:relative;
  962. margin-top:5px;
  963. width:100%;
  964. display:flex;
  965. align-items:center;
  966. flex-wrap:wrap;
  967. align-content:flex-start;
  968. justify-content:flex-start;
  969. }
  970.  
  971. .tags {
  972. transition-duration: 0.6s;
  973. font-weight:400;
  974.  
  975. }
  976.  
  977. a.tags {
  978. display:inline-block;
  979. background-color:{color:border};
  980. padding:2px 4px;
  981. border-radius:5px;
  982. margin:0px 4px 4px 0px;
  983. }
  984.  
  985. a.tags:hover {
  986. background-color:{color:accent one};
  987. color:{color:posts};
  988. }
  989.  
  990. /* --- notes --- */
  991.  
  992. .pagenotes {
  993. {block:IndexPage}
  994. display: none!important;
  995. {/block:IndexPage}
  996. position:relative;
  997. width:{text:post size};
  998. margin:-70px auto 80px auto;
  999. background-color:{color:posts};
  1000. padding:5px 20px;
  1001. box-sizing:border-box;
  1002. border-radius:5px;
  1003. border:1px solid {color:border};
  1004. }
  1005.  
  1006. .pagenotes img {
  1007. border-radius:20px;
  1008. width:30px;
  1009. height:30px;
  1010. }
  1011.  
  1012. .avatar_frame {
  1013. width:30px;
  1014. height:30px;
  1015. border:none;
  1016. margin-right:15px;
  1017. }
  1018.  
  1019. .avatar_frame:hover {
  1020. border:none;
  1021. }
  1022.  
  1023. .pagenotes a {
  1024. font-weight:800;
  1025. }
  1026.  
  1027. .pagenotes ol {
  1028. list-style-type:none;
  1029. margin:0px;
  1030. padding:0px;
  1031.  
  1032. }
  1033.  
  1034. .pagenotes ol li {
  1035. position:relative;
  1036. margin:15px 0px;
  1037. display:flex;
  1038. align-items:center;
  1039. }
  1040.  
  1041. .pagenotes .with_commentary {
  1042. flex-wrap:wrap;
  1043. }
  1044.  
  1045. .pagenotes .like::before,
  1046. .pagenotes .reblog::before,
  1047. .pagenotes .post_attribution:before {
  1048. font-family:'feather';
  1049. position:absolute;
  1050. width:20px;
  1051. height:20px;
  1052. top:15px;
  1053. left:15px;
  1054. color:#f2f2f2;
  1055. border-radius:15px;
  1056. font-size:12px;
  1057. border:1px solid {color:posts};
  1058. display:flex;
  1059. align-items:center;
  1060. justify-content:center;
  1061. }
  1062.  
  1063. .pagenotes .like::before {
  1064. content:'\e879';
  1065. background-color:#c86549;
  1066. }
  1067.  
  1068. .pagenotes .reblog::before {
  1069. content:'\e8b6';
  1070. background-color:#74ba8e;
  1071. }
  1072.  
  1073. .pagenotes .post_attribution:before {
  1074. content:'\e8b1';
  1075. background-color:#333333;
  1076. }
  1077.  
  1078. /* --- credit --- */
  1079.  
  1080. .credit a {
  1081. position:fixed;
  1082. z-index:500;
  1083. right:10px;
  1084. bottom:10px;
  1085. width:40px;
  1086. height:40px;
  1087. border-radius:5px;
  1088. color:{color:text};
  1089. background-color:{color:border};
  1090. display:flex;
  1091. align-items:center;
  1092. justify-content:center;
  1093. }
  1094.  
  1095. .credit a svg {
  1096. width:20px;
  1097. height:20px;
  1098. }
  1099.  
  1100. .credit a:hover {
  1101. background-color:{color:accent one};
  1102. color:{color:posts};
  1103. }
  1104.  
  1105. {CustomCSS}
  1106.  
  1107. </style>
  1108. </head>
  1109. <body>
  1110.  
  1111. <!-- tumblr controls -->
  1112.  
  1113. <div class="hcontrols">
  1114. <i data-feather="settings"></i>
  1115. </div>
  1116.  
  1117. <!-- background accent -->
  1118.  
  1119. <div class="accent"></div>
  1120.  
  1121. <!-- sidebar -->
  1122.  
  1123. <div class="side">
  1124.  
  1125. <div class="side-title">
  1126. {Title}
  1127. </div>
  1128.  
  1129. <div class="side-links">
  1130. <a href="/">home</a>
  1131. <a href="/ask">ask</a>
  1132. <a href="{text:link one url}">{text:link one name}</a>
  1133. <a href="{text:link two url}">{text:link two name}</a>
  1134. </div>
  1135.  
  1136. {Description}
  1137.  
  1138. <div class="side-icon-c">
  1139. <div class="side-icon"></div>
  1140. </div>
  1141.  
  1142. {block:Pagination}
  1143. <div class="pagination">
  1144. {block:PreviousPage}
  1145. <a href="{PreviousPage}" title="previous page">
  1146. <i data-feather="arrow-left-circle"></i>
  1147. </a>
  1148. {/block:PreviousPage}
  1149.  
  1150. {block:NextPage}
  1151. <a href="{NextPage}" title="next page">
  1152. <i data-feather="arrow-right-circle"></i>
  1153. </a>
  1154. {/block:NextPage}
  1155. </div>
  1156. {/block:Pagination}
  1157.  
  1158. </div>
  1159.  
  1160.  
  1161. <!-- start of posts -->
  1162.  
  1163. <div class="entries">
  1164.  
  1165. {block:TagPage}
  1166. <h1 class="tagpage">#{Tag}</h1>
  1167. {/block:TagPage}
  1168.  
  1169. {block:Posts}
  1170. <div class="post post-{PostType}" id="{PostID}" post-type="{PostType}">
  1171.  
  1172. {block:Quote}
  1173. <!-- post type: quote -->
  1174. <div class="txt">
  1175. <div class="quote-p">{Quote}</div>
  1176. {block:Source}
  1177. <div class="source"><p>&mdash; {Source}</p></div>
  1178. {/block:Source}
  1179. </div>
  1180. {/block:Quote}
  1181.  
  1182. {block:Text}
  1183. <!-- post type: text -->
  1184. {block:Title}
  1185. <div class="title">{Title}</div>
  1186. {/block:Title}
  1187.  
  1188. {block:Body}
  1189. {block:NotReblog}
  1190. <div class="txt">
  1191. {Body}
  1192.  
  1193. {block:More}
  1194. <div class="more">
  1195. <a href="{Permalink}">continue reading...</a>
  1196. </div>
  1197. {/block:More}
  1198. </div>
  1199. {/block:NotReblog}
  1200.  
  1201. {block:RebloggedFrom}
  1202. {block:Reblogs}
  1203. <div class="txt">
  1204. <blockquote class="tumblr_parent">
  1205. <img class="tumblr_avatar" src="{PortraitURL-64}">
  1206. <a class="tumblr_blog" {block:IsActive}href="{Permalink}"{/block:IsActive}>{Username}</a>
  1207. {block:IsDeactivated}
  1208. <span class="deactivated">deactivated</span>
  1209. {/block:IsDeactivated}
  1210. </blockquote>
  1211.  
  1212. {Body}
  1213. </div>
  1214. {/block:Reblogs}
  1215. {/block:RebloggedFrom}
  1216. {/block:Body}
  1217. {/block:Text}
  1218.  
  1219. {block:Link}
  1220. <!-- post type: link -->
  1221. <div class="title">
  1222. <a href="{URL}">{Name}</a>
  1223. </div>
  1224.  
  1225. {block:Description}
  1226. {block:NotReblog}
  1227. <div class="txt">
  1228. {Description}
  1229.  
  1230. {block:More}
  1231. <div class="more">
  1232. <a href="{Permalink}">continue reading...</a>
  1233. </div>
  1234. {/block:More}
  1235. </div>
  1236. {/block:NotReblog}
  1237.  
  1238. {block:RebloggedFrom}
  1239. {block:Reblogs}
  1240. <div class="txt">
  1241. <div class="tumblr_blog">
  1242. <img class="tumblr_avatar" src="{PortraitURL-64}">
  1243. <a {block:IsActive}href="{Permalink}"{/block:IsActive}>{Username}</a>
  1244. {block:IsDeactivated}
  1245. <span class="deactivated">deactivated</span>
  1246. {/block:IsDeactivated}
  1247. </div>
  1248.  
  1249. {Body}
  1250. </div>
  1251. {/block:Reblogs}
  1252. {/block:RebloggedFrom}
  1253. {/block:Description}
  1254. {/block:Link}
  1255.  
  1256. {block:Chat}
  1257. <!-- post type: chat -->
  1258. {block:Title}
  1259. <div class="title">{Title}</div>
  1260. {/block:Title}
  1261.  
  1262. <div class="chat">
  1263. <div class="txt">
  1264. <ul>
  1265. {block:Lines}<li>{block:Label}<span class="label">{Label}</span>{/block:Label}
  1266. {Line}</li>{/block:Lines}
  1267. </ul>
  1268. </div>
  1269. </div>
  1270. {/block:Chat}
  1271.  
  1272. {block:Photo}
  1273. <!-- post type: single photo -->
  1274. <div class="photo-p">
  1275. <img src="{PhotoURL-1280}" alt="{PhotoAlt}">
  1276. </div>
  1277. {block:Caption}
  1278. {block:NotReblog}
  1279. <div class="txt">
  1280. {Caption}
  1281.  
  1282. {block:More}
  1283. <div class="more">
  1284. <a href="{Permalink}">continue reading...</a>
  1285. </div>
  1286. {/block:More}
  1287. </div>
  1288. {/block:NotReblog}
  1289.  
  1290. {block:RebloggedFrom}
  1291. {block:Reblogs}
  1292. <div class="txt">
  1293. <div class="tumblr_blog">
  1294. <img class="tumblr_avatar" src="{PortraitURL-64}">
  1295. <a {block:IsActive}href="{Permalink}"{/block:IsActive}>{Username}</a>
  1296. {block:IsDeactivated}
  1297. <span class="deactivated">deactivated</span>
  1298. {/block:IsDeactivated}
  1299. </div>
  1300.  
  1301. {Body}
  1302. </div>
  1303. {/block:Reblogs}
  1304. {/block:RebloggedFrom}
  1305. {/block:Caption}
  1306. {/block:Photo}
  1307.  
  1308. {block:Photoset}
  1309. <!-- post type: photoset -->
  1310. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1311. {block:Photos}
  1312. <div class="photo-data">
  1313. <div class="pxu-photo">
  1314. <img src="{PhotoURL-1280}" width="{PhotoWidth-1280}" height="{PhotoHeight-1280}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  1315. </div>
  1316.  
  1317. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1318. </div>
  1319. {/block:Photos}
  1320. </div>
  1321.  
  1322. {block:Caption}
  1323. {block:NotReblog}
  1324. <div class="txt">
  1325. {Caption}
  1326.  
  1327. {block:More}
  1328. <div class="more">
  1329. <a href="{Permalink}">continue reading...</a>
  1330. </div>
  1331. {/block:More}
  1332. </div>
  1333. {/block:NotReblog}
  1334.  
  1335. {block:RebloggedFrom}
  1336. {block:Reblogs}
  1337. <div class="txt">
  1338. <div class="tumblr_blog">
  1339. <img class="tumblr_avatar" src="{PortraitURL-64}">
  1340. <a {block:IsActive}href="{Permalink}"{/block:IsActive}>{Username}</a>
  1341. {block:IsDeactivated}
  1342. <span class="deactivated">deactivated</span>
  1343. {/block:IsDeactivated}
  1344. </div>
  1345.  
  1346. {Body}
  1347. </div>
  1348. {/block:Reblogs}
  1349. {/block:RebloggedFrom}
  1350. {/block:Caption}
  1351. {/block:Photoset}
  1352.  
  1353. {block:Video}
  1354. <!-- post type: video -->
  1355. <div class="video">{Video-500}</div>
  1356.  
  1357. {block:Caption}
  1358. {block:NotReblog}
  1359. <div class="txt">
  1360. {Caption}
  1361.  
  1362. {block:More}
  1363. <div class="more">
  1364. <a href="{Permalink}">continue reading...</a>
  1365. </div>
  1366. {/block:More}
  1367. </div>
  1368. {/block:NotReblog}
  1369.  
  1370. {block:RebloggedFrom}
  1371. {block:Reblogs}
  1372. <div class="txt">
  1373. <div class="tumblr_blog">
  1374. <img class="tumblr_avatar" src="{PortraitURL-64}">
  1375. <a {block:IsActive}href="{Permalink}"{/block:IsActive}>{Username}</a>
  1376. {block:IsDeactivated}
  1377. <span class="deactivated">deactivated</span>
  1378. {/block:IsDeactivated}
  1379. </div>
  1380.  
  1381. {Body}
  1382. </div>
  1383. {/block:Reblogs}
  1384. {/block:RebloggedFrom}
  1385. {/block:Caption}
  1386. {/block:Video}
  1387.  
  1388. {block:Audio}
  1389. <!-- post type: audio -->
  1390. <div class="audio" {block:AlbumArt}style="background-image:url('{AlbumArtURL}');"{/block:AlbumArt}>
  1391.  
  1392. <div class="audio-content">
  1393. {block:AudioPlayer}
  1394. <div class="audio-play">{AudioPlayer}</div>
  1395. {/block:AudioPlayer}
  1396.  
  1397. <div class="audio-info">
  1398. {block:TrackName}
  1399. <b>
  1400. {TrackName}
  1401. </b>
  1402. {/block:TrackName}
  1403.  
  1404. {block:Artist}
  1405. <span>
  1406. {Artist}
  1407. </span>
  1408. {/block:Artist}
  1409. </div>
  1410.  
  1411. {block:AlbumArt}
  1412. <div class="audio-art" style="background-image:url('{AlbumArtURL}');"></div>
  1413. {/block:AlbumArt}
  1414. </div>
  1415. </div>
  1416.  
  1417. {block:Caption}
  1418. {block:NotReblog}
  1419. <div class="txt">
  1420. {Caption}
  1421.  
  1422. {block:More}
  1423. <div class="more">
  1424. <a href="{Permalink}">continue reading...</a>
  1425. </div>
  1426. {/block:More}
  1427. </div>
  1428. {/block:NotReblog}
  1429.  
  1430. {block:RebloggedFrom}
  1431. {block:Reblogs}
  1432. <div class="txt">
  1433. <div class="tumblr_blog">
  1434. <img class="tumblr_avatar" src="{PortraitURL-64}">
  1435. <a {block:IsActive}href="{Permalink}"{/block:IsActive}>{Username}</a>
  1436. {block:IsDeactivated}
  1437. <span class="deactivated">deactivated</span>
  1438. {/block:IsDeactivated}
  1439. </div>
  1440.  
  1441. {Body}
  1442. </div>
  1443. {/block:Reblogs}
  1444. {/block:RebloggedFrom}
  1445. {/block:Caption}
  1446. {/block:Audio}
  1447.  
  1448. {block:Answer}
  1449. <!-- post type: ask -->
  1450. <div class="question-c">
  1451. <div class="question">
  1452. <div class="question-asker">
  1453. <b>{Asker} asked,</b>
  1454. </div>
  1455. <div class="question-content">
  1456. {Question}
  1457. </div>
  1458. </div>
  1459.  
  1460. <div class="question-img">
  1461. <img src="{AskerPortraitURL-128}">
  1462. </div>
  1463. </div>
  1464.  
  1465. {block:Answerer}
  1466. <div class="answer-c">
  1467. <div class="answer-img">
  1468. <img src="{AnswererPortraitURL-64}">
  1469. </div>
  1470. <div class="answer">
  1471. <div class="answer-asker">
  1472. <b>{Answerer} answered,</b>
  1473. </div>
  1474. <div class="answer-content">
  1475. {Answer}
  1476. </div>
  1477. </div>
  1478. </div>
  1479.  
  1480. {block:Reblogs}
  1481. <div class="txt">
  1482. <div class="tumblr_blog">
  1483. <img class="tumblr_avatar" src="{PortraitURL-64}">
  1484. <a {block:IsActive}href="{Permalink}"{/block:IsActive}>{Username}</a>
  1485. {block:IsDeactivated}
  1486. <span class="deactivated">deactivated</span>
  1487. {/block:IsDeactivated}
  1488. </div>
  1489.  
  1490. {Body}
  1491. </div>
  1492. {/block:Reblogs}
  1493.  
  1494.  
  1495. {/block:Answerer}
  1496. {block:NotReblog}
  1497. <div class="answer-c">
  1498. <div class="answer-img">
  1499. <img src="{PortraitURL-64}">
  1500. </div>
  1501. <div class="answer">
  1502. <div class="answer-asker">
  1503. <b>{Name} answered,</b>
  1504. </div>
  1505. <div class="answer-content">
  1506. {Replies}
  1507. </div>
  1508. </div>
  1509. </div>
  1510. {/block:NotReblog}
  1511. {/block:Answer}
  1512.  
  1513. <!-- post info -->
  1514.  
  1515. {block:Date}
  1516. <div style="clear:both;"></div>
  1517.  
  1518. <div class="post-date">
  1519.  
  1520. <div class="date-left">
  1521. {block:PinnedPostLabel}
  1522. <div class="pinned">
  1523. pinned
  1524. </div>
  1525. {/block:PinnedPostLabel}
  1526.  
  1527. <a href="{Permalink}">
  1528. <b>{TimeAgo}</b>
  1529. </a>
  1530.  
  1531. {block:NoteCount}
  1532. <a href="{Permalink}">
  1533. {NoteCountWithLabel}
  1534. </a>
  1535. {/block:NoteCount}
  1536. </div>
  1537.  
  1538. <div class="date-right">
  1539. <a href="{ReblogURL}" title="reblog">
  1540. <i data-feather="repeat"></i>
  1541. </a>
  1542. <a href="#" class="like" title="like">{LikeButton}
  1543. <i data-feather="heart"></i>
  1544. </a>
  1545. </div>
  1546.  
  1547. {block:PermalinkPage}
  1548.  
  1549. <div class="date-perma">
  1550. {block:RebloggedFrom}
  1551. <b>reblogged from</b>
  1552. <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1553. {/block:RebloggedFrom}
  1554.  
  1555. {block:ContentSource}
  1556. <br>
  1557. <b>original by</b>
  1558. <a href="{SourceURL}">{SourceTitle}</a>
  1559. {/block:ContentSource}
  1560. </div>
  1561.  
  1562. {/block:PermalinkPage}
  1563.  
  1564. {block:HasTags}
  1565. <div class="tags-c">
  1566. {block:Tags} <a href="{TagURL}" class="tags">{Tag}</a>{/block:Tags}
  1567. </div>
  1568. {/block:HasTags}
  1569. </div>
  1570. {/block:Date}
  1571.  
  1572. </div> <!-- end of post -->
  1573.  
  1574. <!-- page notes -->
  1575.  
  1576. {block:PostNotes}
  1577. <div class="pagenotes">
  1578. {PostNotes-64}
  1579. </div>
  1580. {/block:PostNotes}
  1581.  
  1582.  
  1583. {/block:Posts}
  1584.  
  1585. </div> <!-- end of entries -->
  1586.  
  1587.  
  1588. <div class="credit">
  1589. <a href="https://pirateskinned.tumblr.com/" title="theme by pirateskinned">
  1590. <i data-feather="help-circle"></i>
  1591. </a>
  1592. </div>
  1593.  
  1594. </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!