fallingforthemes

wip - comic

Jan 2nd, 2022 (edited)
118
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.88 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. - theme #9: 'X' by fallingforthemes
  5. - please don't steal my code
  6. - let me know of any problems or questions
  7. - Enjoy!
  8.  
  9. Credits:
  10. - Feather icons
  11. - Octomoosey for resizing audio player button
  12. - Seyche for optional tumblr controls
  13. - Stackoverflow for corner borders: https://stackoverflow.com/questions/14387690/how-can-i-show-only-corner-borders
  14. If you need any help, feel free to send me a message at fallingforthemes.tumblr.com/ask
  15. -->
  16. <head>
  17. <title>{Title}</title>
  18. <!---------------- META -------------->
  19. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  20.  
  21. <meta name="if:Custom Title" content=""/>
  22. <meta name="if:Link 1" content=""/>
  23. <meta name="if:Link 2" content=""/>
  24. <meta name="if:Link 3" content=""/>
  25. <meta name="if:Comic Box 1" content="" />
  26. <meta name="if:Comic Box 2" content="" />
  27. <meta name="if:Comic Box 3" content="" />
  28. <meta name="if:Comic Box 4" content="" />
  29. <meta name="if:Custom Font" content=""/>
  30. <meta name="if:Notes Hidden" content=""/>
  31. <meta name="if:Tags Hidden" content=""/>
  32. <meta name="if:Tags Hover" content=""/>
  33. <meta name="if: Four Corners" content=""/>
  34.  
  35. <meta name="image:About Image" content="">
  36. <meta name="color:Section Borders" content="#293241">
  37. <meta name="color:Post Borders" content="#293241">
  38. <meta name="color:Drop Shadow" content="#293241">
  39. <meta name="color:Background" content="#293241">
  40. <meta name="color:Link Background" content="#293241">
  41. <meta name="color:Link Box Background" content="#293241">
  42. <meta name="color:Post Background" content="#293241">
  43. <meta name="color:Description Background" content="#293241">
  44. <meta name="color:Comic Box 1" content="#293241">
  45. <meta name="color:Comic Box 2" content="#293241">
  46. <meta name="color:Comic Box 3" content="#293241">
  47. <meta name="color:Comic Box 4" content="#293241">
  48. <meta name="color:Post Font" content="#000000">
  49. <meta name="color:Search Bar Font" content="#000000">
  50. <meta name="color:Post Link Font" content="#000000">
  51. <meta name="color:Post Link Font Hover" content="#000000">
  52. <meta name="color:Description Font" content="#000000">
  53. <meta name="color:Description Font Hover" content="#000000">
  54. <meta name="color:Comic Box 1 Font" content="#293241">
  55. <meta name="color:Comic Box 2 Font" content="#293241">
  56. <meta name="color:Comic Box 3 Font" content="#293241">
  57. <meta name="color:Comic Box 4 Font" content="#293241">
  58.  
  59. <meta name="font:Body" content="sans-serif"/>
  60.  
  61. <meta name="text:Custom Title" content="" />
  62. <meta name="text:URL 1 Icon" content="" />
  63. <meta name="text:URL 1 Label" content="" />
  64. <meta name="text:URL 1" content="" />
  65. <meta name="text:URL 2 Icon" content="" />
  66. <meta name="text:URL 2 Label" content="" />
  67. <meta name="text:URL 2" content="" />
  68. <meta name="text:URL 3 Icon" content="" />
  69. <meta name="text:URL 3 Label" content="" />
  70. <meta name="text:URL 3" content="" />
  71. <meta name="text:About Image Alt" content="" />
  72. <meta name="text:Comic Box 1" content="" />
  73. <meta name="text:Comic Box 2" content="" />
  74. <meta name="text:Comic Box 3" content="" />
  75. <meta name="text:Comic Box 4" content="" />
  76.  
  77. <meta name="select:Text Size" content="10px"/>
  78. <meta name="select:Text Size" content="11px"/>
  79. <meta name="select:Text Size" content="12px"/>
  80. <meta name="select:Text Size" content="13px"/>
  81. <meta name="select:Text Size" content="14px"/>
  82. <meta name="select:Text Size" content="15px"/>
  83. <meta name="select:Text Size" content="16px"/>
  84. <meta name="select:Text Size" content="17px"/>
  85. <meta name="select:Text Size" content="18px"/>
  86. <meta name="select:Post Size" content="540px"/>
  87. <meta name="select:Post Size" content="600px"/>
  88. <meta name="select:Post Size" content="650px"/>
  89. <meta name="select:Post Size" content="700px"/>
  90. <meta name="select:Font" content="Lato"/>
  91. <meta name="select:Font" content="Poppins"/>
  92.  
  93. <!---------------- FEATHER ICONS -------------->
  94. <script src="https://unpkg.com/feather-icons"></script>
  95. <!---------------- FONT (POPPINS + LATO) ---------------->
  96. <link rel="preconnect" href="https://fonts.googleapis.com">
  97. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  98. <link href="https://fonts.googleapis.com/css2?family=Lato&family=Mulish&family=Poppins:wght@200&display=swap" rel="stylesheet">
  99. <!---------------- TOOLTIPS SCALE ANIMATION -------------->
  100. <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css"/>
  101. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  102. <!---------------- NO.JS Photosets ---------------->
  103. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  104.  
  105.  
  106. <style type="text/css">
  107. /*********** GENERAL: BODY, IMGS, LISTS ************/
  108. * {
  109. margin: 0;
  110. padding: 0;
  111. box-sizing: border-box;
  112. }
  113.  
  114. body {
  115. word-wrap: break-word;
  116. font-family: {font:Body}, sans-serif;
  117. font-size: {select:Text Size};
  118. letter-spacing: 0.05em;
  119. background-color: {color:Background};
  120. }
  121.  
  122. {block:IfCustomFont}
  123. body {
  124. font-family: {select:Font}, sans-serif;
  125. }
  126. {/block:IfCustomFont}
  127.  
  128. img {
  129. border: 0; /*Precaution for IE*/
  130. max-width: 100%; /*Prevent imgs from spilling over*/
  131. width: 100%; /*For Google Chrome*/
  132. }
  133.  
  134. ol, ul {
  135. padding: 0 35px;
  136. }
  137.  
  138. ul {
  139. list-style-type: square;
  140. }
  141.  
  142. input {
  143. outline: none;
  144. }
  145.  
  146. input:focus {
  147. outline: solid;
  148. }
  149.  
  150. a {
  151. text-decoration: none;
  152. }
  153.  
  154. #sidebar, #content, #links {
  155. border: 5px solid {color:Section Borders};
  156. border-radius: 5px;
  157. box-shadow: 1em 1em 1em {color:Drop Shadow};
  158. position: fixed;
  159. overflow: scroll;
  160. }
  161.  
  162. /**** TUMBLR CONTROL SETTINGS ****/
  163. .controls-button svg {
  164. cursor: help;
  165. color: {color:Header Link};
  166. }
  167.  
  168. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  169. z-index: 999999999!important;
  170. margin-top: 1em;
  171. opacity: 0;
  172. visibility: hidden;
  173. -webkit-transition: all 0.5s;
  174. -moz-transition: all 0.5s;
  175. -ms-transition: all 0.5s;
  176. -o-transition: all 0.5s;
  177. transition: all 0.5s;
  178. }
  179.  
  180. body.controls-click .tmblr-iframe {
  181. opacity: 1.0;
  182. visibility: visible;
  183. -webkit-transition: all 0.5s;
  184. -moz-transition: all 0.5s;
  185. -ms-transition: all 0.5s;
  186. -o-transition: all 0.5s;
  187. transition: all 0.5s;
  188. }
  189.  
  190. /**** GENERAL TITLES ****/
  191. .title, .post_title {
  192. font-weight: bold;
  193. }
  194.  
  195. /*********** SIDEBAR/HEADER ************/
  196. #sidebar {
  197. width: 25em;
  198. height: 12em;
  199. bottom: 3em;
  200. left: 50%;
  201. background-color: {color:Description Background};
  202. padding: 1em;
  203. text-align: center;
  204. }
  205.  
  206. #sidebar a {
  207. color: {color:Description Link};
  208. }
  209.  
  210. #sidebar a:hover {
  211. color: {color:Description Link Hover};
  212. }
  213.  
  214. #sidebar img {
  215. width: 5em;
  216. height: 5em;
  217. border-radius: 100%;
  218. vertical-align: middle;
  219. }
  220.  
  221. {block:IfCustomTitle}
  222. #sidebar .default_title {
  223. display: none;
  224. }
  225. {/block:IfCustomTitle}
  226.  
  227. /*SIDEBAR NAVIGATION*/
  228. .controls-button {
  229. float: right;
  230. padding: 7px 10px;
  231. border-radius: 100%;
  232. background-color: {color:Header Button};
  233. position: relative;
  234. }
  235.  
  236. #links {
  237. width: 16.5em;
  238. height: 20em;
  239. overflow: scroll;
  240. left: 3em;
  241. bottom: 3em;
  242. }
  243.  
  244. #links a {
  245. color: {color:Link};
  246. padding: 1em;
  247. border: 1px solid black;
  248. display: inline-block;
  249. margin: 2em 2em 0 2em;
  250. width: 58px;
  251. }
  252.  
  253. #links a:hover {
  254. color: {color:Link Hover};
  255. }
  256.  
  257. #links a:last-child {
  258. margin-bottom: 2em;
  259. }
  260.  
  261. .link {
  262. background-color: {color:Dropdown Link Bkgd};
  263. }
  264.  
  265. /*********** ABOUT ************/
  266. #desc a, .post_content caption a {
  267. text-decoration: underline;
  268. }
  269.  
  270. #pagination {
  271. margin-top: 20px;
  272. position: absolute;
  273. left: 42%;
  274. z-index: 2;
  275. background-color: {color:Post Accent};
  276. padding: 10px;
  277. border-radius: 5px;
  278. }
  279.  
  280. .current_page {
  281. color: {color:Post Font};
  282. }
  283.  
  284. .page_num, .jump_page, .prev, .next {
  285. color: {color:Post Link};
  286. }
  287.  
  288. .current_page, .page_num, .jump_page, .prev, .next {
  289. padding: 7px 12px;
  290. margin: 0 10px;
  291. border-radius: 100%;
  292. }
  293.  
  294. /*********** CONTENT ************/
  295. #content {
  296. width: 70%;
  297. height: 65%;
  298. right: 3em;
  299. top: 3em;
  300. }
  301.  
  302. /*********** POSTS ************/
  303. .note_count{
  304. float: right;
  305. }
  306.  
  307. .date {
  308. position: relative;
  309. left: calc({select:Post Size} - 50px);
  310. }
  311.  
  312. {block:IfNotesHidden}
  313. .note_count {
  314. display: none;
  315. }
  316. {/block:IfNotesHidden}
  317.  
  318. /*GENERAL POST*/
  319. .posts {
  320. width: {select:Post Size};
  321. break-inside: avoid;
  322. margin: 0 auto 1.5em;
  323. }
  324.  
  325. .posts:first-child {
  326. margin-top: 1.5em;
  327. }
  328.  
  329. .post_content {
  330. position: relative;
  331. padding: 1.5em;
  332. margin: 5px 0 5px;
  333. }
  334.  
  335. .post_content:before, .post_content>:first-child:before {
  336. position: absolute;
  337. content: ' ';
  338. border-style: solid;
  339. border-color: {color:Post Accent};
  340. width: 30px;
  341. height: 30px;
  342. }
  343.  
  344. .post_content:before {
  345. top: 0;
  346. left: 0;
  347. border-width: 3px 0 0 3px;
  348. }
  349.  
  350. .post_content>:first-child:before {
  351. bottom: 0;
  352. right: 0;
  353. border-width: 0 3px 3px 0
  354. }
  355.  
  356. {block:IfFourCorners}
  357. .post_content:after, .post_content>:first-child:after {
  358. position: absolute;
  359. content: ' ';
  360. border-style: solid;
  361. border-color: {color:Post Accent};
  362. width: 30px;
  363. height: 30px;
  364. }
  365.  
  366. .post_content:after {
  367. top: 0;
  368. right: 0;
  369. border-width: 3px 3px 0 0;
  370. }
  371.  
  372. .post_content>:first-child:after {
  373. bottom: 0;
  374. left: 0;
  375. border-width: 0 0 3px 3px
  376. }
  377. {/block:IfFourCorners}
  378.  
  379. .posts a, #note_list a {
  380. color: {color:Post Link};
  381. }
  382.  
  383. .posts a:hover, #note_list a:hover {
  384. color: {color:Post Link Hover};
  385. }
  386.  
  387. /* POST ICON */
  388. .reblog-icon img {
  389. width: 40px;
  390. height: 40px;
  391. border-radius: 40%;
  392. position: absolute;
  393. left: -50px;
  394. top: 5px;
  395. }
  396.  
  397. .reblog-header {
  398. margin-top: 5px;
  399. }
  400.  
  401. /*TEXT POSTS*/
  402. .text_post .caption p:not(.reblog-list .caption p):not(blockquote .caption p){
  403. padding: 10px 0;
  404. }
  405.  
  406. .reblog-list .caption p {
  407. padding-bottom: 10px;
  408. }
  409.  
  410. /*CHAT POSTS*/
  411. .chat {
  412. list-style-type: none;
  413. }
  414.  
  415. .chat li:nth-child(even), .npf_chat:nth-child(even) {
  416. text-align: right;
  417. }
  418.  
  419. .chat li{
  420. padding-bottom: 5px;
  421. }
  422.  
  423. .npf_chat b:only-of-type {
  424. display: block;
  425. }
  426.  
  427. /*PHOTO POSTS*/
  428. .html_photoset iframe, .embed_iframe{
  429. width: 100%;
  430. }
  431.  
  432. .photo_post .caption {
  433. display: none;
  434. }
  435.  
  436. {block:PermalinkPage}
  437. .photo_post .caption {
  438. display: block;
  439. }
  440. {/block:PermalinkPage}
  441.  
  442. /*AUDIO POSTS*/
  443. .audio_post .caption {
  444. padding-bottom: 30px;
  445. }
  446.  
  447. .audio_info {
  448. display: none;
  449. font-family: 'Poppins', sans-serif !important;
  450. }
  451.  
  452. .audio_name {
  453. font-weight: bold;
  454. }
  455.  
  456. .hover{
  457. text-align: center;
  458. background-color: rgba(0,0,0,0.4);
  459. color: white;
  460. position: absolute;
  461. top: 18px;
  462. width: 100%;
  463. height: 96%;
  464. display: flex;
  465. flex-flow: column nowrap;
  466. justify-content: center;
  467. }
  468.  
  469. .audio_player {
  470. width: 33px;
  471. height: 33px;
  472. overflow: hidden;
  473. font-size: 30px;
  474. position: relative;
  475. margin: 0 auto;
  476. }
  477.  
  478. /*ASK POSTS*/
  479. .asker {
  480. font-size: 0.95em;
  481. font-family: 'Poppins', sans-serif;
  482. font-weight: bold;
  483. }
  484.  
  485. .answer {
  486. text-align: right;
  487. }
  488.  
  489. /*QUOTE POSTS*/
  490. .quote {
  491. padding-top: 10px;
  492. }
  493.  
  494. .source {
  495. padding-left: 20px;
  496. }
  497.  
  498. /*CAPTIONS*/
  499. .post_title, .reblog-list, .asking{
  500. background-color: {color:Post};
  501. }
  502.  
  503. blockquote {
  504. padding: 10px 20px;
  505. border-left: 2px solid rgba(220,220,220,0.5);
  506. margin-top: 5px;
  507. }
  508.  
  509. .chat, .caption {
  510. padding-top: 10px;
  511. }
  512.  
  513. /***POST END***/
  514. .post_end a {
  515. color: {color:Post Link};
  516. }
  517.  
  518. .post_end a:hover {
  519. color: {color:Post Link Hover};
  520. }
  521.  
  522. /*LIKE/REBLOG STYLING*/
  523. .like-b {
  524. position:relative;
  525. overflow:hidden;
  526. margin-bottom:-1px;
  527. margin-right: 10px;
  528. }
  529.  
  530. .like-b .like_button iframe {
  531. position:absolute;
  532. top:0;
  533. left:0;
  534. bottom:0;
  535. right:0;
  536. z-index:2;
  537. opacity:0;
  538. }
  539.  
  540. .like-b .liked + .b {
  541. color:inherit;
  542. }
  543.  
  544. .like-b .liked + .b:after {
  545. content:'d';
  546. }
  547.  
  548. /*TAG STYLING*/
  549. .posts .tags .comma {
  550. color: {color:Post};
  551. }
  552.  
  553. .posts .tags .comma:last-child, .posts .tags .comma:last-child {
  554. display: none;
  555. }
  556.  
  557. {block:IfTagsHidden}
  558. .posts .tags {
  559. display: none;
  560. }
  561. {block:IfTagsHidden}
  562.  
  563. /*** LIST OF NOTES ***/
  564. #note_list {
  565. margin: 0 auto;
  566. width: 80%;
  567. font-size: {select:Text Size};
  568. border: 2px solid {color:Post Accent};
  569. border-radius: 5px;
  570. padding: 10px 20px;
  571. break-inside: avoid;
  572. }
  573.  
  574. #note_list a:first-child {
  575. margin-left: 5px;
  576. }
  577.  
  578. #note_list ol.notes {
  579. list-style-type: none;
  580. margin: 0;
  581. padding: 0;
  582. }
  583.  
  584. #note_list img.avatar {
  585. margin-right: 10px;
  586. width: 16px;
  587. height: 16px;
  588. }
  589.  
  590. /**********RESPONSIVE STYLING************/
  591. #mini_pagination {
  592. display: none;
  593. }
  594.  
  595. {CustomCSS}
  596. </style>
  597. </head>
  598.  
  599. <body>
  600. <!-------------- TUMBLR CONTROLS BUTTON -------------->
  601. <a class="controls-button"><i data-feather="settings"></i></a>
  602.  
  603. <!-------------- MAIN CONTENT -------------->
  604. <main id="content" class="{select:Column Number}">
  605. {block:Posts inlineMediaWidth="1280"}
  606. <!-------------- POSTS -------------->
  607. <article class="{PostType}_post posts">
  608. <!-------------- DATE -------------->
  609. <a href="{Permalink}" class="date">
  610. {block:Date}{ShortMonth} {DayOfMonth}{/block:Date}
  611. </a>
  612. <div class="post_content">
  613. <!-------------- POST START -------------->
  614. <div class="post_start">
  615. <!--------- POST ICON ---------->
  616. <!---- ORIGINAL ---->
  617. <div class="reblog-icon">
  618. <a target="_blank" class="original" href="/"><img src="{PortraitURL-40}"></a>
  619. </div>
  620. {block:RebloggedFrom}
  621. {block:Reblogs}
  622. <!---- REBLOGGED ---->
  623. <div class="reblog-icon">
  624. {block:IsActive}
  625. <a target="_blank" class="active reblogged_from" href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-40}"></a>
  626. {/block:IsActive}
  627. {block:IsDeactivated}
  628. <span class="inactive reblogged_from"><img src="{ReblogParentPortraitURL-40}"></span>
  629. {/block:IsDeactivated}
  630. </div>
  631. {/block:Reblogs}
  632. {/block:RebloggedFrom}
  633. </div>
  634.  
  635. {block:Title}
  636. <!-------------- POST TITLE -------------->
  637. <div class="post_title">{Title}</div>
  638. {/block:Title}
  639.  
  640. {block:Photo}
  641. <!-------------- PHOTO POST -------------->
  642. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
  643. {/block:Photo}
  644.  
  645. {block:Photoset}
  646. <!-------------- PHOTOSET POST -------------->
  647. {Photoset-700}
  648. {/block:Photoset}
  649.  
  650. {block:Panorama}
  651. <!-------------- PANORAMA POST -------------->
  652. <img src="{PhotoUrl-Panorama}" alt="{PhotoAlt}">
  653. {/block:Panorama}
  654.  
  655. {block:Video}
  656. <!-------------- VIDEO POST -------------->
  657. {Video-500}
  658. {/block:Video}
  659.  
  660. {block:Audio}
  661. <!-------------- ADUIO POST -------------->
  662. <div class="audio_container" alt="Album art for {block:TrackName}{Trackname}{/block:TrackName}">
  663. <div class="audio-image">
  664. {block:AlbumArt}
  665. <img src="{AlbumArtURL}" alt="{block:TrackName}
  666. {TrackName}
  667. {/block:TrackName}">
  668.  
  669. {/block:AlbumArt}
  670. <div class="audio_info">
  671. {block:AudioPlayer}
  672. <div class="audio_player">
  673. {AudioPlayer}
  674. </div>
  675. {/block:AudioPlayer}
  676.  
  677. {block:Album}
  678. <div class="audio_album">
  679. {Album}
  680. </div>
  681. {/block:Album}
  682.  
  683. {block:TrackName}
  684. <div class="audio_name">
  685. {TrackName}
  686. </div>
  687. {/block:TrackName}
  688.  
  689. {block:Artist}
  690. <div class="audio_artist">
  691. {Artist}
  692. </div>
  693. {/block:Artist}
  694. </div>
  695. </div>
  696. </div>
  697. {/block:Audio}
  698.  
  699. {block:Quote}
  700. <!-------------- QUOTE POST -------------->
  701. <div class="quote">"{Quote}"</div>
  702. {block:Source}<div class="source"><br>&mdash; {Source}</div>{/block:Source}
  703. {/block:Quote}
  704.  
  705. {block:Text}
  706. <!-------------- TEXT POST -------------->
  707. {block:NotReblog}
  708. <!-------------- ORIGINAL POST/NOT REBLOGGED -------------->
  709. <div class="caption">{Body}</div>
  710. {/block:NotReblog}
  711.  
  712. {block:RebloggedFrom}
  713. <!-------------- REBLOGGED POST -------------->
  714. <div class="reblog-list">
  715. {block:Reblogs}
  716. <div class="reblog-item">
  717. <div class="reblog-header">
  718. {block:IsActive}
  719. <a target="_blank" class="active reblogged_from" href="{Permalink}">{Username}</a>
  720. {/block:IsActive}
  721. {block:IsDeactivated}
  722. <span class="inactive reblogged_from">{Username}</span>
  723. {/block:IsDeactivated}
  724. </div>
  725.  
  726. <div class="post-reblog-content">
  727. <div class="caption">{Body}</div>
  728. </div>
  729. </div>
  730. {/block:Reblogs}
  731. </div>
  732. {/block:RebloggedFrom}
  733. {/block:Text}
  734.  
  735. {block:Answer}
  736. <!-------------- ASK POST -------------->
  737. <div class="asking">
  738. <div class="asker">{Asker} asked:</div>
  739. <div class="question">{Question}</div>
  740. </div>
  741.  
  742. <div class="answering">
  743. {block:Answerer}
  744. <div class="answerer">{Answerer}</div>
  745. {/block:Answerer}
  746. <div class="answer">{Answer}</div>
  747. </div>
  748. {/block:Answer}
  749.  
  750. {block:Chat}
  751. <!-------------- CHAT POST -------------->
  752. <ul class="chat">
  753. {block:Lines}
  754. <li>
  755. {block:Label}
  756. <div class="chat_label">
  757. <strong>{Label}</strong>
  758. </div>
  759. {/block:Label}
  760. <div class="chat_line">
  761. {Line}
  762. </div>
  763. </li>
  764. {/block:Lines}
  765. </ul>
  766. {/block:Chat}
  767.  
  768. {block:Link}
  769. <!-------------- LINK POST -------------->
  770. <a href="{URL}" class="post_link">{Name}</a>
  771. {block:Description}<div class="link_desc"><br>{Description}</div>{/block:Description}
  772. {/block:Link}
  773.  
  774. {block:Caption}
  775. <!-------------- CAPTION -------------->
  776. <div class="caption">
  777. {Caption}
  778. </div>
  779. {/block:Caption}
  780. </div>
  781. <!-------------- POST END AKA LIKE & REBLOG -------------->
  782. <div class="post_end">
  783. <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a>
  784. <a href="{ReblogURL}" target="_blank" class="reblog_button">reblog</a>
  785. <!-- NOTES -->
  786. <a href="{Permalink}" class="note_count">
  787. {NoteCountWithLabel}
  788. </a>
  789. </div>
  790.  
  791. <!-------------- TAGS -------------->
  792. {block:HasTags}
  793. <div class="tags">
  794. {block:Tags}
  795. <a href="{TagURL}">#{Tag}</a><span class="comma">, </span>
  796. {/block:Tags}
  797. </div>
  798. {/block:HasTags}
  799.  
  800. </article>
  801. {block:PostNotes}
  802. <!-- LIST OF NOTES (user liked/reblogged this) -->
  803. <div id="note_list">{PostNotes}</div>
  804. {/block:PostNotes}
  805. {/block:Posts}
  806. {block:Pagination}
  807. <div id="mini_pagination" class="mini_pagination">
  808. {block:PreviousPage}<a href="{PreviousPage}" class="prev"><i data-feather="chevron-left"></i></a>{/block:PreviousPage}
  809. {block:JumpPagination length="5"}
  810. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  811. {block:JumpPage}<a href="{URL}" class="jump_page">{PageNumber}</a>{/block:JumpPage}
  812. {/block:JumpPagination}
  813. {block:NextPage}<a href="{NextPage}" class="next"><i data-feather="chevron-right"></i></a>{/block:NextPage}
  814. </div>
  815. {/block:Pagination}
  816. <!--- PAGINATION --->
  817. <nav id="nav">
  818. {block:Pagination}
  819. <div id="pagination">
  820. {block:JumpPagination length="5"}
  821. {block:JumpPage}
  822. <a href="{URL}" class="page_num">{PageNumber}</a>
  823. {/block:JumpPage}
  824. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  825. {/block:JumpPagination}
  826. </div>
  827. {/block:Pagination}
  828. </nav>
  829. </main>
  830.  
  831. <!-------------- NAVIGATION -------------->
  832. <nav id="links">
  833. <a href="/" class="home"><i data-feather="home"></i></a>
  834.  
  835. {block:AskEnabled}<a href="/ask" class="ask"><i data-feather="help-circle"></i></a>{/block:AskEnabled}
  836. {block:SubmissionsEnabled}<a href="/submit" class="submit_link"><i data-feather="mail"></i></a>{/block:SubmissionsEnabled}
  837. <a href="/archive" class="archive"><i data-feather="book"></i></a>
  838. <!-- DO NOT REMOVE THEME CREDITS -->
  839. <!-------------- CUSTOM LINKS -------------->
  840. {block:IfLink1}
  841. <a href="{text:URL 1}" class="link1"><i data-feather="{text:URL 1 Icon}"></i></a>
  842. {/block:IfLink1}
  843. {block:IfLink2}
  844. <a href="{text:URL 2}" class="link2"><i data-feather="{text:URL 2 Icon}"></i></a>
  845. {/block:IfLink2}
  846. {block:IfLink3}
  847. <a href="{text:URL 3}" class="link3"><i data-feather="{text:URL 3 Icon}"></i></a>
  848. {/block:IfLink3}
  849. <a href="https://fallingforthemes.tumblr.com" class="thememaker"><i data-feather="code"></i></a>
  850. </nav>
  851.  
  852. <!-------------- SIDEBAR -------------->
  853. <aside id="sidebar">
  854. <!-- ABOUT -->
  855. <img src="{image:About Image}" alt="{text:About Img Alt}">
  856. <a href="/"><header class="default_title title">{Title}</header></a>
  857. <!-------------- USER INPUT TITLE -------------->
  858. {block:IfCustomTitle}
  859. <a href="/"><header class="custom_title title">{text:Custom Title}</header></a>
  860. {/block:IfCustomTitle}
  861. <div id="desc" class="desc">
  862. {Description}
  863. </div>
  864. </aside>
  865.  
  866. <!-------------- SCRIPTS -------------->
  867. <script src="https://unpkg.com/@popperjs/core@2"></script>
  868. <script src="https://unpkg.com/tippy.js@6"></script>
  869. <script>
  870. tippy(".home",{
  871. content: 'Home',
  872. placement: 'bottom',
  873. animation: 'scale',
  874. });
  875. tippy(".ask",{
  876. content: 'Ask',
  877. placement: 'bottom',
  878. animation: 'scale',
  879. });
  880. tippy(".submit_link",{
  881. content: 'Submit',
  882. placement: 'bottom',
  883. animation: 'scale',
  884. });
  885. tippy(".archive",{
  886. content: 'Archive',
  887. placement: 'bottom',
  888. animation: 'scale',
  889. });
  890. tippy(".link1",{
  891. content: '{text:URL 1 Label}',
  892. placement: 'bottom',
  893. animation: 'scale',
  894. });
  895. tippy(".link2",{
  896. content: '{text:URL 2 Label}',
  897. placement: 'bottom',
  898. animation: 'scale',
  899. });
  900. tippy(".link3",{
  901. content: '{text:URL 3 Label}',
  902. placement: 'bottom',
  903. animation: 'scale',
  904. });
  905. tippy(".prev",{
  906. content: 'Prev',
  907. placement: 'bottom',
  908. animation: 'scale',
  909. });
  910. tippy(".next",{
  911. content: 'Next',
  912. placement: 'bottom',
  913. animation: 'scale',
  914. });
  915. tippy(".thememaker",{
  916. content: "thememaker",
  917. placement: 'bottom',
  918. animation: 'scale',
  919. });
  920. </script>
  921. <script>
  922. feather.replace()
  923. </script>
  924. <script>
  925. $('.controls-button').click(function(){
  926. $('body').toggleClass('controls-click');
  927. });
  928. $('.audio_post').hover(function() {
  929. $('.audio_info').toggleClass('hover');
  930. });
  931. </script>
  932. </body>
  933. </html>
Advertisement
Add Comment
Please, Sign In to add comment