vitaminholland

Theme — Paper Rings

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