vitaminholland

Theme — Primrose

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