API tools faq
paste
mercurythms

eclipse (theme)

mercurythms
Dec 8th, 2020 (edited)
2,463
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.37 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. eclipse :: @mercurythms :: @freddie-mercurys
  4.  
  5. please don't remove credit or take parts of this code :)
  6.  
  7. -->
  8.  
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  13.  
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  17. <meta charset="utf-8">
  18. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  19.  
  20. <!----- VARIABLES AND OPTIONS ----->
  21.  
  22. <meta name="image:Sidebar" content=""/>
  23. <meta name="image:Sidebar Icon" content=""/>
  24.  
  25. <meta name="color:Background" content="#ffffff"/>
  26. <meta name="color:Caption Background" content="#fbfbfb"/>
  27. <meta name="color:Text" content="#707070"/>
  28. <meta name="color:Link" content="#9a9a9a"/>
  29. <meta name="color:Accent" content="#71d3d7"/>
  30. <meta name="color:Borders" content="#dcdcdc"/>
  31. <meta name="color:Title" content="#121212"/>
  32. <meta name="color:Button Background" content="#fbfbfb"/>
  33. <meta name="color:Button Shadow" content="#dcdcdc"/>
  34.  
  35. <meta name="select:Post Width" content="400px" title="400px"/>
  36. <meta name="select:Post Width" content="500px" title="500px"/>
  37. <meta name="select:Post Width" content="540px" title="540px"/>
  38.  
  39. <meta name="select:Sidebar Position" content="right" title="Right"/>
  40. <meta name="select:Sidebar Position" content="left" title="Left"/>
  41.  
  42. <meta name="select:Font Size" content="15px" title="15px"/>
  43. <meta name="select:Font Size" content="14px" title="14px"/>
  44. <meta name="select:Font Size" content="13px" title="13px"/>
  45.  
  46. <meta name="select:Title Style" content="lowercase" title="Lowercase"/>
  47. <meta name="select:Title Style" content="uppercase" title="Uppercase"/>
  48. <meta name="select:Title Style" content="capitalize" title="Capitalize"/>
  49.  
  50. <meta name="if:Rounded Corners" content="0"/>
  51. <meta name="if:Animated Scrolling" content="0"/>
  52.  
  53. <meta name="text:Home Link" content="home"/>
  54. <meta name="text:Ask Link" content="ask"/>
  55. <meta name="text:Archive Link" content="archive"/>
  56. <meta name="text:Link 1 URL" content=""/>
  57. <meta name="text:Link 1" content=""/>
  58. <meta name="text:Link 1 Icon" content=""/>
  59. <meta name="text:Link 2 URL" content=""/>
  60. <meta name="text:Link 2" content=""/>
  61. <meta name="text:Link 2 Icon" content=""/>
  62. <meta name="text:Link 3 URL" content=""/>
  63. <meta name="text:Link 3" content=""/>
  64. <meta name="text:Link 3 Icon" content=""/>
  65.  
  66. <meta name="text:Post Margin" content="150"/>
  67.  
  68. <meta name="text:Font" content="Karla"/>
  69. <meta name="text:Title Font" content="Karla"/>
  70.  
  71. <!--SCRIPTS-->
  72. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  73.  
  74. <!--GOOGLE FONTS-->
  75. <link rel="preconnect" href="https://fonts.gstatic.com">
  76. <link href="https://fonts.googleapis.com/css2?family={text:font}:wght@400;700&display=swap" rel="stylesheet">
  77. <link rel="preconnect" href="https://fonts.gstatic.com">
  78. <link href="https://fonts.googleapis.com/css2?family={text:title font}:wght@400;700&display=swap" rel="stylesheet">
  79.  
  80. <!-- LINE AWESOME ICONS (to choose link icons go to https://icons8.com/line-awesome and type icon names you want in theme options -->
  81. <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
  82. <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
  83.  
  84. <!--TOOLTIPS-->
  85. <script src="https://unpkg.com/popper.js@1"></script>
  86. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  87.  
  88. <!--RESPONSIVE VIDEO-->
  89. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  90.  
  91. <!--PHOTOSET FIX-->
  92. <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  93. <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  94.  
  95. <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet">
  96. <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script>
  97. <style type="text/css">
  98. :root {
  99. --NPF-Image-Spacing: 5px;
  100. --NPF-Bottom-Gap-From-Captions: 1em;
  101. }
  102. </style>
  103.  
  104. <!--ANIMATED SCROLLING-->
  105. <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
  106. <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  107.  
  108. <!----- CSS ----->
  109.  
  110. <style type="text/css">
  111.  
  112. /*----- TOOLTIPS -----*/
  113.  
  114. .tippy-tooltip.custom-theme {
  115. background-color: {color:background};
  116. color: {color:accent};
  117. font-weight: 700;
  118. text-align: center;
  119. text-transform: uppercase;
  120. letter-spacing: 0.2em;
  121. font-size: 0.7em;
  122. border:1px solid {color:borders};
  123. margin: 5px 0;
  124. }
  125.  
  126. /*----- TUMBLR CONTROLS -----*/
  127.  
  128. #controls-icon i {
  129. position: fixed;
  130. top: 20px;
  131. right: 20px;
  132. font-size: 1.3em;
  133. color: {color:title};
  134. z-index: 50;
  135. }
  136.  
  137. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  138. z-index: 999999999!important;
  139. opacity: 0;
  140. transform: scale(0.7);
  141. transform-origin: 100% 0;
  142. margin-top: 11px;
  143. padding-right: calc(45px + 1.5em);
  144. -webkit-transform: scale(0.7);
  145. -webkit-transform-origin: 100% 0;
  146. -o-transform: scale(0.7);
  147. -o-transform-origin: 100% 0;
  148. -moz-transform: scale(0.7);
  149. -moz-transform-origin: 100% 0;
  150. -ms-transform: scale(0.7);
  151. -ms-transform-origin: 100% 0;
  152. -webkit-transition: all 0.5s;
  153. -moz-transition: all 0.5s;
  154. -ms-transition: all 0.5s;
  155. -o-transition: all 0.5s;
  156. transition: all 0.5s;
  157. }
  158.  
  159. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  160. opacity: 1.0;
  161. -webkit-transition: all 0.5s;
  162. -moz-transition: all 0.5s;
  163. -ms-transition: all 0.5s;
  164. -o-transition: all 0.5s;
  165. transition: all 0.5s;
  166. }
  167.  
  168. /*----- SCROLLBAR -----*/
  169.  
  170. ::-webkit-scrollbar {
  171. width:17px;
  172. height:17px;
  173. background-color: {color:background}; /* background color */
  174. }
  175. ::-webkit-scrollbar-track {
  176. border:6px solid {color:background}; /* background color */
  177. background-color: {color:background}; /* light border color */
  178. }
  179. ::-webkit-scrollbar-thumb {
  180. border:6px solid {color:background}; /* background color */
  181. background-color: {color:title}; /* dark border color */
  182. min-height:24px;
  183. min-width:24px;
  184. }
  185.  
  186. /*----- BASIC STYLING -----*/
  187.  
  188. body {
  189. font: {select:font size}/1.5em {text:font};
  190. -webkit-font-smoothing: antialiased;
  191. color: {color:text};
  192. background-color: {color:background};
  193. text-align: left;
  194. word-wrap: break-word;
  195. letter-spacing: 0.02em;
  196. margin: 0;
  197. padding: 0;
  198. opacity: 1;
  199. transition: 1s opacity;
  200. }
  201.  
  202. body.fade-out {
  203. opacity: 0;
  204. transition: none;
  205. }
  206.  
  207. a {
  208. color: {color:link};
  209. text-decoration: none;
  210. -webkit-transition: all 0.3s;
  211. -moz-transition: all 0.3s;
  212. -ms-transition: all 0.3s;
  213. -o-transition: all 0.3s;
  214. transition: all 0.3s;
  215. }
  216.  
  217. a:hover {
  218. color: {color:accent};
  219. -webkit-transition: all 0.3s;
  220. -moz-transition: all 0.3s;
  221. -ms-transition: all 0.3s;
  222. -o-transition: all 0.3s;
  223. transition: all 0.3s;
  224. }
  225.  
  226. p a {border-bottom: 1px solid {color:borders};}
  227.  
  228. blockquote {
  229. padding: 0 0 0 1.5em;
  230. border-left: 1px solid {color:borders};
  231. margin: 1.5em 0 1.5em 1.5em;
  232. }
  233.  
  234. h1, h2, h3, h4, h5, .title {
  235. font-family: {text:title font};
  236. color: {color:title};
  237. letter-spacing: 0.1em;
  238. line-height: 170%;
  239. font-weight: 700;
  240. text-transform: {select:title style};
  241. }
  242.  
  243. h1 a, h2 a, h3 a, h4 a, h5 a, .title a {color: {color:title};}
  244. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, .title a:hover {color: {color:accent}}
  245. h1, .title {font-size: 1.3em;}
  246. h2 {font-size: 1.25em;}
  247. h3 {font-size: 1.2em;}
  248. h4 {font-size: 1.1em;}
  249. h5 {font-size: 1em;}
  250.  
  251. small {font-size: 1em;}
  252. big {font-size: 1em;}
  253. b, bold, strong {color: {color:accent};}
  254. b a:hover, bold a:hover, strong a:hover {color: {color:accent};}
  255.  
  256. pre {
  257. line-height: inherit;
  258. font-size: inherit;
  259. white-space: pre-wrap;
  260. white-space: -moz-pre-wrap;
  261. white-space: -pre-wrap;
  262. white-space: -o-pre-wrap;
  263. word-wrap: break-word;
  264. }
  265.  
  266. li {max-width: 100%; list-style-type: none;}
  267.  
  268. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  269.  
  270. /*----- PUSH BUTTON EFFECT -----*/
  271.  
  272. @-webkit-keyframes hvr-push {
  273. 50% {
  274. -webkit-transform: scale(0.8);
  275. transform: scale(0.8);
  276. }
  277. 100% {
  278. -webkit-transform: scale(1);
  279. transform: scale(1);
  280. }
  281. }
  282. @keyframes hvr-push {
  283. 50% {
  284. -webkit-transform: scale(0.8);
  285. transform: scale(0.8);
  286. }
  287. 100% {
  288. -webkit-transform: scale(1);
  289. transform: scale(1);
  290. }
  291. }
  292. .hvr-push {
  293. display: inline-block;
  294. vertical-align: middle;
  295. -webkit-transform: perspective(1px) translateZ(0);
  296. transform: perspective(1px) translateZ(0);
  297. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  298. }
  299. .hvr-push:hover, .hvr-push:focus, .hvr-push:active {
  300. -webkit-animation-name: hvr-push;
  301. animation-name: hvr-push;
  302. -webkit-animation-duration: 0.3s;
  303. animation-duration: 0.3s;
  304. -webkit-animation-timing-function: linear;
  305. animation-timing-function: linear;
  306. -webkit-animation-iteration-count: 1;
  307. animation-iteration-count: 1;
  308. }
  309.  
  310. /*----- SIDEBAR -----*/
  311.  
  312. sidebar {
  313. width: 250px;
  314. height: auto;
  315. position: fixed;
  316. top: 100px;
  317. text-align: center;
  318. }
  319. .right sidebar {margin-left: calc({select:post width} + 150px);}
  320.  
  321. {block:ifSidebarImage}
  322. #side-img {max-width: 100%; margin-bottom: 1em; {block:ifroundedcorners}border-radius: 10px;{/block:ifroundedcorners}}
  323. {/block:ifSidebarImage}
  324. {block:ifSidebarIconImage}
  325. #side-icon {
  326. border-radius: 100%;
  327. width: 64px;
  328. height: 64px;
  329. {block:ifSidebarImage}
  330. position: relative;
  331. margin: -4em auto 1em auto;
  332. border: 7px solid {color:background};
  333. {/block:ifSidebarImage}
  334. {block:ifNotSidebarImage}
  335. margin: 0 auto 1em auto;
  336. {/block:ifNotSidebarImage}
  337. }
  338. {/block:ifSidebarIconImage}
  339.  
  340. #description {margin-top: 1em;}
  341.  
  342. #nav {display: flex; justify-content: space-between; margin: 1.5em 0;}
  343. #nav i {
  344. font-size: 1.2em;
  345. vertical-align: middle;
  346. background-color: {color:button background};
  347. padding: 0.3em;
  348. border-radius: 100%;
  349. border: 1px solid {color:borders};
  350. box-shadow: 2px 0 {color:button shadow};
  351. }
  352.  
  353. /*----- POSTS -----*/
  354.  
  355. main {
  356. position: relative;
  357. width: calc(250px + {select:post width} + 150px);
  358. margin: auto;
  359. }
  360.  
  361. .left section {
  362. position: relative;
  363. width: {select:post width};
  364. margin:100px 0 100px 400px;
  365. }
  366. .right section {
  367. position: relative;
  368. width: {select:post width};
  369. margin:100px 400px 100px 0;
  370. }
  371.  
  372. article {
  373. width: 100%;
  374. position: relative;
  375. margin-bottom: {text:post margin}px;
  376. }
  377.  
  378. .tumblr_video_container {max-height: {select:post width} !important; overflow: hidden !important;}
  379. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe {max-width: 100%;}
  380.  
  381. /*----- CAPTIONS -----*/
  382.  
  383. .caption {
  384. margin-top: 2em;
  385. list-style-type: none;
  386. padding: 2em;
  387. background: {color:caption background};
  388. border: 1px solid {color:borders};
  389. {block:ifroundedcorners}border-radius: 10px;{/block:ifroundedcorners}
  390. }
  391. .caption p {margin: 1em 0;}
  392. .caption p:last-of-type {margin-bottom: 0;}
  393.  
  394. .original-caption p:first-of-type {margin-top: 0;}
  395. .text-caption:first-of-type {margin-top: 0;}
  396. .caption iframe, .caption img {max-width: 100%;}
  397.  
  398. .user-icon {
  399. display: inline-block;
  400. vertical-align: middle;
  401. border-radius: 50%;
  402. width: 1.5em;
  403. height: 1.5em;
  404. margin-right: 1em;
  405. }
  406.  
  407. .username {
  408. display: inline-block;
  409. vertical-align: middle;
  410. font-weight: 700;
  411. }
  412.  
  413. .username a {color: {color:text};}
  414. .username a:hover {color: {color:accent};}
  415.  
  416. .deactive::after {
  417. content: '(deactivated)';
  418. margin-left: 1em;
  419. opacity: 0.75;
  420. color: {color:text};
  421. }
  422.  
  423. p.tmblr-attribution {margin-top: 1em !important;}
  424.  
  425. /*----- TEXT -----*/
  426.  
  427. h1.post-title {margin-top: 0;}
  428.  
  429. a.read_more {font-weight: 700;}
  430.  
  431. /*----- LINK -----*/
  432.  
  433. a.link-wrap {
  434. display: block;
  435. color: {color:text};
  436. padding: 2em;
  437. background: {color:caption background};
  438. border: 1px solid {color:borders};
  439. {block:ifroundedcorners}border-radius: 10px;{/block:ifroundedcorners}
  440. }
  441.  
  442. a.link-wrap img {max-width: 100%;}
  443. .link-host, .link-txt {color: {color:text}; margin-top: 1.5em;}
  444.  
  445. .npf-link-block {
  446. margin-top: 1.5em;
  447. border-radius: 0;
  448. background-color: initial;
  449. }
  450.  
  451. .npf-link-block .poster .title {padding: 1.5em;}
  452. .npf-link-block.no-poster .title {padding: 1.5em 1.5em 0 1.5em;}
  453. .npf-link-block .title {font-size: 1.25em; border-bottom: none;}
  454. .npf-link-block .bottom {padding: 1.5em !important; color: {color:text};}
  455.  
  456. .npf-link-block .bottom .site-name {color: {color:text};}
  457.  
  458. /*----- PHOTO -----*/
  459.  
  460. img {
  461. margin: 0;
  462. display: block;
  463. height: auto;
  464. max-width: 100%;
  465. }
  466.  
  467. .photo img {width: 100%;}
  468. .vignette, #vignette {opacity: 0;}
  469. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  470.  
  471. .lightbox-image, #tumblr_lightbox img {
  472. box-shadow: none !important;
  473. border-radius: 0 !important;
  474. max-width: none;
  475. }
  476.  
  477. #tumblr_lightbox_caption, .lightbox-caption {
  478. color: #fff !important;
  479. font-family: inherit;
  480. margin-top: 1em !important;
  481. }
  482.  
  483. /*----- PHOTOSET -----*/
  484.  
  485. [photoset-layout] {grid-gap: 4px;}
  486.  
  487. [photoset-layout] div {cursor: pointer;}
  488.  
  489. /*----- QUOTE -----*/
  490.  
  491. .quote, p.npf_quote {
  492. padding: 2em;
  493. background: {color:caption background};
  494. border: 1px solid {color:borders};
  495. {block:ifroundedcorners}border-radius: 10px;{/block:ifroundedcorners}
  496. }
  497. .quote-words {
  498. font-family: {text:title font};
  499. font-size: 1.25em;
  500. line-height: 160%;
  501. font-weight: 700;
  502. color: {color:title};
  503. text-transform: {select:title style};
  504. letter-spacing: 0.1em;
  505. }
  506.  
  507. .quote p:first-of-type {margin-top: 0;}
  508. .quote p:last-of-type {margin-bottom: 0;}
  509. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  510.  
  511. .source {margin-top: 1.5em;}
  512.  
  513. /*----- CHAT -----*/
  514.  
  515. .chat {padding: 0; margin: 0;}
  516. .chat li {list-style-type: none; margin-top: 1em;}
  517. .chat li:first-of-type {margin-top: 0;}
  518. .chatter {font-weight: 700; color: {color:accent};}
  519.  
  520. p.npf_chat {font-family: inherit; margin-top: 1em;}
  521. p.npf_chat b {color: {color:accent}; font-family: inherit;}
  522.  
  523. /*----- ANSWER -----*/
  524.  
  525. .ask-wrap {
  526. padding: 2em;
  527. background: {color:caption background};
  528. border: 1px solid {color:borders};
  529. {block:ifroundedcorners}border-radius: 10px;{/block:ifroundedcorners} }
  530.  
  531. .ask-wrap .askicon {
  532. width: 2em;
  533. height: 2em;
  534. display: inline-block;
  535. vertical-align: middle;
  536. border-radius: 50%;
  537. }
  538.  
  539. .ask-wrap .asking {
  540. display: inline-block;
  541. margin-left: 1em;
  542. font-weight: 700;
  543. color: {color:text};
  544. }
  545.  
  546. .ask-wrap .asking a {color: {color:text};}
  547. .ask-wrap .asking a:hover {color: {color:accent};}
  548.  
  549. .question {margin-top: 1em;}
  550. .question p:first-of-type {margin-top: 0;}
  551. .question p:last-of-type {margin-bottom: 0;}
  552.  
  553. /*----- AUDIO -----*/
  554.  
  555. .audiopost {
  556. padding: 2em;
  557. background: {color:caption background};
  558. border: 1px solid {color:borders};
  559. {block:ifroundedcorners}border-radius: 10px;{/block:ifroundedcorners} }
  560.  
  561. .album-art {
  562. z-index: 1;
  563. display: inline-block;
  564. vertical-align: middle;
  565. float: left;
  566. width: 100px;
  567. height: 100px;
  568. }
  569.  
  570. .button {
  571. width: 30px;
  572. height: 30px;
  573. overflow: hidden;
  574. position: relative;
  575. z-index: 2;
  576. margin: 7px;
  577. }
  578.  
  579. .audiobox {
  580. background-color: #f2f2f2;
  581. z-index: 3;
  582. position: absolute;
  583. margin: 28px 0 0 28px;
  584. border-radius: 50%;
  585. }
  586.  
  587. .audioinfo {
  588. display: inline-block;
  589. height: 100px;
  590. display: flex;
  591. justify-content: center;
  592. flex-direction: column;
  593. box-sizing: border-box;
  594. margin-left: 8em;
  595. }
  596.  
  597. .audioinfo li {list-style-type: none;}
  598. .track {font-weight: 700; color: {color:title};}
  599.  
  600. /*----- INFO -----*/
  601.  
  602. .tags {margin-top: 1.5em;}
  603.  
  604. .info {
  605. margin-top: 1.5em;
  606. display: flex;
  607. flex-direction: row;
  608. align-items: center;
  609. justify-content: space-between;
  610. }
  611. .info a {display: inline-block;}
  612. .info i {
  613. display: inline-block;
  614. font-size: 1.2em;
  615. vertical-align: middle;
  616. background-color: {color:button background};
  617. padding: 0.3em;
  618. border-radius: 100%;
  619. border: 1px solid {color:borders};
  620. box-shadow: 2px 0 {color:button shadow};
  621. }
  622. .info-left {font-family: {text:title font}; font-weight: 700; text-transform: {select: title style}; letter-spacing: 0.1em;}
  623. .info-left a, .tags a {margin-right: 1em;}
  624.  
  625. .post-controls a {margin-left: 1em;}
  626.  
  627. .like {position:relative;}
  628.  
  629. .like_button {
  630. position:absolute;
  631. top:0;
  632. left:0;
  633. right:0;
  634. bottom:0;
  635. width:100%;
  636. height:100%;
  637. opacity:0;
  638. }
  639.  
  640. .like_button iframe {width: 100%!important; height: 100%!important;}
  641.  
  642. .like_button.liked + .lar {color: #dc143c!important;}
  643.  
  644. .source-info {margin-top: 2em; line-height:180%;}
  645. .source-info li {font-size: 1em; list-style-type: none; font-weight: 700 ; color: {color:link};}
  646. .source-info i {vertical-align: middle; color: {color:accent}; margin-right: 5px; margin-bottom: 2px;}
  647.  
  648. .tag-day {font-family: {text:title font}; font-weight: 700; text-transform: {select: title style}; letter-spacing: 0.1em; color: {color:accent}; margin-bottom: 50px;}
  649.  
  650. /*---- POST NOTES -----*/
  651.  
  652. .notes {margin: 0;}
  653.  
  654. ol.notes {
  655. max-width: 100%;
  656. padding: 0;
  657. margin: 2em 0 0 0;
  658. }
  659.  
  660. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  661.  
  662. ol.notes li.note img.avatar {
  663. border-radius: 50%;
  664. margin-right: 1em;
  665. vertical-align: middle;
  666. display: inline-block;
  667. width: 1.25em;
  668. height: 1.25em;
  669. }
  670.  
  671. a.more_notes_link {font-weight: 700;}
  672.  
  673. /*---- PAGINATION -----*/
  674.  
  675. #page-navigation {
  676. width: 100%;
  677. margin-bottom: {text:post margin}px;
  678. text-align: center;
  679. }
  680. #page-navigation a {margin:0 2em;}
  681. #page-navigation i {
  682. display: inline-block;
  683. font-size: 1.2em;
  684. vertical-align: middle;
  685. background-color: {color:button background};
  686. padding: 0.3em;
  687. border-radius: 100%;
  688. border: 1px solid {color:borders};
  689. box-shadow: 2px 0 {color:button shadow};
  690. }
  691.  
  692. /*---- CREDIT -----*/
  693.  
  694. #credit {
  695. position: fixed;
  696. right: 20px;
  697. bottom: 20px;
  698. font-size: 1.3em;
  699. }
  700.  
  701. /*---- RESPONSIVENESS:-----*/
  702.  
  703. /*--- for small desktop/tablet screens. converts sidebar to header ---*/
  704.  
  705. @media only screen and (max-width: 1040px) {
  706. main {width: {select:post width}; margin-top: 50px;}
  707.  
  708. .left sidebar, .right sidebar {
  709. margin: 100px auto {text:post margin}px auto;
  710. position: static;
  711. width: {select:post width};
  712. }
  713.  
  714. #side-img {width: {select:post width};}
  715.  
  716. #nav {padding: 0 3em;}
  717.  
  718. .left section, .right section {margin-left: 0;}
  719. }
  720.  
  721. /*--- for small devices ---*/
  722.  
  723. @media only screen and (max-width: 600px) {
  724. main, .left section, .right section, .left sidebar, .right sidebar, #side-img {width: 80vw;}
  725.  
  726. #nav {padding: 0 0.8em;}
  727.  
  728. #controls-icon i, .tmblr-iframe-compact .tmblr-iframe--unified-controls, #credit, .tippy-tooltip.custom-theme {display:none;}
  729.  
  730. }
  731.  
  732. {CustomCSS}
  733.  
  734. </style>
  735.  
  736. </head>
  737.  
  738. <!----- HTML ----->
  739.  
  740. <body>
  741.  
  742. <script>document.body.className += ' fade-out';</script>
  743.  
  744. <!----- TUMBLR CONTROLS ----->
  745.  
  746. <div id="controls-icon">
  747. <i class="la la-cog"></i>
  748. </div>
  749.  
  750. <!-- main = main container -->
  751.  
  752. <main class="{select:sidebar position}">
  753.  
  754. <!----- SIDEBAR ----->
  755.  
  756. <sidebar>
  757. {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img">{/block:ifSidebarImage}
  758. {block:ifSidebarIconImage}<img src="{image:Sidebar Icon}" id="side-icon">{/block:ifSidebarIconImage}
  759. <div class="title"><a href="/">{Title}</a></div>
  760. <div id="nav">
  761. {block:ifHomeLink}<a href="/" title="{text:home link}" class="hvr-push"><i class="la la-home"></i></a>{/block:ifHomeLink}
  762. {block:ifAskLink}<a href="/ask" title="{text:ask link}" class="hvr-push"><i class="la la-envelope"></i></a>{/block:ifAskLink}
  763. {block:ifArchiveLink}<a href="/archive" title="{text:archive link}" class="hvr-push"><i class="la la-history"></i></a>{/block:ifArchiveLink}
  764. {block:ifLink1}<a href="{text:Link 1 URL}" title="{text:link 1}" class="hvr-push"><i class="la la-{text:link 1 icon}"></i></a>{/block:ifLink1}
  765. {block:ifLink2}<a href="{text:Link 2 URL}" title="{text:link 2}" class="hvr-push"><i class="la la-{text:link 2 icon}"></i></a>{/block:ifLink2}
  766. {block:ifLink3}<a href="{text:Link 3 URL}" title="{text:link 3}" class="hvr-push"><i class="la la-{text:link 3 icon}"></i></a>{/block:ifLink3}
  767. </div>
  768. {block:Description}<div id="description">{Description}</div>{/block:Description}
  769. </sidebar>
  770.  
  771. <!-- section = your post container -->
  772.  
  773. <section>
  774.  
  775. <!----- TAG AND DAY PAGES ----->
  776.  
  777. {block:TagPage}
  778. <article class="tagday-page">
  779. <span class="tag-day">Viewing posts filed under #{Tag}</span>
  780. </article>
  781. {/block:TagPage}
  782.  
  783. {block:DayPage}
  784. <article class="tagday-page">
  785. <span class="tag-day">Viewing posts made on {Month} {DayOfMonth}, {Year}</span>
  786. </article>
  787. {/block:DayPage}
  788.  
  789. <!----- POSTS ----->
  790.  
  791. {block:Posts}
  792. <article class="posts" id="{PostID}" post-type="{PostType}" {block:ifanimatedscrolling}data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="10" data-aos-offset="0"{/block:ifanimatedscrolling}>
  793.  
  794. {block:Text}
  795. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  796. {block:NotReblog}
  797. <li class="caption original-caption text-caption">
  798. <div class="caption-text">{Body}</div>
  799. </li>
  800. {/block:NotReblog}
  801. {block:RebloggedFrom}
  802. <div class="reblog-wrap">
  803. {block:Reblogs}
  804. <li class="caption text-caption">
  805. <img src="{PortraitURL-64}" class="user-icon">
  806. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  807. <div class="caption-text">{Body}</div>
  808. </li>
  809. {/block:Reblogs}
  810. </div>
  811. {/block:RebloggedFrom}
  812. {/block:Text}
  813.  
  814. {block:Link}
  815. <a href="{URL}" class="link-wrap">
  816. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  817. <div class="link">
  818. <div class="title">{Name}</div>
  819. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  820. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  821. </div>
  822. </a>
  823. {block:Description}
  824. {block:NotReblog}
  825. <li class="caption original-caption">
  826. <div class="caption-text">{Description}</div>
  827. </li>
  828. {/block:NotReblog}
  829. {/block:Description}
  830. {block:RebloggedFrom}
  831. <div class="reblog-wrap">
  832. {block:Reblogs}
  833. <li class="caption">
  834. <img src="{PortraitURL-64}" class="user-icon">
  835. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  836. <div class="caption-text">{Body}</div>
  837. </li>
  838. {/block:Reblogs}
  839. </div>
  840. {/block:RebloggedFrom}
  841. {/block:Link}
  842.  
  843. {block:Photo}
  844. <div class="photo">
  845. {LinkOpenTag}<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"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  846. </div>
  847. {block:Caption}
  848. {block:NotReblog}
  849. <li class="caption original-caption">
  850. <div class="caption-text">{Caption}</div>
  851. </li>
  852. {/block:NotReblog}
  853. {block:RebloggedFrom}
  854. <div class="reblog-wrap">
  855. {block:Reblogs}
  856. <li class="caption">
  857. <img src="{PortraitURL-64}" class="user-icon">
  858. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  859. <div class="caption-text">{Body}</div>
  860. </li>
  861. {/block:Reblogs}
  862. </div>
  863. {/block:RebloggedFrom}
  864. {/block:Caption}
  865. {/block:Photo}
  866.  
  867. {block:Photoset}
  868. <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>
  869. {block:Caption}
  870. {block:NotReblog}
  871. <li class="caption original-caption">
  872. <div class="caption-text">{Caption}</div>
  873. </li>
  874. {/block:NotReblog}
  875. {block:RebloggedFrom}
  876. <div class="reblog-wrap">
  877. {block:Reblogs}
  878. <li class="caption">
  879. <img src="{PortraitURL-64}" class="user-icon">
  880. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  881. <div class="caption-text">{Body}</div>
  882. </li>
  883. {/block:Reblogs}
  884. </div>
  885. {/block:RebloggedFrom}
  886. {/block:Caption}
  887. {/block:Photoset}
  888.  
  889. {block:Video}
  890. <div class="video">{Video-500}</div>
  891. {block:Caption}
  892. {block:NotReblog}
  893. <li class="caption original-caption">
  894. <div class="caption-text">{Caption}</div>
  895. </li>
  896. {/block:NotReblog}
  897. {block:RebloggedFrom}
  898. <div class="reblog-wrap">
  899. {block:Reblogs}
  900. <li class="caption">
  901. <img src="{PortraitURL-64}" class="user-icon">
  902. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  903. <div class="caption-text">{Body}</div>
  904. </li>
  905. {/block:Reblogs}
  906. </div>
  907. {/block:RebloggedFrom}
  908. {/block:Caption}
  909. {/block:Video}
  910.  
  911. {block:Quote}
  912. <div class="quote">
  913. <div class="quote-words">{Quote}</div>
  914. {block:Source}<div class="source">{Source}</div>{/block:Source}
  915. </div>
  916. {/block:Quote}
  917.  
  918. {block:Chat}
  919. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  920. <ul class="chat">{block:Lines}
  921. <li>
  922. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  923. <div class="chattxt">{Line}</div>
  924. </li>
  925. {/block:Lines}</ul>
  926. {/block:Chat}
  927.  
  928. {block:Answer}
  929. <div class="ask-wrap">
  930. <img src="{AskerPortraitURL-64}" class="askicon">
  931. <div class="asking">{Asker} asked</div>
  932. <div class="question">{Question}</div>
  933. </div>
  934. {block:Answerer}
  935. <li class="caption">
  936. <img src="{AnswererPortraitURL-64}" class="user-icon">
  937. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  938. <div class="caption-text">{Answer}</div>
  939. </li>
  940. {/block:Answerer}
  941. {block:NotReblog}
  942. <li class="caption original-caption">
  943. <div class="caption-text">{Replies}</div>
  944. </li>
  945. {/block:NotReblog}
  946. {block:RebloggedFrom}
  947. <div class="reblog-wrap">
  948. {block:Reblogs}
  949. <li class="caption">
  950. <img src="{PortraitURL-64}" class="user-icon">
  951. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  952. <div class="caption-text">{Body}</div>
  953. </li>
  954. {/block:Reblogs}
  955. </div>
  956. {/block:RebloggedFrom}
  957. {/block:Answer}
  958.  
  959. {block:Audio}
  960. <div class="audiopost">
  961. <div class="audiobox"><div class="button">
  962. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  963. </div></div>
  964. {block:AlbumArt}
  965. <img src="{AlbumArtURL}" class="album-art">
  966. {/block:AlbumArt}
  967. <div class="audioinfo">
  968. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  969. {block:Artist}<li>{Artist}</li>{/block:Artist}
  970. {block:Album}<li>{Album}</li>{/block:Album}
  971. </div>
  972. </div>
  973. {block:Caption}
  974. {block:NotReblog}
  975. <li class="caption original-caption">
  976. <div class="caption-text">{Caption}</div>
  977. </li>
  978. {/block:NotReblog}
  979. {block:RebloggedFrom}
  980. <div class="reblog-wrap">
  981. {block:Reblogs}
  982. <li class="caption">
  983. <img src="{PortraitURL-64}" class="user-icon">
  984. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  985. <div class="caption-text">{Body}</div>
  986. </li>
  987. {/block:Reblogs}
  988. </div>
  989. {/block:RebloggedFrom}
  990. {/block:Caption}
  991. {/block:Audio}
  992.  
  993. <!----- TAGS ----->
  994.  
  995. {block:HasTags}
  996. <div class="tags">
  997. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  998. </div>
  999. {/block:HasTags}
  1000.  
  1001. <!----- INFO ----->
  1002.  
  1003. {block:Date}
  1004. <div class="info">
  1005. <div class="info-left">
  1006. <a href="{Permalink}">{MonthNumberWithZero}.{DayOfMonthWithZero}.{Year}</a>
  1007. </div>
  1008.  
  1009. <!-- like and reblog buttons -->
  1010.  
  1011. <div class="post-controls">
  1012. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post hvr-push" title="pinned post"><i class="las la-thumbtack"></i></a>{/block:PinnedPostLabel}
  1013. <a href="{permalink}" title="go to post" class="hvr-push"><i class="la la-telegram"></i></a>
  1014. <a href="{ReblogURL}" title="reblog" class="hvr-push"><i class="la la-sync"></i></a>
  1015. <a class="like hvr-push" title="like">{LikeButton}<i class="lar la-heart"></i></a>
  1016. </div>
  1017.  
  1018. </div>
  1019. {/block:Date}
  1020.  
  1021. <!-- reblog info and content source on permalink pages -->
  1022.  
  1023. {block:PermalinkPage}
  1024. <div class="source-info">
  1025. {block:NoteCount}<li><i class="las la-chart-line"></i> {NoteCountWithLabel}{/block:NoteCount}
  1026. {block:RebloggedFrom}
  1027. <li><i class="las la-sync"></i> Reblogged via: <a href="{ReblogParentURL}">{ReblogParentName}</a></li>
  1028. <li><i class="las la-user-circle"></i> Originally from: <a href="{ReblogRootURL}">{ReblogRootName}</a></li>
  1029. {/block:RebloggedFrom}
  1030. {block:ContentSource}<li><i class="las la-star"></i> {lang:Source}: <a href="{SourceURL}">{SourceTitle}</a></li>{/block:ContentSource}
  1031. </div>
  1032. {/block:PermalinkPage}
  1033.  
  1034. <!----- POST NOTES ----->
  1035.  
  1036. {block:PermalinkPage}{block:Date}
  1037. {block:NoteCount}{block:PostNotes}
  1038. <div class="notes">
  1039. {PostNotes-64}
  1040. </div>
  1041. {/block:PostNotes}{/block:NoteCount}
  1042. {/block:Date}{/block:PermalinkPage}
  1043.  
  1044. </article>
  1045. {/block:Posts}
  1046.  
  1047. <!----- PAGINATION ----->
  1048.  
  1049. {block:Pagination}
  1050. <div id="page-navigation">
  1051. <a href="#" class="scrollup hvr-push" title="top"><i class="las la-angle-up"></i></a>
  1052. {block:PreviousPage}<a href="{PreviousPage}" class="hvr-push" title="previous"><i class="las la-angle-left"></i></a>{/block:PreviousPage}
  1053. {block:NextPage}<a href="{NextPage}" class="hvr-push" title="next"><i class="las la-angle-right"></i></a>{block:NextPage}
  1054. </div>
  1055. {/block:Pagination}
  1056.  
  1057. <!-- end of posts container -->
  1058.  
  1059. </section>
  1060.  
  1061. <!-- end of main container -->
  1062.  
  1063. </main>
  1064.  
  1065. <a href="https://mercurythms.tumblr.com" title="mercurythms" id="credit">m.</a>
  1066.  
  1067. <script>
  1068.  
  1069. //photosets
  1070. initPhotosets();
  1071.  
  1072. //animated scrolling
  1073. {block:ifanimatedscrolling}AOS.init({offset: 100,duration: 800});{/block:ifanimatedscrolling}
  1074.  
  1075. //responsive video
  1076. $(document).ready(function() {
  1077. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  1078. });
  1079.  
  1080. //tooltips
  1081. tippy('[title]', {
  1082. theme: 'custom',
  1083. arrow: false,
  1084. followCursor: true,
  1085. delay: 100,
  1086. placement: 'top',
  1087. zIndex: 9999999999,
  1088. maxWidth: 400,
  1089.  
  1090. content(reference) {
  1091. const title = reference.getAttribute('title');
  1092. reference.removeAttribute('title');
  1093. return title;
  1094. },
  1095. });
  1096.  
  1097. // remove redirects
  1098. function noHrefLi(){
  1099. var linkSet = document.querySelectorAll('a[href*="href.li/?"]');
  1100. Array.prototype.forEach.call(linkSet,function(el,i){
  1101. var theLink = linkSet[i].getAttribute('href').split("href.li/?")[1];
  1102. linkSet[i].setAttribute("href",theLink);
  1103. });
  1104. }
  1105. noHrefLi();
  1106.  
  1107. // fade effect
  1108. $(function() {
  1109. $('body').removeClass('fade-out');
  1110. });
  1111.  
  1112. </script>
  1113.  
  1114.  
  1115. </body>
  1116. </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!