API tools faq
paste
clerihew

19. zest

clerihew
Jul 4th, 2019
243
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.92 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3. © Clerihew Themes 2019
  4.  
  5. Do not use without reading terms of use.
  6.  
  7. Contact me at clerihew.tumblr.com if you have problems with any
  8. un-heavily edited code or if you have questions on how to use this theme.
  9. -->
  10. <head>
  11.  
  12. <meta name="color:Background" content="#f6f6f6"/>
  13. <meta name="color:Text" content="#909090"/>
  14. <meta name="color:Link" content="#6cac9c"/>
  15. <meta name="color:Link Hover" content="#a90c07"/>
  16. <meta name="color:Post BG" content="#ffffff"/>
  17. <meta name="color:Border" content="#e9e9e9"/>
  18. <meta name="color:Accent" content="#B49594">
  19. <meta name="color:Highlight" content="#B49594">
  20.  
  21. <meta name="image:Header" content=""/>
  22.  
  23. <meta name="if:Show Blog Title" content="1"/>
  24. <meta name="if:Show Links" content="1"/>
  25. <meta name="if:Infinite Scroll" content="1"/>
  26. <meta name="if:Custom Link 1" content="1"/>
  27. <meta name="if:Custom Link 2" content="1"/>
  28. <meta name="if:Custom Link 3" content="1"/>
  29.  
  30. <meta name="text:Blog Title Font Size" content="100px"/>
  31. <meta name="text:Title Font Size" content="14px"/>
  32. <meta name="text:Font Size" content="10px"/>
  33. <meta name="text:Link 1 Title" content="one"/>
  34. <meta name="text:Link 1 url" content="/"/>
  35. <meta name="text:Link 2 Title" content="two"/>
  36. <meta name="text:Link 2 url" content="/"/>
  37. <meta name="text:Link 3 Title" content="three"/>
  38. <meta name="text:Link 3 url" content="/"/>
  39.  
  40. <title>{Title}</title>
  41. <link rel="shortcut icon" href="{Favicon}">
  42. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  43. <link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  44. <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  45. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  46.  
  47.  
  48. <style type="text/css">
  49.  
  50. /* TUMBLR CONTROLS */
  51.  
  52. iframe.tmblr-iframe {
  53. z-index:99999999999999!important;
  54. top:0!important;
  55. right:0!important;
  56. opacity:0.6;
  57. /* delete invert(1) from here */
  58. filter:invert(1) contrast(150%);
  59. -webkit-filter:invert(1) contrast(150%);
  60. -o-filter:invert(1) contrast(150%);
  61. -moz-filter:invert(1) contrast(150%);
  62. -ms-filter:invert(1) contrast(150%);
  63. /* to here if your blog has a dark background */
  64. transform:scale(0.65);
  65. transform-origin:100% 0;
  66. -webkit-transform:scale(0.65);
  67. -webkit-transform-origin:100% 0;
  68. -o-transform:scale(0.65);
  69. -o-transform-origin:100% 0;
  70. -moz-transform:scale(0.65);
  71. -moz-transform-origin:100% 0;
  72. -ms-transform:scale(0.65);
  73. -ms-transform-origin:100% 0;}
  74.  
  75. iframe.tmblr-iframe:hover {
  76. opacity:1!important;}
  77.  
  78. /* TOOLTIPS */
  79.  
  80. #s-m-t-tooltip{
  81. font-size:8px;
  82. color:#000;
  83. background-color:#fff;
  84. letter-spacing:2px;
  85. min-width:50px;
  86. max-width:200px;
  87. overflow:auto;
  88. text-transform:uppercase;
  89. font-style:italic;
  90. display: none;
  91. position: absolute;
  92. z-index: 999999999999;
  93. padding:5px;
  94. margin:30px 0 15px 10px;
  95. -webkit-transition: all 0.2s ease-in-out;
  96. -moz-transition: all 0.2s ease-in-out;
  97. transition: all 0.2s ease-in-out;}
  98.  
  99. /* SCROLLBAR */
  100.  
  101. /* thanks @shythemes */
  102. ::-webkit-scrollbar {
  103. width:17px;
  104. height:17px;
  105. }
  106.  
  107. ::-webkit-scrollbar {
  108. background-color: {color:Background}; /* background color */
  109. }
  110.  
  111. ::-webkit-scrollbar-track {
  112. border:8px solid {color:Background}; /* background color */
  113. background-color: {color:Text}; /* light border color */
  114. }
  115.  
  116. ::-webkit-scrollbar-thumb {
  117. border:8px solid {color:Background}; /* background color */
  118. background-color: {color:accent}; /* dark border color */
  119. min-height:24px;
  120. min-width:24px;
  121. }
  122.  
  123. /* SELECTION */
  124.  
  125. ::selection {
  126. color: {color:Accent};
  127. background: {color:Background};
  128. }
  129. ::-moz-selection {
  130. color: {color:Accent};
  131. background: {color:Background};
  132. }
  133.  
  134. /* NAV */
  135. {block:ifshowlinks}
  136. #topbar {
  137. z-index: 10;
  138. width: 850px;
  139. height: 40px;
  140. position: fixed;
  141. top: 15px;
  142. left: 50%;
  143. margin-top: -15px;
  144. margin-left: -425px;
  145. font-size: 12px;
  146. background-color: {color:post bg};
  147. text-align: center;
  148. color: {color:Text};
  149. }
  150.  
  151. #topbar a {
  152. font-size: 10px;
  153. padding: 0px 20px 0px 20px;
  154. }
  155.  
  156.  
  157. #topbar #navlinks {
  158. margin-top: 12px;
  159. }
  160. {/block:ifshowlinks}
  161.  
  162. .header {
  163. background: url({image:Header}) {color:Accent 1} no-repeat;
  164. background-size: cover;
  165. width: 850px;
  166. height: 400px;
  167. position: relative;
  168. margin-top: 40px;
  169. margin-bottom: 50px;
  170. margin-left: 50%;
  171. left: -425px;
  172. }
  173.  
  174. .headeroverlay {
  175. height: 100%;
  176. width: 100%;
  177. position: absolute;
  178. top: 0;
  179. left: 0;
  180. background-color: rgba(108, 172, 156, 0.7);
  181. }
  182.  
  183. #blogtitle {
  184. position: absolute;
  185. color: {color:post bg};
  186. right: 130px;
  187. top: -50px;
  188. text-align: right;
  189. }
  190.  
  191. #blogtitle p {
  192. font-size: {text:Blog Title Font Size};
  193. margin-bottom: 0;
  194. font-style: italic;
  195. }
  196.  
  197. /* POSTS */
  198.  
  199. #content {
  200. margin-left: 150px;
  201. margin-top: 30px;
  202. width: 900px; /*changes # of columns*/
  203. column-count: 3;
  204. column-gap: 100px;
  205. }
  206.  
  207. body {
  208. background-color: {color:background};
  209. background-image: url({image:background});
  210. background-attachment:fixed;
  211. background-repeat:repeat;
  212. background-position:center;
  213. font-family: "Montserrat", sans-serif;
  214. font-size: {text:Font Size};
  215. color: {color:text};
  216. }
  217.  
  218. a {
  219. color: {color:link};
  220. text-decoration:none;
  221. -webkit-transition: color 1s;
  222. -moz-transition: color 1s;
  223. -o-transition: color 1s;
  224. transition: color 1s;
  225. }
  226.  
  227. a:hover {
  228. color: {color:link hover};
  229. }
  230.  
  231. blockquote {
  232. padding-left:5px;
  233. border-left:1px dotted;
  234. color: {color:text};
  235. margin-left:3px;
  236. margin-bottom:5px;
  237. }
  238.  
  239. iframe, img, embed, object, video {
  240. max-width: 100%;
  241. }
  242.  
  243. img {
  244. height: auto;
  245. width: auto;
  246. }
  247.  
  248. article {
  249. background: {color:post bg};
  250. margin: 0px 12px 50px 12px;
  251. margin-top: 0px!important;
  252. padding: 8px;
  253. border: 1px solid {color:border};
  254. width: 250px!important;
  255. overflow: auto;
  256. float: left;
  257. break-inside: avoid;
  258. }
  259.  
  260. article img {
  261. width:100%;
  262. }
  263.  
  264. .title {
  265. text-align:center;
  266. text-transform:uppercase;
  267. font-size: {text:Title Font Size};
  268. }
  269.  
  270. .text {
  271. font-size: {text:Font Size};
  272. color: {color:text};
  273. width:100%;
  274. }
  275.  
  276. .photo {
  277. }
  278.  
  279. .photoset {
  280. }
  281.  
  282. .quote {
  283. text-align:center;
  284. }
  285.  
  286. .link {
  287. }
  288.  
  289. .audio {
  290. width:100%;
  291. }
  292.  
  293. .video{
  294. }
  295.  
  296. .video-player {
  297.  
  298. }
  299.  
  300. .answer {
  301. }
  302.  
  303. .ques {
  304. font-weight:bolder;
  305. }
  306.  
  307. .ans {
  308. font-style:italic;
  309. }
  310.  
  311. .chat{
  312. margin-left:-30px;
  313. }
  314.  
  315. .chat span {
  316. float: left;
  317. margin-right: 10px;
  318. }
  319.  
  320. .chat:nth-child(even) {
  321. background:#f9f9f9;
  322. }
  323.  
  324. .odd{
  325. background:#f6f6f6;
  326. }
  327.  
  328. {block:PermalinkPage}
  329.  
  330. .header, .headeroverlay, #blogtitle {
  331. display: none;
  332. }
  333.  
  334. article {
  335. margin-top: 30px!important;
  336. margin-left: 350px;
  337. margin-right: 350px;
  338. }
  339.  
  340. #content #notecontainer {
  341. margin: 10px auto;
  342. width: 250px;
  343. }
  344.  
  345. #content #notecontainer a {
  346. text-decoration: none;
  347. color: {color:link};
  348. padding: 3px;
  349. -webkit-transition: color 0.5s;
  350. -moz-transition: color 0.5s;
  351. -o-transition: color 0.5s;
  352. transition: color 0.5s;
  353. }
  354.  
  355. /* post pages links color hover */
  356. #content #notecontainer a:hover {
  357. color: {color:link hover};
  358. }
  359.  
  360. #content #notecontainer ol.notes {
  361. list-style-type: none;
  362. margin: 0;
  363. padding: 3px;
  364. }
  365.  
  366. #content #notecontainer img.avatar {
  367. width: 16px;
  368. height: 16px;
  369. }
  370.  
  371. {/block:PermalinkPage}
  372.  
  373. #perma {
  374. text-align: center;
  375. position: relative;
  376. text-transform:uppercase;
  377. margin-top:2px;
  378. padding:4px;
  379. font-size: 8px;
  380. {block:PermalinkPage}
  381. display:none;
  382. {/block:PermalinkPage}
  383. }
  384.  
  385. .tumblr_audio_player {
  386. width: 100%;
  387. height: 100px;
  388. overflow: hidden;
  389. position: relative;
  390. z-index: 1000;
  391. }
  392.  
  393. .pagination {
  394.  
  395. }
  396.  
  397. {block:ifnotinfinitescroll}
  398. .pagi {
  399.  
  400. font-size:15px;
  401. color: {color:link};
  402. text-align:center;
  403. padding:5px;
  404. padding-top:5px;
  405. }
  406. {/block:ifnotinfinitescroll}
  407.  
  408. {block:ifinfinitescroll}
  409. .pagi {
  410. display:none;
  411. }
  412. {/block:ifinfinitescroll}
  413.  
  414. hr {
  415. width:75%;
  416. border-top:1px solid {color:Borders};
  417. }
  418.  
  419. caption {
  420. margin:12px;
  421. }
  422.  
  423. /* DO NOT TOUCH THIS */
  424. .credit a {
  425. position: fixed;
  426. bottom: 15px;
  427. right: 15px;
  428. font-size: 8px;
  429. padding: 3px;
  430. text-decoration: none;
  431. background-color: {color:background};
  432. color: black;
  433. -webkit-transition: color 1s;
  434. -moz-transition: color 1s;
  435. -o-transition: color 1s;
  436. transition: color 1s;
  437. }
  438.  
  439. .credit a:hover {
  440. color: #548773;
  441. }
  442.  
  443.  
  444. </style>
  445. </head>
  446. <body>
  447.  
  448.  
  449. <div id="topbar">
  450. <div align="center">
  451. {block:ifshowlinks}
  452. <div id="navlinks">
  453. <a href="/">home</a>
  454. <a href="/ask">ask</a>
  455. <a href="/submit">submit</a>
  456. {block:ifcustomlink1}<a href="{text:link 1 url}">{text:link 1 title}</a>{/block:ifcustomlink1}
  457. {block:ifcustomlink2}<a href="{text:link 2 url}">{text:link 2 title}</a>{/block:ifcustomlink2}
  458. {block:ifcustomlink3}<a href="{text:link 3 url}">{text:link 3 title}</a>{/block:ifcustomlink3}
  459. </div>
  460. </div>
  461. {/block:ifshowlinks}
  462. </div>
  463.  
  464. <div class="header">
  465. <div class="headeroverlay">
  466. {block:ifshowblogtitle}
  467. <div id="blogtitle"><p>{Title}</p></div>
  468. {/block:ifshowblogtitle}
  469. </div>
  470. </div>
  471.  
  472. <div id="content">
  473. {block:Posts}
  474. <article>
  475. {block:Text}
  476. <div class="text">
  477. {block:Title}<h1 class="title">
  478. <a href="{Permalink}">{Title}</a>
  479. </h1><hr>{/block:Title}
  480. {Body}
  481. {/block:Text}
  482.  
  483. {block:Photo}
  484. <div class="photo">
  485. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
  486. {block:Caption}{Caption}{/block:Caption}
  487. {/block:Photo}
  488.  
  489. {block:Photoset}
  490. <div class="photoset">
  491. {block:IndexPage}
  492. {Photoset-500}
  493. {/block:IndexPage}
  494. {block:PermalinkPage}
  495. {Photoset-500}
  496. {/block:PermalinkPage}
  497. {block:Caption}{Caption}{/block:Caption}
  498. {/block:Photoset}
  499.  
  500. {block:Quote}
  501. <div class="quote">
  502. ❝ {Quote} ❞
  503. <br><br>{block:Source}<cite>&mdash; {Source}</cite>{/block:Source}
  504. {/block:Quote}
  505.  
  506. {block:Link}
  507. <div class="link">
  508. <h1 class="title"><a href="{URL}">{Name}</a><hr></h1>
  509. {block:Description}{Description}{/block:Description}
  510. {/block:Link}
  511.  
  512. {block:Chat}
  513. <div class="chat">
  514. <ul>
  515. {block:Lines}
  516. <div class="{Alt} user_{UserNumber}">
  517. {block:Label}
  518. <b>{Label}</b>{/block:Label}
  519. {Line}
  520. </div>
  521. {/block:Lines}
  522. </ul>
  523. {/block:Chat}
  524.  
  525. {block:Audio}
  526. <div class="audio">
  527. {block:AlbumArt}
  528. <img src="{AlbumArtURL}" width="100px" height="100px"/>
  529. {/block:AlbumArt}
  530.  
  531. {block:AudioEmbed}
  532. {AudioEmbed}
  533. {/block:AudioEmbed}<br>
  534.  
  535. {block:TrackName}
  536. <b>track:</b> {TrackName}
  537. {/block:TrackName}</span><br>
  538. {block:Artist}
  539. <b>artist:</b> {Artist}
  540. {/block:Artist}
  541. {block:Caption}
  542. {Caption}
  543. {/block:Caption}
  544. {/block:Audio}
  545.  
  546. {block:Video}
  547. <div class="video">
  548. <div class="video-player">{Video-500}</div>
  549. {block:Caption}{Caption}{/block:Caption}
  550. {/block:Video}
  551.  
  552. {block:Answer}
  553. <div class="answer">
  554. {Asker} asked: <b><div class="ques">{Question}</div></b>
  555. <div class="ans">{Answer}</div>
  556. {/block:Answer}
  557. </div>
  558.  
  559. {block:PostNotes}
  560. <div id="notecontainer">{PostNotes}</div>
  561. {/block:PostNotes}
  562.  
  563. <div id="perma">
  564.  
  565. <hr><a href="{Permalink}" title="this post has {NoteCount} notes">{NoteCount} <i class="fas fa-heart"></i></a> &nbsp; <a href="{reblogURL}" title="reblog this post">reblog</a> &nbsp; <a href="{Permalink}" title="posted &mdash; {ShortMonth} {DayOfMonth} {Year} {12Hour}:{Minutes}{AmPm}">{TimeAgo}</a> &nbsp; {block:ifShowTags}{block:HasTags} <a style="font-size:9px;" title="{block:Tags}#{Tag} {/block:Tags}"><i class="fas fa-hashtag"></i></a>{block:HasTags} {block:ifShowTags}
  566.  
  567. </div>
  568.  
  569. </footer>
  570. </article>
  571. {/block:Posts}
  572. </div>
  573.  
  574. {block:Pagination}
  575. <div class="pagination">
  576. <div class="pagi">
  577. {block:PreviousPage}<a href="{PreviousPage}"><i class="fas fa-chevron-left"></i></a>{/block:PreviousPage}
  578. {block:NextPage}<a href="{NextPage}"><i class="fas fa-chevron-right"></i></a>{/block:NextPage}
  579. </div></div>
  580. {/block:Pagination}
  581. </div>
  582.  
  583. <!-- SCRIPTS -->
  584.  
  585. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  586. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  587. <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  588. {block:IfInfiniteScroll}
  589. <script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  590. <script src="https://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  591. {/block:IfInfiniteScroll}
  592.  
  593. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  594. <script>
  595. (function($){
  596. $(document).ready(function(){
  597. $("[title]").style_my_tooltips({
  598. tip_follows_cursor:true,
  599. tip_delay_time:0,
  600. tip_fade_speed:0
  601. }
  602. );
  603. });
  604. })(jQuery);
  605. </script>
  606.  
  607. <script>
  608. (function() {
  609. var $tumblelog = $('#content');
  610. {block:IfInfiniteScroll}
  611. $tumblelog.infinitescroll({
  612. navSelector : ".pagination",
  613. nextSelector : ".pagination a:first",
  614. itemSelector : "article",
  615. bufferPx : 50,
  616. done : "",
  617. loading: {
  618. img : "",
  619. msgText: ""
  620. },
  621. },
  622. );
  623. {/block:IfInfiniteScroll}
  624. })();
  625. </script>
  626.  
  627. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.js"></script>
  628. <script>
  629. SmoothScroll({
  630. // Scrolling Core
  631. animationTime : 700, // [ms]
  632. stepSize : 100, // [px]
  633. // Acceleration
  634. accelerationDelta : 50, // 50
  635. accelerationMax : 3, // 3
  636. // Keyboard Settings
  637. keyboardSupport : true, // option
  638. arrowScroll : 100, // [px]
  639. // Pulse (less tweakable)
  640. // ratio of "tail" to "acceleration"
  641. pulseAlgorithm : true,
  642. pulseScale : 4,
  643. pulseNormalize : 1,
  644. // Other
  645. touchpadSupport : false, // ignore touchpad by default
  646. fixedBackground : true,
  647. excluded : ''
  648. });
  649. </script>
  650.  
  651. <!-- DO NOT TOUCH THIS -->
  652. <div class="credit">
  653. <a href="https://clerihew.tumblr.com/" title="theme by clerihew"><span class="th th-aloe-vera"></span></a>
  654. </div>
  655.  
  656. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!