API tools faq
paste
codesbyjack

THEME #16 double knot / made by jinsoouls

codesbyjack
Nov 1st, 2019 (edited)
2,362
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.97 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. -` double knot by jinsoouls ´-
  6. you know the deal, the usual rules
  7. apply, don't remove credit,
  8. repost or claim as your own!
  9.  
  10. -->
  11.  
  12. <meta name="color:background" content="#f5f5f5"/>
  13. <meta name="color:posts" content="#ffffff"/>
  14. <meta name="color:border" content="#eeeeee"/>
  15. <meta name="color:accent" content="#d0aa8b"/>
  16. <meta name="color:sidelinks hover" content="#7babab"/>
  17. <meta name="color:text" content="#313131"/>
  18. <meta name="color:accent text" content="#ffffff"/>
  19. <meta name="color:bold" content="#7babab"/>
  20. <meta name="color:italic" content="#7babab"/>
  21. <meta name="color:border" content="#eeeeee"/>
  22. <meta name="color:link" content="#7babab"/>
  23. <meta name="color:hover link" content="#7babab"/>
  24.  
  25. <meta name="image:background" content=""/>
  26. <meta name="image:sidebar" content=""/>
  27.  
  28. <meta name="if:custom description" content="1"/>
  29. <meta name="if:grayscale sidebar" content="1"/>
  30. <meta name="if:jello effect on links" content="1"/>
  31.  
  32. <meta name="text:description" content="this is your description">
  33. <meta name="text:link one" content="/1">
  34. <meta name="text:link one title" content="link one">
  35. <meta name="text:link two" content="/2">
  36. <meta name="text:link two title" content="link two">
  37.  
  38. <head>
  39.  
  40. <title>{Title}</title>
  41. <link rel="shortcut icon" href="{Favicon}">
  42. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  43. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  44.  
  45. <!-- jquery -->
  46. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  47.  
  48. <!-- script for tooltips -->
  49. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  50.  
  51. <!-- google fonts -->
  52. <link href="https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900&display=swap" rel="stylesheet">
  53.  
  54. <!-- photoset.css by annathms and espoirthemes -->
  55. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  56.  
  57. <!-- autoresize video script by shythemes -->
  58. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  59.  
  60. <!-- animate.css -->
  61. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  62. <script>
  63.  
  64. /* photoset script by annathms and espoirthemes */
  65.  
  66. function gatherData(images, arr) {
  67. for (let i = 0; i < images.length; i++) {
  68. let currentData = {
  69. "width": images[i].getAttribute('data-width'),
  70. "height": images[i].getAttribute('data-height'),
  71. "low_res": images[i].getAttribute('data-lowres'),
  72. "high_res": images[i].getAttribute('data-highres')
  73. };
  74. arr.push(currentData);
  75. }
  76. }
  77. function getIndex(elem) {
  78. let i = 0;
  79. while( (elem = elem.previousElementSibling) != null ) i++;
  80. return i;
  81. }
  82. function lightbox(elem) {
  83. let currentPhotoset = elem.parentNode;
  84. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  85. let data = [];
  86. gatherData(photosetPhotos, data);
  87. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  88. }
  89.  
  90. /* tooltip script */
  91. (function($){
  92. $(document).ready(function(){
  93. $("a[title]").style_my_tooltips({
  94. tip_follows_cursor:true,
  95. tip_delay_time:90,
  96. tip_fade_speed:600,
  97. attribute:"title"
  98. });
  99. });
  100. })(jQuery);
  101.  
  102. /* audio player color script by shudesigns */
  103. ($(document).ready(function() {
  104. $('iframe.tumblr_audio_player').load( function() {
  105. $('iframe.tumblr_audio_player').contents().find("head")
  106. .append($("<style type='text/css'> .audio-player{background:{color:accent} !important} </style>"));
  107. });
  108. })
  109. )(jQuery);
  110.  
  111. </script>
  112.  
  113. <style>
  114.  
  115. @font-face { font-family: "mont light"; src: url(" https://dl.dropboxusercontent.com/s/j70rskvhq3j3tv2/Mont-ExtraLightDEMO.otf"); }
  116.  
  117. @font-face { font-family: "mont heavy"; src: url(" https://dl.dropboxusercontent.com/s/gw86uuuybwd8c96/Mont-HeavyDEMO.otf"); }
  118.  
  119. ::-webkit-scrollbar {
  120. width: 1px;
  121. height: 1px;
  122. background: transparent;
  123. }
  124.  
  125. ::-webkit-scrollbar-thumb {
  126. background: transparent;
  127. }
  128.  
  129. ::selection {
  130. color:{color:text};
  131. background-color: {color:border};
  132. }
  133.  
  134. ::-moz-selection {
  135. color:{color:text};
  136. background-color: {color:border};
  137. }
  138.  
  139. #s-m-t-tooltip {
  140. max-width:300px;
  141. padding:8px 10px 9px 10px;
  142. margin:20px 7px 2px 20px;
  143. background-color:{color:bold};
  144. font-size:10px;
  145. text-transform:lowercase;
  146. letter-spacing:0.5px;
  147. color:{color:accent text};
  148. z-index:999999999999999999999999999999999999;
  149. border-radius:5px;
  150. font-weight:500;
  151. }
  152.  
  153. body {
  154. background:{color:background};
  155. background-image:url({image:background});
  156. margin:0px;
  157. color:{color:text};
  158. font-family: 'Maven Pro', sans-serif;
  159. font-size:11px;
  160. line-height:100%;
  161. }
  162.  
  163. small {font-size:11px;}
  164.  
  165. blockquote {
  166. padding-left:20px;
  167. margin-left:10px;
  168. border-left:1px solid {color:border};
  169. }
  170.  
  171. blockquote blockquote {
  172. padding-left:20px;
  173. margin-left:10px;
  174. border-left:1px solid {color:border};
  175. }
  176.  
  177. h1 {
  178. font-size:30px;
  179. color:{color:accent};
  180. text-align:center;
  181. line-height:100%;
  182. margin:5px;
  183. font-family: "mont light";
  184. text-transform:lowercase;
  185. }
  186.  
  187. h2 {
  188. font-size:16px;
  189. color:{color:bold};
  190. text-align:center;
  191. font-family: "mont light";
  192. text-transform:lowercase;
  193. }
  194.  
  195. a {
  196. text-decoration:none;
  197. color:{color:link};
  198. padding:0px 1px 1.5px 1px;
  199. border-bottom:1px solid transparent;
  200. -moz-transition-duration:0.8s;
  201. -webkit-transition-duration:0.8s;
  202. -o-transition-duration:0.8s;
  203. }
  204.  
  205. a:hover {
  206. color:{color:hover link};
  207. border-bottom:1px solid {color:hover link};
  208. }
  209.  
  210. b {
  211. color:{color:bold};
  212. font-weight:bold;
  213. letter-spacing:1px;
  214. }
  215.  
  216. i {color:{color:italic};letter-spacing:0.7px;}
  217. sub {font-size:11px;}
  218. sup {font-size:11px;}
  219. small{font-size:10px}
  220.  
  221. .entries {
  222. position:absolute;
  223. width:500px;
  224. height:100%;
  225. z-index:2;
  226. margin:auto;
  227. left:300px;right:0px;top:0px; bottom:0px;
  228. }
  229.  
  230. .post {
  231. padding:10px;
  232. width:430px;
  233. background-color:{color:posts};
  234. margin:30px;
  235. line-height:130%;
  236. overflow:hidden;
  237. border:1px solid {color:border};
  238. }
  239.  
  240. .post img {
  241. position:static;
  242. height:auto;
  243. width:auto;
  244. max-width:100%;
  245. border-radius:0px;
  246. }
  247.  
  248. .postinfo {
  249. text-transform:uppercase;
  250. font-size:9.5px;
  251. width:440px;
  252. letter-spacing:0.5px;
  253. margin:0px 0px 0px 0px;
  254. padding:10px 0px 0px 0px;
  255. width:100%;
  256. border-top:1px solid {color:border};
  257. }
  258.  
  259. .tags {
  260. width:440px;
  261. font-size:9.5px;
  262. text-align:center;
  263. text-transform:uppercase;
  264. margin-top:-27.5px;
  265. margin-left:35px;
  266. }
  267.  
  268. .tags a {border:none}
  269.  
  270. .postnote {
  271. margin-top:10px;
  272. text-transform:lowercase;
  273. letter-spacing:0px;
  274. font-size:10px;
  275. text-align:left;
  276. }
  277.  
  278. /* different post types css */
  279.  
  280. .question {
  281. width:440px;
  282. padding:20px 10px 25px 10px;
  283. margin:-11px 0px 0px -11px;
  284. text-align:center;
  285. color:{color:accent text};
  286. background-color:{color:accent};
  287. border:1px solid {color:border};
  288.  
  289. }
  290.  
  291. .askerdiv {
  292. padding:5px;
  293. margin-top:-12.5px;
  294. text-align:center;
  295. border:1px solid {color:border};
  296. background-color:{color:posts};
  297. color:{color:accent};
  298. text-transform:lowercase;
  299. font-size:13px;
  300. }
  301.  
  302. .askerdiv a {
  303. color:{color:accent};
  304. font-weight:700;
  305. border:none;
  306. padding:none;
  307. }
  308.  
  309. .askerdiv a:hover{border:none;}
  310.  
  311. .answer {margin:10px;}
  312.  
  313. .quotepost {text-align:center;}
  314.  
  315. .quotediv {
  316. font-size:20px;
  317. width:440px;
  318. background-color:{color:accent};
  319. color:{color:accent text};
  320. padding:15px 15px 30px 15px;
  321. text-transform:lowercase;
  322. margin:-10px 0px 0px -10px;
  323. line-height:110%;
  324. }
  325.  
  326. .quoteinfo {
  327. margin-top:-15px;
  328. border:1px solid {color:border};
  329. color:{color:accent};
  330. font-weight:600;
  331. padding:5px 10px;
  332. background-color:{color:posts};
  333. margin-bottom:10px;
  334. text-transform:lowercase;
  335. font-size:13px;
  336. }
  337.  
  338. .chat {padding:20px;}
  339.  
  340. .audioplayer {
  341. text-align:left;
  342. background-color:{color:accent};
  343. padding:10px 0px 10px 10px;
  344. margin:-10px 0px 0px -10px;
  345. width:440px;
  346. height:27.5px;
  347. }
  348.  
  349. .audioinfo {
  350. color:{color:accent text};
  351. width:96%;
  352. font-size:10px;
  353. text-align:right;
  354. margin-top:-30px;
  355. letter-spacing:0.4px;
  356. font-weight:600;
  357. font-family: "mont light";
  358. line-height:90%;
  359. }
  360.  
  361. .audioinfo div {
  362. font-family: "mont heavy";
  363. font-size:11px;
  364. margin-top:2px;
  365. }
  366.  
  367. .readmore {
  368. width:100%;
  369. text-align:center;
  370. padding:10px 0px;
  371. margin-bottom:10px;
  372. }
  373.  
  374. .readmore a {
  375. text-transform:uppercase;
  376. font-size:12px;
  377. padding:0px 12px 5px 12px;
  378. color:{color:accent};
  379. border:1px solid transparent;
  380. font-family: "mont heavy";
  381. border-bottom:1px solid {color:accent};
  382. }
  383.  
  384. .readmore a:hover {
  385. color:{color:text};
  386. border-bottom:1px solid {color:text};
  387. }
  388.  
  389. .photoset-grid {grid-gap: 2px;}
  390. [photoset-layout] div {
  391. cursor: pointer;
  392. }
  393.  
  394. /* sidebar css */
  395.  
  396. .sidebar {
  397. width:250px;
  398. height:auto;
  399. position:fixed;
  400. margin:200px 0px 0px -300px;
  401. background-color:{color:accent};
  402. border:1px solid {color:border};
  403. }
  404.  
  405.  
  406. .sidebarimg {
  407. position:relative;
  408. background-color:{color:border};
  409. width:250px;
  410. height:140px;
  411. z-index:4;
  412. }
  413.  
  414. .sidebarimg img {
  415. width:100%;
  416. height:100%;
  417. {block:IfGrayscaleSidebar}
  418. -webkit-filter: grayscale(100%);
  419. filter: grayscale(100%);
  420. {/block:IfGrayscaleSidebar}
  421. -moz-transition-duration:0.8s;
  422. -webkit-transition-duration:0.8s;
  423. -o-transition-duration:0.8s;
  424. }
  425.  
  426. .sidebarimg img:hover {
  427. width:100%;
  428. height:100%;
  429. {block:IfGrayscaleSidebar}
  430. -webkit-filter: grayscale(0%);
  431. filter: grayscale(0%);
  432. {/block:IfGrayscaleSidebar}
  433. -moz-transition-duration:0.8s;
  434. -webkit-transition-duration:0.8s;
  435. -o-transition-duration:0.8s;
  436. }
  437.  
  438. .sidebardesc {
  439. position:relative;
  440. width:200px;
  441. padding:15px;
  442. margin:-20px 0px 0px 9px;
  443. border:1px solid {color:border};
  444. background-color:{color:posts};
  445. z-index:5;
  446. line-height:150%;
  447. text-align:center;
  448. }
  449.  
  450. .sidebardesc b {
  451. color:{color:accent};
  452. text-transform:uppercase;
  453. }
  454.  
  455. .sidebarlinks {
  456. width:100%;
  457. text-align:center;
  458. margin:7px 0px;
  459. color:{color:accent text};
  460. font-family: "mont light";
  461. font-size:17px;
  462. }
  463.  
  464. .sidebarlinks div {
  465. display:inline-block;
  466. margin:7.5px 5px;
  467. }
  468.  
  469. {block:IfJelloEffectOnLinks}
  470. .sidebarlinks div:hover {animation: jello 1s;}
  471. {/block:IfJelloEffectOnLinks}
  472.  
  473. .sidebarlinks div a {
  474. color:{color:accent text};
  475. border:none;
  476. padding:none;
  477. }
  478. .sidebarlinks div a:hover {
  479. color:{color:sidelinks hover};
  480. border-bottom:none;
  481. }
  482.  
  483. .pagi {
  484. position:relative;
  485. width:100%;
  486. font-size:10px;
  487. margin:10px 0px -14px 0px;
  488. text-align:center;
  489. color:{color:accent};
  490. }
  491.  
  492. /* side tab css */
  493.  
  494. .tabcontent {
  495. width:230px;
  496. height:400px;
  497. padding:15px;
  498. margin:80px 0px 0px 60px;
  499. position:absolute;
  500. background-color:{color:posts};
  501. border-radius:7.5px;
  502. z-index:999999999;
  503. display:none;
  504. animation: fadeIn 0.8s;
  505. }
  506.  
  507. .close {
  508. position:absolute;
  509. font-size:17px;
  510. color:{color:accent};
  511. z-index:9999999;
  512. -moz-transition-duration:0.8s;
  513. -webkit-transition-duration:0.8s;
  514. -o-transition-duration:0.8s;
  515. }
  516. .close:hover {
  517. cursor: pointer;
  518. animation: tada 0.8s;
  519. -moz-transition-duration:0.8s;
  520. -webkit-transition-duration:0.8s;
  521. -o-transition-duration:0.8s;
  522. }
  523.  
  524. /* tumblr controls styling by cyantists */
  525. iframe.tmblr-iframe {
  526. z-index:99999999999999!important;
  527. top:0!important;
  528. right:0!important;
  529. opacity:0.4;
  530. /* delete invert(1) from here */
  531. filter:invert(1) contrast(150%);
  532. -webkit-filter:invert(1) contrast(150%);
  533. -o-filter:invert(1) contrast(150%);
  534. -moz-filter:invert(1) contrast(150%);
  535. -ms-filter:invert(1) contrast(150%);
  536. /* to here if your blog has a dark background */
  537. transform:scale(0.65);
  538. transform-origin:100% 0;
  539. -webkit-transform:scale(0.65);
  540. -webkit-transform-origin:100% 0;
  541. -o-transform:scale(0.65);
  542. -o-transform-origin:100% 0;
  543. -moz-transform:scale(0.65);
  544. -moz-transform-origin:100% 0;
  545. -ms-transform:scale(0.65);
  546. -ms-transform-origin:100% 0;}
  547.  
  548. iframe.tmblr-iframe:hover {
  549. opacity:0.6!important;}
  550. /* end control styling */
  551.  
  552. /* please please PLEASE don't remove this :) */
  553. .credit {
  554. position: fixed;
  555. bottom: 10px;
  556. right: 15px;
  557. font-size:14px;
  558. background-color:{color:accent};
  559. padding:6px 7px 7px 7px;
  560. border-radius:7.5px;
  561. color:{color:accent text};
  562. }
  563.  
  564. .credit a {color:{color:accent text};}
  565. .credit a:hover {color:{color:accent text};}
  566.  
  567. .credit b {color:{color:accent text}}
  568. .credit i {color:{color:accent text}}
  569.  
  570. .credit:hover {color:{color:title};}
  571.  
  572. .creditinfo {
  573. display:none;
  574. padding:5px;
  575. text-align:center;
  576. position: fixed;
  577. bottom: 40px;
  578. right: 15px;
  579. font-size:9px;
  580. background-color:{color:posts};
  581. animation: bounceIn 0.8s;
  582. border:1px solid {color:border};
  583. }
  584.  
  585. .credit:hover + .creditinfo {
  586. display:block;
  587. }
  588.  
  589. .fancyfont {
  590. text-transform:uppercase;
  591. font-weight:900;
  592. color:{color:accent};
  593. font-style: italic;
  594. }
  595. /* end of credit */
  596.  
  597.  
  598. </style>
  599. </head>
  600. <body>
  601.  
  602.  
  603. <!-- entries start -->
  604.  
  605. <div class="entries">
  606.  
  607.  
  608. <div class="sidebar">
  609. <div class="sidebarimg"><img src="{image:sidebar}"></div>
  610. {block:IfCustomDescription}
  611. <div class="sidebardesc">{text:description}</div>
  612. {/block:IfCustomDescription}
  613. {block:IfNotCustomDescription}
  614. <div class="sidebardesc">{Description}</div>
  615. {block:IfNotCustomDescription}
  616. <div class="sidebarlinks">
  617. <div><a href="/">refresh</a>.</div>
  618. <div><a href="/ask">inbox</a>.</div><br>
  619. <div><a href="{text:link one}">{text:link one title}</a>.</div>
  620. <div><a href="{text:link two}">{text:link two title}</a>.</div>
  621. </div>
  622. {block:Pagination}
  623. <div class="pagi">
  624. {block:PreviousPage}<a href="{PreviousPage}">previous </a> &nbsp;|{/block:PreviousPage} &nbsp;{block:NextPage}<a href="{NextPage}">forward </a>{/block:NextPage}
  625. </div>
  626. {/block:Pagination}
  627. </div>
  628.  
  629. {block:Posts}
  630. <div class="post" id="{PostID}">
  631.  
  632. {block:Text}
  633. {block:Title}<h1>{Title}</h1>{/block:Title}
  634. <div style=padding:10px>{Body}</div>
  635. {/block:Text}
  636.  
  637. {block:Quote}
  638. <div class="quotepost">
  639. <div class="quotediv">"{Quote}"</div>
  640. {block:Source}
  641. <div class="quoteborder"></div>
  642. <div class="quoteinfo">— {Source}</div>
  643. {/block:Source}
  644. </div>
  645. {/block:Quote}
  646.  
  647. {block:Chat}
  648. <div class="chat">
  649. {block:Title}<h1>{Title}</h1>{/block:Title}
  650. {block:Lines}
  651. {block:Label}<b>{Label}</b>{/block:Label}
  652. {Line}<br>
  653. {/block:Lines}
  654. </div>
  655. {/block:Chat}
  656.  
  657. {block:Video}
  658. <div class="video">{Video-500}</div>
  659. {block:Caption}{Caption}{/block:Caption}
  660. {/block:Video}
  661.  
  662. {block:Photo}
  663. <img src="{PhotoURL-500}" style="width:100%">
  664. {block:Caption}{Caption}{/block:Caption}
  665. {/block:Photo}
  666.  
  667. {block:Photoset}
  668. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  669. {block:Caption}{Caption}{/block:Caption}<br>
  670. {/block:Photoset}
  671.  
  672. {block:Link}
  673. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  674. {block:Description}{Description}{/block:Description}
  675. {/block:Link}
  676.  
  677. {block:More}
  678. <div class="readmore">
  679. <a href="{Permalink}" class="more-btn">read more</a>
  680. </div>{/block:More}
  681.  
  682. {block:AudioPlayer}
  683. <div class="audioplayer">{AudioPlayer}
  684. <div class="audioinfo">
  685. {block:TrackName}<div>{TrackName}</div>{/block:TrackName}
  686. {block:Artist}<br/>{Artist}{/block:Artist}
  687. </div>
  688. </div>
  689. {block:Caption}{Caption}{/block:Caption}
  690. {/block:AudioPlayer}
  691.  
  692. {block:Answer}
  693. <div class="question">{Question}</div>
  694. <div class="askerdiv">asked by <b>{Asker}</b></div>
  695. <div class="answer">{Answer}</div>
  696. {/block:Answer}
  697.  
  698. <!-- to hide source and via on posts-->
  699. {block:ContentSource}<div style="display: none;">{SourceURL}</div>{/block:ContentSource}
  700.  
  701. {block:NoRebloggedFrom}<div style="display: none;">
  702. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  703. </div>{/block:NoRebloggedFrom}
  704.  
  705.  
  706. {block:Date}
  707. <div class="postinfo">
  708. <span style="margin-left:5px;padding-right:10px;border-right:1px solid {color:border}">
  709. <a href="{Permalink}">{TimeAgo}</a>
  710. {block:NoteCount} and <a href="{Permalink}">{NoteCountWithLabel}</a>
  711. {/block:NoteCount}
  712. </span>
  713. <span style="float:right; marign-right:25px;padding-left:10px;border-left:1px solid {color:border}"><a href="{ReblogURL}">reblog this post</a></span>
  714. </div>
  715. {/block:Date}
  716.  
  717. </div>
  718.  
  719. {block:HasTags}<div class="tags">
  720. {block:Tags}
  721. <span style="margin-right:1px; font-size:13px; font-weight:700; color:{color:accent}">#</span><a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;
  722. {/block:Tags}
  723. </div>{/block:HasTags}
  724.  
  725. <div class="postnote">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  726.  
  727. {/block:Posts}
  728.  
  729. <!-- do not touch pls -->
  730. <a href="https://jinsoouls.tumblr.com/" class="credit"><b><i>J</i></b>.</a>
  731. <div class="creditinfo">
  732. coded by <br><span class="fancyfont">jinsoouls</span>
  733. </div>
  734. <!-- credit end-->
  735.  
  736. </body>
  737. </html>
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!