API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 21st, 2018
147
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.58 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Circadium by Laighlin
  4.  
  5. 1. don't move the credit (you can customize how it looks)
  6. 2. don't redistribute or lift large chunks of code
  7. 3. hit me up if there's any problemos
  8. note: some of the time-based options will take a few seconds to load!
  9. note 2: please check my faq before asking about the unlimited links.
  10. note 3: because of the way the interpolator works (in order to keep the background as vivid as possible and not let it get murky when transitioning) some color combinations for the sky might give you unexpected intermediate color stages - for example, transitioning from a blue afternoon sky to a yellow sunset one will inevitably make the sky green for a while in between, there's no way around it. this is not a bug, it simply can't be helped. i suggest fiddling with your system clock a bit to make sure all stages of the cycle are to your liking when customizing colors.)
  11.  
  12. -->
  13.  
  14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  15. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  16. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  17. <head><title>{Title}{block:PostSummary} // {PostSummary}{/block:PostSummary}</title>
  18. {block:ifNotCustomFavicon}
  19. <link rel="shortcut icon" href="{Favicon}">
  20. {/block:ifNotCustomFavicon}{block:ifCustomFavicon}
  21. <link rel="shortcut icon" href="{image:favicon}">
  22. {/block:ifCustomFavicon}
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24. <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i" rel="stylesheet">
  25. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  26.  
  27. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  28. <script type="text/javascript" src="http://static.tumblr.com/xwoxjom/qZEomxmlz/color-converters.js"></script>
  29. <link href="#s-m-t-tooltip" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  30.  
  31. <meta name="color:background day" content="#7fcad4"/>
  32. <meta name="color:background evening" content="#ce4477"/>
  33. <meta name="color:background night" content="#1d2c41"/>
  34. <meta name="color:gradient day" content="#fff"/>
  35. <meta name="color:gradient evening" content="#dfc359"/>
  36. <meta name="color:gradient night" content="#040e1d"/>
  37.  
  38. <meta name="image:favicon" content=""/>
  39. <meta name="image:sidebar image" content=""/>
  40. <meta name="if:custom favicon" content="0"/>
  41. <meta name="if:500 px posts" content="0"/>
  42. <meta name="if:sliding description" content="0"/>
  43. <meta name="if:sidebar image" content="0"/>
  44. <meta name="if:natural time cycle" content="1"/>
  45. <meta name="if:sun and moon" content="1"/>
  46.  
  47. <meta name="select:time of day" title="day" content="hr=12;"/>
  48. <meta name="select:time of day" title="dusk/dawn" content="hr=6;"/>
  49. <meta name="select:time of day" title="night" content="hr=0;"/>
  50.  
  51. <meta name="color:daytime text" content="#444"/>
  52. <meta name="color:daytime text background" content="#fff"/>
  53. <meta name="color:daytime text accent 1" content="#98c36c"/>
  54. <meta name="color:daytime text accent 2" content="#ffa125"/>
  55. <meta name="color:daytime borders" content="#f58aae"/>
  56. <meta name="color:nighttime text" content="#fff"/>
  57. <meta name="color:nighttime text background" content="#18101a"/>
  58. <meta name="color:nighttime text accent 1" content="#d7abe5"/>
  59. <meta name="color:nighttime text accent 2" content="#6393c1"/>
  60. <meta name="color:nighttime borders" content="#925c9d"/>
  61. <meta name="color:selection text" content="#fff"/>
  62. <meta name="color:selection bg" content="#53475a"/>
  63.  
  64. <!-- text fields -->
  65. <meta name="text:accent font" content="Lato"/>
  66. <meta name="text:body font" content="Calibri"/>
  67. <meta name="text:body font size" content="14px"/>
  68.  
  69. <style type="text/css">
  70.  
  71. body {
  72. margin:0px;
  73. color:{color:post text};
  74. font-family:'{text:body font}',sans-serif;
  75. font-size:{text:body font size};
  76. word-wrap:break-word;
  77. }
  78.  
  79. a.tumblr_blog {
  80. font-weight:bold;
  81. }
  82.  
  83. #background {
  84. top:0;
  85. left:0;
  86. bottom:0;
  87. right:0;
  88. position:fixed;
  89. transition:.2s background linear;
  90. }
  91.  
  92. #yeehaw {
  93. position:absolute;
  94. top:0;
  95. bottom:0;
  96. left:0;
  97. right:0;
  98. }
  99.  
  100. a#cred {
  101. padding:5px;
  102. position:fixed;
  103. bottom:15px;
  104. left:15px;
  105. font-size:18px;
  106. line-height:18px;
  107. border-radius:4px;
  108. z-index:999;
  109. }
  110.  
  111. a, .links, .tags {
  112. transition:.2s ease-in-out;
  113. }
  114.  
  115. a {
  116. text-decoration:none;
  117. outline:none;
  118. -moz-outline-style:none;
  119. color:inherit;
  120. }
  121.  
  122. .post a { text-decoration:underline; }
  123.  
  124. p:last-child {
  125. margin-bottom:3px;
  126. }
  127.  
  128. p:first-child {
  129. margin-top:3px;
  130. }
  131.  
  132. img {
  133. border:none;
  134. max-height:100%;
  135. max-width:100%;
  136. }
  137.  
  138. blockquote, blockquote blockquote {
  139. padding-left:7px;
  140. margin:0 1px;
  141. border-left:1px solid;
  142. border-color:inherit;
  143. }
  144.  
  145. blockquote.tumblr_parent {
  146. border:none;
  147. margin-left:-5px;
  148. padding:none;
  149. }
  150.  
  151. img.tumblr_avatar {
  152. height:16px;
  153. border-radius:3px;
  154. position:relative;
  155. top:3px;
  156. right:4px;
  157. }
  158.  
  159. h1 {
  160. font-size:130%;
  161. }
  162.  
  163. ::selection {
  164. background: {color:selection bg};
  165. color: {color:selection text};
  166. }
  167.  
  168. ::-moz-selection {
  169. background: {color:selection bg};
  170. color: {color:selection text};
  171. }
  172.  
  173. ::-webkit-scrollbar {
  174. width:7px;
  175. height:7px;
  176. }
  177.  
  178. ::-webkit-scrollbar-thumb {
  179. border:4px solid;
  180. border-color:inherit;
  181. }
  182.  
  183. /* Track */
  184. ::-webkit-scrollbar-track {
  185. background:inherit;
  186. }
  187.  
  188. ::-webkit-scrollbar-corner {
  189. background:transparent;
  190. }
  191.  
  192. #s-m-t-tooltip {
  193. z-index:999999;
  194. pointer-events:none;
  195. margin:0 15px;
  196. background:{color:selection bg};
  197. color:{color:selection text};
  198. padding:5px;
  199. border-radius:3px;
  200. }
  201.  
  202. #grad, #undergrad, #postgrad {
  203. position:fixed;
  204. width:100%;
  205. height:50%;
  206. bottom:0;
  207. transition:2s all linear;
  208. }
  209.  
  210. #undergrad, #postgrad {
  211. opacity:0;
  212. }
  213.  
  214. #grad {
  215. background:linear-gradient(to bottom,transparent,{color:gradient day} 110%);
  216. opacity:0;
  217. }
  218.  
  219. #undergrad {
  220. background:linear-gradient(to bottom,transparent,{color:gradient evening} 110%);
  221. }
  222.  
  223. #postgrad {
  224. background:linear-gradient(to bottom,transparent,{color:gradient night} 110%);
  225. }
  226.  
  227. #lune .fa, #lune .moon, #sol .fa { position:absolute; }
  228.  
  229. #lune, #sol {
  230. position:absolute;
  231. top:-200px;
  232. left:120px;
  233. right:120px;
  234. height:10px;
  235. }
  236.  
  237. #lune .moon {
  238. height:80px;
  239. width:80px;
  240. border-radius:50%;
  241. box-shadow:20px 20px 0 0 #f4f1a7;
  242. top:120px;
  243. }
  244.  
  245. #lune .fa-star {
  246. color:#ffeedd;
  247. opacity:.8;
  248. }
  249.  
  250. .one {
  251. font-size:30px;
  252. top:-50px;
  253. left:100px;
  254. }
  255.  
  256. .two {
  257. font-size:20px;
  258. top:40px;
  259. left:300px;
  260. transform:rotate(20deg);
  261. }
  262.  
  263. .three {
  264. font-size:15px;
  265. top:50px;
  266. left:50%;
  267. transform:rotate(-20deg);
  268. }
  269.  
  270. .four {
  271. font-size:60px;
  272. right:30px;
  273. transform:rotate(30deg);
  274. }
  275.  
  276. .five {
  277. font-size:12px;
  278. top:150px;
  279. right:140px;
  280. }
  281.  
  282. #sol .fa-circle {
  283. color:#ffdc0a;
  284. font-size:100px;
  285. right:0;
  286. }
  287.  
  288. #sol .fa-cloud {
  289. color:#f0f0f0;
  290. }
  291.  
  292. .ek {
  293. right:0;
  294. font-size:100px;
  295. top:40px;
  296. right:-40px;
  297. transform: scaleX(-1);
  298. filter: FlipH;
  299. ms-filter: "FlipH";
  300. }
  301.  
  302. .dui {
  303. right:30px;
  304. top:40px;
  305. opacity:.7;
  306. font-size:80px;
  307. z-index:-1;
  308. }
  309.  
  310. .teen {
  311. right:50%;
  312. font-size:50px;
  313. top:170px;
  314. opacity:.9;
  315. }
  316.  
  317. .char {
  318. font-size:70px;
  319. opacity:.7;
  320. }
  321.  
  322. #post_container {
  323. position:absolute;
  324. right:calc(50% - 400px);
  325. {block:if500pxposts}
  326. width:600px;
  327. {/block:if500pxposts}
  328. {block:ifnot500pxposts}
  329. width:500px;
  330. {/block:ifnot500pxposts}
  331. padding:10px;
  332. }
  333.  
  334. #entries {
  335. margin-top:40px;
  336. }
  337.  
  338. .postwrap {
  339. position:relative;
  340. border-spacing:15px;
  341. margin:60px auto;
  342. border-radius:4px;
  343. overflow:hidden;
  344. {block:if500pxposts}
  345. width:500px;
  346. {/block:if500pxposts}
  347. {block:ifnot500pxposts}
  348. width:400px;
  349. {/block:ifnot500pxposts}
  350. }
  351.  
  352. .post {
  353. position:relative;
  354. }
  355.  
  356. .media_wrap { line-height:0; }
  357.  
  358. .quo {
  359. display:block;
  360. font:120% {text:accent font};
  361. text-indent:10px;
  362. }
  363.  
  364. .pad.quote_source {
  365. text-align:right;
  366. }
  367. .pad.quote_source:before {
  368. content:'\2014';
  369. }
  370.  
  371. .quo .fa-quote-left {
  372. font-size:25px;
  373. position:absolute;
  374. opacity:.3;
  375. left:-5px;
  376. }
  377.  
  378. .pad.title {
  379. font:130% {text:accent font};
  380. text-transform:uppercase;
  381. text-align:center;
  382. width:100%;
  383. position:relative;
  384. margin:0;
  385. background:;
  386. display:block;
  387. text-decoration:none;
  388. }
  389.  
  390. .pad.ques {
  391. border-bottom:1px solid;
  392. border-color:inherit;
  393. }
  394.  
  395. .pad.ques img {
  396. border-radius:50%;
  397. }
  398.  
  399. .asker { top:-7px; margin-left:3px; position:relative; }
  400.  
  401. .pad.ans {
  402. text-align:right;
  403. }
  404.  
  405. .song {
  406. line-height:0;
  407. height:85px;
  408. overflow:hidden;
  409. }
  410.  
  411. .pad {
  412. padding:5px 7px;
  413. position:relative;
  414. }
  415. .pad:empty { display:none; }
  416.  
  417. .post:last-child { margin-bottom:30px; }
  418.  
  419. .info.top {
  420. width:calc(100% - 10px);
  421. flex-grow:2;
  422. padding:5px;
  423. border-bottom:1px solid;
  424. font:100% {text:accent font};
  425. letter-spacing:1px;
  426. }
  427.  
  428. .date {
  429. line-height:20px;
  430. margin:2px;
  431. position:relative;
  432. }
  433.  
  434. .date .fa-calendar { top:-1px; position:relative; }
  435.  
  436. .viasrc {
  437. display:inline-block;
  438. float:right;
  439. height:20px;
  440. width:20px;
  441. border-radius:50%;
  442. margin:0 2px;
  443. }
  444.  
  445. .info.bottom {
  446. position:relative;
  447. display:block;
  448. border-top:7px solid;
  449. border-color:inherit;
  450. padding:7px 8px;
  451. }
  452.  
  453. .tag_wrap {
  454. margin-bottom:4px;
  455. }
  456.  
  457. a.tags {
  458. margin:2px;
  459. }
  460.  
  461. a.tags:hover { text-decoration:underline; }
  462.  
  463. .rlbuttons {
  464. width:35px;
  465. height:20px;
  466. z-index:2;
  467. list-style:none;
  468. text-align:center;
  469. right:-2px;
  470. bottom:2px;
  471. position:absolute;
  472. display:inline-block;
  473. line-height:0;
  474. }
  475.  
  476. .reblog-button{
  477. position:absolute;
  478. margin-top:-2px;
  479. margin-left:-24px;
  480. font-size:19px;
  481. }
  482.  
  483. .like {
  484. position: relative;
  485. line-height:0;
  486. }
  487.  
  488. #note_wrap {
  489. text-align:center;
  490. max-height:350px;
  491. overflow-y:auto;
  492. overflow-x:hidden;
  493. }
  494.  
  495. #note_wrap ol.notes {
  496. list-style-type:none;
  497. margin:5px;
  498. padding:5px;
  499. }
  500.  
  501. #note_wrap ol.notes img.avatar {
  502. margin-right:5px;
  503. margin-bottom:-3px;
  504. width:16px;
  505. height:16px;
  506. border-radius:3px;
  507. }
  508.  
  509. #note_wrap ol.notes li {
  510. padding:3px;
  511. }
  512.  
  513. .day_colors .like svg path, .day_colors .reblog-button i {
  514. fill:{color:daytime text accent 1};
  515. }
  516.  
  517. .night_colors .like svg path, .night_colors .reblog-button i {
  518. fill:{color:nighttime text accent 1};
  519. }
  520.  
  521. .like .lbtn {
  522. position: absolute;
  523. margin-top:0;
  524. left:0;
  525. opacity:0;
  526. z-index:999;
  527. }
  528.  
  529. .like .like_button.liked {
  530. opacity: 1;
  531. }
  532.  
  533. #simg {
  534. width:220px;
  535. padding:10px;
  536. border:1px solid;
  537. border-color:inherit;
  538. border-radius:5px;
  539. margin-bottom:10px;
  540. margin-left:-11px;
  541. line-height:0;
  542. }
  543.  
  544. #title, #desc { padding:10px; }
  545.  
  546. #desc {
  547. border-top:1px solid;
  548. border-color:inherit;
  549. text-align:center;
  550. {block:ifSlidingDescription}
  551. display:none;
  552. {/block:ifSlidingDescription}
  553. }
  554.  
  555. #title {
  556. display:block;
  557. text-align:right;
  558. text-transform:uppercase;
  559. font:140% {text:accent font};
  560. color:inherit;
  561. cursor:pointer;
  562. }
  563.  
  564. #title .fa-chevron-down {
  565. float:left;
  566. position:relative;
  567. left:-7px;
  568. top:2px;
  569. }
  570.  
  571. #sidebar {
  572. width:267px;
  573. height:100%;
  574. position:fixed;
  575. {block:if500pxposts}
  576. right:calc(50% + 220px);
  577. {/block:if500pxposts}
  578. {block:ifnot500pxposts}
  579. right:calc(50% + 120px);
  580. {/block:ifnot500pxposts}
  581. display:flex;
  582. flex-flow:column nowrap;
  583. justify-content:center;
  584. }
  585.  
  586. #upperleft {
  587. position:relative;
  588. z-index:99;
  589. font:13px consolas, monospace;
  590. border-right:7px solid;
  591. padding-left:10px;
  592. border-radius:4px 0 0 4px;
  593. }
  594.  
  595. #link_wrap {
  596. position:relative;
  597. font:105% {text:accent font};
  598. counter-resent:linx;
  599. }
  600.  
  601. #nav { text-transform:uppercase; }
  602.  
  603. a.links {
  604. counter-increment:linx;
  605. display:inline-block;
  606. position:relative;
  607. padding:4px 6px 4px 4px;
  608. border-color:inherit;
  609. color:inherit;
  610. }
  611.  
  612. a.links:before { content:"."counter(linx,decimal-leading-zero) }
  613.  
  614. #pagination {
  615. right:calc(50% - 480px);
  616. width:80px;
  617. top:55px;
  618. position:fixed;
  619. bottom:55px;
  620. display:flex;
  621. flex-flow:column nowrap;
  622. justify-content:center;
  623. }
  624.  
  625. a.pag {
  626. margin:13px 0;
  627. color:inherit;
  628. padding:5px 5px 5px 3px;
  629. border-radius:0 4px 4px 0;
  630. border-left:7px solid;
  631. text-transform:uppercase;
  632. text-align:center;
  633. width:45px;
  634. font:15px consolas;
  635. }
  636.  
  637. a.pag:not(.cur):hover {
  638. padding-left:15px;
  639. }
  640.  
  641. a.cur.pag {
  642. padding-right:20px;
  643. pointer-events:none;
  644. }
  645.  
  646. .day_colors {
  647. border-color:{color:daytime borders} !important;
  648. background-color:rgba({RGBcolor:daytime text background},1);
  649. color:{color:daytime text};
  650. }
  651.  
  652. .day_colors blockquote { border-color:{color:daytime borders}; }
  653.  
  654. .day_colors i, .day_colors em, .day_colors b, .day_colors strong, .day_colors a:hover, .day_colors #desc a:hover, .day_colors .like svg path, .day_colors .reblog-button i {
  655. color:{color:daytime text accent 1};
  656. fill:{color:daytime text accent 1};
  657. }
  658.  
  659. /*.day_colors a:tags:hover*/
  660.  
  661. .day_colors #desc a, .day_colors a.tags { color:{color:daytime text accent 2}; }
  662.  
  663. .night_colors {
  664. border-color:{color:nighttime borders} !important;
  665. background-color:rgba({RGBcolor:nighttime text background},.8);
  666. color:{color:nighttime text};
  667. }
  668.  
  669. .night_colors blockquote { border-color:{color:nighttime borders}; }
  670.  
  671. .night_colors i, .night_colors em, .night_colors b, .night_colors strong, .night_colors a:hover, .night_colors #desc a:hover, .night_colors a.tags:hover, .night_colors .like svg path, .night_colors .reblog-button i {
  672. color:{color:nighttime text accent 1};
  673. fill:{color:nighttime text accent 1};
  674. }
  675.  
  676. .night_colors #desc a, .night_colors a.tags { color:{color:nighttime text accent 2}; }
  677.  
  678. .night_colors .song { filter:invert(100%); }
  679.  
  680. {CustomCSS}</style>
  681.  
  682. <script> //please be very careful if you plan to change anything affected by this portion of the code
  683. $(document).ready(function() {
  684. $("[title]").style_my_tooltips({
  685. tip_follows_cursor:true,
  686. tip_delay_time:100,
  687. tip_fade_speed:300
  688. });
  689.  
  690. {block:ifSlidingDescription}
  691. $("#title").click(function() {
  692. $("#desc").slideToggle(300);
  693. $(".fa-chevron-down").toggleClass("fa-rotate-180");
  694. });
  695. {/block:ifSlidingDescription}
  696.  
  697. function tick() {
  698. dt = new Date();
  699. var hr = dt.getHours();
  700. {block:ifNotNaturalTimeCycle}
  701. hr = {select:time of day};
  702. {/block:ifNotNaturalTimeCycle}
  703. sec = (hr*3600)+(dt.getMinutes()*60)+dt.getSeconds();
  704. var time = (hr<10 ? '0':'')+hr+':'+(dt.getMinutes()<10 ? '0':'')+dt.getMinutes();
  705. var tod, tod_name, s; // time of day, name of time, and seconds in a quarter
  706. if(hr>=0 && hr<6)
  707. tod_name = 'dawnward', tod = 1; //assigning the quarter to a variable with values 1-4 to keep track of it more easily
  708. if(hr>=6 && hr<12)
  709. tod_name = 'dayward', tod = 2;
  710. if(hr>=12 && hr<18)
  711. tod_name = 'duskward', tod = 3;
  712. if(hr>=18)
  713. tod_name = 'nightward', tod = 4;
  714. s=(sec%21600)/21600; // taking the modulus of the number of seconds in a quarter day (six hours equals 21,600 seconds) causes the counter to reset every quarter. then divide by the number of seconds to measure cycle progress as a fraction
  715. bg_change(tod,s);
  716. grd_change(tod,s);
  717. if(hr>19 || hr<4) {
  718. palette(1);
  719. $('iframe.tumblr_audio_player').load( function() {
  720. $('iframe.tumblr_audio_player').contents().find("head")
  721. .append($("<style type='text/css'> .audio-image{filter:invert(100%)} </style>"));
  722. });
  723. }
  724. else {
  725. palette(2);
  726. }
  727. }
  728.  
  729. tick();
  730. {block:ifNaturalTimeCycle}
  731. setInterval(tick, 60000); // causes the function to run every minute - useless if you do not want time progression
  732. {/block:ifNaturalTimeCycle}
  733.  
  734. function palette(f) { //changes colors of non-background elements
  735. if(f==1)
  736. $('body, #simg, #upperleft, .post, .info, #cred, .pag, #note_wrap').removeClass("day_colors").addClass("night_colors");
  737. else
  738. $('body, #simg, #upperleft, .post, .info, #cred, .pag, #note_wrap').removeClass("night_colors").addClass("day_colors");
  739. }
  740.  
  741. function grd_change(hr,spc) {
  742. switch(hr) {
  743. case 1: { //dawnward
  744. $('#grad').css('opacity','0');
  745. leave('#postgrad',spc);
  746. enter('#undergrad',spc);
  747. break;
  748. }
  749. case 2: { //dayward
  750. $('#postgrad').css('opacity','0');
  751. leave('#undergrad',spc);
  752. enter('#grad',spc);
  753. break;
  754. }
  755. case 3: { //duskward
  756. $('#postgrad').css('opacity','0');
  757. leave('#grad',spc);
  758. enter('#undergrad',spc);
  759. break;
  760. }
  761. case 4: { //nightward
  762. $('#grad').css('opacity','0');
  763. leave('#undergrad',spc);
  764. enter('#postgrad',spc);
  765. break;
  766. }
  767. }
  768. }
  769.  
  770. function leave(g, percent) {
  771. percent = 1 - percent;
  772. $(g).css('opacity', percent);
  773. }
  774.  
  775. //these two functions use (progress along quarter)/(total number of seconds in a quarter) as the opacity factor for the gradients, inverting the value if the gradient is fading out instead of in
  776.  
  777. function enter(g, percent) {
  778. $(g).css('opacity', percent);
  779. }
  780.  
  781. function bg_change(hr,spc) { //so the converter knows its start and end states depending on time
  782. var startbg, endbg;
  783. switch(hr) {
  784. case 1: {
  785. startbg = r2h({RGBcolor:background night}),
  786. endbg = r2h({RGBcolor:background evening});
  787. break;
  788. }
  789. case 2: {
  790. startbg = r2h({RGBcolor:background evening}),
  791. endbg = r2h({RGBcolor:background day});
  792. break;
  793. }
  794. case 3: {
  795. startbg = r2h({RGBcolor:background day}),
  796. endbg = r2h({RGBcolor:background evening});
  797. break;
  798. }
  799. case 4: {
  800. startbg = r2h({RGBcolor:background evening}),
  801. endbg = r2h({RGBcolor:background night});
  802. break;
  803. }
  804. }
  805. var newbg = hsl_col_perc(spc,startbg,endbg);
  806. $('#background').css('background-color', 'hsl('+newbg[0]+','+newbg[1]+'%,'+newbg[2]+'%)');
  807. }
  808.  
  809. function r2h(r, g, b) { // just a basic RGB to HSL conversion algo - credit to Pankaj Parashar!
  810. r /= 255, g /= 255, b /= 255;
  811. var max = Math.max(r, g, b),
  812. min = Math.min(r, g, b),
  813. h, s, l = (max + min) / 2;
  814. if (max == min) { h = s = 0; }
  815. else {
  816. var d = max - min;
  817. s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  818.  
  819. switch (max){
  820. case r: h = (g - b) / d + (g < b ? 6 : 0); break;
  821. case g: h = (b - r) / d + 2; break;
  822. case b: h = (r - g) / d + 4; break;
  823. }
  824.  
  825. h=Math.round(h*60 % 360);
  826. }
  827. s=Math.round(s*100);l=Math.round(l*100);
  828. return [h,s,l];
  829. }
  830.  
  831. function hsl_col_perc(a,hsl1,hsl2) {
  832. b = (hsl2[0] - hsl1[0]) * a;
  833. c = Math.round(hsl1[0] + b);
  834. d = (hsl2[1] - hsl1[1]) * a,
  835. e = Math.round(d + hsl1[1]);
  836. f = (hsl2[2] - hsl1[2]) * a,
  837. g = Math.round(f + hsl1[2]);
  838. return [c,e,g];
  839. };
  840. });
  841. </script>
  842.  
  843. </head><body>
  844.  
  845. <!-- Do not touch anything here unless you know what you're doing! This section is controlled by JavaScript, which is delicate - a single missing element can cause the whole thing to stop working. -->
  846. <div id="background"></div>
  847.  
  848. <div id="grad"> <!-- morning gradient -->
  849. {block:ifSunAndMoon}
  850. <div id="sol"> <!-- sun and clouds container -->
  851. <span class="fa fa-circle"></span>
  852. <span class="fa fa-cloud ek"></span>
  853. <span class="fa fa-cloud dui"></span>
  854. <span class="fa fa-cloud teen"></span>
  855. <span class="fa fa-cloud char"></span>
  856. </div>
  857. {/block:ifSunAndMoon}
  858. </div>
  859. <div id="undergrad"></div> <!-- sunrise/sunset gradient -->
  860. <div id="postgrad"> <!-- night gradient -->
  861. {block:ifSunAndMoon}
  862. <div id="lune"> <!-- moon and stars container -->
  863. <div class="moon"></div>
  864. <span class="fa fa-star one"></span>
  865. <span class="fa fa-star two"></span>
  866. <span class="fa fa-star three"></span>
  867. <span class="fa fa-star four"></span>
  868. <span class="fa fa-star five"></span>
  869. </div>
  870. {/block:ifSunAndMoon}
  871. </div>
  872. <!-- End of HTML stuff you shouldn't touch -->
  873.  
  874. <div id="yeehaw">
  875.  
  876. <div id="main_wrap">
  877. <a id="cred" href="http://linthm.tumblr.com/thm" title="Circadium by Laighlin"><span class="fa fa-code" aria-label="credit"></span></a>
  878. <div id="sidebar">
  879. <div id="upperleft">
  880. <a id="title" {block:ifNotSlidingDescription}href="/" {/block:ifNotSlidingDescription}>
  881. {block:ifSidebarImage}
  882. <div id="simg"><img src="{image:sidebar image}"></div>
  883. {/block:ifSidebarImage}
  884. <span {block:ifSlidingDescription}class="fa fa-chevron-down" aria-label="click for description"{/block:ifSlidingDescription}></span>{Title}</a>
  885. <div id="desc"><p>{Description}</p>
  886. <div id="link_wrap">
  887. <div id="nav">
  888. <a href="/">index</a>
  889. {block:AskEnabled} / <a href="/ask">ask</a>{/block:AskEnabled}
  890. {block:SubmissionsEnabled} / <a href="/submit">submit</a>{/block:SubmissionsEnabled}
  891. / <a href="/archive">past</a>
  892. </div>
  893. {block:Pages}<a href="{URL}" class="links" title="{Label}"></a>{/block:Pages}
  894. </div>
  895. </div>
  896. </div>
  897. </div>
  898.  
  899. <div id="post_container">
  900. <div id="entries">
  901. {block:Posts inlineMediaWidth="350"}
  902. <div class="postwrap">
  903. {block:Date}
  904. <div class="info top">
  905. <a class="date" href="{Permalink}" title="{TimeAgo}"><span class="fa fa-calendar"></span>&nbsp;{DayOfMonth}.{MonthNumber}.{Year}</a>
  906.  
  907. {block:RebloggedFrom}
  908. <a href="{ReblogRootURL}" title="posted by {ReblogRootName}"><img class="viasrc" src="{ReblogRootPortraitURL-48}"></a>
  909. <a href="{ReblogParentURL}" title="reblogged from {ReblogParentName}"><img class="viasrc" src="{ReblogParentPortraitURL-48}"></a>
  910. {/block:RebloggedFrom}
  911. </div>
  912. {/block:Date}
  913. <div class="post" id="{PostID}">
  914. {block:Text}
  915. {block:Title}<div class="pad title">{Title}</div>{/block:Title}
  916. <div class="pad">{Body}</div>
  917. {/block:Text}
  918.  
  919. {block:Quote}
  920. <div class="pad quo"><span class="fa fa-quote-left"></span>{Quote}</div>
  921. {block:Source}<div class="pad quote_source">{Source}</div>{/block:Source}
  922. {/block:Quote}
  923.  
  924. {block:Chat}
  925. <div class="pad">
  926. {block:Title}<div class="pad title">{Title}</div>{/block:Title}
  927. {block:Lines}
  928. <div class="chat">
  929. {block:Label}<b>{Label}</b>{/block:Label} {Line}
  930. </div>
  931. {/block:Lines}
  932. </div>
  933. {/block:Chat}
  934.  
  935. {block:Photo}
  936. <div class="media_wrap">{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}</div>
  937. {block:Caption}
  938. <div class="pad">{Caption}</div>
  939. {/block:Caption}
  940. {/block:Photo}
  941.  
  942. {block:Photoset}
  943. <div class="media_wrap">
  944. {block:if500pxposts}{Photoset-500}{/block:if500pxposts}
  945. {block:ifnot500pxposts}{Photoset-400}{/block:ifnot500pxposts}
  946. </div>
  947. {block:Caption}
  948. <div class="pad">{Caption}</div>
  949. {/block:Caption}
  950. {/block:Photoset}
  951.  
  952. {block:Video}
  953. <div class="media_wrap">
  954. {block:if500pxposts}{Video-500}{/block:if500pxposts}
  955. {block:ifnot500pxposts}{Video-400}{/block:ifnot500pxposts}
  956. </div>
  957. {block:Caption}
  958. <div class="pad">{Caption}</div>
  959. {/block:Caption}
  960. {/block:Video}
  961.  
  962. {block:Audio}
  963. <div class="song">
  964. {block:ifnot500pxposts}{AudioEmbed-400}{/block:ifnot500pxposts}
  965. {block:if500pxposts}{AudioEmbed-500}{/block:if500pxposts}
  966. </div>
  967. {block:Caption}<div class="pad caption">{Caption}</div>{/block:Caption}
  968. {/block:Audio}
  969.  
  970. {block:Link}
  971. <a class="pad title" href="{URL}"><span class="fa fa-external-link"></span> {Name}</a>
  972. <div class="pad">{block:Excerpt}<blockquote>{Excerpt}</blockquote>{/block:Excerpt}{block:Description}{Description}{/block:Description}</div>
  973. {/block:Link}
  974.  
  975. {block:Answer}
  976. <div class="pad ques"><img src="{AskerPortraitUrl-24}">{Asker}<br><i>{Question}</i></div>
  977. {block:Answerer}<div class="pad ans">{Answerer}:<br>{Answer}</div>{/block:Answerer}
  978. <div class="pad">{Replies}</div>
  979. {/block:Answer}
  980. </div>
  981. {block:Date}
  982. <div class="info bottom">
  983. {block:HasTags}<div class="tag_wrap">{block:Tags}<a class="tags" href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  984. <a href="{Permalink}">{NoteCountWithLabel}</a>
  985. <div class="rlbuttons">
  986. <span class="reblog-button"><a href="{ReblogUrl}" title="reblog"><i class="fa fa-retweet" aria-hidden="true"></i></a>
  987. </span>
  988. <span class="like">
  989. <svg width="15" height="15" viewBox="0 0 19 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><path d="M14.0425097,0.000920262799 C16.1435097,-0.0400797372 18.8835097,1.28192026 18.9635097,5.36992026 C19.0525097,9.95492026 15.1985097,13.3079203 9.48350967,16.2089203 C3.76650967,13.3079203 -0.0874903349,9.95492026 0.00150966509,5.36992026 C0.0815096651,1.28192026 2.82150967,-0.0400797372 4.92250967,0.000920262799 C7.02450967,0.0419202628 8.87050967,2.26592026 9.46950967,2.92792026 C10.0945097,2.26592026 11.9405097,0.0419202628 14.0425097,0.000920262799 Z"></path></svg>
  990. <span class="lbtn">{LikeButton size="15"}</span>
  991. </span>
  992. </div>
  993. </div>
  994. {/block:Date}
  995. {block:PostNotes}
  996. <div class="pad" id="note_wrap">
  997. {PostNotes}
  998. </div>
  999. {/block:PostNotes}
  1000. </div>
  1001. {/block:Posts}
  1002. </div>
  1003. </div>
  1004.  
  1005.  
  1006. <div id="pagination">
  1007. {block:PreviousPage}<a href="{PreviousPage}" class="pag">prev</a>{/block:PreviousPage}
  1008. {block:JumpPagination length="5"}
  1009. {block:CurrentPage}<a class="pag cur">{PageNumber}</a>{/block:CurrentPage}
  1010. {block:JumpPage}<a href="{URL}" class="pag num">{PageNumber}</a>{/block:JumpPage}
  1011. {/block:JumpPagination}
  1012. {block:NextPage}<a href="{NextPage}" class="pag">next</a>{/block:NextPage}
  1013. </div>
  1014. {/block:Pagination}
  1015. </div>
  1016.  
  1017. </div>
  1018. </body>
  1019. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!