fallingforthemes

theme #9: nevertheless

Jan 30th, 2022 (edited)
220
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 42.45 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. - theme #9: 'nevertheless' 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. - Annasthms for CSS Photosets
  15. - Glenthemes for NPF Post Support
  16. If you need any help, feel free to send me a message at fallingforthemes.tumblr.com/ask
  17. -->
  18. <head>
  19. <title>{Title}</title>
  20. <!---------------- META -------------->
  21. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  22.  
  23. <meta name="if:Custom Title" content="on"/>
  24. <meta name="if:Custom Font" content=""/>
  25. <meta name="if:Notes Hidden" content=""/>
  26. <meta name="if:Tags Hidden" content=""/>
  27. <meta name="if:Tags Hover" content="on"/>
  28. <meta name="if: Four Corners" content=""/>
  29.  
  30. <meta name="if:Link 1" content="on"/>
  31. <meta name="if:Link 2" content="on"/>
  32. <meta name="if:Link 3" content="on"/>
  33.  
  34. <meta name="image:About Image" content="">
  35. <meta name="color:Current Page Index" content="#ffcfd2">
  36. <meta name="color:Other Page Indices" content="#fde4cf">
  37. <meta name="color:Background" content="#ffffff">
  38.  
  39. <meta name="color:Pin" content="#f94144">
  40. <meta name="color:Post" content="#ffffff">
  41. <meta name="color:Post Font" content="#000000">
  42. <meta name="color:Post Link" content="#cb2f66">
  43. <meta name="color:Post Link Hover" content="#000000">
  44. <meta name="color:Section Borders" content="#000000">
  45. <meta name="color:Post Accent" content="#222222">
  46. <meta name="color:Drop Shadow" content="#888888">
  47.  
  48. <meta name="color:Sidebar Link Font" content="#000000">
  49. <meta name="color:Sidebar Link Hover" content="#fde4cf">
  50. <meta name="color:Sidebar Link Background" content="#ffcfd2">
  51. <meta name="color:Description Background" content="#ffffff">
  52. <meta name="color:Description Font" content="#000000">
  53.  
  54. <meta name="font:Body" content="sans-serif"/>
  55.  
  56. <meta name="text:Custom Title" content="" />
  57. <meta name="text:URL 1 Icon" content="link" />
  58. <meta name="text:URL 1 Label" content="Link 1" />
  59. <meta name="text:URL 1" content="" />
  60. <meta name="text:URL 2 Icon" content="link-2" />
  61. <meta name="text:URL 2 Label" content="Link 2" />
  62. <meta name="text:URL 2" content="" />
  63. <meta name="text:URL 3 Icon" content="external-link" />
  64. <meta name="text:URL 3 Label" content="Link 3" />
  65. <meta name="text:URL 3" content="" />
  66. <meta name="text:About Image Alt" content="" />
  67.  
  68. <meta name="select:Text Size" content="10px"/>
  69. <meta name="select:Text Size" content="11px"/>
  70. <meta name="select:Text Size" content="12px"/>
  71. <meta name="select:Text Size" content="13px"/>
  72. <meta name="select:Text Size" content="14px"/>
  73. <meta name="select:Text Size" content="15px"/>
  74. <meta name="select:Text Size" content="16px"/>
  75. <meta name="select:Text Size" content="17px"/>
  76. <meta name="select:Text Size" content="18px"/>
  77.  
  78. <meta name="select:Post Size" content="540px"/>
  79. <meta name="select:Post Size" content="600px"/>
  80. <meta name="select:Post Size" content="650px"/>
  81. <meta name="select:Post Size" content="700px"/>
  82.  
  83. <meta name="select:Font" content="Lato"/>
  84. <meta name="select:Font" content="Poppins"/>
  85.  
  86. <meta name="select:Photoset Gap Spacing" content="0px"/>
  87. <meta name="select:Photoset Gap Spacing" content="1px"/>
  88. <meta name="select:Photoset Gap Spacing" content="2px"/>
  89. <meta name="select:Photoset Gap Spacing" content="3px"/>
  90. <meta name="select:Photoset Gap Spacing" content="4px"/>
  91. <meta name="select:Photoset Gap Spacing" content="5px"/>
  92. <meta name="select:Photoset Gap Spacing" content="6px"/>
  93. <meta name="select:Photoset Gap Spacing" content="7px"/>
  94. <meta name="select:Photoset Gap Spacing" content="8px"/>
  95. <meta name="select:Photoset Gap Spacing" content="9px"/>
  96. <meta name="select:Photoset Gap Spacing" content="10px"/>
  97.  
  98. <!---------------- FEATHER ICONS -------------->
  99. <script src="https://unpkg.com/feather-icons"></script>
  100. <!---------------- FONT (POPPINS + LATO) ---------------->
  101. <link rel="preconnect" href="https://fonts.googleapis.com">
  102. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  103. <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Poppins:wght@200&display=swap" rel="stylesheet">
  104. <!---------------- TOOLTIPS SCALE ANIMATION -------------->
  105. <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css"/>
  106. <!---------------- JQUERY -------------->
  107. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  108. <!---------------- NO.JS Photosets ---------------->
  109. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  110.  
  111. <!--
  112. NPF images fix v3.0 by @glenthemes [2021]
  113. 💌 git.io/JRBt7
  114. --->
  115. <script src="//npf-images-v3.github.io/script.js"></script>
  116. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  117. <style tmblr-npf>
  118. :root {
  119. --NPF-Caption-Spacing:1em;
  120. --NPF-Image-Spacing:4px;
  121. }
  122. </style>
  123.  
  124.  
  125. <style type="text/css">
  126. /*********** GENERAL: BODY, IMGS, LISTS ************/
  127. * {
  128. margin: 0;
  129. padding: 0;
  130. box-sizing: border-box;
  131. }
  132.  
  133. body {
  134. word-wrap: break-word;
  135. font-family: {font:Body}, sans-serif;
  136. font-size: {select:Text Size};
  137. letter-spacing: 0.05em;
  138. background-color: {color:Background};
  139. }
  140.  
  141. {block:IfCustomFont}
  142. body {
  143. font-family: {select:Font}, sans-serif;
  144. }
  145. {/block:IfCustomFont}
  146.  
  147. img {
  148. border: 0; /*Precaution for IE*/
  149. max-width: 100%; /*Prevent imgs from spilling over*/
  150. width: 100%; /*For Google Chrome*/
  151. }
  152.  
  153. ol, ul {
  154. padding: 0 35px;
  155. }
  156.  
  157. ul {
  158. list-style-type: square;
  159. }
  160.  
  161. input {
  162. outline: none;
  163. }
  164.  
  165. input:focus {
  166. outline: solid;
  167. }
  168.  
  169. a {
  170. text-decoration: none;
  171. }
  172.  
  173. #sidebar, #content {
  174. border: 5px solid {color:Section Borders};
  175. border-radius: 5px;
  176. box-shadow: 1em 1em 1em {color:Drop Shadow};
  177. position: fixed;
  178. overflow: scroll;
  179. }
  180.  
  181. .user, .close {
  182. display: none;
  183. z-index: 2;
  184. }
  185.  
  186. /**** TUMBLR CONTROL SETTINGS ****/
  187. .controls-button svg {
  188. cursor: help;
  189. color: {color:Sidebar Link Font};
  190. }
  191.  
  192. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  193. z-index: 999999999!important;
  194. margin-top: 1.5em;
  195. opacity: 0;
  196. visibility: hidden;
  197. -webkit-transition: all 0.5s;
  198. -moz-transition: all 0.5s;
  199. -ms-transition: all 0.5s;
  200. -o-transition: all 0.5s;
  201. transition: all 0.5s;
  202. }
  203.  
  204. body.controls-click .tmblr-iframe {
  205. opacity: 1.0;
  206. visibility: visible;
  207. -webkit-transition: all 0.5s;
  208. -moz-transition: all 0.5s;
  209. -ms-transition: all 0.5s;
  210. -o-transition: all 0.5s;
  211. transition: all 0.5s;
  212. }
  213.  
  214. /**** GENERAL TITLES ****/
  215. .title, .post_title {
  216. font-weight: bold;
  217. }
  218.  
  219.  
  220. /*********** SIDEBAR/HEADER ************/
  221. #sidebar {
  222. height: 22em;
  223. width: 17em;
  224. left: 14%;
  225. bottom: 4%;
  226. background-color: {color:Description Background};
  227. color: {color:Description Font};
  228. text-align: justify;
  229. padding: 1em;
  230. line-height: 2em;
  231. }
  232.  
  233. #sidebar .title {
  234. text-align: center;
  235. color: {color:Description Font};
  236. }
  237.  
  238. {block:IfCustomTitle}
  239. #sidebar .default_title {
  240. display: none;
  241. }
  242. {/block:IfCustomTitle}
  243.  
  244. #sidebar img {
  245. display: block;
  246. width: 5em;
  247. height: 5em;
  248. margin: 0 auto;
  249. border-radius: 100%;
  250.  
  251. }
  252.  
  253. /*SIDEBAR NAVIGATION*/
  254. .user, .controls-button, .close {
  255. padding: 7px 10px;
  256. border-radius: 100%;
  257. position: relative;
  258. }
  259.  
  260. .controls-button {
  261. float: right;
  262. }
  263.  
  264. .links {
  265. position: absolute;
  266. }
  267.  
  268. .links a {
  269. border: 3px solid {color:Section Borders};
  270. border-radius: 100%;
  271. padding: 0.5em;
  272. line-height: 13px;
  273. display: inline-block;
  274. color: {color:Sidebar Link Font};
  275. background-color: {color:Sidebar Link Background};
  276. position: relative;
  277. }
  278.  
  279. .links a:hover {
  280. background-color: {color:Sidebar Link Hover};
  281. }
  282.  
  283. #links_1 {
  284. left: 12em;
  285. top: 16em;
  286. }
  287.  
  288. #links_1 a:nth-child(2){
  289. top: 60px;
  290. right: 60px;
  291. }
  292.  
  293. #links_1 a:nth-child(3) {
  294. top: 33px;
  295. right: 37px;
  296. }
  297.  
  298. #links_1 a:last-child {
  299. bottom: 25px;
  300. right: 65px;
  301. }
  302.  
  303. #links_2 {
  304. right: 3em;
  305. bottom: 6em;
  306. }
  307.  
  308. #links_2 a:first-child {
  309. left: 68px;
  310. bottom: 40px;
  311. }
  312.  
  313. #links_2 a:nth-child(2){
  314. right: 20px;
  315. }
  316.  
  317. #links_2 a:nth-child(3) {
  318. left: 20px;
  319. }
  320.  
  321. #links_2 a:last-child {
  322. right: 67px;
  323. top: 40px;
  324. }
  325.  
  326. .link1, .link2, .link3 {
  327. visibility: hidden;
  328. }
  329.  
  330. {block:IfLink1}
  331. .link1 {
  332. visibility: visible;
  333. }
  334. {/block:IfLink1}
  335.  
  336. {block:IfLink2}
  337. .link2 {
  338. visibility: visible;
  339. }
  340. {/block:IfLink2}
  341.  
  342. {block:IfLink3}
  343. .link3 {
  344. visibility: visible;
  345. }
  346. {/block:IfLink3}
  347.  
  348. /*********** ABOUT ************/
  349. #desc a, .post_content caption a {
  350. text-decoration: underline;
  351. }
  352.  
  353. #nav {
  354. text-align: center;
  355. }
  356.  
  357. #pagination {
  358. z-index: 2;
  359. padding: 10px 10px 20px 10px;
  360. border-radius: 5px;
  361. }
  362.  
  363. #pagination a {
  364. color: {color:Post Font};
  365. }
  366.  
  367. .current_page, .page_num, .jump_page, .prev, .next {
  368. padding: 7px 12px;
  369. margin: 0 10px;
  370. border-radius: 5px;
  371. background-color: {color:Other Page Indices};
  372. }
  373.  
  374. .current_page {
  375. background-color: {color:Current Page Index};
  376. }
  377.  
  378. /*********** CONTENT ************/
  379. #content {
  380. width: 70%;
  381. height: 75%;
  382. right: 3em;
  383. top: 3em;
  384. }
  385.  
  386. /*********** POSTS ************/
  387. .note_count{
  388. float: right;
  389. }
  390.  
  391. .date {
  392. position: relative;
  393. left: calc({select:Post Size} - 50px);
  394. }
  395.  
  396. {block:IfNotesHidden}
  397. .note_count {
  398. display: none;
  399. }
  400. {/block:IfNotesHidden}
  401.  
  402. /*GENERAL POST*/
  403. .pin {
  404. display: none;
  405. }
  406.  
  407. .pinned .pin {
  408. display: block;
  409. text-align: center;
  410. color: {color:Pin};
  411. }
  412.  
  413. .posts {
  414. width: {select:Post Size};
  415. break-inside: avoid;
  416. margin: 0 auto 1.5em;
  417. }
  418.  
  419. .posts:first-child {
  420. margin-top: 1.5em;
  421. }
  422.  
  423. .post_content {
  424. position: relative;
  425. padding: 1.5em;
  426. margin: 5px 0 5px;
  427. background-color: {color:Post};
  428. color: {color:Post Font};
  429. }
  430.  
  431. .post_content:before, .post_content>:first-child:before {
  432. position: absolute;
  433. content: ' ';
  434. border-style: solid;
  435. border-color: {color:Post Accent};
  436. width: 30px;
  437. height: 30px;
  438. }
  439.  
  440. .post_content:before {
  441. top: 0;
  442. left: 0;
  443. border-width: 3px 0 0 3px;
  444. }
  445.  
  446. .post_content>:first-child:before {
  447. bottom: 0;
  448. right: 0;
  449. border-width: 0 3px 3px 0
  450. }
  451.  
  452. {block:IfFourCorners}
  453. .post_content:after, .post_content>:first-child:after {
  454. position: absolute;
  455. content: ' ';
  456. border-style: solid;
  457. border-color: {color:Post Accent};
  458. width: 30px;
  459. height: 30px;
  460. }
  461.  
  462. .post_content:after {
  463. top: 0;
  464. right: 0;
  465. border-width: 3px 3px 0 0;
  466. }
  467.  
  468. .post_content>:first-child:after {
  469. bottom: 0;
  470. left: 0;
  471. border-width: 0 0 3px 3px
  472. }
  473. {/block:IfFourCorners}
  474.  
  475. .posts a, #note_list a {
  476. color: {color:Post Link};
  477. }
  478.  
  479. .posts a:hover, #note_list a:hover {
  480. color: {color:Post Link Hover};
  481. }
  482.  
  483. /* POST ICON */
  484. .reblog-icon img {
  485. width: 40px;
  486. height: 40px;
  487. border-radius: 40%;
  488. position: absolute;
  489. left: -50px;
  490. top: 5px;
  491. }
  492.  
  493. .reblog-header {
  494. margin-top: 5px;
  495. }
  496.  
  497. /*TEXT POSTS*/
  498. .text_post .caption p:not(.reblog-list .caption p):not(blockquote .caption p){
  499. padding: 10px 0;
  500. }
  501.  
  502. .reblog-list .caption p {
  503. padding-bottom: 10px;
  504. }
  505.  
  506. /*CHAT POSTS*/
  507. .chat {
  508. list-style-type: none;
  509. }
  510.  
  511. .chat li:nth-child(even), .npf_chat:nth-child(even) {
  512. text-align: right;
  513. }
  514.  
  515. .chat li{
  516. padding-bottom: 5px;
  517. }
  518.  
  519. .npf_chat b:only-of-type {
  520. display: block;
  521. }
  522.  
  523. /*PHOTO POSTS*/
  524. .html_photoset iframe, .embed_iframe{
  525. width: 100%;
  526. }
  527.  
  528. .photo_post .caption {
  529. display: none;
  530. }
  531.  
  532. {block:PermalinkPage}
  533. .photo_post .caption {
  534. display: block;
  535. }
  536. {/block:PermalinkPage}
  537.  
  538. [photoset-layout] {
  539. grid-gap: {select:Photoset Gap Spacing};
  540. }
  541.  
  542. [photoset-layout] div {
  543. cursor: pointer;
  544. }
  545.  
  546. /*AUDIO POSTS*/
  547. .audio_post .caption {
  548. padding-bottom: 30px;
  549. }
  550.  
  551. .audio_container {
  552. text-align: center;
  553. }
  554.  
  555. .audio_name {
  556. font-weight: bold;
  557. }
  558.  
  559. .audio_image {
  560. height: 50%;
  561. width: 50%;
  562. margin: 0 auto;
  563. }
  564.  
  565. .audio_image img {
  566. border-radius: 5px;
  567. }
  568.  
  569. .audio_player_box {
  570. position: relative;
  571. top: 10em;
  572. }
  573.  
  574. .audio_player {
  575. width: 33px;
  576. height: 33px;
  577. overflow: hidden;
  578. margin: 0 auto;
  579. }
  580.  
  581. /*ASK POSTS*/
  582. .asker {
  583. font-size: 0.95em;
  584. font-family: 'Poppins', sans-serif;
  585. font-weight: bold;
  586. }
  587.  
  588. .answer {
  589. padding-top: 10px;
  590. text-align: right;
  591. }
  592.  
  593. /*QUOTE POSTS*/
  594. .quote {
  595. padding-top: 10px;
  596. }
  597.  
  598. .source {
  599. padding-left: 20px;
  600. }
  601.  
  602. /*CAPTIONS*/
  603. blockquote {
  604. padding: 10px 20px;
  605. border-left: 2px solid rgba(220,220,220,0.5);
  606. margin-top: 5px;
  607. }
  608.  
  609. .chat, .caption {
  610. padding-top: 10px;
  611. }
  612.  
  613. /***POST END***/
  614. .post_end a {
  615. color: {color:Post Link};
  616. }
  617.  
  618. .post_end a:hover {
  619. color: {color:Post Link Hover};
  620. }
  621.  
  622. /*LIKE/REBLOG STYLING*/
  623. .like-b {
  624. position:relative;
  625. overflow:hidden;
  626. margin-bottom:-1px;
  627. padding-right: 10px;
  628. }
  629.  
  630. .like-b .like_button iframe {
  631. position:absolute;
  632. top:0;
  633. left:0;
  634. bottom:0;
  635. right:0;
  636. z-index:2;
  637. opacity:0;
  638. }
  639.  
  640. .like-b .liked + .b {
  641. color:inherit;
  642. }
  643.  
  644. .like-b .liked + .b:after {
  645. content:'d';
  646. }
  647.  
  648. /*TAG STYLING*/
  649. .posts .tags .comma {
  650. color: {color:Post};
  651. }
  652.  
  653. .posts .tags .comma:last-child, .posts .tags .comma:last-child {
  654. display: none;
  655. }
  656.  
  657. {block:IfTagsHidden}
  658. .posts .tags {
  659. display: none;
  660. }
  661. {block:IfTagsHidden}
  662.  
  663. {block:IfTagsHover}
  664. .posts .tags {
  665. display: none;
  666. }
  667. {block:IfTagsHover}
  668.  
  669. /*** LIST OF NOTES ***/
  670. #note_list {
  671. margin: 0 auto;
  672. width: {select:Post Size};
  673. font-size: {select:Text Size};
  674. border: 2px solid {color:Post Accent};
  675. border-radius: 5px;
  676. padding: 10px 20px;
  677. break-inside: avoid;
  678. }
  679.  
  680. #note_list a:first-child {
  681. margin-left: 5px;
  682. }
  683.  
  684. #note_list ol.notes {
  685. list-style-type: none;
  686. margin: 0;
  687. padding: 0;
  688. }
  689.  
  690. #note_list img.avatar {
  691. margin-right: 10px;
  692. width: 16px;
  693. height: 16px;
  694. }
  695.  
  696. /**********RESPONSIVE STYLING************/
  697. #mini_pagination {
  698. display: none;
  699. }
  700.  
  701. @media only screen and (max-height: 600px) {
  702. #links_1 {
  703. top: 7em;
  704. }
  705. }
  706.  
  707. @media only screen and (max-width: 912px) {
  708. #links_1 {
  709. left: 6em;
  710. }
  711.  
  712. .posts {
  713. width: 80%;
  714. }
  715.  
  716. .date {
  717. left: calc(80% + 50px);
  718. }
  719. }
  720.  
  721. @media only screen and (max-width: 795px) {
  722. .controls-button {
  723. display: none;
  724. }
  725.  
  726. .tmblr-iframe.iframe-controls--phone-mobile {
  727. display: none !important;
  728. }
  729.  
  730. .tmblr-iframe-pushdown {
  731. padding-top: 0 !important;
  732. }
  733.  
  734. .user {
  735. display: inline-block;
  736. }
  737.  
  738. #sidebar, #content {
  739. box-shadow: 0 0 0;
  740. border: 0;
  741. width: 100%;
  742. }
  743.  
  744. #content {
  745. top: 4em;
  746. right: 0;
  747. height: calc(100% - 13em);
  748. position: relative;
  749. }
  750.  
  751. #sidebar {
  752. width: 100%;
  753. height: fit-content;
  754. max-height: 50vh;
  755. top: 0;
  756. left: 0;
  757. bottom: 0;
  758. padding: 2em;
  759. overflow: scroll;
  760. position: absolute;
  761. display: none;
  762. }
  763.  
  764. #pagination {
  765. left: calc((100% - 178px)/2);
  766. }
  767.  
  768. .posts {
  769. margin: 0 0 1.5em 4em;
  770. }
  771.  
  772. .date {
  773. left: calc(80% - 50px + 4em);
  774. }
  775.  
  776. .links {
  777. position: absolute;
  778. }
  779.  
  780. .links a{
  781. position: relative;
  782. border-radius: 0%;
  783. border-right: 0;
  784. }
  785.  
  786. #links_1, #links_2 {
  787. top: 4em;
  788. right: 0 !important;
  789. bottom: 0 !important;
  790. }
  791.  
  792. #links_1 {
  793. display: inline-block;
  794. left: calc((100% - 339px)/2);
  795. }
  796.  
  797. #links_2 {
  798. display: inline;
  799. left: calc((100% - 3px)/2);
  800. }
  801.  
  802. #links_1 a, #links_2 a {
  803. top: 0 !important;
  804. left: 0 !important;
  805. right: 0 !important;
  806. bottom: 0 !important;
  807. }
  808.  
  809. #links_1 a:first-child {
  810. border-radius: 5px 0 0 5px;
  811. }
  812.  
  813. #links_2 a:last-child {
  814. border-radius: 0 5px 5px 0;
  815. border-right: 3px solid {color:Section Borders};
  816. }
  817. }
  818.  
  819. @media only screen and (min-width: 540px) {
  820. .posts {
  821. margin: 0 auto 1.5em;
  822. }
  823. }
  824.  
  825. @media only screen and (max-width: 280px) {
  826. .reblog-icon {
  827. display: none;
  828. }
  829.  
  830. .posts {
  831. margin: 0 auto;
  832. }
  833.  
  834. #links_1, #links_2 {
  835. left: calc((100% - 171px)/2);
  836. }
  837.  
  838. #links_1 {
  839. top: 2em;
  840. }
  841.  
  842. #links_2 {
  843. top: calc(2em + 50px);
  844. }
  845.  
  846. #links_1 a:first-child,#links_2 a:first-child {
  847. border-radius: 5px 0 0 5px;
  848. }
  849.  
  850. #links_2 a:last-child, #links_1 a:last-child {
  851. border-radius: 0 5px 5px 0;
  852. border-right: 3px solid {color:Section Borders};
  853. }
  854.  
  855. #content {
  856. top: 5em;
  857. }
  858. }
  859.  
  860. {CustomCSS}
  861. </style>
  862. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  863. </head>
  864.  
  865. <body>
  866. <!-------------- TUMBLR CONTROLS BUTTON -------------->
  867. <div class="user"><i data-feather="user"></i></div>
  868. <div class="close"><i data-feather="x"></i></div>
  869. <a class="controls-button"><i data-feather="settings"></i></a>
  870.  
  871. <!-------------- MAIN CONTENT -------------->
  872. <main id="content">
  873. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  874. <!-------------- POSTS -------------->
  875. <article class="{PostType}_post posts {block:PinnedPostLabel}pinned{/block:PinnedPostLabel}" post-type="{PostType}" id="{PostID}">
  876. <!-------------- DATE -------------->
  877. <span class="pin">PINNED</span>
  878. <a href="{Permalink}" class="date">
  879. {block:Date}{ShortMonth} {DayOfMonth}{/block:Date}
  880. </a>
  881. <div class="post_content">
  882. <!-------------- POST START -------------->
  883. <div class="post_start">
  884. <!--------- POST ICON ---------->
  885. <!---- ORIGINAL ---->
  886. <div class="reblog-icon">
  887. <a target="_blank" class="original" href="/"><img src="{PortraitURL-40}"></a>
  888. </div>
  889. {block:RebloggedFrom}
  890. {block:Reblogs}
  891. <!---- REBLOGGED ---->
  892. <div class="reblog-icon">
  893. {block:IsActive}
  894. <a target="_blank" class="active reblogged_from" href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-40}"></a>
  895. {/block:IsActive}
  896. {block:IsDeactivated}
  897. <span class="inactive reblogged_from"><img src="{ReblogParentPortraitURL-40}"></span>
  898. {/block:IsDeactivated}
  899. </div>
  900. {/block:Reblogs}
  901. {/block:RebloggedFrom}
  902. </div>
  903.  
  904. {block:Title}
  905. <!-------------- POST TITLE -------------->
  906. <div class="post_title">{Title}</div>
  907. {/block:Title}
  908.  
  909. {block:Photo}
  910. <!-------------- PHOTO POST -------------->
  911. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
  912. {/block:Photo}
  913.  
  914. {block:Photoset}
  915. <!-------------- PHOTOSET POST -------------->
  916. <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>
  917. {/block:Photoset}
  918.  
  919. {block:Panorama}
  920. <!-------------- PANORAMA POST -------------->
  921. <img src="{PhotoUrl-Panorama}" alt="{PhotoAlt}">
  922. {/block:Panorama}
  923.  
  924. {block:Video}
  925. <!-------------- VIDEO POST -------------->
  926. {Video-500}
  927. {/block:Video}
  928.  
  929. {block:Audio}
  930. <!-------------- ADUIO POST -------------->
  931. <div class="audio_container" alt="Album art for {block:TrackName}{Trackname}{/block:TrackName}">
  932. <div class="audio_image">
  933. {block:AudioPlayer}
  934. <div class="audio_player_box">
  935. {AudioPlayer}
  936. </div>
  937. {/block:AudioPlayer}
  938. {block:AlbumArt}
  939. <img src="{AlbumArtURL}" alt="{block:TrackName}
  940. {TrackName}
  941. {/block:TrackName}">
  942. {/block:AlbumArt}
  943. </div>
  944. <div class="audio_info">
  945. {block:Album}
  946. <div class="audio_album">
  947. {Album}
  948. </div>
  949. {/block:Album}
  950.  
  951. {block:TrackName}
  952. <div class="audio_name">
  953. {TrackName}
  954. </div>
  955. {/block:TrackName}
  956.  
  957. {block:Artist}
  958. <div class="audio_artist">
  959. {Artist}
  960. </div>
  961. {/block:Artist}
  962. </div>
  963. </div>
  964. {/block:Audio}
  965.  
  966. {block:Quote}
  967. <!-------------- QUOTE POST -------------->
  968. <div class="quote">"{Quote}"</div>
  969. {block:Source}<div class="source"><br>&mdash; {Source}</div>{/block:Source}
  970. {/block:Quote}
  971.  
  972. {block:Text}
  973. <!-------------- TEXT POST -------------->
  974. {block:NotReblog}
  975. <!-------------- ORIGINAL POST/NOT REBLOGGED -------------->
  976. <div class="caption">{Body}</div>
  977. {/block:NotReblog}
  978.  
  979. {block:RebloggedFrom}
  980. <!-------------- REBLOGGED POST -------------->
  981. <div class="reblog-list">
  982. {block:Reblogs}
  983. <div class="reblog-item">
  984. <div class="reblog-header">
  985. {block:IsActive}
  986. <a target="_blank" class="active reblogged_from" href="{Permalink}">{Username}</a>
  987. {/block:IsActive}
  988. {block:IsDeactivated}
  989. <span class="inactive reblogged_from">{Username}</span>
  990. {/block:IsDeactivated}
  991. </div>
  992.  
  993. <div class="post-reblog-content">
  994. <div class="caption">{Body}</div>
  995. </div>
  996. </div>
  997. {/block:Reblogs}
  998. </div>
  999. {/block:RebloggedFrom}
  1000. {/block:Text}
  1001.  
  1002. {block:Answer}
  1003. <!-------------- ASK POST -------------->
  1004. <div class="asking">
  1005. <div class="asker">{Asker} asked:</div>
  1006. <div class="question">{Question}</div>
  1007. </div>
  1008.  
  1009. <div class="answering">
  1010. {block:Answerer}
  1011. <div class="answerer">{Answerer}</div>
  1012. {/block:Answerer}
  1013. <div class="answer">{Answer}</div>
  1014. </div>
  1015. {/block:Answer}
  1016.  
  1017. {block:Chat}
  1018. <!-------------- CHAT POST -------------->
  1019. <ul class="chat">
  1020. {block:Lines}
  1021. <li>
  1022. {block:Label}
  1023. <div class="chat_label">
  1024. <strong>{Label}</strong>
  1025. </div>
  1026. {/block:Label}
  1027. <div class="chat_line">
  1028. {Line}
  1029. </div>
  1030. </li>
  1031. {/block:Lines}
  1032. </ul>
  1033. {/block:Chat}
  1034.  
  1035. {block:Link}
  1036. <!-------------- LINK POST -------------->
  1037. <a href="{URL}" class="post_link">{Name}</a>
  1038. {block:Description}<div class="link_desc"><br>{Description}</div>{/block:Description}
  1039. {/block:Link}
  1040.  
  1041. {block:Caption}
  1042. <!-------------- CAPTION -------------->
  1043. <div class="caption">
  1044. {Caption}
  1045. </div>
  1046. {/block:Caption}
  1047. </div>
  1048. <!-------------- POST END AKA LIKE & REBLOG -------------->
  1049. {block:Date}
  1050. <div class="post_end">
  1051. <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a>
  1052. <a href="{ReblogURL}" target="_blank" class="reblog_button">reblog</a>
  1053. <!-- NOTES -->
  1054. <a href="{Permalink}" class="note_count">
  1055. {NoteCountWithLabel}
  1056. </a>
  1057. </div>
  1058.  
  1059. <!-------------- TAGS -------------->
  1060. {block:HasTags}
  1061. <div class="tags">
  1062. {block:Tags}
  1063. <a href="{TagURL}">#{Tag}</a><span class="comma">, </span>
  1064. {/block:Tags}
  1065. </div>
  1066. {/block:HasTags}
  1067. {/block:Date}
  1068.  
  1069. </article>
  1070. {block:PostNotes}
  1071. <!-- LIST OF NOTES (user liked/reblogged this) -->
  1072. <div id="note_list">{PostNotes}</div>
  1073. {/block:PostNotes}
  1074. {/block:Posts}
  1075. <!--- PAGINATION --->
  1076. <nav id="nav">
  1077. {block:Pagination}
  1078. <div id="pagination">
  1079. {block:JumpPagination length="5"}
  1080. {block:JumpPage}
  1081. <a href="{URL}" class="page_num">{PageNumber}</a>
  1082. {/block:JumpPage}
  1083. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  1084. {/block:JumpPagination}
  1085. </div>
  1086. {/block:Pagination}
  1087. </nav>
  1088. </main>
  1089.  
  1090. <!-------------- NAVIGATION -------------->
  1091. <nav id="links_1" class="links">
  1092. <!-- DO NOT REMOVE THEME CREDITS -->
  1093. <!-------------- CUSTOM LINKS -------------->
  1094. <a href="/" class="home"><i data-feather="home"></i></a>
  1095. <a href="{block:AskEnabled}/ask{/block:AskEnabled}" class="ask"><i data-feather="help-circle"></i></a>
  1096. <a href="{block:SubmissionsEnabled}/submit{/block:SubmissionsEnabled}" class="submit_link"><i data-feather="mail"></i></a>
  1097. <a href="/archive" class="archive"><i data-feather="book"></i></a>
  1098. </nav>
  1099.  
  1100. <nav id="links_2" class="links">
  1101. <!-- DO NOT REMOVE THEME CREDITS -->
  1102. <!-------------- CUSTOM LINKS -------------->
  1103. <a href="{text:URL 1}" class="link1"><i data-feather="{text:URL 1 Icon}"></i></a>
  1104. <a href="{text:URL 2}" class="link2"><i data-feather="{text:URL 2 Icon}"></i></a>
  1105. <a href="{text:URL 3}" class="link3"><i data-feather="{text:URL 3 Icon}"></i></a>
  1106. <a href="https://fallingforthemes.tumblr.com" class="thememaker"><i data-feather="code"></i></a>
  1107. </nav>
  1108.  
  1109. <!-------------- SIDEBAR -------------->
  1110. <aside id="sidebar">
  1111. <img src="{image:About Image}" class="siderbar_icon"/>
  1112. <a href="/"><header class="default_title title">{Title}</header></a>
  1113. <!-------------- USER INPUT TITLE -------------->
  1114. {block:IfCustomTitle}
  1115. <a href="/"><header class="custom_title title">{text:Custom Title}</header></a>
  1116. {/block:IfCustomTitle}
  1117. <div id="desc" class="desc">
  1118. {Description}
  1119. </div>
  1120. </aside>
  1121.  
  1122. <!-------------- SCRIPTS -------------->
  1123. <script src="https://unpkg.com/@popperjs/core@2"></script>
  1124. <script src="https://unpkg.com/tippy.js@6"></script>
  1125. <script>
  1126. tippy(".home",{
  1127. content: 'Home',
  1128. placement: 'bottom',
  1129. animation: 'scale',
  1130. });
  1131. tippy(".ask",{
  1132. content: 'Ask',
  1133. placement: 'bottom',
  1134. animation: 'scale',
  1135. });
  1136. tippy(".submit_link",{
  1137. content: 'Submit',
  1138. placement: 'bottom',
  1139. animation: 'scale',
  1140. });
  1141. tippy(".archive",{
  1142. content: 'Archive',
  1143. placement: 'bottom',
  1144. animation: 'scale',
  1145. });
  1146. tippy(".link1",{
  1147. content: '{text:URL 1 Label}',
  1148. placement: 'bottom',
  1149. animation: 'scale',
  1150. });
  1151. tippy(".link2",{
  1152. content: '{text:URL 2 Label}',
  1153. placement: 'bottom',
  1154. animation: 'scale',
  1155. });
  1156. tippy(".link3",{
  1157. content: '{text:URL 3 Label}',
  1158. placement: 'bottom',
  1159. animation: 'scale',
  1160. });
  1161. tippy(".prev",{
  1162. content: 'Prev',
  1163. placement: 'bottom',
  1164. animation: 'scale',
  1165. });
  1166. tippy(".next",{
  1167. content: 'Next',
  1168. placement: 'bottom',
  1169. animation: 'scale',
  1170. });
  1171. tippy(".thememaker",{
  1172. content: "thememaker",
  1173. placement: 'bottom',
  1174. animation: 'scale',
  1175. });
  1176. </script>
  1177.  
  1178. <script>
  1179. feather.replace()
  1180. </script>
  1181.  
  1182. <script>
  1183. $('.controls-button').click(function(){
  1184. $('body').toggleClass('controls-click');
  1185. });
  1186. $('.user').click(function(){
  1187. $('#sidebar').toggle();
  1188. $('.user').css('display', 'none');
  1189. $('.close').css('display', 'inline-block');
  1190. });
  1191. $('.close').click(function(){
  1192. $('#sidebar').toggle();
  1193. $('.close').css('display', 'none');
  1194. $('.user').css('display', 'inline-block');
  1195. });
  1196. {block:IfTagsHover}
  1197. $('.posts').hover(function(){
  1198. let str = "#" + this.id + " .tags";
  1199. $(str).toggle("300");
  1200. });
  1201.  
  1202. {/block:IfTagsHover}
  1203. </script>
  1204.  
  1205. <script>
  1206. function gatherData(images, arr) {
  1207. for (let i = 0; i < images.length; i++) {
  1208. let currentData = {
  1209. "width": images[i].getAttribute('data-width'),
  1210. "height": images[i].getAttribute('data-height'),
  1211. "low_res": images[i].getAttribute('data-lowres'),
  1212. "high_res": images[i].getAttribute('data-highres')
  1213. };
  1214. arr.push(currentData);
  1215. }
  1216. }
  1217. function getIndex(elem) {
  1218. let i = 0;
  1219. while( (elem = elem.previousElementSibling) != null ) i++;
  1220. return i;
  1221. }
  1222. function lightbox(elem) {
  1223. let currentPhotoset = elem.parentNode;
  1224. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1225. let data = [];
  1226. gatherData(photosetPhotos, data);
  1227. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1228. }
  1229. </script>
  1230. </body>
  1231. </html>
Add Comment
Please, Sign In to add comment