API tools faq
paste
Advertisement
wizardhut

RELAXER

wizardhut
Dec 27th, 2018
370
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4.  
  5. <!---
  6.  
  7. Theme 06 - Relaxer
  8. wizardhut @ tumblr
  9.  
  10. Loosely based on the original Redux theme. NOT a Redux edit.
  11.  
  12. --->
  13.  
  14. <meta name="color:Background" content="#f0f0f0">
  15. <meta name="color:Accent" content="#00bbcc">
  16. <meta name="color:Text" content="#333">
  17. <meta name="color:Sidebar Links Text" content="#333">
  18. <meta name="color:Sidebar Links Hover" content="#00bbcc">
  19. <meta name="color:Follow Link Text" content="#fff">
  20. <meta name="color:Post BG" content="#fff">
  21. <meta name="color:Sidebar BG" content="#fff">
  22. <meta name="color:Sidebar Image BG" content="#fff">
  23.  
  24. <meta name="if:Extra Links" content="0">
  25. <meta name="if:Social Media Links" content="0">
  26. <meta name="if:Link Transition Effect" content="0">
  27. <meta name="if:Circular Sidebar Image" content="0">
  28. <meta name="if:Borders" content="0">
  29. <meta name="if:Shadows" content="1">
  30. <meta name="if:Show Tags" content="1">
  31.  
  32. <meta name="select:Font" content="roboto" title="Roboto">
  33. <meta name="select:Font" content="karla" title="Karla">
  34. <meta name="select:Font" content="space mono" title="Space Mono">
  35. <meta name="select:Font" content="overpass mono" title="Overpass Mono">
  36. <meta name="select:Font" content="arial" title="Arial">
  37. <meta name="select:Font" content="segoe ui" title="Segoe UI">
  38.  
  39. <meta name="select:Link One Icon" content="fa-user" title="User">
  40. <meta name="select:Link One Icon" content="fa-plus-square" title="Plus">
  41. <meta name="select:Link One Icon" content="fa-tags" title="Tags">
  42. <meta name="select:Link One Icon" content="fa-desktop" title="Desktop">
  43.  
  44. <meta name="select:Link Two Icon" content="fa-user" title="User">
  45. <meta name="select:Link Two Icon" content="fa-plus-square" title="Plus">
  46. <meta name="select:Link Two Icon" content="fa-tags" title="Tags">
  47. <meta name="select:Link Two Icon" content="fa-desktop" title="Desktop">
  48.  
  49. <meta name="select:Link Three Icon" content="fa-user" title="User">
  50. <meta name="select:Link Three Icon" content="fa-plus-square" title="Plus">
  51. <meta name="select:Link Three Icon" content="fa-tags" title="Tags">
  52. <meta name="select:Link Three Icon" content="fa-desktop" title="Desktop">
  53.  
  54. <meta name="select:Link Four Icon" content="fa-user" title="User">
  55. <meta name="select:Link Four Icon" content="fa-plus-square" title="Plus">
  56. <meta name="select:Link Four Icon" content="fa-tags" title="Tags">
  57. <meta name="select:Link Four Icon" content="fa-desktop" title="Desktop">
  58.  
  59. <meta name="select:SM Link One Icon" content="fa-instagram" title="Instagram">
  60. <meta name="select:SM Link One Icon" content="fa-reddit" title="Reddit">
  61. <meta name="select:SM Link One Icon" content="fa-dribbble-square" title="Dribbble">
  62. <meta name="select:SM Link One Icon" content="fa-behance-square" title="Behance">
  63. <meta name="select:SM Link One Icon" content="fa-twitter-square" title="Twitter">
  64. <meta name="select:SM Link One Icon" content="fa-lastfm" title="Last.fm">
  65.  
  66. <meta name="select:SM Link Two Icon" content="fa-instagram" title="Instagram">
  67. <meta name="select:SM Link Two Icon" content="fa-reddit" title="Reddit">
  68. <meta name="select:SM Link Two Icon" content="fa-dribbble-square" title="Dribbble">
  69. <meta name="select:SM Link Two Icon" content="fa-behance-square" title="Behance">
  70. <meta name="select:SM Link Two Icon" content="fa-twitter-square" title="Twitter">
  71. <meta name="select:SM Link Two Icon" content="fa-lastfm" title="Last.fm">
  72.  
  73. <meta name="text:Link One Name" content="Link One">
  74. <meta name="text:Link One URL" content="/">
  75.  
  76. <meta name="text:Link Two Name" content="Link Two">
  77. <meta name="text:Link Two URL" content="/">
  78.  
  79. <meta name="text:Link Three Name" content="Link Three">
  80. <meta name="text:Link Three URL" content="/">
  81.  
  82. <meta name="text:Link Four Name" content="Link Four">
  83. <meta name="text:Link Four URL" content="/">
  84.  
  85. <meta name="text:Social Media Link One Name" content="Social Media">
  86. <meta name="text:Social Media Link One URL" content="/">
  87.  
  88. <meta name="text:Social Media Link Two Name" content="Social Media">
  89. <meta name="text:Social Media Link Two URL" content="/">
  90.  
  91.  
  92.  
  93. <!--- google fonts --->
  94. <link href='https://fonts.googleapis.com/css?family=Karla:400,700|Roboto:400,700|Space+Mono:400,700|Overpass+Mono:400,700|Rubik:400,700' rel='stylesheet' type='text/css'>
  95.  
  96. <!--- icon font --->
  97. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  98. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  99. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
  100.  
  101. <!--- audio player styling --->
  102. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  103.  
  104. <!-- smooth scroll -->
  105. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  106.  
  107. <!-- un-nest captions -->
  108. <script src="http://static.tumblr.com/p0knose/8Hbocatf1/unnest.min.js" type="text/javascript"></script>
  109.  
  110. <script type="text/javascript">
  111. $(document).ready(function(){
  112. $("article").unNest({
  113. yourCaption:".caption",
  114. newCaptionUsername:true,
  115. tumblrAvatars:true,
  116. usernameColon:false
  117. });
  118. });
  119. </script>
  120.  
  121.  
  122.  
  123. <style type="text/css">
  124.  
  125. body {
  126. font-family:{select:font};
  127. background:{color:background};
  128. margin:100px;
  129. margin-top:50px;
  130. color:{color:text};
  131. }
  132.  
  133. a {
  134. color:{color:accent};
  135. {block:iflinktransitioneffect}
  136. transition:.5s;
  137. border-bottom:1px solid;
  138. text-decoration:none;
  139. {/block:iflinktransitioneffect}
  140. font-weight:700;
  141. }
  142.  
  143. a:hover {
  144. color:{color:text};
  145. text-decoration:none;
  146. {block:iflinktransitioneffect}
  147. transition:.5s;
  148. border-bottom:1px solid transparent;
  149. text-decoration:none;
  150. {/block:iflinktransitioneffect}
  151. }
  152.  
  153. ::selection {
  154. background:{color:accent};
  155. }
  156.  
  157.  
  158.  
  159. /* BLOG TITLE */
  160.  
  161. .title {
  162. font-size:40px;
  163. font-weight:700;
  164. color:rgba(87,220,196,0.7);
  165. margin-bottom:50px;
  166. text-transform:capitalize;
  167. margin-left:400px;
  168. }
  169.  
  170. .title a {
  171. color:{color:text};
  172. text-decoration:none;
  173. border:none;
  174. }
  175.  
  176.  
  177. /* POST BODY */
  178.  
  179. article {
  180. background:{color:post bg};
  181. width:500px;
  182. padding:30px;
  183. margin-left:400px;
  184. margin-bottom:100px;
  185. border-radius:3px;
  186. padding-bottom:0px;
  187. {block:ifborders}
  188. border:1px solid rgba(0,0,0,0.1);
  189. {/block:ifborders}
  190. {block:ifshadows}
  191. box-shadow: 0px 18px 65px -18px rgba(0,0,0,0.1);
  192. {/block:ifshadows}
  193. }
  194.  
  195.  
  196. /* -------------------------------------------------------------- Captions */
  197.  
  198.  
  199. .caption {
  200. margin-top:-10px;
  201. margin-left:-10px;
  202. }
  203.  
  204. .caption img {
  205. max-width:500px;
  206. margin-top:10px;
  207.  
  208. }
  209.  
  210. /* reblogs */
  211. blockquote.tumblr_parent {
  212. margin-left:10px;
  213. padding-left:20px;
  214. padding-top:10px;
  215. padding-bottom:1px;
  216. padding-right:20px;
  217. width:520px;
  218. max-width:520px;
  219. margin-left:-20px;
  220. word-break:break-word;
  221. color:{color:text};
  222. margin-top:10px;
  223. font-size:12px;
  224. border-top:1px solid rgba(0,0,0,0.1);
  225. line-height:20px;
  226. }
  227.  
  228.  
  229.  
  230. /* non-reblogged original post */
  231. .originalpost blockquote.tumblr_parent {
  232. width:480px;
  233. margin:0;
  234. color:{color:text};
  235. border:none;
  236. background:transparent!important;
  237. padding-left:0px;
  238. font-size:12px;
  239. text-align:left;
  240. }
  241.  
  242.  
  243. /* non-reblogged original post */
  244. .caption.originalpost {
  245. margin:-5px 0;
  246. line-height:30px;
  247. background:transparent!important;
  248. border:none;
  249. font-size:12px;
  250. }
  251.  
  252.  
  253.  
  254. /* reblogs; tumblr user icons */
  255. img.tumblr_avatar {
  256. margin-right:10px;
  257. margin-top:2px!important;
  258. height:25px;
  259. width:25px;
  260. margin-left:0px;
  261. border:3px solid {color:background};
  262. float:left;
  263. border-radius:100%!important;
  264. vertical-align:middle!important;
  265. color:#fff;
  266. }
  267.  
  268.  
  269.  
  270. /* reblogs; tumblr user names */
  271. .caption a.tumblr_blog {
  272. font-size:12px;
  273. line-height:20px;
  274. color:{color:text};
  275. display:block;
  276. padding:5px;
  277. padding-bottom:10px;
  278. font-weight:700;
  279. background:transparent;
  280. margin-top:2px;
  281. border:none;
  282. }
  283.  
  284.  
  285. /* reblogs; tumblr user names hover */
  286. .caption a:hover.tumblr_blog {
  287. color:{color:text};
  288. }
  289.  
  290.  
  291.  
  292. /* ------------------------------------------ Posts: PHOTO, PHOTOSET, VIDEO */
  293.  
  294.  
  295.  
  296. article img {
  297. width:500px;
  298.  
  299. }
  300.  
  301. article .caption img {
  302. border-radius:5px;
  303. max-width:100%;
  304.  
  305. }
  306.  
  307. article img.photo {
  308.  
  309. border-radius:5px;
  310.  
  311. }
  312.  
  313. .photoset {
  314. width:500px!important;
  315. overflow:hidden;
  316. border-radius:5px;
  317. margin-bottom:20px;
  318. }
  319.  
  320.  
  321. article .video {
  322. margin-top:10px;
  323. width:500px!important;
  324. border-radius:5px!important;
  325. }
  326.  
  327.  
  328.  
  329. /* QUOTE */
  330.  
  331. .quote {
  332. font-weight:700;
  333. font-size:25px;
  334. color:{color:text};
  335. }
  336.  
  337. .source {
  338. margin-top:20px;
  339. color:{color:text};
  340. font-size:12px;
  341. }
  342.  
  343.  
  344. /* --------------------------------------------------- POST INFO AND TAGS */
  345.  
  346. .postinfo {
  347. border-top:1px solid rgba(0,0,0,0.1);
  348. color:{color:text};
  349. margin-top:30px;
  350. padding:15px;
  351. font-size:12px;
  352. margin-left:-30px;
  353. width:500px;
  354. padding-left:30px;
  355. padding-right:30px;
  356. }
  357.  
  358. .postinfo_notes {
  359. float:right;
  360. }
  361.  
  362. .tags {
  363. border-top:1px solid rgba(0,0,0,0.1);
  364. padding:15px;
  365. font-size:12px;
  366. margin-left:-30px;
  367. width:515px;
  368. padding-left:30px;
  369. line-height:20px;
  370. {block:ifnotshowtags}
  371. display:none;
  372. {/block:ifnotshowtags}
  373. }
  374.  
  375. .tags a {
  376. color:{color:text};
  377. padding:3px;
  378. border-radius:3px;
  379. border:none;
  380. font-weight:400;
  381. }
  382.  
  383. .tags a:hover {
  384. background:{color:accent};
  385. color:{color:text};
  386. }
  387.  
  388.  
  389.  
  390. /* SIDEBAR */
  391.  
  392. .sidebar {
  393. width:250px;
  394. border-radius:3px;
  395. background:{color:sidebar bg};
  396. padding:25px;
  397. padding-bottom:15px;
  398. position:fixed;
  399. margin-right:0px;
  400. {block:ifborders}
  401. border:1px solid rgba(0,0,0,0.1);
  402. {/block:ifborders}
  403. {block:ifshadows}
  404. box-shadow: 0px 18px 65px -18px rgba(0,0,0,0.1);
  405. {/block:ifshadows}
  406. text-align:center;
  407. }
  408.  
  409. .sidebar img {
  410. border:1px solid rgba(0,0,0,0.1);
  411. padding:10px;
  412. background:{color:sidebar image bg};
  413. margin-top:-50px;
  414. border-radius:3px;
  415. box-shadow: 0px 18px 45px -18px rgba(0,0,0,0.1);
  416. {block:ifcircularsidebarimage}
  417. border-radius:100%;
  418. {/block:ifcircularsidebarimage}
  419. transition:.5s;
  420. }
  421.  
  422. .sidebar img:hover {
  423. transition:.5s;
  424. transform:translateY(-10px);
  425. }
  426.  
  427. .desc {
  428. font-size:12px;
  429. margin-top:20px;
  430. line-height:20px;
  431. text-align:center;
  432. color:{color:text};
  433. }
  434.  
  435. .search {
  436. outline:none;
  437. color:{color:text};
  438. border:none;
  439. border-bottom:1px solid rgba(0,0,0,0.1);
  440. padding:10px;
  441. font-family:{select:font};
  442. font-size:12px;
  443. background:none;
  444. margin-top:20px;
  445. width:calc(100% - 20px);
  446. text-align:center;
  447. transition:.5s;
  448. }
  449.  
  450. .search:hover {
  451. border-bottom:1px solid rgba(0,0,0,0.4);
  452. }
  453.  
  454.  
  455. input[type=text] {
  456. color:{color:text};
  457. }
  458.  
  459. input[type=text]:focus {
  460. border-bottom:1px solid rgba(0,0,0,0.4);
  461. }
  462.  
  463. input::placeholder {
  464. color:{color:text};
  465. }
  466.  
  467. input[type=submit] {
  468. padding:5px;
  469. position:absolute;
  470. background:none;
  471. display:none;
  472. border:none;
  473. margin-left:177px;
  474. margin-top:26px;
  475. color:{color:accent};
  476. letter-spacing:0.3px;
  477. padding-top:9px;
  478. background:{color:text};
  479. font-family:'overpass mono';
  480. width:70px;
  481. border-radius:20px;
  482. font-size:12px;
  483. font-weight:700;
  484. {block:iflinktransitioneffect}
  485. transition:.5s;
  486. {/block:iflinktransitioneffect}
  487. }
  488.  
  489. input[type=submit]:focus {
  490. outline:none;
  491. cursor:hand;
  492. }
  493.  
  494. input[type=submit]:hover {
  495. outline:none;
  496. cursor:hand;
  497. opacity:.75;
  498. {block:iflinktransitioneffect}
  499. transition:.5s;
  500. {/block:iflinktransitioneffect}
  501. }
  502.  
  503. .follow {
  504. margin-top:30px;
  505. font-size:12px;
  506. width:100%;
  507. }
  508.  
  509. .follow a {
  510. background:{color:accent};
  511. color:{color:follow link text};
  512. padding:10px;
  513. display:block;
  514. border-radius:3px;
  515. text-align:center;
  516. text-decoration:none;
  517. border:none;
  518. font-weight:normal;
  519. }
  520.  
  521. .follow a:hover {
  522. background:none;
  523. box-shadow: inset 0px 0px 0px 1px {color:sidebar links hover};
  524. color:{color:sidebar links hover};
  525. }
  526.  
  527. .fa-plus {
  528. margin-right:10px;
  529. }
  530.  
  531. .nav {
  532. margin-top:30px;
  533. text-align:left;
  534. width:300px;
  535. }
  536.  
  537. .nav a {
  538. display:inline-block;
  539. color:{color:sidebar links text};
  540. font-size:11px;
  541. text-decoration:none;
  542. text-align:center;
  543. padding:9px;
  544. text-transform:capitalize;
  545. border-radius:3px;
  546. width:104px;
  547. margin-right:2px;
  548. margin-bottom:7px;
  549. letter-spacing:0.5px;
  550. border:none;
  551. font-weight:normal;
  552. }
  553.  
  554. .nav a:hover {
  555. background:none;
  556. color:{color:sidebar links hover};
  557. }
  558.  
  559. .fa-envelope, .fa-calendar-alt, .fa-user, .fa-plus-square, .fa-tags, .fa-desktop, .fa-instagram, .fa-reddit, .fa-dribbble-square, .fa-behance-square, .fa-twitter-square, .fa-lastfm {
  560. margin-left:5px;
  561. margin-right:5px;
  562. margin-bottom:5px;
  563. font-size:13px;
  564. }
  565.  
  566.  
  567.  
  568. /* SEARCH PAGE STUFF */
  569.  
  570. .results {
  571. position:fixed;
  572. margin-left:1100px;
  573. color:{color:text};
  574. font-size:25px;
  575. font-weight:700;
  576. }
  577.  
  578. .return-to-blog {
  579. position:fixed;
  580. margin-left:1100px;
  581. font-size:12px;
  582. font-weight:700;
  583. margin-top:60px;
  584. }
  585.  
  586. .return-to-blog a {
  587. padding:10px;
  588. background:{color:accent};
  589. color:#fff;
  590. display:inline-block;
  591. width:160px;
  592. text-align:center;
  593. border-radius:3px;
  594. padding-top:12px;
  595. text-decoration:none;
  596. border:none;
  597. }
  598.  
  599. .return-to-blog a:hover {
  600. background:none;
  601. box-shadow: inset 0px 0px 0px 3px {color:accent};
  602. color:{color:accent};
  603. }
  604.  
  605. {block:NoSearchResults}
  606.  
  607. .results {
  608. display:none;
  609. }
  610.  
  611. .return-to-blog {
  612. display:none;
  613. }
  614.  
  615. .title a {
  616. color:{color:background};
  617. }
  618.  
  619. {/block:NoSearchResults}
  620.  
  621. .no_results {
  622. text-align:center;
  623. font-size:25px;
  624. font-weight:900;
  625. margin-top:200px;
  626. margin-left:-30px;
  627. color:#222;
  628. }
  629.  
  630. .no_results p {
  631. font-family:{select:font};
  632. font-size:12px;
  633. font-weight:400;
  634. }
  635.  
  636. .fa-frown {
  637. color: {color:accent};
  638. margin-bottom:30px;
  639. font-size:50px;
  640. }
  641.  
  642.  
  643.  
  644. /* PAGINATION */
  645.  
  646. .pagination {
  647. width:560px;
  648. padding:30px;
  649. padding-left:0px;
  650. margin-left:400px;
  651. padding-right:0px;
  652. }
  653.  
  654. .pagination_next {
  655. float:right;
  656. }
  657.  
  658. .pagination_next a {
  659. padding:10px;
  660. background:{color:accent};
  661. color:#fff;
  662. border-radius:3px;
  663. border:none;
  664. font-size:12px;
  665. width:150px;
  666. display:block;
  667. text-align:center;
  668. text-decoration:none;
  669. }
  670.  
  671. .pagination_next a:hover {
  672. background:none;
  673. box-shadow: inset 0px 0px 0px 3px {color:accent};
  674. color:{color:accent};
  675. }
  676.  
  677. .pagination_previous {
  678. float:left;
  679. }
  680.  
  681. .pagination_previous a {
  682. padding:10px;
  683. background:{color:accent};
  684. color:#fff;
  685. border-radius:3px;
  686. border:none;
  687. text-decoration:none;
  688. width:150px;
  689. font-size:12px;
  690. display:block;
  691. text-align:center;
  692. }
  693.  
  694. .pagination_previous a:hover {
  695. background:none;
  696. box-shadow: inset 0px 0px 0px 3px {color:accent};
  697. color:{color:accent};
  698. }
  699.  
  700.  
  701. iframe.tumblr_audio_player {
  702. height:85px;!important
  703. }
  704.  
  705.  
  706. /* REBLOGGED FROM and NOT REBLOGGED */
  707.  
  708. .reblogged_from {
  709. font-size:12px;
  710. font-weight:bold;
  711. padding-bottom:20px;
  712. margin-top:-10px;
  713. letter-spacing:0.5px;
  714. }
  715.  
  716. .fa-retweet {
  717.  
  718. }
  719.  
  720. .not_reblogged {
  721. font-size:12px;
  722. font-weight:bold;
  723. padding-bottom:20px;
  724. margin-top:-10px;
  725. letter-spacing:0.5px;
  726. }
  727.  
  728.  
  729.  
  730. /* REBLOG AND PERMALINK LINKS */
  731.  
  732. .reblog_link {
  733. position:absolute;
  734. margin-left:530px;
  735. font-size:20px;
  736. transition:.3s;
  737. opacity:0;
  738. margin-top:-30px;
  739. }
  740.  
  741. .reblog_link a {
  742. border:none;
  743. color:{color:text};
  744. }
  745.  
  746. .reblog_link a:hover {
  747. color:{color:accent};
  748. }
  749.  
  750. article:hover .reblog_link {
  751. padding-left:30px;
  752. transition:.3s;
  753. opacity:1;
  754. }
  755.  
  756. .permalink_link {
  757. position:absolute;
  758. margin-left:530px;
  759. transition:.6s;
  760. margin-top:10px;
  761. font-size:20px;
  762. opacity:0;
  763. }
  764.  
  765. .permalink_link a {
  766. border:none;
  767. color:{color:text};
  768. }
  769.  
  770. .permalink_link a:hover {
  771. color:{color:accent};
  772. }
  773.  
  774. article:hover .permalink_link {
  775. padding-left:30px;
  776. transition:.6s;
  777. opacity:1;
  778. }
  779.  
  780. .fa-link {
  781.  
  782. }
  783.  
  784.  
  785.  
  786. /* PERMALINK PAGE INFO */
  787.  
  788. .post_notes {
  789. position:fixed;
  790. font-size:11px;
  791. max-height:200px;
  792. width:400px;
  793. overflow:auto;
  794. margin-left:560px;
  795. padding:20px;
  796. margin-top:-30px;
  797. line-height:30px;
  798. padding-left:0px;
  799. color:{color:text};
  800. background:{color:post bg};
  801. border-radius:3px;
  802. {block:ifborders}
  803. border:1px solid rgba(0,0,0,0.1);
  804. {/block:ifborders}
  805. {block:ifshadows}
  806. box-shadow: 0px 18px 65px -18px rgba(0,0,0,0.1);
  807. {/block:ifshadows}
  808. }
  809.  
  810. .post_notes img {
  811. width:16px;
  812. border-radius:100%;
  813. vertical-align:middle;
  814. margin-right:10px;
  815. }
  816.  
  817. ul,li {
  818. list-style-type:none;
  819. }
  820.  
  821. .post_notes a {
  822. border:none;
  823. }
  824.  
  825. .post_notes a:hover {
  826. color:{color:accent};
  827. }
  828.  
  829. {block:PermalinkPage}
  830.  
  831. .reblog_link {
  832. display:none;
  833. }
  834.  
  835. .permalink_link {
  836. display:none;
  837. }
  838.  
  839. .reblogged_from, .not_reblogged {
  840. display:none;
  841. }
  842.  
  843. .postinfo, .tags {
  844. display:none;
  845. }
  846.  
  847. article {
  848. padding-bottom:30px;
  849. }
  850.  
  851. .title a {
  852. color:{color:background};
  853. }
  854.  
  855. {/block:PermalinkPage}
  856.  
  857. .permalink_page_links {
  858. position:fixed;
  859. margin-top:250px;
  860. width:400px;
  861. margin-left:560px;
  862. text-align:center;
  863. padding:10px;
  864. }
  865.  
  866. .permalink_page_links a {
  867. display:inline-block;
  868. background:{color:accent};
  869. color:{color:text};
  870. padding:15px;
  871. border-radius:100%;
  872. border:none;
  873. text-align:center;
  874. width:30px;
  875. margin-right:20px;
  876. margin-left:20px;
  877. height:30px;
  878. transition:.5s;
  879. }
  880.  
  881. .permalink_page_links a:hover {
  882. box-shadow: 0px 18px 45px -20px rgba(0,0,0,0.5);
  883. transform:translateY(-5px);
  884. }
  885.  
  886. .fa-sync {
  887. font-size:25px;
  888. margin-top:3px;
  889. }
  890.  
  891. .perma_reblog {
  892. position:absolute;
  893. width:420px;
  894. margin-left:-92px;
  895. margin-top:50px;
  896. text-align:center;
  897. opacity:0;
  898. letter-spacing:0.5px;
  899. transition:.5s;
  900. color:{color:text};
  901. }
  902.  
  903. .permalink_page_links a:hover .perma_reblog {
  904. opacity:1;
  905. transition:.5s;
  906. transform:translateY(10px);
  907. }
  908.  
  909. .fa-clock {
  910. font-size:25px;
  911. margin-top:3px;
  912. }
  913.  
  914. .perma_date {
  915. position:absolute;
  916. width:420px;
  917. margin-left:-187px;
  918. margin-top:50px;
  919. text-align:center;
  920. opacity:0;
  921. letter-spacing:0.5px;
  922. transition:.5s;
  923. color:{color:text};
  924. }
  925.  
  926. .permalink_page_links a:hover .perma_date {
  927. opacity:1;
  928. transition:.5s;
  929. transform:translateY(10px);
  930. }
  931.  
  932. .fa-arrow-left {
  933. font-size:25px;
  934. margin-top:3px;
  935. }
  936.  
  937. .perma_back {
  938. position:absolute;
  939. width:420px;
  940. margin-left:-157px;
  941. margin-top:50px;
  942. text-align:left;
  943. opacity:0;
  944. letter-spacing:0.5px;
  945. transition:.5s;
  946. color:{color:text};
  947. }
  948.  
  949. .permalink_page_links a:hover .perma_back {
  950. opacity:1;
  951. transition:.5s;
  952. transform:translateY(10px);
  953. }
  954.  
  955.  
  956. /* BACK TO TOP BUTTON */
  957.  
  958.  
  959. #top {
  960. width: 40px;
  961. line-height: 40px;
  962. overflow: hidden;
  963. z-index: 999;
  964. display: none;
  965. position: fixed;
  966. bottom: 10px;
  967. right:0;
  968. margin-right:20px;
  969. color: #000;
  970. text-align: center;
  971. font-size: 40px;
  972. text-decoration: none;
  973. background:{color:sidebar};
  974. border:none;
  975. }
  976.  
  977.  
  978. #top:hover {
  979. color: {color:accent};
  980. }
  981.  
  982.  
  983. #top:hover .fa-arrow-circle-up {
  984. color: {color:text};
  985. transition:.6s;
  986. }
  987.  
  988.  
  989. .fa-arrow-circle-up {
  990. color:{color:accent};
  991. transition:.6s;
  992. }
  993.  
  994.  
  995. </style>
  996. </head>
  997.  
  998.  
  999.  
  1000. <!--- audio player styling --->
  1001. <script>
  1002. $(document).ready(function() {
  1003. $('iframe.tumblr_audio_player').load( function() {
  1004. $('iframe.tumblr_audio_player').contents().find("head")
  1005. .append($("<link href='https://fonts.googleapis.com/css?family=Karla:400,700|Roboto:400,700|Space+Mono:400,700|Overpass+Mono:400,700|Rubik:400,700' rel='stylesheet' type='text/css'> <style type='text/css'> .audio-player{background:{color:accent}; color:#222; font-family:{select:font};border-top-left-radius:3px;border-bottom-left-radius:3px;!important}</style>"));
  1006. });
  1007. });
  1008. </script>
  1009.  
  1010.  
  1011. <body>
  1012.  
  1013.  
  1014. <div class="title"><a href="/">{Title}</a></div>
  1015.  
  1016. <div class="sidebar">
  1017. <img src="{PortraitURL-96}">
  1018. <div class="desc">{description}</div>
  1019.  
  1020. <form action="/search" method="get">
  1021. <input type="submit" value="Search">
  1022. <input type="text" name="q" value="{SearchQuery}" class="search" autocomplete="off" placeholder="Search the blog..."/>
  1023.  
  1024. </form>
  1025.  
  1026. <div class="follow">
  1027. <a href="https://tumblr.com/follow/{name}"><span class="fas fa-plus"></span> Follow {name}</a>
  1028. </div>
  1029.  
  1030.  
  1031. <div class="nav">
  1032.  
  1033. <a href="/ask"><span class="fas fa-envelope"></span><br>Message</a>
  1034.  
  1035. <a href="/archive"><span class="far fa-calendar-alt"></span><br>archive</a><br>
  1036.  
  1037. <a href="{text:link one url}"><span class="fas {select:link one icon}"></span><br>{text:link one name}</a>
  1038.  
  1039. <a href="{text:link two url}"><span class="fas {select:link two icon}"></span><br>{text:link two name}</a>
  1040.  
  1041. <BR>
  1042.  
  1043. {block:ifextralinks}
  1044. <a href="{text:link three url}"><span class="fas {select:link three icon}"></span><br>{text:link three name}</a>
  1045.  
  1046. <a href="{text:link four url}"><span class="fas {select:link four icon}"></span><br>{text:link four name}</a>
  1047. {/block:ifextralinks}
  1048.  
  1049. {block:ifsocialmedialinks}
  1050. <a href="{text:social media link one url}"><span class="fab {select:sm link one icon}"></span><br>{text:social media link one name}</a>
  1051.  
  1052. <a href="{text:social media link two url}"><span class="fab {select:sm link two icon}"></span><br>{text:social media link two name}</a>
  1053. {/block:ifsocialmedialinks}
  1054. </div>
  1055.  
  1056. </div>
  1057.  
  1058.  
  1059. {block:SearchPage}
  1060. <div class="results">{SearchResultCount} result(s) for "{SearchQuery}"</div>
  1061. <div class="return-to-blog"><a href="http://wizardhut.tumblr.com/">Go back to the posts</a></div>
  1062. {/block:SearchPage}
  1063.  
  1064. {block:NoSearchResults}
  1065. <div class="no_results">
  1066. <span class="far fa-frown"></span><br>
  1067. Sorry, nothing here.
  1068. <p>
  1069. <span style="font-weight:700;">"{SearchQuery}"</span> turned up no results.
  1070.  
  1071. </p>
  1072. <br>
  1073. <p><a href="/">Go back to the posts</a>
  1074. </div>
  1075. {/block:NoSearchResults}
  1076.  
  1077.  
  1078.  
  1079. {block:Posts}
  1080. <article id="p-{PostType}" class="post">
  1081.  
  1082.  
  1083. {block:PermalinkPage}
  1084. {block:PostNotes}
  1085. <div class="post_notes">
  1086. {PostNotes-16}
  1087. </div>
  1088. {/block:PostNotes}
  1089.  
  1090. <div class="permalink_page_links">
  1091. <a href="{ReblogURL}"><span class="fas fa-sync"></span> <div class="perma_reblog">Reblog this post</div></a>
  1092.  
  1093. <a href="/"><span class="far fa-clock"></span> <div class="perma_date">This was posted {TimeAgo}</div></a>
  1094.  
  1095. <a href="http://{name}.tumblr.com/"><span class="fas fa-arrow-left"></span> <div class="perma_back">Return to the posts</div></a>
  1096. </div>
  1097. {/block:PermalinkPage}
  1098.  
  1099.  
  1100. <div class="reblog_link">
  1101. <a href="{ReblogURL}"><i class="fas fa-retweet"></i></a>
  1102. </div>
  1103.  
  1104. <div class="permalink_link">
  1105. <a href="{Permalink}"><i class="fas fa-link"></i></a>
  1106. </div>
  1107.  
  1108. {block:RebloggedFrom}
  1109. <div class="reblogged_from">
  1110. {Name} <i class="fas fa-retweet"></i> {ReblogParentName}
  1111. </div>
  1112. {/block:RebloggedFrom}
  1113.  
  1114. {block:NotReblog}
  1115. <div class="not_reblogged">
  1116. {Name}
  1117. </div>
  1118. {/block:NotReblog}
  1119.  
  1120. {block:Quote}
  1121. <div class="quote">{Quote}</div>
  1122. <div class="source">— {Source}</div>
  1123. {/block:Quote}
  1124.  
  1125. {block:Photo}
  1126. <img src="{PhotoURL-500}">
  1127. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1128. {/block:Photo}
  1129.  
  1130. {block:Text}
  1131. {block:Title}<h3>{Title}</h3>{/block:Title}
  1132. <div class="caption">{Body}</div>
  1133. {/block:Text}
  1134.  
  1135. {block:Photoset}
  1136. {Photoset-500}
  1137. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1138. {/block:Photoset}
  1139.  
  1140. {block:Video}
  1141. {Video-500}
  1142. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1143. {/block:Video}
  1144.  
  1145. {block:Audio}
  1146. {AudioEmbed-500}
  1147. {/block:Audio}
  1148.  
  1149. <div class="postinfo">
  1150. {DayOfMonthWithZero} {Month} {Year} at {12Hour}:{Minutes} {CapitalAMPM}
  1151. <div class="postinfo_notes">
  1152. {block:HomePage}
  1153. {block:NoteCount}
  1154. {NoteCountWithLabel}
  1155. {/block:notecount}
  1156. {/block:homepage}
  1157. </div>
  1158. </div>
  1159.  
  1160. {block:HasTags}
  1161. <div class="tags">
  1162. {block:Tags}
  1163. <a href="{TagURL}"># {Tag}</a>&nbsp;
  1164. {/block:Tags}
  1165. </div>
  1166. {/block:HasTags}
  1167.  
  1168. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}{block:RebloggedFrom}<!-- {ReblogParentName} -->{/block:RebloggedFrom}
  1169.  
  1170. </article>
  1171. {/block:posts}
  1172.  
  1173. {block:Pagination}
  1174.  
  1175. <div class="pagination">
  1176.  
  1177. {block:NextPage}
  1178. <div class="pagination_next">
  1179. <a href="{NextPage}">Next</a>
  1180. </div>
  1181. {/block:NextPage}
  1182.  
  1183. {block:PreviousPage}
  1184. <div class="pagination_previous">
  1185. <a href="{PreviousPage}">Previous</a>
  1186. </div>
  1187. {/block:PreviousPage}
  1188.  
  1189. </div>
  1190.  
  1191. {/block:Pagination}
  1192.  
  1193. <!--- back to top button --->
  1194.  
  1195. <a id="top" title="Back to top" href="#"><span class="fas fa-arrow-circle-up"></span></a>
  1196.  
  1197.  
  1198. <script>
  1199. $(window).scroll(function() {
  1200. var height = $(window).scrollTop();
  1201. if (height > 100) {
  1202. $('#top').fadeIn();
  1203. } else {
  1204. $('#top').fadeOut();
  1205. }
  1206. });
  1207. $(document).ready(function() {
  1208. $("#top").click(function(event) {
  1209. event.preventDefault();
  1210. $("html, body").animate({ scrollTop: 0 }, "slow");
  1211. return false;
  1212. });
  1213.  
  1214. });
  1215. </script>
  1216.  
  1217. </body>
  1218. </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!