API tools faq
paste
littlemisswhoever

Theme: Epokhas (Jan 22nd 2025)

littlemisswhoever
Jan 21st, 2025 (edited)
58
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.49 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- (BASE) THEME BY SAE (INIZIARE) // EDITED FOR EPOKHAS -->
  4.  
  5.  
  6. <!-- HI/HELLO, INSTRUCTIONS AS PROMISED!
  7.  
  8. If you're looking to add more/additional muses to your 'Muse List', then simply do a search for 'Muses' and follow the little instruction there!
  9.  
  10. -->
  11.  
  12.  
  13. <head>
  14. <title>{Title}</title>
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17. {block:Description}
  18. <meta name="description" content="{MetaDescription}" />
  19. {/block:Description}
  20. </head>
  21.  
  22.  
  23.  
  24. <!-- SCRIPT: JQUERY -->
  25.  
  26. <script src="https://static.tumblr.com/gjexvml/cszpz4vyd/jquery-3.4.1.min.js"></script>
  27.  
  28. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  29.  
  30.  
  31.  
  32. <!-- SCRIPT: AUDIO -->
  33. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  34. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  35. <script>
  36. tumblr_npf_audio({
  37. emptyTitleText: "Untitled track",
  38. emptyArtistText: "Untitled artist",
  39. emptyAlbumText: "Untitled album",
  40.  
  41. titleLabel: "Track:",
  42. artistLabel: "Artist:",
  43. albumLabel: "Album:"
  44. });
  45. </script>
  46.  
  47.  
  48.  
  49. <!-- SCRIPT: AUDIO (OLD) -->
  50.  
  51. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  52.  
  53.  
  54. <script>
  55. $(document).ready(function() {
  56. $('iframe.tumblr_audio_player').load( function() {
  57. $('iframe.tumblr_audio_player').contents().find("head")
  58. .append($("<style type='text/css'> .audio-player{background:{color:background}!important} </style>"));
  59. });
  60. });
  61. </script>
  62.  
  63.  
  64.  
  65. <!-- SCRIPT: SCROLLING -->
  66. <script>
  67. jQuery(document).ready(function($) {
  68. const $scrollableContainer = $('.scrollable-container');
  69. const rowHeight = 33; // Height of each row in pixels
  70. let isScrolling = false; // Prevent simultaneous scrolling
  71.  
  72. // Handle the wheel event
  73. $scrollableContainer.on('wheel', function(event) {
  74. event.preventDefault(); // Prevent the default scroll behavior
  75.  
  76. // If we are currently scrolling, prevent further scrolling until the current scroll finishes
  77. if (isScrolling) return;
  78.  
  79. isScrolling = true; // Set scrolling in progress
  80.  
  81. // Determine the scroll direction
  82. const scrollAmount = event.originalEvent.deltaY;
  83.  
  84. // Scroll down (next row) or scroll up (previous row)
  85. if (scrollAmount > 0) {
  86. scrollDown();
  87. } else {
  88. scrollUp();
  89. }
  90.  
  91. // Function to scroll down one row
  92. function scrollDown() {
  93. let currentScroll = $scrollableContainer.scrollTop();
  94. let nextScroll = Math.ceil(currentScroll / rowHeight) * rowHeight; // Round to next row
  95. smoothScroll(nextScroll);
  96. }
  97.  
  98. // Function to scroll up one row
  99. function scrollUp() {
  100. let currentScroll = $scrollableContainer.scrollTop();
  101. let prevScroll = Math.floor(currentScroll / rowHeight) * rowHeight; // Round to previous row
  102. smoothScroll(prevScroll);
  103. }
  104.  
  105. // Smooth scrolling function
  106. function smoothScroll(targetScroll) {
  107. $scrollableContainer.stop().animate({
  108. scrollTop: targetScroll
  109. }, 200, 'swing', function() {
  110. isScrolling = false; // Once scroll completes, allow another scroll
  111. });
  112. }
  113. });
  114. });
  115.  
  116. </script>
  117.  
  118.  
  119. <!-- SCRIPT: NPF Images Fix (by @glenthemes) git.io/JRBt7 --->
  120. <script src="//npf-images-v3.github.io/script.js"></script>
  121. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  122. <style tmblr-npf>
  123. :root {
  124. --NPF-Caption-Spacing:1em;
  125. --NPF-Image-Spacing:4px;
  126. }
  127. </style>
  128.  
  129.  
  130.  
  131.  
  132.  
  133. <!-- SCRIPT: DRAGGABLE SIDEBAR -->
  134. <script>
  135. document.addEventListener('DOMContentLoaded', function() {
  136. var sidebar = document.getElementById('sidebar');
  137. var sidebarHeader = document.getElementById('sidebarheader'); // Get the sidebar header element
  138.  
  139. sidebarHeader.onmousedown = function(event) {
  140. let shiftX = event.clientX - sidebar.getBoundingClientRect().left;
  141. let shiftY = event.clientY - sidebar.getBoundingClientRect().top;
  142.  
  143. function moveAt(pageX, pageY) {
  144. sidebar.style.left = pageX - shiftX + 'px';
  145. sidebar.style.top = pageY - shiftY + 'px';
  146. }
  147.  
  148. function onMouseMove(event) {
  149. moveAt(event.pageX, event.pageY);
  150. }
  151.  
  152. document.addEventListener('mousemove', onMouseMove);
  153.  
  154. sidebarHeader.onmouseup = function() {
  155. document.removeEventListener('mousemove', onMouseMove);
  156. sidebarHeader.onmouseup = null;
  157.  
  158. // Save the position to localStorage
  159. localStorage.setItem('sidebarPosition', JSON.stringify({
  160. left: sidebar.style.left,
  161. top: sidebar.style.top
  162. }));
  163. };
  164. };
  165.  
  166. sidebarHeader.ondragstart = function() {
  167. return false;
  168. };
  169.  
  170. // Load the saved position from localStorage
  171. var savedsidebarPosition = localStorage.getItem('sidebarPosition');
  172. if (savedsidebarPosition) {
  173. var position = JSON.parse(savedsidebarPosition);
  174. sidebar.style.left = position.left;
  175. sidebar.style.top = position.top;
  176. }
  177. });
  178. </script>
  179.  
  180.  
  181.  
  182.  
  183.  
  184.  
  185.  
  186.  
  187. <!-- SCRIPT: DROPDOWN MENU -->
  188. <script>
  189. jQuery(document).ready(function($) {
  190. // Toggle the menu and position it below the link
  191. $('#aesthetic').on('click', function(event) {
  192. event.preventDefault(); // Prevent default link behavior
  193.  
  194. const $link = $(this); // Reference to the "Want to change the aesthetic?" link
  195. const $menu = $('#theme-menu'); // Reference to the menu
  196.  
  197. if ($menu.is(':visible')) {
  198. // If the menu is already visible, hide it
  199. $menu.hide();
  200. } else {
  201. // Get the link's position and size
  202. const offset = $link.offset();
  203. const height = $link.outerHeight();
  204.  
  205. // Position the menu just below the link
  206. $menu.css({
  207. top: offset.top + height + 5 + 'px', // Below the link with a small gap
  208. left: offset.left + 'px', // Align with the left of the link
  209. display: 'block' // Show the menu
  210. });
  211. }
  212. });
  213. });
  214. </script>
  215.  
  216.  
  217.  
  218.  
  219.  
  220.  
  221.  
  222.  
  223.  
  224. <!-- TUMBLR: META TAGS -->
  225.  
  226. <meta name="image:Background" content="https://static.tumblr.com/ta61zxu/UY6sqgnuw/bg2.png"/>
  227.  
  228. <meta name="text:Rules URL" content="/rules"/>
  229. <meta name="text:Header" content="EPOKHAS"/>
  230. <meta name="text:Subheader" content="* ＦＯＸＨＯＵＮＤ"/>
  231.  
  232. <meta name="color:Background" content="#000000"/>
  233. <meta name="color:Border" content="#121212"/>
  234. <meta name="color:Blockquote" content="#121212"/>
  235. <meta name="color:Text" content="#c6c6c6"/>
  236. <meta name="color:Bold" content="#723f24"/>
  237. <meta name="color:Italic" content="#9f5557"/>
  238. <meta name="color:Links" content="#cccccc"/>
  239. <meta name="color:Links Hover" content="#ffffff"/>
  240. <meta name="color:Tags" content ="#555555"/>
  241. <meta name="color:Tags Hover" content ="#ffffff;"/>
  242. <meta name="color:Permalinkbar" content="#0b0b0b"/>
  243. <meta name="color:Permalinktext" content="#ffffff"/>
  244.  
  245.  
  246. <!-- ICONS / FONTS -->
  247. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  248.  
  249. <link rel="preconnect" href="https://fonts.googleapis.com">
  250. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  251. <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
  252.  
  253.  
  254.  
  255.  
  256. <style type="text/css">
  257.  
  258.  
  259.  
  260.  
  261. /* SCROLLBARS */
  262.  
  263.  
  264. ::-webkit-scrollbar {
  265. display: none;
  266. }
  267.  
  268.  
  269. /* TUMBLR CONTROLS */
  270.  
  271.  
  272. .iframe-controls--desktop, .tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop {
  273. position:fixed;
  274. margin-top:6px!important;
  275. right:0px;
  276. opacity: 0.8;
  277. z-index:999999999!important;
  278. transform:scale(0.84,0.6);
  279. transform-origin:100% 0%;
  280. }
  281.  
  282.  
  283.  
  284.  
  285. /* MATERIAL ICONS */
  286.  
  287.  
  288. .material-icons {
  289. font-family: 'Material Icons';
  290. font-weight: normal;
  291. font-style: normal;
  292. font-size: 24px; /* Preferred icon size */
  293. display: inline-block;
  294. line-height: 1;
  295. text-transform: none;
  296. letter-spacing: normal;
  297. word-wrap: normal;
  298. white-space: nowrap;
  299. direction: ltr;
  300.  
  301. /* Support for all WebKit browsers. */
  302. -webkit-font-smoothing: antialiased;
  303. /* Support for Safari and Chrome. */
  304. text-rendering: optimizeLegibility;
  305. /* Support for Firefox. */
  306. -moz-osx-font-smoothing: grayscale;
  307. /* Support for IE. */
  308. font-feature-settings: 'liga';
  309. }
  310.  
  311.  
  312. #icons {
  313. display: flex;
  314. flex-direction: column;
  315. align-items: center;
  316. transform: scale(0.7)!important;
  317. padding-top:10px!important;
  318. }
  319.  
  320. #icons i {
  321. margin-top: 5px;
  322. }
  323.  
  324. .material-icons.md-18 { font-size: 18px; }
  325. .material-icons.md-24 { font-size: 24px; }
  326. .material-icons.md-36 { font-size: 36px; }
  327. .material-icons.md-48 { font-size: 48px; }
  328.  
  329. .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
  330. .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
  331.  
  332. .material-icons.md-light { color: rgba(255, 255, 255, 1); }
  333. .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
  334.  
  335.  
  336.  
  337.  
  338. /* BASICS / TEXT */
  339.  
  340.  
  341. #container {
  342. z-index:9999;
  343. left: 50%;
  344. margin-left:-475px;
  345. margin-top:0px;
  346. position:fixed;
  347. width:896px;
  348. height:100%;
  349. }
  350.  
  351.  
  352. body {
  353. background-image:url('{image:Background}');
  354. background-attachment: fixed;
  355. background-repeat: no-repeat;
  356. background-size: cover;
  357. background-position:top left;
  358. background-position-x: -90px;
  359. background-color:{color:background};
  360. font-family: Arial;
  361. font-size:11px!important;
  362. line-height:18px;
  363. color:{color:text};
  364. overflow: hidden;
  365. }
  366.  
  367.  
  368. body a {
  369. text-transform:none!important;
  370. color:{color:text};
  371. font-size:11px!important;
  372. -moz-transition-duration:1.5s;
  373. -webkit-transition-duration:1.5s;
  374. -o-transition-duration:1.5s;
  375. }
  376.  
  377.  
  378. body a:hover {
  379. color:{color:links hover}!important;
  380. -moz-transition-duration:1.5s;
  381. -webkit-transition-duration:1.5s;
  382. -o-transition-duration:1.5s;
  383. }
  384.  
  385.  
  386. b, bold, strong {
  387. color:#723f24;
  388. margin-right:1px;
  389. margin-left:1px;
  390. }
  391.  
  392. em, i, italic {
  393. color: #9f5557;
  394. }
  395.  
  396.  
  397. small {
  398. font-size:11px;
  399. }
  400.  
  401.  
  402. sub, sup {
  403. font-size:10px;
  404. vertical-align: baseline!important;
  405. position: relative!important;
  406. top: 0em!important;
  407. line-height:13px;
  408. }
  409.  
  410. s, strike {
  411. text-decoration: none !important;
  412. font-weight:bold;
  413. color:#ffffff;
  414. }
  415.  
  416.  
  417. big {
  418. font-size:125%;
  419. }
  420.  
  421.  
  422. ul, ol {
  423. padding:0px;
  424. margin-left:13px;
  425. }
  426.  
  427.  
  428. li {
  429. padding-left: 0px;
  430. }
  431.  
  432.  
  433. blockquote {
  434. border-left:2px solid {color:blockquote};
  435. padding-left:25px!important;
  436. margin-top:15px!important;
  437. margin-bottom:15px!important;
  438. margin-left:0px;
  439. margin-right:0px;
  440. }
  441.  
  442.  
  443. hr {
  444. height:12px;
  445. border:1px solid {color:border};
  446. background-color:{color:background};
  447. }
  448.  
  449.  
  450. h2 {
  451. font-family:arial;
  452. font-size:12px;
  453. border:1px solid {color:border};
  454. padding-left:25px;
  455. padding-right:25px;
  456. height:35px;
  457. line-height:35px;
  458. }
  459.  
  460.  
  461. h3 {
  462. padding-left:0px;
  463. padding-right:0px;
  464. margin-top:1px;
  465. outline:1px solid {color:border};
  466. height:25px;
  467. line-height:23px;
  468. color:{color:bold};
  469. }
  470.  
  471.  
  472.  
  473.  
  474. /* SELECTION BACKGROUND / TEXT */
  475.  
  476. ::selection {
  477. background-color: {color:permalink};
  478. color: #fff;
  479. }
  480.  
  481. ::-moz-selection {
  482. background-color: {color:permalink}; /* Gold background for Firefox */
  483. color: {color:#fff}; /* Black text for Firefox */
  484. }
  485.  
  486.  
  487.  
  488.  
  489. /* CONTENTl TOP */
  490.  
  491.  
  492. .top-bar {
  493. width: 100%;
  494. background-color: {color:permalinkbar};
  495. border-bottom: 1px solid {color:border};
  496. color: white;
  497. height:25px;
  498. padding-top:20px;
  499. position: fixed;
  500. top: 0;
  501. left: 0;
  502. z-index: 50;
  503. }
  504.  
  505.  
  506. .top-bar-content {
  507. width: 100%;
  508. text-align: center;
  509. }
  510.  
  511. .top-bar-content a {
  512. text-decoration:none!important;
  513. font-weight:bold;
  514. color:#ffffff;
  515. text-transform:none!important;
  516. font-size:11px!important;
  517. padding-right:45px!important;
  518. margin-top:-10px!important;
  519. letter-spacing:0px!important;
  520. }
  521.  
  522.  
  523.  
  524.  
  525. #theme-menu {
  526. display: none;
  527. position: absolute;
  528. border: 1px solid {color:border};
  529. z-index: 1000;
  530. margin-top: 16px !important;
  531. padding: 0; /* Remove padding */
  532. }
  533.  
  534. #theme-menu a {
  535. background-color: {color:background};
  536. color: {color:text};
  537. font-size: 11px;
  538. font-family: arial;
  539. font-weight: bold;
  540. padding-left:20px;
  541. height: 40px;
  542. margin: 0; /* Remove any default margin */
  543. border: 1px solid {color:border};
  544. text-align: center;
  545. text-decoration: none;
  546. display: flex; /* Use flexbox for centering content */
  547. align-items: center; /* Vertically center content */
  548. justify-content: center; /* Horizontally center content */
  549. width: 100%; /* Full width of the container */
  550. }
  551.  
  552. #theme-menu a:hover {
  553. color: #ffffff;
  554. }
  555.  
  556.  
  557.  
  558.  
  559. /* CONTENT: SIDEBAR */
  560.  
  561. #sidebar {
  562. position: absolute;
  563. z-index: 1000;
  564. width: 380px;
  565. top: 600px;
  566. left: 225px;
  567. color: {color:text};
  568. background-color: rgba(0, 0, 0, 0.9);
  569. border: 1px solid {color:border};
  570. }
  571.  
  572.  
  573. #sidebarheader {
  574. position: relative;
  575. letter-spacing: 2px;
  576. white-space: nowrap;
  577. padding-top:0px;
  578. padding-bottom:0px;
  579. margin-top:1px;
  580. margin-left:0px;
  581. font-size: 13px;
  582. font-weight:bold;
  583. height:25px;
  584. line-height:25px;
  585. color: {color:bold};
  586. border-bottom: 1px solid {color:border};
  587. cursor: move;
  588. user-select: none; /* Prevent text selection during drag */
  589. }
  590.  
  591.  
  592. #sidebarsubheader {
  593. position: relative;
  594. letter-spacing: 0px;
  595. white-space: nowrap;
  596. margin-top:8px;
  597. margin-left:0px;
  598. font-weight: bold!important;
  599. font-size: 9px;
  600. height:20px;
  601. width:100%;
  602. text-transform: uppercase;
  603. color:{color:text};
  604. border-bottom: 1px solid {color:border};
  605. }
  606.  
  607.  
  608. #sidebartext {
  609. position: relative;
  610. margin-top:15px;
  611. margin-bottom:15px;
  612. padding-left:20px;
  613. padding-right:20px;
  614. text-align:justify;
  615. max-height:105px;
  616. overflow:scroll;
  617. }
  618.  
  619.  
  620. .pagination, .pagination-button {
  621. all: unset;
  622. }
  623.  
  624.  
  625. .pagination {
  626. display: flex;
  627. width: 100%;
  628. border-top: 1px solid {color:border};
  629. border-bottom: 0px solid {color:border};
  630. box-sizing: border-box;
  631. height: 25px;
  632. line-height:25px!important;
  633. margin-top: 0px;
  634. padding: 0;
  635. align-items: center;
  636. justify-content: space-between;
  637. }
  638.  
  639.  
  640. .pagination-button {
  641. flex: 1;
  642. display: flex;
  643. justify-content: center;
  644. align-items: center;
  645. margin-left:40px;
  646. text-decoration: none;
  647. font-weight: bold;
  648. padding-top:8px!important;
  649. color: #ccc;
  650. transition: background-color 0.3s, color 0.3s;
  651. box-sizing: border-box;
  652. height: 100%;
  653. border-right: 1px solid {color:border};
  654. }
  655.  
  656. .pagination-button:last-child {
  657. border-right: none;
  658. }
  659.  
  660. .pagination-button:hover {
  661. background-color: {color:hover};
  662. color: {color:hover-text};
  663. cursor: pointer;
  664. }
  665.  
  666.  
  667.  
  668.  
  669. /* CONTENT: POSTS */
  670.  
  671.  
  672. #content {
  673. position: absolute;
  674. height: 100vh;
  675. overflow: scroll;
  676. scrollbar-width: none;
  677. top: 0px;
  678. left: 325px !important;
  679. background-color: rgba(0, 0, 0, 0.7);
  680. padding-left: 25px;
  681. padding-right: 25px;
  682. }
  683.  
  684.  
  685. .posts {
  686. width:500px;
  687. margin-top:45px;
  688. margin-right:5px;
  689. margin-left:1px;
  690. margin-bottom:50px;
  691. word-wrap: break-word!important;
  692. padding-left:30px;
  693. padding-right:30px;
  694. padding-top:30px!important;
  695. text-align:justify;
  696. scrollbar-width: none;
  697. border:1px solid {color:border};
  698. background-color: rgba(0, 0, 0, 0.5);
  699. }
  700.  
  701.  
  702. .posts a {
  703. font-size:8.5px;
  704. text-transform:uppercase;
  705. font-weight:bold!important;
  706. text-decoration:none!important;
  707. margin-right:0px;
  708. margin-top:0px!important;
  709. color:{color:links};
  710. -moz-transition-duration:1.5s;
  711. -webkit-transition-duration:1.5s;
  712. -o-transition-duration:1.5s;
  713. }
  714.  
  715.  
  716. .posts a:hover {
  717. color:{color:links hover};
  718. -moz-transition-duration:1.5s;
  719. -webkit-transition-duration:1.5s;
  720. -o-transition-duration:1.5s;
  721. }
  722.  
  723.  
  724.  
  725.  
  726. /* POSTS: TEXT */
  727.  
  728. #textbody {
  729. margin-top:-8px!important;
  730. {block:permalinkpage}
  731. margin-top:-12px!important;
  732. {/block:permalinkpage}
  733. }
  734.  
  735.  
  736. #textbody::after {
  737. content: "";
  738. clear: both;
  739. display: table;
  740. margin-top:-8px!important;
  741. }
  742.  
  743.  
  744.  
  745. /* POSTS: PHOTO/PHOTOSETS */
  746.  
  747.  
  748. .psingle img {
  749. margin-top:10px!important;
  750. padding-top:0px!important;
  751. width: 100%!important; /* Limit the max width of the image */
  752. height: auto; /* Maintain aspect ratio */
  753. display: block; /* Centers the image in the container */
  754. -webkit-filter: brightness(.9) contrast(1.15) saturate(.9);
  755. }
  756.  
  757.  
  758. .psingle {
  759. margin-top:5px!important;
  760. padding-top:0px!important;
  761. width: 100%!important; /* Limit the max width of the image */
  762. height: auto; /* Maintain aspect ratio */
  763. display: block; /* Centers the image in the container */
  764. -webkit-filter: brightness(.9) contrast(1.15) saturate(.9);
  765. }
  766.  
  767.  
  768. #pset {
  769. margin-top:0px!important;
  770. {block:permalinkpage}
  771. margin-top:0px;
  772. {block:permalinkpage}
  773. width: 488px;
  774. pointer-events:none;
  775. -webkit-filter: brightness(.7) contrast(1.1) saturate(0.6);
  776. -webkit-transition: all 1.5s ease-in-out;
  777. -moz-transition: all 1.5s ease-in-out;
  778. -o-transition: all 1.5s ease-in-out;
  779. -ms-transition: all 1.5s ease-in-out;
  780. transition: all 1.5s ease-in-out;
  781. }
  782.  
  783.  
  784. #pset:hover {
  785. -webkit-filter: brightness(.7) contrast(1.1) saturate(0.6);
  786. -webkit-transition: all 1.5s ease-in-out;
  787. -moz-transition: all 1.5s ease-in-out;
  788. -o-transition: all 1.5s ease-in-out;
  789. -ms-transition: all 1.5s ease-in-out;
  790. transition: all 1.5s ease-in-out;
  791. }
  792.  
  793.  
  794.  
  795.  
  796. /* POSTS: PERMALINK / TAGS */
  797.  
  798.  
  799. .permalink {
  800. margin-top:25px;
  801. margin-left:-30px;
  802. margin-right:-30px;
  803. padding-left:30px;
  804. padding-right:30px;
  805. height:35px;
  806. line-height:35px!important;
  807. outline:1px solid {color:border};
  808. background-color:{color:permalinkbar};
  809. font-family:arial!important;
  810. font-size:11px!important;
  811. color:{color:permalinktext};
  812. }
  813.  
  814.  
  815. .permalink a {
  816. font-weight:bold!important;
  817. font-size:11px!important;
  818. text-transform:uppercase!important;
  819. letter-spacing:0px;
  820. margin-right:20px;
  821. color:{color:permalinktext};
  822. }
  823.  
  824.  
  825. .tags {
  826. font-family:arial!important;
  827. border-top:1px solid {color:border};
  828. padding-top:15px;
  829. padding-bottom:15px;
  830. padding-left:30px;
  831. padding-right:30px;
  832. margin-left:-31px;
  833. margin-right:-31px;
  834. margin-bottom:0px;
  835. font-size:11px;
  836. text-align:justify;
  837. text-align-last: left;
  838. -moz-transition-duration:2s;
  839. -webkit-transition-duration:2s;
  840. -o-transition-duration:2s;
  841. }
  842.  
  843.  
  844. .tags a {
  845. font-family: arial;
  846. text-decoration:none!important;
  847. font-weight:lighter!important;
  848. font-size:11px!important;
  849. margin-right:1px;
  850. color:{color:tags};
  851. -moz-transition-duration:1.5s;
  852. -webkit-transition-duration:1.5s;
  853. -o-transition-duration:1.5s;
  854. }
  855.  
  856.  
  857. .tags a:hover {
  858. color:{color:tags hover};
  859. }
  860.  
  861.  
  862.  
  863. /* POSTS: AUDIO */
  864.  
  865. .npf-audio-wrapper {
  866. border:1px solid {color:border};
  867. --NPF-Audio-Buttons-Size: 1.4rem;
  868. --NPF-Audio-Buttons-Color: #555555;
  869. --NPF-Audio-Buttons-Spacing: 1.3rem;
  870. --NPF-Audio-Image-Size: 85px;
  871. --NPF-Audio-Image-Spacing: 0px;
  872. }
  873.  
  874. .npf-audio-background {
  875. background-color: {color:background};
  876. padding: 1.5rem;
  877. }
  878.  
  879. .npf-audio-title-label,
  880. .npf-audio-artist-label,
  881. .npf-audio-album-label {
  882. font-weight: bold;
  883. color:{color:bold};
  884. margin-right:5px;
  885. }
  886.  
  887. .npf-audio-title,
  888. .npf-audio-artist,
  889. .npf-audio-album {
  890. color: {color:text};
  891. }
  892.  
  893.  
  894.  
  895. .audiowrap {
  896. position:relative;
  897. height:27px;
  898. overflow:hidden;
  899. background-color:{color:background};
  900. border:1px solid {color:border};
  901. padding:2em;
  902. margin-bottom:2.5em;
  903. }
  904.  
  905.  
  906. .audio {
  907. position:absolute;
  908. display:inline-block;
  909. left:2em;
  910. top:2em;
  911. right:2em;
  912. bottom:2em;
  913. text-align:left;
  914. line-height:27px;
  915. }
  916.  
  917.  
  918. .audio .player {
  919. width:27px;
  920. height:27px;
  921. left:0;
  922. top:0;
  923. opacity:.5;
  924. line-height:0;
  925. overflow:hidden;
  926. position:absolute;
  927. }
  928.  
  929.  
  930. .audio .track {
  931. overflow:hidden;
  932. line-height:15px;
  933. margin-left:41px;
  934. width:calc(100% - 41px);
  935. display:inline-block;
  936. vertical-align:middle;
  937. }
  938.  
  939.  
  940. .audio .track .h {
  941. display:block;
  942. max-height:15px;
  943. white-space:nowrap;
  944. overflow:hidden;
  945. text-overflow:ellipsis;
  946. margin-right:15px;
  947. }
  948.  
  949.  
  950.  
  951.  
  952. /* POSTS: NOTES */
  953.  
  954.  
  955. #notes {
  956. margin-top:30px;
  957. margin-bottom:30px!important;
  958. margin-left:-20px!important;
  959. padding-bottom:6px;
  960. padding-left:8px;
  961. padding-right:8px;
  962. text-align:left;
  963. }
  964.  
  965.  
  966. .note li {
  967. margin-bottom:0px!important;
  968. list-style-type:none;
  969. padding-top:0px;
  970. line-height:14px;
  971. padding-bottom:0px!important;
  972. padding-left:0px;
  973. padding-right:0px;
  974. text-align:left!important;
  975. -moz-transition-duration:0.5s;
  976. -webkit-transition-duration:0.5s;
  977. -o-transition-duration:0.5s;
  978. font-size:11px!important;
  979. color: {color:text};
  980. }
  981.  
  982.  
  983. .note li a {
  984. text-align:left!important;
  985. font-size:11px!important;
  986. padding-right:0px;
  987. font-weight:bold;
  988. letter-spacing:0px;
  989. color: {color:text};
  990. }
  991.  
  992.  
  993. .more_notes_link, .more_notes_link a {
  994. text-align:left!important;
  995. color:{color:bold}!important;
  996. }
  997.  
  998.  
  999. .note blockquote a {
  1000. padding-top:12px;
  1001. padding-bottom:12px;
  1002. padding-left:24px;
  1003. padding-right:24px;
  1004. margin-top:12px;
  1005. margin-bottom:12px;
  1006. margin-left:0px;
  1007. margin-right:0px;
  1008. color:{color:bold}!important;
  1009. }
  1010.  
  1011.  
  1012. .notes blockquote {
  1013. margin-left: 0!important;
  1014. padding-left: 0;
  1015. text-indent: 0!important;
  1016. }
  1017.  
  1018.  
  1019. .notes blockquote:before,
  1020. .notes blockquote:after {
  1021. content: none;
  1022. margin: 0;
  1023. padding: 0;
  1024. text-indent: 0!important;
  1025. }
  1026.  
  1027.  
  1028. .note img.avatar {
  1029. display:none;
  1030. width: 0px;
  1031. height: 0px;
  1032. }
  1033.  
  1034.  
  1035. .note-icon {
  1036. font-size: 14px;
  1037. margin-right: 6px;
  1038. color: #757575;
  1039. }
  1040.  
  1041.  
  1042.  
  1043.  
  1044.  
  1045. /* POSTS: ASK */
  1046.  
  1047.  
  1048. #ask {
  1049. float:left;
  1050. color:{color:text};!important;
  1051. background-color:{color:background};
  1052. width:454px;
  1053. scrollbar-width: none;
  1054. margin-top:0px;
  1055. margin-left:1px;
  1056. margin-bottom:25px;
  1057. overflow-y:scroll;
  1058. padding-left:24px;
  1059. padding-right:24px;
  1060. outline:solid 1px {color:border};
  1061. border-bottom:12px solid {color:background};
  1062. border-top:12px solid {color:background};
  1063. -moz-transition-duration:1.5s;
  1064. -webkit-transition-duration:1.5s;
  1065. -o-transition-duration:1.5s;
  1066. }
  1067.  
  1068.  
  1069. #ask b, #ask strong {
  1070. color:{color:text}!important;
  1071. }
  1072.  
  1073.  
  1074. #askheader {
  1075. box-sizing: border-box;
  1076. outline:1px solid {color:border};
  1077. width:460px;
  1078. height:39px;
  1079. text-align:left;
  1080. line-height:39px;
  1081. margin-bottom:1px;
  1082. margin-left:43px;
  1083. margin-top:6px!important
  1084. text-align:center;
  1085. padding-left:25px;
  1086. padding-right:25px;
  1087. font-size:11px;
  1088. text-transform:normal;
  1089. font-family: arial;
  1090. font-weight:lighter!important;
  1091. color:{color:bold};
  1092. background-color:{color:background};
  1093. }
  1094.  
  1095.  
  1096. #askheader a {
  1097. text-transform:capitalize!important;
  1098. padding-left:1px;
  1099. }
  1100.  
  1101.  
  1102. .letterask {
  1103. font-family:'Frank Ruhl Libre', serif;
  1104. color:#151515;!important;
  1105. text-decoration:none!important;
  1106. font-style:normal!important;
  1107. font-weight:bold!important;
  1108. text-transform:uppercase!important;
  1109. margin-top:6px!important
  1110. z-index:9999!important;
  1111. position:absolute;
  1112. text-align:center;
  1113. font-size:23px;
  1114. width:39px;
  1115. height:39px;
  1116. line-height:39px;
  1117. margin-left:1px;
  1118. outline:1px solid {color:border};
  1119. background-color:{color:background};
  1120. padding-right:2px;
  1121. color:{color:border};!important;
  1122. }
  1123.  
  1124.  
  1125. .asker {
  1126. font-family:arial;
  1127. font-size:11px;
  1128. width:460px;
  1129. font-size:11px;
  1130. padding-right:0px;
  1131. font-weight:bold;
  1132. text-align:left!important;
  1133. background-color:transparent;
  1134. color:#000000;
  1135. z-index:99999999999999999!important;
  1136. -moz-transition-duration:0.6s;
  1137. -webkit-transition-duration:0.6s;
  1138. -o-transition-duration:0.6s;
  1139. }
  1140.  
  1141.  
  1142. .asker a {
  1143. text-align:left!important;
  1144. font-family:arial;
  1145. font-size:11px;
  1146. width:460px;
  1147. font-weight:bold;
  1148. margin-bottom:0px!important;
  1149. top:-45px!important;
  1150. background-color:transparent;
  1151. z-index:99999999999999999999999!important;
  1152. }
  1153.  
  1154.  
  1155. .asker a:hover {
  1156. text-shadow:
  1157. -1px -1px 0 {color:border},
  1158. 1px -1px 0 {color:border},
  1159. -1px 1px 0 {color:border},
  1160. 1px 1px 0 {color:border};
  1161. }
  1162.  
  1163.  
  1164. #response {
  1165. margin-top:25px!important;
  1166. }
  1167.  
  1168.  
  1169. #response h2 {
  1170. margin-bottom:6px!important;
  1171. word-wrap: break-word;
  1172. white-space: pre-wrap;
  1173. white-space: -moz-pre-wrap;
  1174. white-space: -pre-wrap;
  1175. white-space: -o-pre-wrap;
  1176. word-wrap: break-word;
  1177. overflow: auto;
  1178. position:relative;
  1179. z-index:15;
  1180. background-color: {color:background};
  1181. outline:1px solid {color:border};
  1182. margin-left:1px;
  1183. margin-right:1px;
  1184. font-weight:bold;
  1185. padding-left:25px;
  1186. padding-right:25px;
  1187. margin-top:1px!important;
  1188. margin-bottom:12px!important;
  1189. font-family:monospace;
  1190. letter-spacing:0.75px;
  1191. word-spacing:-3px!important;
  1192. font-size:8.4px;
  1193. text-shadow: 0px 0px 1px {color:headers};
  1194. text-transform:uppercase;
  1195. text-align:left;
  1196. padding-top:8px;
  1197. padding-bottom:8px;
  1198. text-align:justify;
  1199. outline:1px solid {color:border};
  1200. white-space: pre-wrap;
  1201. white-space: -moz-pre-wrap;
  1202. white-space: -pre-wrap;
  1203. white-space: -o-pre-wrap;
  1204. word-wrap: break-word;
  1205. }
  1206.  
  1207.  
  1208. #response::after {
  1209. content: "";
  1210. clear: both;
  1211. display: table;
  1212. margin-top:-8px!important;
  1213. }
  1214.  
  1215.  
  1216.  
  1217.  
  1218. </style>
  1219. </head>
  1220.  
  1221.  
  1222.  
  1223.  
  1224.  
  1225.  
  1226.  
  1227. <body>
  1228.  
  1229. <!-- CONTENT: TOP BAR -->
  1230.  
  1231. <div id="container">
  1232.  
  1233. <div class="top-bar">
  1234. <div class="top-bar-content">
  1235.  
  1236.  
  1237. <a href="/" style="display: inline-flex; align-items: center;">
  1238. <span class="material-icons" style="font-size: 18px; margin-right: 10px; color:{color:italic};">home</span> Home / Refresh
  1239. </a>
  1240.  
  1241.  
  1242. <a href="/ask" style="display: inline-flex; align-items: center;">
  1243. <span class="material-icons" style="font-size: 18px; margin-right: 10px; color:{color:bold};">mail</span> Message
  1244. </a>
  1245.  
  1246.  
  1247. <a href="{text:Rules URL}" style="display: inline-flex; align-items: center;">
  1248. <span class="material-icons" style="font-size: 18px; margin-right: 10px; color:{color:italic};">menu</span> Regulations
  1249. </a>
  1250.  
  1251.  
  1252. <a href="#" id="aesthetic" style="display: inline-flex; align-items: center;">
  1253. <span class="material-icons" style="font-size: 18px; margin-right: 10px; color:{color:bold};">groups</span> Muse List
  1254. </a>
  1255.  
  1256.  
  1257. <a href="https://iniziare.tumblr.com/" style="display: inline-flex; align-items: center;">
  1258. <span class="material-icons" style="font-size: 18px; margin-right: 10px; color:{color:italic};">description</span> Theme Credit
  1259. </a>
  1260.  
  1261.  
  1262.  
  1263.  
  1264. <!-- CONTENT: MUSES -->
  1265. <div id="theme-menu">
  1266.  
  1267.  
  1268. <!-- IF YOU WANT TO ADD ANOTHER MUSE, SIMPLY COPY ONE OF THESE LINES, AND PASTE IT WHEREVER YOU WANT IT TO APPEAR IN THE LIST. IT'S AS SIMPLE AS THAT! -->
  1269.  
  1270. <a href="/LINK">Nicholas D. Wolfwood</a>
  1271. <a href="/LINK">Kazuhira Miller</a>
  1272. <a href="/LINK">Big Boss</a>
  1273. <a href="/LINK">Claude von Riegan</a>
  1274. <a href="/LINK">Balthier</a>
  1275. <a href="/LINK">Spike Spiegel</a>
  1276. <a href="/LINK">Kaedehara Kazuha</a>
  1277. <a href="/LINK">Pantalone</a>
  1278. <a href="/LINK">Maruki Takuto</a>
  1279. <a href="/LINK">Suzaku Kururugi</a>
  1280.  
  1281.  
  1282.  
  1283. </div id="theme-menu">
  1284.  
  1285.  
  1286.  
  1287. <!-- CONTENT: SIDEBAR -->
  1288.  
  1289. <div id="sidebar">
  1290.  
  1291. <div id="sidebarheader">{text:Header}
  1292. <span style="color:#ffffff; font-size:8px; vertical-align: 10%;"</span>
  1293. {text:Subheader}</div>
  1294.  
  1295.  
  1296. <div id="sidebartext">
  1297. {Description}
  1298. </div>
  1299.  
  1300.  
  1301. <div class="pagination">
  1302. {block:PreviousPage}
  1303. <a href="{PreviousPage}" class="pagination-button prev">Return</a>
  1304. {/block:PreviousPage}
  1305.  
  1306. {block:NextPage}
  1307. <a href="{NextPage}" class="pagination-button next">Continue</a>
  1308. {/block:NextPage}
  1309.  
  1310. {block:PermalinkPagination}
  1311. {block:PreviousPost}
  1312. <a href="{PreviousPost}" class="pagination-button prev">Return</a>
  1313. {/block:PreviousPost}
  1314.  
  1315. {block:NextPost}
  1316. <a href="{NextPost}" class="pagination-button next">Continue</a>
  1317. {/block:NextPost}
  1318. {/block:PermalinkPagination}
  1319. </div>
  1320.  
  1321. </div>
  1322.  
  1323.  
  1324. </div>
  1325. </div>
  1326.  
  1327.  
  1328.  
  1329.  
  1330.  
  1331.  
  1332.  
  1333.  
  1334. <!-- CONTENT: POSTS -->
  1335.  
  1336. <div id="content">
  1337.  
  1338. {block:Posts}
  1339.  
  1340.  
  1341. <div class="posts" post-type="{PostType}">
  1342.  
  1343.  
  1344.  
  1345. <!-- POSTS: TEXT -->
  1346.  
  1347.  
  1348. {block:Text}
  1349. <div id="textbody">
  1350. {block:Title}
  1351. <h1>{Title}</h1>
  1352. {/block:Title}
  1353.  
  1354. <div id="wrap">
  1355. {Body}
  1356. </div id="wrap">
  1357. </div id="textbody">
  1358. {/block:Text}
  1359.  
  1360.  
  1361.  
  1362.  
  1363.  
  1364.  
  1365. <!-- POSTS: PHOTO/SET -->
  1366.  
  1367. {block:Photo}
  1368. <div class="psingle">
  1369. {LinkOpenTag}
  1370. <img src="{PhotoURL-HighRes}">
  1371. {LinkCloseTag}
  1372. </div>
  1373.  
  1374.  
  1375. {block:Caption}
  1376. <div id="pcaption">
  1377. {Caption}
  1378. </div id="pcaption">
  1379. {/block:Caption}
  1380.  
  1381. {/block:Photo}
  1382.  
  1383.  
  1384. {block:Photoset}
  1385. {Photoset}
  1386.  
  1387.  
  1388. {block:Caption}
  1389. <div id="pcaption">
  1390. {Caption}
  1391. </div id="pcaption">
  1392. {/block:Caption}
  1393.  
  1394. {/block:Photoset}
  1395.  
  1396.  
  1397.  
  1398.  
  1399.  
  1400.  
  1401.  
  1402. <!-- POSTS: ASK -->
  1403.  
  1404.  
  1405. {block:Answer}
  1406.  
  1407.  
  1408. <div class="letterask" style="font-weight:bold;">?</div class="letterask">
  1409. <div id="askheader">
  1410. <b>Curiosities, you say?</b> <span style="font-weight:bold; color:{color:text}!important;">{Asker} is inquiring:</span>
  1411. </div id="askheader">
  1412.  
  1413. <div id="ask">
  1414.  
  1415. {Question}
  1416. </div id="ask">
  1417.  
  1418.  
  1419. <div class="asker">
  1420. </div class="asker">
  1421.  
  1422.  
  1423. <div id="response">
  1424. <div id="wrap"><span>{Answer}</span></div id="wrap">
  1425.  
  1426. </div id="response">
  1427.  
  1428. {/block:Answer}
  1429.  
  1430.  
  1431.  
  1432. <!-- POSTS: AUDIO -->
  1433.  
  1434. {block:Audio}
  1435. <!-- audio ------------------------------------------------------------>
  1436. <div class="audiowrap">
  1437. <div class="audio">
  1438. {block:AudioPlayer}
  1439. <div class="player">{AudioPlayerWhite}</div>
  1440. {/block:AudioPlayer}
  1441. <div class="track">
  1442. <div class="h">
  1443. {block:Artist}<b>{Artist}:</b></span>{/block:Artist} {block:TrackName}{TrackName}{/block:TrackName}
  1444. </div>
  1445. </div>
  1446. </div>
  1447. </div>
  1448. {/block:Audio}
  1449.  
  1450. {block:Caption}
  1451. {Caption}
  1452. {/block:Caption}
  1453.  
  1454.  
  1455.  
  1456.  
  1457.  
  1458. <!-- POSTS: PERMALINK -->
  1459.  
  1460.  
  1461. {block:Date}
  1462.  
  1463. <div class="permalink">
  1464.  
  1465. <span style="color:#ffffff!important;font-weight:bold!important;">Date:</span> <a href="{Permalink}">
  1466. {DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear}
  1467. </a>
  1468.  
  1469. <a href="{Permalink}">
  1470. {NoteCount} <span style="text-transform:lowercase!important; font-weight:bold!important; color:#fff;">notes</span>
  1471. </a>
  1472.  
  1473.  
  1474. <a href="{ReblogURL}" target="_blank" title="Reblog"><span class="material-icons" style="float:right; margin-top:10px; margin-right:0px; font-size:15px!important;">repeat</span>
  1475.  
  1476.  
  1477. </div class="permalink">
  1478.  
  1479.  
  1480. {/block:Date}
  1481.  
  1482.  
  1483. {block:HasTags}
  1484. <div class="tags">
  1485. <span style="color:#ffffff!important; font-weight:bold!important;">Tagged with:&nbsp;&nbsp;</span>
  1486.  
  1487. {block:Tags}
  1488. <a href="{TagURL}" init-tags>#{Tag}&nbsp;&nbsp;</a>
  1489. {/block:Tags}
  1490.  
  1491. </div class="tags">
  1492. {/block:HasTags}
  1493.  
  1494.  
  1495.  
  1496.  
  1497. <!-- POSTS: NOTES -->
  1498.  
  1499. {block:PostNotes}
  1500. <div id="notes">
  1501. <div class="note">
  1502. {PostNotes}
  1503. </div class="note">
  1504. </div id="notes">
  1505. <br>
  1506. {/block:PostNotes}
  1507.  
  1508.  
  1509.  
  1510.  
  1511.  
  1512. <!-- EXTRA: HIDE VIA/SOURCE IN POSTS -->
  1513.  
  1514.  
  1515. {block:ContentSource}<!-- {SourceURL}
  1516. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1517. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1518. {/block:ContentSource}
  1519.  
  1520.  
  1521. <!-- {block:NoRebloggedFrom}
  1522. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1523. {/block:NoRebloggedFrom} -->
  1524.  
  1525.  
  1526.  
  1527.  
  1528. </div class="posts" post-type="{PostType}" posts-selector>
  1529. {/block:Posts}
  1530.  
  1531.  
  1532.  
  1533.  
  1534.  
  1535.  
  1536.  
  1537. </div id="content2">
  1538. </div id="content">
  1539.  
  1540.  
  1541. </div id="container">
  1542.  
  1543.  
  1544.  
  1545. </body>
  1546. </html>
  1547.  
  1548.  
  1549.  
  1550.  
Advertisement
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!