vitaminholland

Theme — Invisible String

May 27th, 2022 (edited)
2,706
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 34.32 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. <!--
  14.  
  15. theme: invisible string
  16. designed and coded by ghcstfaec
  17. see credits @ https://ghcstfaec.tumblr.com/credits
  18.  
  19. -->
  20.  
  21. <!-- Metadata -->
  22.  
  23. <meta name="color:Background" content="#f8f8f8"/>
  24. <meta name="color:Border" content="#d2d2d2"/>
  25. <meta name="color:Chat Even Background" content="#f0f0f0"/>
  26. <meta name="color:Link" content="#000000"/>
  27. <meta name="color:Link Hover" content="#cfcfcf"/>
  28. <meta name="color:Like" content="#ec6363"/>
  29. <meta name="color:Main Color" content="#eca4bc"/>
  30. <meta name="color:Pin" content="#31a49d"/>
  31. <meta name="color:Post Background" content="#ffffff"/>
  32. <meta name="color:Pre Background" content="#f8f8f8"/>
  33. <meta name="color:Scrollbar" content="#000000"/>
  34. <meta name="color:Text" content="#555555"/>
  35. <meta name="color:Tooltip Background" content="#000000"/>
  36. <meta name="color:Tooltip Color" content="#ffffff"/>
  37.  
  38. <meta name="select:Heading Font" content="Playfair Display" title="Playfair Display"/>
  39. <meta name="select:Heading Font" content="Lora" title="Lora"/>
  40. <meta name="select:Heading Font" content="Noto Serif Display" title="Noto Serif Display"/>
  41.  
  42. <meta name="select:Body Font" content="Noto Sans" title="Noto Sans"/>
  43. <meta name="select:Body Font" content="DM Sans" title="DM Sans"/>
  44. <meta name="select:Body Font" content="Golos Text" title="Golos Text"/>
  45. <meta name="select:Body Font" content="Karla" title="Karla"/>
  46. <meta name="select:Body Font" content="Nunito Sans" title="Nunito Sans"/>
  47. <meta name="select:Body Font" content="Open Sans" title="Open Sans"/>
  48. <meta name="select:Body Font" content="Work Sans" title="Work Sans"/>
  49.  
  50. <meta name="select:Body Font Size" content="0.9rem" title="0.9rem"/>
  51. <meta name="select:Body Font Size" content="1rem" title="1rem"/>
  52. <meta name="select:Body Font Size" content="0.8rem" title="0.8rem"/>
  53.  
  54. <meta name="select:Uppercase Font Size" content="0.8rem" title="0.8rem"/>
  55. <meta name="select:Uppercase Font Size" content="0.9rem" title="0.9rem"/>
  56.  
  57. <meta name="image:Sidebar Image" content="https://i.imgur.com/OW7Xw69.png"/>
  58. <meta name="image:Icon Image" content="https://i.imgur.com/2Oq2aWZ.png"/>
  59.  
  60. <meta name="text:Title" content="Invisible String"/>
  61.  
  62. <meta name="text:Link 1 URL" content="/"/>
  63. <meta name="text:Link 1 Name" content="Link One"/>
  64. <meta name="text:Link 2 URL" content="/"/>
  65. <meta name="text:Link 2 Name" content="Link Two"/>
  66. <meta name="text:Link 3 URL" content="/"/>
  67. <meta name="text:Link 3 Name" content="Link Three"/>
  68.  
  69. <meta name="select:Post Width" content="450px" title="450px"/>
  70. <meta name="select:Post Width" content="350px" title="350px"/>
  71. <meta name="select:Post Width" content="400px" title="400px"/>
  72. <meta name="select:Post Width" content="500px" title="500px"/>
  73. <meta name="select:Post Width" content="550px" title="550px"/>
  74.  
  75. <meta name="text:About Title" content="About The Blogger"/>
  76. <meta name="text:About" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."/>
  77.  
  78. <meta name="if:Submit Link" content="1"/>
  79.  
  80. <meta name="if:Hide Tags" content="0"/>
  81. <meta name="if:Show Tags" content="1"/>
  82.  
  83. <meta name="if:Back To Top" content="1"/>
  84.  
  85. <!-- Google Fonts Script -->
  86.  
  87. <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Serif+Display:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  88.  
  89. <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Golos+Text:wght@400;700&family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Nunito+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans: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">
  90.  
  91. <!-- jQuery Script -->
  92.  
  93. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  94.  
  95. <!-- Styled Tooltips Script -->
  96.  
  97. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  98.  
  99. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  100.  
  101. <script>
  102. (function($){
  103. $(document).ready(function(){
  104. $("a[title]").style_my_tooltips({
  105. tip_follows_cursor:true,
  106. tip_delay_time:90,
  107. tip_fade_speed:600,
  108. attribute:"title"
  109. });
  110. });
  111. })(jQuery);
  112. </script>
  113.  
  114. <!-- Font Awesome Script -->
  115.  
  116. <link href="//use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">
  117.  
  118. <!--✻✻✻✻✻✻  npf audio player by @glenthemes  ✻✻✻✻✻✻-->
  119.  
  120. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  121.  
  122. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  123.  
  124. <script>
  125. tumblr_npf_audio({
  126. emptyTitleText: "",
  127. emptyArtistText: "",
  128. emptyAlbumText: "",
  129. titleLabel: "",    
  130. artistLabel: "",
  131. albumLabel: "",
  132. });
  133. </script>
  134.  
  135. <!-- Hide & Show Script -->
  136.  
  137. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  138.  
  139. <script>
  140. $(document).ready(function(){
  141. $('.tags').hide();
  142. $('.tags-title').click(function() {
  143. $(this).closest('.entries').find('.tags').slideToggle(500);
  144. });
  145. });
  146. </script>
  147.  
  148. <!-- Scroll To Top Script -->
  149.  
  150. <script type="text/javascript">
  151. $(function() {      
  152. $(window).scroll(function() {
  153. if($(this).scrollTop() != 0) {
  154. $('#top').fadeIn();        
  155. }
  156. else {
  157. $('#top').fadeOut();      
  158. }
  159. });
  160. $('#top').click(function() {
  161. $('body,html').animate({scrollTop:0},600);
  162. });
  163. });
  164. </script>
  165.  
  166. <!-- Unnest Captions Script -->
  167.  
  168. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  169.  
  170. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  171.  
  172. <script>
  173. $(function(){  $('.entries').unnest({
  174. yourCaption: ".text, .caption",
  175. wrapName: ".tumblr_parent",
  176. newCaptionUsername: false,
  177. originalPostCaptionUsername: false,
  178. tumblrAvatars: true,
  179. tumblrAvatarClass: ".tumblr_avatar",
  180. usernameColon: false
  181. });
  182. });
  183. </script>
  184.  
  185. <!--
  186.         NPF images fix v4.0 by @glenthemes [2023]
  187.         💌 gitlab.com/glen-npf/v4-beta
  188. --->
  189.  
  190. <link href="//glen-npf.gitlab.io/v4-beta/main.css" rel="stylesheet">
  191.  
  192. <script src="//glen-npf.gitlab.io/v4-beta/use.js"></script>
  193. <style>
  194. :root {
  195. --NPF-Images-Spacing:1px;
  196. --NPF-Caption-Spacing:1em;
  197. --NPF-Move-1st-Photoset:"no";
  198. --Text-Container-Selector:".caption";
  199. --Text-Reblogs-Selector:".tumblr_parent";
  200. }
  201. </style>
  202.  
  203. <!-- Inline Images Resizing Script -->
  204.  
  205. <script>
  206. $(".tmblr-full, figure").each(function(){
  207. var imgWidth = $(this).attr("data-orig-width"),
  208. img = $(this).find("img"),
  209. imgSrc = img.attr("src");
  210. $('figure').css({'margin-left':'0','margin-right':'0','display':'inline-block'});
  211. if (imgWidth >= 500){
  212. img.attr("src",imgSrc.replace("_500.","_1280."));
  213. $('.tmblr-full img, figure img').css({'width':'auto','height':'auto','vertical-align':'middle'});
  214. }
  215. });  
  216. </script>
  217.  
  218. <!-- PXU Script -->
  219.  
  220. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  221.  
  222. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  223.  
  224. <script>
  225. $(document).ready(function(){
  226. $('.photo-slideshow').pxuPhotoset({
  227. lightbox: true,
  228. rounded: false,
  229. gutter: '1px',
  230. borderRadius: '0px',
  231. photoset: '.photo-slideshow',
  232. photoWrap: '.photo-data',
  233. photo: '.pxu-photo'
  234. });
  235. });
  236. </script>
  237.  
  238. <!-- Responsive Tumblr Videos Script -->
  239.  
  240. <script src="//cdn.jsdelivr.net/gh/robinpx/tumblr@master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  241.  
  242. <script>
  243. $(document).ready(function() {
  244. flexibleFrames($(".video"));  
  245. });
  246. </script>
  247.  
  248. <style type="text/css">
  249.  
  250. .tmblr-iframe--app-cta-button {
  251. display: none!important;
  252. }
  253.  
  254. ::-webkit-scrollbar-thumb:horizontal {
  255. background: {color:Scrollbar};
  256. }
  257.  
  258. ::-webkit-scrollbar-thumb:vertical {
  259. background: {color:Scrollbar};
  260. }
  261.  
  262. ::-webkit-scrollbar {
  263. height: 1px;
  264. width: 1px;
  265. }
  266.  
  267. ::selection {
  268. background: {color:Main Color};
  269. color: white;
  270. }
  271.  
  272. ::-moz-selection {
  273. background: {color:Main Color};
  274. color: white;
  275. }
  276.  
  277. #s-m-t-tooltip {
  278. background: {color:Tooltip Background};
  279. border-radius: 5px;
  280. color: {color:Tooltip Color};
  281. font-size: {select:Uppercase Font Size};
  282. margin-top: 30px;
  283. padding: 5px;
  284. text-align: center;
  285. text-transform: uppercase;
  286. z-index: 999999999999999999999999999999999999;
  287. }
  288.  
  289. body {
  290. background: {color:Background};
  291. color: {color:Text};
  292. cursor: url(https://i.imgur.com/lhPqll6.png), progress;
  293. font-family: '{select:Body Font}', sans-serif;
  294. font-size: {select:Body Font Size};
  295. font-style: normal;
  296. font-weight: 400;
  297. hyphens: auto;
  298. letter-spacing: 1px;
  299. margin: 0px;
  300. text-align: left;
  301. text-transform: none;
  302. word-wrap: break-word;
  303. }
  304.  
  305. a {
  306. color: {color:Link};
  307. text-decoration: none;
  308. -webkit-transition: all 0.5s ease;
  309. -moz-transition: all 0.5s ease;
  310. -o-transition: all 0.5s ease;
  311. }
  312.  
  313. a:hover {
  314. color: {color:Link Hover};
  315. }
  316.  
  317. b {
  318. font-weight: 700;
  319. }
  320.  
  321. h1 {
  322. font-family: '{select:Heading Font}', sans-serif;
  323. font-size: 1.2rem;
  324. font-weight: bold;
  325. margin-block-start: 0em;
  326. text-transform: lowercase;
  327. }
  328.  
  329. h2 {
  330. font-size: 1rem;
  331. font-weight: bold;
  332. margin-block-start: 0em;
  333. }
  334.  
  335. blockquote {
  336. border-left: 1px solid {color:Border};
  337. margin: 5px;
  338. padding-left: 5px;
  339. }
  340.  
  341. blockquote img {
  342. height: auto;
  343. max-width: 100%;
  344. }
  345.  
  346. blockquote blockquote {
  347. border-left: 1px solid {color:Border};
  348. padding-left: 5px;
  349. }
  350.  
  351. pre {
  352. background: {color:Pre Background};
  353. border-radius: 5px;
  354. padding: 10px;
  355. white-space: pre-wrap;
  356. }
  357.  
  358. #title {
  359. align-items: center;
  360. background: {color:Post Background};
  361. border-bottom: 1px solid {color:Border};
  362. display: flex;
  363. font-weight: bold;
  364. height: 54px;
  365. justify-content: center;
  366. padding-left: 20px;
  367. padding-right: 20px;
  368. position: fixed;
  369. text-transform: lowercase;
  370. top: 0px;
  371. width: calc(100% - 40px);
  372. z-index: 1;
  373. }
  374.  
  375. #container {
  376. margin-bottom: 70px;
  377. margin-left: auto;
  378. margin-right: auto;
  379. margin-top: 125px;
  380. width: calc({select:Post Width} + 402px);
  381. }
  382.  
  383. #user-information-wrapper {
  384. align-items: center;
  385. display: flex;
  386. flex-direction: column;
  387. height: calc(100% - 55px);
  388. justify-content: center;
  389. position: fixed;
  390. top: 55px;
  391. width: 260px;
  392. }
  393.  
  394. #user-information {
  395. position: relative;
  396. width: 260px;
  397. }
  398.  
  399. .iml-wrapper {
  400. display: flex;
  401. width: 260px;
  402. }
  403.  
  404. .icon-image {
  405. height: 80px;
  406. width: 80px;
  407. }
  408.  
  409. .icon-image img {
  410. height: 80px;
  411. width: 80px;
  412. }
  413.  
  414. .main-links {
  415. display: flex;
  416. margin-left: 10px;
  417. width: 170px;
  418. }
  419.  
  420. .main-links a {
  421. background: {color:Link};
  422. color: {color:Post Background};
  423. display: inline-block;
  424. font-size: 0.9rem;
  425. height: 0.9rem;
  426. margin-right: 10px;
  427. padding: 32.7px;
  428. width: 0.9rem;
  429. }
  430.  
  431. .main-links a:hover {
  432. color: {color:Link Hover};
  433. }
  434.  
  435. .main-links a:last-of-type {
  436. margin-right: 0px;
  437. }
  438.  
  439. .modal {
  440. animation-duration: 0.5s;
  441. animation-name: animatetop;
  442. background: rgba(255, 255, 255, 0.5);
  443. display: none;
  444. height: 100%;
  445. left: 0px;
  446. overflow: auto;
  447. position: fixed;
  448. top: 0px;
  449. width: 100%;
  450. z-index: 1;
  451. }
  452.  
  453. .modal-content {
  454. background: {color:Post Background};
  455. border: 1px solid {color:Border};
  456. margin-bottom: 70px;
  457. margin-left: auto;
  458. margin-right: auto;
  459. margin-top: 70px;
  460. width: 440px;
  461. }
  462.  
  463. .close-modal {
  464. background: {color:Main Color};
  465. border-radius: 5px;
  466. color: {color:Post Background};
  467. display: inline-block;
  468. font-size: 0.9rem;
  469. font-variant: normal;
  470. height: 0.9rem;
  471. line-height: 1;
  472. margin-left: 389.805px;
  473. margin-top: -17.195px;
  474. padding: 10px;
  475. position: absolute;
  476. text-rendering: auto;
  477. width: 0.9rem;
  478. z-index: 1;
  479. -webkit-transition: all 0.5s ease;
  480. -moz-transition: all 0.5s ease;
  481. -o-transition: all 0.5s ease;
  482. }
  483.  
  484. .close-modal:hover {
  485. color: {color:Link Hover};
  486. }
  487.  
  488. @keyframes animatetop {
  489.  
  490. from {
  491. opacity: 0;
  492. }
  493.  
  494. to {
  495. top: 0px;
  496. opacity: 1;
  497. }
  498.  
  499. }
  500.  
  501. .links {
  502. font-size: {select:Uppercase Font Size};
  503. margin: -5px;
  504. padding: 20px;
  505. text-transform: uppercase;
  506. display: flex;
  507. flex-direction: row;
  508. flex-wrap: wrap;
  509. width: 410px;
  510. }
  511.  
  512. .links a {
  513. background: {color:Post Background};
  514. border: 1px solid {color:Border};
  515. border-radius: 100px;
  516. margin: 5px;
  517. padding-right: 10px;
  518. }
  519.  
  520. .about {
  521. display: flex;
  522. border-top: 1px solid {color:Border};
  523. padding: 20px;
  524. }
  525.  
  526. .aib-wrapper {
  527. align-items: center;
  528. display: flex;
  529. height: 48px;
  530. width: 158px;
  531. }
  532.  
  533. .avatar-image {
  534. height: 48px;
  535. width: 48px;
  536. }
  537.  
  538. .avatar-image img {
  539. border-radius: 100px;
  540. height: 48px;
  541. width: 48px;
  542. }
  543.  
  544. .border {
  545. background: {color:Border};
  546. height: 1px;
  547. margin-left: 20px;
  548. width: 100px;
  549. }
  550.  
  551. .about-content {
  552. font-size: {select:Uppercase Font Size};
  553. margin-left: 20px;
  554. text-transform: uppercase;
  555. }
  556.  
  557. .sidebar-image {
  558. height: 200px;
  559. margin-top: 10px;
  560. width: 260px;
  561. }
  562.  
  563. .sidebar-image img {
  564. height: 200px;
  565. width: 260px;
  566. }
  567.  
  568. .sis-wrapper {
  569. align-items: center;
  570. background: {color:Post Background};
  571. display: flex;
  572. margin-top: 10px;
  573. width: 260px;
  574. }
  575.  
  576. .search-icon {
  577. height: 34px;
  578. margin-right: 10px;
  579. width: 34.39px;
  580. }
  581.  
  582. .search-wrapper {
  583. width: 100%;
  584. }
  585.  
  586. form {
  587. display: flex;
  588. margin-top: 0em;
  589. margin-block-end: 0em;
  590. }
  591.  
  592. input {
  593. appearance: textfield;
  594. background: transparent;
  595. border-image: initial;
  596. border-radius: 0px;
  597. border-style: none;
  598. border-width: 0px;
  599. color: {color:Text};
  600. cursor: text;
  601. font-family: '{select:Body Font}', sans-serif;
  602. font-size: {select:Uppercase Font Size};
  603. letter-spacing: 1px;
  604. margin: 0px;
  605. outline: 0;
  606. padding: 0px;
  607. text-align: left;
  608. text-indent: 0px;
  609. text-rendering: auto;
  610. text-shadow: none;
  611. text-transform: uppercase;
  612. width: 100%;
  613. -webkit-rtl-ordering: logical;
  614. -webkit-writing-mode: horizontal-tb !important;
  615. }
  616.  
  617. input[type="submit" i] {
  618. display: none!important;
  619. }
  620.  
  621. #user-information:hover .description-outer {
  622. opacity: 1;
  623. }
  624.  
  625. .description-outer {
  626. align-items: center;
  627. background: {color:Post Background};
  628. border: 1px solid {color:Border};
  629. display: flex;
  630. height: 160px;
  631. margin-left: 20px;
  632. margin-top: 110px;
  633. opacity: 0;
  634. position: absolute;
  635. top: 0px;
  636. width: 218px;
  637. -webkit-transition: all 0.9s ease;
  638. -moz-transition: all 0.9s ease;
  639. -o-transition: all 0.9s ease;
  640. }
  641.  
  642. .description-inner {
  643. font-size: {select:Uppercase Font Size};
  644. padding: 20px;
  645. max-height: 120px;
  646. overflow-y: scroll;
  647. text-align: center;
  648. text-transform: uppercase;
  649. width: 178px;
  650. }
  651.  
  652. #posts {
  653. margin-left: 360px;
  654. width: calc({select:Post Width} + 42px);
  655. }
  656.  
  657. .entries {
  658. margin-bottom: 50px;
  659. width: calc({select:Post Width} + 42px);
  660. }
  661.  
  662. .entries-wrapper {
  663. background: {color:Post Background};
  664. border: 1px solid {color:Border};
  665. border-radius: 5px;
  666. padding: 20px;
  667. width: {select:Post Width};
  668. }
  669.  
  670. .entries img {
  671. height: auto;
  672. max-width: 100%;
  673. }
  674.  
  675. .npf_row img {
  676. width: 100%;
  677. }
  678.  
  679. .tmblr-full {
  680. margin-bottom: 10px;
  681. }
  682.  
  683. .npf_inst {
  684. margin-bottom: 20px;
  685. }
  686.  
  687. .npf-wrapper {
  688. margin: 0px;
  689. }
  690.  
  691. .npf-wrapper .tmblr-full {
  692. display: flex;
  693. }
  694.  
  695. .text-wrapper {
  696. margin: 0px;
  697. }
  698.  
  699. .read_more {
  700. background: {color:Main Color};
  701. border: 1px solid {color:Border};
  702. border-radius: 5px;
  703. color: white;
  704. display: inline-block;
  705. font-size: {select:Uppercase Font Size};
  706. padding: 10px;
  707. text-align: center;
  708. text-transform: uppercase;
  709. width: calc(100% - 22px);
  710. }
  711.  
  712. .read_more:hover {
  713. background: white;
  714. color: {color:Main Color};
  715. }
  716.  
  717. .vignette, #vignette {
  718. opacity: 0;
  719. }
  720.  
  721. .lightbox-image, #tumblr_lightbox img {
  722. border-radius: 0!important;
  723. box-shadow: none!important;
  724. max-width: none;
  725. }
  726.  
  727. .tmblr-lightbox, #tumblr_lightbox {
  728. background-attachment: fixed;
  729. background-image: url('https://i.imgur.com/7wF2zbK.png');
  730. background-repeat: repeat;
  731. }
  732.  
  733. .lightbox-caption, #tumblr_lightbox_caption {
  734. visibility: hidden;
  735. }
  736.  
  737. .text p {
  738. margin-top: 0px;
  739. }
  740.  
  741. .caption {
  742. margin-top: 20px;
  743. }
  744.  
  745. .caption p {
  746. margin-top: 0px;
  747. }
  748.  
  749. blockquote.tumblr_parent {
  750. border: none;
  751. border-bottom: 1px solid {color:Border};
  752. margin: 0px;
  753. margin-bottom: 20px;
  754. padding: 0px;
  755. }
  756.  
  757. blockquote.tumblr_parent:last-child {
  758. border-bottom: 0px;
  759. }
  760.  
  761. blockquote.user-reblog {
  762. border: none;
  763. margin: 0px;
  764. padding: 0px;
  765. }
  766.  
  767. .tumblr_avatar {
  768. border-radius: 100px;
  769. height: 30px;
  770. margin-bottom: 20px;
  771. width: 30px;
  772. }
  773.  
  774. .tumblr_avatar img {
  775. height: 30px;
  776. width: 30px;
  777. }
  778.  
  779. .user-image img {
  780. height: 30px;
  781. width: 30px;
  782. }
  783.  
  784. a.tumblr_blog {
  785. font-size: {select:Body Font Size};
  786. font-weight: bold;
  787. margin-top: calc((30px - {select:Body Font Size}) / 4);
  788. display: inline-block;
  789. position: absolute;
  790. margin-left: 10px;
  791. text-align: center;
  792. text-transform: lowercase;
  793. }
  794.  
  795. .message-wrapper {
  796. background: {color:Post Background};
  797. border: 1px solid {color:Border};
  798. border-radius: 5px;
  799. }
  800.  
  801. .message-info-wrapper {
  802. border-bottom: 1px solid {color:Border};
  803. align-items: center;
  804. display: flex;
  805. padding: 20px;
  806. }
  807.  
  808. .asker {
  809. height: 48px;
  810. margin-right: 20px;
  811. width: 48px;
  812. }
  813.  
  814. .asker img {
  815. border-radius: 5px;
  816. height: 48px;
  817. width: 48px;
  818. }
  819.  
  820. a.asker {
  821. margin-right: 0px;
  822. }
  823.  
  824. .asker-question {
  825. font-size: {select:Uppercase Font Size};
  826. text-transform: uppercase;
  827. width: calc(100% - 68px);
  828. }
  829.  
  830. .message {
  831. padding: 20px;
  832. }
  833.  
  834. .message p {
  835. margin-block-start: 0em;
  836. }
  837.  
  838. .message p:last-of-type {
  839. margin-block-end: 0em;
  840. }
  841.  
  842. .quote-wrapper {
  843. width: 100%;
  844. }
  845.  
  846. .quote-icon {
  847. background: {color:Chat Even Background};
  848. border-radius: 100px;
  849. color: {color:Main Color};
  850. font-size: 0.9rem;
  851. height: 0.9rem;
  852. margin-left: auto;
  853. margin-right: auto;
  854. margin-top: -17.195px;
  855. padding: 10px;
  856. width: 0.9rem;
  857. }
  858.  
  859. .quote {
  860. border: 1px solid {color:Border};
  861. border-radius: 5px;
  862. font-family: 'Playfair Display', serif;
  863. font-size: 1.2rem;
  864. font-weight: bold;
  865. padding: 10px;
  866. padding-bottom: 26.4px;
  867. text-align: center;
  868. }
  869.  
  870. .quote a.tumblr_blog {
  871. font-size: {select:Uppercase Font Size};
  872. font-weight: normal;
  873. margin-top: 0px;
  874. margin-left: 0px;
  875. display: inline-block;
  876. position: relative;
  877. text-align: center;
  878. text-transform: uppercase;
  879. }
  880.  
  881. .website {
  882. background: {color:Main Color};
  883. border-radius: 5px;
  884. color: {color:Post Background};
  885. font-size: {select:Uppercase Font Size};
  886. padding: 20px;
  887. text-transform: uppercase;
  888. }
  889.  
  890. .website a {
  891. color: {color:Post Background};
  892. }
  893.  
  894. .website a:hover {
  895. color: {color:Link Hover};
  896. }
  897.  
  898. .chat {
  899. font-size: {select:Uppercase Font Size};
  900. text-transform: uppercase;
  901. }
  902.  
  903. .chat li {
  904. list-style-type: none;
  905. }
  906.  
  907. .chat li:nth-child(odd) {
  908. background: {color:Main Color};
  909. color: {color:Post Background};
  910. padding: 10px;
  911. }
  912.  
  913. .chat li:nth-child(even) {
  914. background: {color:Chat Even Background};
  915. color: {color:Main Color};
  916. padding: 10px;
  917. }
  918.  
  919. .audio iframe {
  920. height: 85px;
  921. width: 100%;
  922. }
  923.  
  924. /** spotify fix by glenthemes **/
  925.  
  926. iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
  927. height: 85px!important;
  928. margin-bottom: 0px;
  929. }
  930.  
  931. figure {
  932. display: flex;
  933. width: 100%;
  934. }
  935.  
  936. figcaption.npf-audio-wrapper {
  937. width: 100%;
  938. }
  939.  
  940. .npf-audio-wrapper {
  941. --NPF-Audio-Buttons-Size: 1.4rem;
  942. --NPF-Audio-Buttons-Color: #555555;
  943. --NPF-Audio-Buttons-Spacing: 1.3rem;
  944. --NPF-Audio-Image-Size: 85px;
  945. --NPF-Audio-Image-Spacing: 0px;
  946. }
  947.  
  948. span.npf-audio-title {
  949. font-weight: bold;
  950. }
  951.  
  952. .npf-audio-background {
  953. background-color: #f2f2f2;
  954. padding: 1.5rem;
  955. }
  956.  
  957. video {
  958. height: auto;
  959. width: 100%;
  960. }
  961.  
  962. .source {
  963. background: {color:Chat Even Background};
  964. border-radius: 5px;
  965. display: inline-block;
  966. font-size: {select:Uppercase Font Size};
  967. margin-top: 10px;
  968. padding: 5px;
  969. text-transform: uppercase;
  970. }
  971.  
  972. .post-date {
  973. border-bottom: 1px solid {color:Border};
  974. font-size: {select:Uppercase Font Size};
  975. margin: -20px;
  976. margin-bottom: 20px;
  977. padding: 20px;
  978. overflow: auto;
  979. text-transform: uppercase;
  980. }
  981.  
  982. .pslr {
  983. border-top: 1px solid {color:Border};
  984. font-size: {select:Uppercase Font Size};
  985. margin: -20px;
  986. margin-top: 20px;
  987. padding: 20px;
  988. overflow: hidden;
  989. text-transform: uppercase;
  990. }
  991.  
  992. .pinned-post {
  993. color: {color:Pin};
  994. display: inline-block;
  995. font-size: {select:Uppercase Font Size};
  996. margin-right: 10px;
  997. text-transform: uppercase;
  998. }
  999.  
  1000. .like-b {
  1001. display: inline-block;
  1002. margin-right: 10px;
  1003. position: relative;
  1004. }
  1005.  
  1006. .like-b .like_button iframe {
  1007. bottom: 0px;
  1008. left: 0px;
  1009. opacity: 0;
  1010. position: absolute;
  1011. right: 0px;
  1012. top: 0px;
  1013. }
  1014.  
  1015. .like-b .liked + .b {
  1016. color: {color:Like};
  1017. }
  1018.  
  1019. .vsdt-wrapper {
  1020. font-size: {select:Uppercase Font Size};
  1021. margin: -3px;
  1022. margin-top: 10px;
  1023. text-transform: uppercase;
  1024. }
  1025.  
  1026. .vsdt-wrapper span {
  1027. background: {color:Post Background};
  1028. border: 1px solid {color:Border};
  1029. border-radius: 5px;
  1030. display: inline-block;
  1031. margin: 3px;
  1032. padding: 5px 10px 5px 10px;
  1033. }
  1034.  
  1035. .tags-title {
  1036. font-size: {select:Uppercase Font Size};
  1037. display: inline-block;
  1038. text-transform: uppercase;
  1039. }
  1040.  
  1041. .tags-title a {
  1042. -webkit-transition: all 0.5s ease;
  1043. -moz-transition: all 0.5s ease;
  1044. -o-transition: all 0.5s ease;
  1045. }
  1046.  
  1047. .tags-title:hover {
  1048. color: {color:Link Hover};
  1049. }
  1050.  
  1051. .tags {
  1052. font-size: {select:Uppercase Font Size};
  1053. text-transform: uppercase;
  1054. }
  1055.  
  1056. .tags-alternate {
  1057. font-size: {select:Uppercase Font Size};
  1058. display: inline-block;
  1059. text-transform: uppercase;
  1060. }
  1061.  
  1062. ol.notes {
  1063. background: {color:Post Background};
  1064. border: 1px solid {color:Border};
  1065. border-radius: 5px;
  1066. font-size: {select:Uppercase Font Size};
  1067. margin-top: 20px;
  1068. padding: 10px;
  1069. text-align: left;
  1070. text-transform: uppercase;
  1071. }
  1072.  
  1073. ol.notes li {
  1074. list-style-type: none;
  1075. margin: 10px;
  1076. }
  1077.  
  1078. ol.notes li.note img.avatar {
  1079. border-radius: 100px;
  1080. vertical-align: -4px;
  1081. height: 16px;
  1082. margin-right: 10px;
  1083. width: 16px;
  1084. }
  1085.  
  1086. .more_notes_link {
  1087. background: {color:Main Color};
  1088. border-radius: 5px;
  1089. color: white;
  1090. display: inline-block;
  1091. padding: 5px 10px 5px 10px;
  1092. text-align: center;
  1093. }
  1094.  
  1095. .pagination {
  1096. align-items: baseline;
  1097. display: flex;
  1098. font-size: {select:Uppercase Font Size};
  1099. justify-content: space-between;
  1100. text-align: center;
  1101. text-transform: uppercase;
  1102. }
  1103.  
  1104. .navigation {
  1105. align-self: baseline;
  1106. display: flex;
  1107. }
  1108.  
  1109. .navigation a {
  1110. background: {color:Main Color};
  1111. border: 1px solid {color:Main Color};
  1112. border-radius: 5px;
  1113. color: {color:Post Background};
  1114. padding: 5px;
  1115. }
  1116.  
  1117. .navigation a:hover {
  1118. background: {color:Post Background};
  1119. color: {color:Main Color};
  1120. }
  1121.  
  1122. .pages {
  1123. align-self: baseline;
  1124. background: {color:Main Color};
  1125. border: 1px solid {color:Main Color};
  1126. border-radius: 5px;
  1127. color: {color:Post Background};
  1128. display: flex;
  1129. padding: 5px;
  1130. }
  1131.  
  1132. #top {
  1133. background: {color:Main Color};
  1134. border: 1px solid {color:Border};
  1135. border-radius: 100px;
  1136. bottom: 66px;
  1137. color: {color:Post Background};
  1138. display: none;
  1139. font-size: 0.9rem;
  1140. font-variant: normal;
  1141. height: 0.9rem;
  1142. line-height: 1;
  1143. padding: 10px;
  1144. position: fixed;
  1145. right: 20px;
  1146. text-rendering: auto;
  1147. width: 0.9rem;
  1148. z-index: 1;
  1149. -webkit-transition: all 0.5s ease;
  1150. -moz-transition: all 0.5s ease;
  1151. -o-transition: all 0.5s ease;
  1152. }
  1153.  
  1154. #top:hover {
  1155. background: {color:Post Background};
  1156. color: {color:Link Hover};
  1157. }
  1158.  
  1159. #credit {
  1160. bottom: 20px;
  1161. font-size: 0.9rem;
  1162. height: 36px;
  1163. position: fixed;
  1164. right: 20px;
  1165. text-transform: uppercase;
  1166. z-index: 1;
  1167. width: auto;
  1168. }
  1169.  
  1170. #credit a {
  1171. background: {color:Main Color};
  1172. border: 1px solid {color:Border};
  1173. border-radius: 100px;
  1174. color: {color:Post Background};
  1175. display: inline-block;
  1176. font-size: 0.9rem;
  1177. font-variant: normal;
  1178. height: 0.9rem;
  1179. line-height: 1;
  1180. padding: 10px;
  1181. width: 0.9rem;
  1182. }
  1183.  
  1184. #credit a:hover  {
  1185. background: {color:Post Background};
  1186. color: {color:Link Hover};
  1187. }
  1188.  
  1189. #credit:hover .credit-name {
  1190. right: 20px;
  1191. opacity: 1;
  1192. }
  1193.  
  1194. .credit-name {
  1195. background: {color:Text};
  1196. border: 1px solid {color:Border};
  1197. border-radius: 100px;
  1198. bottom: 20px;
  1199. color: {color:Post Background};
  1200. display: inline-block;
  1201. font-size: 0.9rem;
  1202. font-variant: normal;
  1203. height: 0.9rem;
  1204. line-height: 1;
  1205. opacity: 0;
  1206. padding: 10px;
  1207. padding-right: 46.8px;
  1208. position: fixed;
  1209. right: -20px;
  1210. text-align: center;
  1211. z-index: -1;
  1212. -webkit-transition: all 0.9s ease;
  1213. -moz-transition: all 0.9s ease;
  1214. -o-transition: all 0.9s ease;
  1215. }
  1216.  
  1217. {CustomCSS}
  1218.    
  1219. </style>
  1220.    
  1221. </head>
  1222.  
  1223. <body>
  1224.  
  1225. <div id="title">{text:Title}</div>
  1226.  
  1227. <div id="container">
  1228.  
  1229. <div id="user-information-wrapper">
  1230.  
  1231. <div id="user-information">
  1232.  
  1233. <div class="iml-wrapper">
  1234.  
  1235. <div class="icon-image"><img src="{image:Icon Image}"/></div>
  1236.  
  1237. <div class="main-links">
  1238. <a href="/" title="Home"><i class="far fa-arrow-alt-circle-left"></i></a>
  1239. <a class="open-modal" title="Navigation"><i class="fas fa-list"></i></a>
  1240. </div>
  1241.  
  1242. </div>
  1243.  
  1244. <div class="sidebar-image"><img src="{image:Sidebar Image}"/></div>
  1245.  
  1246. <div class="sis-wrapper">
  1247.  
  1248. <div class="search-icon"><i class="fas fa-search" style="background: {color:Main Color};color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i></div>
  1249.  
  1250. <!-- Start of Search Bar -->
  1251.  
  1252. <div class="search-wrapper"><form action="/search" method="get"><input type="text" name="q" placeholder="Search This Blog" value="{SearchQuery}"/></form></div>
  1253.  
  1254. <!-- End of Search Bar -->
  1255.  
  1256. </div>
  1257.  
  1258. {block:Description}<div class="description-outer"><div class="description-inner">{Description}</div></div>{/block:Description}
  1259.  
  1260. </div>
  1261.  
  1262. </div>
  1263.  
  1264. <div class="modal modal_multi">
  1265.  
  1266. <div class="modal-content">
  1267.  
  1268. <div class="close-modal close_modal"><i class="far fa-times-circle"></i></div>
  1269.  
  1270. <div class="links">
  1271. {block:AskEnabled}<a href="/ask"><i class="far fa-envelope" 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>Ask</a>{/block:AskEnabled}
  1272. {block:SubmissionsEnabled}{block:ifSubmitLink}<a href="/submit"><i class="fas fa-file-import" 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>Submit</a>{/block:ifSubmitLink}{/block:SubmissionsEnabled}
  1273. {block:ifLink1URL}<a href="{text:Link 1 URL}"><i class="fas fa-cookie-bite" 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>{text:Link 1 Name}</a>{/block:ifLink1URL}
  1274. {block:ifLink2URL}<a href="{text:Link 2 URL}"><i class="fas fa-paint-brush" 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>{text:Link 2 Name}</a>{/block:ifLink2URL}
  1275. {block:ifLink3URL}<a href="{text:Link 3 URL}"><i class="far fa-moon" 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>{text:Link 3 Name}</a>{/block:ifLink3URL}
  1276. <a href="/archive"><i class="fas fa-server" 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>Archive</a>
  1277. </div>
  1278.  
  1279. <div class="about">
  1280.  
  1281. <div class="aib-wrapper">
  1282.  
  1283. <div class="avatar-image"><img src="{PortraitURL-48}"/></div>
  1284.  
  1285. <div class="border"></div>
  1286.  
  1287. </div>
  1288.  
  1289. <div class="about-content"><h1 style="font-size: 0.9rem;text-transform: lowercase;">{text:About Title}</h1>{text:About}</div>
  1290.  
  1291. </div>
  1292.  
  1293. </div>
  1294.  
  1295. </div>
  1296.  
  1297. <div id="posts">
  1298.  
  1299. {block:Posts}
  1300.  
  1301. <div class="entries" id="{PostID}" post-type="{PostType}">
  1302.  
  1303. <div class="entries-wrapper">
  1304.  
  1305. {block:Date}
  1306. <div class="post-date"><a href="{Permalink}"><i class="fas fa-calendar-day" style="color: {color:Text};margin-right: 5px;"></i>{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a><font style="float: right;"><a href="{Permalink}">{TimeAgo}</a></font></div>
  1307. {/block:Date}
  1308.  
  1309. {block:Text}
  1310. {block:NotReblog}
  1311. <div class="npf-wrapper">
  1312. {block:Title}
  1313. <h1>{Title}</h1>
  1314. {/block:Title}
  1315. {Body}
  1316. </div>
  1317. {/block:NotReblog}
  1318. {block:RebloggedFrom}
  1319. <div class="text-wrapper">
  1320. {block:Title}
  1321. <h1>{Title}</h1>
  1322. {/block:Title}
  1323. <div class="text">
  1324. {Body}
  1325. </div>
  1326. </div>
  1327. {/block:RebloggedFrom}
  1328. {/block:Text}
  1329.  
  1330. {block:Answer}
  1331. <div class="message-wrapper">
  1332. <div class="message-info-wrapper">
  1333. <div class="asker"><img src="{AskerPortraitURL-48}"/></div><div class="asker-question"><i class="far fa-envelope-open"></i> {Asker} <br> sent a message:</div>
  1334. </div>
  1335. <div class="message">{Question}</div>
  1336. </div>
  1337. <div class="caption">
  1338. {Answer}
  1339. </div>
  1340. {/block:Answer}
  1341.  
  1342. {block:Quote}
  1343. <div class="quote-wrapper">
  1344. <div class="quote">
  1345. "{Quote}</i>"
  1346. {block:Source}
  1347. <br><br>
  1348. <font style="font-family: '{select:Body Font}', sans-serif;font-size: {select:Uppercase Font Size};font-style: normal;font-weight: normal;text-transform: uppercase;">
  1349. — {Source}
  1350. </font>
  1351. {/block:Source}
  1352. </div>
  1353. <div class="quote-icon"><i class="far fa-comment-dots" style="vertical-align: top;"></i></div>
  1354. </div>
  1355. {/block:Quote}
  1356.  
  1357. {block:Link}
  1358. {block:Thumbnail}
  1359. <img src="{Thumbnail}" style="border-radius: 5px;margin-bottom: 10px;"/>
  1360. {/block:Thumbnail}
  1361. <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}
  1362. </a></div>
  1363. {block:Description}
  1364. <div class="caption">
  1365. {Description}
  1366. </div>
  1367. {/block:Description}
  1368. {/block:Link}
  1369.  
  1370. {block:Chat}
  1371. <div class="chat">
  1372. {block:Title}
  1373. <h1>{Title}</h1>
  1374. {/block:Title}
  1375. {block:Lines}
  1376. <li>{block:Label}{Label}{/block:Label}
  1377. {Line}
  1378. </li>
  1379. {/block:Lines}
  1380. </div>
  1381. {/block:Chat}
  1382.  
  1383. {block:Audio}
  1384. <div class="audio">
  1385. {AudioEmbed}
  1386. </div>
  1387. {block:Caption}
  1388. <div class="caption">{Caption}</div>
  1389. {/block:Caption}
  1390. {/block:Audio}
  1391.  
  1392. {block:Photo}
  1393. <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>
  1394. {block:Caption}
  1395. <div class="text-wrapper">
  1396. <div class="caption">{Caption}</div>
  1397. </div>
  1398. {/block:Caption}
  1399. {/block:Photo}
  1400.  
  1401. {block:Photoset}
  1402. <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>
  1403. {block:Caption}
  1404. <div class="text-wrapper">
  1405. <div class="caption">{Caption}</div>
  1406. </div>
  1407. {/block:Caption}
  1408. {/block:Photoset}
  1409.  
  1410. {block:Video}
  1411. <div class="video">
  1412. {Video-500}
  1413. </div>
  1414. {block:Caption}
  1415. <div class="caption">{Caption}</div>
  1416. {/block:Caption}
  1417. {/block:Video}
  1418.  
  1419. {block:ContentSource}
  1420. <div class="source">
  1421. <i class="fas fa-paper-plane" style="color: {color:Main Color};margin-right: 5px;"></i><a href="{SourceURL}" title="{SourceTitle}">Source</a>
  1422. </div>
  1423. {/block:ContentSource}
  1424.  
  1425. {block:Date}
  1426. <div class="pslr">
  1427. {block:PinnedPostLabel}<div class="pinned-post"><i class="fas fa-star"></i></div>{/block:PinnedPostLabel}{block:NoteCount}<i class="fas fa-chart-bar" style="margin-right: 5px;"></i><a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}{block:RebloggedFrom}<i class="fas fa-sync-alt" style="margin-left: 10px;margin-right: 5px;"></i><a href="{ReblogParentURL}">Via</a>{/block:RebloggedFrom}{block:ContentSource}{block:RebloggedFrom}<i class="far fa-folder" style="margin-left: 10px;margin-right: 5px;"></i><a href="{ReblogRootURL}">Source</a></span>{/block:RebloggedFrom}{/block:ContentSource}
  1428. <font style="float: right;">
  1429. <a class="like-b" href="#">{LikeButton}<div class="b"><i class="far fa-heart"></i></div></a>
  1430. <a href="{ReblogURL}" target="_blank"><i class="fas fa-undo-alt"></i></a>
  1431. </font>
  1432. </div>
  1433. {/block:Date}
  1434.  
  1435. {block:Date}
  1436. {block:IfHideTags}
  1437. {block:HasTags}
  1438. <div class="vsdt-wrapper">
  1439. <a class="tags-title"><span><i class="fas fa-angle-right" style="margin-right: 5px;"></i>Show Tags</span></a>
  1440. <div class="tags">
  1441. {block:Tags}
  1442. <span><a href="{TagURL}"><i class="far fa-heart" style="margin-right: 5px;"></i>{Tag}</a></span>
  1443. {/block:Tags}
  1444. </div>
  1445. </div>
  1446. {/block:HasTags}
  1447. {/block:IfHideTags}
  1448. {block:IfShowTags}
  1449. {block:HasTags}
  1450. <div class="vsdt-wrapper">
  1451. <div class="tags-alternate">
  1452. {block:Tags}
  1453. <span><a href="{TagURL}"><i class="far fa-heart" style="margin-right: 5px;"></i>{Tag}</a></span>
  1454. {/block:Tags}
  1455. </div>
  1456. </div>
  1457. {/block:HasTags}
  1458. {/block:IfShowTags}
  1459. {block:Date}
  1460.  
  1461. </div>
  1462.  
  1463. {block:PostNotes}
  1464. {PostNotes}
  1465. {/block:PostNotes}
  1466.  
  1467. </div>
  1468.  
  1469. {/block:Posts}
  1470.  
  1471. {block:Pagination}
  1472. <div class="pagination">
  1473. {block:PreviousPage}
  1474. <div class="navigation">
  1475. <a href="{PreviousPage}"><i class="fas fa-angle-left" style="margin-right: 5px;"></i>Prev</a>
  1476. </div>
  1477. {/block:PreviousPage}
  1478. <div class="pages">
  1479. {CurrentPage} / {TotalPages}
  1480. </div>
  1481. {block:NextPage}
  1482. <div class="navigation">
  1483. <a href="{NextPage}">Next<i class="fas fa-angle-right" style="margin-left: 5px;"></i></a>
  1484. </div>
  1485. {/block:NextPage}
  1486. </div>
  1487. {/block:Pagination}
  1488.  
  1489. </div>
  1490.  
  1491. </div>
  1492.  
  1493. {block:IfBackToTop}<div id="top"><i class="fas fa-arrow-circle-up"></i></div>{/block:IfBackToTop}
  1494.  
  1495. <!-- Start of Theme Credit -->
  1496.  
  1497. <div id="credit"><a href="https://ghcstfaec.tumblr.com/"><i class="fas fa-feather-alt"></i></a><div class="credit-name">GHCST</div></div>
  1498.  
  1499. <!-- End of Theme Credit -->
  1500.  
  1501. </body>
  1502.  
  1503. <!-- Modal Script -->
  1504.  
  1505. <script>
  1506. var modalparent = document.getElementsByClassName("modal_multi");
  1507. var modal_btn_multi = document.getElementsByClassName("open-modal");
  1508. var span_close_multi = document.getElementsByClassName("close_modal");
  1509. function setDataIndex() {
  1510. for (i = 0; i < modal_btn_multi.length; i++)
  1511. {
  1512. modal_btn_multi[i].setAttribute('data-index', i);
  1513. modalparent[i].setAttribute('data-index', i);
  1514. span_close_multi[i].setAttribute('data-index', i);
  1515. }
  1516. }
  1517. for (i = 0; i < modal_btn_multi.length; i++)
  1518. {
  1519. modal_btn_multi[i].onclick = function() {
  1520. var ElementIndex = this.getAttribute('data-index');
  1521. modalparent[ElementIndex].style.display = "block";
  1522. };
  1523. span_close_multi[i].onclick = function() {
  1524. var ElementIndex = this.getAttribute('data-index');
  1525. modalparent[ElementIndex].style.display = "none";
  1526. };
  1527. }
  1528. window.onload = function() {
  1529. setDataIndex();
  1530. };
  1531. window.onclick = function(event) {
  1532. if (event.target === modalparent[event.target.getAttribute('data-index')]) {
  1533. modalparent[event.target.getAttribute('data-index')].style.display = "none";
  1534. }
  1535. if (event.target === modal) {
  1536. modal.style.display = "none";
  1537. }
  1538. };
  1539. var modal = document.getElementById('myModal');
  1540. var btn = document.getElementById("open-modal");
  1541. var span = modal.getElementsByClassName("close-modal")[0];
  1542. btn.onclick = function() {
  1543. modal.style.display = "block";
  1544. }
  1545. span.onclick = function() {
  1546. modal.style.display = "none";
  1547. }
  1548. </script>
  1549.  
  1550. </html>
Advertisement
Add Comment
Please, Sign In to add comment