Advertisement
themesbyces

Theme — Mikrokosmos

Apr 16th, 2019 (edited)
1,331
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 22.56 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <title>{Title}</title>
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <!-- Mikrokosmos by Franchesca (extasisthemes) -->
  14.  
  15. <!-- Metadata -->
  16.  
  17. <meta name="color:Asker Background" content="#f0f0f0"/>
  18. <meta name="color:Background" content="#f5f5f5"/>
  19. <meta name="color:Border" content="#eeeeee"/>
  20. <meta name="color:Link" content="#000000"/>
  21. <meta name="color:Link Hover" content="#cfcfcf"/>
  22. <meta name="color:Like" content="#ec6363"/>
  23. <meta name="color:Main Color" content="#99bbdd"/>
  24. <meta name="color:Pin" content="#31a49d"/>
  25. <meta name="color:Post Background" content="#ffffff"/>
  26. <meta name="color:Question Background" content="#ffffff"/>
  27. <meta name="color:Quote Icon Color" content="#ffffff"/>
  28. <meta name="color:Scrollbar" content="#000000"/>
  29. <meta name="color:Text" content="#555555"/>
  30. <meta name="color:Tooltip Background" content="#000000"/>
  31. <meta name="color:Tooltip Color" content="#ffffff"/>
  32.  
  33. <meta name="select:Body Font" content="Karla" title="Karla"/>
  34. <meta name="select:Body Font" content="Montserrat" title="Montserrat"/>
  35. <meta name="select:Body Font" content="Muli" title="Muli"/>
  36. <meta name="select:Body Font" content="Open Sans" title="Open Sans"/>
  37. <meta name="select:Body Font" content="Poppins" title="Poppins"/>
  38. <meta name="select:Body Font" content="Raleway" title="Raleway"/>
  39. <meta name="select:Body Font" content="Work Sans" title="Work Sans"/>
  40.  
  41. <meta name="select:Body Font Size" content="1rem" title="1rem"/>
  42. <meta name="select:Body Font Size" content="0.9rem" title="0.9rem"/>
  43. <meta name="select:Body Font Size" content="0.8rem" title="0.8rem"/>
  44.  
  45. <meta name="select:Uppercase Font Size" content="0.9rem" title="0.9rem"/>
  46. <meta name="select:Uppercase Font Size" content="0.8rem" title="0.8rem"/>
  47.  
  48. <meta name="image:Image" content="https://i.imgur.com/4o57W3g.png"/>
  49.  
  50. <meta name="text:Title" content="Mikrokosmos"/>
  51. <meta name="text:Subtitle" content="This Night Looks Beautiful Because Of Us"/>
  52.  
  53. <meta name="text:Title" content="Theme Title Sample"/>
  54. <meta name="text:Subtitle" content="Theme Subtitle Sample"/>
  55.  
  56. <meta name="text:Link 1 URL" content="/"/>
  57. <meta name="text:Link 1 Name" content="Link One"/>
  58. <meta name="text:Link 2 URL" content="/"/>
  59. <meta name="text:Link 2 Name" content="Link Two"/>
  60. <meta name="text:Link 3 URL" content="/"/>
  61. <meta name="text:Link 3 Name" content="Link Three"/>
  62.  
  63. <meta name="if:Submit Link" content="1"/>
  64.  
  65. <meta name="if:Hide Tags" content="0"/>
  66. <meta name="if:Show Tags" content="1"/>
  67.  
  68. <!-- Google Fonts Script -->
  69.  
  70. <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Muli:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  71.  
  72. <!-- Styled Tooltips Script -->
  73.  
  74. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  75.  
  76. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  77.  
  78. <script>
  79. (function($){
  80. $(document).ready(function(){
  81. $("a[title]").style_my_tooltips({
  82. tip_follows_cursor:true,
  83. tip_delay_time:90,
  84. tip_fade_speed:600,
  85. attribute:"title"
  86. });
  87. });
  88. })(jQuery);
  89. </script>
  90.  
  91. <!-- Font Awesome Script -->
  92.  
  93. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  94.  
  95. <!-- Masonry Script -->
  96.  
  97. {block:IndexPage}
  98. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  99.  
  100. <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  101.  
  102. <script type="text/javascript" charset="utf-8">$(document).ready(function(){
  103. var $grid = $("#posts").masonry({
  104. itemSelector: "#user-information, .entries, .pagination",
  105. initLayout: 1
  106. });
  107. $grid.on("layoutComplete", function(o, r) {
  108. console.log(r.length)
  109. }), $grid.masonry({
  110. horizontalOrder: true
  111. }), $grid.imagesLoaded().progress(function() {
  112. $grid.masonry("layout")
  113. });
  114. });
  115. </script>
  116. {/block:IndexPage}
  117.  
  118. <style type="text/css">
  119.  
  120. .tmblr-iframe--app-cta-button {
  121. display: none!important;
  122. }
  123.  
  124. ::-webkit-scrollbar-thumb:vertical {
  125. background: {color:Scrollbar};
  126. }
  127.  
  128. ::-webkit-scrollbar {
  129. width: 1px;
  130. }
  131.  
  132. ::selection {
  133. background: {color:Main Color};
  134. color: white;
  135. }
  136.  
  137. ::-moz-selection {
  138. background: {color:Main Color};
  139. color: white;
  140. }
  141.  
  142. #s-m-t-tooltip {
  143. background: {color:Tooltip Background};
  144. border-radius: 5px;
  145. color: {color:Tooltip Color};
  146. font-size: {select:Uppercase Font Size};
  147. margin-top: 30px;
  148. padding: 5px;
  149. text-align: center;
  150. text-transform: uppercase;
  151. z-index: 999999999999999999999999999999999999;
  152. }
  153.  
  154. body {
  155. background: {color:Background};
  156. color: {color:Text};
  157. cursor: url(https://i.imgur.com/lhPqll6.png), progress;
  158. font-family: '{select:Body Font}', sans-serif;
  159. font-size: {select:Body Font Size};
  160. font-style: normal;
  161. font-weight: 400;
  162. hyphens: auto;
  163. letter-spacing: 1px;
  164. margin: 0px;
  165. text-align: left;
  166. text-transform: none;
  167. word-wrap: break-word;
  168. }
  169.  
  170. a {
  171. color: {color:Link};
  172. text-decoration: none;
  173. -webkit-transition: all 0.5s ease;
  174. -moz-transition: all 0.5s ease;
  175. -o-transition: all 0.5s ease;
  176. }
  177.  
  178. a:hover {
  179. color: {color:Link Hover};
  180. }
  181.  
  182. b {
  183. font-weight: 700;
  184. }
  185.  
  186. h1 {
  187. font-size: 1.2rem;
  188. font-weight: bold;
  189. margin-block-start: 0em;
  190. text-transform: lowercase;
  191. }
  192.  
  193. h2 {
  194. font-size: 1rem;
  195. font-weight: bold;
  196. margin-block-start: 0em;
  197. }
  198.  
  199. blockquote {
  200. border-left: 1px solid {color:Border};
  201. margin: 5px;
  202. padding-left: 5px;
  203. }
  204.  
  205. blockquote img {
  206. height: auto;
  207. max-width: 100%;
  208. }
  209.  
  210. blockquote blockquote {
  211. border-left: 1px solid {color:Border};
  212. padding-left: 5px;
  213. }
  214.  
  215. pre {
  216. background: #f8f8f8;
  217. border-radius: 5px;
  218. padding: 10px;
  219. word-wrap: break-all;
  220. white-space: pre-wrap;
  221. }
  222.  
  223. #title {
  224. background: {color:Main Color};
  225. color: {color:Post Background};
  226. font-family: 'Karla', sans-serif;
  227. font-size: 1rem;
  228. font-weight: bold;
  229. padding: 20px 0px 20px 20px;
  230. position: fixed;
  231. top: 0px;
  232. width: 100%;
  233. z-index: 1;
  234. }
  235.  
  236. #posts {
  237. margin-bottom: 100px;
  238. margin-left: auto;
  239. margin-right: auto;
  240. margin-top: 182px;
  241. {block:IndexPage}
  242. margin-top: 157px;
  243. {block:IndexPage}
  244. width: 440px;
  245. {block:IndexPage}
  246. width: 980px;
  247. {/block:IndexPage}
  248. }
  249.  
  250. #user-information {
  251. {block:IndexPage}
  252. float: left;
  253. margin: 25px;
  254. {/block:IndexPage}
  255. width: 440px;
  256. }
  257.  
  258. .title-description-links-wrapper {
  259. background: {color:Post Background};
  260. padding: 20px;
  261. }
  262.  
  263. .subtitle {
  264. font-weight: bold;
  265. text-transform: lowercase;
  266. }
  267.  
  268. .description {
  269. font-size: {select:Uppercase Font Size};
  270. margin-top: 15px;
  271. text-transform: uppercase;
  272. }
  273.  
  274. .links {
  275. background: {color:Post Background};
  276. font-size: {select:Uppercase Font Size};
  277. margin-top: 15px;
  278. text-transform: uppercase;
  279. }
  280.  
  281. .links a {
  282. display: inline-block;
  283. margin-right: 10px;
  284. }
  285.  
  286. .image {
  287. height: 220px;
  288. width: 440px;
  289. }
  290.  
  291. .image img {
  292. height: 220px;
  293. width: 440px;
  294. }
  295.  
  296. .entries {
  297. margin-top: 50px;
  298. background: {color:Post Background};
  299. {block:IndexPage}
  300. float: left;
  301. margin: 25px;
  302. {/block:IndexPage}
  303. padding: 20px;
  304. width: 400px;
  305. }
  306.  
  307. .entries img {
  308. height: auto;
  309. max-width: 100%;
  310. }
  311.  
  312. .npf_row img {
  313. width: 100%;
  314. }
  315.  
  316. .tmblr-full {
  317. margin-bottom: 10px;
  318. }
  319.  
  320. .npf_inst {
  321. margin-bottom: 20px;
  322. }
  323.  
  324. .npf-wrapper {
  325. margin: 0px;
  326. }
  327.  
  328. .npf-wrapper .tmblr-full {
  329. display: flex;
  330. }
  331.  
  332. .text-wrapper {
  333. margin: 0px;
  334. }
  335.  
  336. .read_more {
  337. background: {color:Main Color};
  338. border: 1px solid {color:Border};
  339. border-radius: 5px;
  340. color: white;
  341. display: inline-block;
  342. font-size: {select:Uppercase Font Size};
  343. padding: 10px;
  344. text-align: center;
  345. text-transform: uppercase;
  346. width: calc(100% - 22px);
  347. }
  348.  
  349. .read_more:hover {
  350. background: white;
  351. color: {color:Main Color};
  352. }
  353.  
  354. .vignette, #vignette {
  355. opacity: 0;
  356. }
  357.  
  358. .lightbox-image, #tumblr_lightbox img {
  359. border-radius: 0!important;
  360. box-shadow: none!important;
  361. max-width: none;
  362. }
  363.  
  364. .tmblr-lightbox, #tumblr_lightbox {
  365. background-attachment: fixed;
  366. background-image: url('https://i.imgur.com/7wF2zbK.png');
  367. background-repeat: repeat;
  368. }
  369.  
  370. .lightbox-caption, #tumblr_lightbox_caption {
  371. visibility: hidden;
  372. }
  373.  
  374. .text p {
  375. margin-top: 0px;
  376. }
  377.  
  378. .caption {
  379. margin-top: 20px;
  380. }
  381.  
  382. .caption p {
  383. margin-top: 0px;
  384. }
  385.  
  386. blockquote.tumblr_parent {
  387. border: none;
  388. border-bottom: 1px solid {color:Border};
  389. margin: 0px;
  390. margin-bottom: 20px;
  391. padding: 0px;
  392. }
  393.  
  394. blockquote.tumblr_parent:last-child {
  395. border-bottom: 0px;
  396. }
  397.  
  398. blockquote.user-reblog {
  399. border: none;
  400. margin: 0px;
  401. padding: 0px;
  402. }
  403.  
  404. .tumblr_avatar {
  405. height: 30px;
  406. margin-bottom: 20px;
  407. width: 30px;
  408. }
  409.  
  410. img.tumblr_avatar {
  411. border-radius: 100px;
  412. display: inline-block;
  413. height: 30px!important;
  414. margin-right: 10px;
  415. vertical-align: middle;
  416. width: 30px!important;
  417. }
  418.  
  419. img.user-image {
  420. border-radius: 100px;
  421. display: inline-block;
  422. height: 30px!important;
  423. margin-right: 10px;
  424. vertical-align: middle;
  425. width: 30px!important;
  426. }
  427.  
  428. a.tumblr_blog {
  429. border-bottom: 1px solid {color:Main Color};
  430. font-size: {select:Uppercase Font Size};
  431. margin-top: calc((30px - {select:Uppercase Font Size}) / 4);
  432. display: inline-block;
  433. position: absolute;
  434. text-align: center;
  435. text-transform: uppercase;
  436. }
  437.  
  438. .ask-wrapper {
  439. width: 100%;
  440. }
  441.  
  442. .asker {
  443. background: {color:Asker Background};
  444. border: 1px solid {color:Border};
  445. padding: 20px;
  446. }
  447.  
  448. .asker-url {
  449. font-size: {select:Uppercase Font Size};
  450. text-align: center;
  451. text-transform: uppercase;
  452. }
  453.  
  454. .asker-url a {
  455. background: none;
  456. padding: 0px;
  457. }
  458.  
  459. .question {
  460. background: {color:Question Background};
  461. border: 1px solid {color:Border};
  462. border-top: none;
  463. padding: 20px;
  464. text-align: center;
  465. }
  466.  
  467. .quote {
  468. background: {color:Asker Background};
  469. font-size: {select:Uppercase Font Size};
  470. padding: 10px;
  471. text-transform: uppercase;
  472. }
  473.  
  474. .quote-icon {
  475. background: {color:Main Color};
  476. display: inline-block;
  477. color: {color:Quote Icon Color};
  478. margin: -10px;
  479. padding: 10px;
  480. }
  481.  
  482. .quote-wrapper {
  483. margin-top: 20px;
  484. width: 100%;
  485. }
  486.  
  487. .quote a.tumblr_blog {
  488. font-size: {select:Uppercase Font Size};
  489. font-weight: normal;
  490. margin-top: 0px;
  491. display: inline-block;
  492. position: relative;
  493. text-align: center;
  494. text-transform: uppercase;
  495. }
  496.  
  497. .website {
  498. background: {color:Main Color};
  499. color: {color:Quote Icon Color};
  500. font-size: {select:Uppercase Font Size};
  501. padding: 10px;
  502. text-transform: uppercase;
  503. }
  504.  
  505. .website a {
  506. color: {color:Quote Icon Color};
  507. }
  508.  
  509. .website a:hover {
  510. color: {color:Link Hover};
  511. }
  512.  
  513. .chat {
  514. font-size: {select:Uppercase Font Size};
  515. text-transform: uppercase;
  516. }
  517.  
  518. .chat li {
  519. list-style-type: none;
  520. }
  521.  
  522. .chat li:nth-child(odd) {
  523. background: {color:Main Color};
  524. color: {color:Quote Icon Color};
  525. padding: 10px;
  526. }
  527.  
  528. .chat li:nth-child(even) {
  529. background: {color:Asker Background};
  530. color: {color:Main Color};
  531. padding: 10px;
  532. }
  533.  
  534. .audio iframe {
  535. height: 85px;
  536. width: 400px;
  537. }
  538.  
  539. figure {
  540. display: flex;
  541. width: 100%;
  542. }
  543.  
  544. figcaption.npf-audio-wrapper {
  545. width: 100%;
  546. }
  547.  
  548. .npf-audio-wrapper {
  549. --NPF-Audio-Buttons-Size: 1.4rem;
  550. --NPF-Audio-Buttons-Color: #555555;
  551. --NPF-Audio-Buttons-Spacing: 1.3rem;
  552. --NPF-Audio-Image-Size: 85px;
  553. --NPF-Audio-Image-Spacing: 0px;
  554. }
  555.  
  556. span.npf-audio-title {
  557. font-weight: bold;
  558. }
  559.  
  560. .npf-audio-background {
  561. background-color: #f2f2f2;
  562. padding: 1.5rem;
  563. }
  564.  
  565. video {
  566. height: auto;
  567. width: 100%;
  568. }
  569.  
  570. .source {
  571. background: {color:Asker Background};
  572. border-radius: 5px;
  573. display: inline-block;
  574. font-size: {select:Uppercase Font Size};
  575. margin-top: 10px;
  576. padding: 5px;
  577. text-transform: uppercase;
  578. }
  579.  
  580. .notes-wrapper {
  581. border-bottom: 1px solid {color:Border};
  582. font-size: {select:Uppercase Font Size};
  583. font-weight: bold;
  584. margin: -20px;
  585. margin-bottom: 20px;
  586. padding: 20px;
  587. text-transform: uppercase;
  588. }
  589.  
  590. .entries-information {
  591. border-top: 1px solid {color:Border};
  592. font-size: {select:Uppercase Font Size};
  593. margin-top: 20px;
  594. padding-top: 20px;
  595. text-transform: uppercase;
  596. }
  597.  
  598. .like-b {
  599. display: inline-block;
  600. margin-right: 0px;
  601. position: relative;
  602. }
  603.  
  604. .like-b .like_button iframe {
  605. bottom: 0px;
  606. left: 0px;
  607. opacity: 0;
  608. position: absolute;
  609. right: 0px;
  610. top: 0px;
  611. }
  612.  
  613. .like-b .liked + .b {
  614. color: {color:Like};
  615. }
  616.  
  617. .like-b .liked + .b:after {
  618. content: 'd';
  619. }
  620.  
  621. .tags-title a {
  622. color: {color:Link};
  623. margin-top: 20px;
  624. margin-left: auto;
  625. margin-right: auto;
  626. margin-top: 20px;
  627. text-align: center;
  628. width: 70px;
  629. -webkit-transition: all 0.5s ease;
  630. -moz-transition: all 0.5s ease;
  631. -o-transition: all 0.5s ease;
  632. }
  633.  
  634. .tags-title:hover {
  635. color: {color:Link Hover};
  636. }
  637.  
  638. .tags {
  639. margin-top: 5px;
  640. }
  641.  
  642. .tags-alternate {
  643. margin-top: 5px;
  644. }
  645.  
  646. ol.notes {
  647. font-size: {select:Uppercase Font Size};
  648. margin: -10px;
  649. margin-top: 20px;
  650. padding: 0px;
  651. text-align: left;
  652. text-transform: uppercase;
  653. }
  654.  
  655. ol.notes li {
  656. list-style-type: none;
  657. margin: 10px;
  658. }
  659.  
  660. ol.notes li.note img.avatar {
  661. border-radius: 100px;
  662. vertical-align: -4px;
  663. height: 16px;
  664. margin-right: 10px;
  665. width: 16px;
  666. }
  667.  
  668. .more_notes_link {
  669. background: {color:Main Color};
  670. border-radius: 5px;
  671. color: white;
  672. display: inline-block;
  673. padding: 5px 10px 5px 10px;
  674. text-align: center;
  675. }
  676.  
  677. .pagination {
  678. background: {color:Post Background};
  679. float: left;
  680. font-size: {select:Uppercase Font Size};
  681. margin: 25px;
  682. padding: 20px;
  683. text-transform: uppercase;
  684. width: 400px;
  685. }
  686.  
  687. #credit {
  688. bottom: 15px;
  689. font-size: 0.9rem;
  690. position: fixed;
  691. right: 15px;
  692. text-transform: uppercase;
  693. }
  694.  
  695. #credit a {
  696. color: {color:Link};
  697. }
  698.  
  699. #credit a:hover {
  700. color: {color:Link Hover};
  701. }
  702.  
  703. {CustomCSS}
  704.    
  705. </style>
  706.    
  707. </head>
  708.  
  709. <body>
  710.  
  711. <div id="title">{text:Title}</div>
  712.  
  713. <div id="posts">
  714.  
  715. <div id="user-information">
  716.  
  717. <div class="title-description-links-wrapper">
  718.  
  719. <div class="subtitle">{text:Subtitle}</div>
  720.  
  721. {block:Description}<div class="description">{Description}</div>{/block:Description}
  722.  
  723. <div class="links">
  724. <a href="/">Home</a>
  725. {block:AskEnabled}<a href="/ask">Ask</a>{/block:AskEnabled}
  726. {block:SubmissionsEnabled}{block:IfSubmitLink}<a href="/submit">Submit</a>{/block:IfSubmitLink}{/block:SubmissionsEnabled}
  727. {block:ifLink1URL}<a href="{text:Link 1 URL}">{text:Link 1 Name}</a>{/block:ifLink1URL}
  728. {block:ifLink2URL}<a href="{text:Link 2 URL}">{text:Link 2 Name}</a>{/block:ifLink2URL}
  729. {block:ifLink3URL}<a href="{text:Link 3 URL}">{text:Link 3 Name}</a>{/block:ifLink3URL}
  730. <a href="/archive">Archive</a>
  731. </div>
  732.  
  733. </div>
  734.  
  735. <div class="image"><img src="{image:Image}"/></div>
  736.  
  737. </div>
  738.  
  739. {block:Posts}
  740.  
  741. <div class="entries" id="{PostID}" post-type="{PostType}">
  742.  
  743. {block:NoteCount}<div class="notes-wrapper"><i class="far fa-chart-bar" style="background: {color:Main Color};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i><a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}{block:NoteCount}</div>{/block:NoteCount}
  744.  
  745. {block:Text}
  746. {block:NotReblog}
  747. <div class="npf-wrapper">
  748. {block:Title}
  749. <h1>{Title}</h1>
  750. {/block:Title}
  751. {Body}
  752. </div>
  753. {/block:NotReblog}
  754. {block:RebloggedFrom}
  755. <div class="text-wrapper">
  756. {block:Title}
  757. <h1>{Title}</h1>
  758. {/block:Title}
  759. <div class="text">
  760. {Body}
  761. </div>
  762. </div>
  763. {/block:RebloggedFrom}
  764. {/block:Text}
  765.  
  766. {block:Answer}
  767. <div class="ask-wrapper">
  768. <div class="asker">
  769. <div class="asker-url">
  770. <i class="far fa-question-circle" style="background: {color:Main Color};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i>
  771. <br><br>
  772. A Message From <a href="{AskerURL}">{Asker}</a>
  773. </div>
  774. </div>
  775. <div class="question">
  776. {Question}
  777. </div>
  778. </div>
  779. <div class="caption">
  780. {Answer}
  781. </div>
  782. {/block:Answer}
  783.  
  784. {block:Quote}
  785. <div class="quote">
  786. <div class="quote-icon"><i class="fas fa-quote-left"></i></div>
  787. <div class="quote-wrapper">
  788. "{Quote}</i>" {block:Source}{Source}{/block:Source}
  789. </div>
  790. </div>
  791. {/block:Quote}
  792.  
  793. {block:Link}
  794. {block:Thumbnail}
  795. <img src="{Thumbnail}" style="margin-bottom: 10px;"/>
  796. {/block:Thumbnail}
  797. <div class="website"><i class="fas fa-external-link-alt" style="margin-right: 10px;"></i><a href="{URL}" target="_blank">{Name}{block:Excerpt}<br><br>{Excerpt}{/block:Excerpt}
  798. </a></div>
  799. {block:Description}
  800. <div class="caption">
  801. {Description}
  802. </div>
  803. {/block:Description}
  804. {/block:Link}
  805.  
  806. {block:Chat}
  807. <div class="chat">
  808. {block:Title}
  809. <h1>{Title}</h1>
  810. {/block:Title}
  811. {block:Lines}
  812. <li>{block:Label}{Label}{/block:Label}
  813. {Line}
  814. </li>
  815. {/block:Lines}
  816. </div>
  817. {/block:Chat}
  818.  
  819. {block:Audio}
  820. <div class="audio">
  821. {AudioEmbed}
  822. </div>
  823. {block:Caption}
  824. <div class="caption">{Caption}</div>
  825. {/block:Caption}
  826. {/block:Audio}
  827.  
  828. {block:Photo}
  829. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-HighRes}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}"></a>
  830. {block:Caption}
  831. <div class="text-wrapper">
  832. <div class="caption">{Caption}</div>
  833. </div>
  834. {/block:Caption}
  835. {/block:Photo}
  836.  
  837. {block:Photoset}
  838. <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>
  839. {block:Caption}
  840. <div class="text-wrapper">
  841. <div class="caption">{Caption}</div>
  842. </div>
  843. {/block:Caption}
  844. {/block:Photoset}
  845.  
  846. {block:Video}
  847. <div class="video">
  848. {Video-500}
  849. </div>
  850. {block:Caption}
  851. <div class="caption">{Caption}</div>
  852. {/block:Caption}
  853. {/block:Video}
  854.  
  855. {block:ContentSource}
  856. <div class="source">
  857. <i class="fas fa-paper-plane" style="color: {color:Main Color};margin-right: 5px;"></i><a href="{SourceURL}" title="{SourceTitle}">Source</a>
  858. </div>
  859. {/block:ContentSource}
  860.  
  861. {block:Date}
  862. <div class="entries-information">
  863. {block:PinnedPostLabel}
  864. <font style="color: {color:Pin};"><i class="fas fa-thumbtack" style="margin-right: 5px;"></i>{PinnedPostLabel}</font>
  865. <font style="color: {color:Main Color};margin-left: 5px;margin-right: 5px;">•</font>
  866. {/block:PinnedPostLabel}
  867. <a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
  868. <font style="color: {color:Main Color};margin-left: 5px;margin-right: 5px;">•</font>
  869. {block:RebloggedFrom} <a href="{ReblogParentURL}">Via</a> / {/block:RebloggedFrom}  
  870. {block:ContentSource}{block:RebloggedFrom} <a href="{ReblogRootURL}">Source</a> / {/block:RebloggedFrom}{/block:ContentSource}
  871. <a class="like-b" href="#">{LikeButton}<div class="b">Like</div></a> Or <a href="{ReblogURL}" target="_blank">Reblog</a>
  872. {block:IfHideTags}
  873. {block:HasTags}
  874. <font style="color: {color:Main Color};margin-left: 5px;margin-right: 5px;">•</font>
  875. <a class="tags-title">Show Tags</a>
  876. <div class="tags">
  877. {block:Tags}
  878. <a href="{TagURL}" style="margin-right: 5px;"><font style="color: {color:Main Color};margin-right: 5px;">•</font>{Tag}</a>
  879. {/block:Tags}
  880. </div>
  881. {/block:HasTags}
  882. {/block:IfHideTags}
  883. {block:IfShowTags}
  884. {block:HasTags}
  885. <div class="tags-alternate">
  886. {block:Tags}
  887. <a href="{TagURL}" style="margin-right: 5px;"><font style="color: {color:Main Color};margin-right: 5px;">•</font>{Tag}</a>
  888. {/block:Tags}
  889. </div>
  890. {/block:HasTags}
  891. {/block:IfShowTags}
  892. {block:PostNotes}
  893. {PostNotes}
  894. {/block:PostNotes}
  895. </div>
  896. {/block:Date}
  897.  
  898. </div>
  899.  
  900. {/block:Posts}
  901.  
  902. {block:Pagination}
  903. <div class="pagination">
  904. {CurrentPage} Out Of {TotalPages}
  905. <font style="float:right;">
  906. {block:PreviousPage}
  907. <a href="{PreviousPage}">Previous</a>
  908. {/block:PreviousPage}
  909. {block:NextPage}
  910. Or <a href="{NextPage}">Next</a>
  911. {/block:NextPage}
  912. </font>
  913. </div>
  914. {/block:Pagination}
  915.  
  916. </div>
  917.  
  918. <div id="credit"><a href="http://extasisthemes.tumblr.com/" title="extasisthemes" target="_blank">EXT</a></div>
  919.  
  920. </body>
  921.  
  922. <!--✻✻✻✻✻✻  npf audio player by @glenthemes  ✻✻✻✻✻✻-->
  923.  
  924. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  925.  
  926. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  927.  
  928. <script>
  929. tumblr_npf_audio({
  930. emptyTitleText: "",
  931. emptyArtistText: "",
  932. emptyAlbumText: "",
  933. titleLabel: "",    
  934. artistLabel: "",
  935. albumLabel: "",
  936. });
  937. </script>
  938.  
  939. <!-- Unnest Captions Script -->
  940.  
  941. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  942.  
  943. <script>
  944. $(function(){  $('.entries').unnest({
  945. yourCaption: ".text, .caption",
  946. wrapName: ".tumblr_parent",
  947. newCaptionUsername: false,
  948. originalPostCaptionUsername: false,
  949. tumblrAvatars: true,
  950. tumblrAvatarClass: ".tumblr_avatar",
  951. usernameColon: false
  952. });
  953. });
  954. </script>
  955.  
  956. <!-- NPF images fix v3.0 by @glenthemes [2021] 💌 git.io/JRBt7 -->
  957.  
  958. <script src="//npf-images-v3.github.io/script.js"></script>
  959.  
  960. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  961. <style tmblr-npf>
  962. :root {
  963. --NPF-Caption-Spacing: 1em;
  964. --NPF-Image-Spacing: 1px;
  965. }
  966. </style>
  967.  
  968. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  969.  
  970. <!-- Inline Images Resizing Script -->
  971.  
  972. <script>
  973. $(".tmblr-full, figure").each(function(){
  974. var imgWidth = $(this).attr("data-orig-width"),
  975. img = $(this).find("img"),
  976. imgSrc = img.attr("src");
  977. $('figure').css({'margin-left':'0','margin-right':'0','display':'inline-block'});
  978. if (imgWidth >= 500){
  979. img.attr("src",imgSrc.replace("_500.","_1280."));
  980. $('.tmblr-full img, figure img').css({'width':'auto','height':'auto','vertical-align':'middle'});
  981. }
  982. });  
  983. </script>
  984.  
  985. <!-- PXU Script -->
  986.  
  987. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  988.  
  989. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  990.  
  991. <script>
  992. $(document).ready(function(){
  993. $('.photo-slideshow').pxuPhotoset({
  994. lightbox: true,
  995. rounded: false,
  996. gutter: '1px',
  997. borderRadius: '0px',
  998. photoset: '.photo-slideshow',
  999. photoWrap: '.photo-data',
  1000. photo: '.pxu-photo'
  1001. });
  1002. });
  1003. </script>
  1004.  
  1005. <!-- Responsive Tumblr Videos Script -->
  1006.  
  1007. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  1008.  
  1009. <script>
  1010. $(document).ready(function() {
  1011. flexibleFrames($(".video"));  
  1012. });
  1013. </script>
  1014.  
  1015. <!-- Hide & Show Script -->
  1016.  
  1017. <script>
  1018. $(document).ready(function(){
  1019. $(".tags").hide();
  1020. $(".tags-title").click(function(){
  1021. $(this).next(".tags").slideToggle('fast');
  1022. });
  1023. });
  1024. </script>
  1025.  
  1026. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement