API tools faq
paste
littlemisswhoever

Personal (lasouris) - June 1st

littlemisswhoever
Jun 1st, 2022
126
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 57.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!---
  6.  
  7. someday: theme by @taezs
  8.  
  9. creds:
  10. - base code by @seyche
  11. - day/night mode by @eggdesign
  12. - npf photosets by @glenthemes
  13. - css photosets by @annasthms & @eggdesign
  14. - phosphoricons - change icons by going to https://phosphoricons.com/ and finding the class name of the one you want.
  15.  
  16. ko-fi? @taezs
  17. questions? taezsthemes.tumblr.com/faq
  18. hotel? trivago
  19.  
  20. --->
  21.  
  22. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <link rel="alternate" type="applicatiaon/rss+xml" href="{RSS}">
  26. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  27. <meta charset="utf-8">
  28. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  29.  
  30. <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300;1,500&family=Cairo:ital,wght@0,200;0,300;0,600;1,200;1,300;1,600&family=Vbiaoda+Libre&display=swap" rel="stylesheet">
  31.  
  32. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  33. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  34. <script src="https://unpkg.com/phosphor-icons"></script>
  35.  
  36. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  37.  
  38. <!-- variables -->
  39. <meta name="image:Sidebar" content=""/>
  40. <meta name="image:Navigation Box" content=""/>
  41.  
  42. <meta name="color:Accent 1" content="#ffffff"/>
  43. <meta name="color:Accent 2" content="#595959"/>
  44.  
  45. <meta name="if:Dark Mode Default" content="1"/>
  46. <meta name="if:Navigation Box" content="0"/>
  47. <meta name="if:Updates Box" content="0"/>
  48. <meta name="if:Sidebar Image Box" content="1"/>
  49.  
  50. <meta name="select:Image Overlay" content="Multiply" title="Multiply" />
  51. <meta name="select:Image Overlay" content="Overlay" title="Overlay" />
  52. <meta name="select:Image Overlay" content="Screen" title="Screen" />
  53. <meta name="select:Image Overlay" content="Darken" title="Darken" />
  54. <meta name="select:Image Overlay" content="Lighten" title="Lighten" />
  55. <meta name="select:Image Overlay" content="Normal" title="None" />
  56.  
  57. <meta name="select:Dark Mode Image Overlay" content="Multiply" title="Multiply" />
  58. <meta name="select:Dark Mode Image Overlay" content="Overlay" title="Overlay" />
  59. <meta name="select:Dark Mode Image Overlay" content="Screen" title="Screen" />
  60. <meta name="select:Dark Mode Image Overlay" content="Darken" title="Darken" />
  61. <meta name="select:Dark Mode Image Overlay" content="Lighten" title="Lighten" />
  62. <meta name="select:Dark Mode Image Overlay" content="Normal" title="None" />
  63.  
  64. <meta name="text:Image Name" content="home"/>
  65. <meta name="text:Home Link" content="Home"/>
  66. <meta name="text:Ask Link" content="Ask"/>
  67. <meta name="text:Archive Link" content="Archive"/>
  68. <meta name="text:Submit Link" content=""/>
  69. <meta name="text:Link 1 URL" content=""/>
  70. <meta name="text:Link 1" content=""/>
  71. <meta name="text:Link 2 URL" content=""/>
  72. <meta name="text:Link 2" content=""/>
  73. <meta name="text:Link 3 URL" content=""/>
  74. <meta name="text:Link 3" content=""/>
  75.  
  76.  
  77. <script>
  78. $(document).ready(function(){
  79. $('body').tooltip({track:true});
  80. });
  81. </script>
  82.  
  83. <!--
  84. NPF images fix v3.0 by @glenthemes [2021]
  85. 💌 git.io/JRBt7
  86. --->
  87. <script src="//npf-images-v3.github.io/script.js"></script>
  88.  
  89. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  90. <style tmblr-npf>
  91. :root {
  92. --NPF-Caption-Spacing:30px;
  93. --NPF-Image-Spacing:4px;
  94. }
  95. </style>
  96.  
  97. <style>
  98.  
  99. :root {
  100. --black: #222;
  101. --white: #fff;
  102. --accent1:{color:accent 1};
  103. --accent2:{color:accent 2};
  104. --borders:#191919;
  105. --grey:#000000;
  106. }
  107.  
  108. /*tooltip*/
  109.  
  110. .ui-tooltip {
  111. position:Absolute;
  112. z-index:9999;
  113. padding-top:5px;
  114. }
  115.  
  116. .ui-tooltip-content {
  117. text-transform:normal!important;
  118. padding:4px 10px;
  119. transition:0s!important;
  120. font:10px calibri, sans-serif;
  121. background:white;
  122. border:1px solid #ddd;
  123. box-shadow:2px 2px 10px rgba(0,0,0,0.2);
  124. }
  125.  
  126.  
  127. .iframe-controls--desktop {
  128. position:fixed;
  129. top:0px;
  130. right:0px;
  131. filter:invert(100%);
  132. -webkit-filter:invert(100%);
  133. z-index:999999999999;
  134. -webkit-transform:scale(0.6,0.6);
  135. -webkit-transform-origin: 100% 0%;
  136. -ms-transform-origin:100% 0%;
  137. -ms-transform:scale(0.6,0.6);
  138. transform:scale(0.6,0.6);
  139. transform-origin:100% 0%;
  140. }
  141.  
  142.  
  143. body {
  144. font-family: calibri, sans-serif;
  145. color:#c6c6c6;
  146. font-size: 10px;
  147. width:100%;
  148. height:100%;
  149. margin:0;
  150. padding:0;
  151. left:0;
  152. top:0;
  153. background-color: #000000!important;
  154. background-size: 100%;
  155. }
  156.  
  157. a {
  158. color: #ffffff;
  159. text-decoration: none;
  160. }
  161.  
  162. blockquote {
  163. padding: 0 0 0 1.5em;
  164. border-left: 1px solid {color:borders};
  165. margin: 1.5em 0 1.5em 1.5em;
  166. }
  167.  
  168. h1, h2, h3, h4, h5, .title {
  169. line-height: 145%;
  170. font-weight: bold;
  171. }
  172.  
  173. h1, .title {font-size: 1.5em;margin:0.5em 1.5em;}
  174. h2 {font-size: 1.3em;}
  175. h3 {font-size: 1.25em;}
  176. h4 {font-size: 1.1em;}
  177. h5 {font-size: 1em;}
  178.  
  179. small {
  180. font-size: 10px;
  181. }
  182.  
  183.  
  184. big {font-size: 1.1em;}
  185.  
  186.  
  187. hr {
  188. height: 1px;
  189. border: none;
  190. box-shadow: none;
  191. background-color: {color:borders};
  192. }
  193.  
  194. pre {
  195. line-height: inherit;
  196. font-size: inherit;
  197. white-space: pre-wrap;
  198. white-space: -moz-pre-wrap;
  199. white-space: -pre-wrap;
  200. white-space: -o-pre-wrap;
  201. word-wrap: break-word;
  202. }
  203.  
  204. .caption i, .caption em{
  205. color:{color:accent 2};
  206. }
  207.  
  208. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  209.  
  210. .taezs, .daynight{
  211. position:fixed;
  212. bottom:18px;
  213. right:20px;
  214. width:200px;
  215. z-index:4000;
  216. height:20px;
  217. }
  218.  
  219. .daynight{
  220. display:none;
  221. right:auto;
  222. left:18px;
  223. }
  224.  
  225. .taezs a, .daynight a{
  226. display:inline-block;
  227. border-radius:50%;
  228. right:20px;
  229. position:fixed;
  230. padding:8px 10px;
  231. color:black;
  232. bottom:13px;
  233. cursor:pointer;
  234. }
  235.  
  236. .daynight a{
  237. right:auto;
  238. left:20px;
  239. }
  240.  
  241. .taezs a i, .daynight a i{
  242. margin-bottom:-2px;
  243. vertical-align:middle;
  244. }
  245.  
  246. .taezs a:before, .daynight a:before{
  247. content:"code by taezs";
  248. position:fixed;
  249. right:40px;
  250. padding:5px 20px;
  251. opacity:0;
  252. width:auto!important;
  253. bottom:-20px;
  254. transition:.5s;
  255. white-space: nowrap;
  256. }
  257.  
  258. .daynight a:before{
  259. right:auto;
  260. content:'turn the lights off';
  261. left:40px;
  262. width:auto!important;
  263. }
  264.  
  265. body.night .daynight a:before{
  266. content:'turn the lights on';
  267. }
  268.  
  269. .taezs a:hover:before, .daynight a:hover:before{
  270. opacity:1;
  271. bottom:13px;
  272. transition:.5s;
  273. }
  274.  
  275. ::-webkit-scrollbar{
  276. height:6px;
  277. width:6px;
  278. background:inherit;
  279. }
  280.  
  281. ::-webkit-scrollbar-thumb {
  282. background:var(--accent2);
  283. border-radius:5px;
  284. }
  285.  
  286. ::-webkit-scrollbar-track {background:transparent;}
  287.  
  288. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border:5px solid transparent;}
  289.  
  290. /* container */
  291. .window{
  292. width:850px;
  293. left:calc(50% - 500px);
  294. top:calc(50% - 250px);
  295. margin:auto;
  296. background:var(--white);
  297. position:fixed;
  298. height:450px;
  299. border:1px solid var(--borders);
  300. box-shadow:2px 2px 10px rgba(0,0,0,0.2);
  301. }
  302.  
  303. .desc, .imagebox{
  304. left:calc(50% + 300px);
  305. top:calc(50% + 50px);
  306. height:262px;
  307. width:auto;
  308. }
  309.  
  310. .imagebox{
  311. left:100px;
  312. top:225px;
  313. }
  314.  
  315. .chrome{
  316. height:525px;
  317. top:5vh;
  318. z-index:1000;
  319. }
  320.  
  321. .updates{
  322. width:300px;
  323. height:auto;
  324. }
  325.  
  326. .inner{
  327. padding:1em;
  328. font-size:12pt;
  329. }
  330.  
  331. .inner li{
  332. list-style:none;
  333. padding-left:40px;
  334. }
  335.  
  336. .inner li:before{
  337. content: "\f857";
  338. font-family: 'phosphor';
  339. color:var(--grey);
  340. position:absolute;
  341. margin-left:-30px;
  342. margin-top:8px;
  343. }
  344.  
  345. .desc_links{
  346. padding:10px 20px;
  347. border-top:1px solid #191919;
  348. border-bottom:1px solid #191919;
  349. }
  350.  
  351. .desc_links a{
  352. margin-right:10px;
  353. }
  354.  
  355. li.complete:before{
  356. content: "\f851";
  357.  
  358. }
  359.  
  360. .top{
  361. background-color:#000000!important;
  362. padding:8px 10px;
  363. cursor:move;
  364. border-bottom:1px solid var(--borders);
  365. }
  366.  
  367. .top span:not(.nom){
  368. float:right;
  369. }
  370.  
  371. .top span:not(.nom) i{
  372. margin-left:15px;
  373. }
  374.  
  375. .top .ph-plus{
  376. margin-right:15px;
  377. margin-left:0;
  378. }
  379.  
  380. .ph{
  381. margin-right:10px;
  382. vertical-align:middle;
  383. margin-top:-3px;
  384. }
  385.  
  386. .secondbar{
  387. width:100%;
  388. padding: 10px;
  389. height:50px;
  390. border-bottom:1px solid var(--borders);
  391. }
  392.  
  393. .secondbar div{
  394. border:1px solid var(--borders);
  395. display:inline-block;
  396. height:30px;
  397. padding:0 10px;
  398. }
  399.  
  400. .search{
  401. float:right;
  402. width:200px;
  403. height:30px;
  404. position:relative;
  405. }
  406.  
  407. .controls{
  408. height:30px;
  409. float:left;
  410. width:160px;
  411. border-color:transparent!important;
  412. }
  413.  
  414. .controls i{
  415. text-align:center;
  416. padding:7px;
  417. border-radius:50%;
  418. color:#eee;
  419. }
  420.  
  421. .controls a i{
  422. color:#aaa;
  423. }
  424.  
  425. .controls a:hover i{
  426. color:black;
  427. background:var(--grey);
  428. }
  429.  
  430. .search i{
  431. margin-right:10px;
  432. }
  433. .secondbar i{
  434. font-size:90%;
  435. vertical-align:middle;
  436. margin-top:-3px;
  437. }
  438.  
  439. .name{
  440. width:calc(100% - 210px);
  441. position:relative;
  442. white-space: nowrap;
  443. padding-right:40px!important;
  444. overflow: hidden;
  445. margin-bottom:-8px;
  446. text-overflow: ellipsis;
  447. }
  448.  
  449. .name i{
  450. margin-top:-1px;
  451. }
  452.  
  453. .name:after, .search:before, .tablinks:after{
  454. position:absolute;
  455. right:0;
  456. top:0;
  457. height:15px;
  458. padding:7px ;
  459. border-left:1px solid var(--borders);
  460. content:"\f045";
  461. font-family: 'phosphor';
  462. }
  463.  
  464. .tablinks:after{
  465. margin-top:-3px!important;
  466. }
  467.  
  468. .web{
  469. width:calc(100% - 180px);
  470. margin-left:-20px;
  471. }
  472.  
  473. .web.name i{
  474. margin-right:5px;
  475. }
  476.  
  477. .web:after{
  478. content: "\fa5d";
  479. }
  480.  
  481. .webimg{
  482. float:right;
  483. width:17px;
  484. margin:5px;
  485. margin-top:6px;
  486. height:17px;
  487. border-radius:50%;
  488. }
  489.  
  490. .search:before{
  491. left:0;
  492. right:auto;
  493. height:10px;
  494. border-left:none;
  495. border-right:1px solid var(--borders);
  496. content: "\f20a";
  497. }
  498.  
  499. .search input{
  500. background:none;
  501. outline:none;
  502. color:var(--accent2);
  503. font:inherit;
  504. letter-spacing:0;
  505. border:0px solid transparent;
  506. }
  507.  
  508. .search form{
  509. float:left;
  510. vertical-align:middle;
  511. outline:none;
  512. margin-top:-1px;
  513. margin-left:25px;
  514. border:0px solid transparent;
  515. }
  516.  
  517. .intro{
  518. padding:15px 20px;
  519. text-align:justify;
  520. margin-top:20px;
  521. border-top:1px solid var(--borders);
  522. }
  523.  
  524. .tabs{
  525. border-top:8px solid #000000;
  526. border-bottom:8px solid #000000;
  527. display:flex;
  528. height:calc(100% - 125px);
  529. align-items: stretch;
  530. }
  531.  
  532. .tab{
  533. padding-bottom:20px;
  534. padding-left:0px;
  535. padding-bottom:20px;
  536. overflow:auto;
  537. }
  538.  
  539.  
  540. .tab a, .tab span, .tab .tablinks{
  541. display:block;
  542. padding:2px 10px;
  543. }
  544.  
  545. .tab a{
  546. padding-left:20px;
  547. }
  548.  
  549. .tab a:hover{
  550. background-color: var(--grey);
  551. color:black;
  552. font-weight:600;
  553. }
  554.  
  555. .tab a:hover i{
  556. color:var(--black)!important;
  557. }
  558.  
  559. .tab a i, .tab span i, .tablinks i, .inner i{
  560. vertical-align:middle;
  561. margin-top:-2px;
  562. margin-right:10px;
  563. color:#ccc!important;
  564. }
  565.  
  566. .tab span{
  567. padding-top:5px;
  568. font-weight:600;
  569. }
  570.  
  571. .tab span i{
  572. margin-right:5px;
  573. }
  574.  
  575. .active i, .ph-lock-fill, .tab span i , .tablinks:active i, .stick a:hover i, .web:after, .likeb .liked + .actual-button, .info a:hover i, .alert i, li.complete:before, .tags a:hover, .desc a:hover, .caption a:hover, .username, .notes a:hover, .updates a:hover, .ask-wrap a:hover {
  576. background-size: 100%;
  577. }
  578.  
  579. .tablinks.active i:before{
  580. content:"\f8f6"!important;
  581. }
  582.  
  583. .one{
  584. width:200px;
  585. flex:none;
  586. border-right:1px solid var(--borders);
  587. }
  588.  
  589. .three{
  590. text-align:center;
  591. overflow:hidden;
  592. font-size:9pt;
  593. flex:none;
  594. width:209px;
  595. }
  596.  
  597. .three span{
  598. padding:0;
  599. }
  600.  
  601.  
  602. .three small{
  603. display:block;
  604. padding:40px;
  605. line-height:1.5;
  606. }
  607.  
  608. .img{
  609. width:calc(100% - 80px);
  610. margin:40px;
  611. height:200px;
  612. position:relative;
  613. background-size:cover;
  614. background-position:center center;
  615. background-blend-mode: {select:Image Overlay};
  616. }
  617.  
  618. body.night .img{
  619. background-blend-mode: {select:Dark Mode Image Overlay};
  620.  
  621. }
  622.  
  623. .imagebox .img{
  624. margin:0;
  625. height:350px;
  626. width:auto;
  627. background-image:url('https://i.imgur.com/VB4T6mu.gif');
  628. outline:1px solid #3a3a3a;
  629. }
  630.  
  631. .nav .img{
  632. background-image:url({image:Navigation Box}), linear-gradient(135deg, var(--accent1) 0%, var(--accent2) 50%, var(--accent3) 100%);
  633. margin-bottom:-20px;
  634. }
  635.  
  636. .two{
  637. flex-grow:1;
  638. border-right:0px solid var(--borders);
  639. background-color:#111111!important;
  640. }
  641.  
  642. * {box-sizing: border-box}
  643.  
  644. .tablinks {
  645. display: block;
  646. background-color: inherit;
  647. color: inherit;
  648. width: 100%;
  649. border: none;
  650. padding-left:20px!important;
  651. outline: none;
  652. text-align: left;
  653. font-family:calibri;
  654. cursor: pointer;
  655. position:relative;
  656. transition: 0s;
  657. }
  658.  
  659.  
  660. .tablinks:after{
  661. border:none;
  662. margin-top:2px;
  663. content: "\f0c4";
  664. color:inherit;
  665. }
  666.  
  667. .tablinks:hover {
  668. background-color: var(--grey);
  669. color:black;
  670. font-weight:600;
  671. }
  672.  
  673. .tablinks:hover:after, .tablinks:hover i{
  674. color: var(--black)!important;
  675. }
  676.  
  677. .tablinks.active {
  678. background-color: var(--grey);
  679. color:black;
  680. font-weight:600;
  681. }
  682.  
  683. .tabcontent {
  684. float:left;
  685. width:100%;
  686. display:none;
  687. background-color:#111111!important;
  688. border-top:8px solid #111111;
  689. height:300px;
  690. }
  691.  
  692. #tab1{
  693. display:block;
  694. }
  695.  
  696. .bottombar{
  697. width:100%;
  698. padding:0px 10px;
  699. border-top:1px solid var(--borders);
  700. }
  701.  
  702. .bottombar a{
  703. font-weight:600;
  704. display:inline-block;
  705. padding:0 10px;
  706. }
  707.  
  708. .mobnav{
  709. text-align:center;
  710. display:none;
  711. margin:20px;
  712. margin-top:0;
  713. }
  714.  
  715. .draginfo{
  716. opacity:0.6;
  717. }
  718.  
  719. .draginfo i{
  720. vertical-align:middle;
  721. margin-right:10px;
  722. margin-top:-2px;
  723. }
  724.  
  725. /* posts */
  726.  
  727. section {
  728. position: relative;
  729. width:100px;
  730. margin:auto;
  731. height:calc(100% - 125px);
  732. overflow:auto;
  733. background:#fafafa;
  734. width:100%;
  735. }
  736.  
  737. article {
  738. position: relative;
  739. width:450px!important;
  740. margin:100px auto;
  741. border:1px solid var(--borders);
  742. background:#fff;
  743. }
  744.  
  745. img, iframe, video{
  746. max-width:100%!important;
  747. }
  748.  
  749. video{
  750. margin-top:3em;
  751. }
  752.  
  753. pre {
  754. line-height: inherit;
  755. font-size: inherit;
  756. white-space: pre-wrap;
  757. white-space: -moz-pre-wrap;
  758. white-space: -pre-wrap;
  759. white-space: -o-pre-wrap;
  760. word-wrap: break-word;
  761. }
  762.  
  763. section article:first-of-type{
  764. margin-top:60px;
  765. }
  766.  
  767. /* info */
  768.  
  769. .stick{
  770. position:sticky;
  771. float:right;
  772. z-index:20;
  773. margin-right:-50px;
  774. text-align:center;
  775. top:60px;
  776. width:20px;
  777. height:150px;
  778.  
  779. }
  780. .stick a{
  781. display:inline-block;
  782. padding:0;
  783. text-align:center;
  784. border-radius:20px;
  785. margin:5px 0;
  786. color:#aaa;
  787. font-size:11pt;
  788. padding:5px;
  789. padding-bottom:0;
  790. transition:0.5s;
  791. }
  792.  
  793. .stick ion-icon{
  794. margin-left:1px;
  795. }
  796.  
  797. .likeb .liked + .actual-button {
  798. color:#871f36!important;
  799. }
  800.  
  801. .likeb:hover .actual-button{
  802. color:#871f36!important;
  803. }
  804.  
  805. .info a{
  806. display:inline-block;
  807. padding:0 10px;
  808. }
  809.  
  810. .info a i{
  811. margin-right:10px;
  812. margin-top:-2px;
  813. vertical-align:middle;
  814. }
  815.  
  816. /*----- INFO -----*/
  817.  
  818. .info, .tags {
  819. position:relative;
  820. padding:1em;
  821. border-top:1px solid var(--borders);
  822. display:block;
  823. width:447px;
  824. text-align:justify!important;
  825. white-space:normal;
  826. text-align:left;
  827. word-wrap:break-word;
  828. }
  829.  
  830. .info a, .tags a, .tags span{
  831. word-wrap:break-word;
  832. padding:3px 1px;
  833. height:20px;
  834. line-height:20px;
  835. color:#ffffff;
  836. }
  837.  
  838. .info a:not(:first-child):before{
  839. content:'';
  840. width:1px;
  841. background:{color:borders};
  842. height:15px;
  843. position:absolute;
  844. color:#ffffff;
  845. }
  846.  
  847. .tags{
  848. word-wrap:break-word;
  849. width:447px;
  850. text-align:justify!important;
  851. margin:0;
  852. background:#eee;
  853. }
  854.  
  855. .tags i{
  856. vertical-align:middle;
  857. }
  858.  
  859. .tags a{
  860. word-wrap:break-word;
  861. margin-right:2px!important;
  862. }
  863.  
  864. .tags a:after{
  865. content:',';
  866. }
  867.  
  868. .info a:hover{
  869. background:var(--grey);
  870. }
  871.  
  872. .likeb {
  873. position: relative;
  874. display: inline-block;
  875. height: 1.6em;
  876. margin-bottom: -1px;
  877. }
  878.  
  879. .likeb .like_button iframe {
  880. position: absolute;
  881. top: 0;
  882. left: 0;
  883. bottom: 0;
  884. right: 0;
  885. z-index: 2;
  886. opacity: 0;
  887. }
  888.  
  889. .like_button iframe {width: 100% !important; height: 100% !important;}
  890.  
  891. .perma .index{
  892. display:none;
  893. }
  894.  
  895. .info.perma a{
  896. display:block;
  897. margin-bottom:0.5em;
  898. }
  899.  
  900. .info.perma a:last-child{
  901. margin:0;
  902. }
  903.  
  904. .info.perma a:hover{
  905. background:none;
  906. font-weight:600;
  907. }
  908.  
  909. /*----- AUDIO -----*/
  910.  
  911. .audiopost {
  912. padding: 2em;
  913. backdrop-filter: blur(10px);
  914. position:relative;
  915. background-size:cover;
  916. }
  917.  
  918. .audiopost:after{
  919. position:absolute;
  920. z-index:-1;
  921. top:0;
  922. width:100%;
  923. height:100%;
  924. background:rgba(1,1,1,.3);
  925. backdrop-filter: blur(10px);
  926. left:0;
  927. content:'';
  928. transition:0.5s;
  929. }
  930.  
  931. .album-art {
  932. z-index: 1;
  933. display: inline-block;
  934. vertical-align: middle;
  935. float: left;
  936. width: 100px;
  937. height: 100px;
  938. }
  939.  
  940. .audio-player-wrap {
  941. width: 100px;
  942. height: 100px;
  943. display: inline-block;
  944. }
  945.  
  946. .button {
  947. width: 30px;
  948. height: 30px;
  949. overflow: hidden;
  950. position: relative;
  951. z-index: 2;
  952. margin: 7px;
  953. }
  954.  
  955. .audiobox {
  956. background-color: #f2f2f2;
  957. z-index: 3;
  958. position: absolute;
  959. margin: 28px 0 0 28px;
  960. border-radius: 50%;
  961. }
  962.  
  963. .audioinfo {
  964. display: inline-block;
  965. height: 100px;
  966. max-width: calc(100% - 100px);
  967. margin-left: 100px;
  968. display: flex;
  969. color:var(--white);
  970. justify-content: center;
  971. flex-direction: column;
  972. box-sizing: border-box;
  973. padding-left: 2em;
  974. }
  975.  
  976. .audioinfo li {list-style-type: none;}
  977. .track {font-weight: bold;}
  978.  
  979. /*----- ANSWER -----*/
  980.  
  981. .ask-wrap{
  982. position:relative;
  983. padding:1em 0;
  984. background:#fff;
  985. border-top:1px solid var(--borders);
  986. }
  987.  
  988. .askerr{
  989. padding-left:25px;
  990. padding-top:6px;
  991. }
  992.  
  993. .actual-question{
  994. background:var(--grey);
  995. }
  996.  
  997. .ask-wrap:first-child{
  998. border-bottom-color:transparent;
  999. }
  1000.  
  1001. .ask-icon{
  1002. position:absolute;
  1003. width:2.5em;
  1004. height:2.5em;
  1005. margin:1em 1.8em;
  1006. }
  1007.  
  1008. .ask-wrap .asking {
  1009. display:block;
  1010. margin-bottom:0;
  1011.  
  1012. font-weight: bold;
  1013. }
  1014.  
  1015. .asking:after{
  1016. content:'@tumblr.com';
  1017. }
  1018.  
  1019. .time{
  1020. font-size:9pt;
  1021. margin-top:-0.5em;
  1022. display:block;
  1023. }
  1024.  
  1025. .question {
  1026. padding-top:6px;
  1027. padding-left:25px;
  1028. padding-bottom:6px;
  1029. padding-right:25px;
  1030. }
  1031.  
  1032.  
  1033. .question p:first-of-type {margin-top: 0;}
  1034. .question p:last-of-type {margin-bottom: 0;}
  1035.  
  1036. .alert{
  1037. display:block;
  1038. padding:0.5em 1em;
  1039. font-size:13pt;
  1040. font-weight:600;
  1041. background:#fff;
  1042. }
  1043.  
  1044. .alert i{
  1045. vertical-align:middle;
  1046. margin-top:-2px;
  1047. margin-right:10px;
  1048. }
  1049.  
  1050. /*----- QUOTE -----*/
  1051.  
  1052. .quote {
  1053. line-height: 160%; font-size: 1.25em;
  1054. padding:2em;
  1055. padding-bottom:0;
  1056. }
  1057.  
  1058. .quote p:first-of-type {margin-top: 0;}
  1059. .quote p:last-of-type {margin-bottom: 0;}
  1060.  
  1061. .source {padding:2em; padding-top:1em;}
  1062.  
  1063. /*----- CHAT -----*/
  1064.  
  1065. .chat {padding: 2em; margin: 0;}
  1066. .chat li {list-style-type: none; margin-top: 1em;}
  1067. .chat li:first-of-type {margin-top: 0;}
  1068. .chatter {
  1069. font-weight: bold;
  1070. display:inline-block;
  1071. }
  1072.  
  1073. p.npf_chat{
  1074. font-family:calibri!important;
  1075. }
  1076.  
  1077. p.npf_chat b, .chat li b{
  1078. color:var(--accent3);
  1079. }
  1080.  
  1081. p.npf_chat:first-of-type{
  1082. margin-top:2em;
  1083. }
  1084. .chat li:nth-child(2n+0) b, p.npf_chat:nth-of-type(2n+0) b{
  1085. color:var(--accent2);
  1086. }
  1087.  
  1088. /*----- CAPTIONS -----*/
  1089.  
  1090. .caption {
  1091. padding: 1em 2em;
  1092. list-style-type: none;
  1093. padding-top:1.5em;
  1094. overflow-x:hidden;
  1095. }
  1096.  
  1097. .caption a, .updates a, .desc a{
  1098. text-decoration:underline;
  1099. }
  1100. .caption{
  1101. border-top:1px solid var(--borders);
  1102. }
  1103.  
  1104. .caption:first-of-type{
  1105. border:none;
  1106. }
  1107.  
  1108. .p_answer .caption:first-of-type{
  1109. border-top:1px solid var(--borders);
  1110. }
  1111.  
  1112. .read_more_container{
  1113. display:block;
  1114. }
  1115.  
  1116. .read_more_container a{
  1117. font-weight:600;
  1118. text-decoration:none;
  1119. font-size:12pt;
  1120. }
  1121.  
  1122. .read_more_container a:after{
  1123. content: "\e922";
  1124. vertical-align:middle;
  1125. margin-left:1em;
  1126. margin-top:-5px;
  1127. display:inline-block;
  1128. font-size:15pt;
  1129. font-family: "Phosphor" !important;
  1130. color:var(--accent2);
  1131. }
  1132.  
  1133. .read_more_container a:hover:after{
  1134. content: "\f786";
  1135. }
  1136.  
  1137. .username {
  1138. display: inline-block;
  1139. vertical-align: middle;
  1140. font-weight: bold;
  1141. padding:3px 5px;
  1142. height:20px;
  1143. line-height:20px;
  1144. position:relative;
  1145. color:var(--white);
  1146. transition:0.5s;
  1147. }
  1148.  
  1149. .username img{
  1150. float:left;
  1151. width:17px;
  1152. margin:2px 15px 2px -5px;
  1153. height:17px;
  1154. border-radius:50%;
  1155. }
  1156.  
  1157. .deactive{
  1158. text-decoration:line-through;
  1159. }
  1160.  
  1161. p.tmblr-attribution {margin-top: 1em !important;}
  1162.  
  1163. /*----- TEXT -----*/
  1164.  
  1165. h1.post-title {
  1166. padding:1em 1.5em;
  1167. margin:0;
  1168. border-bottom:1px solid var(--borders);
  1169. }
  1170.  
  1171. /*----- LINK -----*/
  1172.  
  1173. a.link-wrap {display: block; border: 1px solid {color:borders};}
  1174. .link {padding: 2em;}
  1175. .link-host, .link-txt {margin-top: 1.5em;}
  1176.  
  1177. .npf-link-block {
  1178. margin-top: 1.5em;
  1179. background-color: inherit;
  1180. text-align:center;
  1181. border: 1px solid inherit;
  1182. color: inherit;
  1183. }
  1184.  
  1185. .npf-link-block a{
  1186. text-decoration:none;
  1187. background:none;
  1188. }
  1189.  
  1190. .npf-link-block a:hover{
  1191. background-size: 100%;
  1192. background: var(--white);
  1193. -webkit-background-clip: text;
  1194. -moz-background-clip: text;
  1195. -webkit-text-fill-color: {color:accent 2};
  1196. -moz-text-fill-color: {color:accent 2};
  1197. }
  1198.  
  1199. .npf-link-block .poster:before{
  1200. background:none;
  1201. }
  1202.  
  1203. .npf-link-block .description{
  1204. max-height:48px;
  1205. overflow:hidden!important;
  1206. }
  1207.  
  1208. .npf-link-block a:hover .description{
  1209. max-height:48px;
  1210. overflow:hidden!important;
  1211. }
  1212.  
  1213. .not-npf{
  1214. margin:1em!important;
  1215. margin-bottom:-1.5em!important;
  1216. }
  1217.  
  1218. /*----- PHOTO -----*/
  1219.  
  1220. img {
  1221. margin: 0;
  1222. display: block;
  1223. height: auto;
  1224. max-width: 100%;
  1225. }
  1226.  
  1227. .photo img {width: 100%;}
  1228. .vignette, #vignette {opacity: 0;}
  1229. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  1230.  
  1231. .lightbox-image, #tumblr_lightbox img {
  1232. box-shadow: none !important;
  1233. border-radius: 0 !important;
  1234. max-width: none;
  1235. }
  1236.  
  1237. #tumblr_lightbox_caption, .lightbox-caption {
  1238. color: #fff !important;
  1239. font-family: inherit;
  1240. margin-top: 1em !important;
  1241. }
  1242.  
  1243. [photoset-layout] div {
  1244. cursor: pointer;
  1245. }
  1246. [photoset-layout] {
  1247. grid-gap: 4px;
  1248. }
  1249.  
  1250. /*----- PHOTOSET -----*/
  1251.  
  1252. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  1253. margin-left: 0 !important;
  1254. margin-right: 0 !important;
  1255. }
  1256.  
  1257. .npf_inst{
  1258. margin:-2em;
  1259. margin-bottom:0;
  1260. }
  1261.  
  1262. .npf_inst{
  1263. margin:-2em;
  1264. margin-bottom:0;
  1265. }
  1266.  
  1267. p + .npf_inst {
  1268. margin-top:20px!important;
  1269. }
  1270.  
  1271. .text-caption .npf_inst:only-child {margin-bottom:-20px!important}
  1272.  
  1273. .tmblr-full{
  1274. height:100%!important;
  1275. }
  1276.  
  1277.  
  1278. /*---- POST NOTES -----*/
  1279.  
  1280. .notes {
  1281. border-top:1px solid var(--borders);
  1282. padding:20px;
  1283. }
  1284.  
  1285. .notes h1{
  1286. margin:0;
  1287. }
  1288.  
  1289. ol.notes {
  1290. max-width: 100%;
  1291. padding: 0;
  1292. border:none;
  1293. margin: 20px 0 0 0;
  1294. }
  1295.  
  1296. ol.notes li.note {
  1297. padding: 10px 40px;
  1298. list-style-type: none;
  1299. margin:1px;
  1300. position:relative;
  1301. }
  1302.  
  1303. ol.notes li.note img.avatar {
  1304. margin-right: 1em;
  1305. position:absolute;
  1306. left:0;
  1307. top:14px;
  1308. border-radius:50%;
  1309. display: block;
  1310. width: 1.25em;
  1311. height: 1.25em;
  1312. }
  1313.  
  1314. ol.notes li:after{
  1315. position:absolute;
  1316. font-family: "Phosphor" !important;
  1317. font-style: normal !important;
  1318. font-weight: normal !important;
  1319. right:0;
  1320. top:14px;
  1321. color:var(--accent2);
  1322. content: "\f936";
  1323. }
  1324.  
  1325. ol.notes li.reblog:after{
  1326. content:'\f682';
  1327. color:#56802d;
  1328. color:var(--accent1);
  1329. }
  1330.  
  1331. ol.notes li.original_post:after{
  1332. color:var(--accent3);
  1333. content:'\f958';
  1334. }
  1335.  
  1336. ol.notes li.post_attribution:after{content: "\f8d7";color:var(--borders);}
  1337.  
  1338. ol.notes li.more_notes_link_container:after{
  1339. content:'';
  1340. }
  1341.  
  1342. ol.notes li a{
  1343. font-weight: 600;
  1344. position:static;
  1345. }
  1346.  
  1347. .notes blockquote{
  1348. border:none;
  1349. color:var(--grey);
  1350. padding: 0;
  1351. opacity: 0.5;
  1352. margin: 0;
  1353. }
  1354.  
  1355. /* window positions */
  1356.  
  1357. .desc{z-index:1000;}
  1358.  
  1359. .desc{
  1360. top:calc(50vh + 160px);
  1361. {block:ifNotNavigationBox}
  1362. top:calc(50vh + 160px);
  1363. {/block:ifNotNavigationBox}
  1364. left:calc(50vw - 570px);
  1365. }
  1366.  
  1367. .nav{
  1368. z-index:100;
  1369. margin-left:-155px;
  1370. margin-top:10px;
  1371. }
  1372.  
  1373. .imagebox{
  1374. top:280px;
  1375. z-index:999999;
  1376. left:35px;
  1377. margin-top:-50px;
  1378. }
  1379.  
  1380.  
  1381. .updates{
  1382. z-index:1050;
  1383. left:400px;
  1384. top:200px;
  1385. }
  1386.  
  1387.  
  1388. /*--- MEDIA QUERIES ---*/
  1389.  
  1390.  
  1391. @media only screen and {
  1392. .chrome{
  1393. width:600px;
  1394. left:275px;
  1395. }
  1396.  
  1397. .nav{left:40px;}
  1398. .desc, .updates{
  1399. left:100px;
  1400. }
  1401. .imagebox{
  1402. margin-top:-50px;
  1403. left:calc(50vw + 330px);
  1404. }
  1405.  
  1406. {block:ifNotNavigationBox}
  1407. .chrome{
  1408. left:calc(30vw - 50px);
  1409. }
  1410.  
  1411. .imagebox{
  1412. margin-left:-50px;
  1413. }
  1414.  
  1415. .desc, .imagebox{
  1416. left:100px;
  1417. margin-top:-50px;
  1418. }
  1419. {/block:ifNotNavigationBox}
  1420.  
  1421.  
  1422. }
  1423.  
  1424.  
  1425. /*--- for mobile devices ---*/
  1426.  
  1427. @media only screen and (max-width: 720px) {
  1428. body{
  1429. overflow-x:hidden;
  1430. }
  1431. .window, .top span:not(.nom), .taezs a:before, .daynight a:before, .stick{display:none;}
  1432.  
  1433. .taezs, .daynight{width:auto;}
  1434.  
  1435. .chrome{
  1436. display:block;
  1437. width:100%;
  1438. height:100%;
  1439. overflow-x:hidden;
  1440. left:0;
  1441. top:0;
  1442. }
  1443.  
  1444. section{
  1445. height:calc(100% - 150px);
  1446. overflow-x:hidden;}
  1447.  
  1448. .bottombar{padding:20px;}
  1449.  
  1450. .draginfo{display:none;}
  1451.  
  1452. .web{
  1453. display:none!important;
  1454. }
  1455.  
  1456. .mobnav{display:block;}
  1457. }
  1458.  
  1459. /* NIGHT MODE */
  1460.  
  1461. body.night{
  1462. background:var(--black);
  1463. color:var(--white)!important;
  1464. }
  1465.  
  1466. body.night .caption span{
  1467. color:var(--white)!important;
  1468. }
  1469.  
  1470. body.night a{color:#eee;}
  1471. body.night a:hover {color:#fff;}
  1472.  
  1473. body.night .nav a{color:#eee;}
  1474. body.night .nav a:hover{color:#000!important;}
  1475.  
  1476. body.night .window{background:#000}
  1477.  
  1478. body.night .window, body.night .p_answer .caption, body.night article, body.night .secondbar, body.night .secondbar div, body.night .name:after, body.night .search:before, body.night .tablinks:after, body.night .search:before, body.night .one, body.night .two, body.night .tablinks.active, body.night .tablinks:hover, body.night .info, body.night .tags, body.night .ask-wrap, body.night h1.post-title, body.night .notes, body.night ol.notes li.post_attribution:after, body.night .caption, body.night .bottombar, body.night .intro, body.night .npf-link-block a, body.night .top {border-color:#3a3a3a;}
  1479.  
  1480. body.night section, body.night .ask-wrap, body.night .tags, body.night .info a:hover{background:#111;}
  1481.  
  1482. body.night .top, body.night .alert{background:#3a3a3a;}
  1483.  
  1484. body.night article, body.night .actual-question{background:#000;}
  1485.  
  1486. body.night .tab a:hover, body.night .tab a:hover i, body.night .tablinks:hover, body.night .tablinks:hover i, body.night .active, body.night .tablinks:hover:after{
  1487. background-color: transparent;
  1488. color:white!important;
  1489. font-weight:600;
  1490. }
  1491.  
  1492. body.night .npf-link-block a:hover{
  1493. background-size: 100%;
  1494. background: var(--black);}
  1495.  
  1496. body.night .ui-tooltip-content {border:1px solid #333;background:#000;}
  1497.  
  1498. body.night .iframe-controls--desktop {filter:invert(0%);-webkit-filter:invert(0%);}
  1499.  
  1500. a.pinned-post, a.pinned-post i {font-weight: bold; color: #3cb065!important;}
  1501.  
  1502. body.night .daynight i:before{
  1503. content: "\f2fe";
  1504. }
  1505.  
  1506. {block:permalinkpage}.info a:hover{background:none!important;}{/block:permalinkpage}
  1507.  
  1508. </style>
  1509. </head>
  1510.  
  1511. <body {block:ifDarkModeDefault}class="night"{/block:ifDarkModeDefault}>
  1512.  
  1513.  
  1514. <main>
  1515.  
  1516. {block:ifSidebarImageBox}
  1517. <!-- sidebar image -->
  1518. <div class="window imagebox" style="top:240px!important;left:150px!important;">
  1519. <div class="top">
  1520. <i class="ph ph-image-square"></i>C:\Photos\FFXV\Aerith Gainsborough.gif
  1521. <span>
  1522. <i class="ph-dots-three-outline"></i>
  1523. <i class="ph-trash"></i>
  1524. </span>
  1525. </div>
  1526. <div class="img"></div>
  1527. </div>
  1528. {/block:ifSidebarImageBox}
  1529.  
  1530.  
  1531.  
  1532. <div class="inner">
  1533.  
  1534. </div>
  1535. {block:ifNotNavigationBox}
  1536. <div class="desc_links">
  1537. {block:ifHomeLink}<a href="/">{text:Home Link}</a>{/block:ifHomeLink}
  1538. {block:AskEnabled}{block:ifAskLink}<a href="/ask">{text:Ask Link}</a>{/block:ifAskLink}{/block:AskEnabled}
  1539. {block:ifArchiveLink}<a href="/archive">{text:Archive Link}</a>{/block:ifArchiveLink}
  1540. {block:SubmissionsEnabled}{block:ifSubmitLink}<a href="/submit">{text:Submit Link}</a>{/block:ifSubmitLink}{/block:SubmissionsEnabled}
  1541. {block:ifLink1}<br><a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  1542. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  1543. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  1544. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  1545. </div>
  1546. {block:ifNotNavigationBox}
  1547. </div>
  1548.  
  1549.  
  1550.  
  1551.  
  1552.  
  1553.  
  1554. <!---------------------------- STUFF TO EDIT ------------------------------>
  1555.  
  1556.  
  1557.  
  1558. <!-- updates box - disable this from the customisation screen if you don't want it -->
  1559. {block:ifUpdatesBox}
  1560. <div class="window updates">
  1561. <div class="top"><i class="ph-plus"></i>updates<span><i class="ph-dots-three-outline"></i><i class="ph-trash"></i></span></div>
  1562.  
  1563. <!-- updates box content -->
  1564. <div class="inner">
  1565.  
  1566. <!-- make each new dot with <li>, and </li> at the end if it's being a bit iffy. once the task is completed, change the li to li class="complete". -->
  1567.  
  1568.  
  1569. <li class="complete">buy bread</li>
  1570. <li>eat bread</li>
  1571.  
  1572.  
  1573. <!-- to make a little break put in <hr>, to put a line break put in <br> -->
  1574. <hr/>
  1575. <b><i class="ph-television-fill"></i> watching:</b> shows<br>
  1576. <b><i class="ph-book-fill"></i> reading:</b> books
  1577.  
  1578.  
  1579. </div></div>
  1580. {/block:ifUpdatesBox}
  1581.  
  1582.  
  1583. <!-- navigation box - disable this from the customisation screen if you don't want it -->
  1584. {block:ifNavigationBox}
  1585. <div class="window nav" style="left:200px;top:280px!important;width:1050px;">
  1586. <!-- title, controls -->
  1587. <div class="top"><i class="ph ph-folder-notch-open"></i><big>Explorer.exe</big></b><span><i class="ph-minus"></i><i class="ph-square"></i><i class="ph-x"></i></span></div>
  1588.  
  1589.  
  1590. <!-- second header -->
  1591. <div class="secondbar">
  1592. <div class="name" style="height:26px!important; padding-top:5px;">{Name} <i class="ph-caret-right"></i> explore</div>
  1593.  
  1594. <!-- search bar -->
  1595. <div class="search" style="height:26px!important; padding-top:5px;"><form action="/search" method="get" style="height:26px!important;"><b><input type="text" name="q" value="{SearchQuery}" placeholder="Search blog ..."/></b></form></div>
  1596. </div>
  1597.  
  1598.  
  1599. <!-- nav content -->
  1600. <div class="tabs">
  1601.  
  1602. <!-- nav pane -->
  1603. <div class="tab one">
  1604.  
  1605. <!-- start section -->
  1606. <span><i class="ph-map-pin-fill"></i> Quick Access</span>
  1607. <a href="/"><i class="ph-house-line-fill"></i> Index</a>
  1608. <a href="/ask"><i class="ph-paper-plane-tilt-fill"></i> Message</a>
  1609. <a href="/archive"><i class="ph-clock-fill"></i> Archive</a>
  1610.  
  1611. <span style="margin-top:6px!important;"></span>
  1612. <span><i class="ph-map-pin-fill"></i> Personal Links</span>
  1613. <a href="/tagged/me"><i class="ph-user-fill"></i> About</a>
  1614. <a href="/tagged/myedit"><i class="ph-computer-tower-fill"></i> My Edits</a>
  1615. <a href="https://oflosechesters.tumblr.com"><i class="ph-heart-straight-fill"></i> Kermit</a>
  1616.  
  1617.  
  1618.  
  1619. <span style="margin-top:6px!important;"><i class="ph-map-pin-fill"></i> General Links</span>
  1620. <a href="/tagged/video-games"><i class="ph-house-line-fill"></i> Video Games</a>
  1621. <a href="/tagged/films"><i class="ph-paper-plane-tilt-fill"></i> Films / Television</a>
  1622. <a href="/tagged/literature"><i class="ph-clock-fill"></i> Literature</a></a>
  1623.  
  1624.  
  1625. <span style="margin-top:0px!important;"></span>
  1626. <span style="margin-bottom:-0px!important;"><i class="ph-map-pin-fill"></i> Video Games</span>
  1627. <div class="tablinks" onclick="openCity(event, 'tab1')"><i class="ph-folder-fill"></i>Final Fantasy</i></div>
  1628.  
  1629.  
  1630. <div class="tablinks" onclick="openCity(event, 'tab2')"><i class="ph-folder-fill"></i>World of Warcraft</i></div>
  1631.  
  1632. <div class="tablinks" onclick="openCity(event, 'tab3')"><i class="ph-folder-fill"></i>Assassin's Creed</i></div>
  1633.  
  1634.  
  1635. <div class="tablinks" onclick="openCity(event, 'tab4')"><i class="ph-folder-fill"></i>Watch Dogs</i></div>
  1636.  
  1637.  
  1638.  
  1639.  
  1640. <span style="margin-top:6px;"><i class="ph-folders-fill"></i> Other</span>
  1641.  
  1642. <div class="tablinks" onclick="openCity(event, 'tab5')"><i class="ph-folder-fill"></i>Shadowhunter Chronicles</i></div>
  1643.  
  1644.  
  1645. <div class="tablinks" onclick="openCity(event, 'tab6')"><i class="ph-folder-fill"></i>Tolkien's Legendarium</i></div>
  1646.  
  1647.  
  1648.  
  1649. </div>
  1650. <!-- end nav pane -->
  1651.  
  1652.  
  1653. <!-- inner folders --->
  1654.  
  1655.  
  1656. <!--
  1657.  
  1658. how to change the icons!
  1659.  
  1660. go to https://phosphoricons.com/
  1661.  
  1662. you can either use "regular" or "fill" (top left corner)
  1663. find an icon you like, click on it, and scroll to the bottom of the box that pops up, where it says HTML/CSS. copy the class name and replace it like in the examples below.
  1664.  
  1665. --->
  1666.  
  1667. <div class="tab two">
  1668.  
  1669.  
  1670.  
  1671. <!-- FINAL FANTASY -->
  1672.  
  1673. <div id="tab1" class="tabcontent">
  1674. <span><i class="ph-folder-fill"></i> Final Fantasy VII</span>
  1675. <a href="/tagged/ffvii"><i class="ph-folder-fill"></i>General / All</a>
  1676. <a href="/tagged/aerith-gainsborough"><i class="ph-folder-fill"></i>Aerith Gainsborough</a>
  1677. <a href="/tagged/cloud-strife"><i class="ph-folder-fill"></i>Cloud Strife</a>
  1678. <a href="/tagged/reno-sinclair"><i class="ph-folder-fill"></i>Reno Sinclair
  1679. </a>
  1680. <a href="/tagged/sephiroth"><i class="ph-folder-fill"></i>Sephiroth
  1681. </a>
  1682.  
  1683.  
  1684. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> Final Fantasy X</span>
  1685. <a href="/tagged/ffx"><i class="ph-folder-fill"></i>General / All</a>
  1686. <a href="/tagged/yuna"><i class="ph-folder-fill"></i>Yuna</a>
  1687. <a href="/tagged/tidus"><i class="ph-folder-fill"></i>Tidus</a>
  1688. <a href="/tagged/kimahri"><i class="ph-folder-fill"></i>Kimahri</a>
  1689. <a href="/tagged/wakka"><i class="ph-folder-fill"></i>Wakka</a>
  1690. <a href="/tagged/lulu"><i class="ph-folder-fill"></i>Lulu</a>
  1691. <a href="/tagged/auron"><i class="ph-folder-fill"></i>Auron</a>
  1692. <a href="/tagged/rikku"><i class="ph-folder-fill"></i>Rikku</a>
  1693.  
  1694.  
  1695. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> Final Fantasy XV</span>
  1696. <a href="/tagged/ffxv"><i class="ph-folder-fill"></i>General / All</a>
  1697. <a href="/tagged/noctis lucis caelum"><i class="ph-folder-fill"></i>Noctis Lucis Caelum</a>
  1698. <a href="/tagged/lunafreya nox fleuret"><i class="ph-folder-fill"></i>Lunafreya Nox Fleuret</a>
  1699. <a href="/tagged/ravus nox fleuret"><i class="ph-folder-fill"></i>Ravus Nox Fleuret</a>
  1700. <a href="/tagged/chocobros"><i class="ph-folder-fill"></i>Chocobros</a>
  1701. <a href="/tagged/ignis-scientia"><i class="ph-folder-fill"></i>Ignis Scientia</a>
  1702. <a href="/tagged/prompto-argentum"><i class="ph-folder-fill"></i>Prompto Argentum</a>
  1703. <a href="/tagged/gladiolus-amicitia"><i class="ph-folder-fill"></i>Gladiolus Amicitia</a>
  1704. <a href="/tagged/ardyn-izunia"><i class="ph-folder-fill"></i>Ardyn Izunia</a>
  1705.  
  1706. </div>
  1707.  
  1708. <!-- /FINAL FANTASY -->
  1709.  
  1710.  
  1711.  
  1712.  
  1713.  
  1714. <!-- WORLD OF WARCRAFT -->
  1715.  
  1716. <div id="tab2" class="tabcontent">
  1717. <span><i class="ph-folder-fill"></i> World of Warcraft</span>
  1718.  
  1719. <a href="/tagged/world-of-warcraft"><i class="ph-folder-fill"></i>General / All</a>
  1720.  
  1721.  
  1722. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> Horde</span>
  1723.  
  1724. <a href="/tagged/thrall"><i class="ph-folder-fill"></i>Thrall / Go'el</a>
  1725. <a href="/tagged/baine-bloodhoof"><i class="ph-folder-fill"></i>Baine Bloodhoof</a>
  1726. <a href="/tagged/sylvanas-windrunner"><i class="ph-folder-fill"></i>Sylvanas Windrunner</a>
  1727.  
  1728.  
  1729.  
  1730. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> Alliance</span>
  1731.  
  1732. <a href="/tagged/jaina-proudmoore"><i class="ph-folder-fill"></i>Jaina Proudmoore</a>
  1733. <a href="/tagged/anduin-wrynn"><i class="ph-folder-fill"></i>Anduin Wrynn</a>
  1734.  
  1735.  
  1736.  
  1737. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> Other</span>
  1738.  
  1739. <a href="/tagged/illidan-stormrage"><i class="ph-folder-fill"></i>Illidan Stormrage</a>
  1740. <a href="/tagged/arthas menethil"><i class="ph-folder-fill"></i>Arthas Menethil</a>
  1741.  
  1742. </div>
  1743.  
  1744. <!-- /WORLD OF WARCRAFT -->
  1745.  
  1746.  
  1747.  
  1748.  
  1749.  
  1750. <!-- ASSASSIN'S CREED -->
  1751.  
  1752. <div id="tab3" class="tabcontent">
  1753. <span><i class="ph-folder-fill"></i> Assassin's Creed</span>
  1754. <a href="/tagged/assassin's-creed"><i class="ph-folder-fill"></i>General / All</a>
  1755.  
  1756.  
  1757. <span><i class="ph-folder-fill"></i> Assassin's Creed: Modern</span>
  1758. <a href="/tagged/desmond-miles"><i class="ph-folder-fill"></i>Desmond Miles</a>
  1759. <a href="/tagged/clay-kaczmarek"><i class="ph-folder-fill"></i>Clay Kaczmarek</a>
  1760. <a href="/tagged/shaun-hastings"><i class="ph-folder-fill"></i>Shaun Hastings</a>
  1761.  
  1762.  
  1763. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> Assassin's Creed: I</span>
  1764. <a href="/tagged/altaïr-ibn-la%27ahad"><i class="ph-folder-fill"></i>Altaïr Ibn-La'Ahad</a>
  1765.  
  1766.  
  1767. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> Assassin's Creed: II/B/R/E</span>
  1768.  
  1769. <a href="/tagged/yuna%3A-visage"><i class="ph-folder-fill"></i>Ezio Auditore</a>
  1770. <a href="/tagged/federico-auditore"><i class="ph-folder-fill"></i>Federico Auditore</a>
  1771. <a href="/tagged/cristina-vespucci"><i class="ph-folder-fill"></i>Cristina Vespucci</a>
  1772. <a href="/tagged/leonardo-da-vinci"><i class="ph-folder-fill"></i>Leonardo da Vinci</a>
  1773. <a href="/tagged/caterina-sforza"><i class="ph-folder-fill"></i>Caterina Sforza</a>
  1774. <a href="/tagged/niccolo-machiavelli"><i class="ph-folder-fill"></i>Niccolo Machiavelli</a>
  1775. <a href="/tagged/suleiman"><i class="ph-folder-fill"></i>Suleiman I</a>
  1776.  
  1777.  
  1778.  
  1779. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> Assassin's Creed: Unity</span>
  1780.  
  1781. <a href="/tagged/arno-dorian"><i class="ph-folder-fill"></i>Arno Dorian</a>
  1782.  
  1783.  
  1784. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> Assassin's Creed: Syndicate</span>
  1785.  
  1786. <a href="/tagged/evie-frye"><i class="ph-folder-fill"></i>Evie Frye</a>
  1787.  
  1788.  
  1789.  
  1790. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> Assassin's Creed: Origins</span>
  1791.  
  1792. <a href="/tagged/bayek-of-siwa"><i class="ph-folder-fill"></i>Bayek of Siwa</a>
  1793.  
  1794.  
  1795.  
  1796. </div>
  1797.  
  1798. <!-- /ASSASSIN'S CREED -->
  1799.  
  1800.  
  1801.  
  1802.  
  1803.  
  1804. <!-- WATCH DOGS -->
  1805.  
  1806. <div id="tab4" class="tabcontent">
  1807. <span><i class="ph-folder-fill"></i> Watch Dogs</span>
  1808. <a href="/tagged/watch-dogs"><i class="ph-folder-fill"></i>General / All</a>
  1809. <a href="/tagged/aiden-pearce"><i class="ph-folder-fill"></i>Aiden Pearce</a>
  1810.  
  1811.  
  1812. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> Watch Dogs 2</span>
  1813.  
  1814. <a href="/tagged/watch-dogs-2"><i class="ph-folder-fill"></i>General / All</a>
  1815. <a href="/tagged/marcus-holloway"><i class="ph-folder-fill"></i>Marcus Holloway</a>
  1816. <a href="/tagged/wrench"><i class="ph-folder-fill"></i>Wrench</a>
  1817.  
  1818. </div>
  1819.  
  1820. <!-- /WATCH DOGS -->
  1821.  
  1822.  
  1823.  
  1824.  
  1825.  
  1826. <!-- SHADOWHUNTER CHRONICLES -->
  1827.  
  1828. <div id="tab5" class="tabcontent">
  1829. <span><i class="ph-folder-fill"></i> The Shadowhunter Chronicles</span>
  1830. <a href="/tagged/the-shadowhunter-chronicles"><i class="ph-folder-fill"></i>General / All</a>
  1831.  
  1832.  
  1833. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> The Mortal Instruments</span>
  1834. <a href="/tagged/the%20mortal%20instruments"><i class="ph-folder-fill"></i>General / All</a>
  1835. <a href="/tagged/clary-fray"><i class="ph-folder-fill"></i>Clary Fray</a>
  1836. <a href="/tagged/jace-herondale"><i class="ph-folder-fill"></i>Jace Herondale</a>
  1837. <a href="/tagged/isabelle-lightwood"><i class="ph-folder-fill"></i>Isabelle Lightwood</a>
  1838. <a href="/tagged/alec-lightwood"><i class="ph-folder-fill"></i>Alec Lightwood</a>
  1839. <a href="/tagged/magnus-bane"><i class="ph-folder-fill"></i>Magnus Bane</a>
  1840. <a href="/tagged/simon-lewis"><i class="ph-folder-fill"></i>Simon Lewis</a>
  1841. <a href="/tagged/valentine-morgenstern"><i class="ph-folder-fill"></i>Valentine Morgenstern</a>
  1842. <a href="/tagged/jocelyn-fray"><i class="ph-folder-fill"></i>Jocelyn Fray</a>
  1843. <a href="/tagged/maryse-trueblood"><i class="ph-folder-fill"></i>Maryse Trueblood</a>
  1844. <a href="/tagged/luke-garroway"><i class="ph-folder-fill"></i>Luke Garroway</a>
  1845.  
  1846.  
  1847. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> The Infernal Devices</span>
  1848. <a href="/tagged/the%20infernal%20devices"><i class="ph-folder-fill"></i>General / All</a>
  1849. <a href="/tagged/tessa-gray"><i class="ph-folder-fill"></i>Tessa Gray</a>
  1850. <a href="/tagged/will-herondale"><i class="ph-folder-fill"></i>Will Herondale</a>
  1851. <a href="/tagged/jem-carstairs"><i class="ph-folder-fill"></i>Jem Carstairs</a>
  1852.  
  1853.  
  1854. </div>
  1855.  
  1856. <!-- /SHADOWHUNTER CHRONICLES -->
  1857.  
  1858.  
  1859.  
  1860.  
  1861.  
  1862. <!-- TOLKIEN -->
  1863.  
  1864. <div id="tab6" class="tabcontent">
  1865. <span><i class="ph-folder-fill"></i> Tolkien's Legendarium
  1866. </span>
  1867. <a href="/tagged/tolkien"><i class="ph-folder-fill"></i>General / All</a>
  1868.  
  1869.  
  1870.  
  1871.  
  1872.  
  1873. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> The Hobbit</span>
  1874. <a href="/tagged/the-hobbit"><i class="ph-folder-fill"></i>General / All</a>
  1875. <a href="/tagged/bilbo-baggins"><i class="ph-folder-fill"></i>Bilbo Baggins</a>
  1876.  
  1877.  
  1878. <span style="margin-top:6px;"><i class="ph-folder-fill"></i> The Lord of the Rings</span>
  1879.  
  1880. <a href="/tagged/lord-of-the-rings"><i class="ph-folder-fill"></i>General / All</a>
  1881. <a href="/tagged/the-fellowship-of-the-ring"><i class="ph-folder-fill"></i>Fellowship of the Ring</a>
  1882. <a href="/tagged/the-two-towers"><i class="ph-folder-fill"></i>The Two Towers</a>
  1883. <a href="/tagged/the-return-of-the-king"><i class="ph-folder-fill"></i>Return of the King</a>
  1884. <p>
  1885. <a href="/tagged/frodo-baggins"><i class="ph-folder-fill"></i>Frodo Baggins</a>
  1886. <a href="/tagged/samwise-gamgee"><i class="ph-folder-fill"></i>Samwise Gamgee</a>
  1887. <a href="/tagged/aragorn"><i class="ph-folder-fill"></i>Aragorn II Elessar</a>
  1888. <a href="/tagged/legolas"><i class="ph-folder-fill"></i>Legolas Thranduillon</a>
  1889. <a href="/tagged/arwen"><i class="ph-folder-fill"></i>Arwen Undómiel</a>
  1890.  
  1891. </div>
  1892.  
  1893. <!-- /TOLKIEN -->
  1894.  
  1895. <!-- 03 navigation box begin -->
  1896. <div id="tab2" class="tabcontent">
  1897. <span><i class="ph-info-fill"></i> Section subtitle</span>
  1898. <a href="/"><i class="ph-link"></i>Tag name</a>
  1899. <a href="/"><i class="ph-link"></i>Tag name</a>
  1900. <a href="/"><i class="ph-link"></i>Tag name</a>
  1901. <a href="/"><i class="ph-link"></i>Tag name</a>
  1902. </div>
  1903. <!-- 03 navigation box end -->
  1904.  
  1905. <!-- about me box. delete if you don't want. -->
  1906. <div id="tab3" class="tabcontent about">
  1907. <span><i class="ph-info-fill"></i>about me</span>
  1908. <!-- descriptors -->
  1909. <a><i class="ph-user-circle"></i>name</a>
  1910. <a><i class="ph-moon-stars"></i>sign</a>
  1911. <a><i class="ph-thumbs-up"></i>likes</a>
  1912. <a><i class="ph-thumbs-down"></i>dislikes</a>
  1913.  
  1914. <div class="intro">
  1915. <!-- text -->
  1916. Here is where you can chat about how great you are.
  1917. <p>
  1918. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1919.  
  1920. </div>
  1921. </div>
  1922.  
  1923. </div>
  1924.  
  1925.  
  1926.  
  1927.  
  1928. </div>
  1929.  
  1930. <div class="bottombar"><div class="draginfo"></div></div>
  1931.  
  1932. </div>
  1933. <!-- end nav window -->
  1934. {/block:ifNavigationBox}
  1935.  
  1936. <!-------------------------- END OF STUFF TO EDIT -------------------------->
  1937.  
  1938.  
  1939.  
  1940.  
  1941.  
  1942.  
  1943.  
  1944.  
  1945.  
  1946.  
  1947. <!-- start posts -->
  1948. <div class="window chrome" style="left:375px!important; top:75px!important; height:750px;";>
  1949. <div class="top">
  1950. <span class="nom">
  1951. <i class="ph ph-compass"></i><big>C:\Documents\Posts</big></b>
  1952. </span>
  1953. <span>
  1954. <i class="ph-minus"></i>
  1955. <i class="ph-square"></i>
  1956. <i class="ph-x"></i>
  1957. </span>
  1958. </div>
  1959. <!-- second header -->
  1960. <div class="secondbar">
  1961. <div class="controls">
  1962.  
  1963. <!-- pagination -->
  1964. <span style="margin-top:12px!important;"></span>
  1965. {block:Pagination}
  1966. {block:PreviousPage}<a href="{PreviousPage}" title="previous page">{/block:PreviousPage}<i class="ph-arrow-left"></i></a>
  1967. {block:NextPage}<a href="{NextPage}" title="next page">{/block:NextPage}<i class="ph-arrow-right"></i></a>
  1968. {/block:Pagination}
  1969. <!-- day pagination -->
  1970. {block:DayPagination}{block:PreviousDayPage}
  1971. <a href="{PreviousDayPage}" title="{ShortMonth} {DayOfMonth}">{/block:PreviousDayPage}<i class="ph-arrow-left"></i></a>
  1972. {block:NextDayPage}
  1973. <a href="{NextDayPage}" title="{ShortMonth} {DayOfMonth}">{/block:NextDayPage}<i class="ph-arrow-right"></i></a>
  1974. {/block:DayPagination}
  1975.  
  1976. {block:PermalinkPagination}
  1977. {block:PreviousPost}
  1978. <a href="{PreviousPost}" title="previous post">
  1979. {/block:PreviousPost}<i class="ph-arrow-left"></i></a>
  1980. {block:NextPost}
  1981. <a href="{NextPost}" title="next post">{/block:NextPost}<i class="ph-arrow-right"></i></a>
  1982. {/block:PermalinkPagination}
  1983.  
  1984. <a href="" title="refresh the page"><i class="ph-arrow-clockwise"></i></a>
  1985. <a href="/" title="go to index"><i class="ph-house"></i></a>
  1986. </div>
  1987.  
  1988. <div class="name web" style="height:25px!important; padding-top:5px;font-family:calibri!important; font-size:10px!important;"><i class="ph ph-lock-fill" style="font-family:calibri!important; font-size:10px!important;"></i>{name}.tumblr.com{block:tagpage}/tagged/{tag}{/block:tagpage}{block:PermalinkPage}/post/{PostID}{block:PermalinkPage}{block:daypage}/day/{year}/{MonthNumberWithZero}/{DayOfMonthWithZero}{/block:daypage}{block:homepage}/page/{CurrentPage}{/block:homepage}</div>
  1989.  
  1990.  
  1991.  
  1992. </div>
  1993.  
  1994. <!-- post container -->
  1995. <section class="cont">
  1996.  
  1997. {block:Posts}
  1998. <!-- post -->
  1999. <article class="posts p_{PostType}" id="{PostID}" post-type="{PostType}">
  2000. <div class="postwrap">
  2001. {block:indexpage}
  2002. <div class="stick">
  2003.  
  2004. {block:rebloggedfrom}
  2005. <a href="{ReblogRootURL}" title="posted by {ReblogRootName}"><i class="ph-lightbulb-fill"></i></a>
  2006. {/block:rebloggedfrom}
  2007. <a title="view permalink page" href="{Permalink}"><i class="ph-note-fill"></i></a>
  2008. <a title="reblog this post" href="{ReblogURL}" target="_blank"><i class="ph-arrows-clockwise-bold"></i></a>
  2009. <a class="likeb" title="like this post" href="#">{LikeButton}<span class="actual-button"><i class="ph-heart-straight-fill"></i></a>
  2010.  
  2011. </div>
  2012. {block:indexpage}
  2013.  
  2014. {block:Text}
  2015. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  2016. {block:NotReblog}
  2017. <li class="caption text-caption">
  2018. {Body}
  2019. </li>
  2020. {/block:NotReblog}
  2021. {block:RebloggedFrom}
  2022. {block:Reblogs}
  2023. <li class="caption text-caption">
  2024.  
  2025. <div class="username source-head {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}"><img src="{PortraitURL-64}">{Username}</a></div>
  2026. {Body}
  2027. </li>
  2028. {/block:Reblogs}
  2029. {/block:RebloggedFrom}
  2030. {/block:Text}
  2031.  
  2032. {block:Link}
  2033. <div class="npf-link-block has-poster not-npf">
  2034.  
  2035. <a target="_blank" href="{URL}"><div class="poster" {block:Thumbnail}style="background:url({Thumbnail-HighRes}); background-size:cover;"{/block:Thumbnail}><div class="title">{Name}</div></div><div class="bottom">
  2036. <div class="description">{block:Excerpt}{Excerpt}{/block:Excerpt}</div>
  2037. <div class="site-name">{block:Host}{Host}{/block:Host}</div>
  2038.  
  2039. </div></a></div>
  2040.  
  2041.  
  2042. {block:Description}
  2043. {block:NotReblog}
  2044. <li class="caption">
  2045. {Description}
  2046. </li>
  2047. {/block:NotReblog}
  2048. {/block:Description}
  2049. {block:RebloggedFrom}
  2050. {block:Reblogs}
  2051. <li class="caption">
  2052.  
  2053. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}"><img src="{PortraitURL-64}">{Username}</a></div>
  2054. {Body}
  2055. </li>
  2056. {/block:Reblogs}
  2057. {/block:RebloggedFrom}
  2058. {/block:Link}
  2059.  
  2060. {block:Photo}
  2061. <div class="photo">
  2062. {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}
  2063. </div>
  2064. {block:Caption}
  2065. {block:NotReblog}
  2066. <li class="caption">
  2067. {Caption}
  2068. </li>
  2069. {/block:NotReblog}
  2070. {block:RebloggedFrom}
  2071. {block:Reblogs}
  2072. <li class="caption">
  2073.  
  2074. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}"><img src="{PortraitURL-64}">{Username}</a></div>
  2075. {Body}
  2076. </li>
  2077. {/block:Reblogs}
  2078. {/block:RebloggedFrom}
  2079. {/block:Caption}
  2080. {/block:Photo}
  2081.  
  2082. {block:Photoset}
  2083. <div class="photo"><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></div>
  2084. {block:Caption}
  2085. {block:NotReblog}
  2086. <li class="caption">
  2087. {Caption}
  2088. </li>
  2089. {/block:NotReblog}
  2090. {block:RebloggedFrom}
  2091. {block:Reblogs}
  2092. <li class="caption">
  2093.  
  2094. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}"><img src="{PortraitURL-64}">{Username}</a></div>
  2095. {Body}
  2096. </li>
  2097. {/block:Reblogs}
  2098. {/block:RebloggedFrom}
  2099. {/block:Caption}
  2100. {/block:Photoset}
  2101.  
  2102. {block:Video}
  2103. <div class="video">{Video-400}</div>
  2104. {block:Caption}
  2105. {block:NotReblog}
  2106. <li class="caption">
  2107. {Caption}
  2108. </li>
  2109. {/block:NotReblog}
  2110. {block:RebloggedFrom}
  2111. {block:Reblogs}
  2112. <li class="caption">
  2113.  
  2114. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}"><img src="{PortraitURL-64}">{Username}</a></div>
  2115. {Body}
  2116. </li>
  2117. {/block:Reblogs}
  2118. {/block:RebloggedFrom}
  2119. {/block:Caption}
  2120. {/block:Video}
  2121.  
  2122. {block:Quote}
  2123. <div class="quote">{Quote}</div>
  2124. {block:Source}<div class="source">{Source}</div>{/block:Source}
  2125. {/block:Quote}
  2126.  
  2127. {block:Chat}
  2128. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  2129. <ul class="chat">{block:Lines}
  2130. <li>
  2131. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  2132. {Line}
  2133. </li>
  2134. {/block:Lines}</ul>
  2135. {/block:Chat}
  2136.  
  2137.  
  2138.  
  2139.  
  2140. {block:Answer}
  2141. <div class="ask-wrap actual-question">
  2142. <div class="askerr">
  2143. <div class="asking">{Asker}</div></div>
  2144. <div class="question">{Question}</div>
  2145. </div>
  2146. {block:Answerer}
  2147.  
  2148. <div class="ask-wrap">
  2149. <div class="askerr">
  2150. <div class="asking">{Asker}</div></div>
  2151. <div class="question">{Question}</div>
  2152. </div>
  2153.  
  2154. {/block:Answerer}
  2155. {block:NotReblog}
  2156. <div class="ask-wrap">
  2157. <div class="question">{Replies}</div>
  2158. </div>
  2159.  
  2160. {/block:NotReblog}
  2161. {block:RebloggedFrom}
  2162. {block:Reblogs}
  2163. <li class="caption">
  2164.  
  2165. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}"><img src="{PortraitURL-64}">{Username}</a></div>
  2166. {Body}
  2167. </li>
  2168. {/block:Reblogs}
  2169. {/block:RebloggedFrom}
  2170. {/block:Answer}
  2171.  
  2172. {block:Audio}
  2173. <div class="audiopost" {block:albumart}style="background:url({AlbumArtURL}); background-size:cover;"{/block:albumart}>
  2174.  
  2175. <div class="audiobox">
  2176. <div class="button">
  2177. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  2178. </div>
  2179. </div>
  2180. {block:AlbumArt}
  2181. <img src="{AlbumArtURL}" class="album-art">
  2182. {/block:AlbumArt}
  2183. <div class="audioinfo">
  2184. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  2185. {block:Artist}<li>{Artist}</li>{/block:Artist}
  2186. {block:Album}<li>{Album}</li>{/block:Album}
  2187. </div>
  2188. </div>
  2189. {block:Caption}
  2190. {block:NotReblog}
  2191. <li class="caption">
  2192. {Caption}
  2193. </li>
  2194. {/block:NotReblog}
  2195. {block:RebloggedFrom}
  2196. {block:Reblogs}
  2197. <li class="caption">
  2198.  
  2199. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}"><img src="{PortraitURL-64}">{Username}</a></div>
  2200. {Body}
  2201. </li>
  2202. {/block:Reblogs}
  2203. {/block:RebloggedFrom}
  2204. {/block:Caption}
  2205. {/block:Audio}
  2206.  
  2207. <!----- INFO ----->
  2208.  
  2209. {block:Date}
  2210. <div class="info {block:permalinkpage}perma{/block:permalinkpage}">
  2211.  
  2212. <!-- permalink page stuff --->
  2213. {block:permalinkpage}
  2214. <a href="{Permalink}"><i class="ph-clock"></i></i><b>Posted:</b> {timeago}</a>
  2215. <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonthWithZero}"><i class="ph-calendar"></i><b>On:</b> {dayofmonthwithzero} {shortmonth} {shortyear}</a>
  2216. {block:RebloggedFrom}
  2217. <a href="{ReblogParentURL}"><i class="ph-path"></i><b>Reblogged from:</b> {ReblogParentName}</a>
  2218. <a href="{ReblogRootURL}"><i class="ph-note-pencil"></i><b>Originally posted by:</b> {ReblogRootName}</a>
  2219. {/block:RebloggedFrom}
  2220.  
  2221. {block:ContentSource}<a href="{SourceURL}"><i class="ph-arrow-square-out"></i><b>{lang:Source}</b></a>{/block:ContentSource}
  2222. {block:permalinkpage}
  2223.  
  2224.  
  2225. <!-- index page stuff -->
  2226. <div class="index">
  2227. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post"><i class="ph-push-pin-fill"></i>{PinnedPostLabel}</a>{/block:PinnedPostLabel}
  2228.  
  2229. <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonthWithZero}" title="posted {TimeAgo} - view day page"><i class="ph-alarm-fill"></i><span class="time-ago">{TimeStamp}</span></a>
  2230. <a href="{Permalink}" title="{notecountwithlabel} - view permalink"><i class="ph-lightning-fill"></i> <span class="notecount">{NoteCount}</span></a>
  2231.  
  2232. <!-- reblog info and content source on permalink pages -->
  2233.  
  2234. </div>
  2235.  
  2236. <!----- TAGS ----->
  2237.  
  2238. </div>
  2239. {block:HasTags}
  2240. <div class="tags">
  2241. <i class="ph-tag"></i>{block:Tags}<a href="{TagURL}">&nbsp;&nbsp;{Tag}</a>{/block:Tags}
  2242. </div>
  2243. {/block:HasTags}
  2244. </div>
  2245. {/block:Date}
  2246. <!----- POST NOTES ----->
  2247.  
  2248. {block:PermalinkPage}{block:Date}
  2249. {block:NoteCount}{block:PostNotes}
  2250. <div class="notes">
  2251. <h1>{notecountwithlabel}</h1>
  2252. {PostNotes-64}
  2253. </div>
  2254. {/block:PostNotes}{/block:NoteCount}
  2255. {/block:Date}{/block:PermalinkPage}
  2256.  
  2257. </article>
  2258. {/block:Posts}
  2259. </section>
  2260. <div class="bottombar">
  2261. <div class="draginfo"></div>
  2262. <div class="mobnav">
  2263. <a href="/">home</a>
  2264. <a href="/ask">ask</a>
  2265. <a href="/archive">archive</a>
  2266. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  2267. </div>
  2268. </div>
  2269. </div>
  2270. <!-- end posts -->
  2271.  
  2272.  
  2273.  
  2274. </main>
  2275.  
  2276.  
  2277.  
  2278. <div class="daynight"><a><i class="ph-moon"></i></a></div>
  2279.  
  2280.  
  2281. <!------ LEAVE CREDIT IN TACT ------------>
  2282. <div class="taezs"><a href="https://taezs.tumblr.com"><i class="ph-anchor-fill"></i></a></div>
  2283. <!------ LEAVE CREDIT IN TACT ------------>
  2284.  
  2285.  
  2286. <script>
  2287. $(document).ready(function(){
  2288. $('.daynight').click(function(){
  2289. $('body').toggleClass('night');
  2290. });
  2291. });
  2292.  
  2293. function openCity(evt, cityName) {
  2294. var i, tabcontent, tablinks;
  2295. tabcontent = document.getElementsByClassName("tabcontent");
  2296. for (i = 0; i < tabcontent.length; i++) {
  2297. tabcontent[i].style.display = "none";
  2298. }
  2299. tablinks = document.getElementsByClassName("tablinks");
  2300. for (i = 0; i < tablinks.length; i++) {
  2301. tablinks[i].className = tablinks[i].className.replace(" active", "");
  2302. }
  2303. document.getElementById(cityName).style.display = "block";
  2304. evt.currentTarget.className += " active";
  2305. }
  2306. </script>
  2307.  
  2308. <script>
  2309. $( ".window" ).draggable({ handle: ".top" });
  2310. $('.window').on('mousedown', function(event) {
  2311. $('.window').css('z-index','1');
  2312. $( this ).css('z-index','1000');
  2313. });
  2314. </script>
  2315.  
  2316. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  2317. <script type="text/javascript">
  2318. $(document).ready(function() {
  2319. $(".time-ago").timeAgo({
  2320. });
  2321. });
  2322.  
  2323. var $container = $('.cont');
  2324. $container.find('.notecount').each(function(){
  2325. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  2326. if (n > 999) {
  2327. n = Math.floor(n / 100) / 10;
  2328. $(this).text(n + 'k');
  2329. }
  2330. });
  2331.  
  2332.  
  2333. function gatherData(images, arr) {
  2334. for (let i = 0; i < images.length; i++) {
  2335. let currentData = {
  2336. "width": images[i].getAttribute('data-width'),
  2337. "height": images[i].getAttribute('data-height'),
  2338. "low_res": images[i].getAttribute('data-lowres'),
  2339. "high_res": images[i].getAttribute('data-highres')
  2340. };
  2341. arr.push(currentData);
  2342. }
  2343. }
  2344. function getIndex(elem) {
  2345. let i = 0;
  2346. while( (elem = elem.previousElementSibling) != null ) i++;
  2347. return i;
  2348. }
  2349. function lightbox(elem) {
  2350. let currentPhotoset = elem.parentNode;
  2351. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  2352. let data = [];
  2353. gatherData(photosetPhotos, data);
  2354. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  2355. }
  2356. </script>
  2357. </body>
  2358. </html>
  2359.  
Advertisement
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!