API tools faq
paste
cordiiceps

CODE 01. BY SIILVERHAND.

cordiiceps
Nov 12th, 2021 (edited)
1,981
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.54 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. THEME CREATED BY CORDEECEPS !
  4.  
  5. DO NOT STEAL, REDISTRIBUTE, USE AS A BASE, REMOVE THE CREDIT OR CLAIM AS YOUR OWN !!
  6.  
  7. -->
  8.  
  9. <html>
  10. <head>
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14. {block:Description}
  15. <meta name="description" content="{MetaDescription}" />
  16. {/block:Description}
  17.  
  18. <link rel="preconnect" href="https://fonts.gstatic.com">
  19.  
  20. <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  21.  
  22. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  23.  
  24. <link href="https://fonts.googleapis.com/css2?family=Taviraj:wght@600;900&display=swap" rel="stylesheet">
  25.  
  26. <link href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" rel="stylesheet">
  27.  
  28. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  29.  
  30.  
  31. <script type="text/javascript"
  32. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  33. <script>
  34. $(document).ready(function() {
  35. //
  36. $('a.poplight[href^=#]').click(function() {
  37. var popID = $(this).attr('rel'); //Get Popup Name
  38. var popURL = $(this).attr('href'); //Get Popup href to define size
  39. var query= popURL.split('?');
  40. var dim= query[1].split('&');
  41. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  42. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  43. var popMargTop = ($('#' + popID).height() + 80) / 2;
  44. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  45. //Apply Margin to Popup
  46. $('#' + popID).css({
  47. 'margin-top' : -popMargTop,
  48. 'margin-left' : -popMargLeft
  49. });
  50. $('body').append('<div id="fade"></div>');
  51. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  52. return false;
  53. });
  54. $('a.close, #fade').live('click', function() {
  55. $('#fade , .popup_block').fadeOut(function() {
  56. $('#fade, a.close').remove(); //fade them both out
  57. });
  58. return false;
  59. });
  60. });
  61. </script>
  62.  
  63.  
  64.  
  65.  
  66. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  67. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  68. <script>
  69. (function($){
  70. $(document).ready(function(){
  71. $("a[title]").style_my_tooltips({
  72. tip_follows_cursor:true,
  73. tip_delay_time:90,
  74. tip_fade_speed:600,
  75. attribute:"title"
  76. });
  77. });
  78. })(jQuery);
  79. </script>
  80.  
  81.  
  82.  
  83. <script>
  84. function openCity(evt, cityName) {
  85. var i, tabcontent, tablinks;
  86. tabcontent = document.getElementsByClassName("tabcontent");
  87. for (i = 0; i < tabcontent.length; i++) {
  88. tabcontent[i].style.display = "none";
  89. }
  90. tablinks = document.getElementsByClassName("tablinks");
  91. for (i = 0; i < tablinks.length; i++) {
  92. tablinks[i].className = tablinks[i].className.replace(" active", "");
  93. }
  94. document.getElementById(cityName).style.display = "block";
  95. evt.currentTarget.className += " active";
  96. }
  97. </script>
  98.  
  99.  
  100. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  101. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  102.  
  103. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  104.  
  105. <script>
  106. $(document).ready(function() {
  107. var $container = $(".grid"); // the container with all the elements to filter inside
  108. var filters = {}; //should be outside the scope of the filtering function
  109. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  110. var $grid = $container.isotope({
  111. itemSelector: ".item", // the elements to filter
  112. percentPosition: true // put true if you use percentage widths, otherwise put false
  113. });
  114. $(".option-set a").click(function(e) {
  115. var $this = $(this); // cache the clicked link
  116. var filterAttr = "data-filter-value";
  117. var filterValue = $this.attr(filterAttr); // cache the filter
  118. var $optionSet = $this.parents(".option-set"); // cache the parent element
  119. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  120. var filterGroup = filters[group];
  121. if (!filterGroup) {
  122. filterGroup = filters[group] = [];
  123. }
  124. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  125. var activeClass = "selected", // the class for active links
  126. exclClass = "exclusive"; // the class for exclusive groups
  127. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  128. var comboFilter = getComboFilter(filters);
  129. $grid.isotope({
  130. filter: comboFilter
  131. });
  132. $this.toggleClass(activeClass);
  133. e.preventDefault();
  134. });
  135. });
  136. </script>
  137.  
  138.  
  139. <meta name="image:container bg" content=""/>
  140. <meta name="image:nav desc img" content=""/>
  141. <meta name="image:nav img 1" content=""/>
  142. <meta name="image:nav img 2" content=""/>
  143. <meta name="image:nav img 3" content=""/>
  144.  
  145. <meta name="color:background" content="#101010"/>
  146. <meta name="color:container bg" content="#080808"/>
  147. <meta name="color:posts" content="#101010"/>
  148. <meta name="color:permalinks" content="#4f635f"/>
  149. <meta name="color:text" content="#cecece"/>
  150. <meta name="color:borders" content="#202020"/>
  151. <meta name="color:accent 1" content="#58907d"/>
  152. <meta name="color:accent 2" content="#ab936a"/>
  153. <meta name="color:accent 3" content="#7d3b30"/>
  154. <meta name="color:bold shadow" content="#fdeae7"/>
  155. <meta name="color:tags" content="#4f635f"/>
  156.  
  157. <meta name="text:desc" content="/"/>
  158. <meta name="text:containter title" content="/"/>
  159. <meta name="text:nav quote" content="/"/>
  160. <meta name="text:one" content="index."/>
  161. <meta name="text:one link" content="/"/>
  162. <meta name="text:two" content="ask."/>
  163. <meta name="text:two link" content="/ask"/>
  164. <meta name="text:three" content="navigate."/>
  165. <meta name="text:four" content="muses."/>
  166. <meta name="text:five" content="extra link."/>
  167. <meta name="text:five link" content="/"/>
  168.  
  169.  
  170.  
  171.  
  172. </head>
  173.  
  174. <style type="text/css">
  175.  
  176.  
  177.  
  178.  
  179. /* TOOLTIPS */
  180.  
  181. #s-m-t-tooltip { max-width:500px; margin:-40px 10px 10px 0px; background-color:{color:tags};
  182.  
  183. font-family:'Yeseva One';, serif; font-size:14px; letter-spacing:3px; text-transform:lowercase; color:{color:background}; font-weight: 900;
  184. padding-top:5px; padding-bottom:6px; padding-left:10px; padding-right:5px;
  185. z-index:999999999999999999999999999999999999;
  186. border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; }
  187.  
  188. /* SCROLL BAR */
  189.  
  190. ::-webkit-scrollbar {
  191. width: 0px;
  192. }
  193. ::-webkit-scrollbar-button {
  194. width: 0px; height:0px; }
  195.  
  196. ::-webkit-scrollbar-thumb {
  197. background: transparent; border-radius: 5px; }
  198.  
  199. ::-webkit-scrollbar-track {
  200. background: transparent; }
  201.  
  202. /* GENERAL STYLING */
  203.  
  204. body {
  205. background-color: {color:background};
  206. font-family: 'IBM Plex Serif', serif;
  207. font-weight:400;
  208. font-size: 13px;
  209. color: {color:text};
  210. word-spacing:1px;
  211. text-align:justify;
  212.  
  213. }
  214.  
  215. p {
  216. line-height:18px;
  217. padding-left:0px;
  218. padding-right:0px;
  219. }
  220.  
  221. sub, small, sup {
  222. font-size:13px;
  223. }
  224.  
  225. a {
  226. text-decoration:none;
  227. color: {color:accent 1};
  228. -webkit-transition: all 0.3s ease;
  229. -moz-transition: all 0.3s ease;
  230. -o-transition: all 0.3s ease;
  231. }
  232.  
  233. a:hover {
  234. color: {color:accent 3};
  235. }
  236.  
  237. b, strong {
  238. color: {color:accent 3};
  239. font-weight:900;
  240. }
  241.  
  242. i, em {
  243. color: {color:accent 2};
  244. font-weight:500;
  245. }
  246.  
  247. h1, big, h2 {
  248. line-height:30px;
  249. padding-right:20px;
  250. padding-left:20px;
  251. font-size:25px;
  252. margin-bottom:10px; margin-top:10px;
  253. color: {color:accent 1};
  254. letter-spacing: 2px;
  255. text-align:right;
  256. font-weight:600;
  257. font-family: 'Taviraj', serif;
  258. }
  259.  
  260. h3 {
  261. font-size:16px;
  262. line-height:16px;
  263. text-align:center;
  264. padding-left:20px;
  265. color: {color:accent 3};
  266. letter-spacing: 1px;
  267. }
  268.  
  269. blockquote {
  270. padding:0px 20px 0px ;
  271. margin:0px 0 0px 0px;
  272. border-left: 1px solid {color:accent 2};
  273. margin-top:20px;
  274. margin-bottom:20px;
  275. }
  276.  
  277. blockquote blockquote {
  278. padding:0px 20px 0px ;
  279. margin:0px 0 0px 0px;
  280. border-left: 1px solid {color:accent 2};
  281. margin-top:20px;
  282. margin-bottom:20px;
  283. }
  284.  
  285. blockquote img {
  286. max-width: 100%;
  287. height:auto;
  288.  
  289. }
  290.  
  291. img {
  292. max-width: 100%;
  293. }
  294.  
  295. .caption img {
  296. max-width:100%;
  297. height:auto;
  298. }
  299.  
  300. .posts img {
  301. max-width:100%;
  302.  
  303. }
  304.  
  305. /* CONTAINER */
  306.  
  307. .background {
  308. position:absolute; margin:auto;
  309. left:0px; right:0px; top:0px; bottom:0px;
  310. height:450px; width: 900px;
  311. background-image: url({image:container bg});
  312. background-position: center;
  313. background-repeat: no-repeat;
  314. background-attachment: fixed;
  315. overflow:hidden;
  316. }
  317.  
  318. #container {
  319. position:absolute; margin:auto;
  320. left:0px; right:330px; top:0px; bottom:0px;
  321. background-color: {color:container bg};
  322. height: 470px; width: 445px;
  323. overflow-y:scroll;
  324. padding:30px;
  325. border-radius: 3px 3px 3px 3px;
  326. -moz-border-radius: 3px 3px 3px 3px;
  327. -webkit-border-radius: 3px 3px 3px 3px;
  328. z-index:9!important;
  329. -moz-box-shadow: 0px 0px 2px 1px #000;
  330. -webkit-box-shadow: 0px 0px 2px 1px #000;
  331. box-shadow: 0px 0px 4px 0px #000;
  332.  
  333. }
  334.  
  335.  
  336. .title {
  337. font-size:90px;
  338. line-height:72px;
  339. text-align: right;
  340. font-family: 'Taviraj', serif;
  341. -webkit-text-stroke-width: 1px;
  342. -webkit-text-stroke-color: {color:accent 1};
  343. color: {color:container bg};
  344. letter-spacing:0px;
  345. float:right;
  346. width:500px;
  347. text-transform:uppercase;
  348. margin-right:-15px; margin-top:-15px;
  349. opacity: 0.7;
  350. font-style:italic;
  351. font-weight:900;
  352. }
  353.  
  354. .title b {
  355. color: {color:accent 1};
  356. }
  357.  
  358. .sidebar {
  359. width: 300px; height: 150px;
  360. margin-left:570px; margin-top:230px;
  361. border-radius: 3px 3px 3px 3px;
  362. -moz-border-radius: 3px 3px 3px 3px;
  363. -webkit-border-radius: 3px 3px 3px 3px;
  364. border: 1px solid {color:accent 2};
  365. background-color:rgba(0, 0, 0, 0.3);
  366. backdrop-filter: blur(5px);
  367. overflow:hidden;
  368. position:absolute;
  369. }
  370.  
  371. .desc {
  372. font-size:13px;
  373. z-index:9!important;
  374. position:fixed;
  375. padding-left:28px; padding-right:30px;
  376. margin-top:25px; margin-left:7px;
  377. height:110px;
  378. overflow:scroll;
  379. }
  380.  
  381.  
  382. .links {
  383. position:fixed;
  384. z-index:9!important;
  385. margin-left:488px; margin-top:-20px;
  386. font-family:'Yeseva One';
  387. }
  388.  
  389.  
  390. .links a {
  391. padding-bottom:12px; padding-left:5px; padding-right: 5px;
  392. margin-right:10px;
  393. font-weight:900;
  394. text-transform:lowercase;
  395. color:{color:accent 2};
  396. letter-spacing:1;
  397. font-size:14px;
  398. display:inline-block;
  399. }
  400.  
  401. .links a:hover {
  402. text-shadow:0px 0px 20px {color:bold shadow};
  403. border-bottom:2px solid {color:accent 2};
  404. }
  405.  
  406. .pagination {
  407. position:fixed;
  408. z-index:9!important;
  409. margin-left:488px; margin-top:461px;
  410. font-family:'Yeseva One';
  411. }
  412.  
  413. .pagination a {
  414. padding-top:10px; padding-left:5px;
  415. font-weight:900;
  416. text-transform:lowercase;
  417. color:{color:accent 2};
  418. letter-spacing:1;
  419. font-size:14px;
  420. display:inline-block;
  421. letter-spacing:3px;
  422. }
  423.  
  424. .pagination a:hover {
  425. text-shadow:0px 0px 20px {color:bold shadow};
  426. border-top:2px solid {color:accent 2};
  427. }
  428.  
  429. /* POSTS */
  430.  
  431. .posts {
  432. width:400px;
  433. background: {color:posts};
  434. padding: 22px;
  435. margin-top:0px; margin-bottom:10px; margin-left:0px; margin-right:0px;
  436. border-radius: 3px 3px 3px 3px;
  437. -moz-border-radius: 3px 3px 3px 3px;
  438. -webkit-border-radius: 3px 3px 3px 3px;
  439. border: 1px solid {color:borders};
  440. }
  441.  
  442. .permalinks {
  443. font-weight:900;
  444. letter-spacing:2px;
  445. padding-bottom:15px;
  446. margin-top:-10px; margin-bottom:20px;
  447. border-bottom:1px solid {color:borders};
  448. }
  449.  
  450. .permalinks a {
  451. text-decoration:none;
  452. font-size: 12px;
  453. color: {color:permalinks};
  454. font-weight:900;
  455. }
  456.  
  457. .permalinks a:hover {
  458. color: {color:accent 3};
  459. }
  460.  
  461. .reblogs {
  462. float:right;
  463. margin-top:0px;
  464. }
  465.  
  466. .tags {
  467. text-align:right;
  468. width:445px;
  469. padding:0px;
  470. color:{color:accent 2};
  471. font-weight:900;
  472. margin-bottom:30px;
  473. }
  474.  
  475. .tags a {
  476. font-size: 13px;
  477. color: {color:tags};
  478. margin-right:5px;
  479. font-weight:500;
  480. letter-spacing:0.5;
  481. }
  482.  
  483. .tags a:hover {
  484. color: {color:accent 3};
  485. }
  486.  
  487. .asker {
  488. font-size:16px;
  489. font-weight:900;
  490. text-align:center;
  491. padding-top:10px;
  492. text-transform: uppercase;
  493. font-family: 'Taviraj', serif;
  494. letter-spacing:2px;
  495. }
  496.  
  497. .question {
  498. padding-left:30px; padding-right:30px; padding-bottom:20px;
  499. border-bottom:1px solid {color:borders};
  500. text-align:justify;
  501.  
  502. }
  503.  
  504. .quote {
  505. line-height:25px;
  506. padding-top:20px; padding-left:20px; padding-right:20px;
  507. color: {color:accent 1};
  508. letter-spacing: 2px;
  509. font-size:20px;
  510. font-weight:600;
  511. margin-bottom:15px;
  512. text-align:right;
  513. font-family:'Taviraj', serif;
  514. }
  515.  
  516. .quotesource {
  517. font-size:12px;
  518. letter-spacing:1px;
  519. text-align:center;
  520. padding-left: 20px; padding-right: 20px; padding-bottom: 10px;
  521. text-align:left;
  522. }
  523.  
  524. .playbutton {
  525. position:relative;
  526. margin-top:50px; margin-left:44px;
  527. z-index:9;
  528. width:33px;
  529. height:30px;
  530. overflow:hidden;
  531. }
  532.  
  533. .albumart img {
  534. position:relative;
  535. margin-top:-75px; margin-left:-10px;
  536. height:100px; width:100px;
  537. -webkit-border-top-left-radius: 2px;
  538. -webkit-border-bottom-left-radius: 2px;
  539. -moz-border-radius-topleft: 2px;
  540. -moz-border-radius-bottomleft: 2px;
  541. border-top-left-radius: 2px;
  542. border-bottom-left-radius: 2px;}
  543.  
  544. .trackinfo {
  545. margin-bottom:10px;
  546. background: {color:permalinks};
  547. color: {color:posts};
  548. position:relative;
  549. margin-left:110px; margin-right:10px; margin-top:-112px;
  550. height:100px;
  551. -webkit-border-top-right-radius: 2px;
  552. -webkit-border-bottom-right-radius: 2px;
  553. -moz-border-radius-topright: 2px;
  554. -moz-border-radius-bottomright: 2px;
  555. border-top-right-radius: 2px;
  556. border-bottom-right-radius: 2px;}
  557.  
  558. .trackname {
  559. position:relative;
  560. padding-top:30px;
  561. text-align:center;
  562. font-size:14px;
  563. text-transform:uppercase;
  564. font-weight: 900;
  565. letter-spacing:2px;}
  566.  
  567. .artist {
  568. text-align:center;
  569. font-size:13px;
  570. text-transform:lowercase;
  571. letter-spacing:4px;
  572. font-weight:900;
  573. }
  574.  
  575. .album {
  576. text-align:center;
  577. font-style: italic;
  578. letter-spacing:4px;
  579. }
  580.  
  581.  
  582. .playcount {
  583. font-weight: bold;
  584. margin-top:5px;
  585. text-align:center;
  586. letter-spacing:2px;}
  587.  
  588. .chat {
  589. padding-bottom:2px;
  590. }
  591.  
  592. .chat li{
  593. list-style-type:none;
  594. margin-left:15px; margin-right:15px;
  595. line-height:25px;
  596. }
  597.  
  598.  
  599. .credit {
  600. z-index:9;
  601. bottom:20px;
  602. right:20px;
  603. position:fixed;
  604. padding:10px;
  605. color: {color:accent 1};
  606. font-size:20px;
  607. padding:5px;
  608. }
  609.  
  610. /* TABS */
  611.  
  612.  
  613. .tab {
  614. overflow: hidden;
  615. }
  616.  
  617. .tab button:hover {
  618. color: {color:accent 2};
  619. }
  620.  
  621. .tab button.active {}
  622.  
  623. .tabcontent {
  624. display:none;
  625. height: 470px; width: 445px;
  626. margin-left:-30px; margin-top:-30px;
  627. overflow-y:scroll;
  628. padding:30px;
  629. border-radius: 3px 3px 3px 3px;
  630. -moz-border-radius: 3px 3px 3px 3px;
  631. -webkit-border-radius: 3px 3px 3px 3px;
  632. z-index:9!important;
  633. background-color:{color:container bg};
  634. position:fixed;
  635. }
  636.  
  637. .tablinks {
  638. cursor:pointer;
  639. }
  640.  
  641. /* NAVI */
  642.  
  643.  
  644. .navimgrow {
  645. width:470px;
  646. margin-top:12px;
  647. text-align:center;
  648. margin-left:-10px;
  649. }
  650.  
  651. .navimgrow img {
  652. width: 140px; height: 120px;
  653. padding:6px;
  654. margin-top:13px;
  655. filter: grayscale(100%);
  656. -webkit-transition: all 0.3s ease;
  657. -moz-transition: all 0.3s ease;
  658. -o-transition: all 0.3s ease;
  659. }
  660.  
  661. .navimgrow img:hover {
  662. filter: grayscale(0%);
  663. -webkit-transition: all 0.3s ease;
  664. -moz-transition: all 0.3s ease;
  665. -o-transition: all 0.3s ease;
  666. }
  667.  
  668. .navimgrow-tblock1 {
  669. width: 140px; height:15px;
  670. background-color:{color:borders};
  671. position:absolute;
  672. margin-left:9px; margin-top:4px;
  673. }
  674. .navimgrow-tblock2 {
  675. width: 140px; height:15px;
  676. background-color:{color:accent 1};
  677. position:absolute;
  678. margin-left:165px; margin-top:4px;
  679. }
  680. .navimgrow-tblock3 {
  681. width: 140px; height:15px;
  682. background-color:{color:borders};
  683. position:absolute;
  684. margin-left:321px; margin-top:4px;
  685. }
  686. .navimgrow-bblock1 {
  687. width: 140px; height:15px;
  688. background-color:{color:accent 2};
  689. position:absolute;
  690. margin-left:9px; margin-top:-10px;
  691. }
  692. .navimgrow-bblock2 {
  693. width: 140px; height:15px;
  694. background-color:{color:borders};
  695. position:absolute;
  696. margin-left:165px; margin-top:-10px;
  697. }
  698. .navimgrow-bblock3 {
  699. width: 140px; height:15px;
  700. background-color:{color:accent 3};
  701. position:absolute;
  702. margin-left:321px; margin-top:-10px;
  703. }
  704.  
  705. .navtitle {
  706. font-family: 'Taviraj', serif;
  707. -webkit-text-stroke-width: 1px;
  708. -webkit-text-stroke-color: {color:accent 1};
  709. color: {color:container bg};
  710. font-style:italic;
  711. font-weight:900;
  712. text-transform:uppercase;
  713. font-size:50px;
  714. opacity: 0.7;
  715. line-height:30px;
  716. margin-top:20px; margin-left:8px;
  717. letter-spacing:5px;
  718. }
  719.  
  720. .navtopbar {
  721. width:450px; height:260px;
  722. margin-top:20px;
  723. }
  724.  
  725. .navlinksone {
  726. width:75px; height:260px;
  727. position:absolute;
  728. padding:10px;
  729. display:inline-block;
  730. }
  731.  
  732. .navlinksone a {
  733. display:block;
  734. background:{color:background};
  735. padding:5px;
  736. margin-bottom:18px; margin-top:10px;
  737. text-align:center;
  738. border-radius: 3px 3px 3px 3px;
  739. -moz-border-radius: 3px 3px 3px 3px;
  740. -webkit-border-radius: 3px 3px 3px 3px;
  741. font-size:20px;
  742. border: 1px solid {color:background};
  743. }
  744.  
  745. .navlinksone a:hover {
  746. background:{color:container bg};
  747. border: 1px solid {color:accent 2};
  748. color:{color:accent 2};
  749. }
  750.  
  751. .navquote {
  752. position:absolute;
  753. width:230px; height:240px;
  754. margin-left:95px;
  755. padding:10px;
  756. background-image: url({image:nav desc img});
  757. background-position: center;
  758. background-repeat: no-repeat;
  759. background-attachment: fixed;
  760. background-size:cover;
  761. }
  762.  
  763. .navquote-wrap {
  764. border-radius: 3px 3px 3px 3px;
  765. -moz-border-radius: 3px 3px 3px 3px;
  766. -webkit-border-radius: 3px 3px 3px 3px;
  767. border: 1px solid {color:accent 2};
  768. background-color:rgba(0, 0, 0, 0.6);
  769. backdrop-filter: blur(5px);
  770. overflow:scroll;
  771. padding:30px; padding-top:15px;
  772. height:193px;
  773. font-family:'Yeseva One';
  774. }
  775.  
  776. .navlinkstwo {
  777. width:75px; height:240px;
  778. padding:10px;
  779. display:inline-block;
  780. position:absolute;
  781. margin-left:345px;
  782. }
  783.  
  784. .navlinkstwo a {
  785. display:block;
  786. background:{color:background};
  787. padding:5px;
  788. margin-bottom:18px; margin-top:10px;
  789. text-align:center;
  790. border-radius: 3px 3px 3px 3px;
  791. -moz-border-radius: 3px 3px 3px 3px;
  792. -webkit-border-radius: 3px 3px 3px 3px;
  793. font-size:20px;
  794. border: 1px solid {color:background};
  795. }
  796.  
  797. .navlinkstwo a:hover {
  798. background:{color:container bg};
  799. border: 1px solid {color:accent 2};
  800. color:{color:accent 2};
  801. }
  802.  
  803. .button {
  804. position:absolute;
  805. z-index:999999!important;
  806. }
  807.  
  808. /* MUSES */
  809.  
  810.  
  811. .filters {
  812. height:83px; width:435px;
  813. overflow:auto;
  814. text-align:right;
  815. position:fixed;
  816. margin-top:0px; margin-left:-5px;
  817. display: inline-block;
  818. }
  819.  
  820. .filters ul {
  821. display: inline-block;
  822. margin:0px;
  823. font-family:'Yeseva One';
  824. text-transform:uppercase;
  825. color:{color:accent 3};
  826. font-size:18px;
  827. }
  828.  
  829. .filters li {
  830. display: inline-block;
  831. font-family: 'IBM Plex Serif', serif;
  832. text-transform:lowercase;
  833. font-size:13px;
  834. letter-spacing:1px;
  835. }
  836.  
  837. .filters a {
  838. color: {color:text};
  839. }
  840.  
  841. .filters a:hover {
  842. color:{color:accent 2};
  843.  
  844. }
  845.  
  846. .filters a.selected {
  847. background-color: {color:accent 2};
  848. color:{color:container bg};
  849. font-weight:900;
  850. text-transform:uppercase;
  851. padding-left:3px; padding-right:2px; padding-bottom:2px;
  852. }
  853.  
  854. .grid {
  855. width:450px;
  856. max-height:360px !important;
  857. min-height:360px !important;
  858. overflow:auto;
  859. margin-top:90px;
  860. position:fixed;
  861. }
  862.  
  863. .item {
  864. width:140px; height:195px;
  865. margin-right:5px; margin-left:5px; margin-bottom:15px;
  866. padding-bottom:10px;
  867. border-bottom: 1px solid {color:accent 2};
  868. }
  869.  
  870. .item img {
  871. width:140px; height:100px;
  872. margin-top:37px;
  873. }
  874.  
  875. .charbanner {
  876. width:140px; height:32px;
  877. background-color:{color:accent 1};
  878. position:absolute;
  879. text-align:center;
  880. text-transform:uppercase;
  881. font-family:'Yeseva One';
  882. color:{color:borders};
  883. font-weight:600;
  884. font-size:15px;
  885. padding-top:6px;
  886. line-height:14px;
  887. }
  888.  
  889. .charmore {
  890. height:18px;
  891. text-align:center;
  892. font-weight:600;
  893. font-size:15px;
  894. text-transform:uppercase;
  895. font-family:'Yeseva One';
  896. margin:5px; margin-top:3px;
  897. }
  898.  
  899. .charmore a{
  900. color:{color:accent 2};
  901. }
  902.  
  903. .charmore a:hover {
  904. color:{color:accent 3};
  905. }
  906.  
  907. .charlinks {
  908. overflow:auto;
  909. height:30px;
  910. font-style:italic;
  911. text-align:center;
  912. font-weight:900;
  913. font-size:13px;
  914. line-height:15px;
  915. padding-left:5px; padding-right:5px; margin-top:-3px;
  916. }
  917.  
  918. .charlinks a {
  919. color:{color:text};
  920. }
  921.  
  922. .charlinks a:hover {
  923. color:{color:accent 3};
  924. }
  925.  
  926.  
  927. .popup_block{
  928. display:none;
  929. background:{color:posts};
  930. position:fixed;
  931. top:50%;left:50%;
  932. z-index: 99999!important;
  933. -moz-box-shadow: 0px 0px 5px 1px #000;
  934. -webkit-box-shadow: 0px 0px 5px 1px #000;
  935. box-shadow: 0px 0px 5px 1px #000;
  936. max-height:400px;
  937. overflow:auto;
  938. padding:40px;
  939. height:300px;
  940. }
  941.  
  942. *html #fade {position: absolute;}
  943. *html .popup_block {position: absolute;}
  944. #fade {
  945. display:none;
  946. position:fixed;
  947. left:0px;
  948. top:0px;
  949. width:100%;
  950. height:100%;
  951. z-index:9999;
  952. background:#000; /* FADE COLOUR */
  953. opacity:0.5; /* FADE OPACITY */
  954. }
  955.  
  956. .popup_block h1 {
  957. text-transform:uppercase;
  958. font-family:'Yeseva One';
  959. border-bottom:1px solid {color:tags};
  960. padding:0px; padding-bottom:5px;
  961. margin-top:-5px;
  962. }
  963.  
  964. .icons {
  965. position:absolute;
  966. width:100px;
  967. margin-top:20px;
  968. }
  969.  
  970. .icons img {
  971. width:100px; height:100px;
  972. margin-bottom:30px;
  973. border-radius: 100px 100px 100px 100px;
  974. -moz-border-radius: 100px 100px 100px 100px;
  975. -webkit-border-radius: 100px 100px 100px 100px;
  976. }
  977.  
  978. .charinfo {
  979. margin-left:110px; margin-top:20px;
  980. height:250px;
  981. overflow:auto;
  982. text-align:right;
  983. }
  984.  
  985. .charinfo h3 {
  986. text-transform:uppercase;
  987. font-family:'Yeseva One';
  988. font-size:15px;
  989. line-height:15px;
  990. padding:0px;
  991. margin:0px; margin-bottom: 5px; margin-top:12px;
  992. color:{color:accent 3};
  993. text-align:right;
  994. }
  995.  
  996. .charinfo b {
  997. color:{color:tags};
  998. }
  999.  
  1000.  
  1001.  
  1002.  
  1003.  
  1004. </style>
  1005.  
  1006. <body>
  1007.  
  1008. <!--- SIDEBAR -->
  1009.  
  1010. <div class="background">
  1011. <div class="title">
  1012. {text:containter title}
  1013. </div>
  1014.  
  1015. <div class="sidebar">
  1016. <div class="desc">
  1017. {text:desc}
  1018. </div>
  1019. </div>
  1020. </div>
  1021.  
  1022.  
  1023. <div id="container">
  1024.  
  1025.  
  1026. <div class="links">
  1027. <a href="{text:one link}" title="{text:one}">i.</a>
  1028. <a href="{text:two link}" title="{text:two}">ii.</a>
  1029. <a class="tablinks" onclick="openCity(event, 'nav')" title="{text:three}">iii.</a>
  1030. <a class="tablinks" onclick="openCity(event, 'muses')" title="{text:four}">iv.</a>
  1031. <a href="{text:five link}" title="{text:five}">v.</a>
  1032. </div>
  1033.  
  1034.  
  1035. <div class="pagination">
  1036. {block:Pagination}
  1037. {block:PreviousPage} <a href="{PreviousPage}">back.</a>{/block:PreviousPage}
  1038. {block:NextPage}<a href="{NextPage}">next.</a>{/block:NextPage}
  1039. {/block:Pagination}
  1040. </div>
  1041.  
  1042.  
  1043.  
  1044. <!--- NAV TAB -->
  1045.  
  1046. <div id="nav" class="tabcontent">
  1047.  
  1048. <span style="color:{color:tags};line-height:0px;cursor:pointer;" onclick="this.parentElement.style.display='none'"><span class="lnr lnr-cross"></span></span>
  1049.  
  1050. <div class="navtopbar">
  1051. <div class="navlinksone">
  1052. <a class="tablinks" onclick="openCity(event, 'muses')" title="muses"><span class="lnr lnr-moon"></span></a>
  1053. <a href="/a" title="about"><span class="lnr lnr-eye"></span></a>
  1054. <a href="https://silverhandresources.tumblr.com/" title="my resources"><span class="lnr lnr-sun"></span></a>
  1055. <a href="/tags" title="tags"><span class="lnr lnr-earth"></span></a>
  1056. </div>
  1057.  
  1058. <div class="navquote">
  1059. <div class="navquote-wrap">
  1060. {text:nav quote}
  1061. </div>
  1062. </div>
  1063.  
  1064. <div class="navlinkstwo">
  1065. <a href="/" title="link four"><span class="lnr lnr-map"></span></a>
  1066. <a href="/" title="link five"><span class="lnr lnr-star"></span></a>
  1067. <a href="/" title="link six"><span class="lnr lnr-bubble"></span></a>
  1068. <a href="/" title="link seven"><span class="lnr lnr-cloud"></span></a>
  1069. </div>
  1070. </div>
  1071.  
  1072. <div class="navimgrow">
  1073. <div class="navimgrow-tblock1"></div>
  1074. <div class="navimgrow-tblock2"></div>
  1075. <div class="navimgrow-tblock3"></div>
  1076.  
  1077. <img src="{image:nav img 1}">
  1078. <img src="{image:nav img 2}">
  1079. <img src="{image:nav img 3}">
  1080.  
  1081. <div class="navimgrow-bblock1"></div>
  1082. <div class="navimgrow-bblock2"></div>
  1083. <div class="navimgrow-bblock3"></div>
  1084. </div>
  1085. </div>
  1086.  
  1087.  
  1088. <!--- MUSE TAB -->
  1089.  
  1090. <div id="muses" class="tabcontent">
  1091.  
  1092.  
  1093. <span style="color:{color:tags};line-height:0px;cursor:pointer;" onclick="this.parentElement.style.display='none'"><span class="lnr lnr-cross"></span></span>
  1094.  
  1095.  
  1096. <div class="filters">
  1097.  
  1098. <ul class="filter option-set exclusive" data-filter-group="group1">
  1099. <ul>moral alignment</ul><br>
  1100. <li><a href="#" data-filter-value="" class="selected">all.</a></li>
  1101. <li><a href="#" data-filter-value=".lg">lawful good.</a></li>
  1102. <li><a href="#" data-filter-value=".ng">neutral good.</a></li>
  1103. <li><a href="#" data-filter-value=".cg">chaotic good.</a></li>
  1104. <li><a href="#" data-filter-value=".ln">lawful neutral.</a></li>
  1105. <li><a href="#" data-filter-value=".tn">true neutral.</a></li>
  1106. <li><a href="#" data-filter-value=".cn">chaotic neutral.</a></li>
  1107. <li><a href="#" data-filter-value=".le">lawful evil.</a></li>
  1108. <li><a href="#" data-filter-value=".ne">neutral evil.</a></li>
  1109. <li><a href="#" data-filter-value=".ce">chaotic evil.</a></li>
  1110. </ul>
  1111.  
  1112. <ul class="filter option-set exclusive" data-filter-group="group2">
  1113. <ul>are they a killer?</ul><br>
  1114. <li><a href="#" data-filter-value="" class="selected">all.</a></li>
  1115. <li><a href="#" data-filter-value=".ky">yes.</a></li>
  1116. <li><a href="#" data-filter-value=".kc">it's complicated.</a></li>
  1117. <li><a href="#" data-filter-value=".kp">only if pushed.</a></li>
  1118. <li><a href="#" data-filter-value=".kn">no.</a></li>
  1119. </ul>
  1120.  
  1121. <ul class="filter option-set exclusive" data-filter-group="group3">
  1122. <ul>mental stability</ul><br>
  1123. <li><a href="#" data-filter-value="" class="selected">all.</a></li>
  1124. <li><a href="#" data-filter-value=".msg">good.</a></li>
  1125. <li><a href="#" data-filter-value=".msc">it's complicated.</a></li>
  1126. <li><a href="#" data-filter-value=".mst">terrible.</a></li>
  1127. </ul>
  1128.  
  1129. </div>
  1130.  
  1131.  
  1132. <div class="grid">
  1133.  
  1134. <!--- CHAR 1 --->
  1135.  
  1136. <div class="item ce ky msc">
  1137. <div class="charbanner">
  1138. first <br>last
  1139. </div>
  1140. <img src="https://i.imgur.com/UujaYQI.jpg">
  1141. <div class="charmore">
  1142. <a href="#?w=350" rel="ch1" class="poplight">info</a>
  1143. </div>
  1144. <div class="charlinks">
  1145. <a href="/">links.</a><br>
  1146. <a href="/">add as many as you want.</a>
  1147. </div>
  1148. </div>
  1149.  
  1150. <!--- END --->
  1151.  
  1152.  
  1153.  
  1154.  
  1155.  
  1156.  
  1157.  
  1158.  
  1159.  
  1160. </div>
  1161.  
  1162.  
  1163.  
  1164.  
  1165.  
  1166.  
  1167. </div>
  1168.  
  1169.  
  1170.  
  1171.  
  1172. {block:Posts}
  1173.  
  1174. <div class="posts">
  1175.  
  1176. <div class="permalinks">
  1177. <a href="{Permalink}">{TimeAgo} </a>
  1178. {block:PermalinkPage}<a href="{Permalink}">{block:NoteCount}&nbsp;&nbsp;{NoteCount} notes{/block:NoteCount}</a>{/block:PermalinkPage}
  1179. <div class="reblogs">{block:RebloggedFrom}
  1180. <a href="{ReblogParentURL}">via</a>&nbsp;
  1181. <a href="{ReblogRootURL}">source</a>&nbsp;
  1182. {/block:RebloggedFrom}
  1183. <a href="{ReblogURL}">reblog</a> </div></div>
  1184.  
  1185. {block:Text}{block:Title}<h2>{Title}</h2>{/block:Title}<p>{Body}</p>{/block:Text}
  1186.  
  1187. {block:Photo}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  1188.  
  1189. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  1190.  
  1191. {block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  1192.  
  1193.  
  1194. {block:Quote}<div class="quote">{Quote}</div>{block:Source}<div class="quotesource">{Source}</div>{/block:Source}{/block:Quote}
  1195.  
  1196. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  1197.  
  1198. {block:Chat}{block:Title}<h2>{Title}</h2></a>{/block:Title}
  1199. {block:Lines}<div class="chat"><li>{block:Label}<b>{Label}</b>&nbsp;&nbsp;&nbsp;{/block:Label}{Line}</li></div>{/block:Lines}{/block:Chat}
  1200.  
  1201. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  1202.  
  1203. {block:Audio}
  1204. {block:AudioPlayer}
  1205. <div class="playbutton">{AudioPlayerGrey}</div>
  1206. {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  1207. <div class="trackinfo">
  1208. <div class="trackname">
  1209. {block:TrackName}{TrackName}{/block:TrackName}
  1210. </div>
  1211. <div class="artist">
  1212. {block:Artist}{Artist}{/block:Artist}
  1213. </div>
  1214. <div class="album">
  1215. {block:Album}{Album}{/block:Album}
  1216. </div>
  1217. <div class="playcount">
  1218. {block:PlayCount}played: {PlayCount} times{/block:PlayCount}
  1219. </div>
  1220. </div>
  1221. {block:Caption}{Caption}{/block:Caption}
  1222. {/block:AudioPlayer}
  1223. {/block:Audio}
  1224.  
  1225. {block:Answer}
  1226. <div class="asker">{Asker} whispered</div>
  1227. <div class="question">{Question}</div>
  1228. {Answer}
  1229. {/block:Answer}
  1230. </div>
  1231.  
  1232. <div class="tags">{block:HasTags}{block:Tags}# <a href="{TagUrl}">{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  1233. {/block:Posts}
  1234.  
  1235. </div>
  1236.  
  1237. {block:ContentSource}
  1238. {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1239. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1240. {/block:SourceLogo}
  1241. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}
  1242. {/block:ContentSource}
  1243.  
  1244.  
  1245.  
  1246. <div class="credit"><a href="https://silverhandresources.tumblr.com/" title="theme by siilverhand"><span class="lnr lnr-code"></span></a></div>
  1247.  
  1248. </body>
  1249.  
  1250.  
  1251.  
  1252. <!--- CHAR ONE INFO START --->
  1253.  
  1254. <div id="ch1" class="popup_block">
  1255.  
  1256. <h1>first last</h1>
  1257.  
  1258. <div class="icons">
  1259. <img src="">
  1260. <img src="">
  1261. </div>
  1262.  
  1263. <div class="charinfo">
  1264.  
  1265. <i>a quote here or something !</i>
  1266.  
  1267. <h3>traits</h3>
  1268. <i>+</i> positive traits.
  1269. <i>-</i> negative traits.
  1270.  
  1271. <h3>basics</h3>
  1272. <b>name:</b> name.
  1273. <b>faceclaim(s):</b> faceclaim.
  1274. <b>gender:</b> gender.
  1275. <b>pronouns:</b> pronouns.
  1276. <b>sexuality:</b> sexuality.
  1277. <b>nationality:</b> nationality.
  1278. <b>disorders:</b> disorders.
  1279. <b>temperament:</b> temperament.
  1280. <b>zodiac:</b> zodiac.
  1281.  
  1282.  
  1283.  
  1284. </div>
  1285.  
  1286. </div>
  1287. </div></div></div></div></div></div></div></div></div></div>
  1288.  
  1289. <!--- END --->
  1290.  
  1291.  
  1292.  
  1293.  
  1294.  
  1295.  
  1296.  
  1297.  
  1298. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!