vitaminholland

Theme — Melodies Of A Broken Heart

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