API tools faq
paste
Advertisement
ninchuser

Theme 6 - Discord - cactusthemes

ninchuser
Oct 2nd, 2018
2,823
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 64.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.  
  5. <!-- THEME 6 - DISCORD (revamp)
  6. by cactusthemes
  7. -->
  8.  
  9. <!-- Credits:
  10. - ALL DESIGN CREDITS GO TO DISCORDAPP.COM, I AM SIMPLY RECREATING THEIR DESIGNS BY REINTERPRETING THEM AS A TUMBLR THEME
  11. - CSS Photosets by annasthms and espoirthemes
  12. - Fade in on refresh/Custom tumblr controls by cyantists
  13. - Soundcloud Player by shythemes
  14. - Infinite Scroll by Paul Irish
  15. - Tooltip by Manos Malihu
  16. - Captions by bychloethemes
  17. - Lightbox by sorrism
  18. - Responsive Videos (Flexframes) by nouvae
  19. - Icon font by suiomi
  20. -->
  21.  
  22. <title>{Title}</title>
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <meta name="description" content="{MetaDescription}">
  26. <meta name="viewport" content="width=device-width, initial-scale=1">
  27.  
  28. <meta name="image:Icon" content="">
  29.  
  30. <meta name="text:Title" content="Your title">
  31.  
  32. <meta name="select:Spaces Channel Name" content="-" title="Dash">
  33. <meta name="select:Spaces Channel Name" content="_" title="Underscore">
  34. <meta name="select:Color Theme" content="dark" title="Dark">
  35. <meta name="select:Color Theme" content="light" title="Light">
  36.  
  37. <meta name="if:Infinite Scroll" content="0">
  38. <meta name="if:Load More Button" content="0">
  39. <meta name="if:Updates" content="1">
  40. <meta name="if:American Dates" content="0">
  41.  
  42. <meta name="text:Numbers" content="">
  43. <meta name="text:Update 1" content="">
  44. <meta name="text:Update 1 Date" content="">
  45. <meta name="text:Update 2" content="">
  46. <meta name="text:Update 2 Date" content="">
  47. <meta name="text:Update 3" content="">
  48. <meta name="text:Update 3 Date" content="">
  49.  
  50. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  51.  
  52. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  53.  
  54. <link href="https://static.tumblr.com/uxq3xua/Ci6ph2baf/funtumblrfont.css" rel="stylesheet">
  55.  
  56. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  57.  
  58. <link href="https://static.tumblr.com/0podkko/bwepdyarh/photosets.css" rel="stylesheet">
  59.  
  60. <script src="//static.tumblr.com/yfztp0u/brUohnb4m/infinitescroll.js"></script>
  61.  
  62. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  63.  
  64. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  65.  
  66. <script src="https://static.tumblr.com/uxq3xua/7Kzpla3vz/cactusthemesdiscord.js"></script>
  67.  
  68. <style type="text/css">
  69.  
  70. /* GENERAL CSS */
  71.  
  72. body {
  73. font-family:'Open Sans';
  74. overflow-x:hidden;
  75. }
  76.  
  77. body.dark {
  78. background:#36393e;
  79. }
  80.  
  81. body.light {
  82. background:#f0f0f0;
  83. }
  84.  
  85. iframe.iframe-controls--desktop {
  86. white-space:nowrap!important;
  87. z-index:99999999999999!important;
  88. top:8px!important;
  89. right:10px!important;
  90. transition:all .3s ease-in-out;
  91. transform:scale(0.65);
  92. transform-origin:100% 0;
  93. -webkit-transform:scale(0.65);
  94. -webkit-transform-origin:100% 0;
  95. -o-transform:scale(0.65);
  96. -o-transform-origin:100% 0;
  97. -moz-transform:scale(0.65);
  98. -moz-transform-origin:100% 0;
  99. -ms-transform:scale(0.65);
  100. -ms-transform-origin:100% 0;
  101. }
  102.  
  103. body.dark iframe.iframe-controls--desktop {
  104. opacity:.8!important;
  105. }
  106.  
  107. body.light iframe.iframe-controls--desktop {
  108. opacity:.6!important;
  109. filter:invert(1) contrast(150%);
  110. -webkit-filter:invert(1) contrast(150%);
  111. -o-filter:invert(1) contrast(150%);
  112. -moz-filter:invert(1) contrast(150%);
  113. -ms-filter:invert(1) contrast(150%);
  114. }
  115.  
  116. body.light div.status-indicator {
  117. filter:invert(1)!important;
  118. }
  119.  
  120. body.dark iframe.iframe-controls--desktop:hover {
  121. opacity:1!important;
  122. }
  123.  
  124. body.light iframe.iframe-controls--desktop:hover {
  125. opacity:.6!important;
  126. }
  127.  
  128. iframe.tmblr-iframe--app-cta-button, iframe.iframe-controls--phone-mobile {
  129. display:none!important;
  130. }
  131.  
  132. .tmblr-iframe-pushdown {
  133. padding:0px!important;
  134. }
  135.  
  136. body *::-webkit-scrollbar, body::-webkit-scrollbar {
  137. width:12px;
  138. height:12px;
  139. border:3px solid;
  140. border-radius:10px;
  141. }
  142.  
  143. body.dark *::-webkit-scrollbar, body.dark::-webkit-scrollbar {
  144. background:#2f3136;
  145. border-color:#36393e;
  146. }
  147.  
  148. body.light *::-webkit-scrollbar, body.light::-webkit-scrollbar {
  149. background:#d0d0d0;
  150. border-color:#f0f0f0;
  151. }
  152.  
  153. body *::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  154. border:2px solid;
  155. border-radius:50px;
  156. }
  157.  
  158. body.dark *::-webkit-scrollbar-thumb, body.dark::-webkit-scrollbar-thumb {
  159. background:#1e2124;
  160. border-color:#36393e;
  161. }
  162.  
  163. body.light *::-webkit-scrollbar-thumb, body.light::-webkit-scrollbar-thumb {
  164. background:#fff;
  165. border-color:#f0f0f0;
  166. }
  167.  
  168. blockquote {
  169. margin:10px 0px 0px 10px;
  170. padding:5px 0px 5px 7px;
  171. border-left:4px solid;
  172. border-radius:5px;
  173. }
  174.  
  175. body.dark blockquote {
  176. border-color:#4f545c;
  177. background:#33363c;
  178. }
  179.  
  180. body.light blockquote {
  181. background:#fefefe;
  182. border-color:#d4d5d7;
  183. }
  184.  
  185. blockquote p {
  186. margin:0!important;
  187. }
  188.  
  189. a {
  190. transition:all .3s ease-in-out;
  191. text-decoration:none;
  192. }
  193.  
  194. #s-m-t-tooltip {
  195. max-width:300px;
  196. overflow-x:auto;
  197. margin:10px;
  198. padding:10px;
  199. font-size:13px;
  200. height:auto;
  201. word-wrap:break-word;
  202. border-radius:10px;
  203. z-index:9999!important;
  204. text-transform:lowercase;
  205. font-family:'Open Sans';
  206. }
  207.  
  208. body.dark #s-m-t-tooltip {
  209. background:#42464d;
  210. color:#f6f6f7;
  211. }
  212.  
  213. body.light #s-m-t-tooltip {
  214. background:#fefefe;
  215. color:#b6b7bb;
  216. }
  217.  
  218. /* HEADER */
  219.  
  220. header {
  221. height:50px;
  222. width:100%;
  223. position:fixed;
  224. top:0;
  225. left:0;
  226. z-index:10;
  227. }
  228.  
  229. body.dark header {
  230. background:#36393f;
  231. box-shadow:0 4px 2px -2px #222327;
  232. }
  233.  
  234. body.light header {
  235. background:#f0f0f0;
  236. box-shadow:0 4px 2px -2px #d8dcde;
  237. }
  238.  
  239. label.hamburger {
  240. position:fixed;
  241. top:13.5px;
  242. left:15px;
  243. z-index:20;
  244. cursor:pointer;
  245. display:none;
  246. }
  247.  
  248. label.hamburger_1 {
  249. float:right;
  250. cursor:pointer;
  251. margin-top:2px;
  252. }
  253.  
  254. label span {
  255. display:block;
  256. width:30px;
  257. height:4px;
  258. margin-bottom:5px;
  259. position:relative;
  260. border-radius:3px;
  261. z-index:1;
  262. opacity:1;
  263. }
  264.  
  265. body.light label span {
  266. background:#777;
  267. }
  268.  
  269. body.dark label span {
  270. background:#eee;
  271. }
  272.  
  273. label span:first-of-type {
  274. transform-origin:0% 0%;
  275. }
  276.  
  277. label span:nth-of-type(3) {
  278. transform-origin:0% 100%;
  279. }
  280.  
  281. label.hamburger_1 span:first-of-type {
  282. transform:rotate(45deg) translate(-2px, -1px);
  283. }
  284.  
  285. label.hamburger_1 span:nth-of-type(2) {
  286. opacity:0;
  287. transform:rotate(0deg) scale(0.2, 0.2);
  288. }
  289.  
  290. label.hamburger_1 span:nth-of-type(3) {
  291. transform:rotate(-45deg) translate(0, -1px);
  292. }
  293.  
  294. input#hamburger:checked ~ aside.sidepop {
  295. margin-left:0px;
  296. }
  297.  
  298. header h5 {
  299. width:18vw;
  300. margin:0;
  301. display:inline-block;
  302. box-sizing:border-box;
  303. padding:15px;
  304. font-size:16px;
  305. height:100%;
  306. }
  307.  
  308. body.dark header h5 {
  309. background:#2f3136;
  310. color:#fff;
  311. }
  312.  
  313. body.light header h5 {
  314. background:#fafafa;
  315. color:#4e545b;
  316. }
  317.  
  318. header h2 {
  319. display:inline-block;
  320. font-size:16px;
  321. padding-left:20px;
  322. position:relative;
  323. }
  324.  
  325. body.dark header h2 {
  326. background:#36393f;
  327. }
  328.  
  329. body.light header h2 {
  330. background:#f0f0f0;
  331. }
  332.  
  333. header h2 span {
  334. display:inline-block;
  335. }
  336.  
  337. header h2 .htag {
  338. margin-right:5px;
  339. }
  340.  
  341. body.dark header h2 .htag {
  342. color:#8a8e94;
  343. }
  344.  
  345. body.light header h2 .htag {
  346. color:#8e9297;
  347. }
  348.  
  349. header h2 .ht {
  350. text-transform:lowercase;
  351. }
  352.  
  353. body.dark header h2 .ht {
  354. color:#fff;
  355. }
  356.  
  357. body.light header h2 .ht {
  358. color:#4e545b;
  359. }
  360.  
  361. header h2 span.ht::after {
  362. content:'';
  363. height:22px;
  364. width:2px;
  365. position:relative;
  366. display:inline-block;
  367. vertical-align:middle;
  368. margin-top:-3px;
  369. margin-left:20px;
  370. }
  371.  
  372. body.dark header h2 span.ht::after {
  373. background:#4a4c52;
  374. }
  375.  
  376. body.light header h2 span.ht::after {
  377. background:#8e9297;
  378. }
  379.  
  380. header .desc {
  381. display:inline-block;
  382. white-space:nowrap;
  383. font-size:15px;
  384. height:22px;
  385. overflow:hidden;
  386. vertical-align:middle;
  387. cursor:pointer;
  388. margin-top:-2px;
  389. margin-left:40px;
  390. text-overflow:ellipsis;
  391. }
  392.  
  393. body.dark header .desc {
  394. color:#a9aaae;
  395. }
  396.  
  397. body.light header .desc {
  398. color:#989ba2;
  399. }
  400.  
  401. header .desc p:first-of-type {
  402. margin-top:0;
  403. }
  404.  
  405. header .desc a {
  406. padding:4px;
  407. margin:-4px;
  408. border-radius:5px;
  409. }
  410.  
  411. body.dark header .desc a {
  412. color:#87898e;
  413. }
  414.  
  415. body.light header .desc a {
  416. color:#999;
  417. }
  418.  
  419. body.dark header .desc a:hover {
  420. color:#b9bbbe;
  421. background:#42464d;
  422. }
  423.  
  424. body.light header .desc a:hover {
  425. color:#444;
  426. background:#ddd;
  427. }
  428.  
  429. header .th-push-pin-o {
  430. margin-left:20px;
  431. display:inline-block;
  432. font-size:20px;
  433. position:absolute;
  434. top:11px;
  435. cursor:pointer;
  436. -webkit-transform:rotate(45deg);
  437. -ms-transform:rotate(45deg);
  438. transform:rotate(45deg);
  439. }
  440.  
  441. body.dark header .th-push-pin-o {
  442. color:#aeafb2;
  443. }
  444.  
  445. body.light header .th-push-pin-o {
  446. color:#95989d;
  447. }
  448.  
  449. header form.sb {
  450. display:inline-block;
  451. {block:ifUpdates}
  452. margin-left:60px;
  453. {/block:ifUpdates}
  454. {block:ifNotUpdates}
  455. margin-left:20px;
  456. {/block:ifNotUpdates}
  457. top:11px;
  458. position:absolute;
  459. }
  460.  
  461. header form.sb input.sinput {
  462. border:0;
  463. position:relative;
  464. padding:6px 6px 6px 8px;
  465. font-family:'Open Sans';
  466. font-weight:bold;
  467. border-radius:5px;
  468. width:165px;
  469. transition:all .3s ease-in-out;
  470. z-index:1;
  471. }
  472.  
  473. body.dark header form.sb input.sinput {
  474. background:#4a4c52;
  475. color:#7e8084;
  476. }
  477.  
  478. body.light header form.sb input.sinput {
  479. background:#cacaca;
  480. color:#fff;
  481. }
  482.  
  483. header form.sb::after {
  484. content:'\eaa6';
  485. font-family:'honeybee';
  486. font-weight:bold;
  487. position:relative;
  488. margin-top:2px;
  489. margin-left:-23px;
  490. font-size:15px;
  491. z-index:2;
  492. opacity:1;
  493. }
  494.  
  495. body.dark header form.sb::after {
  496. color:#7e8084;
  497. }
  498.  
  499. body.light header form.sb::after {
  500. color:#fff;
  501. }
  502.  
  503. header form.sb input.sinput:focus {
  504. outline:0;
  505. width:190px;
  506. }
  507.  
  508. body.dark *::placeholder {
  509. color:#7e8084;
  510. opacity:1;
  511. }
  512.  
  513. body.light *::placeholder {
  514. color:#fff;
  515. opacity:1;
  516. }
  517.  
  518. body.dark *:-ms-input-placeholder {
  519. color:#7e8084;
  520. }
  521.  
  522. body.light *:-ms-input-placeholder {
  523. color:#fff;
  524. }
  525.  
  526. input[type=search]::-ms-clear, input[type=search]::-ms-reveal {
  527. display:none;
  528. width:0;
  529. height:0;
  530. }
  531.  
  532. input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
  533. display:none;
  534. }
  535.  
  536. /* DESCRIPTION POPUP */
  537.  
  538. section.pop {
  539. width:100%;
  540. height:100%;
  541. top:0;
  542. left:0;
  543. position:fixed;
  544. z-index:999;
  545. display:none;
  546. }
  547.  
  548. body.dark section.pop {
  549. background:rgba(0,0,0,.7);
  550. }
  551.  
  552. body.light section.pop {
  553. background:rgba(255,255,255,.7);
  554. }
  555.  
  556. section.pop .fade {
  557. top:0;
  558. left:0;
  559. position:fixed;
  560. z-index:1000;
  561. width:100%;
  562. height:100%;
  563. }
  564.  
  565. article.popup {
  566. width:35vw;
  567. transition:all .3s ease-in-out;
  568. position:fixed;
  569. padding:30px;
  570. border-radius:10px;
  571. font-size:14px;
  572. -webkit-transform:translate(-50%, -50%);
  573. -ms-transform:translate(-50%, -50%);
  574. transform:translate(-50%, -50%);
  575. top:50%;
  576. left:50%;
  577. z-index:1001;
  578. }
  579.  
  580. body.dark article.popup {
  581. background:#36393f;
  582. color:#c3c4c5;
  583. }
  584.  
  585. body.light article.popup {
  586. background:#f0f0f0;
  587. color:#3e3e3e;
  588. }
  589.  
  590. section.pop .popup .th-cross {
  591. position:absolute;
  592. top:25px;
  593. right:20px;
  594. cursor:pointer;
  595. padding:10px;
  596. transition:all .5s ease-in-out;
  597. border-radius:5px;
  598. }
  599.  
  600. body.dark section.pop .popup .th-cross {
  601. color:#898a8e;
  602. }
  603.  
  604. body.light section.pop .popup .th-cross {
  605. color:#999;
  606. }
  607.  
  608. body.dark section.pop .popup .th-cross:hover {
  609. background:#3e4147;
  610. color:#dcddde;
  611. }
  612.  
  613. body.light section.pop .popup .th-cross:hover {
  614. color:#000;
  615. background:#ddd;
  616. }
  617.  
  618. section.pop .popup h3 {
  619. margin:0;
  620. font-size:16px;
  621. margin-bottom:20px;
  622. }
  623.  
  624. body.dark section.pop .popup h3 {
  625. color:#fff;
  626. }
  627.  
  628. body.light section.pop .popup h3 {
  629. color:#4e545b;
  630. }
  631.  
  632. section.pop .popup a {
  633. padding:6px 9px;
  634. margin:-6px -9px;
  635. border-radius:5px;
  636. }
  637.  
  638. body.dark section.pop .popup a {
  639. color:#87898e;
  640. }
  641.  
  642. body.light section.pop .popup a {
  643. color:#999;
  644. }
  645.  
  646. body.dark section.pop .popup a:hover {
  647. color:#b9bbbe;
  648. background:#42464d;
  649. }
  650.  
  651. body.light section.pop .popup a:hover {
  652. color:#444;
  653. background:#ddd;
  654. }
  655.  
  656. /* UPDATES TAB */
  657.  
  658. section#updates {
  659. border:1px solid;
  660. position:fixed;
  661. top:48px;
  662. z-index:10;
  663. display:none;
  664. border-radius:10px;
  665. }
  666.  
  667. header.full ~ section#updates {
  668. right:calc(100vw - (18vw + 170px + (100% - ((21vw + 120px) + 439px))));
  669. width:23vw;
  670. }
  671.  
  672. header.width-900 ~ section#updates {
  673. right:calc(100vw - (18vw + 170px + (100% - ((21vw + 120px) + 169px))));
  674. width:35vw;
  675. }
  676.  
  677. body.dark section#updates {
  678. background:#2f3136;
  679. border-color:#222;
  680. }
  681.  
  682. body.light section#updates {
  683. background:#f0f0f0;
  684. border-color:#ccc;
  685. }
  686.  
  687. section#updates h5 {
  688. margin:0;
  689. padding:10px;
  690. font-size:15px;
  691. border-radius:10px 10px 0px 0px;
  692. }
  693.  
  694. body.dark section#updates h5 {
  695. background:#35393e;
  696. color:#f5f5f6;
  697. box-shadow:0 4px 2px -2px #222327;
  698. }
  699.  
  700. body.light section#updates h5 {
  701. background:#fafafa;
  702. color:#75818f;
  703. box-shadow:0 4px 2px -2px #d3d3d3;
  704. }
  705.  
  706. header.full ~ section#updates .ud {
  707. width:calc(23vw - 40px);
  708. }
  709.  
  710. header.width-900 ~ section#updates .ud {
  711. width:calc(35vw - 40px);
  712. }
  713.  
  714. section#updates .ud {
  715. margin:20px;
  716. padding:10px;
  717. box-sizing:border-box;
  718. border-radius:5px;
  719. }
  720.  
  721. body.dark section#updates .ud {
  722. background:#36393e;
  723. box-shadow:0px 0px 7px #222327;
  724. }
  725.  
  726. body.light section#updates .ud {
  727. background:#fafafa;
  728. box-shadow: 0px 0px 7px #d3d3d3;
  729. }
  730.  
  731. section#updates .ud img {
  732. width:40px;
  733. height:40px;
  734. border-radius:100px;
  735. }
  736.  
  737. section#updates .ud h4 {
  738. font-weight:normal;
  739. font-size:14px;
  740. margin:0;
  741. display:inline-block;
  742. }
  743.  
  744. body.dark section#updates .ud h4 {
  745. color:#fff;
  746. }
  747.  
  748. body.light section#updates .ud h4 {
  749. color:#222426;
  750. }
  751.  
  752. section#updates .ud .date {
  753. font-size:12px;
  754. display:inline-block;
  755. margin-left:8px;
  756. }
  757.  
  758. body.dark section#updates .ud .date {
  759. color:#5d5f63;
  760. }
  761.  
  762. body.light section#updates .ud .date {
  763. color:#9fb1bb;
  764. }
  765.  
  766. section#updates .ud .col {
  767. display:inline-block;
  768. vertical-align:top;
  769. position:relative;
  770. }
  771.  
  772. section#updates .ud p {
  773. margin:0;
  774. font-size:13px;
  775. }
  776.  
  777. body.dark section#updates .ud p {
  778. color:#bbbcbe;
  779. }
  780.  
  781. body.light section#updates .ud p {
  782. color:#36393b;
  783. }
  784.  
  785. section#updates .ud .col:first-of-type {
  786. width:40px;
  787. }
  788.  
  789. header.full ~ section#updates .ud .col:last-of-type {
  790. width:calc((23vw - 40px) - 75px);
  791. margin-left:10px;
  792. }
  793.  
  794. header.width-900 ~ section#updates .ud .col:last-of-type {
  795. width:calc((35vw - 40px) - 75px);
  796. margin-left:10px;
  797. }
  798.  
  799. /* SIDEBAR(S) */
  800.  
  801. aside {
  802. width:18vw;
  803. height:calc(100vh - 50px);
  804. position:fixed;
  805. bottom:0;
  806. left:0;
  807. z-index:1;
  808. }
  809.  
  810. body.dark aside {
  811. background:#2f3136;
  812. }
  813.  
  814. body.light aside {
  815. background:#fafafa;
  816. }
  817.  
  818. aside.sidepop {
  819. width:90vw;
  820. margin-left:-90vw;
  821. transition:all .5s ease-in-out;
  822. z-index:99;
  823. height:100vh;
  824. top:0;
  825. display:none;
  826. }
  827.  
  828. aside.sidepop h5 {
  829. font-size:18px;
  830. width:calc(100% + 2px);
  831. margin:0px;
  832. height:50px;
  833. box-sizing:border-box;
  834. padding-top:13.5px;
  835. padding-left:15px;
  836. }
  837.  
  838. body.light aside.sidepop h5 {
  839. color:#4e545b;
  840. background:#f0f0f0;
  841. box-shadow:0 4px 2px -2px #d8dcde;
  842. }
  843.  
  844. body.dark aside.sidepop h5 {
  845. color:#fff;
  846. background:#36393f;
  847. box-shadow:0 4px 2px -2px #222327;
  848. }
  849.  
  850. aside nav {
  851. position:relative;
  852. margin:20px auto;
  853. font-size:16px;
  854. }
  855.  
  856. aside.actual nav {
  857. width:90%;
  858. }
  859.  
  860. aside.sidepop nav {
  861. width:calc(100% - 14px);
  862. }
  863.  
  864. aside nav a {
  865. display:block;
  866. text-transform:lowercase;
  867. transition:all .3s ease-in-out;
  868. padding:6px 13px;
  869. border-radius:5px;
  870. margin-bottom:3px;
  871. }
  872.  
  873. body.dark aside nav a {
  874. color:#606266;
  875. }
  876.  
  877. body.light aside nav a {
  878. color:#757b81;
  879. }
  880.  
  881. body.dark aside nav a:not(.active):hover {
  882. color:#b9bbbe;
  883. background:#36393f;
  884. }
  885.  
  886. body.light aside nav a:not(.active):hover {
  887. background:#e0e0e0;
  888. color:#888;
  889. }
  890.  
  891. body.dark aside.sidepop nav a:hover {
  892. color:#b9bbbe;
  893. background:#36393f;
  894. }
  895.  
  896. body.light aside.sidepop nav a:hover {
  897. background:#e0e0e0;
  898. color:#888;
  899. }
  900.  
  901. aside nav a .htag {
  902. display:inline-block;
  903. margin-right:5px;
  904. transition:all .3s ease-in-out;
  905. }
  906.  
  907. body.dark aside nav a .htag {
  908. color:#606266!important;
  909. }
  910.  
  911. body.light aside nav a .htag {
  912. color:#dedee1;
  913. }
  914.  
  915. body.light aside nav a:hover .htag {
  916. color:#fafafa;
  917. }
  918.  
  919. body.dark aside.actual nav a.active {
  920. background:#42464d;
  921. color:#f6f6f7;
  922. }
  923.  
  924. body.light aside.actual nav a.active {
  925. background:#d2d4d5;
  926. color:#fff;
  927. }
  928.  
  929. body.dark aside.actual nav a.active .htag {
  930. color:#6c6f75!important;
  931. }
  932.  
  933. body.light aside.actual nav a.active .htag {
  934. color:#efefef!important;
  935. }
  936.  
  937. aside section.down {
  938. position:fixed;
  939. bottom:0;
  940. height:60px;
  941. display:-webkit-box;
  942. display:-ms-flexbox;
  943. display:flex;
  944. -webkit-box-align:center;
  945. -ms-flex-align:center;
  946. align-items:center;
  947. }
  948.  
  949. aside.actual section.down {
  950. width:18vw;
  951. }
  952.  
  953. aside.sidepop section.down {
  954. width:90%;
  955. }
  956.  
  957. body.dark aside section.down {
  958. background:#2a2c31;
  959. }
  960.  
  961. body.light aside section.down {
  962. background:#fff;
  963. box-shadow:0 0px 4px #d8dcde;
  964. }
  965.  
  966. aside section.down .down_inner {
  967. display:inline-block;
  968. position:relative;
  969. }
  970.  
  971. aside section.down img {
  972. border-radius:50px;
  973. width:40px;
  974. height:40px;
  975. }
  976.  
  977. aside section.down .col {
  978. position:relative;
  979. display:inline-block;
  980. vertical-align:top;
  981. }
  982.  
  983. aside section.down .col:first-of-type {
  984. width:40px;
  985. margin-left:20px;
  986. }
  987.  
  988. aside section.down .col:last-of-type {
  989. margin-left:10px;
  990. }
  991.  
  992. aside.actual section.down .col:last-of-type {
  993. max-width:calc(18vw - 40px);
  994. }
  995.  
  996. aside.sidepop section.down .col:last-of-type {
  997. max-width:calc(90% - 40px);
  998. }
  999.  
  1000. aside section.down h2 {
  1001. font-size:14px;
  1002. margin:0;
  1003. margin-top:3px;
  1004. font-weight:normal;
  1005. }
  1006.  
  1007. body.dark aside section.down h2 {
  1008. color:#fff;
  1009. }
  1010.  
  1011. body.light aside section.down h2 {
  1012. color:#666;
  1013. }
  1014.  
  1015. aside section.down h3 {
  1016. font-size:12px;
  1017. font-weight:normal;
  1018. margin:0;
  1019. }
  1020.  
  1021. body.dark aside section.down h3 {
  1022. color:#76787b;
  1023. }
  1024.  
  1025. body.light aside section.down h3 {
  1026. color:#999;
  1027. }
  1028.  
  1029. /* POSTS */
  1030.  
  1031. section#posts {
  1032. width:calc(82vw - 100px);
  1033. margin-left:calc(18vw + 50px);
  1034. margin-top:100px;
  1035. position:relative;
  1036. }
  1037.  
  1038. /* GENERAL POST STYLING */
  1039.  
  1040. article.post {
  1041. width:calc(100% - 50px);
  1042. max-width:700px;
  1043. margin-bottom:55px;
  1044. font-size:14px;
  1045. position:relative;
  1046. }
  1047.  
  1048. body.dark article.post {
  1049. color:#c3c4c5;
  1050. }
  1051.  
  1052. body.light article.post {
  1053. color:#36393b;
  1054. }
  1055.  
  1056. {block:IndexPage}
  1057.  
  1058. article.post::after {
  1059. content:'';
  1060. margin-left:0;
  1061. width:calc((82vw - 100px) - 25px);
  1062. border-top:2px solid;
  1063. position:absolute;
  1064. }
  1065.  
  1066. body.dark article.post::after {
  1067. border-color:#3e4146;
  1068. }
  1069.  
  1070. body.light article.post::after {
  1071. border-color:#dbdbdb;
  1072. }
  1073.  
  1074. article.post:last-of-type::after {
  1075. display:none;
  1076. }
  1077.  
  1078. article.post:last-of-type {
  1079. margin-bottom:50px;
  1080. }
  1081. {/block:IndexPage}
  1082.  
  1083. /* POSTINFO */
  1084.  
  1085. article.post .postinfo img {
  1086. border-radius:50px;
  1087. display:inline-block;
  1088. vertical-align:top;
  1089. }
  1090.  
  1091. body.dark article.post .postinfo a {
  1092. color:#fff;
  1093. }
  1094.  
  1095. body.light article.post .postinfo a {
  1096. color:#222426;
  1097. }
  1098.  
  1099. article.post .postinfo a:nth-of-type(2):hover > h3 {
  1100. text-decoration:underline;
  1101. }
  1102.  
  1103. article.post .postinfo h3 {
  1104. margin:0;
  1105. display:inline-block;
  1106. vertical-align:top;
  1107. font-size:14px;
  1108. margin-left:18px;
  1109. margin-top:2px;
  1110. }
  1111.  
  1112. article.post .postinfo a.date {
  1113. display:inline-block;
  1114. vertical-align:middle;
  1115. font-size:12px;
  1116. margin-left:10px;
  1117. font-weight:bold;
  1118. }
  1119.  
  1120. body.dark article.post .postinfo a.date {
  1121. color:#5d5f63;
  1122. }
  1123.  
  1124. body.light article.post .postinfo a.date {
  1125. color:#9fb1bb;
  1126. }
  1127.  
  1128. article.post .postinfo a.nc {
  1129. float:right;
  1130. font-size:12px;
  1131. padding-top:3px;
  1132. }
  1133.  
  1134. article.post .postinfo a.nc:hover {
  1135. text-decoration:underline;
  1136. }
  1137.  
  1138. article.post .post_inner {
  1139. width:calc(100% - 66px);
  1140. margin-left:66px;
  1141. margin-top:-14px;
  1142. }
  1143.  
  1144. article.post:last-of-type .post_inner {
  1145. padding-bottom:0;
  1146. }
  1147.  
  1148. /* GENERAL TEXT STYLING */
  1149.  
  1150. article.post h2.title {
  1151. margin:0 0 5px 0;
  1152. font-size:16px;
  1153. {block:AskPage}margin:0 0 17px 0;{/block:AskPage}
  1154. {block:SubmitPage}margin:0 0 17px 0;{/block:SubmitPage}
  1155. }
  1156.  
  1157. body.dark article.post h2.title {
  1158. color:#ddd;
  1159. }
  1160.  
  1161. body.light article.post h2.title {
  1162. color:#444;
  1163. }
  1164.  
  1165. article.post .reblog-content p:empty {
  1166. display:none;
  1167. margin:0;
  1168. }
  1169.  
  1170. article.post .reblog-header img.blog {
  1171. width:24px;
  1172. vertical-align:middle;
  1173. border-radius:50px;
  1174. }
  1175.  
  1176. article.post .reblog-header span.blog {
  1177. vertical-align:middle;
  1178. display:inline-block;
  1179. transition:all .3s ease-in-out;
  1180. font-weight:bold;
  1181. margin-left:10px;
  1182. }
  1183.  
  1184. body.dark article.post .reblog-header span.blog {
  1185. color:#fff;
  1186. }
  1187.  
  1188. body.light article.post .reblog-header span.blog {
  1189. color:#222426;
  1190. }
  1191.  
  1192. article.post .reblog-header {
  1193. margin:10px 0px;
  1194. }
  1195.  
  1196. article.post.text .reblog-header:first-of-type {
  1197. margin:0 0 10px 0;
  1198. }
  1199.  
  1200. article.post .reblog-header span.inactive, article.post .reblog-header a.active {
  1201. display:inline-block;
  1202. }
  1203.  
  1204. body.dark article.post .reblog-header span.inactive {
  1205. color:#fff;
  1206. }
  1207.  
  1208. body.light article.post .reblog-header a.active {
  1209. color:#222426;
  1210. }
  1211.  
  1212. article.post .reblog-header span.inactive {
  1213. cursor:default;
  1214. }
  1215.  
  1216. article.post .reblog-header span.inactive span.blog:after {
  1217. content:'deactivated';
  1218. font-size:12px;
  1219. font-weight:normal;
  1220. margin-left:7px;
  1221. opacity:0;
  1222. transition:all .3s ease-in-out;
  1223. }
  1224.  
  1225. body.dark article.post .reblog-header span.inactive span.blog:after {
  1226. color:#c3c4c5;
  1227. }
  1228.  
  1229. body.light article.post .reblog-header span.inactive span.blog:after {
  1230. color:#36393b;
  1231. }
  1232.  
  1233. article.post .reblog-header span.inactive:hover > span.blog:after {
  1234. opacity:1;
  1235. }
  1236.  
  1237. article.post .reblog-header a.active:hover > span.blog {
  1238. text-decoration:underline;
  1239. }
  1240.  
  1241. body.dark article.post .reblog-content a, body.dark article.post figcaption a {
  1242. color:#fff;
  1243. }
  1244.  
  1245. body.light article.post .reblog-content a, body.light article.post figcaption a {
  1246. color:#000;
  1247. }
  1248.  
  1249. article.post .reblog-content a:hover, article.post figcaption a:hover {
  1250. text-decoration:underline;
  1251. }
  1252.  
  1253. article.post .caption p.read_more_container {
  1254. text-align:center;
  1255. border-radius:5px;
  1256. border:1px solid;
  1257. transition:all .3s ease-in-out;
  1258. }
  1259.  
  1260. body.dark article.post .caption p.read_more_container, body.dark article.post p.tmblr-attribution {
  1261. background:#32353b;
  1262. border-color:#2f3136;
  1263. }
  1264.  
  1265. body.light article.post .caption p.read_more_container, body.light article.post p.tmblr-attribution {
  1266. background:#d0d2d7;
  1267. border-color:#ccced3;
  1268. }
  1269.  
  1270. article.post .caption p.read_more_container a.read_more {
  1271. display:block;
  1272. padding:10px;
  1273. }
  1274.  
  1275. body.dark article.post .caption p.read_more_container a.read_more {
  1276. color:#8a8e94;
  1277. }
  1278.  
  1279. body.light article.post .caption p.read_more_container a.read_more {
  1280. color:#fff;
  1281. }
  1282.  
  1283. article.post .caption p.read_more_container a.read_more:hover {
  1284. text-decoration:none;
  1285. }
  1286.  
  1287. body.dark article.post .caption p.read_more_container:hover, body.dark article.post p.tmblr-attribution:hover {
  1288. background:#303237;
  1289. }
  1290.  
  1291. body.light article.post .caption p.read_more_container:hover, body.light article.post p.tmblr-attribution:hover {
  1292. background:#c3c5ca;
  1293. }
  1294.  
  1295. article.post figure img {
  1296. max-width:100%;
  1297. height:auto;
  1298. border-radius:3px;
  1299. }
  1300.  
  1301. article.post p.tmblr-attribution {
  1302. font-size:12px;
  1303. margin:0;
  1304. border-radius:5px;
  1305. transition:all .3s ease-in-out;
  1306. }
  1307.  
  1308. article.post p.tmblr-attribution a {
  1309. display:block;
  1310. padding:5px;
  1311. color:#8a8e94;
  1312. }
  1313.  
  1314. article.post p.tmblr-attribution a:hover {
  1315. text-decoration:none;
  1316. }
  1317.  
  1318. /* PHOTO POSTS */
  1319.  
  1320. article.post .pic img {
  1321. width:100%;
  1322. height:auto;
  1323. border-radius:3px;
  1324. }
  1325.  
  1326. .vignette, #vignette {
  1327. opacity:0;
  1328. }
  1329.  
  1330. .lightbox-image, #tumblr_lightbox img {
  1331. box-shadow:none!important;
  1332. max-width:none;
  1333. border-radius:5px!important;
  1334. }
  1335.  
  1336. body.dark .tmblr-lightbox, body.dark #tumblr_lightbox {
  1337. background:rgba(0,0,0,.6)!important;
  1338. }
  1339.  
  1340. body.light .tmblr-lightbox, body.light #tumblr_lightbox {
  1341. background:rgba(255,255,255,.6)!important;
  1342. }
  1343.  
  1344. /* PHOTOSET POSTS */
  1345.  
  1346. [photoset-layout] {
  1347. grid-gap:5px;
  1348. margin-bottom:5px;
  1349. border-radius:3px;
  1350. overflow:hidden;
  1351. }
  1352.  
  1353. [photoset-layout] div {
  1354. cursor:pointer;
  1355. }
  1356.  
  1357. /* PANORAMA POSTS */
  1358.  
  1359. article.post .panorama img {
  1360. width:100%;
  1361. height:auto;
  1362. border-radius:3px;
  1363. }
  1364.  
  1365. /* QUOTE POSTS */
  1366.  
  1367. article.post .quote {
  1368. border-radius:5px;
  1369. border-left:4px solid;
  1370. padding:7px;
  1371. font-size:15px;
  1372. }
  1373.  
  1374. body.dark article.post .quote, body.dark article.post.link .caption {
  1375. background:#33363c;
  1376. color:#c3c4c5;
  1377. border-color:#4f545c;
  1378. }
  1379.  
  1380. body.light article.post .quote, body.light article.post.link .caption {
  1381. background:#fefefe;
  1382. border-color:#d4d5d7;
  1383. color:#36393b;
  1384. }
  1385.  
  1386. article.post .qsource {
  1387. margin-top:10px;
  1388. font-size:14px;
  1389. }
  1390.  
  1391. /* LINK POSTS */
  1392.  
  1393. article.post h2.ltitle {
  1394. margin:0 0 5px 0;
  1395. font-size:16px;
  1396. text-align:center;
  1397. }
  1398.  
  1399. body.dark article.post h2.ltitle {
  1400. color:#ddd;
  1401. }
  1402.  
  1403. body.light article.post h2.ltitle {
  1404. color:#444;
  1405. }
  1406.  
  1407. article.post.link .caption {
  1408. border-radius:5px;
  1409. border-left:4px solid;
  1410. padding:2px 7px;
  1411. }
  1412.  
  1413. article.post.link .caption .col {
  1414. width:100%;
  1415. position:relative;
  1416. }
  1417.  
  1418. article.post.link .caption img {
  1419. border-radius:5px;
  1420. max-width:100%;
  1421. height:auto;
  1422. }
  1423.  
  1424. article.post.link .caption div b {
  1425. display:block;
  1426. }
  1427.  
  1428. article.post.link .linkdesc {
  1429. width:100%;
  1430. display:block;
  1431. }
  1432.  
  1433. /* CHAT POSTS */
  1434.  
  1435. article.post section.chat {
  1436. margin:0;
  1437. list-style:none;
  1438. border-radius:10px;
  1439. border:1px solid;
  1440. }
  1441.  
  1442. body.dark article.post section.chat {
  1443. background:#2f3136;
  1444. border-color:#222
  1445. }
  1446.  
  1447. body.light article.post section.chat {
  1448. background:#f0f0f0;
  1449. border-color:#ccc;
  1450. }
  1451.  
  1452. article.post section.chat .line {
  1453. line-height:30px;
  1454. padding:5px 10px;
  1455. margin:10px;
  1456. border-radius:5px;
  1457. }
  1458.  
  1459. body.dark article.post section.chat .line {
  1460. background:#36393e;
  1461. box-shadow: 0px 0px 7px #222327;
  1462. }
  1463.  
  1464. body.light article.post section.chat .line {
  1465. background:#fafafa;
  1466. box-shadow: 0px 0px 7px #d3d3d3;
  1467. }
  1468.  
  1469. article.post section.chat .line .label {
  1470. display:block;
  1471. color:#fff;
  1472. font-weight:bold;
  1473. }
  1474.  
  1475. body.dark article.post section.chat .line .label {
  1476. color:#fff;
  1477. }
  1478.  
  1479. body.light article.post section.chat .line .label {
  1480. color:#222426;
  1481. }
  1482.  
  1483. /* VIDEO POSTS */
  1484.  
  1485. article.post .video {
  1486. overflow:hidden;
  1487. border-radius:5px;
  1488. }
  1489.  
  1490. /* AUDIO EMBEDS */
  1491.  
  1492. article.post iframe.soundcloud_audio_player {
  1493. max-height:116px!important;
  1494. }
  1495.  
  1496. article.post iframe.spotify_audio_player {
  1497. max-height:80px!important;
  1498. }
  1499.  
  1500. article.post iframe.tumblr_audio_player {
  1501. width:100%!important;
  1502. border-radius:5px!important;
  1503. overflow:hidden!important;
  1504. }
  1505.  
  1506. body.dark article.post iframe.tumblr_audio_player {
  1507. -webkit-filter:invert(1)!important;
  1508. filter:invert(1)!important;
  1509. }
  1510.  
  1511. /* AUDIO POSTS */
  1512.  
  1513. article.post .audio_orig {
  1514. border-radius:15px;
  1515. padding:10px;
  1516. }
  1517.  
  1518. body.dark article.post .audio_orig, body.dark article.post .audio_emb {
  1519. background:#2f3136;
  1520. }
  1521.  
  1522. body.light article.post .audio_orig, body.light article.post .audio_emb {
  1523. background:#fff;
  1524. }
  1525.  
  1526. article.post .audio_emb {
  1527. border-radius:15px;
  1528. padding:10px 10px 7px 10px;
  1529. }
  1530.  
  1531. article.post .audio_emb_inner {
  1532. border-radius:10px 10px 15px 15px!important;
  1533. overflow:hidden!important;
  1534. }
  1535.  
  1536. article.post .art {
  1537. border-radius:10px;
  1538. width:75px;
  1539. height:75px;
  1540. display:inline-block;
  1541. vertical-align:top;
  1542. }
  1543.  
  1544. body.dark article.post .art {
  1545. background:#36393e;
  1546. }
  1547.  
  1548. body.light article.post .art {
  1549. background:#fafafa;
  1550. }
  1551.  
  1552. article.post .art img {
  1553. width:75px;
  1554. height:75px;
  1555. border-radius:10px;
  1556. }
  1557.  
  1558. article.post .auinfo {
  1559. display:inline-block;
  1560. vertical-align:top;
  1561. margin-left:15px;
  1562. }
  1563.  
  1564. body.dark article.post .auinfo {
  1565. color:#fff;
  1566. }
  1567.  
  1568. body.light article.post .auinfo {
  1569. color:#222426;
  1570. }
  1571.  
  1572. article.post .auinfo .inf {
  1573. display:block;
  1574. margin-bottom:5px;
  1575. }
  1576.  
  1577. article.post .auinfo .inf.track {
  1578. font-weight:bold;
  1579. }
  1580.  
  1581. article.post .player {
  1582. margin-top:15px;
  1583. }
  1584.  
  1585. /* ASK POSTS */
  1586.  
  1587. article.post .ask {
  1588. padding:10px;
  1589. border-radius:10px;
  1590. }
  1591.  
  1592. body.dark article.post .ask {
  1593. box-shadow:0px 0px 7px #222327;
  1594. }
  1595.  
  1596. body.light article.post .ask {
  1597. box-shadow:0px 0px 7px #d3d3d3;
  1598. }
  1599.  
  1600. article.post .askinf {
  1601. display:inline-block;
  1602. vertical-align:top;
  1603. }
  1604.  
  1605. article.post .askinf img {
  1606. width:50px;
  1607. height:50px;
  1608. border-radius:100px;
  1609. }
  1610.  
  1611. article.post .que {
  1612. display:inline-block;
  1613. vertical-align:top;
  1614. margin-left:15px;
  1615. width:calc(100% - 65px);
  1616. }
  1617.  
  1618. article.post .que span {
  1619. display:block;
  1620. margin-bottom:5px;
  1621. }
  1622.  
  1623. article.post .que a.asker {
  1624. font-weight:bold;
  1625. }
  1626.  
  1627. body.dark article.post .que a.asker {
  1628. color:#fff;
  1629. }
  1630.  
  1631. body.light article.post .que a.asker {
  1632. color:#222426;
  1633. }
  1634.  
  1635. /* POST TAGS */
  1636.  
  1637. article.post .tags {
  1638. margin:20px 0 25px 0;
  1639. line-height:28px;
  1640. }
  1641.  
  1642. article.post .tags a {
  1643. padding:4px 7px;
  1644. margin:-4px 10px -4px -7px;
  1645. border-radius:5px;
  1646. }
  1647.  
  1648. body.dark article.post .tags a {
  1649. color:#f6f6f7;
  1650. }
  1651.  
  1652. body.light article.post .tags a {
  1653. color:#757b81;
  1654. }
  1655.  
  1656. body article.post .tags a .htag {
  1657. margin-right:3px;
  1658. transition:all .3s ease-in-out;
  1659. }
  1660.  
  1661. body.dark article.post .tags a .htag {
  1662. color:#6c6f75!important;
  1663. }
  1664.  
  1665. body.light article.post .tags a .htag {
  1666. color:#dedee1;
  1667. }
  1668.  
  1669. body.dark article.post .tags a:hover {
  1670. background:#42464d;
  1671. }
  1672.  
  1673. body.light article.post .tags a:hover {
  1674. background:#d2d4d5;
  1675. color:#fff;
  1676. }
  1677.  
  1678. body.light article.post .tags a:hover .htag {
  1679. color:#efefef;
  1680. }
  1681.  
  1682. /* POST NOTES */
  1683.  
  1684. ol.notes {
  1685. list-style:none;
  1686. font-size:14px;
  1687. margin:0 0 50px 66px;
  1688. padding:0;
  1689. max-width:634px;
  1690. width:calc(100% - 116px);
  1691. overflow:auto;
  1692. max-height:250px;
  1693. }
  1694.  
  1695. body.dark ol.notes {
  1696. color:#c3c4c5;
  1697. }
  1698.  
  1699. body.light ol.notes {
  1700. color:#36393b;
  1701. }
  1702.  
  1703. ol.notes li.note {
  1704. margin:20px 0px;
  1705. }
  1706.  
  1707. ol.notes li.note:first-of-type {
  1708. margin:0 0 20px 0;
  1709. }
  1710.  
  1711. ol.notes li.note img.avatar {
  1712. width:30px;
  1713. height:30px;
  1714. border-radius:100px;
  1715. vertical-align:middle;
  1716. }
  1717.  
  1718. ol.notes li.note .action {
  1719. vertical-align:middle;
  1720. margin-left:10px;
  1721. }
  1722.  
  1723. ol.notes li.note a {
  1724. font-weight:bold;
  1725. }
  1726.  
  1727. body.dark ol.notes li.note a {
  1728. color:#fff;
  1729. }
  1730.  
  1731. body.light ol.notes li.note a {
  1732. color:#222426;
  1733. }
  1734.  
  1735. ol.notes li.note a:hover {
  1736. text-decoration:underline;
  1737. }
  1738.  
  1739. ol.notes li.note blockquote, ol.notes li.note .answer_content {
  1740. margin:0;
  1741. border:0;
  1742. border-radius:10px;
  1743. padding:10px;
  1744. width:92%;
  1745. margin-left:1px;
  1746. margin-top:5px;
  1747. }
  1748.  
  1749. body.dark ol.notes li.note blockquote, body.dark ol.notes li.note .answer_content {
  1750. background:#36393e;
  1751. box-shadow:0px 0px 7px #222327;
  1752. color:#fff;
  1753. }
  1754.  
  1755. body.light ol.notes li.note blockquote, body.light ol.notes li.note .answer_content {
  1756. background:#fafafa;
  1757. box-shadow: 0px 0px 7px #d3d3d3;
  1758. color:#36393b;
  1759. }
  1760.  
  1761. ol.notes li.note .answer_content {
  1762. display:block;
  1763. margin-bottom:-20px;
  1764. }
  1765.  
  1766. ol.notes li.note blockquote a {
  1767. font-weight:normal;
  1768. }
  1769.  
  1770. ol.notes li.note blockquote a:hover {
  1771. text-decoration:none;
  1772. }
  1773.  
  1774. ol.notes li.more_notes_link_container {
  1775. border-radius:5px;
  1776. border:1px solid;
  1777. transition:all .3s ease-in-out;
  1778. }
  1779.  
  1780. body.dark ol.notes li.more_notes_link_container {
  1781. background:#32353b;
  1782. border-color:#2f3136;
  1783. }
  1784.  
  1785. body.light ol.notes li.more_notes_link_container {
  1786. background:#d0d2d7;
  1787. border-color:#ccced3;
  1788. }
  1789.  
  1790. ol.notes li.more_notes_link_container a.more_notes_link, ol.notes li.more_notes_link_container .notes_loading {
  1791. color:#8a8e94;
  1792. display:block;
  1793. padding:10px;
  1794. font-weight:normal;
  1795. }
  1796.  
  1797. ol.notes li.more_notes_link_container a.more_notes_link:hover {
  1798. text-decoration:none;
  1799. }
  1800.  
  1801. body.dark ol.notes li.more_notes_link_container:hover {
  1802. background:#303237;
  1803. }
  1804.  
  1805. body.light ol.notes li.more_notes_link_container:hover {
  1806. background:#c3c5ca;
  1807. }
  1808.  
  1809. /* PAGINATION */
  1810.  
  1811. section#pagination {
  1812. width:calc(100% - 116px);
  1813. margin-left:66px;
  1814. font-size:15px;
  1815. margin-bottom:45px;
  1816. position:relative;
  1817. max-width:634px;
  1818. }
  1819.  
  1820. body.dark section#pagination {
  1821. color:#a4a5a7;
  1822. }
  1823.  
  1824. body.light section#pagination {
  1825. color:#818c98;
  1826. }
  1827.  
  1828. section#pagination .pgbutton {
  1829. border:1px solid;
  1830. border-radius:5px;
  1831. }
  1832.  
  1833. body.dark section#pagination .pgbutton {
  1834. border-color:#424549;
  1835. color:#6d6f72;
  1836. }
  1837.  
  1838. body.light section#pagination .pgbutton {
  1839. color:#cbcfd3;
  1840. border-color:#e9eaea;
  1841. }
  1842.  
  1843. section#pagination .pglink {
  1844. border:1px solid;
  1845. border-radius:5px;
  1846. }
  1847.  
  1848. body.dark section#pagination .pglink {
  1849. color:#c0c1c2;
  1850. border-color:#4e5155;
  1851. }
  1852.  
  1853. body.light section#pagination .pglink {
  1854. color:#99a1ab;
  1855. border-color:#dfe0e0;
  1856. }
  1857.  
  1858. section#pagination .pagecount {
  1859. display:block;
  1860. text-align:center;
  1861. width:calc(100% - 58px);
  1862. margin-top:-24.7px;
  1863. margin-left:29px;
  1864. position:absolute;
  1865. }
  1866.  
  1867. section#pagination .next, section#pagination .prev {
  1868. display:inline-block;
  1869. }
  1870.  
  1871. section#pagination .prev {
  1872. padding:4px 7px 3px 5px;
  1873. }
  1874.  
  1875. section#pagination .next {
  1876. float:right;
  1877. padding:4px 5px 3px 7px;
  1878. }
  1879.  
  1880. /* INFINITE SCROLL */
  1881.  
  1882. #infscr-loading {
  1883. display:none!important;
  1884. }
  1885.  
  1886. .end_container, .more_container {
  1887. width:calc(82vw - 150px);
  1888. margin-left:calc(18vw + 115px);
  1889. font-size:15px;
  1890. margin-bottom:45px;
  1891. position:relative;
  1892. max-width:634px;
  1893. text-align:center;
  1894. border-radius:5px;
  1895. border:1px solid;
  1896. transition:all .3s ease-in-out;
  1897. }
  1898.  
  1899. body.dark .end_container, body.dark .more_container {
  1900. background:#32353b;
  1901. border-color:#2f3136;
  1902. }
  1903.  
  1904. body.light .end_container, body.light .more_container {
  1905. background:#d0d2d7;
  1906. border-color:#ccced3;
  1907. }
  1908.  
  1909. body.dark .more_container:hover {
  1910. background:#303237;
  1911. }
  1912.  
  1913. body.light .more_container:hover {
  1914. background:#c3c5ca;
  1915. }
  1916.  
  1917. .end_container {
  1918. display:none;
  1919. }
  1920.  
  1921. .end_container .end, .more_container a.more {
  1922. padding:10px;
  1923. display:block;
  1924. }
  1925.  
  1926. body.dark .end_container .end, body.dark .more_container a.more {
  1927. color:#8a8e94;
  1928. }
  1929.  
  1930. body.light .end_container .end, body.light .more_container a.more {
  1931. color:#fff;
  1932. }
  1933.  
  1934. /* SCROLL TO TOP BUTTON */
  1935.  
  1936. .scroll {
  1937. position:fixed;
  1938. bottom:55px;
  1939. right:20px;
  1940. font-size:17px;
  1941. cursor:pointer;
  1942. width:35px;
  1943. text-align:center;
  1944. display:none;
  1945. }
  1946.  
  1947. body.dark .scroll {
  1948. color:#c3c4c5;
  1949. }
  1950.  
  1951. body.light .scroll {
  1952. color:#36393b;
  1953. }
  1954.  
  1955. /* CREDIT - PLEASE DON'T REMOVE */
  1956.  
  1957. #credz {
  1958. position:fixed;
  1959. bottom:15px;
  1960. right:20px;
  1961. width:33px;
  1962. height:33px;
  1963. border-radius:50px;
  1964. border:1px solid rgba(0,0,0,.1);
  1965. background-image:url('https://78.media.tumblr.com/avatar_09d2b1f05d49_128.pnj');
  1966. background-repeat:no-repeat;
  1967. background-position:center center;
  1968. background-size:28px;
  1969. transition:all .5s ease-in-out;
  1970. }
  1971.  
  1972. a[href="https://cactusthemes.tumblr.com"]:hover > #credz {
  1973. transform:scale(1.15);
  1974. }
  1975.  
  1976. /* KEYFRAMES FOR FADE IN */
  1977.  
  1978. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1979. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1980. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1981. .fade-in {
  1982. opacity:0;
  1983. -webkit-animation:fadeIn ease-in 1;
  1984. -moz-animation:fadeIn ease-in 1;
  1985. animation:fadeIn ease-in 1;
  1986. -webkit-animation-fill-mode:forwards;
  1987. -moz-animation-fill-mode:forwards;
  1988. animation-fill-mode:forwards;
  1989. -webkit-animation-duration:1s;
  1990. -moz-animation-duration:1s;
  1991. animation-duration:1s;
  1992. }
  1993. .fade-in.one {
  1994. -webkit-animation-delay:0s;
  1995. -moz-animation-delay:0s;
  1996. animation-delay:0s;
  1997. }
  1998. .fade-in.two {
  1999. -webkit-animation-delay:0.8s;
  2000. -moz-animation-delay:0.8s;
  2001. animation-delay:0.8s;
  2002. }
  2003.  
  2004. /* RESPONSIVE DESIGN */
  2005.  
  2006. @media only screen and (max-width:1150px) and (min-width:850px) {
  2007. aside.actual, header h5, aside.actual section.down {
  2008. width:23vw;
  2009. }
  2010.  
  2011. section#posts {
  2012. width:calc(77vw - 100px);
  2013. margin-left:calc(23vw + 50px);
  2014. }
  2015. }
  2016.  
  2017. @media only screen and (max-width:1001px) {
  2018. header form.sb {
  2019. display:none;
  2020. }
  2021. }
  2022.  
  2023. @media only screen and (max-width:851px) {
  2024. header .th-push-pin-o {
  2025. display:none;
  2026. }
  2027. }
  2028.  
  2029. @media only screen and (max-width:851px) and (min-width:751px) {
  2030. aside.actual, header h5, aside.actual section.down {
  2031. width:25vw;
  2032. }
  2033.  
  2034. section#posts {
  2035. width:calc(75vw - 100px);
  2036. margin-left:calc(25vw + 50px);
  2037. }
  2038.  
  2039. article.post::after {
  2040. width:calc((75vw - 100px) - 25px);
  2041. }
  2042.  
  2043. .end_container, .more_container {
  2044. width:calc(75vw - 200px);
  2045. margin-left:calc(25vw + 115px);
  2046. }
  2047. }
  2048.  
  2049. @media only screen and (max-width:751px) and (min-width:445px) {
  2050. header h5, aside.actual {
  2051. display:none;
  2052. }
  2053.  
  2054. section#posts {
  2055. width:calc(100% - 50px);
  2056. margin:100px auto 0px auto;
  2057. }
  2058.  
  2059. article.popup {
  2060. width:45vw;
  2061. }
  2062.  
  2063. .end_container, .more_container {
  2064. width:calc(100% - 161px);
  2065. margin:50px auto 50px 91px;
  2066. }
  2067.  
  2068. label.hamburger, aside.sidepop {
  2069. display:block;
  2070. }
  2071.  
  2072. header h2 {
  2073. margin-left:50px;
  2074. }
  2075.  
  2076. .scroll {
  2077. display:none!important;
  2078. }
  2079. }
  2080.  
  2081. @media only screen and (max-width:751px) and (min-width:501px) {
  2082. article.post::after {
  2083. width:calc(100% + 40px);
  2084. }
  2085. }
  2086.  
  2087. @media only screen and (max-width:500px) and (min-width:445px) {
  2088. article.post, article.post::after {
  2089. width:100%;
  2090. }
  2091.  
  2092. ol.notes {
  2093. width:calc(100% - 66px);
  2094. }
  2095. }
  2096.  
  2097. @media only screen and (max-width:445px) {
  2098. section#posts {
  2099. margin:75px auto 0px auto;
  2100. }
  2101.  
  2102. header h5, aside.actual {
  2103. display:none;
  2104. }
  2105.  
  2106. article.popup {
  2107. width:45vw;
  2108. }
  2109.  
  2110. article.post {
  2111. width:100%;
  2112. font-size:13px;
  2113. }
  2114.  
  2115. article.post .quote {
  2116. font-size:13px;
  2117. }
  2118.  
  2119. article.post .qsource {
  2120. font-size:12px;
  2121. }
  2122.  
  2123. article.post .postinfo img, article.post .askinf img {
  2124. width:40px;
  2125. height:40px;
  2126. }
  2127.  
  2128. article.post .que {
  2129. width:calc(100% - 50px);
  2130. margin-left:10px;
  2131. }
  2132.  
  2133. article.post .postinfo h3 {
  2134. margin-left:10px;
  2135. }
  2136.  
  2137. article.post .postinfo a.date {
  2138. font-size:11px;
  2139. margin-left:7px;
  2140. }
  2141.  
  2142. article.post .postinfo a.nc {
  2143. font-size:11px;
  2144. }
  2145.  
  2146. ol.notes {
  2147. font-size:12px;
  2148. }
  2149.  
  2150. article.post::after {
  2151. width:100%;
  2152. }
  2153.  
  2154. .end_container, .more_container {
  2155. font-size:13px;
  2156. }
  2157.  
  2158. label.hamburger, aside.sidepop {
  2159. display:block;
  2160. }
  2161.  
  2162. header h2 {
  2163. margin-left:50px;
  2164. }
  2165.  
  2166. .scroll {
  2167. display:none!important;
  2168. }
  2169. }
  2170.  
  2171. @media only screen and (max-width:445px) and (min-width:380px) {
  2172. section#posts {
  2173. width:calc(100% - 20px);
  2174. }
  2175.  
  2176. article.post .postinfo h3 {
  2177. font-size:14px;
  2178. }
  2179.  
  2180. article.post .post_inner {
  2181. width:calc(100% - 46px);
  2182. margin-left:46px;
  2183. }
  2184.  
  2185. ol.notes {
  2186. width:calc(100% - 46px);
  2187. margin:0 0 50px 46px;
  2188. }
  2189.  
  2190. section#pagination {
  2191. width:calc(100% - 51px);
  2192. margin-left:46px;
  2193. }
  2194.  
  2195. .end_container, .more_container {
  2196. width:calc(100% - 95px);
  2197. margin:50px auto 50px 75px;
  2198. }
  2199. }
  2200.  
  2201. @media only screen and (max-width:380px) {
  2202. section#posts {
  2203. width:100%;
  2204. }
  2205.  
  2206. article.post .postinfo h3 {
  2207. font-size:13px;
  2208. vertical-align:middle;
  2209. margin-top:10px;
  2210. }
  2211.  
  2212. article.post .postinfo a.date {
  2213. margin-top:10px;
  2214. }
  2215.  
  2216. article.post .postinfo a.nc {
  2217. margin-top:7.5px;
  2218. }
  2219.  
  2220. article.post .post_inner {
  2221. width:100%;
  2222. margin-left:0;
  2223. margin-top:10px;
  2224. }
  2225.  
  2226. ol.notes {
  2227. width:100%;
  2228. margin:0 0 50px 0;
  2229. }
  2230.  
  2231. section#pagination {
  2232. margin:0;
  2233. width:100%;
  2234. }
  2235.  
  2236. .end_container, .more_container {
  2237. width:100%;
  2238. margin:50px auto;
  2239. }
  2240. }
  2241.  
  2242. {CustomCSS}
  2243.  
  2244. </style>
  2245.  
  2246. <script type="text/javascript">
  2247. $(document).ready(function(){
  2248. $('article.post').each(function(){
  2249. if($(this).hasClass('link') && $(this).hasClass('orig')) {
  2250. $(this).find('.postinfo h3').empty().html('{Name}');
  2251. }
  2252. });
  2253. $('.ht').each(function(){
  2254. $(this).text($(this).text().replace(/ /g, '{select:Spaces Channel Name}'));
  2255. $('aside nav a').each(function(){
  2256. $(this).text($(this).text().replace(/ /g, '{select:Spaces Channel Name}'));
  2257. })
  2258. });
  2259. {block:IndexPage}
  2260. {block:ifInfiniteScroll}
  2261. var $container = $('section#posts');
  2262. $container.infinitescroll({
  2263. navSelector: '#navigation',
  2264. nextSelector: '#next',
  2265. itemSelector: '.post',
  2266. loading: {
  2267. img: 'https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png',
  2268. msgText: '<b>loading more posts...</b>',
  2269. },
  2270. debug: true,
  2271. bufferPx: 0,
  2272. errorCallback: function(){
  2273. $('.more_container').hide();
  2274. $('.end_container').show();
  2275. }
  2276. }, function(items) {
  2277. var $items = $(items);
  2278. $items.addClass('new');
  2279. flexibleFrames($(".video"));
  2280. $items.each(function(){
  2281. var inlineImg = $(this).find('figure img').width();
  2282. $(this).find('.tmblr-attribution').css({"width":inlineImg});
  2283. $(this).find('.reblog-list:empty').parent('.caption').css({"display":"none"});
  2284. if($(this).find('.reblog-header').hasClass('reblog')) {
  2285. $(this).find('.reblog-content').find('p:first-of-type:not(.tmblr-attribution)').css({"margin-top":"-1em"});
  2286. } else if ($(this).find('figcaption').hasClass('title')) {
  2287. $(this).find('figcaption').find('p:first-of-type:not(.tmblr-attribution)').css({"margin-top":"1em"});
  2288. } else if (!$(this).find('figcaption').hasClass('title')) {
  2289. $(this).find('figcaption').find('p:first-of-type:not(.tmblr-attribution)').css({"margin-top":"-1em"});
  2290. }
  2291. });
  2292. $items.find('.qsource').each(function(){
  2293. $(this).text($(this).text().split('(via')[0]);
  2294. });
  2295. $itemsIDs = $items.map(function(){
  2296. return this.id;
  2297. }).get();
  2298. Tumblr.LikeButton.get_status_by_post_ids($itemsIDs);
  2299. $items.removeClass('new');
  2300. });
  2301. {/block:ifInfiniteScroll}
  2302. {block:ifLoadMoreButton}
  2303. $(window).unbind('.infscr');
  2304. $('.more').click(function(){
  2305. $container.infinitescroll('retrieve');
  2306. return false;
  2307. });
  2308. {/block:IfLoadMoreButton}
  2309. {/block:IndexPage}
  2310. });
  2311. </script>
  2312.  
  2313. </head>
  2314.  
  2315. <body class="{select:Color Theme}">
  2316.  
  2317. <!-- START HEADER -->
  2318.  
  2319. <label for="hamburger" class="hamburger fade-in one">
  2320. <span></span>
  2321. <span></span>
  2322. <span></span>
  2323. </label>
  2324.  
  2325. <input type="checkbox" id="hamburger" name="hamburger" hidden>
  2326.  
  2327. <header class="full fade-in one">
  2328.  
  2329. <h5>{Title}</h5>
  2330.  
  2331. <h2>
  2332. <span class="htag">#</span>
  2333. <span class="ht">
  2334. {block:HomePage}home{/block:HomePage}
  2335. {block:TagPage}{Tag}{/block:TagPage}
  2336. {block:SearchPage}{SearchQuery}{/block:SearchPage}
  2337. {block:Permalink}{block:PostTitle}{PostTitle}{/block:PostTitle}{/block:Permalink}
  2338. </span>
  2339. </h2>
  2340.  
  2341. <div class="desc">
  2342. {Description}
  2343. </div>
  2344.  
  2345. {block:ifUpdates}
  2346. <span class="th th-push-pin-o" aria-hidden="true"></span>
  2347. {/block:ifUpdates}
  2348.  
  2349. <form action="/search" method="get" class="sb"><input type="search" name="q" value="" autocomplete="off" placeholder="Search" class="sinput"></form>
  2350.  
  2351. </header>
  2352.  
  2353. <!-- END HEADER -->
  2354.  
  2355. {block:ifUpdates}
  2356.  
  2357. <!-- START UPDATES -->
  2358.  
  2359. <section id="updates">
  2360.  
  2361. <h5>Updates</h5>
  2362.  
  2363. {block:ifUpdate1}
  2364. <div class="ud">
  2365.  
  2366. <div class="col">
  2367. <img src="{image:Icon}">
  2368. </div>
  2369.  
  2370. <div class="col">
  2371. <h4>{Name}</h4><span class="date">{text:Update 1 Date}</span>
  2372. <p>{text:Update 1}</p>
  2373. </div>
  2374.  
  2375. </div>
  2376. {/block:ifUpdate1}
  2377.  
  2378. {block:ifUpdate2}
  2379. <div class="ud">
  2380.  
  2381. <div class="col">
  2382. <img src="{image:Icon}">
  2383. </div>
  2384.  
  2385. <div class="col">
  2386. <h4>{Name}</h4><span class="date">{text:Update 2 Date}</span>
  2387. <p>{text:Update 2}</p>
  2388. </div>
  2389.  
  2390. </div>
  2391. {/block:ifUpdate2}
  2392.  
  2393. {block:ifUpdate3}
  2394. <div class="ud">
  2395.  
  2396. <div class="col">
  2397. <img src="{image:Icon}">
  2398. </div>
  2399.  
  2400. <div class="col">
  2401. <h4>{Name}</h4><span class="date">{text:Update 3 Date}</span>
  2402. <p>{text:Update 3}</p>
  2403. </div>
  2404.  
  2405. </div>
  2406. {/block:ifUpdate3}
  2407.  
  2408. </section>
  2409.  
  2410. <!-- END UPDATES -->
  2411.  
  2412. {/block:ifUpdates}
  2413.  
  2414. <!-- START DESCRIPTION POPUP -->
  2415. <section class="pop">
  2416. <div class="fade"></div>
  2417.  
  2418. <article class="popup">
  2419. <h3>ABOUT</h3><span class="th th-cross" aria-hidden="true"></span>
  2420. {Description}
  2421. </article>
  2422.  
  2423. </section>
  2424.  
  2425. <!-- END DESCRIPTION POPUP -->
  2426.  
  2427. <!-- START POPUP SIDEBAR -->
  2428.  
  2429. <aside class="sidepop">
  2430.  
  2431. <h5>{Title}
  2432. <label for="hamburger" class="hamburger_1">
  2433. <span></span>
  2434. <span></span>
  2435. <span></span>
  2436. </label>
  2437. </h5>
  2438.  
  2439. <nav>
  2440.  
  2441. <a href="/" class="home {block:HomePage}active{/block:HomePage}"><span class="htag">#</span>home</a>
  2442. <a href="/ask"><span class="htag">#</span>ask</a>
  2443. {block:HasPages}
  2444. {block:Pages}
  2445. <a href="{URL}"><span class="htag">#</span>{Label}</a>
  2446. {/block:Pages}
  2447. {/block:HasPages}
  2448.  
  2449. </nav>
  2450.  
  2451. <section class="down">
  2452.  
  2453. <div class="down_inner">
  2454.  
  2455. <div class="col">
  2456. <img src="{image:Icon}">
  2457. </div>
  2458.  
  2459. <div class="col">
  2460. <h2>{Name}</h2>
  2461. {block:ifNumbers}
  2462. <h3>#{text:Numbers}</h3>
  2463. {/block:ifNumbers}
  2464. </div>
  2465.  
  2466. </div>
  2467.  
  2468. </section>
  2469.  
  2470. </aside>
  2471.  
  2472. <!-- END POPUP SIDEBAR -->
  2473.  
  2474. <!-- START SIDEBAR -->
  2475.  
  2476. <aside class="actual fade-in one">
  2477.  
  2478. <nav>
  2479.  
  2480. <a href="/" class="home {block:HomePage}active{/block:HomePage}"><span class="htag">#</span>home</a>
  2481. <a href="/ask"><span class="htag">#</span>ask</a>
  2482. {block:HasPages}
  2483. {block:Pages}
  2484. <a href="{URL}"><span class="htag">#</span>{Label}</a>
  2485. {/block:Pages}
  2486. {/block:HasPages}
  2487.  
  2488. </nav>
  2489.  
  2490. <section class="down">
  2491.  
  2492. <div class="down_inner">
  2493.  
  2494. <div class="col">
  2495. <img src="{image:Icon}">
  2496. </div>
  2497.  
  2498. <div class="col">
  2499. <h2>{Name}</h2>
  2500. {block:ifNumbers}
  2501. <h3>#{text:Numbers}</h3>
  2502. {/block:ifNumbers}
  2503. </div>
  2504.  
  2505. </div>
  2506.  
  2507. </section>
  2508.  
  2509. </aside>
  2510.  
  2511. <!-- END SIDEBAR -->
  2512.  
  2513. <!-- START POSTS -->
  2514.  
  2515. <section id="posts" class="fade-in two">
  2516.  
  2517. {block:Posts}
  2518.  
  2519. <!-- START POST -->
  2520.  
  2521. <article class="post {block:Text}text{/block:Text}{block:Link}link{/block:Link} {block:NotReblog}orig{/block:NotReblog}" id="{PostID}">
  2522.  
  2523. <!-- START POSTINFO -->
  2524.  
  2525. <div class="postinfo">
  2526. {block:NotReblog}
  2527. <a href="/"><img src="{PortraitURL-48}"></a>
  2528. <a href="/"><h3>{Name}</h3></a>
  2529. {block:Date}
  2530. <a href="{Permalink}" class="date">
  2531. {block:ifNotAmericanDates}
  2532. {DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear} at {12Hour}:{Minutes}{AmPm}
  2533. {block:ifNotAmericanDates}
  2534. {block:ifAmericanDates}
  2535. {MonthNumberWithZero}/{DayOfMonthWithZero}/{ShortYear} at {12Hour}:{Minutes}{AmPm}
  2536. {/block:ifAmericanDates}
  2537. </a>
  2538. {/block:Date}
  2539. {/block:NotReblog}
  2540.  
  2541. {block:RebloggedFrom}
  2542. <a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-48}"></a>
  2543. <a href="{ReblogParentURL}"><h3>{ReblogParentName}</h3></a>
  2544. <a href="{Permalink}" class="date">
  2545. {block:ifNotAmericanDates}
  2546. {DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear} at {12Hour}:{Minutes}{AmPm}
  2547. {block:ifNotAmericanDates}
  2548. {block:ifAmericanDates}
  2549. {MonthNumberWithZero}/{DayOfMonthWithZero}/{ShortYear} at {12Hour}:{Minutes}{AmPm}
  2550. {/block:ifAmericanDates}
  2551. </a>
  2552. {/block:RebloggedFrom}
  2553.  
  2554. {block:Date}
  2555. <a href="{Permalink}" class="nc">{NoteCountWithLabel}</a>
  2556. </div>
  2557. {/block:Date}
  2558.  
  2559. <!-- END POSTINFO -->
  2560.  
  2561. <div class="post_inner">
  2562.  
  2563. {block:Text}
  2564.  
  2565. <!-- START TEXT POST -->
  2566.  
  2567. {block:Title}
  2568. <h2 class="title">{Title}</h2>
  2569. {/block:Title}
  2570.  
  2571. <div class="caption">
  2572. {block:NotReblog}
  2573. <figcaption class="{block:Title}title{/block:Title}">
  2574. {Body}
  2575. </figcaption>
  2576. {/block:NotReblog}
  2577.  
  2578. {block:RebloggedFrom}
  2579. <div class="reblog-list">
  2580. {block:Reblogs}
  2581. <div class="reblog-header {block:isOriginalEntry}{block:RebloggedFrom}reblog{/block:RebloggedFrom}{block:ContentSource}source{block:ContentSource}{block:Title}title{/block:Title}{/block:isOriginalEntry}" style="{block:isOriginalEntry}{block:RebloggedFrom}display:none;{/block:RebloggedFrom}{block:ContentSource}display:block!important;{block:ContentSource}{/block:isOriginalEntry}{block:Title}margin-top:10px;{block:Title}">
  2582. {block:IsActive}
  2583. <a href="{Permalink}" target="_blank" class="active">
  2584. <img src="{PortraitURL-64}" class="blog">
  2585. <span class="blog">{Username}</span>
  2586. </a>
  2587. {/block:IsActive}
  2588.  
  2589. {block:IsDeactivated}
  2590. <span class="inactive">
  2591. <img src="{PortraitURL-64}" class="blog">
  2592. <span class="blog">{Username}</span>
  2593. </span>
  2594. {/block:IsDeactivated}
  2595.  
  2596. </div>
  2597. <div class="reblog-content">
  2598. {Body}
  2599. </div>
  2600. {/block:Reblogs}
  2601. </div>
  2602. {/block:RebloggedFrom}
  2603. </div>
  2604.  
  2605. <!-- END TEXT POST -->
  2606.  
  2607. {/block:Text}
  2608.  
  2609. {block:Photo}
  2610.  
  2611. <!-- START PHOTO POST -->
  2612.  
  2613. <div class="pic">
  2614. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  2615. <img src="{PhotoURL-HighRes}">
  2616. </a>
  2617. </div>
  2618.  
  2619. {block:Caption}
  2620. <div class="caption">
  2621. {block:NotReblog}
  2622. <figcaption class="title">
  2623. {Caption}
  2624. </figcaption>
  2625. {/block:NotReblog}
  2626.  
  2627. {block:RebloggedFrom}
  2628. <div class="reblog-list">
  2629. {block:Reblogs}
  2630. <div class="reblog-header">
  2631.  
  2632. {block:IsActive}
  2633. <a href="{Permalink}" target="_blank" class="active">
  2634. <img src="{PortraitURL-64}" class="blog">
  2635. <span class="blog">{Username}</span>
  2636. </a>
  2637. {/block:IsActive}
  2638.  
  2639. {block:IsDeactivated}
  2640. <span class="inactive">
  2641. <img src="{PortraitURL-64}" class="blog">
  2642. <span class="blog">{Username}</span>
  2643. </span>
  2644. {/block:IsDeactivated}
  2645.  
  2646. </div>
  2647. <div class="reblog-content">
  2648. {Body}
  2649. </div>
  2650. {/block:Reblogs}
  2651. </div>
  2652. {/block:RebloggedFrom}
  2653. </div>
  2654. {/block:Caption}
  2655.  
  2656. <!-- END PHOTO POST -->
  2657.  
  2658. {/block:Photo}
  2659.  
  2660. {block:Photoset}
  2661.  
  2662. <!-- START PHOTOSET POST -->
  2663.  
  2664. <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>
  2665.  
  2666. {block:Caption}
  2667. <div class="caption">
  2668. {block:NotReblog}
  2669. <figcaption class="title">
  2670. {Caption}
  2671. </figcaption>
  2672. {/block:NotReblog}
  2673.  
  2674. {block:RebloggedFrom}
  2675. <div class="reblog-list">
  2676. {block:Reblogs}
  2677. <div class="reblog-header">
  2678.  
  2679. {block:IsActive}
  2680. <a href="{Permalink}" target="_blank" class="active">
  2681. <img src="{PortraitURL-64}" class="blog">
  2682. <span class="blog">{Username}</span>
  2683. </a>
  2684. {/block:IsActive}
  2685.  
  2686. {block:IsDeactivated}
  2687. <span class="inactive">
  2688. <img src="{PortraitURL-64}" class="blog">
  2689. <span class="blog">{Username}</span>
  2690. </span>
  2691. {/block:IsDeactivated}
  2692.  
  2693. </div>
  2694. <div class="reblog-content">
  2695. {Body}
  2696. </div>
  2697. {/block:Reblogs}
  2698. </div>
  2699. {/block:RebloggedFrom}
  2700. </div>
  2701. {/block:Caption}
  2702.  
  2703. <!-- END PHOTOSET POST -->
  2704.  
  2705. {/block:Photoset}
  2706.  
  2707. {block:Panorama}
  2708.  
  2709. <!-- START PANORAMA POST -->
  2710.  
  2711. <div class="panorama">
  2712. {LinkOpenTag}
  2713. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
  2714. {LinkCloseTag}
  2715. </div>
  2716.  
  2717. {block:Caption}
  2718. <div class="caption">
  2719. {block:NotReblog}
  2720. <figcaption class="title">
  2721. {Caption}
  2722. </figcaption>
  2723. {/block:NotReblog}
  2724.  
  2725. {block:RebloggedFrom}
  2726. <div class="reblog-list">
  2727. {block:Reblogs}
  2728. <div class="reblog-header">
  2729.  
  2730. {block:IsActive}
  2731. <a href="{Permalink}" target="_blank" class="active">
  2732. <img src="{PortraitURL-64}" class="blog">
  2733. <span class="blog">{Username}</span>
  2734. </a>
  2735. {/block:IsActive}
  2736.  
  2737. {block:IsDeactivated}
  2738. <span class="inactive">
  2739. <img src="{PortraitURL-64}" class="blog">
  2740. <span class="blog">{Username}</span>
  2741. </span>
  2742. {/block:IsDeactivated}
  2743.  
  2744. </div>
  2745. <div class="reblog-content">
  2746. {Body}
  2747. </div>
  2748. {/block:Reblogs}
  2749. </div>
  2750. {/block:RebloggedFrom}
  2751. </div>
  2752. {/block:Caption}
  2753.  
  2754. <!-- END PANORAMA POST -->
  2755.  
  2756. {/block:Panorama}
  2757.  
  2758. {block:Quote}
  2759.  
  2760. <!-- START QUOTE POST -->
  2761.  
  2762. <div class="quote">
  2763. {Quote}
  2764. </div>
  2765.  
  2766. {block:Source}
  2767. <div class="qsource">&mdash;&nbsp;{Source}</div>
  2768. {/block:Source}
  2769.  
  2770. <!-- END QUOTE POST -->
  2771.  
  2772. {/block:Quote}
  2773.  
  2774. {block:Link}
  2775.  
  2776. <!-- START LINK POST -->
  2777.  
  2778. <a href="{URL}" {Target}><h2 class="ltitle">{Name}</h2></a>
  2779.  
  2780. {block:Description}
  2781. <div class="caption">
  2782. {block:NotReblog}
  2783. <figcaption class="title">
  2784. {Description}
  2785. </figcaption>
  2786. {/block:NotReblog}
  2787.  
  2788. {block:RebloggedFrom}
  2789. <div class="reblog-list">
  2790. {block:Reblogs}
  2791. <div class="reblog-header">
  2792.  
  2793. {block:IsActive}
  2794. <a href="{Permalink}" target="_blank" class="active">
  2795. <img src="{PortraitURL-64}" class="blog">
  2796. <span class="blog">{Username}</span>
  2797. </a>
  2798. {/block:IsActive}
  2799.  
  2800. {block:IsDeactivated}
  2801. <span class="inactive">
  2802. <img src="{PortraitURL-64}" class="blog">
  2803. <span class="blog">{Username}</span>
  2804. </span>
  2805. {/block:IsDeactivated}
  2806.  
  2807. </div>
  2808. <div class="reblog-content">
  2809. {Body}
  2810. </div>
  2811. {/block:Reblogs}
  2812. </div>
  2813. {/block:RebloggedFrom}
  2814. </div>
  2815. {/block:Description}
  2816.  
  2817. <!-- END LINK POST -->
  2818.  
  2819. {/block:Link}
  2820.  
  2821. {block:Chat}
  2822.  
  2823. <!-- START CHAT POST -->
  2824.  
  2825. {block:Title}<h2 class="title" style="margin-bottom:17px;">{Title}</h2>{/block:Title}
  2826.  
  2827. <section class="chat">
  2828. {block:Lines}
  2829. <div class="line">
  2830. {block:Label}
  2831. <span class="label">
  2832. {Label}
  2833. </span>
  2834. {/block:Label}
  2835. {Line}
  2836. </div>
  2837. {/block:Lines}
  2838. </section>
  2839.  
  2840. <!-- END CHAT POST -->
  2841.  
  2842. {/block:Chat}
  2843.  
  2844. {block:Video}
  2845.  
  2846. <!-- START VIDEO POST -->
  2847.  
  2848. <div class="video">
  2849. {Video-500}
  2850. </div>
  2851.  
  2852. {block:Caption}
  2853. <div class="caption">
  2854. {block:NotReblog}
  2855. <figcaption class="title">
  2856. {Caption}
  2857. </figcaption>
  2858. {/block:NotReblog}
  2859.  
  2860. {block:RebloggedFrom}
  2861. <div class="reblog-list">
  2862. {block:Reblogs}
  2863. <div class="reblog-header">
  2864.  
  2865. {block:IsActive}
  2866. <a href="{Permalink}" target="_blank" class="active">
  2867. <img src="{PortraitURL-64}" class="blog">
  2868. <span class="blog">{Username}</span>
  2869. </a>
  2870. {/block:IsActive}
  2871.  
  2872. {block:IsDeactivated}
  2873. <span class="inactive">
  2874. <img src="{PortraitURL-64}" class="blog">
  2875. <span class="blog">{Username}</span>
  2876. </span>
  2877. {/block:IsDeactivated}
  2878.  
  2879. </div>
  2880. <div class="reblog-content">
  2881. {Body}
  2882. </div>
  2883. {/block:Reblogs}
  2884. </div>
  2885. {/block:RebloggedFrom}
  2886. </div>
  2887. {/block:Caption}
  2888.  
  2889. <!-- END VIDEO POST -->
  2890.  
  2891. {/block:Video}
  2892.  
  2893. {block:Audio}
  2894.  
  2895. <!-- START AUDIO POST -->
  2896.  
  2897. {block:AudioEmbed}
  2898. <div class="audio_emb">
  2899. <div class="audio_emb_inner">
  2900. {AudioEmbed-500}
  2901. </div>
  2902. </div>
  2903. {/block:AudioEmbed}
  2904.  
  2905. {block:AudioPlayer}
  2906.  
  2907. <div class="audio_orig">
  2908.  
  2909. <div class="art">
  2910. {block:AlbumArt}
  2911. <img src="{AlbumArtURL}">
  2912. {/block:AlbumArt}
  2913. </div>
  2914.  
  2915. <div class="auinfo">
  2916. {block:TrackName}
  2917. <span class="inf track">
  2918. {TrackName}
  2919. </span>
  2920. {/block:TrackName}
  2921.  
  2922. {block:Album}
  2923. <span class="inf">
  2924. on {Album}
  2925. </span>
  2926. {/block:Album}
  2927.  
  2928. {block:Artist}
  2929. <span class="inf">
  2930. by {Artist}
  2931. </span>
  2932. {/block:Artist}
  2933. </div>
  2934.  
  2935. <div class="player">
  2936. {AudioPlayer}
  2937. </div>
  2938.  
  2939. </div>
  2940.  
  2941. {/block:AudioPlayer}
  2942.  
  2943. {block:Caption}
  2944. <div class="caption">
  2945. {block:NotReblog}
  2946. <figcaption class="title">
  2947. {Caption}
  2948. </figcaption>
  2949. {/block:NotReblog}
  2950.  
  2951. {block:RebloggedFrom}
  2952. <div class="reblog-list">
  2953. {block:Reblogs}
  2954. <div class="reblog-header">
  2955.  
  2956. {block:IsActive}
  2957. <a href="{Permalink}" target="_blank" class="active">
  2958. <img src="{PortraitURL-64}" class="blog">
  2959. <span class="blog">{Username}</span>
  2960. </a>
  2961. {/block:IsActive}
  2962.  
  2963. {block:IsDeactivated}
  2964. <span class="inactive">
  2965. <img src="{PortraitURL-64}" class="blog">
  2966. <span class="blog">{Username}</span>
  2967. </span>
  2968. {/block:IsDeactivated}
  2969.  
  2970. </div>
  2971. <div class="reblog-content">
  2972. {Body}
  2973. </div>
  2974. {/block:Reblogs}
  2975. </div>
  2976. {/block:RebloggedFrom}
  2977. </div>
  2978. {/block:Caption}
  2979.  
  2980. <!-- END AUDIO POST -->
  2981.  
  2982. {/block:Audio}
  2983.  
  2984. {block:Answer}
  2985.  
  2986. <!-- START ANSWER POST -->
  2987.  
  2988. <div class="ask">
  2989.  
  2990. <div class="askinf">
  2991. <img src="{AskerPortraitURL-128}">
  2992. </div>
  2993.  
  2994. <div class="que">
  2995. <span>{Asker}</span>
  2996. {Question}
  2997. </div>
  2998.  
  2999. </div>
  3000.  
  3001. <div class="caption">
  3002. {block:NotReblog}
  3003. <figcaption class="title">
  3004. {Replies}
  3005. </figcaption>
  3006. {/block:NotReblog}
  3007.  
  3008. {block:RebloggedFrom}
  3009. {block:Answerer}
  3010. <div class="reblog-header">
  3011. <a href="{ReblogRootURL}" class="active">
  3012. <img src="{AnswererPortraitURL-64}" class="blog">
  3013. <span class="blog">{ReblogRootName}</span>
  3014. </a>
  3015. </div>
  3016. <div class="reblog-content">
  3017. {Answer}
  3018. </div>
  3019. {/block:Answerer}
  3020. <div class="reblog-list">
  3021. {block:Reblogs}
  3022. <div class="reblog-header">
  3023.  
  3024. {block:IsActive}
  3025. <a href="{Permalink}" target="_blank" class="active">
  3026. <img src="{PortraitURL-64}" class="blog">
  3027. <span class="blog">{Username}</span>
  3028. </a>
  3029. {/block:IsActive}
  3030.  
  3031. {block:IsDeactivated}
  3032. <span class="inactive">
  3033. <img src="{PortraitURL-64}" class="blog">
  3034. <span class="blog">{Username}</span>
  3035. </span>
  3036. {/block:IsDeactivated}
  3037.  
  3038. </div>
  3039. <div class="reblog-content">
  3040. {Body}
  3041. </div>
  3042. {/block:Reblogs}
  3043. </div>
  3044. {/block:RebloggedFrom}
  3045. </div>
  3046.  
  3047. <!-- END ANSWER POST -->
  3048.  
  3049. {/block:Answer}
  3050.  
  3051. </div>
  3052.  
  3053. {block:RebloggedFrom}
  3054. <!-- <a href="{ReblogParentURL}" title="via: {ReblogParentName}"><img style="margin-bottom:-2px;" src="{ReblogParentPortraitURL-16}"></a> -->
  3055. {/block:RebloggedFrom}
  3056.  
  3057. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  3058.  
  3059. <!-- START TAGS -->
  3060.  
  3061. {block:HasTags}
  3062. <div class="tags">
  3063. {block:Tags}
  3064. <a href="{TagURL}"><span class="htag">#</span>{Tag}</a>
  3065. {/block:Tags}
  3066. </div>
  3067. {/block:HasTags}
  3068.  
  3069. <!-- END TAGS -->
  3070.  
  3071. </article>
  3072.  
  3073. <!-- END POST -->
  3074.  
  3075. {block:PostNotes}
  3076.  
  3077. <!-- POST NOTES -->
  3078.  
  3079. {PostNotes-64}
  3080.  
  3081. {/block:PostNotes}
  3082.  
  3083. {/block:Posts}
  3084.  
  3085. {block:ifNotInfiniteScroll}
  3086.  
  3087. {block:Pagination}
  3088.  
  3089. <!-- START PAGINATION -->
  3090.  
  3091. <section id="pagination">
  3092.  
  3093. <span class="pgbutton prev" {block:PreviousPage}style="display:none;"{/block:PreviousPage}><span class="th th-chevron-left" aria-hidden="true"></span></span>
  3094.  
  3095. {block:PreviousPage}
  3096. <a href="{PreviousPage}" class="pglink prev"><span class="th th-chevron-left" aria-hidden="true"></span></a>
  3097. {/block:PreviousPage}
  3098.  
  3099. <span class="pagecount">Page {CurrentPage} of {TotalPages}</span>
  3100.  
  3101. <span class="pgbutton next" {block:NextPage}style="display:none;"{/block:NextPage}><span class="th th-chevron-right" aria-hidden="true"></span></span>
  3102.  
  3103. {block:NextPage}
  3104. <a href="{NextPage}" class="pglink next"><span class="th th-chevron-right" aria-hidden="true"></span></a>
  3105. {/block:NextPage}
  3106.  
  3107. </section>
  3108.  
  3109. <!-- END PAGINATION -->
  3110.  
  3111. {/block:Pagination}
  3112.  
  3113. {/block:ifNotInfiniteScroll}
  3114.  
  3115. </section>
  3116.  
  3117. <!-- END POSTS -->
  3118.  
  3119. {block:IndexPage}
  3120.  
  3121. {block:ifInfiniteScroll}
  3122.  
  3123. <div id="navigation">
  3124. {block:Pagination}
  3125. {block:PreviousPage}<a href="{PreviousPage}">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  3126. {block:NextPage}<a href="{NextPage}" id="next">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}
  3127. {/block:Pagination}
  3128. </div>
  3129.  
  3130. {block:ifLoadMoreButton}
  3131. <!-- START LOAD MORE BUTTON -->
  3132. {block:Pagination}
  3133. <div class="more_container fade-in two">
  3134. <a href="#" class="more">Load more posts</a>
  3135. </div>
  3136. {/block:Pagination}
  3137. <!-- END LOAD MORE BUTTON -->
  3138. {/block:ifLoadMoreButton}
  3139.  
  3140. <!-- START END CONTAINER -->
  3141.  
  3142. <div class="end_container">
  3143. <div class="end">There are no more posts to display!</div>
  3144. </div>
  3145.  
  3146. <!-- END END CONTAINER -->
  3147.  
  3148. {/block:ifInfiniteScroll}
  3149.  
  3150. {/block:IndexPage}
  3151.  
  3152. <div class="scroll"><span class="th th-up-arrow" aria-hidden="true"></span></div>
  3153.  
  3154. <a href="https://cactusthemes.tumblr.com" title="by cactusthemes">
  3155. <div id="credz" class="fade-in two">
  3156. </div>
  3157. </a>
  3158.  
  3159. </body>
  3160.  
  3161. <script type="text/javascript">
  3162. function gatherData(images, arr) {
  3163. for (let i = 0; i < images.length; i++) {
  3164. let currentData = {
  3165. "width": images[i].getAttribute('data-width'),
  3166. "height": images[i].getAttribute('data-height'),
  3167. "low_res": images[i].getAttribute('data-lowres'),
  3168. "high_res": images[i].getAttribute('data-highres')
  3169. };
  3170. arr.push(currentData);
  3171. }
  3172. }
  3173. function getIndex(elem) {
  3174. let i = 0;
  3175. while( (elem = elem.previousElementSibling) != null ) i++;
  3176. return i;
  3177. }
  3178. function lightbox(elem) {
  3179. let currentPhotoset = elem.parentNode;
  3180. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  3181. let data = [];
  3182. gatherData(photosetPhotos, data);
  3183. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  3184. }
  3185. </script>
  3186.  
  3187. </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!