vitaminholland

Theme — Young Forever

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