API tools faq
paste
clerihew

22. after hours

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