vitaminholland

Theme — Daydreaming

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