fallingforthemes

theme #7: winter solstice

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