API tools faq
paste
fallingforthemes

theme #8: summertime

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