API tools faq
paste
Advertisement
Laighlin

#28: Circadium 2.0

Laighlin
Mar 30th, 2017 (edited)
5,206
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 28.15 KB | None | 0 0
raw download clone embed print report
  1. <!-- Circadium 2.0 by Laighlin
  2.  
  3. Hit me up at linthm.tumblr to send in any bugs or questions! (Check the FAQ first though pls)
  4.  
  5. -->
  6.  
  7. <!DOCTYPE html>
  8. <html>
  9. <head>
  10. <!--start of head-->
  11.  
  12. <title>{Title}{block:PostSummary} &bull; {PostSummary}{/block:PostSummary}</title>
  13. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. <script src="https://kit.fontawesome.com/ef273549c7.js" crossorigin="anonymous"></script>
  17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  18.  
  19. <meta name="font:Body" content="Favorit, sans-serif"/>
  20.  
  21. <meta name="if:Detailed Timestamp" content="1"/>
  22. <meta name="if:Time cycle" content="1"/>
  23. <meta name="if:Bobbing clouds" content="1"/>
  24. <meta name="if:Borders" content="0"/>
  25. <meta name="if:Shadows" content="1"/>
  26.  
  27. <meta name="select:Default mode" content="day" title="Day"/>
  28. <meta name="select:Default mode" content="night" title="Night"/>
  29.  
  30. <meta name="select:Post opacity" content="1" title="Opaque"/>
  31. <meta name="select:Post opacity" content=".7" title="Translucent"/>
  32. <meta name="select:Post opacity" content=".2" title="Faint"/>
  33. <meta name="select:Post opacity" content="0" title="Transparent"/>
  34.  
  35. <meta name="color:Posts day" content="#fff"/>
  36. <meta name="color:Posts night" content="#333"/>
  37. <meta name="color:Text day" content="#333"/>
  38. <meta name="color:Text night" content="#fff"/>
  39. <meta name="color:Accent day" content="#f08080"/>
  40. <meta name="color:Accent night" content="#6a5acd"/>
  41. <meta name="color:Borders day" content="#ccc"/>
  42. <meta name="color:Borders night" content="#444"/>
  43. <meta name="color:Shadows day" content="#333"/>
  44. <meta name="color:Shadows night" content="#555"/>
  45.  
  46. <style type="text/css">
  47. /* start of CSS styling */
  48. html {
  49.     margin:0;
  50.     position:absolute;
  51.     top:0;
  52.     left:0;
  53.     bottom:0;
  54.     right:0;
  55.     font-family:{font:Body};
  56.     line-height:1.5em;
  57. }
  58.  
  59. :root {
  60.     --bg-day-flat:rgb(255,243,213);
  61.     --bg-day-gradient:linear-gradient(0deg, rgba(255,243,213,1) 0%, rgba(255,255,255,1) 19%, rgba(148,212,255,1) 59%, rgba(113,164,255,1) 100%);
  62.    
  63.     --bg-twilight-flat:rgb(175,96,227);
  64.     --bg-twilight-gradient:linear-gradient(rgba(175,96,227,1) 0%, rgba(237,56,157,1) 66%, rgba(255,103,103,1) 83%, rgba(255,207,110,1) 100%);
  65.    
  66.     --bg-night-flat:rgb(121,98,124);
  67.     --bg-night-gradient:linear-gradient(rgba(22,22,22,1) 0%, rgba(74,31,73,1) 59%, rgba(117,57,105,1) 81%, rgba(121,98,124,1) 100%);
  68. }
  69.  
  70. .day {
  71.     --elements-bg:rgba({RGBcolor:Posts day},{select:Post opacity});
  72.     --elements-bg-opaque:{color:Posts day};
  73.     --accent:{color:Accent day};
  74.     --accented-bg:rgba({RGBcolor:Accent day},.2);
  75.     --darkened-bg:rgba({RGBcolor:Text day},.1);
  76.     --text:{color:Text day};
  77.     --border:{color:Borders day};
  78.     --shadow:rgba({RGBcolor:Shadows day},.5);
  79.     --icons:rgba({RGBcolor:Text day},.7);
  80. }
  81.  
  82. .night {
  83.     --elements-bg:rgba({RGBcolor:Posts night},{select:Post opacity});
  84.     --elements-bg-opaque:{color:Posts night};
  85.     --accent:{color:Accent night};
  86.     --accented-bg:rgba({RGBcolor:Accent night},.2);
  87.     --darkened-bg:rgba({RGBcolor:Text night},.1);
  88.     --text:{color:Text night};
  89.     --border:{color:Borders night};
  90.     --shadow:rgba({RGBcolor:Shadows night},.5);
  91.     --icons:rgba({RGBcolor:Text night},.7);
  92. }
  93.  
  94. body {
  95.     margin:0;
  96.     color:var(--text);
  97. }
  98.  
  99. #celestes {
  100.     position:fixed;
  101.     top:0;
  102.     left:0;
  103.     bottom:0;
  104.     right:0;
  105.     background-size:50%;
  106.     background-position:repeat;
  107.     z-index:-1;
  108. }
  109.  
  110. #celestes img {
  111.     position:fixed;
  112. }
  113.  
  114. #celestes.time-day .visinight,
  115. #celestes.time-night .visiday {
  116.     opacity:0;
  117. }
  118.  
  119. #moon, #sun {
  120.     padding-top:5em;
  121. }
  122.  
  123. #moon {
  124.     width:30%;
  125.     max-width:200px;
  126.     left:5em;
  127. }
  128.  
  129. #sun {
  130.     width:25%;
  131.     max-width:250px;
  132.     right:5em;
  133.     top:4em;
  134. }
  135.  
  136. #cloud-1 {
  137.     top:20em;
  138.     left:5em;
  139.     width:300px;
  140. }
  141.  
  142. #cloud-2 {
  143.     bottom:5em;
  144.     left:12em;
  145. }
  146.  
  147. #cloud-3 {
  148.     top:9em;
  149.     right:2em;
  150. }
  151.  
  152. {block:ifBobbingClouds}
  153. #cloud-1, #cloud-2, #cloud-3 {
  154.     animation:bob 5s infinite ease-out;
  155. }
  156. {/block:ifBobbingClouds}
  157.  
  158. #cloud-2 { animation-delay:1s; }
  159. #cloud-3 { animation-delay:2s; }
  160.  
  161. @keyframes bob {
  162.     10% { margin-top:-3px; }
  163.     40% { margin-top:-5px; }
  164.     60% { margin-top:0; }
  165.     100% { margin-top:2px; }
  166. }
  167.  
  168. a { transition:.25s all ease; }
  169.  
  170. a {
  171.     text-decoration:none;
  172.     border-radius:10px;
  173. }
  174.  
  175. h1, h2, h3, h4, h5, a.post-title {
  176.     font-family:{TitleFont};
  177.     font-weight:{TitleFontWeight};
  178.     margin:.2em 0;
  179. }
  180.  
  181. h2.post-title, a.post-title {
  182.     border-radius:0;
  183.     display:block;
  184.     margin:0;
  185.     font-size:1.8em;
  186. }
  187.  
  188. a.post-title .fa {
  189.     transition:.2s all ease;
  190.     margin-left:.3em;
  191. }
  192.  
  193. a.post-title:hover .fa {
  194.     margin-left:.7em;
  195. }
  196.  
  197. p:first-child { margin-top:0; }
  198. p:last-child { margin-bottom:0; }
  199.  
  200. hr {
  201.     border:none;
  202.     height:0;
  203.     border-top:2px dashed var(--border);
  204. }
  205.  
  206. .caption hr {
  207.     margin-left:4em;
  208.     margin-right:4em;
  209. }
  210.  
  211. #main-column {
  212.     width:504px;
  213.     position:absolute;
  214.     left:calc(50% - 250px - 2em);
  215. }
  216.  
  217. #description {
  218.     margin-top:4em;
  219.     {block:ShowTitle}
  220.     margin-top:1em;
  221.     {/block:ShowTitle}
  222. }
  223.  
  224. #description:empty { display:none; }
  225.  
  226. #content {
  227.     margin-top:4em;
  228. }
  229.  
  230. a,
  231. .quest a:hover,
  232. .answerer:hover { color:var(--accent); }
  233.  
  234. .post-title,
  235. a:hover,
  236. .user,
  237. .quest a,
  238. .answerer,
  239. .nav-link,
  240. .pag-link {
  241.     color:var(--elements-bg-opaque);
  242.     background:var(--accent);
  243. }
  244.  
  245. .post, #description, h1#blog-title {
  246.     {block:ifBorders}
  247.     border:2px solid var(--border);
  248.     {/block:ifBorders}
  249.     {block:ifNotBorders}
  250.     border-color:var(--border);
  251.     {/block:ifNotBorders}
  252.     border-radius:15px;
  253.     overflow:hidden;
  254.     background:var(--elements-bg);
  255.     z-index:1;
  256. }
  257.  
  258. {block:ifShadows}
  259. .post, #description, h1#blog-title, .pag-link:not(.fa), .pag-spacer#upper {
  260.     box-shadow:0 2px 2px var(--shadow);
  261. }
  262. {/block:ifShadows}
  263.  
  264. h1#blog-title {
  265.     line-height:1.2em;
  266.     margin-top:0;
  267.     border-top:0;
  268.     border-radius:0 0 20px 20px;
  269.     text-transform:uppercase;
  270. }
  271.  
  272. h1#blog-title { text-shadow:2px 2px var(--accent); }
  273.  
  274. .post {
  275.     margin:3em 0;
  276.     position:relative;
  277.     z-index:1;
  278. }
  279.  
  280. .post.is-pinned {
  281.     border:2px solid var(--accent);
  282. }
  283.  
  284. .pinlabel {
  285.     font-size:1.5em;
  286.     padding:.5em .5em .8em .5em;
  287.     display:block;
  288.     width:1em;
  289.     margin-left:25px;
  290.     text-align:center;
  291.     margin-bottom:-2.5em;
  292.     z-index:10;
  293. }
  294.  
  295. .user, .nav-link, .answerer, .quest a {
  296.     line-height:1em;
  297.     display:inline-block;
  298.     text-transform:uppercase;
  299.     font-size:.8em;
  300.     font-weight:bold;
  301.     padding:10px;
  302. }
  303.  
  304. .user:hover,
  305. .quest a:hover,
  306. .answerer:hover,
  307. .nav-link:hover,
  308. .pag-link:hover {
  309.     color:var(--accent);
  310.     background:var(--elements-bg-opaque);
  311. }
  312.  
  313. .post-title {
  314.     background:var(--accent);
  315.     color:var(--elements-bg-opaque);
  316. }
  317.  
  318. .caption.single,
  319. .reblogged-comment,
  320. .quest,
  321. h1#blog-title,
  322. .post-title,
  323. .post-info,
  324. #description {
  325.     padding:20px;
  326. }
  327.  
  328. .quote-source { padding:0 20px; }
  329.  
  330. .post-info { padding-top:15px; }
  331.  
  332. hr.footer-spacer {
  333.     border-top:2px dashed;
  334.     border-color:inherit;
  335. }
  336.  
  337. .caption, .reblogged-comment, .quest {
  338.     border-top:1px solid var(--border);
  339. }
  340.  
  341. .reblogged-comment:first-child,
  342. .reblogged-comment:only-child,
  343. .caption:first-child,
  344. .caption:only-child {
  345.     border:none; }
  346.    
  347. .comment-content { margin-top:.5em; }
  348.  
  349. blockquote.quote {
  350.     font:1.3em {TitleFont};
  351.     font-style:italic;
  352.     padding:20px;
  353.     margin:0;
  354. }
  355.  
  356. blockquote {
  357.     margin:20px;
  358.     padding:0;
  359.     padding-left:1em;
  360.     border-left:1px solid var(--border);
  361. }
  362.  
  363. blockquote.excerpt {
  364.     padding:20px;
  365.     border:none;
  366.     margin:0;
  367.     font-style:italic;
  368. }
  369.  
  370. .quote .fa {
  371.     opacity:.3;
  372.     position:absolute;
  373.     float:left;
  374.     margin-top:-.2em;
  375.     font-size:2em;
  376. }
  377.  
  378. .quote-source { text-align:right; margin:1em 0; }
  379.  
  380. .media-wrap { line-height:0; }
  381. .media-wrap * { width:100%; }
  382. .type-Audio .media-wrap {
  383.     height:85px!important;
  384.     overflow:hidden;
  385. }
  386.  
  387. .tmblr-full {
  388.     width:100%;
  389.     height:auto;
  390. }
  391.  
  392. .tmblr-full * {
  393.     margin-left:-20px;
  394.     width:504px;
  395.     height:auto;
  396. }
  397.  
  398. .tmblr-full > * { width:calc(100% + 40px); }
  399.  
  400. .npf_row .tmblr-full * { width:100%; margin:auto; height:auto; }
  401.  
  402. .quest {
  403.     border:none;
  404.     text-align:right;
  405. }
  406.  
  407. .quest, .chat.even { background-color:var(--accented-bg); }
  408. .ans, .chat.odd { background-color:var(--darkened-bg); }
  409.  
  410. .chat {
  411.     margin:0;
  412.     padding:10px;
  413. }
  414.  
  415. #navigation {
  416.     padding:0 20px;
  417.     margin-top:calc(-.5em - 5px);
  418.     line-height:0;
  419.     {block:ShowDescription}
  420.     margin-top:calc(-.5em + 2px);
  421.     {/block:ShowDescription}
  422. }
  423.  
  424. #navigation, #pagination {
  425.     position:relative;
  426.     /*z-index:-1;*/
  427. }
  428.  
  429. #pagination {
  430.     position:fixed;
  431.     left:calc(50% + 220px + 2em);
  432.     top:0;
  433.     height:100vh;
  434.     display:flex;
  435.     justify-content:flex-end;
  436.     flex-flow:column nowrap;
  437. }
  438.  
  439. .nav-link, .pag-link, .pag-spacer {
  440.     margin:.5em;
  441. }
  442.  
  443. .pag-spacer {
  444.     /*flex-grow:5;*/
  445. }
  446.  
  447. .pag-spacer#lower {
  448.     height:10vh;
  449. }
  450.  
  451. .pag-spacer#upper {
  452.     flex-grow:5;
  453.     background:var(--elements-bg);
  454.     {block:ifBorders}
  455.     border:2px solid var(--border);
  456.     {/block:ifBorders}
  457.     {block:ifNotBorders}
  458.     border-color:var(--border);
  459.     {/block:ifNotBorders}
  460.     border-top:none;
  461.     margin-top:0;
  462. }
  463.  
  464. .pag-link {
  465.     padding:10px;
  466.     width:1em;
  467.     height:1em;
  468.     line-height:1em;
  469.     text-align:center;
  470.     overflow:hidden;
  471. }
  472.  
  473. .pag-link:not(.fa) {
  474.     font:1em {TitleFont};
  475.     font-weight:bold;
  476. }
  477.  
  478. .pag-link.active {
  479.     background:var(--accented-bg);
  480.     color:var(--text);
  481.     border:2px solid var(--border);
  482.     box-sizing:border-box;
  483.     padding:8px;
  484.     height:calc(1em + 20px);
  485.     width:calc(1em + 20px);
  486. }
  487.  
  488. .pag-link.active:before {
  489.     content:'';
  490.     position:absolute;
  491.     z-index:-1;
  492.     top:0;
  493.     left:0;
  494.     bottom:0;
  495.     right:0;
  496.     background:var(--elements-bg);
  497. }
  498.  
  499. #blog-info.streamlined, .pag-link {
  500.     position:relative;
  501. }
  502.  
  503. #credit {
  504.     position:fixed;
  505.     right:2em;
  506.     bottom:2em;
  507.     padding:7px;
  508.     font-size:.7em;
  509.     letter-spacing:1px;
  510.     line-height:1em;
  511.     font-weight:bold;
  512.     text-transform:uppercase;
  513. }
  514.  
  515. #credit, .pinlabel {
  516.     background:var(--accent);
  517.     color:var(--elements-bg-opaque);
  518.     border-radius:10px;
  519. }
  520.  
  521. .background.time-day {
  522.     background: var(--bg-day-flat);
  523.     background: var(--bg-day-gradient);
  524. }
  525.  
  526. .background.time-twilight {
  527.     background: var(--bg-twilight-flat);
  528.     background: var(--bg-twilight-gradient);
  529. }
  530.  
  531. .background.time-night {
  532.     background: var(--bg-night-flat);
  533.     background-image: var(--bg-night-gradient);
  534. }
  535.  
  536. .background.time-night:before {
  537.     content:'';
  538.     position:fixed;
  539.     top:0; bottom:0; left:0; right:0;
  540.     background:url('https://static.tumblr.com/xwoxjom/7Heqebnmr/searchpng.com-stars-bg-png-image-free-download.png') repeat;
  541.     opacity:.9;
  542.     background-size:25%;
  543.     filter:blur(1px);
  544.     mix-blend-mode:hard-light;
  545. }
  546.  
  547. .background.time-night:after {
  548.     content:'';
  549.     position:fixed;
  550.     top:0; bottom:0; left:0; right:0;
  551.     background:url('https://static.tumblr.com/xwoxjom/7Heqebnmr/searchpng.com-stars-bg-png-image-free-download.png') repeat;
  552.     background-size:85%;
  553. }
  554.  
  555. .background {
  556.     transition:none;
  557.     position:fixed;
  558.     background-size:100%;
  559.     top:0;
  560.     left:0;
  561.     height:100vh;
  562.     width:100vw;
  563.     z-index:-2;
  564.     /*mix-blend-mode:soft-light;*/
  565. }
  566.  
  567. .details {
  568.     text-transform:uppercase;
  569. }
  570.  
  571. .post-info span {
  572.     width:.5em;
  573.     display:inline-block;
  574. }
  575.  
  576. .nav-link.fa, .pag-spacer#upper {
  577.     padding-top:20px;
  578.     border-radius:0 0 10px 10px;
  579. }
  580.  
  581. .post-info .fa {
  582.     color:var(--icons);
  583. }
  584.  
  585. .controls .fa-retweet, .controls .fa-heart {
  586.     transition:.2s all ease-out;
  587. }
  588.  
  589. .controls {
  590.     font-size:1em;
  591.     line-height:1em;
  592.     text-align:center;
  593.     color:color:var(--icons);
  594.     float:right;
  595.     margin-right:5px;
  596. }
  597.  
  598. .controls a {
  599.     color:var(--icons);
  600. }
  601.  
  602. .fa-retweet {
  603.     margin-right:.5em;
  604. }
  605.  
  606. .like-wrap {
  607.     position:relative;
  608.     width:2em;
  609.     height:2em;
  610.     cursor:pointer;
  611. }
  612.  
  613. .like_button {
  614.     position:absolute;
  615.     z-index:5;
  616.     top:0;
  617.     left:0;
  618.     opacity:0.0001;
  619.     width:1em;
  620.     height:1em;
  621. }
  622.  
  623. .like_button iframe {
  624.     width:100% !important;
  625.     height:100% !important;
  626. }
  627.  
  628. .like-btn { z-index:1; }
  629.  
  630. .like_button.liked + .like-btn { color:#f55; }
  631.  
  632. .user.deactivated {
  633.     opacity:.85;
  634. }
  635.  
  636. #notes {
  637.     padding:20px;
  638.     padding-left:calc(20px + 1em);
  639.     font-size:.9em;
  640.     border-top:2px dashed var(--border);
  641. }
  642.  
  643. .notes {
  644.     list-style-type:none;
  645.     padding:0 0 0 1em;
  646.     margin:0;
  647.     position:relative;
  648. }
  649.  
  650. .note .avatar_frame { display:none; }
  651. .note:before {
  652.     position:absolute;
  653.     left:-1em;
  654.     width:1em;
  655.     color:var(--text);
  656.     opacity:.7;
  657.     font-family:'Font Awesome 5 Free';
  658.     font-weight:900;
  659. }
  660.  
  661. .note.reblog.without_commentary:before {
  662.     content:'\f079';
  663. }
  664.  
  665. .note.reblog.with_commentary:before, .note.reply:before {
  666.     content:'\f27a';
  667. }
  668.  
  669. .note.like:before {
  670.     content:'\f004';
  671. }
  672.  
  673. .expanded {
  674.     display:none;
  675.     width:300px;
  676.     position:fixed;
  677.     left:calc(50% - 470px);
  678. }
  679.  
  680. @media screen and (min-width:900px) {
  681.     .streamlined { display:none; }
  682.     .expanded { display:block; }
  683.    
  684.     h1#blog-title {
  685.         {block:ifBorders}
  686.         border:2px solid var(--border);
  687.         {/block:ifBorders}
  688.         {block:ifNotBorders}
  689.         border-color:var(--border);
  690.         {/block:ifNotBorders}
  691.         border-radius:15px;
  692.         margin-top:2em;
  693.     }
  694.    
  695.     #main-column {
  696.         left:calc(50% - 100px - 2em);
  697.     }
  698.    
  699.     #pagination {
  700.         left:calc(50% + 370px + 2em);
  701.     }
  702. }
  703.  
  704. {CustomCSS}
  705.  
  706. </style>
  707. <!-- end of CSS -->
  708. </head>
  709.  
  710. <body class="{select:Default mode}" data-urlencoded-name="{URLEncodedName}">
  711. {block:ifNotTimeCycle}
  712. <div class="background time-{select:Default mode}"></div>
  713. {/block:ifNotTimeCycle}
  714. {block:ifTimeCycle}
  715. <div class="background" id="begin-state"></div>
  716. <div class="background" id="end-state"></div>
  717. {/block:ifTimeCycle}
  718.  
  719. <header id="blog-info" class="expanded">
  720. {block:ShowTitle}<h1 id="blog-title">{Title}</h1>{/block:ShowTitle} <!-- title-->
  721. {block:ShowDescription}<aside id="description">{Description}</aside>{/block:ShowDescription} <!-- description -->
  722. <nav id="navigation">
  723.     <a class="nav-link fa fa-home fa-fw" href="/" aria-label="home" title="{lang:Home}"></a>
  724.     {block:AskEnabled}
  725.     <a class="nav-link fa fa-question fa-fw" href="/ask" aria-label="ask" title="{lang:Mail}"></a>
  726.     {/block:AskEnabled}
  727.     <!-- only renders if asks are enabled -->
  728.     {block:SubmissionsEnabled}
  729.     <a class="nav-link fa fa-envelope fa-fw" href="/submit" aria-label="submit" title="Submit"></a>
  730.     {/block:SubmissionsEnabled}
  731.     <!-- only renders if submissions are enabled -->
  732.     <a class="nav-link fa fa-archive fa-fw" href="/archive" aria-label="archive" title="{lang:Archive}"></a>
  733.     {block:HasPages}
  734.     <!-- only renders if the blog has custom links enabled. CHECK THE FAQ -->
  735.     {block:Pages}
  736.     <a class="nav-link" href="{URL}">{Label}</a>
  737.     {/block:Pages}
  738.     {/block:HasPages}
  739. </nav>
  740. </header>
  741.  
  742. <div id="main-column">
  743. <!-- container to keep everything together -->
  744.  
  745. <header id="blog-info" class="streamlined">
  746. {block:ShowTitle}<h1 id="blog-title">{Title}</h1>{/block:ShowTitle} <!-- title-->
  747. {block:ShowDescription}<aside id="description">{Description}</aside>{/block:ShowDescription} <!-- description -->
  748. <nav id="navigation">
  749.     <a class="nav-link fa fa-home fa-fw" href="/" aria-label="home" title="{lang:Home}"></a>
  750.     {block:AskEnabled}
  751.     <a class="nav-link fa fa-question fa-fw" href="/ask" aria-label="ask" title="{lang:Mail}"></a>
  752.     {/block:AskEnabled}
  753.     <!-- only renders if asks are enabled -->
  754.     {block:SubmissionsEnabled}
  755.     <a class="nav-link fa fa-envelope fa-fw" href="/submit" aria-label="submit" title="Submit"></a>
  756.     {/block:SubmissionsEnabled}
  757.     <!-- only renders if submissions are enabled -->
  758.     <a class="nav-link fa fa-archive fa-fw" href="/archive" aria-label="archive" title="{lang:Archive}"></a>
  759.     {block:HasPages}
  760.     <!-- only renders if the blog has custom links enabled. CHECK THE FAQ -->
  761.     {block:Pages}
  762.     <a class="nav-link" href="{URL}">{Label}</a>
  763.     {/block:Pages}
  764.     {/block:HasPages}
  765. </nav>
  766. </header>
  767.  
  768.  
  769. <main id="content"> <!-- start of posts block -->
  770. {block:Posts}
  771.  
  772. {block:PinnedPostLabel}<a class="fa fa-thumbtack pinlabel" aria-label="pinned post" title="{PinnedPostLabel}" href="{Permalink}"></a>{/block:PinnedPostLabel}
  773.  
  774. <article class="post type-{PostTypeNoun}{block:Date} is-post{/block:Date}{block:PinnedPostLabel} is-pinned{/block:PinnedPostLabel}">
  775.     {block:Title}<h2 class="post-title">{Title}</h2>{/block:Title}
  776.     <!-- if not enclosed in those blocks, the title variable will display the title of the blog instead of the post title -->
  777.     {block:Text}
  778.     <!-- the body of a text post is not considered a caption, so it needs its own separate block -->
  779.     {block:NotReblog}
  780.     <figcaption class="caption single">{Body}</figcaption>
  781.     {/block:NotReblog}
  782.     <!-- renders on original posts only -->
  783.     {block:RebloggedFrom}
  784.     <div class="caption">
  785.         {block:Reblogs}
  786.         <!-- renders for reblogs only -->
  787.         <div class="reblogged-comment">
  788.             <i class="fa fa-user{block:IsDeactivated}-times{/block:IsDeactivated}">&nbsp;</i>
  789.             <a class="user {block:IsDeactivated}inactive{/block:isDeactivated} {block:IsActive}active{/block:IsActive}" href="{Permalink}">{Username}</a>
  790.             <div class="comment-content">{Body}</div>
  791.         </div>
  792.         {/block:Reblogs}
  793.     </div>
  794.     {/block:RebloggedFrom}
  795.     {/block:Text} <!-- end of text post block -->
  796.    
  797.     {block:Link}
  798.     <!-- bro i hate formatting link posts so much -->
  799.     {block:Thumbnail}
  800.     <figure class="media-wrap"><img src="{Thumbnail-HighRes}"></figure>
  801.     {/block:Thumbnail}
  802.     <!-- renders if a preview image exists -->
  803.     <a class="post-title" href="{URL}">{Name}<span></span><i class="fa fa-caret-right"></i></a>
  804.     {block:Excerpt}
  805.     <blockquote class="excerpt">{Excerpt}</blockquote>
  806.     {/block:Excerpt}
  807.     <!-- renders if the link has an excerpt -->
  808.     {block:Description}
  809.     <div class="caption {block:NotReblog}single{/block:NotReblog}">
  810.         {block:NotReblog}{Description}{/block:NotReblog}
  811.         {block:RebloggedFrom}
  812.         {block:Reblogs}
  813.         <!-- renders for reblogs only -->
  814.         <div class="reblogged-comment">
  815.             <i class="fa fa-user">&nbsp;</i>
  816.             <a class="user {block:IsDeactivated}inactive{/block:isDeactivated}" href="{Permalink}">{Username}</a>
  817.             <div class="comment-content">{Body}</div>
  818.         </div>
  819.         {/block:Reblogs}
  820.         {/block:RebloggedFrom}
  821.     </div>
  822.     {/block:Description}
  823.     {/block:Link}
  824.    
  825.     {block:Quote}
  826.     <blockquote class="post-title quote"><i class="fa fa-quote-left"></i><span>&nbsp;&nbsp;</span>{Quote}</blockquote>
  827.     {block:Source}<div class="quote-source">&mdash; {Source}</div>{/block:Source}
  828.     {/block:Quote}
  829.    
  830.     <!-- other media -->
  831.     {block:Photo}
  832.     <figure class="media-wrap">{LinkOpenTag}<img src="{PhotoURL-HighRes}">{LinkCloseTag}</figure>
  833.     {/block:Photo}
  834.    
  835.     {block:Photoset}
  836.     <figure class="media-wrap">{Photoset}</figure>
  837.     <!-- this element is responsive - finally! lmao photosets used to be really annoying to style -->
  838.     {/block:Photoset}
  839.    
  840.     {block:Video}
  841.     <figure class="media-wrap">{Video-500}</figure>
  842.     {/block:Video}
  843.    
  844.     {block:Audio}
  845.     <figure class="media-wrap">{AudioEmbed-500}</figure>
  846.     {/block:Audio}
  847.    
  848.     {block:Chat}
  849.     {block:Lines}
  850.     <p class="chat {Alt}">{block:Label}<b>{Label} </b>{/block:Label}{Line}</p>
  851.     {/block:Lines}
  852.     {/block:Chat}
  853.    
  854.     {block:Answer}
  855.     <div class="quest">
  856.         <i class="fa fa-comment-alt fa-flip-horizontal"></i>&nbsp;
  857.         {Asker}
  858.         <p>{Question}</p>
  859.     </div>
  860.     {block:Answerer}
  861.     <div class="caption single ans">
  862.         {Answerer}&nbsp;
  863.         <i class="fa fa-comment-alt"></i>
  864.         <div class="comment-content">{Answer}</div>
  865.     </div>
  866.     {/block:Answerer}
  867.     <div class="caption {block:NotReblog}single{/block:NotReblog}">
  868.         {block:NotReblog}{Answer}{/block:NotReblog}
  869.         {block:RebloggedFrom}
  870.             {block:Reblogs}
  871.             <div class="reblogged-comment">
  872.                 <i class="fa fa-user">&nbsp;</i>
  873.                 <a class="user {block:IsDeactivated}inactive{/block:isDeactivated}" href="{Permalink}">{Username}</a>
  874.                 <div class="comment-content">{Body}</div>
  875.             </div>
  876.             {/block:Reblogs}
  877.         {/block:RebloggedFrom}
  878.     </div>
  879.     {/block:Answer}
  880.    
  881.     {block:Caption}
  882.     <!--renders for any media post with a caption-->
  883.     <figcaption class="media-post caption {block:NotReblog}single{/block:NotReblog}">
  884.    
  885.         {block:NotReblog}{Caption}{/block:NotReblog}
  886.        
  887.         {block:RebloggedFrom}
  888.         <div class="reblog-list">
  889.         {block:Reblogs}
  890.         <div class="reblogged-comment">
  891.             <i class="fa fa-user">&nbsp;</i>
  892.             <a class="user {block:IsDeactivated}inactive{/block:isDeactivated}" href="{Permalink}">{Username}</a>
  893.             <div class="comment-content">{Body}</div>
  894.         </div>
  895.         {/block:Reblogs}
  896.         </div>
  897.         {/block:RebloggedFrom}
  898.     </figcaption>
  899.     {/block:Caption}
  900.    
  901.     {block:Date}
  902.     <!-- only renders on actual posts, not custom/ask/submit pages-->
  903.     <hr class="footer-spacer"/>
  904.     <footer class="post-info">
  905.         {block:HasTags}
  906.         <!-- only renders if the post has tags -->
  907.         <div class="tags">
  908.             {block:Tags}<i class="fa fa-hashtag"></i>&nbsp;<a href="{TagURL}">{Tag}</a>&nbsp;{/block:Tags}
  909.         </div>
  910.         {/block:HasTags}
  911.         <div class="details">
  912.             <div class="timestamp">
  913.             <i class="fa fa-calendar" aria-label="date">&nbsp;</i>
  914.             <a href="{Permalink}" title="{TimeAgo}">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>
  915.             {block:ifDetailedTimestamp}
  916.             <span></span>
  917.             <i class="fa fa-clock" aria-label="time">&nbsp;</i>
  918.             <a href="{Permalink}" title="{12Hour}:{Minutes} {CapitalAMPM}">{24HourWithZero}:{Minutes}</a>
  919.             {/block:ifDetailedTimestamp}
  920.             </div>
  921.             <!-- displays as DD.MM.YY -->
  922.             {block:RebloggedFrom}
  923.             <!-- only renders if the post was reblogged -->
  924.             <i class="fa fa-reply" aria-label="reblogged from">&nbsp;</i>
  925.             <a href="{ReblogParentURL}">{ReblogParentName}</a>
  926.             <span></span>
  927.             {/block:RebloggedFrom}
  928.             {block:ContentSource}
  929.             <i class="fa fa-reply-all" aria-label="content source">&nbsp;</i>
  930.             <a href="{ContentSourceURL}">{SourceTitle}</a>
  931.             <span></span>
  932.             {/block:ContentSource}
  933.             <i class="fa fa-share-alt" aria-label="notes">&nbsp;</i>
  934.             <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
  935.             <!-- you should use the "with label" variant of the note count variable wherever possible. it adds commas into the note count and accommodates localization -->
  936.             <div class="controls">
  937.                 <a href="{ReblogURL}" class="fa fa-retweet"></a>
  938.             <span class="like-wrap">{LikeButton}<a class="like-btn fa fa-heart"></a></span>
  939.             </div>
  940.         </div>
  941.     </footer>
  942.     {block:PostNotes}
  943.     <!-- only renders on permalink pages if the post has notes -->
  944.     <footer id="notes">
  945.         {PostNotes}
  946.     </footer>
  947.     {/block:PostNotes}
  948.     {/block:Date}
  949. </article>
  950. {/block:Posts}
  951. </main> <!-- end of posts block -->
  952.  
  953. </div> <!-- end of main column wrapper -->
  954.  
  955. {block:Pagination}
  956. <nav id="pagination">
  957.     <div class="pag-spacer" id="upper"></div>
  958.     {block:PreviousPage}
  959.     <a class="pag-link fa fa-chevron-left fa-fw" href="{PreviousPage}" title="{lang:Previous}" aria-label="previous page"></a>
  960.     {/block:PreviousPage}
  961.     {block:JumpPagination length="5"}
  962.     {block:CurrentPage}<a class="pag-link active">{PageNumber}</a>{/block:CurrentPage}
  963.     {block:JumpPage}<a class="pag-link" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  964.     {/block:JumpPagination}
  965.     {block:NextPage}
  966.     <a class="pag-link fa fa-chevron-right fa-fw" href="{NextPage}" title="{lang:Next}" aria-label="next page"></a>
  967.     {/block:NextPage}
  968.     <div class="pag-spacer" id="lower"></div>
  969. </nav>
  970. {/block:Pagination}
  971.  
  972. <div id="celestes" {block:ifNotTimeCycle}class="time-{select:Default mode}"{/block:ifNotTimeCycle}>
  973.     <img id="sun" class="visiday" src="https://static.tumblr.com/xwoxjom/jdvqet5tq/sun.png">
  974.     <img id="cloud-1" class="visiday" src="https://static.tumblr.com/xwoxjom/dCtqet5fp/cloud1.png">
  975.     <img id="cloud-2" class="visiday" src="https://static.tumblr.com/xwoxjom/K2Mqet5tk/cloud2.png">
  976.     <img id="cloud-3" class="visiday" src="https://static.tumblr.com/xwoxjom/N05qet5fs/cloud_3.png">
  977.     <img id="moon" class="visinight" src="https://static.tumblr.com/xwoxjom/zvfqet5t1/moon.png">
  978. </div>
  979.  
  980. <a href="https://linthm.tumblr.com/thm" title="Circadium 2.0 &copy; Laighlin"><footer id="credit">@L<span id="credit-full">aighlin</span></footer></a>
  981.  
  982. </body>
  983.  
  984. <script type="text/javascript">
  985.  
  986. $(document).ready(function() {
  987.     function change_colors() {
  988.         var date = new Date();
  989.         var hour = date.getHours();
  990.         var day_quarter = Math.ceil((hour+1)/6);
  991.         var minute = date.getMinutes();
  992.         var minute_of_quarter = (60*hour + minute)%360;
  993.         var quarter_progress = minute_of_quarter/360;
  994.         switch(day_quarter) {
  995.             case 1:
  996.                 dawnward();
  997.                 moonset(quarter_progress);
  998.                 break;
  999.             case 2:
  1000.                 dayward();
  1001.                 sunrise(quarter_progress);
  1002.                 break;
  1003.             case 3:
  1004.                 duskward();
  1005.                 sunset(quarter_progress);
  1006.                 break;
  1007.             case 4:
  1008.                 nightward();
  1009.                 moonrise(quarter_progress);
  1010.                 break;
  1011.         }
  1012.         $('#end-state').css('opacity', quarter_progress);
  1013.     }
  1014.    
  1015.     function moonrise(quarter_progress) {
  1016.         var h = ((1 - quarter_progress)*100) + "vh";
  1017.         $('#moon').show().css('top', h).css('opacity',quarter_progress);
  1018.         $('.visiday').hide();
  1019.     }
  1020.     function moonset(quarter_progress) {
  1021.         var h = quarter_progress*100 + "vh";
  1022.         $('#moon').show().css('top', h).css('opacity',1-quarter_progress);
  1023.         $('.visiday').hide();
  1024.     }
  1025.     function sunset(quarter_progress) {
  1026.         var h = quarter_progress*100 + "vh";
  1027.         $('#sun').show().css('top', h);
  1028.         $('.visiday').css('opacity',1-quarter_progress);
  1029.         $('.visinight').hide();
  1030.     }
  1031.     function sunrise(quarter_progress) {
  1032.         var h = ((1 - quarter_progress)*100) + "vh";
  1033.         $('#sun').show().css('top', h);
  1034.         $('.visiday').css('opacity',quarter_progress);
  1035.         $('.visinight').hide();
  1036.     }
  1037.    
  1038.     function dawnward() {
  1039.         $('body').addClass('night').removeClass('day');
  1040.         $('#begin-state').addClass('time-night');
  1041.         $('#end-state').addClass('time-twilight');
  1042.     }
  1043.     function dayward() {
  1044.         $('body').addClass('day').removeClass('night');
  1045.         $('#begin-state').addClass('time-night');
  1046.         $('#end-state').addClass('time-day');
  1047.     }
  1048.     function duskward() {
  1049.         $('body').addClass('day').removeClass('night');
  1050.         $('#begin-state').addClass('time-day');
  1051.         $('#end-state').addClass('time-twilight');
  1052.     }
  1053.     function nightward() {
  1054.         $('body').addClass('night').removeClass('day');
  1055.         $('#begin-state').addClass('time-twilight');
  1056.         $('#end-state').addClass('time-night');
  1057.     }
  1058.     {block:ifTimeCycle}
  1059.     change_colors();
  1060.     {/block:ifTimeCycle}
  1061. });
  1062.  
  1063. </script>
  1064.  
  1065. </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!