vitaminholland

Theme — Cloudy

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