Advertisement
likesmagic

supernatural by @gloriapritchetts

Jun 5th, 2024
563
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.11 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  5.  
  6. <!--
  7. NPF images fix v3.0 by @glenthemes [2021]
  8. 💌 git.io/JRBt7
  9. --->
  10. <script src="//npf-images-v3.github.io/script.js"></script>
  11. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  12. <style tmblr-npf>
  13. :root {
  14. --NPF-Caption-Spacing:1em;
  15. --NPF-Image-Spacing:4px;
  16. }
  17. </style>
  18. <script src="https://unpkg.com/phosphor-icons"></script>
  19. <link rel="preconnect" href="https://fonts.googleapis.com">
  20. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  21. <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Varela+Round&display=swap" rel="stylesheet">
  22. <script src="//pull.cappuccicons.com/cpf.js"></script>
  23. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  24. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  25.  
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  29. <meta charset="utf-8">
  30. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  31.  
  32. <!---
  33.  
  34. ♡ CODE BY GLORIAPRITCHETTS ♡
  35.  
  36. 👎 PLZ DO NOT ↴
  37. — steal or copy it into other codes
  38. — claim as your own
  39. — remove or change the credit
  40.  
  41. 👍 PLZ DO ↴
  42. — edit for your own personal use
  43. — message me for help
  44. — like or reblog the original post
  45.  
  46. ⭐️ CREDITS ↴
  47. — seyche.tumblr.com // base code
  48. — eossa.tumblr.com // tooltips
  49. — glenthemes.tumblr.com // npf posts fix
  50. — fonts.google.com // fonts
  51. — phosphoricons.com // font icons
  52. — cappuccicons.com // font icons
  53. — octomoosey.tumblr.com // tutorials
  54. — themehunter.tumblr.com // tutorials
  55. — w3schools.com // tutorials
  56. — codepen.io // tutorials
  57.  
  58. --->
  59.  
  60. <meta name="image:sidebar" content="https://placehold.co/250x330/EEE/31343C"/>
  61.  
  62. <meta name="color:background" content="#0f0f0f"/>
  63. <meta name="color:posts" content="#121212"/>
  64. <meta name="color:text" content="#fff"/>
  65. <meta name="color:accent" content="#df7331"/>
  66. <meta name="color:borders" content="#181818"/>
  67. <meta name="color:gradient 1" content="#b84600"/>
  68. <meta name="color:gradient 2" content="#f28949"/>
  69.  
  70. <meta name="select:border radius" content="0px"/>
  71. <meta name="select:border radius" content="5px"/>
  72. <meta name="select:border radius" content="10px"/>
  73.  
  74. <meta name="if:tags on hover" content=""/>
  75. <meta name="if:borders" content=""/>
  76.  
  77. <meta name="text:font" content="quicksand"/>
  78. <meta name="text:letter spacing" content="0.3px"/>
  79. <meta name="text:description" content="keep this at two lines or else it will look weird xd"/>
  80. <meta name="text:about" content="about"/>
  81. <meta name="text:giffing" content="content"/>
  82. <meta name="text:watching" content="watching"/>
  83. <meta name="text:playing" content="playing"/>
  84. <meta name="text:favorites" content="favorites"/>
  85.  
  86. <meta name="text:link 1 url" content="/"/>
  87. <meta name="text:link 1 title" content="gifs"/>
  88. <meta name="text:link 2 url" content="/"/>
  89. <meta name="text:link 2 title" content="about"/>
  90. <meta name="text:link 3 url" content="/"/>
  91. <meta name="text:link 3 title" content="links"/>
  92.  
  93. <!----- css ----->
  94.  
  95. <style type="text/css">
  96.  
  97. /*----- general -----*/
  98.  
  99. body {
  100. font-family: {text:font};
  101. font-size: 14.5px;
  102. color: {color:text};
  103. background-color: {color:background};
  104. line-height: 130%;
  105. word-wrap: break-word;
  106. letter-spacing: {text:letter spacing};
  107. margin: 0;
  108. padding: 0;
  109. }
  110.  
  111. a {
  112. color: {color:accent};
  113. font-weight:700;
  114. position: relative;
  115. text-decoration: none;
  116. -webkit-transition: all 0.3s ease;
  117. transition: all 0.3s ease;
  118. -moz-transition: all 0.3s ease;
  119. -o-transition: all 0.3s ease;
  120. }
  121.  
  122. a:hover {
  123. font-weight:700;
  124. text-decoration:underline;
  125. color:{color:gradient 2};
  126. -webkit-transition: all 0.3s ease;
  127. transition: all 0.3s ease;
  128. -moz-transition: all 0.3s ease;
  129. -o-transition: all 0.3s ease;
  130. }
  131.  
  132. blockquote {
  133. padding: 0 0 0 1.5em;
  134. border-left: 1px solid {color:borders};
  135. margin: 1.5em 0 1.5em 1.5em;
  136. }
  137.  
  138. h1.post-title {
  139. font-size:25px;
  140. color:{color:accent};
  141. text-align:left;
  142. }
  143.  
  144. h1 {
  145. font-size:23px;
  146. color:{color:accent};
  147. text-align:center;
  148. }
  149.  
  150. h2 {
  151. font-size:20px;
  152. color:{color:accent};
  153. text-align:center;
  154. }
  155.  
  156. bold, b, strong {
  157. font-weight:800;
  158. color:{color:accent};
  159. }
  160.  
  161. i, em, italic {
  162. color:{color:accent};
  163. }
  164.  
  165. ol { list-style-type:upper-roman; }
  166.  
  167. li { list-style-type:circle; }
  168.  
  169. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  170.  
  171. /*----- sidebar -----*/
  172.  
  173. #sidebar {
  174. width: 250px;
  175. position: fixed;
  176. top: 100px;
  177. text-align: center;
  178. background:{color:posts};
  179. padding:20px;
  180. border-radius:{select:border radius};
  181. {block:ifborders}
  182. border:1px solid {color:borders};
  183. {block:ifborders}
  184. height:485px;
  185. -webkit-transition: all 0.6s ease;
  186. transition: all 0.6s ease;
  187. -moz-transition: all 0.6s ease;
  188. -o-transition: all 0.6s ease;
  189. }
  190.  
  191. #side-img {
  192. margin-bottom: 1em;
  193. margin-top:0.8em;
  194. width:250px;
  195. height:330px;
  196. }
  197.  
  198. #side-img img {
  199. width:250px;
  200. height:330px;
  201. }
  202.  
  203. .title {
  204. font-weight:bold;
  205. font-size:23px;
  206. text-transform:justify;
  207. text-align:center;
  208. margin-top:-0.1em;
  209. color:{color:accent};
  210. }
  211.  
  212. .title2 {
  213. font-size:10px;
  214. text-transform:uppercase;
  215. text-align:center;
  216. letter-spacing:0.4em;
  217. }
  218.  
  219. .title2 i {
  220. font-size:8px;
  221. }
  222.  
  223. nav {
  224. margin-top: 1.2em;
  225. text-align:left;
  226. margin-left:-0.9em;
  227. width:350px;
  228. }
  229.  
  230. nav a {
  231. margin: auto 0.89em;
  232. font-weight:normal;
  233. color:{color:accent};
  234. -webkit-transition: all 0.3s ease;
  235. transition: all 0.3s ease;
  236. -moz-transition: all 0.3s ease;
  237. -o-transition: all 0.3s ease;
  238. }
  239.  
  240. nav i {
  241. font-size:20px;
  242. }
  243.  
  244. nav a:hover, nav i:hover {
  245. text-decoration:none;
  246. color:{color:gradient 2};
  247. -webkit-transition: all 0.3s ease;
  248. transition: all 0.3s ease;
  249. -moz-transition: all 0.3s ease;
  250. -o-transition: all 0.3s ease;
  251. }
  252.  
  253. #description {
  254. width:230px;
  255. max-height:50px;
  256. padding:10px;
  257. margin-top:0em;
  258. background:{color:background};
  259. border-radius:{select:border radius};
  260. }
  261.  
  262. #updates {
  263. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  264. border-radius:{select:border radius};
  265. opacity:1;
  266. width: 250px;
  267. height:430px;
  268. margin-left:-20px;
  269. top:-600px;
  270. overflow-y:scroll;
  271. overflow-x:hidden;
  272. position: absolute;
  273. text-align: left;
  274. padding:20px;
  275. border-top-left-radius:{select:border radius};
  276. border-top-right-radius:{select:border radius};
  277. border-bottom-left-radius:0px;
  278. border-bottom-right-radius:0px;
  279. z-index:99999999999;
  280. color:{color:posts};
  281. -webkit-transition: all 0.6s ease;
  282. transition: all 0.6s ease;
  283. -moz-transition: all 0.6s ease;
  284. -o-transition: all 0.6s ease;
  285. }
  286.  
  287. #sidebar:hover #updates {
  288. top:0px;
  289. -webkit-transition: all 0.6s ease;
  290. transition: all 0.6s ease;
  291. -moz-transition: all 0.6s ease;
  292. -o-transition: all 0.6s ease;
  293. }
  294.  
  295. #updates h1 {
  296. font-weight:bold;
  297. font-size:15px;
  298. text-transform:justify;
  299. text-align:left;
  300. background:{color:posts};
  301. padding:10px;
  302. border-radius:{select:border radius};
  303. color:{color:accent};
  304. }
  305.  
  306. /*----- posts -----*/
  307.  
  308. main {
  309. position: relative;
  310. width: calc(250px + 540px + 150px);
  311. margin: auto;
  312. }
  313.  
  314. section {
  315. position: relative;
  316. width: 540px;
  317. margin-left: 380px;
  318. }
  319.  
  320. article {
  321. width: 100%;
  322. position: relative;
  323. margin: 100px auto;
  324. background:{color:Posts};
  325. padding:20px;
  326. border-radius:{select:border radius};
  327. {block:ifborders}
  328. border:1px solid {color:borders};
  329. {block:ifborders}
  330. }
  331.  
  332. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe { max-width: 100%; }
  333.  
  334. .caption {
  335. margin-top: 2em;
  336. list-style-type: none;
  337. }
  338.  
  339. .text-caption:first-of-type { margin-top: 0; }
  340.  
  341. .user-icon, .ask-icon {
  342. display: inline-block;
  343. vertical-align: middle;
  344. width: 1em;
  345. height: 1em;
  346. margin-right: 0.5em;
  347. border-radius:100%;
  348. border:3px solid {color:accent};
  349. }
  350.  
  351. .username {
  352. display: inline-block;
  353. vertical-align: middle;
  354. font-weight: bold;
  355. color:{color:accent};
  356. text-decoration:none;
  357. }
  358.  
  359. .username a {
  360. font-weight: bold;
  361. color:{color:accent};
  362. text-decoration:none;
  363. }
  364.  
  365. .deactive::after {
  366. content: '(deactivated)';
  367. margin-left: 1em;
  368. opacity: 0.75;
  369. color: {color:accent};
  370. }
  371.  
  372. .username a:hover {
  373. color:{color:gradient 2};
  374. }
  375.  
  376. p.tmblr-attribution {margin-top: 1em !important;}
  377.  
  378. a.link-wrap {
  379. display: block;
  380. border: 1px solid {color:borders};
  381. }
  382.  
  383. .link { padding: 2em; }
  384.  
  385. .link-host, .link-txt { margin-top: 1.5em; }
  386.  
  387. .npf-link-block {
  388. margin-top: 1.5em;
  389. background-color: inherit;
  390. border: 1px solid inherit;
  391. color: inherit;
  392. }
  393.  
  394. img {
  395. margin: 0;
  396. display: block;
  397. height: auto;
  398. max-width: 100%;
  399. }
  400.  
  401. .photo img {width: 100%;}
  402. .vignette, #vignette {opacity: 0;}
  403. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  404.  
  405. .lightbox-image, #tumblr_lightbox img {
  406. box-shadow: none !important;
  407. border-radius: 0 !important;
  408. max-width: none;
  409. }
  410.  
  411. #tumblr_lightbox_caption, .lightbox-caption {
  412. color: #fff !important;
  413. font-family: inherit;
  414. margin-top: 1em !important;
  415. }
  416.  
  417. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  418. margin-left: 0 !important;
  419. margin-right: 0 !important;
  420. }
  421.  
  422. .quote { line-height: 160%; font-size: 1.25em; }
  423.  
  424. .quote p:first-of-type { margin-top: 0; }
  425. .quote p:last-of-type { margin-bottom: 0; }
  426.  
  427. .source { margin-top: 1.5em; }
  428.  
  429. .chat { padding: 0; margin: 0; }
  430. .chat li { list-style-type: none; margin-top: 1em; }
  431. .chat li:first-of-type { margin-top: 0; }
  432. .chatter { font-weight: bold; }
  433.  
  434. p.npf_chat, p.npf_chat b {font-family: inherit;}
  435.  
  436. /*----- asks -----*/
  437.  
  438. .ask-wrap {
  439. background:{color:background};
  440. padding:15px;
  441. border-radius:{select:border radius};
  442. text-align:center;
  443. border-bottom:4px solid {color:accent};
  444. }
  445.  
  446. .ask-wrap .asking {
  447. display: inline-block;
  448. margin-left: 0em;
  449. font-weight: bold;
  450. }
  451.  
  452. .question { margin-top: 0.5em; }
  453. .question p:first-of-type { margin-top: 0; }
  454. .question p:last-of-type { margin-bottom: 0; }
  455.  
  456. /*----- info -----*/
  457.  
  458. .info {
  459. height:21px;
  460. margin-top: 1em;
  461. padding:10px;
  462. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  463. border-radius:{select:border radius};
  464. }
  465.  
  466. .info a {
  467. display: inline-block;
  468. vertical-align: middle;
  469. text-transform:lowercase;
  470. font-weight:bold;
  471. color:{color:posts};
  472. }
  473.  
  474. .info a:hover {
  475. text-decoration:none;
  476. color:{color:posts};
  477. }
  478.  
  479. .pinned {
  480. width:20px;
  481. height:20px;
  482. top:-15px;
  483. left:270px;
  484. position:absolute;
  485. background-color:{color:accent};
  486. padding:10px;
  487. border-radius:100%;
  488. }
  489.  
  490. .pinned i {
  491. color:{color:posts};
  492. font-size:15px;
  493. }
  494.  
  495. .pinned a {
  496. text-decoration:none;
  497. }
  498.  
  499. .likeb {
  500. position: relative;
  501. display: inline-block;
  502. height: 1.6em;
  503. margin-bottom: 0px;
  504. margin-top:2px;
  505. }
  506.  
  507. .likeb .like_button iframe {
  508. position: absolute;
  509. top: 0;
  510. left: 0;
  511. bottom: 0;
  512. right: 0;
  513. z-index: 2;
  514. opacity: 0;
  515. }
  516.  
  517. .like_button iframe {width: 100% !important; height: 100% !important;}
  518. .likeb .liked + .actual-button {}
  519. .likeb .liked + .actual-button:after {content: '';}
  520.  
  521. .buttons {
  522. margin-top:-20px;
  523. text-align:right;
  524. }
  525.  
  526. .buttons a {
  527. margin-right:0.7em;
  528. color:{color:posts};
  529. -webkit-transition: all 0.3s ease;
  530. transition: all 0.3s ease;
  531. -moz-transition: all 0.3s ease;
  532. -o-transition: all 0.3s ease;
  533. }
  534.  
  535. .buttons i {
  536. font-size:14px;
  537. color:{color:posts};
  538. -webkit-transition: all 0.3s ease;
  539. transition: all 0.3s ease;
  540. -moz-transition: all 0.3s ease;
  541. -o-transition: all 0.3s ease;
  542. }
  543.  
  544. .buttons i:hover {
  545. color:{color:posts};
  546. -webkit-transition: all 0.3s ease;
  547. transition: all 0.3s ease;
  548. -moz-transition: all 0.3s ease;
  549. -o-transition: all 0.3s ease;
  550. }
  551.  
  552. .tags a {
  553. margin-right: 0em;
  554. color:{color:text};
  555. font-weight:normal;
  556. }
  557.  
  558. .tags a:hover {
  559. text-decoration:none;
  560. color:{color:accent};
  561. }
  562.  
  563. .tags {
  564. word-wrap: break-word;
  565. margin-top:-6em;
  566. margin-left:0em;
  567. padding-bottom:50px!important;
  568. }
  569.  
  570. .tags li {
  571. padding: 0;
  572. margin: 0;
  573. list-style-type:none;
  574. display: block;
  575. float: left;
  576. margin-right:4px;
  577. line-height:20px;
  578. }
  579.  
  580. .tags li:before {
  581. content: '#';
  582. }
  583.  
  584. .tags li:after {
  585. content: '\002C\00a0';
  586. }
  587.  
  588. .tags li:last-child:after {
  589. content: '.';
  590. }
  591.  
  592. {block:iftagsonhover}{block:IndexPage}
  593. .tags a { margin-right: 0em; }
  594.  
  595. .tags {
  596. margin-top:-6em;
  597. padding-bottom:50px!important;
  598. opacity:0;
  599. -webkit-transition: all 0.3s ease;
  600. transition: all 0.3s ease;
  601. -moz-transition: all 0.3s ease;
  602. -o-transition: all 0.3s ease;
  603. }
  604.  
  605. section:hover .tags {
  606. opacity:1;
  607. -webkit-transition: all 0.3s ease;
  608. transition: all 0.3s ease;
  609. -moz-transition: all 0.3s ease;
  610. -o-transition: all 0.3s ease;}
  611.  
  612. {/block:IndexPage}{block:iftagsonhover}
  613.  
  614. /*----- notes -----*/
  615.  
  616. .notes { margin-top:0em; }
  617. .notes a { color:{color:accent}; text-decoration:none; }
  618. .notes a:hover { color:{color:gradient 2}; text-decoration:none; }
  619.  
  620. ol.notes {
  621. max-width: 100%;
  622. padding: 0;
  623. margin: 2em 0 0 0;
  624. text-align:left;
  625. }
  626.  
  627. ol.notes li.note { padding: 0.3em 0; list-style-type: none; }
  628.  
  629. ol.notes li.note img.avatar {
  630. margin-right: 0.5em;
  631. vertical-align: middle;
  632. display: inline-block;
  633. width: 1em;
  634. height: 1em;
  635. border-radius:100%;
  636. border:3px solid {color:accent};
  637. }
  638.  
  639. /*----- pagination -----*/
  640.  
  641. #page-navigation {text-align: center;}
  642. #page-navigation a, .current-page {margin: 0 0.5em;}
  643.  
  644. /*----- taehyung's military wife -----*/
  645.  
  646. #credit {
  647. position: fixed;
  648. width:20px;
  649. height:20px;
  650. bottom: 20px;
  651. right: 20px;
  652. font-size: 15px;
  653. padding:5px;
  654. border-radius:100%;
  655. }
  656.  
  657. #credit i, #credit a {
  658. color:{color:accent};
  659. }
  660.  
  661. {CustomCSS}
  662.  
  663. /*----- tooltips -----*/
  664.  
  665. .tippy-tooltip.custom-theme {
  666. background-color: {color:accent};
  667. color: {color:background};
  668. text-align:center;
  669. }
  670.  
  671. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  672. fill: {color:accent};
  673. }
  674.  
  675. </style>
  676. </head>
  677.  
  678. <!----- html ----->
  679.  
  680. <body>
  681.  
  682. <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
  683. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  684. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  685. <script>
  686. tumblr_npf_audio({
  687. emptyTitleText: "Untitled track",
  688. emptyArtistText: "Untitled artist",
  689. emptyAlbumText: "Untitled album",
  690.  
  691. titleLabel: "Track:",
  692. artistLabel: "Artist:",
  693. albumLabel: "Album:"
  694. });
  695. </script>
  696. <style edit-npf-audio-player>
  697. .npf-audio-wrapper {
  698. --NPF-Audio-Buttons-Size: 1.4rem;
  699. --NPF-Audio-Buttons-Color: {color:accent};
  700. --NPF-Audio-Buttons-Spacing: 1.3rem;
  701. --NPF-Audio-Image-Size: 85px;
  702. --NPF-Audio-Image-Spacing: 0px;
  703. }
  704.  
  705. .npf-audio-background {
  706. background-color: {color:background};
  707. padding: 1.5rem;
  708. border-top-left-radius:{select:border radius};
  709. border-bottom-left-radius:{select:border radius};
  710. }
  711.  
  712. .npf-audio-title-label,
  713. .npf-audio-artist-label,
  714. .npf-audio-album-label {
  715. font-weight: bold;
  716. color:{color:accent};
  717. }
  718.  
  719. .npf-audio-title,
  720. .npf-audio-artist,
  721. .npf-audio-album {
  722. color: {color:text};
  723. }
  724. </style>
  725.  
  726. <main>
  727.  
  728. <!----- sidebar ----->
  729.  
  730. <aside id="sidebar">
  731. <div class="title">{Title}</div>
  732. <div class="title2"><i class="cp cp-star-o"></i> @{Name} <i class="cp cp-star-o"></i></div>
  733. <img src="{image:sidebar}" id="side-img" alt="Sidebar image"/>
  734. <div id="description">{text:description}</div>
  735. <nav>
  736. <a href="/"title="home"><i class="ph ph-house"></i></a>
  737. <a href="/ask"title="message"><i class="ph ph-chats"></i></a>
  738. <a href="/archive"title="archive"><i class="ph ph-archive"></i></a>
  739. <a href="{text:link 1 url}"title="{text:link 1 title}"><i class="ph ph-magic-wand"></i></a>
  740. <a href="{text:link 2 url}"title="{text:link 2 title}"><i class="ph ph-user"></i></a>
  741. <a href="{text:link 3 url}"title="{text:link 3 title}"><i class="ph ph-list"></i></a>
  742. </nav>
  743.  
  744. <!----- updates ----->
  745.  
  746. <div id="updates">
  747. <h1>about . . .</h1>
  748. {text:about}
  749. <h1 style="text-align:right;">giffing . . .</h1>
  750. <p style="text-align:right;">{text:giffing}</p>
  751. <h1>watching . . .</h1>
  752. {text:watching}
  753. <h1 style="text-align:right;">playing . . .</h1>
  754. <p style="text-align:right;">{text:playing}</p>
  755. <h1>favorites . . .</h1>
  756. {text:favorites}
  757. </div>
  758.  
  759. </aside>
  760.  
  761. <section>
  762.  
  763. {block:TagPage}
  764. <article>
  765. <b>filed under:</b> #{Tag}
  766. </article>
  767. {/block:TagPage}
  768.  
  769. {block:DayPage}
  770. <article>
  771. <b>posts made on:</b> {Month} {DayOfMonth}, {Year}
  772. </article>
  773. {/block:DayPage}
  774.  
  775. <!----- POSTS ----->
  776.  
  777. {block:Posts}
  778. <article class="posts" id="{PostID}">
  779.  
  780. {block:PinnedPostLabel}
  781. <div class="pinned">
  782. <a href="{Permalink}" class="pinned-post"><div style="margin-top:1px;"><i class="cp cp-pin-o"style="margin-left:2.2px;"></i></div></a>
  783. </div>
  784. {/block:PinnedPostLabel}
  785.  
  786. {block:Text}
  787. {block:Title}<h1 class="post-title">{Title}</h1>{/block:Title}
  788. {block:NotReblog}
  789. <li class="caption text-caption">
  790. {Body}
  791. </li>
  792. {/block:NotReblog}
  793. {block:RebloggedFrom}
  794. {block:Reblogs}
  795. <li class="caption text-caption">
  796. <img src="{PortraitURL-64}" class="user-icon">
  797. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  798. {Body}
  799. </li>
  800. {/block:Reblogs}
  801. {/block:RebloggedFrom}
  802. {/block:Text}
  803.  
  804. {block:Link}
  805. <a href="{URL}" class="link-wrap">
  806. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  807. <div class="link">
  808. <div class="title">{Name}</div>
  809. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  810. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  811. </div>
  812. </a>
  813. {block:Description}
  814. {block:NotReblog}
  815. <li class="caption">
  816. {Description}
  817. </li>
  818. {/block:NotReblog}
  819. {/block:Description}
  820. {block:RebloggedFrom}
  821. {block:Reblogs}
  822. <li class="caption">
  823. <img src="{PortraitURL-64}" class="user-icon">
  824. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  825. {Body}
  826. </li>
  827. {/block:Reblogs}
  828. {/block:RebloggedFrom}
  829. {/block:Link}
  830.  
  831. {block:Photo}
  832. <div class="photo">
  833. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  834. </div>
  835. {block:Caption}
  836. {block:NotReblog}
  837. <li class="caption">
  838. {Caption}
  839. </li>
  840. {/block:NotReblog}
  841. {block:RebloggedFrom}
  842. {block:Reblogs}
  843. <li class="caption">
  844. <img src="{PortraitURL-64}" class="user-icon">
  845. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  846. {Body}
  847. </li>
  848. {/block:Reblogs}
  849. {/block:RebloggedFrom}
  850. {/block:Caption}
  851. {/block:Photo}
  852.  
  853. {block:Photoset}
  854. <div class="photo">{Photoset-700}</div>
  855. {block:Caption}
  856. {block:NotReblog}
  857. <li class="caption">
  858. {Caption}
  859. </li>
  860. {/block:NotReblog}
  861. {block:RebloggedFrom}
  862. {block:Reblogs}
  863. <li class="caption">
  864. <img src="{PortraitURL-64}" class="user-icon">
  865. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  866. {Body}
  867. </li>
  868. {/block:Reblogs}
  869. {/block:RebloggedFrom}
  870. {/block:Caption}
  871. {/block:Photoset}
  872.  
  873. {block:Video}
  874. <div class="video">{Video-500}</div>
  875. {block:Caption}
  876. {block:NotReblog}
  877. <li class="caption">
  878. {Caption}
  879. </li>
  880. {/block:NotReblog}
  881. {block:RebloggedFrom}
  882. {block:Reblogs}
  883. <li class="caption">
  884. <img src="{PortraitURL-64}" class="user-icon">
  885. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  886. {Body}
  887. </li>
  888. {/block:Reblogs}
  889. {/block:RebloggedFrom}
  890. {/block:Caption}
  891. {/block:Video}
  892.  
  893. {block:Quote}
  894. <div class="quote">{Quote}</div>
  895. {block:Source}<div class="source">{Source}</div>{/block:Source}
  896. {/block:Quote}
  897.  
  898. {block:Chat}
  899. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  900. <ul class="chat">{block:Lines}
  901. <li>
  902. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  903. {Line}
  904. </li>
  905. {/block:Lines}</ul>
  906. {/block:Chat}
  907.  
  908. {block:Answer}
  909. <div class="ask-wrap">
  910. <img src="{AskerPortraitURL-64}" class="ask-icon">
  911. <div class="asking">{Asker} sent a message:</div>
  912. <div class="question">{Question}</div>
  913. </div>
  914. {block:Answerer}
  915. <li class="caption">
  916. <img src="{AnswererPortraitURL-64}" class="user-icon">
  917. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  918. {Answer}
  919. </li>
  920. {/block:Answerer}
  921. {block:NotReblog}
  922. <li class="caption">
  923. {Replies}
  924. </li>
  925. {/block:NotReblog}
  926. {block:RebloggedFrom}
  927. {block:Reblogs}
  928. <li class="caption">
  929. <img src="{PortraitURL-64}" class="user-icon">
  930. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  931. {Body}
  932. </li>
  933. {/block:Reblogs}
  934. {/block:RebloggedFrom}
  935. {/block:Answer}
  936.  
  937. {block:Audio}
  938. <div class="audiopost">
  939. <div class="audiobox">
  940. <div class="button">
  941. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  942. </div>
  943. </div>
  944. {block:AlbumArt}
  945. <img src="{AlbumArtURL}" class="album-art">
  946. {/block:AlbumArt}
  947. <div class="audioinfo">
  948. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  949. {block:Artist}<li>{Artist}</li>{/block:Artist}
  950. {block:Album}<li>{Album}</li>{/block:Album}
  951. </div>
  952. </div>
  953. {block:Caption}
  954. {block:NotReblog}
  955. <li class="caption">
  956. {Caption}
  957. </li>
  958. {/block:NotReblog}
  959. {block:RebloggedFrom}
  960. {block:Reblogs}
  961. <li class="caption">
  962. <img src="{PortraitURL-64}" class="user-icon">
  963. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  964. {Body}
  965. </li>
  966. {/block:Reblogs}
  967. {/block:RebloggedFrom}
  968. {/block:Caption}
  969. {/block:Audio}
  970.  
  971. {/block:HasTags}
  972. <!----- info ----->
  973.  
  974. {block:Date}
  975. <div class="info">
  976. <a href="{Permalink}"title="{TimeAgo}"style="padding-left:7px;margin-top:0px;">{DayOfWeek}</a>
  977.  
  978. <!----- buttons ----->
  979. <div class="buttons">
  980. {block:NoteCount}<a href="{Permalink}"title="{NoteCountWithLabel}"><i class="ph-notepad"style="font-size:16px;"></i></a>{/block:NoteCount}
  981. <a href="{ReblogURL}" target="_blank"title="reblog"style="margin-top:-4px;"><i class="cp cp-reblog-alt"style="font-size:13px;"></i></a>
  982. <a class="likeb" href="#"title="like"style="margin-top:2px;">{LikeButton}<span class="actual-button"><i class="ph ph-heart"style="font-size:16px;"></i></span></a>
  983.  
  984. {block:PermalinkPage}
  985.  
  986. {block:RebloggedFrom}
  987. <a href="{ReblogParentURL}"title="reblogged from {ReblogParentName}"><i class="ph-sort-descending"style="font-size:16px;"></i></a>
  988. <a href="{ReblogRootURL}"title="posted by {ReblogRootName}"><i class="ph-note-pencil"style="font-size:16px;"></i></a>
  989. {/block:RebloggedFrom}
  990. {block:ContentSource}<a href="{SourceURL}">{lang:Source}</a>{/block:ContentSource}
  991.  
  992. {/block:PermalinkPage}
  993. </div>
  994. </div>
  995. {/block:Date}
  996.  
  997. <!----- notes ----->
  998.  
  999. {block:PermalinkPage}{block:Date}
  1000. {block:NoteCount}{block:PostNotes}
  1001. <div class="notes">
  1002. {PostNotes-64}
  1003. </div>
  1004. {/block:PostNotes}{/block:NoteCount}
  1005. {/block:Date}{/block:PermalinkPage}
  1006.  
  1007. </article>
  1008.  
  1009. <!----- tags ----->
  1010.  
  1011. {block:HasTags}
  1012. <div class="tags">
  1013. {block:Tags}
  1014. <li><a href="{TagURL}">{Tag}</a></li>
  1015. {/block:Tags}
  1016. </div>
  1017. {/block:HasTags}
  1018.  
  1019. {/block:Posts}
  1020.  
  1021. </section>
  1022.  
  1023. <!----- pagination ----->
  1024.  
  1025. {block:Pagination}
  1026. <article id="page-navigation">
  1027. {block:PreviousPage}<a href="{PreviousPage}"title="previous"><i class="ph ph-caret-double-left"></i></a>{/block:PreviousPage}
  1028. {block:NextPage}<a href="{NextPage}"title="forward"><i class="ph ph-caret-double-right"></i></a>{/block:NextPage}
  1029. </article>
  1030. {/block:Pagination}
  1031.  
  1032. </main>
  1033.  
  1034. <!----- taehyung's military wife ----->
  1035.  
  1036. <a href="https://gloriapritchetts.tumblr.com" title="by drea" id="credit"><i class="ph ph-butterfly"style="margin-top:2px;margin-left:2px;"></i></a>
  1037.  
  1038. <!----- tooltips ----->
  1039.  
  1040. <script src="https://unpkg.com/popper.js@1"></script>
  1041. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1042. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1043.  
  1044. <script>
  1045. tippy('a[title]', {
  1046. theme: 'custom',
  1047. arrow: tippy.roundArrow,
  1048. zIndex: 9999999999,
  1049. maxWidth: 300,
  1050.  
  1051. content(reference) {
  1052. const title = reference.getAttribute('title');
  1053. reference.removeAttribute('title');
  1054. return title;
  1055. },
  1056. });
  1057. </script>
  1058.  
  1059. </body>
  1060. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement