API tools faq
paste
clerihew

20. catalina

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