API tools faq
paste
Advertisement
wizardhut

MENTHE

wizardhut
Sep 27th, 2018
599
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4.  
  5. <!---
  6.  
  7. Theme 04 - Menthe
  8. wizardhut @ tumblr
  9.  
  10.  
  11. Credits:
  12. Dynamic scroll-to-top button; https://html-online.com/
  13. Scroll progress bar; https://www.w3schools.com/
  14. Linearicons icon font; https://linearicons.com/
  15. Styled tumblr controls; https://cyantists.tumblr.com/
  16.  
  17. --->
  18.  
  19.  
  20. <meta name="image:Sidebar Icon" content="https://static.tumblr.com/737450ee9fdb7102bcd56d2afc0dfc9e/abhqbrn/Dqlpfohjs/tumblr_static_ey8yv2r0en4kkw80c04o8go0s.png">
  21.  
  22. <meta name="color:Background" content="#f5f5f5">
  23. <meta name="color:Links" content="#ffae35">
  24. <meta name="color:Sidebar" content="#FAD961">
  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:Search Box Text" content="#FAD961">
  29. <meta name="color:Post Text" content="#000">
  30.  
  31. <meta name="if:Scroll Progress Bar" content="1">
  32. <meta name="if:Rounded Borders" content="0">
  33. <meta name="if:Bolded Description" content="1">
  34. <meta name="if:Bolded Links" content="1">
  35.  
  36. <meta name="select:Font" content="karla" title="Karla (default)">
  37. <meta name="select:Font" content="roboto mono" title="Roboto Mono">
  38. <meta name="select:Font" content="barlow" title="Barlow">
  39. <meta name="select:Font" content="raleway" title="Raleway">
  40. <meta name="select:Font" content="arial" title="Arial">
  41. <meta name="select:Font" content="roboto slab" title="Roboto Slab">
  42.  
  43. <meta name="text:Link One Name" content="Link One">
  44. <meta name="text:Link One URL" content="/">
  45. <meta name="text:Link Two Name" content="Link Two">
  46. <meta name="text:Link Two URL" content="/">
  47. <meta name="text:Link Three Name" content="Link Three">
  48. <meta name="text:Link Three URL" content="/">
  49. <meta name="text:Link Four Name" content="Link Four">
  50. <meta name="text:Link Four URL" content="/">
  51.  
  52.  
  53. <!--- google fonts --->
  54. <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|Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
  55.  
  56.  
  57. <!--- icon font(s) --->
  58. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  59. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  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. <style type="text/css">
  71.  
  72.  
  73. body {
  74. background-color: {color:background};
  75. background-repeat:no-repeat;
  76. background-attachment:fixed;
  77. }
  78.  
  79.  
  80. a {
  81. color:{color:links};
  82. {block:ifboldedlinks}font-weight:700;{/block:ifboldedlinks}
  83. {block:ifnotboldedlinks}font-weight:400;{/block:ifnotboldedlinks}
  84. }
  85.  
  86.  
  87. a:hover {
  88. color:#000;
  89. text-decoration:line-through;
  90. }
  91.  
  92.  
  93. ::selection {
  94. background:{color:sidebar};
  95. color:#000;
  96. }
  97.  
  98.  
  99.  
  100. /* -------------------------------------------------------------- sidebar 1 */
  101.  
  102.  
  103. .sidebar {
  104. width:100px;
  105. padding:40px;
  106. height:100%;
  107. background:{color:sidebar};
  108. position:fixed;
  109. top:0;
  110. left:0;
  111. text-align:center;
  112. }
  113.  
  114.  
  115. .sidebar img {
  116. background:rgba(255,255,255,0.4);
  117. margin-top:-40px;
  118. padding:33px;
  119. padding-left:70px;
  120. padding-right:80px;
  121. margin-left:-40px;
  122. height:32px;
  123. width:32px;
  124. }
  125.  
  126.  
  127. .credit {
  128. position:fixed;
  129. bottom:0;
  130. right:0;
  131. padding:20px;
  132. text-align:center;
  133. font-family:{select:font};
  134. font-weight:400;
  135. font-size:10px;
  136. letter-spacing:1px;
  137. text-transform:lowercase;
  138. }
  139.  
  140.  
  141.  
  142. .credit a {
  143. color:rgba(0,0,0,0.5);
  144. text-decoration:none;
  145. font-weight:700;
  146. }
  147.  
  148.  
  149.  
  150. .credit a:hover {
  151. color:#000;
  152. text-decoration:line-through;
  153. }
  154.  
  155.  
  156. .th-code {
  157. font-size:12px;
  158. vertical-align:-15%;
  159. margin-right:5px;
  160. color:rgba(0,0,0,0.5);
  161. }
  162.  
  163. /* -------------------------------------------------------------- sidebar 2 */
  164.  
  165.  
  166. .sidebar2 {
  167. width:450px;
  168. padding:20px;
  169. height:100%;
  170. position:fixed;
  171. margin-left:170px;
  172. top:0;
  173. background:#fff;
  174. }
  175.  
  176.  
  177.  
  178. .title {
  179. font-weight:700;
  180. text-transform:capitalize;
  181. font-size:30px;
  182. font-family:{select:font};
  183. color:#000;
  184. margin-top:200px;
  185. padding-left:40px;
  186. }
  187.  
  188.  
  189. .subtitle {
  190. font-weight:700;
  191. text-transform:lowercase;
  192. font-size:12px;
  193. font-family:{select:font};
  194. color:{color:blog subtitle};
  195. margin-top:0px;
  196. padding-left:40px;
  197. letter-spacing:0.5px;
  198. font-style:italic;
  199. }
  200.  
  201.  
  202. .nav {
  203. padding-left:40px;
  204. margin-top:50px;
  205. }
  206.  
  207.  
  208. .nav a {
  209. border:2px solid #000;
  210. display:block;
  211. padding:10px;
  212. width:250px;
  213. margin-bottom:10px;
  214. color:#000;
  215. text-decoration:none;
  216. font-family:{select:font};
  217. text-transform:capitalize;
  218. font-size:12px;
  219. transition:.4s;
  220. letter-spacing:0.5px;
  221. font-weight:700;
  222. {block:ifroundedborders}border-radius:5px;{/block:ifroundedborders}
  223. }
  224.  
  225.  
  226.  
  227. .nav a:hover {
  228. border:2px solid #000;
  229. color:#fff;
  230. background:#000;
  231. transition:.4s;
  232. }
  233.  
  234.  
  235. .nav-accent {
  236. position:absolute;
  237. margin-top:-14px;
  238. margin-left:220px;
  239. opacity:0;
  240. color:#fff;
  241. transition:.4s;
  242. }
  243.  
  244.  
  245. .nav a:hover .nav-accent {
  246. opacity:1;
  247. transition:.4s;
  248. margin-left:240px;
  249. }
  250.  
  251.  
  252. .lnr-chevron-right {
  253. font-size:10px;
  254. color:{color:nav links arrow};
  255. font-weight:700;
  256. transition:.4s;
  257. }
  258.  
  259.  
  260.  
  261. .desc {
  262. font-family:{select:font};
  263. font-size:12px;
  264. color:#000;
  265. line-height:20px;
  266. padding-left:40px;
  267. margin-top:50px;
  268. width:275px;
  269. {block:ifboldeddescription}font-weight:700;{/block:ifboldeddescription}
  270. {block:ifnotboldeddescription}font-weight:400;{/block:ifnotboldeddescription}
  271. }
  272.  
  273.  
  274. /* ------------------------------------------------------------- search bar */
  275.  
  276.  
  277. #search {
  278. margin-top:50px;
  279. padding-left:40px;
  280. }
  281.  
  282. .search {
  283. width:220px;
  284. outline:none;
  285. color:{color:text};
  286. border:none;
  287. padding:10px;
  288. background:#000;
  289. font-family:{select:font};
  290. font-size:11px;
  291. color:#fff;
  292. letter-spacing:0.5px;
  293. {block:ifroundedborders}
  294. border-top-left-radius:5px;
  295. border-bottom-left-radius:5px;
  296. {/block:ifroundedborders}
  297. }
  298.  
  299.  
  300.  
  301. input[type=text] {
  302. color:{color:search box text};
  303. }
  304.  
  305.  
  306. input::placeholder {
  307. color:#fff;
  308. font-weight:400;
  309. }
  310.  
  311.  
  312. input[type=submit] {
  313. padding:10px;
  314. padding-bottom:10px;
  315. background:#000;
  316. border:none;
  317. margin-left:-5px;
  318. margin-top:1px;
  319. letter-spacing:1px;
  320. color:#fff;
  321. font-weight:700;
  322. font-family:{select:font};
  323. transition:.4s;
  324. font-size:11px;
  325. {block:ifroundedborders}
  326. border-top-right-radius:5px;
  327. border-bottom-right-radius:5px;
  328. {/block:ifroundedborders}
  329. }
  330.  
  331.  
  332. input[type=submit]:focus {
  333. outline:none;
  334. cursor:hand auto;
  335. }
  336.  
  337.  
  338. input[type=submit]:hover {
  339. outline:none;
  340. cursor:hand auto;
  341. background:{color:sidebar};
  342. color:#000;
  343. transition:.4s;
  344. }
  345.  
  346.  
  347.  
  348.  
  349. /* ---------------------------------------------------------------- top bar */
  350.  
  351.  
  352. .topbar {
  353. padding:40px;
  354. top:0;
  355. position:fixed;
  356. background:#fff;
  357. width:100%;
  358. z-index:99999999;
  359. padding-left:60px;
  360. margin-left:170px;
  361. border-bottom:2px solid {color:sidebar};
  362. }
  363.  
  364.  
  365. .topbar a {
  366. font-family:{select:font};
  367. font-size:15px;
  368. color:#000;
  369. text-decoration:none;
  370. font-weight:700;
  371. transition:.6s;
  372. margin-right:40px;
  373. padding:5px;
  374. {block:ifroundedborders}border-radius:5px;{/block:ifroundedborders}
  375. }
  376.  
  377.  
  378. .topbar a:hover {
  379. background:{color:sidebar};
  380. transition:.6s;
  381. }
  382.  
  383.  
  384.  
  385.  
  386. /* ------------------------------------------------------------------ posts */
  387.  
  388.  
  389. .posts {
  390. background:#fff;
  391. margin-left:800px;
  392. width:500px;
  393. padding:40px;
  394. margin-top:200px;
  395. margin-bottom:00px;
  396. border:3px solid #000;
  397. {block:ifroundedborders}border-radius:5px;{/block:ifroundedborders}
  398. }
  399.  
  400.  
  401.  
  402. .posts img {
  403. max-width:100%;
  404. {block:ifroundedborders}border-radius:5px;{/block:ifroundedborders}
  405. }
  406.  
  407.  
  408. .quote {
  409. font-family:{select:font};
  410. font-size:20px;
  411. color:#000;
  412. font-weight:700;
  413. }
  414.  
  415.  
  416.  
  417. .text_title {
  418. font-family:{select:font};
  419. font-size:20px;
  420. color:{color:post text};
  421. font-weight:700;
  422. }
  423.  
  424.  
  425. .text_body {
  426. font-family:{select:font};
  427. font-size:12px;
  428. color:{color:post text};
  429. line-height:25px;
  430. }
  431.  
  432.  
  433. .text_body a {
  434. color:#000;
  435. }
  436.  
  437.  
  438.  
  439. .captions {
  440. font-family:{select:font};
  441. font-size:12px;
  442. padding:20px;
  443. padding-left:0px;
  444. color:#000;
  445. line-height:25px;
  446. padding-bottom:0px;
  447. }
  448.  
  449.  
  450. iframe.tumblr_audio_player {
  451. height:85px!important
  452. }
  453.  
  454.  
  455.  
  456. .chat {
  457. font-family:{select:font}, sans-serif;
  458. font-size:12px;
  459. line-height:20px;
  460. }
  461.  
  462.  
  463. .chat_label {
  464. font-weight:700;
  465. font-family:{select:font}, sans-serif;
  466. color:{color:accent};
  467. font-size:12px;
  468. display:inline;
  469. background:{color:sidebar};
  470. }
  471.  
  472.  
  473. .chat_line {
  474. display:inline;
  475. }
  476.  
  477. .chat:nth-of-type(even) {
  478. color:{color:accent};
  479. }
  480.  
  481.  
  482. .chat:nth-of-type(odd) {
  483. color:{color:post text};
  484.  
  485. }
  486.  
  487.  
  488. .chat:nth-of-type(odd) .chat_label {
  489. color:{color:post text};
  490. background:none;
  491. text-decoration:underline;
  492.  
  493. }
  494.  
  495.  
  496.  
  497. /* -------------------------------------------------------------- post info */
  498.  
  499.  
  500. .postinfo {
  501. position:absolute;
  502. padding:15px;
  503. margin-top:-105px;
  504. margin-left:-43px;
  505. width:555px;
  506. background:#000;
  507. {block:ifroundedborders}border-radius:5px;{/block:ifroundedborders}
  508. }
  509.  
  510.  
  511. .postinfo a {
  512. text-decoration:none;
  513. display:inline-block;
  514.  
  515. }
  516.  
  517.  
  518.  
  519. .lnr-redo {
  520. font-size:15px;
  521. color:#fff;
  522. font-weight:bold;
  523. transition:.4s;
  524. margin-right:520px;
  525. }
  526.  
  527.  
  528. .postinfo a:hover .lnr-redo {
  529. color:{color:nav links arrow};
  530. }
  531.  
  532.  
  533. .lnr-link {
  534. font-size:15px;
  535. color:#fff;
  536. font-weight:bold;
  537. transition:.4s;
  538. }
  539.  
  540.  
  541. .postinfo a:hover .lnr-link {
  542. color:{color:nav links arrow};
  543. }
  544.  
  545.  
  546. /* -------------------------------------------------------- tumblr controls */
  547.  
  548.  
  549. iframe.tmblr-iframe {
  550. z-index:99999999999999!important;
  551. top:0!important;
  552. right:0!important;
  553. opacity:0;
  554. padding-top:20px;
  555. /* delete invert(1) from here */
  556. filter:invert(1) contrast(100%) hue-rotate(40deg);
  557. /* to here if your blog has a dark background */
  558. transform:scale(1);
  559. transform-origin:100% 0;
  560. -webkit-transform:scale(1);
  561. -webkit-transform-origin:100% 0;
  562. -o-transform:scale(1);
  563. -o-transform-origin:100% 0;
  564. -moz-transform:scale(1);
  565. -moz-transform-origin:100% 0;
  566. -ms-transform:scale(1);
  567. -ms-transform-origin:100% 0;
  568. text-shadow:none;
  569. box-shadow:none;
  570. transition:.5s;
  571. }
  572.  
  573. iframe.tmblr-iframe:hover {
  574. opacity:0.8!important;
  575. transition:.5s;
  576. }
  577.  
  578.  
  579.  
  580. /* ---------------------------------------------------- scroll progress bar */
  581.  
  582.  
  583. .progress-container {
  584. width: 100%;
  585. height: 8px;
  586. background: transparent;
  587. z-indeX:999999999999999999999999999999999;
  588. top:0;
  589. left:0;
  590. position:fixed;
  591. }
  592.  
  593. .progress-bar {
  594. height: 5px;
  595. background: {color:scroll progress bar};
  596. width: 0%;
  597. }
  598.  
  599.  
  600. /* ----------------------------------------------------- back to top button */
  601.  
  602.  
  603. #top {
  604. width: 40px;
  605. line-height: 40px;
  606. overflow: hidden;
  607. z-index: 999;
  608. display: none;
  609. position: fixed;
  610. bottom: 10px;
  611. left:0;
  612. margin-left:60px;
  613. color: #000;
  614. text-align: center;
  615. font-size: 30px;
  616. text-decoration: none;
  617. background:{color:sidebar};
  618. }
  619.  
  620.  
  621. #top:hover {
  622. color: {color:links};
  623. }
  624.  
  625.  
  626. #top:hover .th-up-arrow {
  627. color: {color:links};
  628. transition:.6s;
  629. }
  630.  
  631.  
  632. .th-up-arrow {
  633. color:#000;
  634. transition:.6s;
  635. }
  636.  
  637.  
  638.  
  639.  
  640. /* --------------------------------------------------------- PERMALINK PAGE */
  641.  
  642.  
  643.  
  644. .postnotes {
  645. padding:20px;
  646. padding-left:0px;
  647. font-family:{select:font};
  648. color:#555;
  649. font-size:11px;
  650. letter-spacing:0.5px;
  651. line-height:35px;
  652. max-height:300px;
  653. overflow:auto;
  654. width:530px;
  655. margin-left:-50px;
  656. margin-top:40px;
  657. }
  658.  
  659.  
  660. .postnotes a {
  661. border:none;
  662. }
  663.  
  664. .postnotes a:hover {
  665. color:{color:accent};
  666. }
  667.  
  668. .postnotes img {
  669. border-radius:100%;
  670. margin-right:5px;
  671. vertical-align:-15%;
  672. }
  673.  
  674. .postnotes li {
  675. list-style-type:none;
  676. }
  677.  
  678.  
  679. .postnotes::-webkit-scrollbar-track {
  680. background:#191919;
  681. }
  682.  
  683.  
  684. </style>
  685. </head>
  686.  
  687.  
  688.  
  689. <!--- audio player styling --->
  690. <script>
  691. $(document).ready(function() {
  692. $('iframe.tumblr_audio_player').load( function() {
  693. $('iframe.tumblr_audio_player').contents().find("head")
  694. .append($("<link href='https://fonts.googleapis.com/css?family=Karla:400,700' rel='stylesheet' type='text/css'> <style type='text/css'> .audio-player{background:{color:sidebar}; color:#222; font-family:{select:font};!important} </style>"));
  695. });
  696. });
  697. </script>
  698.  
  699.  
  700. <body>
  701.  
  702. {block:ifscrollprogressbar}
  703. <div class="progress-container">
  704. <div class="progress-bar" id="myBar"></div>
  705. </div>
  706. {/block:ifscrollprogressbar}
  707.  
  708. <div class="topbar">
  709. <a href="/">Home</a>
  710. <a href="/">Grid</a>
  711. <a href="/">Submit</a>
  712. {block:pagination}
  713.  
  714. {block:nextpage}
  715. <a href="{nextpage}">Next page</a>
  716. {/block:nextpage}
  717.  
  718. {block:previouspage}
  719. <a href="{previouspage}">Previous page</a>
  720. {/block:previouspage}
  721.  
  722. {/block:pagination}
  723. </div>
  724.  
  725. <div class="sidebar">
  726. <img src="{image:sidebar icon}">
  727. </div>
  728.  
  729.  
  730. <div class="sidebar2">
  731. <div class="title">{title}</div>
  732. <div class="subtitle">@{name}</div>
  733. <div class="nav">
  734. <a href="{text:link one url}">{text:link one name} <div class="nav-accent"><span class="lnr lnr-chevron-right"></span></div></a>
  735. <a href="{text:link two url}">{text:link two name} <div class="nav-accent"><span class="lnr lnr-chevron-right"></span></div></a>
  736. <a href="{text:link three url}">{text:link three name} <div class="nav-accent"><span class="lnr lnr-chevron-right"></span></div></a>
  737. <a href="{text:link four url}">{text:link four name} <div class="nav-accent"><span class="lnr lnr-chevron-right"></span></div></a>
  738. </div>
  739.  
  740. <div id="search">
  741. <form action="/search" method="get">
  742. <input type="text" name="q" value="{SearchQuery}" class="search" autocomplete="off" placeholder="search this blog"/>
  743. <input type="submit" value="GO">
  744. </form>
  745. </div>
  746.  
  747. <div class="desc">{description}</div>
  748.  
  749. </div>
  750.  
  751.  
  752.  
  753. {block:posts}
  754. <div class="posts">
  755.  
  756. <div class="postinfo">
  757. <a href="{reblogurl}"><span class="lnr lnr-redo"></span></a>
  758. <a href="{permalink}"><span class="lnr lnr-link"></span></a>
  759. </div>
  760.  
  761. {block:quote}
  762. <div class="quote">{quote}</div>
  763. {/block:quote}
  764.  
  765. {block:photo}
  766. <img src="{photourl-500}">
  767. {block:caption}<div class="captions">{caption}</div>{/block:caption}
  768. {/block:photo}
  769.  
  770. {block:text}
  771. {block:title}<div class="text_title">{title}</div>{/block:title}
  772. <div class="text_body">{body}</div>
  773. {/block:text}
  774.  
  775. {block:photoset}
  776. {photoset-500}
  777. {block:caption}<div class="captions">{caption}</div>{/block:caption}
  778. {/block:photoset}
  779.  
  780. {block:video}
  781. {video-500}
  782. {block:caption}<div class="captions">{caption}</div>{/block:caption}
  783. {/block:video}
  784.  
  785. {block:audio}
  786. {audioembed-500}
  787. {block:caption}<div class="captions">{caption}</div>{/block:caption}
  788. {/block:audio}
  789.  
  790. {block:chat}
  791. {block:title}<div class="text_title">{title}</div>{/block:title}
  792. {block:lines}
  793. <div class="chat">
  794. {block:label}<div class="chat_label">{label}</div>{/block:label}
  795. <div class="chat_line">{line}</div><p>
  796. </div>
  797. {/block:lines}
  798. {/block:chat}
  799.  
  800. {block:permalinkpage}
  801. {block:postnotes}
  802. <div class="postnotes">{postnotes}</div>
  803. {/block:postnotes}
  804. {/block:permalinkpage}
  805.  
  806. </div>
  807. {/block:posts}
  808.  
  809.  
  810. <!--- https://78.media.tumblr.com/114f243fe17936f6d13c42ade964c85a/tumblr_inline_mgxqv8LqxI1qabnl2.jpg --->
  811. <div class="credit"><span class="th th-code"></span><a href="http://wizardhut.tumblr.com">theme</a></div>
  812.  
  813.  
  814.  
  815.  
  816. <script>
  817. window.onscroll = function() {myFunction()};
  818.  
  819. function myFunction() {
  820. var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  821. var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  822. var scrolled = (winScroll / height) * 100;
  823. document.getElementById("myBar").style.width = scrolled + "%";
  824. }
  825. </script>
  826.  
  827.  
  828. <!--- back to top button --->
  829.  
  830. <a id="top" title="Back to top" href="#"><span class="th th-up-arrow"></span></a>
  831.  
  832.  
  833. <script>
  834. $(window).scroll(function() {
  835. var height = $(window).scrollTop();
  836. if (height > 100) {
  837. $('#top').fadeIn();
  838. } else {
  839. $('#top').fadeOut();
  840. }
  841. });
  842. $(document).ready(function() {
  843. $("#top").click(function(event) {
  844. event.preventDefault();
  845. $("html, body").animate({ scrollTop: 0 }, "slow");
  846. return false;
  847. });
  848.  
  849. });
  850. </script>
  851.  
  852. </body>
  853. </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!