API tools faq
paste
clerihew

21. go down to kokomo

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