vitaminholland

Theme — Lore

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