API tools faq
paste
Advertisement
wizardhut

TARO

wizardhut
Oct 5th, 2018
1,031
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4.  
  5. <!--
  6.  
  7. Theme 05 - Taro
  8. wizardhut @ tumblr
  9.  
  10. Credits:
  11.  
  12. - Honeybee icon font (https://themehive.co / https://honeybee.themehive.co)
  13. - Slide-in nav menu (https://www.w3schools.com)
  14. - Un-nested captions (https://neothm.com and https://magnusthemes.tumblr.com)
  15. - Remove "via" and "source" from captions (http://clcrk-tutorials.tumblr.com)
  16. - Styled tumblr controls (https://cyantists.tumblr.com)
  17.  
  18. -->
  19.  
  20. <meta name="color:Accent" content="#D5F645">
  21. <meta name="color:Gradient 1" content="/">
  22. <meta name="color:Gradient 2" content="/">
  23.  
  24. <meta name="if:Post Hover Effect" content="1">
  25. <meta name="if:Post Shadow" content="0">
  26. <meta name="if:Show Tags" content="1">
  27.  
  28. <meta name="select:Font" content="karla" title="Karla (default)">
  29. <meta name="select:Font" content="roboto mono" title="Roboto Mono">
  30. <meta name="select:Font" content="raleway" title="Raleway">
  31. <meta name="select:Font" content="roboto slab" title="Roboto Slab">
  32. <meta name="select:Font" content="poppins" title="Poppins">
  33. <meta name="select:Font" content="arial" title="Arial">
  34. <meta name="select:Font" content="rubik" title="Rubik">
  35. <meta name="select:Font" content="kosugi maru" title="Kosugi Maru">
  36. <meta name="select:Font" content="Roboto" title="Roboto">
  37. <meta name="select:Font" content="lora" title="Lora">
  38.  
  39. <meta name="text:Extra Link 1" content="one">
  40. <meta name="text:Extra Link 1 URL" content="/">
  41. <meta name="text:Extra Link 2" content="two">
  42. <meta name="text:Extra Link 2 URL" content="/">
  43. <meta name="text:Extra Link 3" content="three">
  44. <meta name="text:Extra Link 3 URL" content="/">
  45. <meta name="text:Extra Link 4" content="four">
  46. <meta name="text:Extra Link 4 URL" content="/">
  47. <meta name="text:Extra Link 5" content="five">
  48. <meta name="text:Extra Link 5 URL" content="/">
  49.  
  50.  
  51. <!-- google fonts -->
  52. <link href='https://fonts.googleapis.com/css?family=Karla:400,700|Roboto+Mono:400,700|Raleway:400,700|Roboto+Slab:400,700|Poppins:400,700|Rubik:400,700|Barlow:400,700|Noto+Serif:400,400i,700,700i|Kosugi+Maru|Roboto:400,400i,700,700i|Lora:400,400i,700,700i' rel='stylesheet' type='text/css'>
  53.  
  54.  
  55.  
  56. <!-- icon fonts -->
  57. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  58. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  59.  
  60.  
  61.  
  62. <!-- audio player styling -->
  63. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  64.  
  65.  
  66. <!-- smooth scroll -->
  67. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  68.  
  69.  
  70.  
  71. <!-- un-nest captions -->
  72. <script src="http://static.tumblr.com/p0knose/8Hbocatf1/unnest.min.js" type="text/javascript"></script>
  73.  
  74. <script type="text/javascript">
  75. $(document).ready(function(){
  76. $("article").unNest({
  77. yourCaption:".caption",
  78. newCaptionUsername:true,
  79. tumblrAvatars:true,
  80. usernameColon:false
  81. });
  82. });
  83. </script>
  84.  
  85.  
  86.  
  87. <style type="text/css">
  88.  
  89.  
  90.  
  91. /* ---------------------------------------------------------------- Basics */
  92.  
  93.  
  94. body {
  95. font-family:{select:font};
  96. background:#f5f5f5;
  97. }
  98.  
  99.  
  100. a {
  101. color:{color:accent};
  102. border-bottom:3px solid {color:accent};
  103. text-decoration:none;
  104. padding-left:2px;
  105. padding-right:2px;
  106. font-weight:700;
  107. transition:.5s;
  108. }
  109.  
  110.  
  111. a:hover {
  112. color:#fff;
  113. background:#222;
  114. transition:.5s;
  115. border-bottom:3px solid #222;
  116. border-radius:3px;
  117. }
  118.  
  119.  
  120. ::selection {
  121. background:{color:accent};
  122. color:#222;
  123. }
  124.  
  125.  
  126. #s-m-t-tooltip {
  127. z-index:9999999999999999999;
  128. background:#222;
  129. transition: 0.2s;
  130. padding:5px;
  131. letter-spacing:0.5px;
  132. font-size:11px;
  133. max-width:180px;
  134. border-radius:3px;
  135. margin-top:-20px;
  136. color:#fff;
  137. text-transform:none;
  138. font-style:italic;
  139. margin-left:20px;
  140. font-weight:700;
  141. filter: drop-shadow(rgba(0,0,0, 0.1) 0 2px 5px);
  142. }
  143.  
  144.  
  145. ul, li {
  146. text-align:left;
  147. }
  148.  
  149.  
  150. /* ----------------------------------------------------------------- Posts */
  151.  
  152.  
  153. article {
  154. padding:40px;
  155. background:{color:Content};
  156. width:500px;
  157. margin:50px auto;
  158. background:#fff;
  159. margin-bottom:50px;
  160. border-radius:5px;
  161. margin-bottom:200px;
  162. margin-top:150px;
  163. transition:.4s;
  164. padding-bottom:40px;
  165. {block:ifpostshadow}
  166. box-shadow: 0px 15px 43px -9px rgba(0,0,0,0.1);
  167. {/block:ifpostshadow}
  168. }
  169.  
  170.  
  171.  
  172. article:hover {
  173. {block:ifposthovereffect}
  174. -webkit-transform: translateY(-8px);
  175. transition:.4s;
  176. box-shadow: 0px 15px 43px -9px rgba(0,0,0,0.1);
  177. {/block:ifposthovereffect}
  178. }
  179.  
  180.  
  181.  
  182. /* -------------------------------------------------------------- Captions */
  183.  
  184.  
  185. .caption {
  186. margin-top:-10px;
  187. margin-left:-10px;
  188. }
  189.  
  190. .caption img {
  191. max-width:500px;
  192. margin-top:10px;
  193.  
  194. }
  195.  
  196. /* reblogs */
  197. blockquote.tumblr_parent {
  198. margin-left:10px;
  199. background:#fff;
  200. border-radius:5px;
  201. padding:20px;
  202. width:460px;
  203. max-width:460px;
  204. word-break:break-word;
  205. color:#222;
  206. padding-left:20px;
  207. margin-top:20px;
  208. border:1px solid rgba(0,0,0,0.05);
  209. }
  210.  
  211.  
  212.  
  213. /* non-reblogged original post */
  214. .originalpost blockquote.tumblr_parent {
  215. padding:20px;
  216. width:480px;
  217. margin:0;
  218. color:#222;
  219. border:none;
  220. background:transparent!important;
  221. padding-left:0px;
  222. font-size:12px;
  223. text-align:center;
  224. }
  225.  
  226.  
  227. /* non-reblogged original post */
  228. .caption.originalpost {
  229. margin:-5px 0;
  230. line-height:30px;
  231. background:transparent!important;
  232. margin-top:10px;
  233. border:none;
  234. font-size:11px;
  235. }
  236.  
  237.  
  238.  
  239. /* reblogs; tumblr user icons */
  240. img.tumblr_avatar {
  241. margin-right:10px;
  242. margin-top:2px!important;
  243. height:25px;
  244. width:25px;
  245. margin-left:0px;
  246. float:left;
  247. border-radius:100%!important;
  248. vertical-align:-20%!important;
  249. color:#fff;
  250. }
  251.  
  252.  
  253.  
  254. /* reblogs; tumblr user names */
  255. .caption a.tumblr_blog {
  256. font-size:11px;
  257. line-height:20px;
  258. color:{color:accent};
  259. letter-spacing:1px;
  260. display:block;
  261. padding:5px;
  262. padding-bottom:10px;
  263. text-decoration:none;
  264. font-weight:700;
  265. background:transparent;
  266. transition:.6s;
  267. border:none;
  268. }
  269.  
  270.  
  271. /* reblogs; tumblr user names hover */
  272. .caption a:hover.tumblr_blog {
  273. color:#222;
  274. transition:.6s;
  275. }
  276.  
  277.  
  278.  
  279.  
  280. /* ---------------------------------------------------------- Posts: PHOTO */
  281.  
  282.  
  283.  
  284. article img {
  285. width:500px;
  286.  
  287. }
  288.  
  289. article .caption img {
  290. border-radius:5px;
  291. max-width:100%;
  292.  
  293. }
  294.  
  295. article img.photo {
  296.  
  297. border-radius:5px;
  298.  
  299. }
  300.  
  301. .photoset {
  302. width:500px!important;
  303. overflow:hidden;
  304. border-radius:5px;
  305. margin-bottom:20px;
  306. }
  307.  
  308.  
  309. article .video {
  310. margin-top:10px;
  311. width:500px!important;
  312. border-radius:5px!important;
  313. }
  314.  
  315.  
  316.  
  317. /* ---------------------------------------------------------- Posts: AUDIO */
  318.  
  319. iframe.tumblr_audio_player {
  320. height:85px!important
  321. }
  322.  
  323.  
  324.  
  325. /* ---------------------------------------------------------- Posts: QUOTE */
  326.  
  327.  
  328. .quote {
  329. font-size:18px;
  330. font-weight:700;
  331. width:500px!important;
  332. color:#222;
  333. }
  334.  
  335.  
  336. .source {
  337. margin-top:20px;
  338. width:500px!important;
  339. text-align:right;
  340. color:#222;
  341. }
  342.  
  343.  
  344. .th-quote-up {
  345. margin-right:20px;
  346. margin-top:-5px;
  347. font-size:33px;
  348. float:left;
  349. color:{color:accent};
  350. }
  351.  
  352.  
  353.  
  354. /* text post */
  355.  
  356. .text-title {
  357. font-size:25px;
  358. font-weight:700;
  359. text-align:center;
  360. color:#222;
  361. }
  362.  
  363.  
  364.  
  365. /* ----------------------------------------------------------- Posts: CHAT */
  366.  
  367.  
  368. .line {
  369. background-image: linear-gradient(130deg, {color:Gradient 1} 20%, {color:Gradient 2} 100%);
  370. margin-bottom:10px;
  371. padding:10px;
  372. border-radius:5px;
  373. text-align:center;
  374. border-top-left-radius:0px;
  375. border-top-right-radius:0px;
  376. padding-bottom:20px;
  377. }
  378.  
  379.  
  380. .label {
  381. background-image: linear-gradient(130deg, {color:Gradient 1} 20%, {color:Gradient 2} 100%);
  382. font-style:italic;
  383. font-weight:700;
  384. text-align:center;
  385. padding:10px;
  386. border-radius:5px;
  387. border-bottom-left-radius:0px;
  388. border-bottom-right-radius:0px;
  389. }
  390.  
  391.  
  392.  
  393.  
  394. /* ----------------------------------------------------------- Posts: LINK */
  395.  
  396.  
  397. .link {
  398. }
  399.  
  400.  
  401. .link a {
  402. background-image: linear-gradient(130deg, {color:Gradient 1} 20%, {color:Gradient 2} 100%);
  403. width:480px;
  404. padding:10px;
  405. display:inline-block;
  406. border-radius:40px;
  407. border:none;
  408. color:#222;
  409. text-align:center;
  410. letter-spacing:0.5px;
  411. font-weight:700;
  412. }
  413.  
  414.  
  415.  
  416. .link a:hover {
  417. transform:scale(1.05);
  418. background-image: linear-gradient(130deg, {color:Gradient 1} 20%, {color:Gradient 2} 100%);
  419. }
  420.  
  421.  
  422. .link-desc {
  423. text-align:center;
  424. line-height:20px;
  425. margin-top:20px;
  426. }
  427.  
  428.  
  429.  
  430. /* ------------------------------------------------------------ Posts: ASK */
  431.  
  432.  
  433. .question {
  434. padding:20px;
  435. background-image: linear-gradient(130deg, {color:Gradient 1} 20%, {color:Gradient 2} 100%);
  436. border-radius:5px;
  437. text-align:center;
  438. font-size:12px;
  439.  
  440. }
  441.  
  442.  
  443. .question a {
  444. border:none;
  445. border-radius:5px;
  446. color:#222;
  447. }
  448.  
  449.  
  450. .question a:hover {
  451. background:rgba(0,0,0,0.1);
  452. }
  453.  
  454.  
  455. .question img {
  456. max-width:24px;
  457. }
  458.  
  459.  
  460. .answer {
  461. text-align:center;
  462. padding:20px;
  463. }
  464.  
  465.  
  466. /* --------------------------------------------------------------- Sidebar */
  467.  
  468.  
  469. .sidebar {
  470. height:100%;
  471. background:#fff;
  472. position:fixed;
  473. width:400px;
  474. overflow:hidden;
  475. top:0;
  476. left:0;
  477. }
  478.  
  479.  
  480. .title {
  481. background:#fff;
  482. text-align:center;
  483. font-size:20px;
  484. text-transform:capitalize;
  485. padding:28px;
  486. font-weight:700;
  487. letter-spacing:2px;
  488. z-index:1;
  489. margin-top:150px;
  490. color:#222;
  491. transition-duration:.6s;
  492. }
  493.  
  494.  
  495.  
  496. .nav {
  497. text-align:center;
  498. }
  499.  
  500.  
  501. .nav a {
  502. text-decoration:none;
  503. color:#222;
  504. text-transform:capitalize;
  505. display:block;
  506. font-weight:700;
  507. padding:10px;
  508. padding-top:30px;
  509. padding-bottom:30px;
  510. transition:.5s;
  511. letter-spacing:1px;
  512. font-size:12px;
  513. background:none;
  514. border-radius:0px;
  515. border:none;
  516. }
  517.  
  518.  
  519. .nav a:hover {
  520. transition:.5s;
  521. color:{color:accent};
  522. transform:scale(1.1);
  523. }
  524.  
  525.  
  526.  
  527. .th-house-1-o, .th-chat-bubbles, .th-calendar-1-o, .th-box-2-o, .th-plus-3-o {
  528. font-size:25px;
  529. margin-bottom:10px;
  530. letter-spacing:0px;
  531. }
  532.  
  533.  
  534.  
  535.  
  536. /* ----------------------------------------------------- Slide-in nav menu */
  537.  
  538.  
  539.  
  540. .overlay {
  541. height: 100%;
  542. width: 0;
  543. position: fixed;
  544. z-index: 1;
  545. top: 0;
  546. left: 0;
  547. background-color: #08AEEA;
  548. background-image: linear-gradient(130deg, {color:Gradient 1} 20%, {color:Gradient 2} 100%);
  549. overflow-x: hidden;
  550. transition: 0.6s;
  551. }
  552.  
  553. .overlay-content {
  554. position: relative;
  555. top: 15%;
  556. width: 100%;
  557. text-align: left;
  558. margin-top: 30px;
  559. }
  560.  
  561. .overlay a {
  562. padding: 20px;
  563. text-decoration: none;
  564. font-size: 26px;
  565. color: #fff;
  566. display: block;
  567. text-align:center;
  568. border-left:1px solid transparent;
  569. border-bottom:none;
  570. transition: 0.3s;
  571. text-decoration-color: rgba(255,255,255,0);
  572. }
  573.  
  574. .overlay a:hover, .overlay a:focus {
  575. background:none;
  576. font-style:italic;
  577. transform:scale(1.4);
  578. text-decoration:underline;
  579. text-decoration-color: rgba(255,255,255,0.5);
  580. }
  581.  
  582. .overlay .closebtn {
  583. position: absolute;
  584. top: 0px;
  585. right: 25px;
  586. font-size: 60px;
  587. text-align:right;
  588. color:rgba(255,255,255,0.8);
  589. }
  590.  
  591.  
  592. .overlay .closebtn:hover {
  593. padding-left:20px;
  594. background:none;
  595. color:rgba(255,255,255,0.5);
  596. transform:scale(1.5);
  597. text-decoration:none;
  598. }
  599.  
  600.  
  601.  
  602. .th-cancel-o {
  603. font-size: 30px;
  604. }
  605.  
  606.  
  607. .desc-header {
  608. font-size:40px;
  609. padding:20px;
  610. font-weight:700;
  611. text-align:center;
  612. margin-bottom:30px;
  613. color:#fff;
  614. }
  615.  
  616.  
  617.  
  618. .overlay-link-accent {
  619. position:absolute;
  620. margin-left:840px;
  621. opacity:0;
  622. transition: 0.3s;
  623. }
  624.  
  625.  
  626. .th-backward-arrow {
  627. color:rgba(255,255,255,0.5);
  628. }
  629.  
  630.  
  631.  
  632. .overlay a:hover .overlay-link-accent {
  633. opacity:1;
  634. transition: 0.3s;
  635. margin-left:780px;
  636. }
  637.  
  638.  
  639.  
  640. .overlay-link-accent2 {
  641. position:absolute;
  642. margin-left:940px;
  643. opacity:0;
  644. transition: 0.3s;
  645. margin-top:-30px;
  646. }
  647.  
  648.  
  649. .th-skip-track {
  650. color:rgba(255,255,255,0.5);
  651. }
  652.  
  653.  
  654.  
  655. .overlay a:hover .overlay-link-accent2 {
  656. opacity:1;
  657. transition: 0.3s;
  658. margin-left:1000px;
  659. }
  660.  
  661.  
  662.  
  663.  
  664.  
  665.  
  666. /* ------------------------------------------------------------- Post info */
  667.  
  668.  
  669. .postinfo {
  670. margin-left:-40px;
  671. margin-top:-40px;
  672. margin-bottom:40px;
  673. padding:30px;
  674. background:#fff;
  675. width:520px;
  676. font-size:20px;
  677. display:block;
  678. line-height:20px;
  679. border-radius:5px;
  680. border-bottom-left-radius:0px;
  681. border-bottom-right-radius:0px;
  682. border-bottom:1px solid rgba(0,0,0,0.05);
  683. text-align:center;
  684. color:#222;
  685. }
  686.  
  687.  
  688. .postinfo a {
  689. border:none;
  690. color:#222;
  691. padding:3px;
  692. padding-right:5px;
  693. }
  694.  
  695.  
  696.  
  697. .postinfo a:hover {
  698. background:none;
  699. }
  700.  
  701.  
  702. .th-reload-arrow {
  703. margin-right:20px;
  704. transition:.4s;
  705. }
  706.  
  707.  
  708. .th-reload-arrow:hover {
  709. transition:.4s;
  710. -webkit-transform: translateY(-3px);
  711. color:{color:accent};
  712. }
  713.  
  714.  
  715. .th-bookmark-1-o {
  716. transition:.4s;
  717. }
  718.  
  719.  
  720. .th-bookmark-1-o:hover {
  721. transition:.4s;
  722. -webkit-transform: translateY(-3px);
  723. color:{color:accent};
  724. }
  725.  
  726. .th-clock-o {
  727. margin-right:22px;
  728. transition:.4s;
  729. }
  730.  
  731.  
  732. .th-clock-o:hover {
  733. color:{color:accent};
  734. transition:.4s;
  735. -webkit-transform: translateY(-3px);
  736. }
  737.  
  738.  
  739.  
  740. .th-notebook-o {
  741. margin-right:22px;
  742. transition:.4s;
  743. }
  744.  
  745.  
  746. .th-notebook-o:hover {
  747. color:{color:accent};
  748. transition:.4s;
  749. -webkit-transform: translateY(-3px);
  750. }
  751.  
  752.  
  753.  
  754. /* -------------------------------------------- Description and pagination */
  755.  
  756.  
  757. .bottom {
  758. bottom:0;
  759. padding:40px;
  760. background:{color:Content};
  761. width:500px;
  762. margin:50px auto;
  763. background:#fff;
  764. {block:ifpostshadow}
  765. box-shadow: 0px 15px 43px -9px rgba(0,0,0,0.1);
  766. {/block:ifpostshadow}
  767. border-radius:5px;
  768. color:#222;
  769. }
  770.  
  771.  
  772.  
  773. .desc {
  774. line-height:20px;
  775. text-align:center;
  776. color:#222;
  777. }
  778.  
  779.  
  780. .desc img {
  781. float:right;
  782. border-radius:100%;
  783. margin-right:5px;
  784. vertical-align:-30%;
  785. }
  786.  
  787.  
  788.  
  789. .pagination {
  790. margin-top:30px;
  791. font-size:15px;
  792. border-top:1px solid rgba(0,0,0,0.05);
  793. padding-top:20px;
  794. }
  795.  
  796.  
  797. .pagination a {
  798. border:none;
  799. }
  800.  
  801.  
  802. .pagination a:hover {
  803. background:none;
  804. color:{color:accent};
  805. }
  806.  
  807.  
  808.  
  809. .nextpage {
  810. float:right;
  811. padding-right:30px;
  812. }
  813.  
  814.  
  815. .th-skip-track {
  816. color:#222;
  817. transition:.5s;
  818. }
  819.  
  820.  
  821. .th-skip-track:hover {
  822. color:{color:accent};
  823. transition:.5s;
  824. }
  825.  
  826.  
  827. .previouspage {
  828. padding-left:30px;
  829. }
  830.  
  831.  
  832.  
  833. .th-backward-arrow {
  834. color:#222;
  835. transition:.5s;
  836. }
  837.  
  838.  
  839. .th-backward-arrow:hover {
  840. color:{color:accent};
  841. transition:.5s;
  842. }
  843.  
  844.  
  845.  
  846. /* ---------------------------------------------------------------- Credit */
  847.  
  848.  
  849. .credit {
  850. bottom:0;
  851. padding:20px;
  852. background:{color:Content};
  853. width:530px;
  854. margin:50px auto;
  855. background:none;
  856. color:#222;
  857. text-align:center;
  858. }
  859.  
  860.  
  861.  
  862. .th-code {
  863. margin-right:10px;
  864. }
  865.  
  866.  
  867.  
  868. .credit a {
  869. display:inline;
  870. color:#222;
  871. border:none;
  872. }
  873.  
  874.  
  875. .credit a:hover {
  876. color:#fff;
  877. }
  878.  
  879.  
  880. /* ------------------------------------------------------------- Permalink */
  881.  
  882.  
  883. .permalink {
  884. background-color: #08AEEA;
  885. background-image: linear-gradient(-130deg, {color:Gradient 1} 20%, {color:Gradient 2} 100%);
  886. padding:40px;
  887. width:500px;
  888. font-size:13px;
  889. line-height:20px;
  890. text-align:center;
  891. border-radius:5px;
  892. margin:50px auto;
  893. margin-top:-150px;
  894. height:200px;
  895. overflow:auto;
  896. color:#fff;
  897. }
  898.  
  899.  
  900. .permalink::-webkit-scrollbar {
  901. display:none;
  902. }
  903.  
  904.  
  905.  
  906. .permalink a {
  907. text-decoration:underline;
  908. text-decoration-color: rgba(255,255,255,0.5);
  909. border:none;
  910. color:#fff;
  911. }
  912.  
  913.  
  914. .permalink a:hover {
  915. background:rgba(255,255,255,0.3);
  916. text-decoration:none;
  917. }
  918.  
  919.  
  920. article.notes img {
  921. max-width:16px;
  922. }
  923.  
  924.  
  925. ol.notes {
  926. padding:0;
  927. list-style-type:none;
  928. margin:-1px;
  929. font-size:13px;
  930. color:#fff;
  931.  
  932. }
  933.  
  934. ol.notes li.notes {
  935. text-align:left;
  936. padding:8px 10px;
  937. line-height:18px;
  938. color:#fff;
  939.  
  940. }
  941.  
  942. .notes img {
  943. float:left;
  944. border-radius:100%;
  945. margin-right:10px;
  946.  
  947. }
  948.  
  949.  
  950.  
  951. /* ------------------------------------------------------------------ Tags */
  952.  
  953.  
  954. .tags {
  955. width:520px;
  956. border-radius:5px;
  957. background:#fff;
  958. margin-top:40px;
  959. border-top:1px solid rgba(0,0,0,0.05);
  960. border-top-left-radius:0px;
  961. border-top-right-radius:0px;
  962. padding:30px;
  963. margin-left:-40px;
  964. text-align:center;
  965. padding-bottom:0px;
  966. padding-top:40px;
  967. line-height:25px;
  968. }
  969.  
  970. .tags a {
  971. color:#222;
  972. border:none;
  973. padding:3px;
  974. }
  975.  
  976.  
  977.  
  978. .tags a:hover {
  979. background:none;
  980. color:{color:accent};
  981. }
  982.  
  983.  
  984.  
  985. .th-folder-16-o {
  986. font-size:15px;
  987. margin-left:-5px;
  988. vertical-align:-10%;
  989. float:left;
  990. }
  991.  
  992.  
  993.  
  994. /* ------------------------------------------------------- Tumblr controls */
  995.  
  996.  
  997. iframe.tmblr-iframe {
  998. z-index:99999999999999!important;
  999. top:-2px!important;
  1000. right:0!important;
  1001. opacity:0;
  1002. padding-right:38px;
  1003. filter:invert(1) contrast(150%);
  1004. -webkit-filter:invert(1) contrast(150%);
  1005. -o-filter:invert(1) contrast(150%);
  1006. -moz-filter:invert(1) contrast(150%);
  1007. -ms-filter:invert(1) contrast(150%);
  1008. transform:scale(1);
  1009. transform-origin:100% 0;
  1010. -webkit-transform:scale(1);
  1011. -webkit-transform-origin:100% 0;
  1012. -o-transform:scale(1);
  1013. -o-transform-origin:100% 0;
  1014. -moz-transform:scale(1);
  1015. -moz-transform-origin:100% 0;
  1016. -ms-transform:scale(1);
  1017. -ms-transform-origin:100% 0;
  1018. transition:.6s;
  1019. }
  1020.  
  1021. iframe.tmblr-iframe:hover {
  1022. opacity:1!important;
  1023. transition:.6s;
  1024. }
  1025.  
  1026.  
  1027.  
  1028.  
  1029. /* ---------------------------------------------------- Back-to-top button */
  1030.  
  1031.  
  1032. #top {
  1033. width: 40px;
  1034. line-height: 40px;
  1035. overflow: hidden;
  1036. z-index: 999;
  1037. display: none;
  1038. position: fixed;
  1039. bottom: 20px;
  1040. right:0;
  1041. color: #888;
  1042. text-align: center;
  1043. font-size: 30px;
  1044. text-decoration: none;
  1045. padding-right:20px;
  1046. border:none;
  1047. }
  1048.  
  1049.  
  1050. #top:hover {
  1051. color: {color:accent};
  1052. background:none;
  1053. }
  1054.  
  1055.  
  1056. #top:hover .th-up-arrow {
  1057. color: {color:accent};
  1058. transition:.6s;
  1059. }
  1060.  
  1061.  
  1062. .th-up-arrow {
  1063. color:#444;
  1064. transition:.6s;
  1065. }
  1066.  
  1067.  
  1068.  
  1069. </style>
  1070. </head>
  1071.  
  1072.  
  1073.  
  1074. <body>
  1075.  
  1076. <div id="myNav" class="overlay">
  1077. <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><span class="th th-cancel-o"></span></a>
  1078. <div class="overlay-content">
  1079. <div class="desc-header">navigation</div>
  1080.  
  1081. <a href="{text:extra link 1 url}">{text:extra link 1}</a>
  1082. <a href="{text:extra link 2 url}">{text:extra link 2}</a>
  1083. <a href="{text:extra link 3 url}">{text:extra link 3}</a>
  1084. <a href="{text:extra link 4 url}">{text:extra link 4}</a>
  1085. <a href="{text:extra link 5 url}">{text:extra link 5}</a>
  1086.  
  1087. </div>
  1088. </div>
  1089.  
  1090.  
  1091.  
  1092. <!--- begin sidebar --->
  1093. <div class="sidebar">
  1094.  
  1095. <div class="title">
  1096. {title}
  1097. </div>
  1098.  
  1099. <div class="nav">
  1100.  
  1101. <a href="/"><span class="th th-house-1-o"></span><br>home</a>
  1102. <a href="/ask"><span class="th th-chat-bubbles"></span><br>contact</a>
  1103. <a href="/archive"><span class="th th-calendar-1-o"></span><br>grid</a>
  1104. <a href="/submit"><span class="th th-box-2-o"></span><br>submit</a>
  1105. <br><br>
  1106. <span style="font-size:12px;cursor:pointer;color:#222;letter-spacing:1px;font-weight:700;" onclick="openNav()"><span class="th th-plus-3-o"></span><br>More</span>
  1107.  
  1108. </div> <!---end of nav div--->
  1109.  
  1110. </div>
  1111.  
  1112.  
  1113.  
  1114. <!--- end sidebar --->
  1115.  
  1116.  
  1117. {block:Posts}
  1118. <article id="p-{PostType}" class="post">
  1119.  
  1120.  
  1121.  
  1122. <div class="postinfo">
  1123.  
  1124. <span class="th th-clock-o" title="{timeago}"></span>
  1125.  
  1126. {block:HomePage}
  1127. {block:NoteCount}
  1128. <span class="th th-notebook-o" title="{NoteCountWithLabel}"></span>
  1129. {/block:notecount}
  1130. {/block:homepage}
  1131.  
  1132. <a href="{reblogurl}" title="reblog this"><span class="th th-reload-arrow"></span></a>
  1133.  
  1134. <a href="{permalink}" title="view permalink"><span class="th th-bookmark-1-o"></span></a>
  1135.  
  1136. </div>
  1137.  
  1138.  
  1139.  
  1140. {block:Text}
  1141. {block:Title}<div class="text-title">{title}</div>{/block:Title}
  1142. <div class="caption">{body}</div>
  1143. {/block:Text}
  1144.  
  1145.  
  1146. {block:Photo}
  1147. <img class="photo" src="{PhotoURL-HighRes}">{block:HighRes}</a>{/block:HighRes}
  1148. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1149. {/block:Photo}
  1150.  
  1151.  
  1152. {block:Photoset}
  1153. <div class="photoset">
  1154. {photoset-500}
  1155. </div>
  1156. {block:Caption}
  1157. <div class="caption">{Caption}</div>
  1158. {/block:Caption}
  1159. {/block:Photoset}
  1160.  
  1161.  
  1162. {block:Link}
  1163. <div class="link"><a href="{URL}" target="_blank">{name}</a></div>
  1164. {block:Description}
  1165. <div class="link-desc">{Description}</div>
  1166. {/block:Description}
  1167. {/block:Link}
  1168.  
  1169.  
  1170. {block:Quote}
  1171. <div class="quote"><span class="th th-quote-up"></span>{Quote}</div>
  1172. {block:Source}
  1173. <div class="source">― {Source}</div>
  1174. {/block:Source}
  1175. {/block:Quote}
  1176.  
  1177.  
  1178. {block:Chat}
  1179. {block:Title}<h1>{Title}</h1>{/block:Title}
  1180. {block:Lines}
  1181. {block:Label}<div class="label">{label}</div>{/block:Label}
  1182. <div class="line">
  1183. {Line}
  1184. </div>
  1185. {/block:Lines}
  1186. {/block:Chat}
  1187.  
  1188.  
  1189. {block:Audio}
  1190. {AudioEmbed-500}
  1191. {block:Caption}
  1192. <div class="caption">{Caption}</div>
  1193. {/block:Caption}
  1194. {/block:Audio}
  1195.  
  1196.  
  1197. {block:Video}
  1198. <div class="video">{Video-500}</div>
  1199. {block:Caption}
  1200. <div class="caption">{Caption}</div>
  1201. {/block:Caption}
  1202. {/block:Video}
  1203.  
  1204.  
  1205. {block:Answer}
  1206. <div class="question">
  1207. {Asker} sent<br><Br>
  1208. {Question}
  1209. </div>
  1210. <div class="answer">{Answer}</div>
  1211. {/block:Answer}
  1212.  
  1213.  
  1214.  
  1215. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}{block:RebloggedFrom}<!-- {ReblogParentName} -->{/block:RebloggedFrom}
  1216.  
  1217.  
  1218.  
  1219. {block:indexpage}
  1220. {block:ifshowtags}
  1221. {block:hastags}
  1222. <div class="tags">
  1223. {block:tags}
  1224. <a href="{tagurl}">#{tag}</a>
  1225. {/block:tags}
  1226. </div>
  1227. {/block:hastags}
  1228. {/block:ifshowtags}
  1229. {/block:indexpage}
  1230.  
  1231.  
  1232. </article>
  1233.  
  1234. {block:permalinkpage}
  1235. <div class="permalink">
  1236. {block:postnotes}
  1237. <div class="notes">
  1238. {postnotes}
  1239. </div>
  1240. {/block:postnotes}
  1241. </div>
  1242.  
  1243. {/block:permalinkpage}
  1244.  
  1245.  
  1246. {/block:Posts}
  1247.  
  1248.  
  1249.  
  1250. {block:indexpage}
  1251. <div class="bottom">
  1252.  
  1253. <div class="desc">{description}</div>
  1254.  
  1255. {block:pagination}
  1256. <div class="pagination">
  1257.  
  1258. <div class="nextpage">
  1259. {block:nextpage}
  1260. <a href="{nextpage}" title="next page"><span class="th th-skip-track"></span></a>
  1261. {/block:nextpage}
  1262. </div>
  1263.  
  1264.  
  1265. <div class="previouspage">
  1266. {block:previouspage}
  1267. <a href="{previouspage}" title="previous page"><span class="th th-backward-arrow"></span></a>
  1268. {/block:previouspage}
  1269. </div>
  1270.  
  1271. </div>
  1272. {/block:pagination}
  1273.  
  1274. </div>
  1275.  
  1276. {/block:indexpage}
  1277.  
  1278. <div class="credit"><a href="https://wizardhut.tumblr.com"><span class="th th-code"></span>theme</a></div>
  1279.  
  1280.  
  1281. <!--- audio player styling --->
  1282. <script>
  1283. $(document).ready(function() {
  1284. $('iframe.tumblr_audio_player').load( function() {
  1285. $('iframe.tumblr_audio_player').contents().find("head")
  1286. .append($("<link href='https://fonts.googleapis.com/css?family=Karla:400,700|Roboto+Mono:400,700|Raleway:400,700|Roboto+Slab:400,700|Poppins:400,700|Rubik:400,700|Barlow:400,700|Noto+Serif:400,400i,700,700i|Kosugi+Maru' rel='stylesheet' type='text/css'> <style type='text/css'> .audio-player{background: linear-gradient(130deg, {color:Gradient 1} 20%, {color:Gradient 2} 100%); color:#fff; font-family:{select:font};border-top-left-radius:5px;border-bottom-left-radius:5px;!important;font-size:10px!important;} </style>"));
  1287. });
  1288. });
  1289. </script>
  1290.  
  1291.  
  1292.  
  1293. <!--- back to top button --->
  1294.  
  1295. <a id="top" href="#"><span class="th th-up-arrow"></span></a>
  1296.  
  1297. <script>
  1298. $(window).scroll(function() {
  1299. var height = $(window).scrollTop();
  1300. if (height > 100) {
  1301. $('#top').fadeIn();
  1302. } else {
  1303. $('#top').fadeOut();
  1304. }
  1305. });
  1306. $(document).ready(function() {
  1307. $("#top").click(function(event) {
  1308. event.preventDefault();
  1309. $("html, body").animate({ scrollTop: 0 }, "slow");
  1310. return false;
  1311. });
  1312.  
  1313. });
  1314. </script>
  1315.  
  1316.  
  1317.  
  1318.  
  1319.  
  1320. <!-- nav menu script -->
  1321. <script>
  1322. function openNav() {
  1323. document.getElementById("myNav").style.width = "100%";
  1324. }
  1325.  
  1326. function closeNav() {
  1327. document.getElementById("myNav").style.width = "0%";
  1328. }
  1329. </script>
  1330.  
  1331.  
  1332.  
  1333. <!-- tooltip script -->
  1334. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1335.  
  1336. <script>
  1337. (function($){ $(document).ready(function(){ $("[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:0,attribute:"title"});});})(jQuery);</script>
  1338.  
  1339.  
  1340. </body>
  1341. </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!