nicolas-sage

theme three: constellation

Feb 7th, 2022 (edited)
4,753
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.34 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  9. <meta charset="utf-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.  
  12. <!---
  13.  
  14. constellation theme by SAGE / https://demontimes.tumblr.com
  15.  
  16. credits:
  17. - base code by seyche / https://seyche.tumblr.com
  18. - phosphor icons / phosphoricons.com
  19. - pxu photosets by pixel union with modifications by bychloethemes / https://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
  20. - npf images fix by glenthemes / https://glenthemes.tumblr.com/post/659034084446748672/npf-images-v3
  21. - time ago plugin by chloethemes / https://bychloethemes.tumblr.com/plugins/timeago
  22. - notes shortener by shythemes / https://shythemes.tumblr.com/post/156021137818/hello-i-was-wondering-if-you-knew-how-to-shorten
  23. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  24. - google fonts / https://fonts.google.com/
  25.  
  26. --->
  27.  
  28. <!----- VARIABLES AND OPTIONS ----->
  29.  
  30. <meta name="image:Sidebar" content=""/>
  31.  
  32. <meta name="color:Background" content="#001328"/>
  33. <meta name="color:Posts" content="#112039"/>
  34. <meta name="color:Text Shadow" content="#0038b0"/>
  35. <meta name="color:Box Shadow" content="#001623"/>
  36. <meta name="color:Title" content="#cedeff"/>
  37. <meta name="color:Text" content="#9aabc6"/>
  38. <meta name="color:Link" content="#94bfff"/>
  39. <meta name="color:Accent" content="#5aa2ff"/>
  40. <meta name="color:Borders" content="#283f5d"/>
  41.  
  42. <meta name="select:Border Radius" content="0px" title="0px"/>
  43. <meta name="select:Border Radius" content="5px" title="5px"/>
  44. <meta name="select:Border Radius" content="10px" title="10px"/>
  45.  
  46. <meta name="text:Title Font Size" content="18"/>
  47. <meta name="text:Post Margin" content="100"/>
  48. <meta name="text:Google Font" content="Karla"/>
  49. <meta name="text:Font Size" content="15"/>
  50. <meta name="text:Custom Description" content="custom description"/>
  51. <meta name="text:Like Color Code" content="004fb6"/>
  52.  
  53. <meta name="if:side image circle" content="1"/>
  54. <meta name="if:hover tags" content="1"/>
  55. <meta name="if:top info" content="1"/>
  56. <meta name="if:glow" content="1"/>
  57.  
  58. <meta name="text:Home Link" content="home"/>
  59. <meta name="text:Ask Link" content="ask"/>
  60. <meta name="text:Archive Link" content="archive"/>
  61. <meta name="text:Link 1 URL" content="/"/>
  62. <meta name="text:Link 1" content="link 1 name"/>
  63. <meta name="text:Link 1 icon" content="moon"/>
  64. <meta name="text:Link 2 URL" content="/"/>
  65. <meta name="text:Link 2" content="link 2 name"/>
  66. <meta name="text:Link 2 icon" content="sparkle"/>
  67. <meta name="text:Link 3 URL" content="/"/>
  68. <meta name="text:Link 3" content="link 3 name"/>
  69. <meta name="text:Link 3 icon" content="planet"/>
  70. <meta name="text:Link 4 URL" content="/"/>
  71. <meta name="text:Link 4" content="link 4 name"/>
  72. <meta name="text:Link 4 icon" content="star"/>
  73.  
  74. <!---- PHOTOSET ---->
  75. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  76. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  77. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  78.  
  79. <!--
  80. NPF images fix v3.0 by @glenthemes [2021]
  81. 💌 git.io/JRBt7
  82. --->
  83. <script src="//npf-images-v3.github.io/script.js"></script>
  84. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  85. <style tmblr-npf>
  86. :root {
  87. --NPF-Caption-Spacing:1em;
  88. --NPF-Image-Spacing:4px;
  89. }
  90. </style>
  91.  
  92. <!----- GOOGLE FONTS ---->
  93. <link rel="preconnect" href="https://fonts.googleapis.com">
  94. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  95. <link href="https://fonts.googleapis.com/css2?family={text:google font}:wght@400;700&display=swap" rel="stylesheet">
  96.  
  97. <!---- ICONS ---->
  98. <script src="https://unpkg.com/phosphor-icons"></script>
  99. <script src="https://unpkg.com/[email protected]"></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. <!---- TIME AGO ----->
  106. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  107. <script type="text/javascript">
  108. $(document).ready(function() {
  109. $(".time-ago").timeAgo({
  110. time: "short",
  111. spaces: true,
  112. words: false,
  113. prefix: "",
  114. suffix: "ago",
  115. });
  116. });
  117. </script>
  118.  
  119. <!----- CSS ----->
  120.  
  121. <style type="text/css">
  122.  
  123. /*----- TOOLTIPS -----*/
  124.  
  125. .tippy-tooltip.custom-theme {
  126. background-color: {color:posts};
  127. color: {color:title};
  128. {block:ifglow}
  129. text-shadow:0 0 10px;
  130. {/block:ifglow}
  131. text-align: center;
  132. text-transform: uppercase;
  133. letter-spacing: 0.2em;
  134. font-size: 0.8em;
  135. border-radius:10px;
  136. box-shadow:1px 1px 5px 1px {color:box shadow};
  137. margin: 5px 0;
  138. }
  139.  
  140. /*---- SCROLLBAR ----- */
  141. ::-webkit-scrollbar {
  142. width: 8px;
  143. height: 8px;
  144. background-color: {color:background};
  145. }
  146.  
  147. ::-webkit-scrollbar-track {
  148. background-color: {color:background};
  149. border-radius: 5px;}
  150.  
  151. ::-webkit-scrollbar-thumb {
  152. background:{color:accent};
  153. min-height: 35px;
  154. min-width: 35px;
  155. border-radius: 5px;
  156. }
  157.  
  158. /*----- BASIC STYLING -----*/
  159.  
  160. body {
  161. font-family: '{text:google font}', sans-serif;
  162. font-size: {text:font size}px;
  163. color: {color:text};
  164. background-color: {color:background};
  165. line-height: 160%;
  166. word-wrap: break-word;
  167. letter-spacing: 0.04em;
  168. margin: 0;
  169. padding: 0;
  170. }
  171.  
  172. a {
  173. color: {color:link};
  174. text-decoration: none;
  175. -webkit-transition: all 0.3s;
  176. -moz-transition: all 0.3s;
  177. -ms-transition: all 0.3s;
  178. -o-transition: all 0.3s;
  179. transition: all 0.3s;
  180. }
  181.  
  182. a:hover {
  183. color: {color:accent};
  184. -webkit-transition: all 0.3s;
  185. -moz-transition: all 0.3s;
  186. -ms-transition: all 0.3s;
  187. -o-transition: all 0.3s;
  188. transition: all 0.3s;
  189. }
  190.  
  191. #hua {
  192. display: inline-block;
  193. position: relative;
  194. }
  195.  
  196. #hua:after {
  197. content: '';
  198. position: absolute;
  199. width: 100%;
  200. transform: scaleX(0);
  201. height: 2px;
  202. bottom: 0;
  203. left: 0;
  204. background-color: {color:link};
  205. transform-origin: bottom right;
  206. transition: transform 0.25s ease-out;
  207. }
  208.  
  209. #hua:hover:after {
  210. transform: scaleX(1);
  211. transform-origin: bottom left;
  212. }
  213.  
  214. blockquote {
  215. padding: 0 0 0 1.5em;
  216. border-left: 1px solid {color:borders};
  217. margin: 1.5em 0 1.5em 1.5em;
  218. }
  219.  
  220. ul {list-style-type:circle;}
  221. ol {list-style-type: decimal-leading-zero;}
  222. li::marker {color:{color:accent}}
  223.  
  224. h1, h2, h3, h4, h5 {
  225. letter-spacing: 0.06em;
  226. line-height: 145%;
  227. font-weight: bold;
  228. text-shadow:1px 1px 2px {color:text shadow};
  229. }
  230.  
  231. h1 {font-size: 1.45em;}
  232. h2 {font-size: 1.3em;}
  233. h3 {font-size: 1.25em;}
  234. h4 {font-size: 1.1em;}
  235. h5 {font-size: 1em;}
  236.  
  237. small {font-size: 0.9em;}
  238. big {font-size: 1.1em;}
  239.  
  240. hr {
  241. height: 1px;
  242. border: none;
  243. box-shadow: none;
  244. background-color: {color:borders};
  245. }
  246.  
  247. pre {
  248. line-height: inherit;
  249. font-size: inherit;
  250. white-space: pre-wrap;
  251. white-space: -moz-pre-wrap;
  252. white-space: -pre-wrap;
  253. white-space: -o-pre-wrap;
  254. word-wrap: break-word;
  255. }
  256.  
  257. b, strong {
  258. color:{color:title};
  259. font-weight:800;
  260. }
  261.  
  262. b a:hover {
  263. color:{color:accent};
  264. -webkit-transition: all 0.3s;
  265. -moz-transition: all 0.3s;
  266. -ms-transition: all 0.3s;
  267. -o-transition: all 0.3s;
  268. transition: all 0.3s;
  269. }
  270.  
  271. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  272. z-index: 999999999!important;
  273. opacity:0;
  274. -webkit-transition: all 0.4s;
  275. -moz-transition: all 0.4s;
  276. -ms-transition: all 0.4s;
  277. -o-transition: all 0.4s;
  278. transition: all 0.4s;
  279. }
  280.  
  281. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  282. opacity:1;
  283. -webkit-transition: all 0.4s;
  284. -moz-transition: all 0.4s;
  285. -ms-transition: all 0.4s;
  286. -o-transition: all 0.4s;
  287. transition: all 0.4s;
  288. }
  289.  
  290. /*----- SIDEBAR -----*/
  291.  
  292. #sidebar {
  293. width: 350px;
  294. position: fixed;
  295. top: {text:post margin}px;
  296. text-align: center;
  297. }
  298.  
  299. #side-wrap {
  300. width: 350px;
  301. display:flex;
  302. justify-content:center;
  303. flex-wrap:wrap;
  304. }
  305.  
  306. {block:ifSidebarImage}
  307. #side-img {
  308. margin-bottom: 1em;
  309. margin-top:.5em;
  310. border-radius:{select:border radius};
  311. padding:2px;
  312. background:{color:accent};
  313. {block:ifglow}
  314. box-shadow:0 0 10px {color:accent};
  315. {/block:ifglow}
  316. width:300px;
  317. {block:ifsideimagecircle}
  318. height:300px;
  319. border-radius:100%;
  320. object-fit:cover;
  321. {/block:ifsideimagecircle}
  322. }
  323. {/block:ifSidebarImage}
  324.  
  325. #top-wrap {
  326. text-shadow:1px 1px 2px {color:text shadow};
  327. border-radius:{select:border radius};
  328. display:flex;
  329. justify-content:space-evenly;
  330. align-items:center;
  331. flex-wrap:nowrap;
  332. margin-bottom:1em;
  333. padding-left:1em;
  334. padding-right:1em;
  335. }
  336.  
  337. #top-wrap .title {
  338. width:240px;
  339. text-align:right;
  340. }
  341.  
  342. #top-wrap .title a {
  343. color:{color:title};
  344. font-size:{text:title font size}px;
  345. {block:ifglow}
  346. text-shadow:0 0 10px;
  347. {/block:ifglow}
  348. }
  349. #top-wrap .title a:hover {color:{color:accent};}
  350.  
  351. #top-wrap .title li {
  352. display:block;
  353. margin-left:.5em;
  354. font-weight:normal;
  355. font-size:.9em;
  356. }
  357.  
  358. #top-wrap .title li b {
  359. font-size:1.5em;
  360. font-weight:800;
  361. color:{color:title};
  362. -webkit-transition: all 0.3s;
  363. -moz-transition: all 0.3s;
  364. -ms-transition: all 0.3s;
  365. -o-transition: all 0.3s;
  366. transition: all 0.3s;
  367. }
  368.  
  369. #top-wrap .navicon {
  370. width:60px;
  371. }
  372.  
  373. #top-wrap .navicon img {
  374. width:55px;
  375. height:55px;
  376. border-radius:100%;
  377. padding:2px;
  378. background:{color:title};
  379. {block:ifglow}
  380. box-shadow:0 0 10px {color:title};
  381. {/block:ifglow}
  382. }
  383.  
  384. #bottom-wrap {
  385. display:flex;
  386. justify-content:space-evenly;
  387. align-items:center;
  388. margin-top:1em;
  389. padding-left:1em;
  390. padding-right:1em;
  391. }
  392.  
  393. #description {
  394. width:200px;
  395. text-align:left;
  396. text-shadow:1px 1px 2px {color:text shadow};
  397. }
  398.  
  399. #description a {
  400. display: inline-block;
  401. position: relative;
  402. border-bottom:2px solid {color:borders};
  403. }
  404.  
  405. #description a:after {
  406. content: '';
  407. position: absolute;
  408. width: 100%;
  409. transform: scaleX(0);
  410. height: 2px;
  411. bottom: -2px;
  412. left: 0;
  413. background:{color:link};
  414. transform-origin: bottom right;
  415. transition: transform 0.25s ease-out;
  416. }
  417.  
  418. #description a:hover:after {
  419. transform: scaleX(1);
  420. transform-origin: bottom left;
  421. }
  422.  
  423. nav {
  424. position: relative;
  425. width: 30px;
  426. height: 30px;
  427. padding:2em;
  428. border-radius: 50%;
  429. margin-left:.5em;
  430. }
  431.  
  432. nav a {
  433. display: block;
  434. position: absolute;
  435. top: 50%; left: 50%;
  436. width: 1em; height: 1em;
  437. margin: -2em;
  438. {block:ifglow}
  439. text-shadow:0 0 10px;
  440. {/block:ifglow}
  441. }
  442.  
  443. nav i {
  444. font-size:1.4em;
  445. color:{color:title};
  446. }
  447.  
  448. nav i:hover {color:{color:accent};}
  449.  
  450. .deg1 { transform: rotate(-10deg) translate(3.7em) rotate(10deg); }
  451. .deg2 { transform: rotate(22deg) translate(4.6em) rotate(-22deg); }
  452. .deg3 { transform: rotate(55deg) translate(4.8em) rotate(-55deg); }
  453. .deg4 { transform: rotate(93deg) translate(3.9em) rotate(-93deg); }
  454. .deg5 { transform: rotate(132deg) translate(2.6em) rotate(-132deg); }
  455. .deg6 { transform: rotate(205deg) translate(1.3em) rotate(-205deg); }
  456. .deg7 { transform: rotate(302deg) translate(2.1em) rotate(-302deg); }
  457.  
  458. /*------ TAG & DAY PAGES -----*/
  459.  
  460. .tdpage {text-shadow:1px 1px 2px {color:text shadow};}
  461.  
  462. /*----- POSTS -----*/
  463.  
  464. main {
  465. position: relative;
  466. width: calc(250px + 540px + 150px);
  467. margin: auto;
  468. }
  469.  
  470. section {
  471. position: relative;
  472. width: 540px;
  473. margin-left: 425px;
  474. }
  475.  
  476. article {
  477. width: 100%;
  478. position: relative;
  479. margin: {text:post margin}px auto;
  480. }
  481.  
  482. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
  483.  
  484. /*----- CAPTIONS -----*/
  485.  
  486. .caption {
  487. margin-top: 1em;
  488. list-style-type: none;
  489. border-radius:{select:border radius};
  490. background:{color:posts};
  491. box-shadow:1px 1px 5px 1px {color:box shadow};
  492. padding:1em;
  493. }
  494.  
  495. .caption a {
  496. display: inline-block;
  497. position: relative;
  498. border-bottom:2px solid {color:borders};
  499. }
  500.  
  501. .caption a:hover {border-bottom:2px solid {color:link};}
  502.  
  503. .text-caption:first-of-type {margin-top: 0;}
  504.  
  505. a.read_more {
  506. text-transform: uppercase;
  507. letter-spacing: 1px;
  508. font-weight: bold;
  509. color: {color:title};
  510. -webkit-transition: all 0.4s;
  511. -moz-transition: all 0.4s;
  512. -ms-transition: all 0.4s;
  513. -o-transition: all 0.4s;
  514. transition: all 0.4s;
  515. }
  516.  
  517. a.read_more:hover {
  518. color: {color:accent};
  519. -webkit-transition: all 0.4s;
  520. -moz-transition: all 0.4s;
  521. -ms-transition: all 0.4s;
  522. -o-transition: all 0.4s;
  523. transition: all 0.4s;
  524. }
  525.  
  526. .user-icon, .ask-icon {
  527. display: inline-block;
  528. vertical-align: middle;
  529. width: 2em;
  530. height: 2em;
  531. border-radius:100%;
  532. margin-right: 1em;
  533. border:2px solid {color:accent};
  534. padding:2px;
  535. }
  536.  
  537. .username {
  538. display: inline-block;
  539. vertical-align: middle;
  540. font-weight: bold;
  541. }
  542.  
  543. .username a {
  544. display: inline-block;
  545. position: relative;
  546. color:{color:title};
  547. border-bottom:2px solid transparent;
  548. }
  549.  
  550. .username a:hover {color:{color:accent};}
  551.  
  552. .username a:after {
  553. content: '';
  554. position: absolute;
  555. width: 100%;
  556. transform: scaleX(0);
  557. height: 2px;
  558. bottom: -2px;
  559. left: 0;
  560. background:{color:title};
  561. transform-origin: bottom right;
  562. transition: transform 0.25s ease-out;
  563. }
  564.  
  565. .username a:hover:after {
  566. transform: scaleX(1);
  567. transform-origin: bottom left;
  568. }
  569.  
  570. .deactive::after {
  571. content: '(deactivated)';
  572. margin-left: 1em;
  573. opacity: 0.75;
  574. color: {color:text};
  575. }
  576.  
  577. p.tmblr-attribution {margin-top: 1em !important;}
  578.  
  579. /*----- TEXT -----*/
  580.  
  581. h1.post-title {margin-top: 0;}
  582.  
  583. /*----- LINK -----*/
  584.  
  585. a.link-wrap {
  586. display: block;
  587. border-radius:{select:border radius};
  588. background:{color:posts};
  589. box-shadow:1px 1px 5px 1px {color:box shadow};
  590. }
  591.  
  592. .link {
  593. padding: 2em;
  594. }
  595.  
  596. .link .title {font-weight:bold;}
  597.  
  598. .link-host {color:{color:title};}
  599. .link-txt {color:{color:text};}
  600.  
  601. .link-host, .link-txt {margin-top: 1em;}
  602.  
  603. .npf-link-block {
  604. margin-top: 1.5em;
  605. background-color: inherit;
  606. border: 1px solid inherit;
  607. color: inherit;
  608. }
  609.  
  610. /*----- PHOTO -----*/
  611.  
  612. img {
  613. margin: 0;
  614. display: block;
  615. height: auto;
  616. max-width: 100%;
  617. }
  618.  
  619. .photo img {width: 100%;}
  620. .vignette, #vignette {opacity: 0;}
  621. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  622.  
  623. .lightbox-image, #tumblr_lightbox img {
  624. box-shadow: none !important;
  625. border-radius: 0 !important;
  626. max-width: none;
  627. }
  628.  
  629. #tumblr_lightbox_caption, .lightbox-caption {
  630. color: #fff !important;
  631. font-family: inherit;
  632. margin-top: 1em !important;
  633. }
  634.  
  635. /*----- PHOTOSET -----*/
  636.  
  637. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  638. margin-left: 0 !important;
  639. margin-right: 0 !important;
  640. }
  641.  
  642. /*----- QUOTE -----*/
  643.  
  644. .quote {
  645. line-height: 160%;
  646. font-size: 1.25em;
  647. color:{color:title};
  648. border-radius:{select:border radius};
  649. background:{color:posts};
  650. box-shadow:1px 1px 5px 1px {color:box shadow};
  651. padding:1em;
  652. }
  653.  
  654. .quote:before {content:'"'; font-size:1.3em; font-weight:bold;margin-right:.2em;}
  655. .quote:after {content:'"'; font-size:1.3em; font-weight:bold;margin-left:.2em;}
  656.  
  657. .quote p:first-of-type {margin-top: 0;}
  658. .quote p:last-of-type {margin-bottom: 0;}
  659.  
  660. .source {
  661. margin-top: 1.5em;
  662. margin-left:1.5em;
  663. text-shadow:1px 1px 2px {color:text shadow};
  664. font-weight:bold;
  665. text-align:center;
  666. }
  667.  
  668. .source:before {content:"—"; margin-right:.5em;}
  669.  
  670. /*----- CHAT -----*/
  671.  
  672. .chat {padding: 0; margin: 0;}
  673. .chat li {list-style-type: none; margin-top:.5em;}
  674. .chat li:first-of-type {margin-top: 0;}
  675. .chatter {font-weight: bold; color:{color:title};}
  676.  
  677. .chat li:nth-child(odd) {
  678. color:{color:background};
  679. background:{color:accent};
  680. padding:1em;
  681. border-radius:0 {select:border radius} {select:border radius} {select:border radius};
  682. }
  683. .chat li:nth-child(odd) .chatter {color:{color:background};}
  684.  
  685. .chat li:nth-child(even) {
  686. color:{color:text};
  687. text-align:right;
  688. background:{color:posts};
  689. padding:1em;
  690. border-radius:{select:border radius} {select:border radius} 0 {select:border radius};
  691. }
  692.  
  693. p.npf_chat, p.npf_chat b {font-family: inherit;}
  694.  
  695. /*----- ANSWER -----*/
  696.  
  697. .ask-wrap {
  698. padding: 1.5em;
  699. color:{color:background};
  700. border-radius:0 {select:border radius} {select:border radius} {select:border radius};
  701. background:{color:accent};
  702. }
  703.  
  704. .ask-icon {border:2px solid {color:title};}
  705.  
  706. .ask-wrap .asking {
  707. display: inline-block;
  708. margin-left: .5em;
  709. }
  710.  
  711. .asking b {
  712. font-weight:bold;
  713. color:{color:background};
  714. text-transform:lowercase;
  715. }
  716.  
  717. .asking a {
  718. font-weight:bold;
  719. color:{color:background};
  720. border-bottom:2px solid {color:borders};
  721. }
  722.  
  723. .asking a:hover {
  724. color:{color:borders};
  725. border-bottom:2px solid {color:background};
  726. }
  727.  
  728. .question {
  729. margin-top: 1em;
  730. }
  731. .question p:first-of-type {margin-top: 0;}
  732. .question p:last-of-type {margin-bottom: 0;}
  733.  
  734. /*----- AUDIO -----*/
  735.  
  736. .audiopost {
  737. padding: 2em;
  738. color:{color:background};
  739. background:{color:accent};
  740. box-shadow:1px 1px 5px 1px {color:box shadow};
  741. border-radius:{select:border radius};
  742. }
  743.  
  744. .album-art {
  745. z-index: 1;
  746. display: inline-block;
  747. vertical-align: middle;
  748. float: right;
  749. width: 100px;
  750. height: 100px;
  751. border-radius:{select:border radius};
  752. }
  753.  
  754. .audio-player-wrap {
  755. width: 100px;
  756. height: 100px;
  757. display: inline-block;
  758. }
  759.  
  760. .button {
  761. width: 30px;
  762. height: 30px;
  763. overflow: hidden;
  764. position: relative;
  765. z-index: 2;
  766. margin: 7px;
  767. }
  768.  
  769. .audiobox {
  770. background-color: #f2f2f2;
  771. z-index: 3;
  772. position: absolute;
  773. margin: 28px 0 0 28px;
  774. border-radius: 50%;
  775. }
  776.  
  777. .audioinfo {
  778. display: inline-block;
  779. height: 100px;
  780. max-width: calc(100% - 100px);
  781. margin-left: 100px;
  782. display: flex;
  783. justify-content: center;
  784. flex-direction: column;
  785. box-sizing: border-box;
  786. padding-left: 2em;
  787. }
  788.  
  789. .audioinfo li {
  790. list-style-type: none;
  791. }
  792.  
  793. .audioinfo li b {
  794. color:{color:background};
  795. }
  796.  
  797. .track {
  798. font-weight: bold;
  799. }
  800.  
  801. /*----- INFO -----*/
  802.  
  803. .topinfo {
  804. position:relative;
  805. margin-top:{text:post margin}px;
  806. margin-bottom:calc(-{text:post margin}px + 20px);
  807. text-shadow:1px 1px 2px {color:text shadow};
  808. text-align:center;
  809. }
  810.  
  811. .topinfo .user-icon {
  812. width: 1.5em;
  813. height: 1.5em;
  814. margin-right:.5em;
  815. padding:2px;
  816. }
  817.  
  818. .topinfo a {
  819. display:inline-block;
  820. vertical-align:middle;
  821. margin-top:.2em;
  822. font-weight:bold;
  823. font-size:.9em;
  824. }
  825.  
  826. .topinfo i {
  827. font-size:1em;
  828. display:inline-block;
  829. vertical-align:bottom;
  830. margin:0 .5em 0 .5em;
  831. color:{color:accent};
  832. {block:ifglow}
  833. text-shadow:0 0 10px;
  834. {/block:ifglow}
  835. }
  836.  
  837. .info {
  838. padding-top:1em;
  839. text-shadow:1px 1px 2px {color:text shadow};
  840. }
  841.  
  842. .info a {
  843. display: inline-block;
  844. vertical-align: top;
  845. margin-top:.2em;
  846. text-transform:lowercase;
  847. }
  848.  
  849. .info a b {
  850. -webkit-transition: all 0.4s;
  851. -moz-transition: all 0.4s;
  852. -ms-transition: all 0.4s;
  853. -o-transition: all 0.4s;
  854. transition: all 0.4s;
  855. }
  856. .info a b:hover {
  857. color:{color:accent};
  858. -webkit-transition: all 0.4s;
  859. -moz-transition: all 0.4s;
  860. -ms-transition: all 0.4s;
  861. -o-transition: all 0.4s;
  862. transition: all 0.4s;
  863. }
  864.  
  865. .info i {
  866. color:{color:title};
  867. font-size:1.3em;
  868. padding:5px;
  869. {block:ifglow}
  870. text-shadow: 0 0 10px;
  871. {/block:ifglow}
  872. -webkit-transition: all 0.4s;
  873. -moz-transition: all 0.4s;
  874. -ms-transition: all 0.4s;
  875. -o-transition: all 0.4s;
  876. transition: all 0.4s;
  877. }
  878.  
  879. .info-right {float:right;}
  880.  
  881. .likeb {
  882. position: relative;
  883. display: inline-block;
  884. }
  885.  
  886. .likeb .like_button iframe {
  887. position: absolute;
  888. top: 0;
  889. left: 0;
  890. bottom: 0;
  891. right: 0;
  892. z-index: 2;
  893. opacity: 0;
  894. }
  895.  
  896. .like_button iframe {width: 100% !important; height: 100% !important;}
  897. .likeb .liked + .actual-button {color: #{text:like color code};}
  898. .likeb .liked + .actual-button:after {content: 'd';}
  899.  
  900. .info a, .tags a {margin-right: 1.25em;}
  901.  
  902. {block:ifhovertags}
  903. .tags {
  904. max-height:0;
  905. opacity:0;
  906. -webkit-transition: all 0.7s ease;
  907. transition: all 0.7s ease;
  908. -moz-transition: all 0.7s ease;
  909. -o-transition: all 0.7s ease;
  910. }
  911. {/block:ifhovertags}
  912.  
  913. .tags {margin-top:.5em;}
  914.  
  915. .tags i {
  916. font-size:1.3em;
  917. color:{color:title};
  918. padding:5px;
  919. {block:ifglow}
  920. text-shadow:0 0 10px;
  921. {/block:ifglow}
  922. }
  923.  
  924. .tags a {
  925. display:inline-block;
  926. vertical-align:top;
  927. margin-top:.2em;
  928. margin-bottom:1em;
  929. font-size:.9em;
  930. color:{color:link};
  931. text-shadow:1px 1px 2px {color:text shadow};
  932. -webkit-transition: all 0.4s;
  933. -moz-transition: all 0.4s;
  934. -ms-transition: all 0.4s;
  935. -o-transition: all 0.4s;
  936. transition: all 0.4s;
  937. }
  938.  
  939. .tags a:hover {
  940. color:{color:accent};
  941. -webkit-transition: all 0.4s;
  942. -moz-transition: all 0.4s;
  943. -ms-transition: all 0.4s;
  944. -o-transition: all 0.4s;
  945. transition: all 0.4s;
  946. }
  947.  
  948. {block:ifhovertags}
  949. .posts:hover .tags {
  950. opacity:1;
  951. max-height:500px;
  952. -webkit-transition: all 0.7s ease;
  953. transition: all 0.7s ease;
  954. -moz-transition: all 0.7s ease;
  955. -o-transition: all 0.7s ease;}
  956. }
  957. {block:ifhovertags}
  958.  
  959. /*---- PERMALINK PAGE ----*/
  960.  
  961. .perma-page {
  962. margin:1em 0 1em 0;
  963. }
  964.  
  965. .perma-page #info {
  966. display:block;
  967. margin:.5em 0 .5em 0;
  968. text-shadow:1px 1px 2px {color:text shadow};
  969. }
  970.  
  971. .perma-page #info i {
  972. color:{color:title};
  973. font-size:1.3em;
  974. padding:5px;
  975. {block:ifglow}
  976. text-shadow:0 0 10px;
  977. {/block:ifglow}
  978. }
  979.  
  980. .perma-page #info span {
  981. display: inline-block;
  982. vertical-align: top;
  983. margin-top:.2em;
  984. text-transform:lowercase;
  985. }
  986.  
  987. /*---- POST NOTES -----*/
  988.  
  989. .notes {margin: 1em 0;}
  990.  
  991. .notes-title {text-align:center;}
  992.  
  993. .notes-title span {
  994. display:inline-block;
  995. vertical-align:top;
  996. font-size:1.1em;
  997. color:{color:title};
  998. font-weight:bold;
  999. text-shadow:1px 1px 2px {color:text shadow};
  1000. }
  1001.  
  1002. .notes-title i {
  1003. font-size:1.4em;
  1004. color:{color:accent};
  1005. {block:ifglow}
  1006. text-shadow:0 0 10px;
  1007. {/block:ifglow}
  1008. margin-right:.5em;
  1009. }
  1010.  
  1011. ol.notes {
  1012. max-width: 100%;
  1013. padding: 1em 0;
  1014. margin: .5em 0 0 0;
  1015. text-shadow:1px 1px 2px {color:text shadow};
  1016. border-top:1px solid {color:borders};
  1017. }
  1018.  
  1019. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  1020.  
  1021. ol.notes li.note img.avatar {
  1022. margin-right: 1em;
  1023. vertical-align: middle;
  1024. display: inline-block;
  1025. width: 1.25em;
  1026. height: 1.25em;
  1027. }
  1028.  
  1029. /*---- PAGINATION -----*/
  1030.  
  1031. #page-navigation {
  1032. position:relative;
  1033. text-align: center;
  1034. width:540px;
  1035. margin-left:400px;
  1036. text-shadow:1px 1px 2px {color:text shadow};
  1037. }
  1038.  
  1039. #page-navigation span {
  1040. display:inline-block;
  1041. vertical-align:top;
  1042. margin-top:.5em;
  1043. letter-spacing:1.5px;
  1044. color:{color:text};
  1045. }
  1046.  
  1047. #page-navigation i {
  1048. color:{color:title};
  1049. font-size:1.3em;
  1050. padding:.5em;
  1051. {block:ifglow}
  1052. text-shadow:0 0 10px;
  1053. {/block:ifglow}
  1054. -webkit-transition: all 0.4s;
  1055. -moz-transition: all 0.4s;
  1056. -ms-transition: all 0.4s;
  1057. -o-transition: all 0.4s;
  1058. transition: all 0.4s;
  1059. }
  1060.  
  1061. #page-navigation i:hover {color:{color:accent};
  1062. -webkit-transition: all 0.4s;
  1063. -moz-transition: all 0.4s;
  1064. -ms-transition: all 0.4s;
  1065. -o-transition: all 0.4s;
  1066. transition: all 0.4s;
  1067. }
  1068.  
  1069. #page-navigation a {margin: 0 0.5em;}
  1070.  
  1071. /*---- CREDIT -----*/
  1072.  
  1073. .credit {
  1074. position: fixed;
  1075. bottom: 20px;
  1076. right: 20px;
  1077. font-size: 1.4em;
  1078. color:{color:title};
  1079. {block:ifglow}
  1080. text-shadow:0 0 10px;
  1081. {/block:ifglow}
  1082. }
  1083.  
  1084. .credit a:hover {
  1085. color:{color:accent};
  1086. -webkit-transition: all 0.4s;
  1087. -moz-transition: all 0.4s;
  1088. -ms-transition: all 0.4s;
  1089. -o-transition: all 0.4s;
  1090. transition: all 0.4s;
  1091. }
  1092.  
  1093. {CustomCSS}
  1094.  
  1095. </style>
  1096. </head>
  1097.  
  1098. <!----- HTML ----->
  1099.  
  1100. <body>
  1101.  
  1102. <!-- main = main container -->
  1103.  
  1104. <main>
  1105.  
  1106. <!----- SIDEBAR ----->
  1107.  
  1108. <aside id="sidebar">
  1109. <div id="top-wrap">
  1110. <div class="navicon"><img src="{portraiturl-128}"></div>
  1111. <div class="title">
  1112. <li><b><a href="/">{Title}</a></b></li>
  1113. <li>@{name}</li>
  1114. </div>
  1115. </div>
  1116.  
  1117. <div id="side-wrap">
  1118. {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img" alt="Sidebar image"/></a>{/block:ifSidebarImage}
  1119.  
  1120. <div id="bottom-wrap">
  1121. {block:ifCustomDescription}<div id="description">{text:custom description}</div>{/block:ifCustomDescription}
  1122.  
  1123. <nav>
  1124. {block:ifhomelink}<a class="deg7" title="{text:home link}" href="/"><i class="ph-house"></i></a>{/block:ifhomelink}
  1125. {block:ifasklink}<a class="deg6" title="{text:ask link}" href="/ask"><i class="ph-chat-circle"></i></a>{/block:ifasklink}
  1126. {block:ifarchivelink}<a class="deg5" title="{text:archive link}" href="/archive"><i class="ph-clock-counter-clockwise"></i></a>{/block:ifarchivelink}
  1127. {block:ifLink1}<a class="deg4" title="{text:Link 1}" href="{text:Link 1 URL}"><i class="ph-{text:link 1 icon}"></i></a>{/block:ifLink1}
  1128. {block:ifLink2}<a class="deg3" title="{text:Link 2}" href="{text:Link 2 URL}"><i class="ph-{text:link 2 icon}"></i></a>{/block:ifLink2}
  1129. {block:ifLink3}<a class="deg2" title="{text:Link 3}" href="{text:Link 3 URL}"><i class="ph-{text:link 3 icon}"></i></a>{/block:ifLink3}
  1130. {block:ifLink4}<a class="deg1" title="{text:Link 4}" href="{text:Link 4 URL}"><i class="ph-{text:link 4 icon}"></i></a>{/block:ifLink4}
  1131. </nav>
  1132. </div>
  1133.  
  1134. </div>
  1135. </aside>
  1136.  
  1137. <!----- TAG AND DAY PAGES ----->
  1138.  
  1139. <!-- section = post container -->
  1140.  
  1141. <section>
  1142.  
  1143. {block:TagPage}
  1144. <article>
  1145. <div class="tdpage">
  1146. showing <b>{tagresultcount}</b> posts tagged <b>#{Tag}</b>
  1147. </div>
  1148. </article>
  1149. {/block:TagPage}
  1150.  
  1151. {block:DayPage}
  1152. <article>
  1153. <div class="tdpage">
  1154. showing posts made on <b>{Month} {DayOfMonth}, {Year}</b>
  1155. </div>
  1156. </article>
  1157. {/block:DayPage}
  1158.  
  1159. <!----- POSTS ----->
  1160.  
  1161. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1162.  
  1163. <!---- TOP INFO ---->
  1164.  
  1165. {block:indexpage}
  1166. {block:iftopinfo}
  1167. <div class="topinfo">
  1168. {block:RebloggedFrom}
  1169. <img src="{ReblogParentPortraitURL-64}" class="user-icon"><a id="hua" title="via" href="{reblogparenturl}">{reblogparentname}</a>
  1170. <i class="ph-repeat-bold"></i>
  1171. <img src="{ReblogRootPortraitURL-64}" class="user-icon"><a id="hua" title="source" href="{reblogrooturl}">{reblogrootname}</a>
  1172. {/block:RebloggedFrom}
  1173. {block:notreblog}
  1174. <a id="hua" href="{permalink}">original post</a>
  1175. {/block:notreblog}
  1176. </div>
  1177. {/block:iftopinfo}
  1178. {/block:indexpage}
  1179.  
  1180. <article class="posts" id="{PostID}" post-type="{PostType}">
  1181.  
  1182. {block:Text}
  1183. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1184. {block:NotReblog}
  1185. <li class="caption text-caption">
  1186. {Body}
  1187. </li>
  1188. {/block:NotReblog}
  1189. {block:RebloggedFrom}
  1190. {block:Reblogs}
  1191. <li class="caption text-caption">
  1192. <img src="{PortraitURL-64}" class="user-icon">
  1193. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1194. {Body}
  1195. </li>
  1196. {/block:Reblogs}
  1197. {/block:RebloggedFrom}
  1198. {/block:Text}
  1199.  
  1200. {block:Link}
  1201. <a href="{URL}" class="link-wrap">
  1202. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  1203. <div class="link">
  1204. <div class="title">{Name}</div>
  1205. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1206. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  1207. </div>
  1208. </a>
  1209. {block:Description}
  1210. {block:NotReblog}
  1211. <li class="caption">
  1212. {Description}
  1213. </li>
  1214. {/block:NotReblog}
  1215. {/block:Description}
  1216. {block:RebloggedFrom}
  1217. {block:Reblogs}
  1218. <li class="caption">
  1219. <img src="{PortraitURL-64}" class="user-icon">
  1220. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1221. {Body}
  1222. </li>
  1223. {/block:Reblogs}
  1224. {/block:RebloggedFrom}
  1225. {/block:Link}
  1226.  
  1227. {block:Photo}
  1228. <div class="photo">
  1229. {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}
  1230. </div>
  1231. {block:Caption}
  1232. {block:NotReblog}
  1233. <li class="caption">
  1234. {Caption}
  1235. </li>
  1236. {/block:NotReblog}
  1237. {block:RebloggedFrom}
  1238. {block:Reblogs}
  1239. <li class="caption">
  1240. <img src="{PortraitURL-64}" class="user-icon">
  1241. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1242. {Body}
  1243. </li>
  1244. {/block:Reblogs}
  1245. {/block:RebloggedFrom}
  1246. {/block:Caption}
  1247. {/block:Photo}
  1248.  
  1249. {block:Photoset}
  1250. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1251. {block:Caption}
  1252. {block:NotReblog}
  1253. <li class="caption">
  1254. {Caption}
  1255. </li>
  1256. {/block:NotReblog}
  1257. {block:RebloggedFrom}
  1258. {block:Reblogs}
  1259. <li class="caption">
  1260. <img src="{PortraitURL-64}" class="user-icon">
  1261. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1262. {Body}
  1263. </li>
  1264. {/block:Reblogs}
  1265. {/block:RebloggedFrom}
  1266. {/block:Caption}
  1267. {/block:Photoset}
  1268.  
  1269. {block:Video}
  1270. <div class="video">{Video-500}</div>
  1271. {block:Caption}
  1272. {block:NotReblog}
  1273. <li class="caption">
  1274. {Caption}
  1275. </li>
  1276. {/block:NotReblog}
  1277. {block:RebloggedFrom}
  1278. {block:Reblogs}
  1279. <li class="caption">
  1280. <img src="{PortraitURL-64}" class="user-icon">
  1281. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1282. {Body}
  1283. </li>
  1284. {/block:Reblogs}
  1285. {/block:RebloggedFrom}
  1286. {/block:Caption}
  1287. {/block:Video}
  1288.  
  1289. {block:Quote}
  1290. <div class="quote">{Quote}</div>
  1291. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1292. {/block:Quote}
  1293.  
  1294. {block:Chat}
  1295. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1296. <ul class="chat">{block:Lines}
  1297. <li>
  1298. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1299. {Line}
  1300. </li>
  1301. {/block:Lines}</ul>
  1302. {/block:Chat}
  1303.  
  1304. {block:Answer}
  1305. <div class="ask-wrap">
  1306. <img src="{AskerPortraitURL-64}" class="ask-icon">
  1307. <div class="asking"><b>{Asker}</b> sent a message</div>
  1308. <div class="question">{Question}</div>
  1309. </div>
  1310. {block:Answerer}
  1311. <li class="caption">
  1312. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1313. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1314. {Answer}
  1315. </li>
  1316. {/block:Answerer}
  1317. {block:NotReblog}
  1318. <li class="caption">
  1319. {Replies}
  1320. </li>
  1321. {/block:NotReblog}
  1322. {block:RebloggedFrom}
  1323. {block:Reblogs}
  1324. <li class="caption">
  1325. <img src="{PortraitURL-64}" class="user-icon">
  1326. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1327. {Body}
  1328. </li>
  1329. {/block:Reblogs}
  1330. {/block:RebloggedFrom}
  1331. {/block:Answer}
  1332.  
  1333. {block:Audio}
  1334. <div class="audiopost">
  1335. <div class="audiobox">
  1336. <div class="button">
  1337. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1338. </div>
  1339. </div>
  1340. {block:AlbumArt}
  1341. <img src="{AlbumArtURL}" class="album-art">
  1342. {/block:AlbumArt}
  1343. <div class="audioinfo">
  1344. {block:TrackName}<li class="track"><b>{TrackName}</b></li>{/block:TrackName}
  1345. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1346. {block:Album}<li>{Album}</li>{/block:Album}
  1347. </div>
  1348. </div>
  1349. {block:Caption}
  1350. {block:NotReblog}
  1351. <li class="caption">
  1352. {Caption}
  1353. </li>
  1354. {/block:NotReblog}
  1355. {block:RebloggedFrom}
  1356. {block:Reblogs}
  1357. <li class="caption">
  1358. <img src="{PortraitURL-64}" class="user-icon">
  1359. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1360. {Body}
  1361. </li>
  1362. {/block:Reblogs}
  1363. {/block:RebloggedFrom}
  1364. {/block:Caption}
  1365. {/block:Audio}
  1366.  
  1367. <!----- INFO ----->
  1368.  
  1369. {block:Date}
  1370. <div class="info">
  1371. {block:PinnedPostLabel}
  1372. <i id="pinpost" class="ph-push-pin" title="pinned post"></i><a id="hua" title="pinned post" href="{permalink}">pinned</a>
  1373. {/block:PinnedPostLabel}
  1374. <i class="ph-calendar-blank"></i><a class="time-ago" id="hua" title="{Month} {DayOfMonth}, {Year}" href="{Permalink}">{timestamp}</a>
  1375. {block:NoteCount}<i class="ph-activity"></i><a class="notecount" id="hua" title="{notecountwithlabel}" href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  1376. <!-- like and reblog buttons -->
  1377. <div class="info-right">
  1378. <i class="ph-arrows-clockwise"></i> <a id="hua" title="reblog" href="{ReblogURL}" target="_blank">reblog</a>
  1379. <i class="ph-heart"></i> <a title="like" class="likeb" id="hua" href="#">{LikeButton}<span class="actual-button">like</span></a>
  1380. </div>
  1381. </div>
  1382. {/block:Date}
  1383.  
  1384. <!-- reblog info and content source on permalink pages -->
  1385.  
  1386. {block:PermalinkPage}
  1387. <div class="perma-page">
  1388. {block:RebloggedFrom}
  1389. <div id="info"><i class="ph-repeat"></i> <span>via: <a id="hua" href="{ReblogParentURL}">{ReblogParentName}</a></span></div>
  1390. <div id="info"><i class="ph-map-pin"></i> <span>originally: <a id="hua" href="{ReblogRootURL}">{ReblogRootName}</a></span></div>
  1391. {/block:RebloggedFrom}
  1392. {block:ContentSource}<div id="info"><i class="ph-info"></i> <span><a id="hua" href="{SourceURL}">{lang:Source}</a></span></div>{/block:ContentSource}
  1393. </div>
  1394. {/block:PermalinkPage}
  1395.  
  1396. <!----- TAGS ----->
  1397.  
  1398. {block:HasTags}
  1399. <div class="tags">
  1400. <i class="ph ph-tag"></i>
  1401. {block:Tags}<a id="hua" href="{TagURL}">#{Tag}</a>{/block:Tags}
  1402. </div>
  1403. {/block:HasTags}
  1404.  
  1405. <!----- POST NOTES ----->
  1406.  
  1407. {block:PermalinkPage}{block:Date}
  1408. {block:NoteCount}{block:PostNotes}
  1409. <div class="notes">
  1410. <div class="notes-title"><i class="ph-activity"></i><span>activity</span></div>
  1411. {PostNotes-64}
  1412. </div>
  1413. {/block:PostNotes}{/block:NoteCount}
  1414. {/block:Date}{/block:PermalinkPage}
  1415.  
  1416. </article>
  1417. {/block:Posts}
  1418.  
  1419. <!-- end of posts container -->
  1420.  
  1421. </section>
  1422.  
  1423. <!----- PAGINATION ----->
  1424.  
  1425. {block:Pagination}
  1426. <article id="page-navigation">
  1427. {block:PreviousPage}<a title="previous page" href="{PreviousPage}"><i class="ph-caret-left"></i></a>{/block:PreviousPage}
  1428.  
  1429. <span>page <b>{currentpage}</b> of {totalpages}</span>
  1430.  
  1431. {block:NextPage}<a title="next page" href="{NextPage}"><i class="ph-caret-right"></i></a>{/block:NextPage}
  1432. </article>
  1433. {/block:Pagination}
  1434.  
  1435. <!-- end of main container -->
  1436.  
  1437. </main>
  1438.  
  1439. <a href="https://demontimes.tumblr.com" title="constellation theme by sage" class="credit"><i class="ph-ghost"></i></a>
  1440.  
  1441. <script>
  1442.  
  1443.  
  1444. /// photoset
  1445. $(document).ready(function(){
  1446. $('.photo-slideshow').pxuPhotoset({
  1447. lightbox: true,
  1448. rounded: 'corners',
  1449. gutter: '4px',
  1450. borderRadius: '{select:border radius}',
  1451. photoset: '.photo-slideshow',
  1452. photoWrap: '.photo-data',
  1453. photo: '.pxu-photo'
  1454. });
  1455. });
  1456.  
  1457.  
  1458. // tooltips
  1459. tippy('[title]', {
  1460. theme: 'custom',
  1461. arrow: false,
  1462. followCursor: true,
  1463. delay: 100,
  1464. placement: 'top',
  1465. zIndex: 9999999999,
  1466. maxWidth: 400,
  1467.  
  1468. content(reference) {
  1469. const title = reference.getAttribute('title');
  1470. reference.removeAttribute('title');
  1471. return title;
  1472. },
  1473. });
  1474.  
  1475. // notes
  1476. $('article').find('.notecount').each(function(){
  1477. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1478. if (n > 999) {
  1479. n = Math.floor(n / 100) / 10;
  1480. $(this).text(n + 'k notes');
  1481. }
  1482. });
  1483.  
  1484. </script>
  1485.  
  1486. </body>
  1487. </html>
  1488.  
Advertisement
Add Comment
Please, Sign In to add comment