Advertisement
mothmans

infin-large sbar

Oct 7th, 2019
120
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.39 KB | None | 0 0
  1. <!--
  2.  
  3. infinity by ananda (captainmarvels)
  4. thanks for 10k followers! :)
  5.  
  6. LAST UPDATED: june 12th 2019
  7.  
  8. ////////////////////////////////////////////////
  9.  
  10. base code
  11. © sorrism
  12.  
  13. pxu photosets
  14. the MIT license (MIT) copyright (c) 2013
  15. © pixel union, modified by bychloethemes
  16.  
  17. feather icons
  18. © cole bemis
  19.  
  20. -->
  21.  
  22. <!DOCTYPE html>
  23. <head>
  24.  
  25. <title>{block:TagPage}#{Tag} : {/block:TagPage} {block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  26.  
  27. <link rel="shortcut icon" href="{favicon}">
  28.  
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  31.  
  32. <!--default variables-->
  33.  
  34. <meta name="if:blogtitle" content="1"/>
  35. <meta name="if:draggable tags" content="1"/>
  36. <meta name="if:search" content="1"/>
  37.  
  38. <meta name="select:body font" content="Helvetica" title="Helvetica"/>
  39. <meta name="select:body font" content="Heebo" title="Heebo"/>
  40. <meta name="select:body font" content="Roboto" title="Roboto"/>
  41.  
  42. <meta name="select:post size" content="540" title="540"/>
  43. <meta name="select:post size" content="450" title="450"/>
  44. <meta name="select:post size" content="350" title="350"/>
  45.  
  46. <meta name="color:background" content="#f7f7f7"/>
  47. <meta name="color:text" content="#444444"/>
  48. <meta name="color:link" content="#888888"/>
  49. <meta name="color:link hover" content="#868686"/>
  50.  
  51. <meta name="text:home title" content="index"/>
  52. <meta name="text:ask title" content="message"/>
  53. <meta name="text:archive title" content="history"/>
  54. <meta name="text:link 1 url" content="" />
  55. <meta name="text:link 1 name" content="" />
  56. <meta name="text:link 2 url" content="" />
  57. <meta name="text:link 2 name" content="" />
  58. <meta name="text:link 3 url" content="" />
  59. <meta name="text:link 3 name" content="" />
  60. <meta name="text:link 4 url" content="" />
  61. <meta name="text:link 4 name" content="" />
  62.  
  63. <meta name="image:sidebar" content=""/>
  64.  
  65. <!--fonts-->
  66.  
  67. <link href="https://fonts.googleapis.com/css?family=Bai+Jamjuree:400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
  68. <link href="https://fonts.googleapis.com/css?family=Mada:400,500,600,700|Mada:400,700&display=swap" rel="stylesheet">
  69.  
  70. <link href="https://fonts.googleapis.com/css?family=Heebo:400,500,700|Roboto:400,400i,500,500i,700,700i" rel="stylesheet">
  71.  
  72. <!--scripts-->
  73.  
  74. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  75. <!--feather icons by -->
  76. <script src="https://unpkg.com/feather-icons"></script>
  77. <!--video resizing by shythemes-->
  78. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script><script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  79. <!--pxu photosets by pixel union and bychloethemes-->
  80. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script> <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  81.  
  82. <!--css customization-->
  83.  
  84. <style type="text/css">
  85.  
  86.  
  87. .tmblr-full img {
  88. max-width:100%;
  89. }
  90.  
  91. .vignette, #vignette {
  92. opacity:0;
  93. }
  94.  
  95. .lightbox-image, #tumblr_lightbox img {
  96. box-shadow:none !important;
  97. border-radius:0 !important;
  98. max-width:none;
  99. }
  100.  
  101. .tmblr-lightbox, #tumblr_lightbox {
  102. background-color:rgba(255,255,255,.8) !important;
  103. }
  104.  
  105. #tumblr_lightbox img {
  106. padding:5px;
  107. -moz-box-sizing:border-box;
  108. box-sizing:border-box;
  109. }
  110.  
  111. .lightbox-image {
  112. padding:0px;
  113. background-color:rgba(255,255,255,1) !important;
  114. }
  115.  
  116. /*tumblr controls by cyantists*/
  117.  
  118. iframe.tmblr-iframe {
  119. z-index:99999999999999!important;
  120. top:14px!important;
  121. right:19px!important;
  122. opacity:0;
  123. padding-right:38px;
  124. /* delete invert(1) from here */
  125. filter:invert(1) contrast(150%);
  126. -webkit-filter:invert(1) contrast(150%);
  127. -o-filter:invert(1) contrast(150%);
  128. -moz-filter:invert(1) contrast(150%);
  129. -ms-filter:invert(1) contrast(150%);
  130. /* to here if your blog has a dark background */
  131. transform:scale(0.75);
  132. transform-origin:100% 0;
  133. -webkit-transform:scale(0.75);
  134. -webkit-transform-origin:100% 0;
  135. -o-transform:scale(0.75);
  136. -o-transform-origin:100% 0;
  137. -moz-transform:scale(0.75);
  138. -moz-transform-origin:100% 0;
  139. -ms-transform:scale(0.75);
  140. -ms-transform-origin:100% 0;
  141. -webkit-transition:opacity .3s ease-out;
  142. transition:opacity .3s ease-out;
  143. }
  144.  
  145. iframe.tmblr-iframe:hover {
  146. opacity:0.6!important;}
  147.  
  148. .hcontrols {
  149. position:fixed;
  150. top:8px;
  151. right:4px;
  152. z-index:999999999;}
  153.  
  154. .hcontrols svg {
  155. opacity:0.5;
  156. width:20px;
  157. height:20px;
  158. padding:15px;
  159. stroke-width:2;
  160. }
  161.  
  162. .hcontrols svg path {
  163. fill:{color:text};/* change this to change the color of the icon */
  164. }
  165.  
  166. ::-webkit-scrollbar {
  167. width:3px;
  168. height:3px;
  169. }
  170.  
  171. ::-webkit-scrollbar-thumb {
  172. background-color:{color:text};
  173. min-height:10px;
  174. min-width:10px;
  175. }
  176.  
  177. .ui-tooltip {
  178. position:absolute;
  179. z-index:9999;
  180. padding-top:10px;
  181. border-radius:10%;
  182. }
  183.  
  184. .ui-tooltip-content {
  185. padding:0.50em 0.70em;
  186. background-color:#fff;
  187. box-shadow:0 1px 3px #eee;
  188. border-radius:4px;
  189. font-size:11px;
  190. text-transform:lowercase;
  191. }
  192.  
  193. ::selection {
  194. background:#f8f8f8;
  195. color:{color:text};
  196. padding:3px;
  197. }
  198.  
  199. ::-moz-selection {
  200. background:#f8f8f8;
  201. color:#f8f8f8;
  202. }
  203.  
  204. ::-webkit-selection {
  205. background:#f8f8f8;
  206. color:#f8f8f8;
  207. }
  208.  
  209. body {
  210. font:11px {select:body font}, sans-serif;
  211. background:{color:background};
  212. color:{color:text};
  213. line-height:1.8em;
  214. font-style:normal;
  215. word-wrap:break-word;
  216. text-align:left;
  217. opacity: 1;
  218. transition: 1s opacity;
  219. }
  220.  
  221. body.fade-out {
  222. opacity: 0;
  223. transition: none;
  224. }
  225.  
  226. a {
  227. color:{color:link};
  228. text-decoration:none;
  229. transition:all .3s linear;
  230. -webkit-transition:all .3s linear;
  231. -o-transition:all .3s linear;
  232. -moz-transition:all .3s linear;
  233. }
  234.  
  235. a:hover {
  236. color:{color:link hover};
  237. }
  238.  
  239. a, a img {cursor:pointer;}
  240.  
  241. img {
  242. opacity:1;
  243. border:0;
  244. text-decoration:none;
  245. max-width:100%;
  246. height:auto;
  247. display:block;
  248. }
  249.  
  250. b, strong, b a, strong a {
  251. font-weight:700!important;
  252. color:{color:text};
  253. }
  254.  
  255. small, big, sub, pre {
  256. margin:0;
  257. font-size:1em!important;
  258. vertical-align:baseline!important;
  259. }
  260.  
  261. i {
  262. font-style:italic;
  263. color:{color:text};
  264. }
  265.  
  266. h1, h2, h3, h4 {
  267. margin:1em 0;
  268. font-family:'Mada', sans-serif;
  269. color:{color:text};
  270. letter-spacing:0.70px;
  271. text-transform:uppercase;
  272. font-weight:700;
  273. font-size:13px;
  274. }
  275.  
  276. p {margin:1em 0;}
  277.  
  278. ul:first-of-type,
  279. ol:first-of-type,
  280. p:first-of-type {margin-top:0;}
  281.  
  282. ul:last-of-type,
  283. ol:last-of-type,
  284. p:last-of-type {margin-bottom:0;}
  285.  
  286. blockquote, ol, ul, pre, figure {margin:1em 0;}
  287.  
  288. .posts h1:first-child,
  289. .posts h2:first-child,
  290. .posts h3:first-child,
  291. .posts h4:first-child {margin-top:0;}
  292.  
  293. hr {
  294. border:none;
  295. box-shadow:0;
  296. margin:2em auto;
  297. width:75px;
  298. }
  299.  
  300. ul, ol {
  301. list-style-type:circle;
  302. }
  303.  
  304. blockquote {
  305. padding:0;
  306. margin:0;
  307. border:0;
  308. }
  309.  
  310. pre {
  311. padding:0;
  312. margin:0;
  313. line-height:inherit!important;
  314. background:transparent;
  315. font-family:inherit!Important;
  316. font-size:inherit!important;
  317. white-space:pre-wrap;
  318. white-space:-moz-pre-wrap;
  319. white-space:-pre-wrap;
  320. white-space:-o-pre-wrap;
  321. word-wrap:break-word;
  322. }
  323.  
  324. #container {
  325. width:calc({select:post size}px + 200px + 100px);
  326. margin:0 auto;
  327. }
  328.  
  329. aside {
  330. margin:100px 0 0 0;
  331. display:block;
  332. width:268px;
  333. position:fixed;
  334. padding:1.5em;
  335. background-color:#fff;
  336. box-shadow:0 0px 0px #eee;
  337. border-bottom:0px solid #eee;
  338. border-radius:0px;
  339. }
  340.  
  341. .sb img {
  342. margin-top:0;
  343. margin-bottom:1em;
  344. left:0;
  345. display:block;
  346. width:268px;
  347. border:0px solid #eee;
  348. padding:3px;
  349. box-shadow:0 0px 0px #eee;
  350. }
  351.  
  352. #blogtitle {
  353. margin:0 0 1em 0;
  354. display:block;
  355. text-align:left;
  356. }
  357.  
  358. #blogtitle a {
  359. letter-spacing:0.70px;
  360. font-family:'Mada', sans-serif;
  361. color:{color:text};
  362. font-size:12px;
  363. text-transform:uppercase;
  364. font-weight:700;
  365. }
  366.  
  367. #blogtitle a:hover {
  368. color:{color:link hover};
  369. }
  370.  
  371. #description {margin:0 0 1em 0; text-align:left;}
  372.  
  373. nav {
  374. text-align:left;
  375. }
  376.  
  377. nav a {
  378. font-weight:700!important;
  379. letter-spacing:0.70px;
  380. font-family:Mada, sans-serif;
  381. text-transform:uppercase;
  382. color:{color:text};
  383. display:inline-block;
  384. }
  385.  
  386. nav a:not(:last-child) {
  387. margin-right:10px;
  388. }
  389.  
  390. nav a:hover {
  391. color:{color:link hover};
  392. }
  393.  
  394. nav a svg {
  395. margin-right:5px;
  396. vertical-align:middle;
  397. stroke:{color:accent};
  398. stroke-width:3;
  399. stroke-linecap:round;
  400. stroke-linejoin:round;
  401. fill:none;
  402. padding-bottom:2px;
  403. width:14px;
  404. height:auto;
  405. overflow:visible;
  406. }
  407.  
  408. #search {
  409. border-top:1px solid #eee;
  410. padding-top:1em;
  411. margin-top:1em;
  412. display:block;
  413. }
  414.  
  415. #search svg {
  416. stroke:{color:link};
  417. stroke-width:3;
  418. stroke-linecap:round;
  419. stroke-linejoin:round;
  420. fill:none;
  421. width:10px;
  422. height:auto;
  423. padding:0px;
  424. overflow:visible;
  425. margin-right:0.5em;
  426. }
  427.  
  428. #search input {
  429. text-align:left;
  430. background:transparent;
  431. width:90%;
  432. text-transform:normal;
  433. font:11px {select:body font}, sans-serif;
  434. font-weight:normal;
  435. border:none;
  436. -webkit-transition:1s;
  437. -moz-transition:1s;
  438. -o-transition:1s;
  439. }
  440.  
  441. #search input:focus {
  442. outline:none;
  443. opacity:1;
  444. }
  445.  
  446. #search input:hover {
  447. -webkit-transition:1s;
  448. -moz-transition:1s;
  449. -o-transition:1s;
  450. }
  451.  
  452. input:focus::-webkit-input-placeholder {opacity:1}
  453. input:focus:-moz-placeholder,
  454. input:focus::-moz-placeholder,
  455. input:focus:-ms-input-placeholder {color:transparent;}
  456.  
  457. .entries {
  458. margin-top: 100px;
  459. margin-right: 0px;
  460. margin-bottom: 100px;
  461. margin-left: 0px;
  462. left: 15px;
  463. position: relative;
  464. width:540px;
  465. float:right;
  466. }
  467.  
  468. .posts {
  469. width:{select:post size}px;
  470. text-align:left;
  471. margin-bottom:100px;
  472. padding:1.5em;
  473. background-color:#fff;
  474. box-shadow:0 0px 0px #eee;
  475. border-bottom:0px solid #eee;
  476. border-radius:0px;
  477. }
  478.  
  479. .posts:last-child {
  480. margin-bottom:0px;
  481. }
  482.  
  483. {block:Permalinkpage}
  484. .posts {
  485. margin-bottom:30px;
  486. }
  487. {/block:Permalinkpage}
  488.  
  489. .ph {
  490. position:relative;
  491. overflow:hidden;
  492. margin:0;
  493. }
  494.  
  495. .ph img {
  496. width:auto;
  497. display:block;
  498. }
  499.  
  500. .player {
  501. width:25px;
  502. height:24px;
  503. position:absolute;
  504. left:10px;
  505. top:calc(50% - 15px);
  506. display:block;
  507. overflow:hidden;
  508. }
  509.  
  510. .hold {
  511. text-align:left;
  512. background:#f9f9f9;
  513. box-shadow:0 1px 1px #eaeaea;
  514. -webkit-box-shadow:0 1px 1px #eaeaea;
  515. position:relative;
  516. border-radius:4px;
  517. display:block;
  518. min-height:24px;
  519. padding:15px;
  520. }
  521.  
  522. .audio_info {
  523. vertical-align:middle;
  524. line-height:12px;
  525. margin-left:35px;
  526. max-width:calc(100% - 35px);
  527. }
  528.  
  529. .audio_info span {
  530. white-space:nowrap;
  531. overflow:hidden;
  532. text-overflow:ellipsis;
  533. display:block;
  534. }
  535.  
  536. .hold .track {color:{color:accent};}
  537.  
  538. .pagination {
  539. padding:1.5em;
  540. width:540px;
  541. text-align:center;
  542. }
  543.  
  544. .pagination a {
  545. margin:0 5px;
  546. }
  547.  
  548. .forward svg {
  549. width:12px;
  550. height:12px;
  551. stroke:{color:text};
  552. stroke-width:2;
  553. stroke-linecap:round;
  554. stroke-linejoin:round;
  555. fill:none;
  556. }
  557.  
  558. .backward svg {
  559. width:12px;
  560. height:12px;
  561. background-color:#fff;
  562. border-radius:100%;
  563. padding:1em;
  564. stroke:{color:text};
  565. stroke-width:2;
  566. stroke-linecap:round;
  567. stroke-linejoin:round;
  568. fill:none;
  569. box-shadow:0 1px 1px #eee;
  570. }
  571.  
  572. .comment {
  573. padding:0 0 1.5em 0;
  574. list-style:none;
  575. }
  576.  
  577. .comment:last-of-type {padding-bottom:0!important;}
  578.  
  579. .user {
  580. display:inline-block;
  581. line-height:28px;
  582. font-size:10.5px;
  583. letter-spacing:0.70px;
  584. color:{color:text};
  585. display:block;
  586. text-transform:uppercase;
  587. font-family:'Mada', sans-serif;
  588. font-weight:700;
  589. margin-bottom:.75em;
  590. }
  591.  
  592. .icon {
  593. vertical-align:top;
  594. margin-right:4px;
  595. display:inline-block;
  596. float:left;
  597. }
  598.  
  599. .icon img {
  600. width:18px;
  601. height:18px;
  602. border-radius:100%;
  603. border:0px solid #eee;
  604. padding:3px;
  605. box-shadow:0 0px 0px #eee;
  606. }
  607.  
  608. .captioned .comment:first-of-type {margin-top:1.5em;}
  609.  
  610. .tex li, .tex blockquote {text-align:left;}
  611.  
  612. .a {
  613. display:inline-block;
  614. width:540px;
  615. }
  616.  
  617. .q {
  618. margin-bottom:0.9em;
  619. width:calc({select:post size}px - 85px);
  620. float:left;
  621. border-radius:6px;
  622. background:#f9f9f9;
  623. padding:1.5em;
  624. text-align:left;
  625. position: relative;
  626. box-shadow:0 1px 3px #eee;
  627. }
  628.  
  629. .q:after {
  630. content:"";
  631. width:0px;
  632. height:0px;
  633. position:absolute;
  634. border-left:10px solid #f9f9f9;
  635. border-right:10px solid transparent;
  636. border-top:10px solid #f9f9f9;
  637. border-bottom:10px solid transparent;
  638. right:-12px;
  639. top:0px;
  640. }
  641.  
  642. .as b {
  643. font-family:'Mada', sans-serif;
  644. letter-spacing:0.70px;
  645. color:{color:text};
  646. text-transform:uppercase;
  647. font-weight:700;
  648. }
  649.  
  650. .chat {
  651. text-align:left;
  652. padding:0;
  653. margin:0;
  654. list-style:none;
  655. }
  656.  
  657. .l {
  658. margin-bottom:1em;
  659. }
  660.  
  661. .l:last-child {
  662. margin-bottom:0;
  663. }
  664.  
  665. .label {
  666. padding-right:5px;
  667. font-weight:700;
  668. color:{color:text};
  669. display:inline-block;
  670. }
  671.  
  672. .permalink {
  673. margin-top:2em;
  674. text-align:left;
  675. border-top:1px solid #eee;
  676. }
  677.  
  678. .permas {
  679. margin:-10px 0 0 0;
  680. }
  681.  
  682. .permas span {
  683. display:inline-block;
  684. margin:0 auto;
  685. padding:0;
  686. background:#fff;
  687. }
  688.  
  689. .permaleft a {
  690. display:inline-block;
  691. text-transform:lowercase;
  692. margin-right:8px;
  693. text-transform:uppercase;
  694. font-family:'Mada', sans-serif;
  695. letter-spacing:0.70px;
  696. font-weight:700;
  697. {block:IndexPage}
  698. color:{color:text};
  699. {/block:IndexPage}
  700. {block:PermalinkPage}
  701. color:{color:link};
  702. {/block:PermalinkPage}
  703. }
  704.  
  705. .permaright a {
  706. display:inline-block;
  707. color:{color:text};
  708. text-transform:uppercase;
  709. font-family:'Mada', sans-serif;
  710. letter-spacing:0.70px;
  711. font-weight:700;
  712. }
  713.  
  714. .permaright a:first-child {
  715. margin-left:8px;
  716. }
  717.  
  718. .permaright {
  719. float:right;
  720. }
  721.  
  722. .permas a:hover {
  723. color:{color:link hover};
  724. }
  725.  
  726. /*svg icons tutorial by shythemes*/
  727.  
  728. .controls svg {
  729. stroke:{color:text};
  730. stroke-width:3;
  731. stroke-linecap:round;
  732. stroke-linejoin:round;
  733. fill:none;
  734. width:10px;
  735. height:auto;
  736. padding:0px;
  737. display:block;
  738. overflow:visible;
  739. }
  740.  
  741. .controls {
  742. display:inline;
  743. }
  744.  
  745. .controls a {
  746. vertical-align:middle;
  747. position:relative;
  748. display:inline-block;
  749. overflow:hidden;
  750. width:12px;
  751. height:12px;
  752. }
  753.  
  754. .controls .like .liked + svg path {
  755. stroke-width:2;
  756. stroke:#c93d12;
  757. fill:#fb4c16;
  758. }
  759.  
  760. .controls .like .like_button {
  761. position:relative;
  762. }
  763.  
  764. .controls .like .like_button iframe {
  765. position:absolute;
  766. top:-3px;
  767. left:-3px;
  768. bottom:0;
  769. right:0;
  770. z-index:2;
  771. opacity:0;
  772. }
  773.  
  774. .tags {
  775. margin:0.5em 0 0 0;
  776. width:{select:post size}px;
  777. text-align:left;
  778. }
  779.  
  780. .tags a {
  781. font-weight:normal;
  782. text-transform:none;
  783. color:{color:link};
  784. display:inline;
  785. margin-right:1em;
  786. }
  787.  
  788. /*draggable tags : jqueryscript.net*/
  789.  
  790. {block:ifdraggabletags}
  791. .post_tags,
  792.  
  793. .post_tags a { color:{color:link} }
  794.  
  795. .post_tags {
  796. margin:0.5em 0 0 0;
  797. text-align:left;
  798. position:relative;
  799. white-space:nowrap;
  800. overflow:hidden;
  801. }
  802.  
  803. .post_tags.draggable .post_tags_inner {
  804. -webkit-touch-callout:none;
  805. -webkit-user-select:none;
  806. -khtml-user-select:none;
  807. -moz-user-select:none;
  808. -ms-user-select:none;
  809. user-select:none;
  810. }
  811.  
  812. .post_tags_inner {
  813. position:relative;
  814. padding:0px 20px 0px 0;
  815. }
  816.  
  817. .post_tags a,
  818. .post_tags .post_tag {
  819. color:{color:link};
  820. text-decoration:none;
  821. margin-right:1em;
  822. text-transform:lowercase !important;
  823. }
  824.  
  825. .post_tags a:before {content:'#';}
  826.  
  827. .post_tags:after {
  828. content:'';
  829. position:absolute;
  830. top:0;
  831. right:0;
  832. bottom:0;
  833. width:20px;
  834. background:-moz-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
  835. background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #FFF));
  836. background:-webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, #FFF 100%);
  837. background:-o-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
  838. background:-ms-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
  839. background:linear-gradient(to right, rgba(255, 255, 255, 0) 0, #FFF 100%);
  840. }
  841.  
  842. .post_tags a:hover,
  843.  
  844. .post_tags .post_tag:hover,
  845.  
  846. .post_tags a:focus,
  847.  
  848. .post_tags .post_tag:focus,
  849.  
  850. .post_tags a:active,
  851.  
  852. .post_tags .post_tag:active { color:{color:link}; }
  853. {/block:ifdraggabletags}
  854.  
  855. .quote:before {
  856. content:'“';
  857. padding-right:0.5px;
  858. }
  859.  
  860. .quote:after {
  861. content:'”';
  862. padding-left:0.5px;
  863. }
  864.  
  865. .quote {
  866. font-size:12px;
  867. font-style:italic;
  868. }
  869.  
  870. .source:before {
  871. content:'—';
  872. margin-right:5px;
  873. color:#ccc;
  874. }
  875.  
  876. .source {
  877. padding-top:0.5em;
  878. }
  879.  
  880. .pagenotes {
  881. padding:1.5em;
  882. width:{select:post size}px;
  883. background-color:#fff;
  884. box-shadow:0 0px 0px #eee;
  885. border-bottom:1px solid #eee;
  886. border-radius:0px;
  887. }
  888.  
  889. .pagenotes-scroll::-webkit-scrollbar {
  890. width:10px;
  891. height:10px;
  892. margin-right:5px;
  893. }
  894.  
  895. .pagenotes-scroll::-webkit-scrollbar-track {
  896. border:5px solid #fff; /* background color */
  897. background-color:#eee; /* light border color */
  898. }
  899.  
  900. .pagenotes-scroll::-webkit-scrollbar-thumb {
  901. border:4px solid #fff; /* background color */
  902. background-color:{color:text}; /* dark border color */
  903. }
  904.  
  905. .pagenotes-scroll {
  906. width:{select:post size}px;
  907. padding-right:0;
  908. max-height:300px;
  909. overflow:auto;
  910. }
  911.  
  912. .pagenotes,
  913. .pagenotes-content,
  914. .pagenotes-scroll:active {
  915. border:0;
  916. outline:0;
  917. }
  918.  
  919. .pagenotes ol, .pagenotes ul {
  920. padding:0;
  921. margin:0;
  922. }
  923.  
  924. li.note {
  925. display:block;
  926. padding:0;
  927. }
  928.  
  929. li.note:not(:first-child):not(:last-child) {
  930. margin:8px 0;
  931. }
  932.  
  933. ol.notes li.note img.avatar {display:none;}
  934.  
  935. a.more_notes_link {
  936. display:block;
  937. text-align:center;
  938. }
  939.  
  940. .pagenotes blockquote {
  941. margin-left:2em;
  942. }
  943.  
  944. .c {
  945. opacity:0.8;
  946. font-weight:{select:bold weight};;
  947. display:block;
  948. font-size:13px;
  949. z-index:1;
  950. position:fixed;
  951. right:15px;
  952. bottom:20px;
  953. color:{color:text};
  954. }
  955.  
  956. {CustomCSS}
  957.  
  958. </style>
  959.  
  960. </head>
  961. <body>
  962. <script>document.body.className += ' fade-out';</script>
  963.  
  964. <div id="container">
  965.  
  966. <aside>
  967.  
  968. <div class="sb"><a href="/">{block:ifsidebarimage}<img src="{image:sidebar}">{/block:ifsidebarimage} {block:ifnotsidebarimage}<img src="{PortraitURL-64}">{/block:ifnotsidebarimage}</a></div>
  969.  
  970. {block:ifblogtitle}<div id="blogtitle"><a href="/">{Title}</a></div>{/block:ifblogtitle}
  971.  
  972. <div id="description">{Description}</div>
  973.  
  974. <nav>{block:ifhometitle}<a href="/">{text:home title}</a>{/block:ifhometitle}{block:ifasktitle}<a href="/ask">{text:ask title}</a>{/block:ifasktitle}{block:ifarchivetitle}<a href="/archive">{text:archive title}</a>{/block:ifarchivetitle}{block:iflink1url}<a href="{text:link 1 url}">{text:link 1 name}</a>{/block:iflink1url}{block:iflink2url}<a href="{text:link 2 url}">{text:link 2 name}</a>{/block:iflink2url}{block:iflink3url}<a href="{text:link 3 url}">{text:link 3 name}</a>{/block:iflink3url}{block:iflink4url}<a href="{text:link 4 url}">{text:link 4 name}</a>{/block:iflink4url}</nav>
  975.  
  976. {block:ifsearch}<form id="search" action="/search" method="get">
  977. <i data-feather="search"></i> <input type="text" name="q" value="{SearchQuery}" placeholder="search" autocomplete="off"/></form>{/block:ifsearch}
  978. </aside><!--sidebar-->
  979.  
  980. <div class="entries">
  981. {block:Posts}
  982. <div class="posts {block:caption}captioned{/block:caption}" id="{PostID}">
  983.  
  984. {block:Quote}
  985. <div class="quote">{quote}</div>
  986. {block:Source}
  987. <div class="source">{source}</div>
  988. {/block:Source}
  989. {/block:Quote}
  990.  
  991. {block:Text}
  992. {block:Title}<h1>{title}</h1>{/block:Title}
  993. {block:RebloggedFrom}
  994. {block:Reblogs}
  995. <li class="comment {block:Title}ted{/block:Title}">
  996. <a href="{Permalink}" class="icon"><img src="{PortraitURL-64}"></a> <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a><div class="tex">{body}</div></li>
  997. {/block:Reblogs}
  998. {/block:RebloggedFrom}
  999. {block:NotReblog}
  1000. <li class="comment {block:Title}ted{/block:Title}"><div class="tex">{body}</div></li>
  1001. {/block:NotReblog}
  1002. {/block:Text}
  1003.  
  1004. {block:Link}<h1><a href="{URL}">{name}</a></h1>
  1005. {block:Description}
  1006. {block:NotReblog}
  1007. <li class="comment ted"><div class="tex">{description}</div></li>
  1008. {/block:NotReblog}
  1009. {/block:Description}
  1010. {block:RebloggedFrom}
  1011. {block:Reblogs}
  1012. <li class="comment"><a href="{Permalink}" class="icon"><img src="{PortraitURL-64}"></a> <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a><div class="tex">{body}</div></li>
  1013. {/block:Reblogs}
  1014. {/block:RebloggedFrom}
  1015. {/block:Link}
  1016.  
  1017. {block:Chat}
  1018. {block:Title}<h1>{title}</h1>{/block:Title}
  1019. <ol class="chat {block:Title}ted{/block:Title}">
  1020. {block:lines}<li class="l {Alt}">{block:label}<span class="label">{label}</span>{/block:label}{line}</li>{/block:lines}
  1021. </ol>
  1022. {/block:Chat}
  1023.  
  1024. <div class="ph">
  1025.  
  1026. {block:Photo}{linkopentag}<img src="{photoURL-HighRes}" alt="{PhotoAlt}"/>{linkclosetag}{/block:Photo}
  1027.  
  1028. {block:Photoset}
  1029. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1030. {/block:Photoset}
  1031.  
  1032. <div class="video">{Video-500}</div>
  1033.  
  1034. {block:Audio}
  1035. {block:audioplayer}
  1036. <div class="hold">
  1037. <div class="player">{audioplayerwhite}</div>
  1038. <div class="audio_info">{block:trackname}<span class="track">{trackname}</span>{/block:trackname} {block:artist}<span class="artist">{artist}</span>{/block:artist}</div>
  1039. </div>
  1040. {/block:audioplayer}
  1041. {/block:Audio}
  1042.  
  1043. {block:caption}
  1044. {block:Reblogs}
  1045. <li class="comment"><a href="{Permalink}" class="icon"><img src="{PortraitURL-64}"></a> <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a><div class="tex">{body}</div></li>
  1046. {/block:Reblogs}
  1047. {block:NotReblog}
  1048. <li class="comment"><div class="tex">{caption}</div></li>
  1049. {/block:NotReblog}
  1050. {/block:caption}
  1051.  
  1052. </div><!--ph-->
  1053.  
  1054. {block:Answer}
  1055. <div class="a">
  1056. <div class="q"><div class="as"><b>{asker}</b></div> {question}</div>
  1057. <img src="{AskerPortraitURL-40}" style="
  1058. float:right;
  1059. width:30px;
  1060. height:30px;
  1061. display:inline;
  1062. -moz-border-radius:100px;
  1063. -webkit-border-radius:100px;
  1064. border-radius:100%;
  1065. border:1px solid #eee;
  1066. padding:3px;
  1067. box-shadow:0 1px 3px #eee;"/>
  1068. </div>
  1069. {block:Answerer}
  1070. <div class="a">
  1071. <div class="q"><div class="as"><b>{answerer}</b></div> {answer}</div>
  1072. <img src="{AnswererPortraitURL-40}" style="
  1073. float:right;
  1074. width:30px;
  1075. height:30px;
  1076. display:inline;
  1077. -moz-border-radius:100px;
  1078. -webkit-border-radius:100px;
  1079. border-radius:100%;
  1080. border:1px solid #eee;
  1081. padding:3px;
  1082. box-shadow:0 1px 3px #eee;"/>
  1083. </div>
  1084. {/block:Answerer}
  1085. {block:NotReblog}
  1086. <li class="comment"><a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a> <div class="tex">{replies}</div></li>
  1087. {/block:NotReblog}
  1088. {block:RebloggedFrom}
  1089. {block:Reblogs}
  1090. <li class="comment"><a href="{Permalink}" class="icon"><img src="{PortraitURL-64}"></a> <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a> <div class="tex">{body}</div></li>
  1091. {/block:Reblogs}
  1092. {/block:RebloggedFrom}
  1093. {/block:Answer}
  1094.  
  1095. {block:Date}
  1096. <div class="permalink">
  1097. <div class="permas">
  1098. <span class="permaleft">
  1099. {block:IndexPage}
  1100. <a href="{permalink}">{DayofWeek}</a>
  1101. {block:NoteCount}<a href="{permalink}" class="notecount">{NoteCount}</a>{/block:NoteCount}
  1102.  
  1103. <div class="controls">
  1104. <span><a href="{ReblogURL}" target="_blank" class="reblog" title="reblog post"><i data-feather="share-2"></i></a></span>
  1105. <span><a href="#" class="like" title="like post">{LikeButton}<i data-feather="heart"></i></a></span>
  1106. </div>
  1107.  
  1108. {/block:IndexPage}
  1109. {block:PermalinkPage}posted on <a href="{permalink">{Month} {DayOfMonth}{DayOfMonthSuffix} </a>{/block:PermalinkPage}
  1110. </span>
  1111. <span class="permaright">
  1112. {block:RebloggedFrom}<a href="{ReblogParentURL}">via</a>{block:ContentSource} / <a href="{ReblogRootURL}">source</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:PermalinkPage}
  1113. </span>
  1114. </div>
  1115. </div>
  1116.  
  1117. {block:hasTags}
  1118. {block:ifdraggabletags}<div class="post_tags draggable"><div class="post_tags_inner"> {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</div></div>{/block:ifdraggabletags}
  1119.  
  1120. {block:ifnotdraggabletags}<div class="tags">{block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}</div>{/block:ifnotdraggabletags}
  1121. {/block:hasTags}
  1122. {/block:Date}
  1123. </div><!--posts-->
  1124.  
  1125. {block:PostNotes}
  1126. <div class="pagenotes" tabindex="0">
  1127. {block:NoteCount}<h1 style="margin-top:0">{NoteCountwithLabel}</h1>{/block:NoteCount}
  1128. <div class="pagenotes-scroll">
  1129. <div class="pagenotes-content">
  1130. {PostNotes}
  1131. </div>
  1132. </div>
  1133. </div>
  1134. {/block:PostNotes}
  1135.  
  1136. {/block:Posts}
  1137.  
  1138. {block:Pagination}
  1139. <div class="pagination">
  1140. {block:PreviousPage}<a href="{PreviousPage}">previous</a></span> / {/block:PreviousPage}
  1141. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  1142. </div>
  1143. {/block:Pagination}
  1144. </div><!--entries-->
  1145.  
  1146. </div><!--container-->
  1147.  
  1148.  
  1149. <script>
  1150. feather.replace()
  1151. var $container = $('.posts');
  1152. $container.find('.notecount').each(function(){
  1153. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1154. if (n > 999) {
  1155. n = Math.floor(n / 100) / 10;
  1156. $(this).text(n + 'k');
  1157. }
  1158. });
  1159. $(document).ready(function() {
  1160. $('body').tooltip({track:false});
  1161. $('iframe.tumblr_audio_player').load( function() {
  1162. $('iframe.tumblr_audio_player').contents().find("head")
  1163. .append($("<style type='text/css'> .audio-player{background:{color:accent} !important} </style>"));
  1164. });
  1165. });
  1166. $(function() {
  1167. $('body').removeClass('fade-out');
  1168. });
  1169. $(document).ready(function(){
  1170. $('.photo-slideshow').pxuPhotoset({
  1171. lightbox:true,
  1172. rounded:false,
  1173. gutter:'4px',
  1174. borderRadius:'2px',
  1175. photoset:'.photo-slideshow',
  1176. photoWrap:'.photo-data',
  1177. photo:'.pxu-photo'
  1178. });
  1179. });
  1180. </script>
  1181.  
  1182. {block:ContentSource}
  1183. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1184. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}"/>
  1185. {/block:SourceLogo}
  1186. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}-->
  1187. {/block:ContentSource}
  1188.  
  1189. {block:ifdraggabletags}
  1190. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  1191.  
  1192. <script>
  1193. $(document).ready(function(){
  1194. $(".post_tags_inner").draggable({
  1195. axis :"x",
  1196. scroll:false,
  1197. stop:function() {
  1198. var __left = $(this).css("left").replace(/[^-\d\.]/g, '');
  1199. if(__left > 0){
  1200. $(this).animate({left:0}, 400, 'easeOutExpo');
  1201. }
  1202. var __width = $(this).outerWidth();
  1203. var __parentWidth = $(".post_tags.draggable").outerWidth();
  1204. if(__width > __parentWidth) {
  1205. if(__left < __parentWidth-__width){
  1206. $(this).animate({left:__parentWidth-__width}, 400, 'easeOutExpo');
  1207. }
  1208. } else {
  1209. $(this).animate({left:0}, 400, 'easeOutExpo');
  1210. }
  1211. }
  1212. });
  1213. });
  1214. </script>
  1215. {/block:ifdraggabletags}
  1216.  
  1217. <div class="hcontrols"><svg
  1218. xmlns="http://www.w3.org/2000/svg"
  1219. width="24"
  1220. height="24"
  1221. viewBox="0 0 24 24"
  1222. fill="none"
  1223. stroke="currentColor"
  1224. stroke-width="2"
  1225. stroke-linecap="round"
  1226. stroke-linejoin="round"
  1227. >
  1228. <line x1="3" y1="12" x2="21" y2="12" />
  1229. <line x1="3" y1="6" x2="21" y2="6" />
  1230. <line x1="3" y1="18" x2="21" y2="18" />
  1231. </svg></div>
  1232.  
  1233. <a class="c" href="https://captainmarvels.tumblr.com">✵</a>
  1234.  
  1235. </body>
  1236. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement