API tools faq
paste
mercurythms

cassiopeia (theme)

mercurythms
Sep 3rd, 2020 (edited)
739
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.52 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. cassiopeia :: @mercurythms :: @freddie-mercurys
  5.  
  6. please don't remove credit or take parts of this code :)
  7.  
  8.  
  9. -->
  10.  
  11. <!DOCTYPE html>
  12. <head>
  13.  
  14. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  15.  
  16. <link rel="shortcut icon" href="{favicon}">
  17.  
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  20.  
  21. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  22.  
  23. <!--variables-->
  24.  
  25. <meta name="image:icon" content=""/>
  26.  
  27. <meta name="color:background" content="#f6f6f6"/>
  28. <meta name="color:posts" content="#ffffff"/>
  29. <meta name="color:gradient 1" content="#ff8b9c"/>
  30. <meta name="color:gradient 2" content="#ffc79f"/>
  31. <meta name="color:gradient text" content="#ffffff"/>
  32. <meta name="color:text" content="#777777"/>
  33. <meta name="color:link" content="#bbbbbb"/>
  34. <meta name="color:link hover" content="#cccccc"/>
  35. <meta name="color:accent"content="#ffc79f"/>
  36. <meta name="color:accent hover"content="#ffa99e"/>
  37. <meta name="color:borders" content="#eeeeee"/>
  38.  
  39. <meta name="select:font" content="Karla" title="Karla">
  40. <meta name="select:font" content="Open Sans" title="Open Sans">
  41. <meta name="select:font" content="Lato" title="Lato">
  42. <meta name="select:font" content="Mulish" title="Mulish">
  43. <meta name="select:font" content="Overpass" title="Overpass">
  44. <meta name="select:font" content="Roboto" title="Roboto">
  45. <meta name="select:font" content="Nunito Sans" title="Nunito Sans">
  46. <meta name="select:font" content="Source Sans Pro" title="Source Sans Pro">
  47. <meta name="select:font" content="Raleway" title="Raleway">
  48. <meta name="select:font" content="Rubik" title="Rubik">
  49.  
  50. <meta name="select:font size" content="13px" title="13px"/>
  51. <meta name="select:font size" content="11px" title="11px"/>
  52. <meta name="select:font size" content="12px" title="12px"/>
  53. <meta name="select:font size" content="14px" title="14px"/>
  54. <meta name="select:font size" content="15px" title="15px"/>
  55.  
  56. <meta name="select:post width" content="540px" title="540px"/>
  57. <meta name="select:post width" content="450px" title="450px"/>
  58. <meta name="select:post width" content="500px" title="500px"/>
  59. <meta name="select:post width" content="600px" title="600px"/>
  60.  
  61. <meta name="select:post padding" content="1em" title="small"/>
  62. <meta name="select:post padding" content="1.5em" title="medium"/>
  63. <meta name="select:post padding" content="2em" title="large"/>
  64.  
  65. <meta name="text:home title" content="home"/>
  66. <meta name="text:home icon" content="home" />
  67. <meta name="text:ask title" content="ask"/>
  68. <meta name="text:ask icon" content="mail" />
  69. <meta name="text:archive title" content="archive"/>
  70. <meta name="text:archive icon" content="folder" />
  71. <meta name="text:menu title" content="more links"/>
  72. <meta name="text:menu icon" content="more-vertical" />
  73. <meta name="text:link 1 url" content="" />
  74. <meta name="text:link 1" content="" />
  75. <meta name="text:link 1 icon" content="user" />
  76. <meta name="text:link 2 url" content="" />
  77. <meta name="text:link 2" content="" />
  78. <meta name="text:link 2 icon" content="menu" />
  79. <meta name="text:link 3 url" content="" />
  80. <meta name="text:link 3" content="" />
  81. <meta name="text:link 3 icon" content="edit-2" />
  82. <meta name="text:link 4 url" content="" />
  83. <meta name="text:link 4" content="" />
  84. <meta name="text:link 4 icon" content="heart" />
  85.  
  86. <meta name="if:click icon for tags" content="1" />
  87. <meta name="if:click icon for post info" content="1" />
  88. <meta name="if:click icon for header links" content="1" />
  89. <meta name="if:post borders" content="1" />
  90. <meta name="if:search bar" content="1" />
  91.  
  92. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  93. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  94.  
  95. <!--google font-->
  96. <link href="https://fonts.googleapis.com/css?family={select:font}:400,400i,700,700i&display=swap" rel="stylesheet">
  97.  
  98. <!--feather icons-->
  99. <script src="https://unpkg.com/feather-icons@4.9.0/dist/feather.min.js"></script>
  100.  
  101. <!--tooltips-->
  102. <script src="https://unpkg.com/popper.js@1"></script>
  103. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  104.  
  105. <!--photosets-->
  106. <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  107. <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  108.  
  109. <!--mobile photosets-->
  110. <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet">
  111. <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script>
  112.  
  113. <style type="text/css">
  114. :root {
  115. --NPF-Image-Spacing:4px;
  116. --NPF-Bottom-Gap-From-Captions:1em;
  117. }
  118. </style>
  119.  
  120. <!--inline image fix-->
  121. <script src="//dl.dropbox.com/s/1mztc6y7i6ry9ri/gtresizing.js"></script>
  122.  
  123. <!-- responsive video -->
  124. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  125.  
  126. <!--CSS customization here. -->
  127.  
  128. <style type="text/css">
  129.  
  130. /*tumblr controls*/
  131.  
  132. .iframe-controls--desktop {
  133. white-space:nowrap!important;
  134. top:10px!important;
  135. right:10px!important;
  136. opacity:.6!important;
  137. position:fixed!important;
  138. transform:scale(0.65);
  139. transform-origin:100% 0;
  140. z-index: 999999999!important;
  141. }
  142.  
  143. .tmblr-iframe--app-cta-button {
  144. display: none!important;
  145. }
  146.  
  147. /*tooltips*/
  148.  
  149. .tippy-tooltip.custom-theme {
  150. background:{color:posts};
  151. color: {color:accent};
  152. border:1px solid {color:borders};
  153. text-align: center;
  154. letter-spacing: 1.5px;
  155. padding: 0.25em;
  156. margin: 20px auto auto 10px;
  157. font-size: 1em;
  158. }
  159.  
  160. /*scrollbar*/
  161.  
  162. ::-webkit-scrollbar{
  163. height:11px;
  164. width:11px;
  165. background:inherit;
  166. }
  167.  
  168. ::-webkit-scrollbar-thumb {background:{color:accent};}
  169.  
  170. ::-webkit-scrollbar-track {background:{color:borders};}
  171.  
  172. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border:4px solid {color:posts};}
  173.  
  174. /*main structure*/
  175.  
  176. body {
  177. background:{color:background};
  178. color:{color:text};
  179. font:{select:font size}/1.5em {select:font}, sans-serif;
  180. -webkit-font-smoothing: antialiased;
  181. letter-spacing:.5px;
  182. word-wrap:break-word;
  183. text-align:left;
  184. margin:0;
  185. opacity: 1;
  186. transition: 1s opacity;
  187. }
  188.  
  189. body.fade-out {
  190. opacity: 0;
  191. transition: none;
  192. }
  193.  
  194. a {
  195. color:{color:link};
  196. text-decoration:none;
  197. transition:all .3s linear;
  198. -webkit-transition:all .3s linear;
  199. -o-transition:all .3s linear;
  200. -moz-transition:all .3s linear;
  201. }
  202.  
  203. a, a img {cursor:pointer;}
  204.  
  205. a:hover {
  206. color:{color:link hover};
  207. text-decoration:none;
  208. }
  209.  
  210. img {
  211. opacity:1;
  212. border:0;
  213. text-decoration:none;
  214. max-width:100%;
  215. height:auto;
  216. display:block;
  217. }
  218.  
  219. blockquote {
  220. padding:.25em 0 .25em 15px;
  221. margin:.5em 0;
  222. border-left:1px solid #eee;
  223. }
  224.  
  225. pre {
  226. padding:0;
  227. margin:0;
  228. line-height:inherit!important;
  229. background:transparent;
  230. font-family:inherit!Important;
  231. font-size:inherit!important;
  232. white-space:pre-wrap;
  233. white-space:-moz-pre-wrap;
  234. white-space:-pre-wrap;
  235. white-space:-o-pre-wrap;
  236. word-wrap:break-word;
  237. }
  238.  
  239. p {margin:1em 0;}
  240.  
  241. p:first-of-type {margin-top:0;}
  242.  
  243. p:last-of-type {margin-bottom:0;}
  244.  
  245. b, strong, b a, strong a {
  246. font-weight:700!important;
  247. color:{color:accent};
  248. }
  249.  
  250. small, big, sub, pre {
  251. font-size:1em!important;
  252. line-height:1.5em!important;
  253. vertical-align:baseline!important;
  254. }
  255.  
  256. h1, h2, h3, h4 {
  257. margin:1.5em 0;
  258. font-size:1.5em;
  259. padding:0;
  260. color:{color:accent};
  261. font-weight:bold;
  262. }
  263.  
  264. .posts h1:first-child, .posts h2:first-child, .posts h3:first-child, .posts h4:first-child {margin-top:0;}
  265.  
  266. hr {
  267. border:none;
  268. box-shadow:0;
  269. margin:1.5em auto;
  270. width:calc({select:post width} - 2 * {select:post padding});
  271. border-top:1px solid {color:borders};
  272. }
  273.  
  274. svg {
  275. color:{color:accent};
  276. vertical-align:middle;
  277. stroke-width:1.5;
  278. }
  279.  
  280. html {
  281. scroll-behavior: smooth;
  282. }
  283.  
  284. /*header*/
  285.  
  286. header {
  287. box-sizing: border-box;
  288. display: flex;
  289. flex-direction: row;
  290. flex-wrap: nowrap;
  291. justify-content: space-around;
  292. align-items: center;
  293. align-content: stretch;
  294. width:{select:post width};
  295. margin:180px auto 120px auto;
  296. padding:0 3em;
  297. background:{color:background};
  298. }
  299.  
  300. .left {
  301. padding-right:1em;
  302. display: block;
  303. flex-grow: 0;
  304. flex-shrink: 0;
  305. flex-basis: auto;
  306. align-self: auto;
  307. order: 1;
  308. }
  309.  
  310. .left img {
  311. width:80px;
  312. height:80px;
  313. flex-shrink: 0;
  314. padding:8px;
  315. background:#fff;
  316. border:1px solid {color:borders};
  317. border-radius:50%;
  318. }
  319.  
  320. .right {
  321. width:70%;
  322. padding-left:1em;
  323. display: block;
  324. flex-grow: 1;
  325. flex-shrink: 0;
  326. flex-basis: auto;
  327. align-self: auto;
  328. order: 2;
  329. }
  330.  
  331. {block:ifnoticonimage}
  332. .left img {display:none;}
  333.  
  334. .left {display:none;}
  335.  
  336. .right {width:100%;}
  337. {/block:ifnoticonimage}
  338.  
  339. #blogtitle {
  340. font-size:1.25em;
  341. letter-spacing:1px;
  342. color:{color:accent};
  343. font-weight:700;
  344. }
  345.  
  346. #description {margin-top:5px;}
  347.  
  348. /*header navigation*/
  349.  
  350. .nav {
  351. display:inline-block;
  352. margin-top:10px;
  353. border:1px solid {color:borders};
  354. background:#fff;
  355. border-radius:100%;
  356. margin-right:8px;
  357. }
  358.  
  359. .nav a {
  360. width:1em;
  361. height:1em;
  362. }
  363.  
  364. .nav svg {
  365. width:1em;
  366. height:1em;
  367. padding:5px;
  368. transition:all .3s linear;
  369. -webkit-transition:all .3s linear;
  370. -o-transition:all .3s linear;
  371. -moz-transition:all .3s linear;
  372. }
  373.  
  374. .nav:hover svg {color:{color:accent hover};}
  375.  
  376. .more-icon {
  377. cursor:pointer;
  378. display:inline-block;
  379. }
  380.  
  381. .more-icon svg {
  382. width:1.25em;
  383. height:1.25em;
  384. }
  385.  
  386. .more-links {
  387. margin-top:10px;
  388. display:none;}
  389.  
  390. .more-links a {
  391. display:inline-block;
  392. margin-right:.5em;
  393. font-size:1em;
  394. transition:all .3s linear;
  395. -webkit-transition:all .3s linear;
  396. -o-transition:all .3s linear;
  397. -moz-transition:all .3s linear;
  398. }
  399.  
  400. /*search topbar*/
  401.  
  402. {block:ifsearchbar}
  403. .topbar {
  404. box-sizing: border-box;
  405. position:fixed;
  406. top:0;
  407. width:100%;
  408. background:{color:posts};
  409. {block:ifpostborders}
  410. border-bottom:1px solid {color:borders};
  411. {/block:ifpostborders}
  412. padding:1em;
  413. z-index:999;
  414. }
  415.  
  416. .find {
  417. margin-top:3px;
  418. }
  419.  
  420. .find input {
  421. border:0;
  422. outline:0;
  423. display:inline-block;
  424. margin:0 0 0 .5em;
  425. background:{color:posts};
  426. width:calc(100% - 60px);
  427. font-family:inherit;
  428. font-size:1em;
  429. }
  430.  
  431. .find svg {
  432. width:1.5em;
  433. height:1.5em;
  434. margin-bottom:3px;
  435. }
  436.  
  437. .find input[type=text] {color: {color:text};}
  438. input::-webkit-input-placeholder {color: {color:text};}
  439. input::-moz-placeholder {color: {color:text};}
  440. input:-moz-placeholder {color: {color:text};}
  441. input:-ms-input-placeholder {color: {color:text};}
  442. {/block:ifsearchbar}
  443.  
  444. /*pagination*/
  445.  
  446. footer {
  447. text-align:left;
  448. color:{color:link};
  449. }
  450.  
  451. footer span {
  452. text-align:right;
  453. float:right;
  454. display:inline-block;
  455. }
  456.  
  457. footer a {
  458. display:inline-block;
  459. border:0;
  460. margin:0 5px;
  461. }
  462.  
  463. /*posts*/
  464.  
  465. section {
  466. width:{select:post width};
  467. margin:0px auto 120px;
  468. }
  469.  
  470. .posts {
  471. box-sizing: border-box;
  472. width:{select:post width};
  473. padding:{select:post padding};
  474. background:{color:posts};
  475. {block:ifpostborders}
  476. border:1px solid {color:borders};
  477. {/block:ifpostborders}
  478. }
  479.  
  480. .ph {
  481. position:relative;
  482. overflow:hidden;
  483. }
  484.  
  485. .ph img {
  486. width:100%;
  487. display:block;
  488. }
  489.  
  490. /*photosets*/
  491.  
  492. [photoset-layout] {grid-gap: 4px;}
  493.  
  494. [photoset-layout] div {cursor: pointer;}
  495.  
  496. .npf_row {
  497. display:flex!important;
  498. margin:calc(var(--NPF-Image-Spacing) / -2)!important;
  499. margin-bottom:calc(var(--NPF-Image-Spacing) / 2)!important;
  500. }
  501.  
  502. .npf_row:last-of-type {
  503. margin-bottom:calc(var(--NPF-Image-Spacing) / -2)!important; }
  504.  
  505. .tmblr-full {
  506. flex:1;
  507. margin:0!important;
  508. padding:calc(var(--NPF-Image-Spacing) / 2)!important;
  509. width:auto!important;
  510. height:auto!important;
  511. outline:none;
  512. }
  513.  
  514. /*titles*/
  515.  
  516. .title {
  517. font-size:1.25em;
  518. letter-spacing:1px;
  519. color:{color:accent};
  520. font-weight:700;
  521. margin-bottom:1em;
  522. }
  523.  
  524. .title a {
  525. color:{color:accent};
  526. transition:all .3s linear;
  527. -webkit-transition:all .3s linear;
  528. -o-transition:all .3s linear;
  529. -moz-transition:all .3s linear;
  530. }
  531.  
  532. .title a:hover {color:{color:accent hover};}
  533.  
  534. .ted {margin-top:1em;}
  535.  
  536. /*captions*/
  537.  
  538. .comment {
  539. padding-bottom:1.5em;
  540. margin-bottom:1.5em;
  541. border-bottom:1px solid {color:borders};
  542. list-style:none;
  543. }
  544.  
  545. .comment:last-of-type {
  546. padding-bottom:0!important;
  547. margin-bottom:0!important;
  548. border:0!important;
  549. }
  550.  
  551. .captioned .comment:first-of-type {margin-top:1em;}
  552.  
  553. .user {
  554. display:inline-block;
  555. margin-bottom:.5em;
  556. }
  557.  
  558. .tex li, .tex blockquote {text-align:left;}
  559.  
  560. /*quote*/
  561.  
  562. .quote {
  563. font-size:1.25em;
  564. letter-spacing:1px;
  565. color:{color:accent};
  566. font-weight:700;
  567. }
  568.  
  569. /*audio*/
  570.  
  571. .audio {
  572. height:80px;
  573. background:{color:background};
  574. border:1px solid {color:borders};
  575. display: flex;
  576. flex-direction: row;
  577. flex-wrap: nowrap;
  578. justify-content: space-around;
  579. align-items: center;
  580. align-content: stretch;
  581. }
  582.  
  583. .album-art {
  584. width:80px;
  585. height:80px;
  586. display: block;
  587. flex-grow: 0;
  588. flex-shrink: 1;
  589. flex-basis: auto;
  590. align-self: auto;
  591. order: 1;
  592. }
  593.  
  594. .audio-info {
  595. text-align:center;
  596. text-transform:lowercase;
  597. display: block;
  598. flex-grow: 1;
  599. flex-shrink: 0;
  600. flex-basis: auto;
  601. align-self: auto;
  602. order: 2;
  603. }
  604.  
  605. .track {
  606. font-weight:700;
  607. font-size:1.2em;
  608. letter-spacing:1px;
  609. color:{color:accent};
  610. }
  611.  
  612. .track, .artist {
  613. overflow:hidden;
  614. white-space:nowrap;
  615. text-overflow:ellipsis;
  616. }
  617.  
  618. .player {
  619. width:30px;
  620. height:30px;
  621. margin-right:3em;
  622. background:{color:background};
  623. border:1px solid {color:borders};
  624. overflow:hidden;
  625. border-radius:50%;
  626. display: block;
  627. flex-grow: 0;
  628. flex-shrink: 1;
  629. flex-basis: auto;
  630. align-self: auto;
  631. order: 3;
  632. }
  633.  
  634. .spotify_audio_player {
  635. height: 80px !important;
  636. }
  637.  
  638. /*chat*/
  639.  
  640. .chat {
  641. text-align:left;
  642. margin:0;
  643. padding:0;
  644. list-style:none;
  645. }
  646.  
  647. .l {
  648. background:{color:posts};
  649. padding-bottom:.5em;
  650. }
  651.  
  652. .l:last-of-type {padding-bottom:0;}
  653.  
  654. .label {
  655. font-weight:700;
  656. color:{color:accent};
  657. display:inline-block;
  658. }
  659.  
  660. /*pinned post*/
  661.  
  662. .pinned {
  663. text-align:left;
  664. color:{color:accent};
  665. font-size:1em;
  666. margin-bottom:1em;
  667. }
  668.  
  669. .pinned svg {
  670. width:1.5em;
  671. height:1.5em;
  672. display:inline-block;
  673. }
  674.  
  675. /*top and bottom info*/
  676.  
  677. .top-info, .bottom-info {
  678. box-sizing: border-box;
  679. display:flex;
  680. flex-direction:row;
  681. flex-wrap: wrap;
  682. justify-content:space-between;
  683. align-items: center;
  684. align-content: center;
  685. width:{select:post width};
  686. padding:1em;
  687. background: linear-gradient(135deg, {color:gradient 1} 0%, {color:gradient 2} 100%);
  688. }
  689.  
  690. .top-info {
  691. {block:ifpostborders}
  692. border-left:1px solid {color:borders};
  693. border-right:1px solid {color:borders};
  694. border-top:1px solid {color:borders};
  695. {/block:ifpostborders}
  696. }
  697.  
  698. .bottom-info {
  699. {block:ifpostborders}
  700. border-left:1px solid {color:borders};
  701. border-right:1px solid {color:borders};
  702. border-bottom:1px solid {color:borders};
  703. {/block:ifpostborders}
  704. margin-bottom:120px;
  705. }
  706.  
  707. .top-info a, .bottom-info a {
  708. display:inline-block;
  709. margin-right:1em;
  710. color:{color:gradient text};
  711. }
  712.  
  713. .top-info a:last-child, .bottom-info a:last-child {
  714. margin-right:0;
  715. }
  716.  
  717. .top-info svg, .bottom-info svg {
  718. width:1.5em;
  719. height:1.5em;
  720. display:block;
  721. margin-top:.5em;
  722. color:{color:gradient text};
  723. }
  724.  
  725. /*like and reblog*/
  726.  
  727. .likereblog a {
  728. position: relative;
  729. overflow: hidden;
  730. }
  731.  
  732. .likereblog .like .liked + svg path {fill: {color:accent};}
  733.  
  734. .likereblog .like .like_button {position: relative;}
  735.  
  736. .likereblog .like .like_button iframe {
  737. position: absolute;
  738. top: 0;
  739. left: 0;
  740. bottom: 0;
  741. right: 0;
  742. z-index: 2;
  743. opacity: 0.000001;
  744. }
  745.  
  746. /*permalink and post info*/
  747.  
  748. .info-icon {
  749. display: block;
  750. }
  751.  
  752. .info {
  753. color:{color:gradient text};
  754. flex-grow: 1;
  755. text-align:right;
  756. {block:ifclickiconforpostinfo}
  757. flex-basis:100%;
  758. display: none;
  759. {/block:ifclickiconforpostinfo}
  760. }
  761.  
  762. .notecount, .date, .source {
  763. display:inline-block;
  764. font-weight:700;
  765. }
  766.  
  767. .source a {color:{color:gradient text};}
  768.  
  769. /*tags and permalink*/
  770.  
  771. .tag-icon, .perma {
  772. display:block;
  773. }
  774.  
  775. .tags {
  776. flex-grow:1;
  777. flex-basis:90%;
  778. {block:ifclickiconfortags}
  779. flex-basis:100%;
  780. display: none;
  781. {/block:ifclickiconfortags}
  782. }
  783.  
  784. .tags a {
  785. display:inline-block;
  786. }
  787.  
  788. /*permalink page*/
  789.  
  790. .pagenotes {
  791. margin-top:-2em;
  792. padding-top:2em;
  793. {block:ifpostborders}
  794. border:1px solid {color:borders};
  795. {block:ifpostborders}
  796. }
  797.  
  798. ol.notes {
  799. list-style-type:none;
  800. padding:0px;
  801. margin:0px;
  802. }
  803.  
  804. ol.notes li.note {
  805. display:block;
  806. padding:0;
  807. margin:5px 0;
  808. }
  809.  
  810. ol.notes li.note img.avatar {display:none!important;}
  811.  
  812. a.more_notes_link {
  813. display:block;
  814. text-align:center;
  815. color:{color:accent};
  816. }
  817.  
  818. /*responsive*/
  819.  
  820. @media only screen and (max-width: 1024px){
  821. header, section, footer, .posts, .top-info, .bottom-info {width:80vw;}
  822. hr {width: calc(80vw - 2*{select:post padding})}
  823. }
  824.  
  825. @media only screen and (max-width: 600px){
  826. header {
  827. text-align:center;
  828. flex-direction: column;
  829. }
  830. .left {
  831. margin-bottom:15px;
  832. padding-right:1em;
  833. }
  834. .right {
  835. width:100%;
  836. padding-left:0em;
  837. }
  838. }
  839.  
  840. /*theme credit*/
  841.  
  842. .credit {
  843. display:block;
  844. position:fixed;
  845. right:20px;
  846. bottom:20px;
  847. font-size:1.2em;
  848. }
  849.  
  850. {CustomCSS}
  851.  
  852. </style>
  853.  
  854. </head>
  855.  
  856. <body>
  857.  
  858. <script>document.body.className += ' fade-out';</script>
  859.  
  860. {block:ifsearchbar}
  861. <div class="topbar">
  862. <form action="/search" method="get" class="find" name="sform">
  863. <i data-feather="search"></i>
  864. <input type="text" name="q" placeholder="search {name}" value="{SearchQuery}" value autocomplete="off" class="upper"/>
  865. </form>
  866. </div>
  867. {/block:ifsearchbar}
  868.  
  869. <header>
  870. <div class="left">
  871. {block:ificonimage}<a href="/" title="@{name}"><img src="{image:icon}"/></a>{block:ificonimage}</div>
  872.  
  873. <div class="right">
  874. <a id="blogtitle" href="/">{Title}</a>
  875. <div id="description">{Description}</div>
  876.  
  877. {block:ifhometitle}<a href="/" title="{text:home title}"><div class="nav"><i data-feather="{text:home icon}"></i></div></a>{/block:ifhometitle}
  878. {block:ifasktitle}<a href="/ask" title="{text:ask title}"><div class="nav"><i data-feather="{text:ask icon}"></i></div></a>{/block:ifasktitle}
  879. {block:ifarchivetitle}<a href="/archive" title="{text:archive title}"><div class="nav"><i data-feather="{text:archive icon}"></i></div></a>{/block:ifarchivetitle}
  880.  
  881. {block:ifnotclickiconforheaderlinks}
  882. {block:iflink1}<a href="{text:link 1 url}" title="{text:link 1}"><div class="nav"><i data-feather="{text:link 1 icon}"></i></div></a>{/block:iflink1}
  883. {block:iflink2}<a href="{text:link 2 url}" title="{text:link 2}"><div class="nav"><i data-feather="{text:link 2 icon}"></i></div></a>{/block:iflink2}
  884. {block:iflink3}<a href="{text:link 3 url}" title="{text:link 3}"><div class="nav"><i data-feather="{text:link 3 icon}"></i></div></a>{/block:iflink3}
  885. {block:iflink4}<a href="{text:link 4 url}" title="{text:link 4}"><div class="nav"><i data-feather="{text:link 4 icon}"></i></div></a>{/block:iflink4}
  886. {/block:ifnotclickiconforheaderlinks}
  887.  
  888. {block:ifclickiconforheaderlinks}<a title="{text:menu title}"><div class="more-icon"><i data-feather="{text:menu icon}"></i></div></a>{block:ifclickiconforheaderlinks}
  889. <div class="more-links">
  890. {block:iflink1}<a href="{text:link 1 url}">{text:link 1}</a>{/block:iflink1}
  891. {block:iflink2}<a href="{text:link 2 url}">{text:link 2}</a>{/block:iflink2}
  892. {block:iflink3}<a href="{text:link 3 url}">{text:link 3}</a>{/block:iflink3}
  893. {block:iflink4}<a href="{text:link 4 url}">{text:link 4}</a>{/block:iflink4}
  894. </div>
  895. </div>
  896.  
  897. </header>
  898.  
  899. <section id="entries">{block:posts}
  900.  
  901. {block:PinnedPostLabel}<div class="pinned"><i data-feather="paperclip"></i> {PinnedPostLabel}</div>{/block:PinnedPostLabel}
  902.  
  903. <div class="top-info">
  904. {block:Date}
  905. <div class="likereblog"><a href="{ReblogURL}" title="reblog this post"><i data-feather="rotate-cw"></i></a>
  906. <a class="like" title="like this post">{LikeButton}<i data-feather="heart"></i></a></div>
  907. {block:ifclickiconforpostinfo}<div class="info-icon"><a title="show post info"><i data-feather="info"></i></a></div>{/block:ifclickiconforpostinfo}
  908. <div class="info">posted on <div class="date">{Month} {DayOfMonth}</div>{block:NoteCount} with <div class="notecount">{NoteCount}</div> notes{/block:NoteCount}<br>{block:ContentSource}source: <div class="source"><a href="{SourceURL}">{SourceTitle}</a></div>{/block:ContentSource}</div>
  909. {/block:Date}
  910. </div>
  911.  
  912. <article class="posts {block:caption}captioned{/block:caption}" post-type="{PostType}">
  913.  
  914. {block:Quote}
  915. <div class="quote">＂{quote}＂</div>
  916. <hr>
  917. {block:Source}{source}{/block:Source}
  918. {/block:Quote}
  919.  
  920. {block:Text}
  921. {block:Title}<div class="title">{title}</div>
  922. <hr>{/block:Title}
  923. {block:RebloggedFrom}
  924. {block:Reblogs}
  925. <li class="comment {block:Title}ted{/block:Title}">
  926. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  927. <div class="tex">{body}</div>
  928. </li>
  929. {/block:Reblogs}
  930. {/block:RebloggedFrom}
  931. {block:NotReblog}
  932. <li class="comment {block:Title}ted{/block:Title}">
  933. <div class="tex">{body}</div>
  934. </li>
  935. {/block:NotReblog}
  936. {/block:Text}
  937.  
  938. {block:Link}
  939. <div class="title"><a href="{URL}">{name}</a></div>
  940. <hr>
  941. {block:Description}
  942. {block:NotReblog}
  943. <li class="comment ted">
  944. <div class="tex">{description}</div>
  945. </li>
  946. {/block:NotReblog}
  947. {/block:Description}
  948. {block:RebloggedFrom}
  949. {block:Reblogs}
  950. <li class="comment">
  951. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  952. <div class="tex">{body}</div>
  953. </li>
  954. {/block:Reblogs}
  955. {/block:RebloggedFrom}
  956. {/block:Link}
  957.  
  958. {block:Chat}
  959. {block:Title}<div id="title">{title}</div>
  960. <hr>{/block:Title}
  961. <ol class="chat {block:Title}ted{/block:Title}">
  962. {block:lines}
  963. <li class="l {Alt}">
  964. {block:label}<span class="label">{label}</span>{/block:label} {line}
  965. </li>
  966. {/block:lines}
  967. </ol>
  968. {/block:Chat}
  969.  
  970. <div class="ph">
  971.  
  972. {block:Photo}
  973. {linkopentag}<img src="{photoURL-HighRes}" alt="{PhotoAlt}"/>{linkclosetag}{/block:Photo}
  974.  
  975. {block:Photoset}
  976. <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>{/block:Photoset}
  977.  
  978. {block:Video}
  979. <div class="video">{Video-500}</div>
  980. {/block:Video}
  981.  
  982. {block:Audio}
  983. <div class="audio">
  984. <div class="album-art">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  985. <div class="audio-info">
  986. <div class="track">{block:TrackName}{TrackName}{/block:TrackName}</div>
  987. <div class="artist">{block:Artist}by {Artist}{/block:Artist}</div>
  988. </div>
  989. <div class="player">{AudioPlayer}</div>
  990. </div>
  991. {/block:Audio}
  992.  
  993. {block:caption}
  994. {block:Reblogs}
  995. <li class="comment">
  996. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  997. <div class="tex">{body}</div>
  998. </li>
  999. {/block:Reblogs}
  1000. {block:NotReblog}
  1001. <li class="comment">
  1002. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{name}</a>
  1003. <div class="tex">{caption}</div>
  1004. </li>
  1005. {/block:NotReblog}
  1006. {/block:caption}
  1007.  
  1008. </div>
  1009.  
  1010. {block:Answer}
  1011. <div class="question">
  1012. <li class="comment">
  1013. <div class="user">
  1014. {asker} <i>asked:</i></div>
  1015. <div class="tex">{question}</div>
  1016. </li>
  1017. <hr>
  1018. </div>
  1019. {block:Answerer}
  1020. <li class="comment">
  1021. <div class="user">
  1022. {answerer} <i>replied:</i></div>
  1023. <div class="tex">{answer}</div>
  1024. </li>
  1025. {/block:Answerer}
  1026.  
  1027. {block:NotReblog}
  1028. <li class="comment">
  1029. <div class="tex">{replies}</div>
  1030. </li>
  1031. {/block:NotReblog}
  1032. {block:RebloggedFrom}
  1033. {block:Reblogs}
  1034. <li class="comment">
  1035. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  1036. <div class="tex">{body}</div>
  1037. </li>
  1038. {/block:Reblogs}
  1039. {/block:RebloggedFrom}
  1040. {/block:Answer}
  1041. </article>
  1042.  
  1043. <div class="bottom-info">
  1044. {block:HasTags}
  1045. {block:ifclickiconfortags}<div class="tag-icon"><a title="show tags"><i data-feather="tag"></i></a></div>{/block:ifclickiconfortags}
  1046. {block:ifnotclickiconfortags}<div class="tags">{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>{/block:ifnotclickiconfortags}
  1047. {/block:HasTags}
  1048. {block:Date}<a href="{permalink}" title="see permalink"><div class="perma"><i data-feather="link-2"></i></a></div>{/block:Date}
  1049. {block:HasTags}
  1050. {block:ifclickiconfortags}<div class="tags">{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>{/block:ifclickiconfortags}
  1051. {/block:HasTags}
  1052. </div>
  1053.  
  1054. {block:PostNotes}
  1055. <article class="posts pagenotes">
  1056. {block:RebloggedFrom}
  1057. via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1058. {block:ContentSource}, source: <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:ContentSource}
  1059.  
  1060. {/block:RebloggedFrom}
  1061. {PostNotes}
  1062. </article>
  1063. {/block:PostNotes}
  1064.  
  1065. {/block:Posts}
  1066.  
  1067. {block:Pagination}
  1068. <footer id="pagination">
  1069. <span>
  1070. {block:PreviousPage}<a href="{PreviousPage}">back</a>{block:nextpage}/{/block:nextpage}{/block:PreviousPage}
  1071. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage} </span>
  1072. <a href="#" class="scrollup">back to top</a>
  1073. </footer>
  1074. {/block:Pagination}
  1075.  
  1076. </section>
  1077.  
  1078. <div class="credit"><a href="https://mercurythms.tumblr.com" title="mercurythms">m.</a></div>
  1079.  
  1080. <!--scripts-->
  1081.  
  1082. <script>
  1083.  
  1084. //feather icons
  1085. feather.replace();
  1086.  
  1087. //click open tags, post info and nav menu
  1088.  
  1089. $(".tag-icon").click(function(){
  1090. $(this).parents(".bottom-info").find(".tags").slideToggle(500);
  1091. });
  1092.  
  1093. $(".info-icon").click(function(){
  1094. $(this).parents(".top-info").find(".info").slideToggle(500);
  1095. });
  1096.  
  1097. $(".more-icon").click(function(){
  1098. $(".more-links").slideToggle(500);
  1099. });
  1100.  
  1101. //tooltips
  1102. tippy('[title]', {
  1103. theme: 'custom',
  1104. arrow: false,
  1105. followCursor: true,
  1106. delay: 100,
  1107. placement: 'top-end',
  1108. zIndex: 9999999999,
  1109. maxWidth: 400,
  1110.  
  1111. content(reference) {
  1112. const title = reference.getAttribute('title');
  1113. reference.removeAttribute('title');
  1114. return title;
  1115. },
  1116. });
  1117.  
  1118. //photosets
  1119. initPhotosets();
  1120.  
  1121. //notecount shortener
  1122. var $container = $('.top-info');
  1123. $container.find('.notecount').each(function(){
  1124. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1125. if (n > 999) {
  1126. n = Math.floor(n / 100) / 10;
  1127. $(this).text(n + 'k');
  1128. }
  1129. });
  1130.  
  1131. //responsive video
  1132. $(document).ready(function() {
  1133. flexibleFrames($(".video"));
  1134. });
  1135.  
  1136. // remove redirects
  1137. function noHrefLi(){
  1138. var linkSet = document.querySelectorAll('a[href*="href.li/?"]');
  1139. Array.prototype.forEach.call(linkSet,function(el,i){
  1140. var theLink = linkSet[i].getAttribute('href').split("href.li/?")[1];
  1141. linkSet[i].setAttribute("href",theLink);
  1142. });
  1143. }
  1144. noHrefLi();
  1145.  
  1146. // fade in effect
  1147. $(function() {
  1148. $('body').removeClass('fade-out');
  1149. });
  1150.  
  1151. </script>
  1152.  
  1153. {block:ContentSource}
  1154. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1155. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1156. {/block:SourceLogo}
  1157. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1158. {/block:ContentSource}
  1159. </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!