fallingforthemes

theme #10: meadowsweet

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