API tools faq
paste
Advertisement
wizardhut

MENTHE REVAMP

wizardhut
Apr 24th, 2019
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4.  
  5. <!---
  6.  
  7. Theme 04b - Menthe [REVAMP]
  8. wizardhut @ tumblr
  9.  
  10.  
  11. Credits:
  12. > PXU photosets by pixelunion (https://github.com/PixelUnion/Extended-Tumblr-Photoset)
  13. > FontAwesome
  14. > Un-nested captions by @neothm and @magnusthemes
  15.  
  16. --->
  17.  
  18.  
  19. <meta name="image:Sidebar Icon" content="https://static.tumblr.com/737450ee9fdb7102bcd56d2afc0dfc9e/abhqbrn/Dqlpfohjs/tumblr_static_ey8yv2r0en4kkw80c04o8go0s.png">
  20.  
  21. <meta name="color:Background" content="#f5f5f5">
  22. <meta name="color:Links" content="#ffae35">
  23. <meta name="color:Sidebar BG" content="#FAD961">
  24. <meta name="color:Sidebar Icon" content="#fff">
  25. <meta name="color:Scroll Progress Bar" content="#ffcc56">
  26. <meta name="color:Blog Subtitle" content="#FF667A">
  27. <meta name="color:Nav Links Arrow" content="#FAD961">
  28. <meta name="color:Nav Links Border" content="#000">
  29. <meta name="color:Nav Links Hover" content="#fff">
  30. <meta name="color:Nav Links BG Hover" content="#000">
  31. <meta name="color:Search Box BG" content="#000">
  32. <meta name="color:Search Box Text" content="#fff">
  33. <meta name="color:Post Text" content="#000">
  34.  
  35. <meta name="if:Scroll Progress Bar" content="1">
  36. <meta name="if:Rounded Borders" content="0">
  37. <meta name="if:Bolded Links" content="1">
  38.  
  39. <!--------------------------------------------- blog title icon selection -->
  40.  
  41. <meta name="select:Blog Title Icon" content="fas fa-apple-alt" title="apple">
  42. <meta name="select:Blog Title Icon" content="fas fa-bomb" title="bomb">
  43. <meta name="select:Blog Title Icon" content="fas fa-bong" title="bong">
  44. <meta name="select:Blog Title Icon" content="fas fa-bug" title="bug">
  45. <meta name="select:Blog Title Icon" content="fas fa-capsules" title="capsules">
  46. <meta name="select:Blog Title Icon" content="fas fa-cat" title="cat">
  47. <meta name="select:Blog Title Icon" content="fas fa-carrot" title="carrot">
  48. <meta name="select:Blog Title Icon" content="fas fa-crow" title="crow">
  49. <meta name="select:Blog Title Icon" content="fas fa-cube" title="cube">
  50. <meta name="select:Blog Title Icon" content="fas fa-dog" title="dog">
  51. <meta name="select:Blog Title Icon" content="fas fa-drumstick-bite" title="drumstick">
  52. <meta name="select:Blog Title Icon" content="fas fa-egg" title="egg">
  53. <meta name="select:Blog Title Icon" content="fas fa-feather" title="feather">
  54. <meta name="select:Blog Title Icon" content="fas fa-feather-alt" title="feather 2">
  55. <meta name="select:Blog Title Icon" content="fas fa-fish" title="fish">
  56. <meta name="select:Blog Title Icon" content="fas fa-fire" title="fire">
  57. <meta name="select:Blog Title Icon" content="fas fa-flask" title="flask">
  58. <meta name="select:Blog Title Icon" content="fas fa-frog" title="frog">
  59. <meta name="select:Blog Title Icon" content="fas fa-gamepad" title="game controller">
  60. <meta name="select:Blog Title Icon" content="fas fa-hand-holding-heart" title="hand with heart">
  61. <meta name="select:Blog Title Icon" content="far fa-heart" title="heart">
  62. <meta name="select:Blog Title Icon" content="fas fa-ice-cream" title="ice cream">
  63. <meta name="select:Blog Title Icon" content="fas fa-leaf" title="leaf">
  64. <meta name="select:Blog Title Icon" content="far fa-lemon" title="lemon">
  65. <meta name="select:Blog Title Icon" content="fas fa-magic" title="magic wand">
  66. <meta name="select:Blog Title Icon" content="fas fa-moon" title="moon">
  67. <meta name="select:Blog Title Icon" content="far fa-paper-plane" title="paper plane">
  68. <meta name="select:Blog Title Icon" content="fas fa-pepper-hot" title="pepper">
  69. <meta name="select:Blog Title Icon" content="fas fa-pizza-slice" title="pizza">
  70. <meta name="select:Blog Title Icon" content="fas fa-cloud-showers-heavy" title="rain cloud">
  71. <meta name="select:Blog Title Icon" content="fas fa-rocket" title="rocket">
  72. <meta name="select:Blog Title Icon" content="far fa-smile" title="smile">
  73. <meta name="select:Blog Title Icon" content="fas fa-seedling" title="sprout">
  74. <meta name="select:Blog Title Icon" content="far fa-star" title="star">
  75. <meta name="select:Blog Title Icon" content="fas fa-tree" title="tree">
  76. <meta name="select:Blog Title Icon" content="fas fa-cannabis" title="weed">
  77.  
  78. <meta name="text:Link One Name" content="Link One">
  79. <meta name="text:Link One URL" content="/">
  80. <meta name="text:Link Two Name" content="Link Two">
  81. <meta name="text:Link Two URL" content="/">
  82. <meta name="text:Link Three Name" content="Link Three">
  83. <meta name="text:Link Three URL" content="/">
  84. <meta name="text:Link Four Name" content="Link Four">
  85. <meta name="text:Link Four URL" content="/">
  86.  
  87.  
  88. <!--- google fonts --->
  89. <link href='https://fonts.googleapis.com/css?family=Karla:400,700|Roboto+Mono:400,500,500i,700,700i|Barlow:400,400i,700,700i|Raleway:400,400i,700,700i|Space+Mono:400,700' rel='stylesheet' type='text/css'>
  90.  
  91.  
  92. <!--- icon font(s) --->
  93. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  94.  
  95.  
  96. <!--- audio player styling --->
  97. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  98.  
  99.  
  100. <!--- smooth scroll --->
  101. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.9/SmoothScroll.min.js"></script>
  102.  
  103. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  104. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  105.  
  106. <script> $(function(){ $('article').unnest({
  107. yourCaption: ".caption", //your caption selector, the div wrapping {Caption}
  108. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  109. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  110. originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  111. tumblrAvatars: false, //”dashboard style” caption, have the avatar of the blog next to the username
  112. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  113. usernameColon: false //if turned to false, removes the colon at the end of usernames
  114. }); }); </script>
  115.  
  116.  
  117. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  118. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  119.  
  120.  
  121. <style>
  122.  
  123. @import url('https://rsms.me/inter/inter.css');
  124.  
  125.  
  126. body {
  127. background-color: {color:background};
  128. background-repeat:no-repeat;
  129. background-attachment:fixed;
  130. font-family:'Roboto Mono';
  131. cursor:url(https://66.media.tumblr.com/e6b454c13b4c472bbb962db1542b4247/tumblr_inline_pm3vyarRHM1rdf769_75sq.png), auto;
  132. }
  133.  
  134.  
  135. a {
  136. color:{color:links};
  137. text-decoration:none;
  138. {block:ifboldedlinks}font-weight:700;{/block:ifboldedlinks}
  139. {block:ifnotboldedlinks}font-weight:400;{/block:ifnotboldedlinks}
  140. transition:.4s;
  141. }
  142.  
  143.  
  144. a:hover {
  145. color:#000;
  146. transition:.4s;
  147. cursor:url(https://66.media.tumblr.com/fa566915bb992293feb5dd3cde01fd1f/tumblr_inline_pm3vyaXAQY1rdf769_75sq.png), auto;
  148. }
  149.  
  150.  
  151. ::selection {
  152. background:{color:sidebar};
  153. color:#000;
  154. }
  155.  
  156.  
  157.  
  158. /* ------------------------------------------------------------- sidebar 1 */
  159.  
  160.  
  161. .sidebar {
  162. width:100px;
  163. padding:40px;
  164. padding-top:30px;
  165. height:100%;
  166. background:{color:sidebar bg};
  167. position:fixed;
  168. top:0;
  169. left:0;
  170. text-align:center;
  171. z-index:99999999999;
  172. border-right:1px solid rgba(0,0,0,0.05);
  173. }
  174.  
  175.  
  176. .sidebar img {
  177. background:rgba(255,255,255,0.4);
  178. margin-top:-40px;
  179. padding:33px;
  180. padding-left:70px;
  181. padding-right:80px;
  182. margin-left:-40px;
  183. height:32px;
  184. width:32px;
  185. }
  186.  
  187.  
  188. .credit {
  189. position:fixed;
  190. bottom:0;
  191. right:0;
  192. padding:20px;
  193. text-align:center;
  194. font-weight:400;
  195. font-size:10px;
  196. letter-spacing:1px;
  197. text-transform:lowercase;
  198. }
  199.  
  200.  
  201.  
  202. .credit a {
  203. color:rgba(0,0,0,0.5);
  204. text-decoration:none;
  205. font-weight:700;
  206. }
  207.  
  208.  
  209.  
  210. .credit a:hover {
  211. color:#000;
  212. text-decoration:line-through;
  213. }
  214.  
  215.  
  216. .th-code {
  217. font-size:12px;
  218. vertical-align:-15%;
  219. margin-right:5px;
  220. color:rgba(0,0,0,0.5);
  221. }
  222.  
  223. .fa-paper-plane, .fa-magic, .fa-bomb, .fa-lemon, .fa-heart, .fa-star, .fa-apple-alt, .fa-bong, .fa-capsules, .fa-cannabis, .fa-carrot, .fa-bug, .fa-cat, .fa-cloud-showers-heavy, .fa-cat, .fa-cube, .fa-crow, .fa-dog, .fa-drumstick-bite, .fa-egg, .fa-feather, .fa-feather-alt, .fa-fish, .fa-flask, .fa-frog, .fa-fire, .fa-gamepad, .fa-hand-holding-heart, .fa-ice-cream, .fa-leaf, .fa-moon, .fa-pepper-hot, .fa-pizza-slice, .fa-rocket, .fa-seedling, .fa-smile, .fa-tree {
  224. color:{color:sidebar icon};
  225. font-size:30px;
  226. margin-top:-50px;
  227. padding:15px;
  228. padding-top:0px;
  229. padding-left:70px;
  230. padding-right:80px;
  231. margin-left:-40px;
  232. padding-bottom:39px;
  233. }
  234.  
  235.  
  236.  
  237. /* ------------------------------------------------------------- sidebar 2 */
  238.  
  239.  
  240. .sidebar2 {
  241. width:450px;
  242. padding:20px;
  243. height:100%;
  244. position:fixed;
  245. margin-left:170px;
  246. top:0;
  247. background:#fff;
  248. border-right:1px solid rgba(0,0,0,0.1);
  249. }
  250.  
  251.  
  252.  
  253. .title {
  254. font-weight:700;
  255. text-transform:capitalize;
  256. font-size:30px;
  257. color:#000;
  258. margin-top:200px;
  259. padding-left:40px;
  260. }
  261.  
  262.  
  263. .subtitle {
  264. font-weight:700;
  265. text-transform:lowercase;
  266. font-size:12px;
  267. color:{color:blog subtitle};
  268. margin-top:0px;
  269. padding-left:40px;
  270. letter-spacing:0.5px;
  271. font-style:italic;
  272. }
  273.  
  274.  
  275. .nav {
  276. padding-left:40px;
  277. margin-top:50px;
  278. }
  279.  
  280.  
  281. .nav a {
  282. border:2px solid {color:nav links border};
  283. display:block;
  284. padding:10px;
  285. width:250px;
  286. margin-bottom:10px;
  287. color:#000;
  288. text-decoration:none;
  289. text-transform:capitalize;
  290. font-size:10px;
  291. transition:.4s;
  292. letter-spacing:1px;
  293. font-weight:700;
  294. {block:ifroundedborders}border-radius:5px;{/block:ifroundedborders}
  295. }
  296.  
  297. .nav a:hover {
  298. border:2px solid {color:nav links bg hover};
  299. color:{color:nav links hover};
  300. background:{color:nav links bg hover};
  301. transition:.4s;
  302. }
  303.  
  304. .nav-accent {
  305. position:absolute;
  306. margin-top:-13px;
  307. margin-left:220px;
  308. opacity:0;
  309. color:#fff;
  310. transition:.4s;
  311. }
  312.  
  313. .nav a:hover .nav-accent {
  314. opacity:1;
  315. transition:.4s;
  316. margin-left:235px;
  317. }
  318.  
  319. .fa-arrow-right, .fa-arrow-left {
  320. font-size:10px;
  321. color:{color:nav links arrow};
  322. font-weight:700;
  323. transition:.4s;
  324. }
  325.  
  326. .fa-circle {
  327. font-size:7px;
  328. color:{color:nav links arrow};
  329. font-weight:700;
  330. transition:.4s;
  331. }
  332.  
  333.  
  334. .desc {
  335. font-size:10px;
  336. color:#000;
  337. line-height:20px;
  338. padding-left:40px;
  339. margin-top:50px;
  340. width:275px;
  341. {block:ifboldeddescription}font-weight:700;{/block:ifboldeddescription}
  342. {block:ifnotboldeddescription}font-weight:400;{/block:ifnotboldeddescription}
  343. }
  344.  
  345.  
  346. /* ------------------------------------------------------------ search bar */
  347.  
  348.  
  349. #search {
  350. margin-top:50px;
  351. padding-left:40px;
  352. }
  353.  
  354. .search {
  355. width:255px;
  356. outline:none;
  357. color:{color:text};
  358. border:none;
  359. padding:10px;
  360. background:{color:search box bg};
  361. font-size:10px;
  362. color:{color:search box text};
  363. letter-spacing:0.5px;
  364. font-family:'Roboto Mono';
  365. {block:ifroundedborders}
  366. border-radius:5px;
  367. {/block:ifroundedborders}
  368. transition:.4s;
  369. font-weight:700;
  370. }
  371.  
  372. .search:focus {
  373. background:transparent;
  374. box-shadow: inset 0px -4px 0px -2px #000;
  375. transition:.4s;
  376. color:{color:search box text};
  377. }
  378.  
  379. input[type=text] {
  380. color:#222;
  381. }
  382.  
  383.  
  384. input::placeholder {
  385. color:{color:search box text};
  386. font-weight:700;
  387. }
  388.  
  389.  
  390. input[type=submit] {
  391. display:none;
  392. }
  393.  
  394.  
  395.  
  396. /* --------------------------------------------------------------- top bar */
  397.  
  398.  
  399. .topbar {
  400. top:0;
  401. position:fixed;
  402. background:#fff;
  403. width:100%;
  404. z-index:99999999;
  405. padding-left:0px;
  406. margin-left:170px;
  407. border-bottom:1px solid rgba(0,0,0,0.1);
  408. }
  409.  
  410.  
  411. .topbar a {
  412. font-size:13px;
  413. color:#000;
  414. display:inline-block;
  415. text-decoration:none;
  416. font-weight:700;
  417. transition:.4s;
  418. padding-top:25px;
  419. padding-bottom:25px;
  420. letter-spacing:0.5px;
  421. width:123px;
  422. text-align:center;
  423. margin-right:-10px;
  424. }
  425.  
  426.  
  427. .topbar a:hover {
  428. color:rgba(0,0,0,0.4);
  429. transition:.4s;
  430. background:{color:sidebar bg};
  431. }
  432.  
  433.  
  434.  
  435.  
  436. /* ----------------------------------------------------------------- posts */
  437.  
  438.  
  439. article {
  440. background:#fff;
  441. margin-left:800px;
  442. width:500px;
  443. padding:40px;
  444. margin-top:200px;
  445. margin-bottom:50px;
  446. border:1px solid rgba(0,0,0,0.1);
  447. {block:ifroundedborders}border-radius:5px;{/block:ifroundedborders}
  448. }
  449.  
  450.  
  451.  
  452. .posts img {
  453. max-width:100%;
  454. {block:ifroundedborders}border-radius:5px;{/block:ifroundedborders}
  455. }
  456.  
  457.  
  458. .quote {
  459. font-size:20px;
  460. color:#000;
  461. font-weight:700;
  462. }
  463.  
  464. .text_title {
  465. font-size:14px;
  466. color:{color:post text};
  467. font-weight:700;
  468. }
  469.  
  470. .caption {
  471. margin-top:-10px;
  472. margin-left:-20px;
  473. font-size:{text:body font size}px;
  474. }
  475.  
  476. .caption img {
  477. max-width:500px;
  478. margin-top:10px;
  479. }
  480.  
  481. /* reblogs */
  482. blockquote.tumblr_parent {
  483. background:none;
  484. margin-left:0px;
  485. border-radius:5px;
  486. padding:10px;
  487. width:500px;
  488. max-width:500px;
  489. word-break:break-word;
  490. color:#222;
  491. padding-left:20px;
  492. font-size:11px;
  493. margin-top:20px;
  494. line-height:20px;
  495. }
  496.  
  497. /* non-reblogged original post */
  498. .originalpost blockquote.tumblr_parent {
  499. padding:20px;
  500. width:500px;
  501. margin:0;
  502. color:#222;
  503. background:transparent!important;
  504. padding-left:0px;
  505. text-align:left;
  506. font-size:12px;
  507. }
  508.  
  509. /* non-reblogged original post */
  510. .caption.originalpost {
  511. margin:-5px 0;
  512. line-height:30px;
  513. background:transparent!important;
  514. margin-top:10px;
  515. border:none;
  516. font-size:12px;
  517. }
  518.  
  519. /* reblogs; tumblr user icons */
  520. img.tumblr_avatar {
  521. margin-right:10px;
  522. margin-top:2px!important;
  523. height:25px;
  524. width:25px;
  525. margin-left:0px;
  526. float:left;
  527. border-radius:100%!important;
  528. vertical-align:-20%!important;
  529. color:#fff;
  530. font-size:12px;
  531. }
  532.  
  533. /* reblogs; tumblr user names */
  534. .caption a.tumblr_blog {
  535. font-size:12px;
  536. line-height:20px;
  537. color:#222;
  538. display:block;
  539. padding:5px;
  540. padding-bottom:10px;
  541. text-decoration:none;
  542. font-weight:700;
  543. background:transparent;
  544. transition:.3s;
  545. border-bottom:1px solid #f0f0f0;
  546. }
  547.  
  548. /* reblogs; tumblr user names hover */
  549. .caption a:hover.tumblr_blog {
  550. color:{color:accent};
  551. transition:.3s;
  552. }
  553.  
  554.  
  555.  
  556. iframe.tumblr_audio_player {
  557. height:85px!important
  558. }
  559.  
  560.  
  561.  
  562. /* ------------------------------------------------------------- post info */
  563.  
  564.  
  565. .postinfo {
  566. padding:15px;
  567. margin-top:-20px;
  568. margin-left:-15px;
  569. width:500px;
  570. margin-bottom:30px;
  571. font-size:12px;
  572. font-weight:700;
  573. text-align:right;
  574. }
  575.  
  576. .tags {
  577. color:{color:post text};
  578. width:560px;
  579. text-align:left;
  580. margin-left:-30px;
  581. padding:10px;
  582. padding-left:30px;
  583. font-size:11px;
  584. margin-top:20px;
  585. font-weight:600;
  586. line-height:25px;
  587. }
  588.  
  589. .tags a {
  590. border:none;
  591. color:#222;
  592. font-weight:700;
  593. padding-top:2px;
  594. padding-bottom:2px;
  595. padding-right:2px;
  596. padding-left:2px;
  597. border-bottom:2px solid transparent;
  598. }
  599.  
  600. .tags a:hover {
  601. border-bottom:2px solid;
  602. }
  603.  
  604. .reblog_perma {
  605. float:left;
  606. }
  607.  
  608. .reblog_perma a {
  609. display:inline-block;
  610. }
  611.  
  612. .fa-sync-alt {
  613. font-size:15px;
  614. color:#222;
  615. font-weight:bold;
  616. transition:.4s;
  617. margin-right:20px;
  618. }
  619.  
  620. .postinfo a:hover .fa-sync-alt {
  621. color:{color:nav links arrow};
  622. }
  623.  
  624. .fa-link {
  625. font-size:15px;
  626. color:#222;
  627. font-weight:bold;
  628. transition:.4s;
  629. }
  630.  
  631. .postinfo a:hover .fa-link {
  632. color:{color:nav links arrow};
  633. }
  634.  
  635.  
  636.  
  637. /* ------------------------------------------------------- tumblr controls */
  638.  
  639.  
  640. iframe.tmblr-iframe {
  641. z-index:99999999999999!important;
  642. top:0!important;
  643. right:0!important;
  644. opacity:0;
  645. padding-top:15px;
  646. /* delete invert(1) from here */
  647. filter:invert(1) contrast(100%) hue-rotate(110deg);
  648. /* to here if your blog has a dark background */
  649. transform:scale(0.8);
  650. transform-origin:100% 0;
  651. text-shadow:none;
  652. box-shadow:none;
  653. transition:.5s;
  654. }
  655.  
  656. iframe.tmblr-iframe:hover {
  657. opacity:0.8!important;
  658. transition:.5s;
  659. }
  660.  
  661.  
  662.  
  663. /* --------------------------------------------------- scroll progress bar */
  664.  
  665.  
  666. .progress-container {
  667. width: 100%;
  668. height: 8px;
  669. background: transparent;
  670. z-index:999999999999999999999999999;
  671. top:0;
  672. left:0;
  673. position:fixed;
  674. }
  675.  
  676. .progress-bar {
  677. height: 3px;
  678. background: {color:scroll progress bar};
  679. width: 0%;
  680. }
  681.  
  682.  
  683. /* ---------------------------------------------------- back to top button */
  684.  
  685. #top {
  686. width: 40px;
  687. line-height: 40px;
  688. overflow: hidden;
  689. z-index: 999;
  690. display: none;
  691. position: fixed;
  692. bottom: 10px;
  693. left:0;
  694. margin-left:60px;
  695. color: #000;
  696. text-align: center;
  697. font-size: 30px;
  698. text-decoration: none;
  699. background:{color:sidebar};
  700. }
  701.  
  702. #top:hover {
  703. color: {color:links};
  704. }
  705.  
  706. #top:hover .fa-arrow-up {
  707. transition:.3s;
  708. transform:translateY(-5px);
  709. color:rgba(255,255,255,0.6);
  710. }
  711.  
  712. .fa-arrow-up {
  713. color:#fff;
  714. transition:.3s;
  715. }
  716.  
  717.  
  718.  
  719.  
  720. /* -------------------------------------------------------- PERMALINK PAGE */
  721.  
  722. .postnotes {
  723. padding:20px;
  724. padding-left:0px;
  725. color:#555;
  726. font-size:11px;
  727. letter-spacing:0.5px;
  728. line-height:35px;
  729. max-height:300px;
  730. overflow:auto;
  731. width:530px;
  732. margin-left:-50px;
  733. margin-top:40px;
  734. }
  735.  
  736. .postnotes a {
  737. border:none;
  738. }
  739.  
  740. .postnotes a:hover {
  741. color:{color:accent};
  742. }
  743.  
  744. .postnotes img {
  745. border-radius:100%;
  746. margin-right:5px;
  747. vertical-align:-15%;
  748. }
  749.  
  750. .postnotes li {
  751. list-style-type:none;
  752. }
  753.  
  754. .postnotes::-webkit-scrollbar-track {
  755. background:#191919;
  756. }
  757.  
  758.  
  759.  
  760. /* ----------------------------------------------------------- audio posts */
  761.  
  762. iframe.tumblr_audio_player {
  763. height:65px;!important
  764. }
  765.  
  766. .audio_player {
  767. width:32px;
  768. overflow:hidden;
  769. transform:scale(1.1);
  770. }
  771.  
  772. .audio_player_container {
  773. margin-left:40px;
  774. margin-top:40px;
  775. }
  776.  
  777. .audio_player_bg {
  778. border-radius:3px;
  779. width:120px;
  780. height:95px;
  781. padding:5px;
  782. background:{color:sidebar bg};
  783. margin-bottom:30px;
  784. }
  785.  
  786. .audio_info {
  787. border-radius:3px;
  788. width:335px;
  789. height:95px;
  790. padding:5px;
  791. background:#f6f6f6;
  792. margin-bottom:30px;
  793. margin-left:0px;
  794. padding-right:20px;
  795. float:right;
  796. color:#222;
  797. text-align:right;
  798. }
  799.  
  800. .artist {
  801. margin-top:-25px;
  802. font-size:13px;
  803. text-transform:uppercase;
  804. color:{color:accent color 4};
  805. font-weight:600;
  806. letter-spacing:1px;
  807. }
  808.  
  809. .fa-step-forward {
  810. margin-left:45px;
  811. margin-top:-3px;
  812. position:absolute;
  813. font-size:20px;
  814. color:#fff;
  815. }
  816.  
  817. .fa-step-backward {
  818. margin-left:-30px;
  819. margin-top:-3px;
  820. position:absolute;
  821. font-size:20px;
  822. color:#fff;
  823. }
  824.  
  825. h4 {
  826. font-size:18px;
  827. font-weight:700;
  828. }
  829.  
  830.  
  831.  
  832. /* ------------------------------------------------------------ chat posts */
  833.  
  834. .chat ul {
  835. list-style: none;
  836. margin: 0;
  837. padding: 0;
  838. }
  839.  
  840. .chat li {
  841. border-radius:3px;
  842. margin-bottom: 2%;
  843. padding: 2%;
  844. font-size:11px;
  845. text-align:left;
  846. color:#fff;
  847. }
  848.  
  849. .chat .odd {
  850. background:{color:sidebar bg};
  851. }
  852. .chat .even {
  853. background:#f6f6f6;
  854. color:#222;
  855. text-align:right;
  856. }
  857.  
  858.  
  859.  
  860. /* ------------------------------------------------------------- ask posts */
  861.  
  862. .question {
  863. font-size:11px;
  864. padding:10px;
  865. text-align:left;
  866. line-height:24px;
  867. padding-left:0px;
  868. font-weight:700;
  869. border-bottom:1px solid rgba(0,0,0,0.1);
  870. }
  871.  
  872. .asker {
  873. padding:10px;
  874. border-radius:0px;
  875. text-align:left;
  876. padding-left:0px;
  877. }
  878.  
  879. .asker a {
  880. color:{color:links};
  881. border-radius:0px;
  882. padding:2px;
  883. font-weight:700;
  884. }
  885.  
  886. .asker a:hover {
  887. border-radius:3px;
  888. background:{color:accent color 3};
  889. color:#222;
  890. }
  891.  
  892. .asker-question {
  893. padding:10px;
  894. padding-left:0px;
  895. }
  896.  
  897. .answer {
  898. padding-left:20px;
  899. text-align:right;
  900. font-size:11px;
  901. height:auto;
  902. }
  903.  
  904. {block:AskPage}
  905.  
  906. .postinfo, .text_title {
  907. display:none;
  908. }
  909.  
  910. {/block:AskPage}
  911.  
  912.  
  913. </style>
  914. </head>
  915.  
  916.  
  917.  
  918. <!--- audio player styling --->
  919. <script>
  920. $(document).ready(function() {
  921. $('iframe.tumblr_audio_player').load( function() {
  922. $('iframe.tumblr_audio_player').contents().find("head")
  923. .append($("<style type='text/css'> .audio-player{background:transparent; color:#fff;} </style>"));
  924. });
  925. });
  926. </script>
  927.  
  928.  
  929. <body>
  930.  
  931. {block:ifscrollprogressbar}
  932. <div class="progress-container">
  933. <div class="progress-bar" id="myBar"></div>
  934. </div>
  935. {/block:ifscrollprogressbar}
  936.  
  937. <div class="topbar">
  938. <a href="/">Home</a>
  939. <a href="/ask">Ask</a>
  940. <a href="/archive">Archive</a>
  941. <a href="/submit">Submit</a>
  942. </div>
  943.  
  944. <div class="sidebar">
  945. <i class="{select:blog title icon}"></i>
  946. </div>
  947.  
  948.  
  949. <div class="sidebar2">
  950. <div class="title">{title}</div>
  951. <div class="subtitle">@{name}</div>
  952. <div class="nav">
  953. <a href="{text:link one url}">{text:link one name} <div class="nav-accent"><i class="fas fa-circle"></i></div></a>
  954. <a href="{text:link two url}">{text:link two name} <div class="nav-accent"><i class="fas fa-circle"></i></div></a>
  955. <a href="{text:link three url}">{text:link three name} <div class="nav-accent"><i class="fas fa-circle"></i></div></a>
  956. <a href="{text:link four url}">{text:link four name} <div class="nav-accent"><i class="fas fa-circle"></i></div></a>
  957. {block:pagination}
  958.  
  959. {block:nextpage}
  960. <a href="{nextpage}">Next <div class="nav-accent"><i class="fas fa-arrow-right"></i></div></a>
  961. {/block:nextpage}
  962.  
  963. {block:previouspage}
  964. <a href="{previouspage}">Previous <div class="nav-accent"><i class="fas fa-arrow-left"></i></div></a>
  965. {/block:previouspage}
  966.  
  967. {/block:pagination}
  968. </div>
  969.  
  970. <div id="search">
  971. <form action="/search" method="get">
  972. <input type="text" name="q" value="{SearchQuery}" class="search" autocomplete="off" placeholder="Search {Name}"/>
  973. <input type="submit" value="GO">
  974. </form>
  975. </div>
  976.  
  977. <div class="desc">{description}</div>
  978.  
  979. </div>
  980.  
  981.  
  982.  
  983. {block:posts}
  984. <article id="p-{PostType}" class="post">
  985.  
  986. <div class="postinfo">
  987. {Month} {DayOfMonthWithSuffix} {Year}
  988. <div class="reblog_perma">
  989. <a href="{ReblogURL}"><i class="fas fa-sync-alt"></i></a>
  990. <a href="{Permalink}"><i class="fas fa-link"></i></a>
  991. </div>
  992. </div>
  993.  
  994. {block:quote}
  995. <div class="quote">{quote}</div>
  996. {/block:quote}
  997.  
  998. {block:photo}
  999. <img src="{photourl-500}">
  1000. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1001. {/block:photo}
  1002.  
  1003. {block:text}
  1004. {block:title}<div class="text_title"><i class="fas fa-pen"></i> {title}</div>{/block:title}
  1005. <div class="caption">{Body}</div>
  1006. {/block:text}
  1007.  
  1008. {block:Photoset}
  1009. <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></div>{/block:Photos}</div>
  1010.  
  1011. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1012. {/block:Photoset}
  1013.  
  1014.  
  1015. {block:video}
  1016. {video-500}
  1017. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1018. {/block:video}
  1019.  
  1020. {block:Audio}
  1021. <div class="audio_info">
  1022. {block:TrackName}
  1023. <h4>{TrackName}</h4>
  1024. {/block:TrackName}
  1025. {block:Artist}
  1026. <div class="artist">{Artist}</div>
  1027. {/block:Artist}
  1028. </div>
  1029.  
  1030. <div class="audio_player_bg">
  1031. <div class="audio_player_container">
  1032. <i class="fas fa-step-backward"></i>
  1033. <i class="fas fa-step-forward"></i>
  1034. <div class="audio_player">{AudioPlayer}</div>
  1035. </div>
  1036. </div>
  1037.  
  1038. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1039. {/block:Audio}
  1040.  
  1041. {block:Chat}
  1042. <div class="chat">
  1043. <ul>
  1044. {block:Lines}<li class="{Alt}">{block:Label} {Label} {/block:Label}{Line}</li>{/block:Lines}
  1045. </ul>
  1046. </div>
  1047. {/block:Chat}
  1048.  
  1049. {block:Answer}
  1050. <div class="question">
  1051. <div class="asker">{Asker} sent:</div>
  1052. <div class="asker-question">{Question}</div>
  1053. </div>
  1054.  
  1055. <div class="caption"><div class="answer">{Answer}</div></div>
  1056. {/block:Answer}
  1057.  
  1058.  
  1059. {block:HasTags}
  1060. <div class="tags">
  1061. {block:Tags}
  1062. <a href="{TagURL}">#{Tag}</a>&nbsp;
  1063. {/block:Tags}
  1064. </div>
  1065. {/block:HasTags}
  1066.  
  1067.  
  1068. {block:permalinkpage}
  1069. {block:postnotes}
  1070. <div class="postnotes">{postnotes}</div>
  1071. {/block:postnotes}
  1072. {/block:permalinkpage}
  1073.  
  1074.  
  1075. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}{block:RebloggedFrom}<!-- {ReblogParentName} -->{/block:RebloggedFrom}
  1076.  
  1077.  
  1078. </article>
  1079. {/block:posts}
  1080.  
  1081.  
  1082. <!--- https://78.media.tumblr.com/114f243fe17936f6d13c42ade964c85a/tumblr_inline_mgxqv8LqxI1qabnl2.jpg --->
  1083. <div class="credit"><span class="th th-code"></span><a href="http://wizardhut.tumblr.com">theme</a></div>
  1084.  
  1085.  
  1086.  
  1087.  
  1088. <script>
  1089. window.onscroll = function() {myFunction()};
  1090.  
  1091. function myFunction() {
  1092. var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  1093. var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  1094. var scrolled = (winScroll / height) * 100;
  1095. document.getElementById("myBar").style.width = scrolled + "%";
  1096. }
  1097. </script>
  1098.  
  1099.  
  1100. <!--- back to top button --->
  1101.  
  1102. <a id="top" title="Back to top" href="#"><i class="fas fa-arrow-up"></i></a>
  1103.  
  1104.  
  1105. <script>
  1106. $(window).scroll(function() {
  1107. var height = $(window).scrollTop();
  1108. if (height > 100) {
  1109. $('#top').fadeIn();
  1110. } else {
  1111. $('#top').fadeOut();
  1112. }
  1113. });
  1114. $(document).ready(function() {
  1115. $("#top").click(function(event) {
  1116. event.preventDefault();
  1117. $("html, body").animate({ scrollTop: 0 }, "slow");
  1118. return false;
  1119. });
  1120.  
  1121. });
  1122. </script>
  1123.  
  1124.  
  1125. <script>
  1126. $(document).ready(function(){
  1127. $('.photo-slideshow').pxuPhotoset({
  1128. lightbox: true,
  1129. rounded: false,
  1130. gutter: '5px',
  1131. borderRadius: '0px',
  1132. photoset: '.photo-slideshow',
  1133. photoWrap: '.photo-data',
  1134. photo: '.pxu-photo'
  1135. });
  1136. });
  1137. </script>
  1138.  
  1139. </body>
  1140. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!