vitaminholland

Theme — Dreamscape

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