Advertisement
vitaminholland

Theme — Primrose

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