userkai

PURPLE HAZE by KAI

Oct 4th, 2022
1,840
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 43.53 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  9. <meta charset="utf-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.  
  12. <!---
  13.  
  14.  
  15. PURPLE HAZE by kai (@heroeddiemunson)
  16. visual inspirations: dearingcodes & phantomcodes ♡
  17.  
  18. CREDITS:
  19. - base code | seyche.tumblr.com
  20. - searchbar & suggestions | glenthemes.tumblr.com
  21. - fonts | fonts.bunny.net
  22. - phosphor icons | phosphoricons.com
  23. - tippy.js tooltips | atomiks.github.io/tippyjs/
  24.  
  25.  
  26. --->
  27.  
  28.  
  29. <!---- TOOLTIPS ---->
  30. <script src="https://unpkg.com/popper.js@1"></script>
  31. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  32.  
  33.  
  34. <!----- BUNNY FONTS ---->
  35. <link href="https://fonts.bunny.net/css?family={select:body font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family={select:title font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  36.  
  37.  
  38. <!---- PHOSPHOR ICONS ---->
  39. <script src="https://unpkg.com/phosphor-icons"></script>
  40. <script src="https://unpkg.com/[email protected]"></script>
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51. <!----- VARIABLES AND OPTIONS ----->
  52.  
  53.  
  54.  
  55. <!-- IMAGES -->
  56. <meta name="image:header" content=""/>
  57. <meta name="image:sidebar" content=""/>
  58. <meta name="image:event" content=""/>
  59.  
  60.  
  61. <!-- COLORS -->
  62. <meta name="color:background" content="#ffffff"/>
  63. <meta name="color:posts" content="#f4f4f4"/>
  64. <meta name="color:titles" content="#b890db"/>
  65. <meta name="color:text" content="#707070"/>
  66. <meta name="color:tooltip text" content="#707070"/>
  67. <meta name="color:link" content="#d8bcf0"/>
  68. <meta name="color:accent 1" content="#b890db"/>
  69. <meta name="color:accent 2" content="#915fc4"/>
  70. <meta name="color:borders" content="#dcdcdc"/>
  71.  
  72.  
  73. <!-- SELECT: FONTS -->
  74. <meta name="select:body font" content="Poppins" title="Poppins"/>
  75. <meta name="select:body font" content="Advent Pro" title="Advent Pro"/>
  76. <meta name="select:body font" content="Karla" title="Karla"/>
  77. <meta name="select:body font" content="Fira Sans" title="Fira Sans"/>
  78. <meta name="select:body font" content="Inter" title="Inter"/>
  79. <meta name="select:body font" content="Lexend" title="Lexend"/>
  80. <meta name="select:body font" content="Mina" title="Mina"/>
  81. <meta name="select:body font" content="Nunito Sans" title="Nunito Sans"/>
  82. <meta name="select:body font" content="Open Sans" title="Open Sans"/>
  83. <meta name="select:body font" content="Sintony" title="Sintony"/>
  84.  
  85. <meta name="select:title font" content="Abril Fatface" title="Abril Fatface"/>
  86. <meta name="select:title font" content="Black Han Sans" title="Black Han Sans"/>
  87. <meta name="select:title font" content="DM Serif Display" title="DM Serif Display"/>
  88. <meta name="select:title font" content="Habibi" title="Habibi"/>
  89. <meta name="select:title font" content="Lora" title="Lora"/>
  90. <meta name="select:title font" content="Petrona" title="Petrona"/>
  91. <meta name="select:title font" content="Spectral" title="Spectral"/>
  92. <meta name="select:title font" content="Quando" title="Quando"/>
  93. <meta name="select:title font" content="Vollkorn" title="Vollkorn"/>
  94. <meta name="select:title font" content="Zilla Slab" title="Zilla Slab"/>
  95.  
  96. <!-- TEXT: TOPBAR LINKS -->
  97. <meta name="text:ask link title" content="ask"/>
  98. <meta name="text:submit link title" content="submit"/>
  99. <meta name="text:topbar link 1 title" content="link 1 title"/>
  100. <meta name="text:topbar link 1 url" content="/"/>
  101. <meta name="text:topbar link 1 icon" content="planet"/>
  102. <meta name="text:topbar link 2 title" content="link 2 title"/>
  103. <meta name="text:topbar link 2 url" content="/"/>
  104. <meta name="text:topbar link 2 icon" content="flying-saucer"/>
  105.  
  106.  
  107. <!-- TEXT: LEFT SIDEBAR -->
  108. <meta name="text:desktop title" content="desktop title"/>
  109. <meta name="text:tracking tag" content="tracking tag"/>
  110. <meta name="text:desktop description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra justo nec ultrices dui sapien eget."/>
  111.  
  112. <meta name="text:sidebar nav link 1" content="/" />
  113. <meta name="text:sidebar nav title 1" content="one" />
  114. <meta name="text:sidebar nav link 2" content="/" />
  115. <meta name="text:sidebar nav title 2" content="two" />
  116. <meta name="text:sidebar nav link 3" content="/" />
  117. <meta name="text:sidebar nav title 3" content="three" />
  118. <meta name="text:sidebar nav link 4" content="/" />
  119. <meta name="text:sidebar nav title 4" content="four" />
  120. <meta name="text:sidebar nav link 5" content="/" />
  121. <meta name="text:sidebar nav title 5" content="five" />
  122. <meta name="text:sidebar nav link 6" content="/" />
  123. <meta name="text:sidebar nav title 6" content="six" />
  124. <meta name="text:sidebar nav link 7" content="/" />
  125. <meta name="text:sidebar nav title 7" content="seven" />
  126. <meta name="text:sidebar nav link 8" content="/" />
  127. <meta name="text:sidebar nav title 8" content="eight" />
  128.  
  129. <meta name="text:searchbox placeholder" content="looking for something?"/>
  130. <meta name="text:search suggestion 1" content="tag link"/>
  131. <meta name="text:search suggestion 1 title" content="suggestion 1"/>
  132. <meta name="text:search suggestion 2" content="tag link"/>
  133. <meta name="text:search suggestion 2 title" content="suggestion 2"/>
  134. <meta name="text:search suggestion 3" content="tag link"/>
  135. <meta name="text:search suggestion 3 title" content="suggestion 3"/>
  136. <meta name="text:search suggestion 4" content="tag link"/>
  137. <meta name="text:search suggestion 4 title" content="suggestion 4"/>
  138. <meta name="text:search suggestion 5" content="tag link"/>
  139. <meta name="text:search suggestion 5 title" content="suggestion 5"/>
  140.  
  141.  
  142.  
  143. <!-- TEXT: RIGHT SIDEBAR -->
  144. <meta name="text:current event title" content="current event title"/>
  145. <meta name="text:event description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra justo nec ultrices dui sapien eget."/>
  146. <meta name="text:current event link 1" content="/"/>
  147. <meta name="text:current event link title 1" content="link 1"/>
  148. <meta name="text:current event link 2" content="/"/>
  149. <meta name="text:current event link title 2" content="link 2"/>
  150. <meta name="text:current event link 3" content="/"/>
  151. <meta name="text:current event link title 3" content="link 3"/>
  152.  
  153. <meta name="text:admin name" content="admin"/>
  154. <meta name="text:about blog" content="about blog. keep to one line."/>
  155.  
  156.  
  157. <!-- TEXT: POSTS -->
  158. <meta name="text:note count icon" content="rocket"/>
  159.  
  160.  
  161.  
  162.  
  163.  
  164. <!----- CSS ----->
  165. <style type="text/css">
  166.  
  167.  
  168. /*--- TOOLTIPS ---*/
  169.  
  170. .tippy-tooltip.custom-theme {
  171. background:linear-gradient(to right, {color:accent 1}, {color:accent 2});
  172. color:{color:tooltip text};
  173. text-align:center;
  174. text-transform:uppercase;
  175. letter-spacing:.1em;
  176. font-size:.95em;
  177. border-radius:10px;
  178. margin-bottom:.5em;
  179. }
  180.  
  181. /*--- SCROLLBAR ---*/
  182. ::-webkit-scrollbar {
  183. width:10px;
  184. height:20px;
  185. background:{color:background};
  186. }
  187.  
  188. ::-webkit-scrollbar-track {
  189. background:{color:background};
  190. }
  191.  
  192. ::-webkit-scrollbar-thumb {
  193. background:{color:accent 2};
  194. }
  195.  
  196. /*--- HIGHLIGHT/TEXT SELECTION ---*/
  197. ::-moz-selection { /* Firefox */
  198. color:{color:tooltip text};
  199. background:{color:accent 2};
  200. }
  201.  
  202. ::selection {
  203. color:{color:tooltip text};
  204. background:{color:accent 2};
  205. }
  206.  
  207. /*----- BASIC STYLING -----*/
  208.  
  209. body {
  210. font-family: {select:body font};
  211. color: {color:text};
  212. background-color: {color:background};
  213. font-size: 13px;
  214. line-height: 160%;
  215. word-wrap: break-word;
  216. letter-spacing: 0.04em;
  217. margin: 0;
  218. padding: 0;
  219. }
  220.  
  221. a {
  222. color: {color:link};
  223. text-decoration: none;
  224. -webkit-transition: all 0.3s;
  225. -moz-transition: all 0.3s;
  226. -ms-transition: all 0.3s;
  227. -o-transition: all 0.3s;
  228. transition: all 0.3s;
  229. }
  230.  
  231. a:hover {
  232. color: {color:accent 1};
  233. -webkit-transition: all 0.3s;
  234. -moz-transition: all 0.3s;
  235. -ms-transition: all 0.3s;
  236. -o-transition: all 0.3s;
  237. transition: all 0.3s;
  238. }
  239.  
  240. blockquote {
  241. padding: 0 0 0 1.5em;
  242. border-left: 1px solid {color:borders};
  243. margin: 1.5em 0 1.5em 1.5em;
  244. }
  245.  
  246. h1, h2, h3, h4, h5, .title {
  247. letter-spacing: 0.06em;
  248. line-height: 145%;
  249. font-weight: bold;
  250. }
  251.  
  252. h1, .title {font-size: 1.5em;}
  253. h2 {font-size: 1.3em;}
  254. h3 {font-size: 1.25em;}
  255. h4 {font-size: 1.1em;}
  256. h5 {font-size: 1em;}
  257.  
  258. small {font-size: 0.9em;}
  259. big {font-size: 1.1em;}
  260.  
  261. hr {
  262. height: 1px;
  263. border: none;
  264. box-shadow: none;
  265. background-color: {color:borders};
  266. }
  267.  
  268. pre {
  269. line-height: inherit;
  270. font-size: inherit;
  271. white-space: pre-wrap;
  272. white-space: -moz-pre-wrap;
  273. white-space: -pre-wrap;
  274. white-space: -o-pre-wrap;
  275. word-wrap: break-word;
  276. }
  277.  
  278. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  279.  
  280. /*----- STICKY TOPBAR ----*/
  281.  
  282. .header {
  283. position: relative;
  284. height: 350px;
  285. width: 100%;
  286. top: 0px;
  287. margin: auto;
  288. background:linear-gradient(to right, {color:accent 1}, {color:accent 2});
  289. }
  290. .header img {
  291. position: absolute;
  292. width: 100%;
  293. margin: auto;
  294. height: 350px;
  295. object-fit: cover;
  296. object-position:center;
  297. }
  298.  
  299. .topbar{
  300. left:0;
  301. top:330px;
  302. width:100%;
  303. height:60px;
  304. position:absolute;
  305. background:linear-gradient(to right, {color:accent 1}, {color:accent 2});
  306. z-index:999999;
  307. }
  308.  
  309. .blazeit{
  310. position:fixed;
  311. top:0;
  312. }
  313.  
  314. nav {
  315. display:flex;
  316. flex-direction:row;
  317. justify-content:center;
  318. align-items:center;
  319. gap:3em;
  320. margin-top:-47px;
  321. font-size:15px;
  322. }
  323.  
  324. nav .tblink {
  325. border-radius:100%;
  326. display:flex;
  327. justify-content:center;
  328. align-items:center;
  329. padding:5px;
  330. background:{color:accent 2};
  331. color:{color:tooltip text};
  332. -webkit-transition: all 0.4s;
  333. -moz-transition: all 0.4s;
  334. -ms-transition: all 0.4s;
  335. -o-transition: all 0.4s;
  336. transition: all 0.4s;
  337. }
  338.  
  339. nav a {
  340. display:flex;
  341. justify-content:space-between;
  342. align-items:center;
  343. gap:1em;
  344. padding:.3em;
  345. border-radius:100%;
  346. }
  347.  
  348. nav i {
  349. font-size:1.5em;
  350. -webkit-transition: all 0.4s;
  351. -moz-transition: all 0.4s;
  352. -ms-transition: all 0.4s;
  353. -o-transition: all 0.4s;
  354. transition: all 0.4s;
  355. }
  356.  
  357. .tblink:hover {
  358. transform:scale(.95);
  359. -webkit-transition: all 0.4s;
  360. -moz-transition: all 0.4s;
  361. -ms-transition: all 0.4s;
  362. -o-transition: all 0.4s;
  363. transition: all 0.4s;
  364. }
  365.  
  366. .tbicon {
  367. display:flex;
  368. align-items:center;
  369. }
  370.  
  371. .tbicon img {
  372. width:3.5em;
  373. height:3.5em;
  374. padding:3px;
  375. margin-top:5px;
  376. margin-left:10px;
  377. border-radius:100%;
  378. background:{color:accent 2};
  379. }
  380.  
  381. .tbicon img:hover {
  382. transform:rotate(360deg);
  383. -webkit-transition: all 0.6s;
  384. -moz-transition: all 0.6s;
  385. -ms-transition: all 0.6s;
  386. -o-transition: all 0.6s;
  387. transition: all 0.6s;
  388. }
  389.  
  390.  
  391.  
  392. /*-------------------------- SIDEBARS --------------------------*/
  393.  
  394.  
  395. .sbleft, .sbright {
  396. position:absolute;
  397. width:330px;
  398. left:45%;
  399. margin-left:-590px;
  400. margin-top:100px;
  401. padding:0 20px;
  402. padding-bottom:100px;
  403. border-radius:3px;
  404. transition:0.5s;
  405. }
  406. .sbright {
  407. width:330px;
  408. margin-left:400px;
  409. }
  410.  
  411. .item {
  412. background: {color:posts};
  413. font-size:20px;
  414. padding: 20px;
  415. border-radius: 10px;
  416. margin-bottom: 50px;
  417. border:1px solid transparent;
  418. }
  419.  
  420. #sbtitle {
  421. font-family:{select:title font};
  422. background:{color:background};
  423. color:{color:titles};
  424. margin-bottom:.3em;
  425. border-radius: 5px;
  426. padding: 10px;
  427. text-transform:uppercase;
  428. letter-spacing:3px;
  429. text-align:center;
  430. font-weight: bold;
  431. }
  432.  
  433. /*---------------------- SIDEBAR CONTENT ----------------------*/
  434.  
  435.  
  436.  
  437. #trackingtag {
  438. background:linear-gradient(to right, {color:accent 1}, {color:accent 2});
  439. color:{color:link hover};
  440. text-align:center;
  441. margin-bottom:1em;
  442. font-size:14px;
  443. border-radius: 5px;
  444. padding: 10px;
  445. }
  446.  
  447. #trackingtag a:hover{
  448. color:{color:tooltip text};
  449. letter-spacing:3px;
  450. }
  451.  
  452. #sbdesc {
  453. font-family:{select:body font};
  454. background:{color:background};
  455. font-size:14px;
  456. margin-top:1em;
  457. border-radius: 5px;
  458. padding: 10px;
  459. text-align:justify;
  460. }
  461.  
  462. .sideimg {
  463. margin-top:.3em;
  464. margin-bottom:.3em;
  465. border-radius:10px;
  466. }
  467.  
  468.  
  469.  
  470. /*--- MEMBERS SECTION ---*/
  471.  
  472. .members li.member-info {
  473. font-family:{select:body font};
  474. font-size:10px;
  475. text-align: left;
  476. display: flex;
  477. flex-direction: row;
  478. align-items: center;
  479. list-style-type: none;
  480. margin-top: 5px;
  481. }
  482.  
  483. .members .member-info img {
  484. width: 45px;
  485. height: 45px;
  486. margin-right: 10px;
  487. }
  488.  
  489. .members img {
  490. width: 60px;
  491. height: 60px;
  492. border-radius: 100px;
  493. padding: 1px;
  494. border:2px solid transparent;
  495. }
  496.  
  497. .members .member-info {
  498. color: {color:accent 1};
  499. font-size:17px;
  500. }
  501.  
  502. .members .member-info a:hover {
  503. color: {color:accent 2};
  504. letter-spacing:3px;
  505. }
  506.  
  507.  
  508.  
  509. /*----- NAVIGATION BOX -----*/
  510.  
  511. .sbnav {
  512. margin-top:.5em;
  513. display: grid;
  514. grid-template-columns: 1fr 1fr;
  515. grid-template-rows: 1fr 1fr;
  516. grid-auto-columns: 1fr;
  517. grid-auto-rows: 1fr;
  518. gap: 5px 5px;
  519. grid-auto-flow: row;
  520. justify-content: space-evenly;
  521. }
  522. .sbnav a {
  523. background:{color:accent 2};
  524. color: {color:link};
  525. font-size:14px;
  526. text-align: center;
  527. border: 2px solid transparent;
  528. padding: 10px;
  529. border-radius: 30px;
  530. }
  531. .sbnav a:hover {
  532. color:{color:tooltip text};
  533. transform:scale(.95);
  534. -webkit-transition: all 0.4s;
  535. -moz-transition: all 0.4s;
  536. -ms-transition: all 0.4s;
  537. -o-transition: all 0.4s;
  538. transition: all 0.4s;
  539. }
  540.  
  541. /*--- SEARCHBAR & SUGGESTIONS BY GLENTHEMES --*/
  542.  
  543. #searchblock {
  544. font:{select:body font};
  545. position:relative;
  546. top:0;left:0;
  547. margin-top:1em;
  548. margin-left:10px;
  549. }
  550.  
  551. .typing, .typing::placeholder, #searchentries, #searchentries a, .enter {
  552. background:{color:background};
  553. padding:10px;
  554. border-radius:30px;
  555. text-transform:uppercase;
  556. font-weight:bold;
  557. letter-spacing:0.5px;
  558. color:{color:accent 1};
  559. font-size:10px;
  560. text-align:center;
  561. }
  562.  
  563. .typing, #searchentries {
  564. width:175px;
  565. }
  566.  
  567. .typing {
  568. margin-bottom:0px;
  569. outline:none;
  570. border:0px solid transparent;
  571. }
  572.  
  573. .typing::placeholder {
  574. padding:0px;!important;
  575. }
  576.  
  577. #searchentries {
  578. display:none;
  579. background:{color:background};
  580. }
  581.  
  582. #searchentries a {
  583. display:block;
  584. }
  585.  
  586. #searchentries a:hover {
  587. letter-spacing:3px;
  588. color:{color:tooltip text};
  589. background:linear-gradient(to right, {color:accent 1}, {color:accent 2});
  590. }
  591.  
  592. .enter {
  593. margin-left:4px;
  594. margin-bottom:0px;
  595. outline:none;
  596. border:0px solid transparent;
  597. cursor:pointer;
  598. font-weight:bold;
  599. }
  600.  
  601.  
  602.  
  603. /*----- CURRENT EVENT BUTTONS ------*/
  604.  
  605.  
  606. #cesubtitle {
  607. background:linear-gradient(to right, {color:accent 1}, {color:accent 2});
  608. color:{color:tooltip text};
  609. text-align:center;
  610. margin-bottom:1em;
  611. font-size:14px;
  612. border-radius: 5px;
  613. padding: 10px;
  614. }
  615.  
  616. .cebuttons {
  617. margin-top:.5em;
  618. display: grid;
  619. grid-template-columns: 1fr 1fr 1fr;
  620. grid-auto-columns: 1fr;
  621. grid-auto-rows: 1fr;
  622. gap: 5px 5px;
  623. grid-auto-flow: row;
  624. justify-content: space-evenly;
  625. }
  626.  
  627. .cebuttons a {
  628. background:{color:accent 2};
  629. color: {color:link};
  630. font-size:15px;
  631. text-align: center;
  632. border: 2px solid transparent;
  633. padding: 10px;
  634. border-radius: 30px;
  635. }
  636.  
  637. .cebuttons a:hover {
  638. color:{color:tooltip text};
  639. transform:scale(.95);
  640. -webkit-transition: all 0.4s;
  641. -moz-transition: all 0.4s;
  642. -ms-transition: all 0.4s;
  643. -o-transition: all 0.4s;
  644. transition: all 0.4s;
  645. }
  646.  
  647.  
  648.  
  649. /*----- AFFILIATES SECTION -----*/
  650.  
  651. .affi {
  652. margin-top:.5em;
  653. display: grid;
  654. grid-auto-columns: 1fr;
  655. grid-auto-rows: 1fr;
  656. grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  657. justify-content: center;
  658. justify-items: center;
  659. align-items: center;
  660. grid-row-gap: 5px;
  661. }
  662.  
  663. .affi img {
  664. width: 40px;
  665. height: 40px;
  666. border-radius: 100px;
  667. padding: 3px;
  668. background:linear-gradient(to right, {color:accent 1}, {color:accent 2});
  669. }
  670.  
  671. .affi a:hover {
  672. transform:rotate(20deg);
  673. -webkit-transition: all 0.6s;
  674. -moz-transition: all 0.6s;
  675. -ms-transition: all 0.6s;
  676. -o-transition: all 0.6s;
  677. transition: all 0.6s;
  678. }
  679.  
  680.  
  681.  
  682. /*----- BLOG INFO -----*/
  683.  
  684. .bloginfo {
  685. margin-top:.8em;
  686. margin-bottom:.55em;
  687. font-size:12px;
  688. display: grid;
  689. grid-template-columns: 0.5fr 1.5fr;
  690. grid-template-rows: 1fr;
  691. grid-auto-columns: 1fr;
  692. grid-auto-rows: 1fr;
  693. gap: 5px 5px;
  694. grid-auto-flow: row;
  695. align-items: start;
  696. grid-template-areas:
  697. "binfo1 binfo2";
  698. }
  699. .binfo1 {
  700. color: {color:tooltip text};
  701. background:linear-gradient(to right, {color:accent 1}, {color:accent 2});
  702. text-transform:uppercase;
  703. font-weight: bold;
  704. padding: 5px;
  705. border-radius: 10px;
  706. justify-self: start;
  707. grid-area: binfo1;
  708. }
  709.  
  710. .binfo2 {
  711. text-align:justify;
  712. margin-left:.3em;
  713. margin-top:.5em;
  714. justify-self: middle;
  715. grid-area: binfo2;
  716. }
  717.  
  718.  
  719. /*--------------------------- POSTS --------------------------------*/
  720.  
  721. .main {
  722. position: relative;
  723. width: 100%;
  724. margin: auto;
  725. }
  726.  
  727. main {
  728. position: relative;
  729. width: 100%;
  730. margin: auto;
  731. }
  732.  
  733. section {
  734. position: relative;
  735. width:450px;
  736. margin: auto;
  737. margin-top:100px;
  738. float: center;
  739. }
  740.  
  741. article {
  742. width: 450px;
  743. position: relative;
  744. margin-bottom:150px;
  745. background: {color:posts};
  746. padding: 20px;
  747. border-radius: 10px;
  748. border:1px solid transparent;
  749. }
  750.  
  751. .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%;}
  752.  
  753. /*----- CAPTIONS -----*/
  754.  
  755. .caption {
  756. margin-top: 2em;
  757. list-style-type: none;
  758. background:{color:background};
  759. padding: 20px;
  760. border-radius: 10px;
  761. }
  762. .text-caption:first-of-type {margin-top: 0;}
  763.  
  764. .user-icon, .ask-icon {
  765. display: inline-block;
  766. vertical-align: middle;
  767. width: 2em;
  768. height: 2em;
  769. margin-right: 1em;
  770. border-radius:100%;
  771. }
  772.  
  773. .username {
  774. display: inline-block;
  775. vertical-align: middle;
  776. font-weight: bold;
  777. }
  778.  
  779. .deactive::after {
  780. content: '(deactivated)';
  781. margin-left: 1em;
  782. opacity: 0.75;
  783. color: {color:text};
  784. }
  785.  
  786. p.tmblr-attribution {margin-top: 1em !important;}
  787.  
  788. /*----- TEXT -----*/
  789.  
  790. h1.post-title {margin-top: 0;}
  791.  
  792. /*----- LINK -----*/
  793.  
  794. a.link-wrap {display: block; border: 1px solid {color:borders};}
  795. .link {padding: 2em;}
  796. .link-host, .link-txt {margin-top: 1.5em;}
  797.  
  798. .npf-link-block {
  799. margin-top: 1.5em;
  800. background-color: inherit;
  801. border: 1px solid inherit;
  802. color: inherit;
  803. }
  804.  
  805. /*----- PHOTO -----*/
  806.  
  807. img {
  808. margin: 0;
  809. display: block;
  810. height: auto;
  811. max-width: 100%;
  812. }
  813.  
  814. .photo img {width: 100%;}
  815. .vignette, #vignette {opacity: 0;}
  816. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  817.  
  818. .lightbox-image, #tumblr_lightbox img {
  819. box-shadow: none !important;
  820. border-radius: 0 !important;
  821. max-width: none;
  822. }
  823.  
  824. #tumblr_lightbox_caption, .lightbox-caption {
  825. color: #fff !important;
  826. font-family: inherit;
  827. margin-top: 1em !important;
  828. }
  829.  
  830. /*----- PHOTOSET -----*/
  831.  
  832. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  833. margin-left: 0 !important;
  834. margin-right: 0 !important;
  835. }
  836.  
  837. /*----- QUOTE -----*/
  838.  
  839. .quote {line-height: 160%; font-size: 1.25em;}
  840.  
  841. .quote p:first-of-type {margin-top: 0;}
  842. .quote p:last-of-type {margin-bottom: 0;}
  843.  
  844. .source {margin-top: 1.5em;}
  845.  
  846. /*----- CHAT -----*/
  847.  
  848. .chat {padding: 0; margin: 0;}
  849. .chat li {list-style-type: none; margin-top: 1em;}
  850. .chat li:first-of-type {margin-top: 0;}
  851. .chatter {font-weight: bold;}
  852.  
  853. p.npf_chat, p.npf_chat b {font-family: inherit;}
  854.  
  855. /*----- ANSWER -----*/
  856.  
  857. .ask-wrap {border-bottom: 1px solid {color:borders}; padding-bottom: 2em;}
  858.  
  859. .ask-wrap .asking {
  860. display: inline-block;
  861. margin-left: 1em;
  862. font-weight: bold;
  863. }
  864.  
  865. .question {
  866. margin-top: 1em;
  867. background:linear-gradient(to right, {color:accent 1}, {color:accent 2});
  868. color:{color:tooltip text};
  869. padding:10px;
  870. border-radius:10px;
  871. }
  872. .question p:first-of-type {margin-top: 0;}
  873. .question p:last-of-type {margin-bottom: 0;}
  874.  
  875. /*----- AUDIO -----*/
  876.  
  877. .audiopost {padding: 2em; border: 1px solid {color:borders};}
  878.  
  879. .album-art {
  880. z-index: 1;
  881. display: inline-block;
  882. vertical-align: middle;
  883. float: left;
  884. width: 100px;
  885. height: 100px;
  886. }
  887.  
  888. .audio-player-wrap {
  889. width: 100px;
  890. height: 100px;
  891. display: inline-block;
  892. }
  893.  
  894. .button {
  895. width: 30px;
  896. height: 30px;
  897. overflow: hidden;
  898. position: relative;
  899. z-index: 2;
  900. margin: 7px;
  901. }
  902.  
  903. .audiobox {
  904. background-color: #f2f2f2;
  905. z-index: 3;
  906. position: absolute;
  907. margin: 28px 0 0 28px;
  908. border-radius: 50%;
  909. }
  910.  
  911. .audioinfo {
  912. display: inline-block;
  913. height: 100px;
  914. max-width: calc(100% - 100px);
  915. margin-left: 100px;
  916. display: flex;
  917. justify-content: center;
  918. flex-direction: column;
  919. box-sizing: border-box;
  920. padding-left: 2em;
  921. }
  922.  
  923. .audioinfo li {list-style-type: none;}
  924. .track {font-weight: bold;}
  925.  
  926.  
  927.  
  928.  
  929. /*--------------------------- INFO --------------------------------*/
  930.  
  931. /*-- TOP INFO --*/
  932.  
  933. topinfo {
  934. height:15px;
  935. font-size:23px;
  936. margin-top:.3em;
  937. margin-bottom:.3em;
  938. display:flex;
  939. flex-direction:row;
  940. justify-content:center;
  941. align-items:center;
  942. gap:2em;
  943. }
  944.  
  945. .tibutton {
  946. background:linear-gradient(to right, {color:accent 1}, {color:accent 2});
  947. color:{color:tooltip text};
  948. border-radius:100%;
  949. display:flex;
  950. justify-content:center;
  951. align-items:center;
  952. padding:10px;
  953. -webkit-transition: all 0.4s;
  954. -moz-transition: all 0.4s;
  955. -ms-transition: all 0.4s;
  956. -o-transition: all 0.4s;
  957. transition: all 0.4s;
  958. }
  959.  
  960. .tibutton:hover {
  961. color:{color:accent 2};
  962. transform:scale(.95);
  963. -webkit-transition: all 0.4s;
  964. -moz-transition: all 0.4s;
  965. -ms-transition: all 0.4s;
  966. -o-transition: all 0.4s;
  967. transition: all 0.4s;
  968. }
  969.  
  970.  
  971.  
  972. /*-- BOTTOM INFO --*/
  973.  
  974. bottominfo {
  975. margin-top:1em;
  976. margin-bottom:1.5em;
  977. display: grid;
  978. grid-template-columns: 1fr 1fr;
  979. grid-auto-columns: 1fr;
  980. grid-auto-rows: 1fr;
  981. gap: 30px 30px;
  982. grid-auto-flow: row;
  983. justify-content: space-evenly;
  984. }
  985.  
  986. .bibutton {
  987. background:linear-gradient(to right, {color:accent 1}, {color:accent 2});
  988. color: {color:link};
  989. font-size:14px;
  990. text-align: center;
  991. padding: 10px;
  992. border-radius: 15px;
  993. }
  994.  
  995. .bibutton:hover {
  996. color:{color:tooltip text};
  997. transform:scale(.95);
  998. -webkit-transition: all 0.4s;
  999. -moz-transition: all 0.4s;
  1000. -ms-transition: all 0.4s;
  1001. -o-transition: all 0.4s;
  1002. transition: all 0.4s;
  1003. }
  1004.  
  1005. .likeb {
  1006. position: relative;
  1007. display: inline-block;
  1008. height: 1.6em;
  1009. margin-bottom: -1px;
  1010. }
  1011.  
  1012. .likeb .like_button iframe {
  1013. position: absolute;
  1014. top: 0;
  1015. left: 0;
  1016. bottom: 0;
  1017. right: 0;
  1018. z-index: 2;
  1019. opacity: 0;
  1020. }
  1021.  
  1022. .like_button iframe {width: 100% !important; height: 100% !important;}
  1023. .likeb .liked + .actual-button {color: {color:tooltip text};}
  1024. .likeb .liked + .actual-button:after {content: 'd';}
  1025.  
  1026. .info a, .tags a {margin-right: 0.75em;}
  1027.  
  1028.  
  1029. /*--------------------------- POST NOTES --------------------------------*/
  1030.  
  1031. .notes {margin: 150px 0;}
  1032.  
  1033. ol.notes {
  1034. max-width: 100%;
  1035. padding: 0;
  1036. margin: 2em 0 0 0;
  1037. }
  1038.  
  1039. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  1040.  
  1041. ol.notes li.note img.avatar {
  1042. margin-right: 1em;
  1043. vertical-align: middle;
  1044. display: inline-block;
  1045. width: 1.25em;
  1046. height: 1.25em;
  1047. }
  1048.  
  1049.  
  1050. /*--------------------------- PAGINATION --------------------------------*/
  1051.  
  1052. #page-navigation {text-align: center;}
  1053. #page-navigation a, .current-page {margin: 0 0.5em;}
  1054. .current-page {font-weight: bold; color: {color:accent 1};}
  1055.  
  1056. {CustomCSS}
  1057.  
  1058. </style>
  1059. </head>
  1060.  
  1061. <!----------------------------- HTML ----------------------------->
  1062.  
  1063. <body>
  1064.  
  1065.  
  1066. <!-- main = main container -->
  1067. <main>
  1068. <div class="main">
  1069.  
  1070.  
  1071.  
  1072.  
  1073.  
  1074. <!----- TOPBAR ----->
  1075. <div class="header">
  1076. <img src="{image:Header}"/>
  1077. </div>
  1078.  
  1079. <div class="topbar">
  1080.  
  1081. <div class="tbicon">
  1082. <a href="/"><img src="{portraiturl-128}" title="{Name}"></a>
  1083. </div>
  1084.  
  1085. <nav>
  1086. {block:AskEnabled}
  1087. <div class="tblink"><a title="{text:ask link title}" href="/ask"><i class="ph-chat-circle-dots-fill"></i></a></div>
  1088. {/block:AskEnabled}
  1089. {block:SubmissionsEnabled}
  1090. <div class="tblink"><a title="{text:submit link title}" href="/submit"><i class="ph-envelope-open-fill"></i></a></div>
  1091. {/block:SubmissionsEnabled}
  1092. <div class="tblink"><a title="archive" href="/archive"><i class="ph-archive-fill"></i></a></div>
  1093. <div class="tblink"><a title="{text:topbar link 1 title}" href="{text:topbar link 1 url}"><i class="ph-{text:topbar link 1 icon}-fill"></i></a></div>
  1094. <div class="tblink"><a title="{text:topbar link 2 title}" href="{text:topbar link 2 url}"><i class="ph-{text:topbar link 2 icon}-fill"></i></a></div>
  1095. <!-- CREDIT: DO NOT TOUCH -->
  1096. <div class="tblink"><a title="theme by kai" href="https://heroeddiemunson.tumblr.com" target="_blank"><i class="ph-alien-fill"></i></a></div>
  1097. </nav>
  1098. </nav>
  1099.  
  1100. </div>
  1101.  
  1102.  
  1103.  
  1104. <!----- LEFT SIDEBAR ----->
  1105. <div class="sbleft">
  1106.  
  1107.  
  1108. <!-- ABOUT SECTION -->
  1109. <div class="item">
  1110. <div id="sbtitle">{text:desktop title}</div>
  1111. <div id="trackingtag"><a href="https://www.tumblr.com/tagged/{text:tracking tag}" target="_blank">#{text:tracking tag}</a></div>
  1112.  
  1113. {block:ifSidebarImage}
  1114. <img src="{image:Sidebar}" class="sideimg"/>
  1115. {/block:ifSidebarImage}
  1116.  
  1117. <div id="sbdesc">{text:desktop description}</div>
  1118. </div>
  1119.  
  1120.  
  1121. <!-- MEMBERS SECTION -->
  1122. <div class="item">
  1123. <div id="sbtitle">members</div>
  1124. <div class="members">
  1125. {block:GroupMembers}
  1126. {block:GroupMember}
  1127. <li class="member-info">
  1128. <a href="{GroupMemberURL}" class="upper">
  1129. <img src="{GroupMemberPortraitURL-96}" class="icon" alt="Blog member portrait"></a>
  1130. <a href="{GroupMemberURL}" class="member-info">
  1131. {GroupMemberName}
  1132. </a>
  1133. </li>
  1134. {/block:GroupMember}
  1135. {/block:GroupMembers}
  1136. </div>
  1137. </div>
  1138.  
  1139.  
  1140. <!-- SIDEBAR NAVIGATION -->
  1141. <div class="item">
  1142. <div id="sbtitle">navigation</div>
  1143.  
  1144. <div class="sbnav">
  1145. {block:ifsidebarnavtitle1}
  1146. <a href="{text:sidebar nav link 1}">{text:sidebar nav title 1}</a>
  1147. {/block:ifsidebarnavtitle1}
  1148. {block:ifsidebarnavtitle2}
  1149. <a href="{text:sidebar nav link 2}">{text:sidebar nav title 2}</a>
  1150. {/block:ifsidebarnavtitle2}
  1151. {block:ifsidebarnavtitle3}
  1152. <a href="{text:sidebar nav link 3}">{text:sidebar nav title 3}</a>
  1153. {/block:ifsidebarnavtitle3}
  1154. {block:ifsidebarnavtitle4}
  1155. <a href="{text:sidebar nav link 4}">{text:sidebar nav title 4}</a>
  1156. {/block:ifsidebarnavtitle4}
  1157. {block:ifsidebarnavtitle5}
  1158. <a href="{text:sidebar nav link 5}">{text:sidebar nav title 5}</a>
  1159. {/block:ifsidebarnavtitle5}
  1160. {block:ifsidebarnavtitle6}
  1161. <a href="{text:sidebar nav link 6}">{text:sidebar nav title 6}</a>
  1162. {/block:ifsidebarnavtitle6}
  1163. {block:ifsidebarnavtitle7}
  1164. <a href="{text:sidebar nav link 7}">{text:sidebar nav title 7}</a>
  1165. {/block:ifsidebarnavtitle7}
  1166. {block:ifsidebarnavtitle8}
  1167. <a href="{text:sidebar nav link 8}">{text:sidebar nav title 8}</a>
  1168. {/block:ifsidebarnavtitle8}
  1169. </div>
  1170.  
  1171. <!-- SEARCHBAR & SUGGESTIONS BY GLENTHEMES -->
  1172. <div id="searchblock">
  1173. <form class="find" action="/search" method="get">
  1174.  
  1175. <a class="expand"><input class="typing" type="text" name="q" value="{SearchQuery}" placeholder="{text:searchbox placeholder}" autocomplete="off"/></a>
  1176.  
  1177. <input class="enter" type="submit" value="search"/>
  1178.  
  1179. </form>
  1180.  
  1181. <div id="searchentries">
  1182. {block:ifsearchsuggestion1}<a href="/tagged/{text:search suggestion 1}">{text:search suggestion 1 title}</a>{/block:ifsearchsuggestion1}
  1183. {block:ifsearchsuggestion2}<a href="/tagged/{text:search suggestion 2}">{text:search suggestion 2 title}</a>{/block:ifsearchsuggestion2}
  1184. {block:ifsearchsuggestion3}<a href="/tagged/{text:search suggestion 3}">{text:search suggestion 3 title}</a>{/block:ifsearchsuggestion3}
  1185. {block:ifsearchsuggestion4}<a href="/tagged/{text:search suggestion 4}">{text:search suggestion 4 title}</a>{/block:ifsearchsuggestion4}
  1186. {block:ifsearchsuggestion5}<a href="/tagged/{text:search suggestion 5}">{text:search suggestion 5 title}</a>{/block:ifsearchsuggestion5}
  1187. </div><!--END 'searchentries' div-->
  1188. </div><!--END 'searchblock' div-->
  1189.  
  1190. </div>
  1191.  
  1192. </div>
  1193.  
  1194.  
  1195.  
  1196.  
  1197. <!----- RIGHT SIDEBAR ----->
  1198. <div class="sbright">
  1199.  
  1200.  
  1201. <!-- AFFILIATES -->
  1202. <div class="item">
  1203. <div id="sbtitle">affiliates</div>
  1204. <div class="affi">
  1205. <!-- to add more affiliates:
  1206.  
  1207. <a href="URL" title="TITLE">
  1208. <img src="https://api.tumblr.com/v2/blog/BLOGURL.tumblr.com/avatar">
  1209. </a>
  1210.  
  1211. -->
  1212.  
  1213. <a href="URL" title="TITLE">
  1214. <img src="https://api.tumblr.com/v2/blog/nancyvhlr.tumblr.com/avatar">
  1215. </a>
  1216.  
  1217. <a href="URL" title="TITLE">
  1218. <img src="https://api.tumblr.com/v2/blog/nancyvhlr.tumblr.com/avatar">
  1219. </a>
  1220.  
  1221. <a href="URL" title="TITLE">
  1222. <img src="https://api.tumblr.com/v2/blog/nancyvhlr.tumblr.com/avatar">
  1223. </a>
  1224.  
  1225. <a href="URL" title="TITLE">
  1226. <img src="https://api.tumblr.com/v2/blog/nancyvhlr.tumblr.com/avatar">
  1227. </a>
  1228.  
  1229. <a href="URL" title="TITLE">
  1230. <img src="https://api.tumblr.com/v2/blog/nancyvhlr.tumblr.com/avatar">
  1231. </a>
  1232.  
  1233. <a href="URL" title="TITLE">
  1234. <img src="https://api.tumblr.com/v2/blog/nancyvhlr.tumblr.com/avatar">
  1235. </a>
  1236.  
  1237. <a href="URL" title="TITLE">
  1238. <img src="https://api.tumblr.com/v2/blog/nancyvhlr.tumblr.com/avatar">
  1239. </a>
  1240.  
  1241. <a href="URL" title="TITLE">
  1242. <img src="https://api.tumblr.com/v2/blog/nancyvhlr.tumblr.com/avatar">
  1243. </a>
  1244.  
  1245. <a href="URL" title="TITLE">
  1246. <img src="https://api.tumblr.com/v2/blog/nancyvhlr.tumblr.com/avatar">
  1247. </a>
  1248.  
  1249. <!--- ADD ABOVE HERE --->
  1250.  
  1251. <a href="/submit" title="you?">
  1252. <img src="{portraiturl-128}">
  1253. </a>
  1254. </div>
  1255. </div>
  1256.  
  1257.  
  1258. <!-- CURRENT EVENT -->
  1259. <div class="item">
  1260. <div id="sbtitle">current event</div>
  1261.  
  1262. <div id="cesubtitle">{text:current event title}</div>
  1263.  
  1264. <img src="{image:event}" class="sideimg"/>
  1265.  
  1266. <div id="sbdesc">{text:event description}</div>
  1267.  
  1268. <div class="cebuttons">
  1269. {block:ifcurrenteventlinktitle1}
  1270. <a href="{text:current event link 1}">{text:current event link title 1}</a>
  1271. {/block:ifcurrenteventtitle1}
  1272. {block:ifcurrenteventlinktitle2}
  1273. <a href="{text:current event link 2}">{text:current event link title 2}</a>
  1274. {/block:ifcurrenteventtitle2}
  1275. {block:ifcurrenteventlinktitle3}
  1276. <a href="{text:current event link 3}">{text:current event link title 3}</a>
  1277. {/block:ifcurrenteventtitle3}
  1278. </div>
  1279.  
  1280. </div>
  1281.  
  1282.  
  1283. <!----- BLOG INFO ----->
  1284. <div class="item">
  1285. <div id="sbtitle">blog info</div>
  1286.  
  1287. <div class="bloginfo">
  1288. <div class="binfo1">about:</div>
  1289. <div class="binfo2">{text:about blog}</div>
  1290. </div>
  1291.  
  1292. <div class="bloginfo">
  1293. <div class="binfo1">admin:</div>
  1294. <div class="binfo2">{text:admin name}</div>
  1295. </div>
  1296.  
  1297. <div class="bloginfo">
  1298. <div class="binfo1">established:</div>
  1299. <div class="binfo2">{CopyrightYears}</div>
  1300. </div>
  1301.  
  1302. <div class="bloginfo">
  1303. <div class="binfo1">disclaimer:</div>
  1304. <div class="binfo2">Our site does not claim credit for any of the images, media, or information posted here unless otherwise stated. If you see anything on this site that belongs to you and want it removed please let us know.</div>
  1305. </div>
  1306.  
  1307. <!-- CREDIT: DO NOT TOUCH -->
  1308. <div class="bloginfo">
  1309. <div class="binfo1">theme:</div>
  1310. <div class="binfo2"><a href="https://heroeddiemunson.tumblr.com">PURPLE HAZE by kai</a></div>
  1311. </div>
  1312. <!-- CREDIT: DO NOT TOUCH -->
  1313.  
  1314. </div>
  1315.  
  1316.  
  1317. </div>
  1318.  
  1319. <!----- TAG AND DAY PAGES ----->
  1320.  
  1321. <!-- section = post container -->
  1322.  
  1323. <section>
  1324.  
  1325. {block:TagPage}
  1326. <article>
  1327. showing <b>{tagresultcount}</b> posts filed under <b>#{Tag}</b>
  1328. </article>
  1329. {/block:TagPage}
  1330.  
  1331. {block:DayPage}
  1332. <article>
  1333. showing all posts made on <b>{Month} {DayOfMonth}, {Year}</b>
  1334. </article>
  1335. {/block:DayPage}
  1336.  
  1337. <!----- POSTS ----->
  1338.  
  1339. {block:Posts}
  1340. <article class="posts" id="{PostID}">
  1341.  
  1342.  
  1343. <!-- TOP INFO -->
  1344. <topinfo>
  1345.  
  1346.  
  1347. {block:PinnedPostLabel}<div class="tibutton"><a title="pinned post" href="{Permalink}"><i class="ph-push-pin-simple-fill"></i></a></div>{/block:PinnedPostLabel}
  1348.  
  1349. <div class="tibutton"><a title="{Month} {DayOfMonth}, {Year}" href="{Permalink}"><i class="ph-clock-fill"></i></a></div>
  1350.  
  1351. <div class="tibutton"><a title="{NoteCountWithLabel}" href="{Permalink}"><i class="ph-{text:note count icon}-fill"></i></a></div>
  1352.  
  1353. <!-- PERMALINK INFO -->
  1354. {block:PermalinkPage}
  1355.  
  1356. {block:RebloggedFrom}
  1357. <div class="tibutton"><a href="{ReblogParentURL}" title="via"><i class="ph-crosshair-fill"></i></a></div>
  1358.  
  1359. <div class="tibutton"><a href="{ReblogRootURL}" title="originally"><i class="ph-power-fill"></i></a></div>
  1360. {/block:RebloggedFrom}
  1361.  
  1362. {block:ContentSource}
  1363. <div class="tibutton"><a href="{SourceURL}" title="{lang:Source}"><i class="ph-map-pin-fill"></i></a></div>
  1364. {/block:ContentSource}
  1365.  
  1366. {/block:PermalinkPage}
  1367.  
  1368. </topinfo><br>
  1369.  
  1370.  
  1371. {block:Text}
  1372. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1373. {block:NotReblog}
  1374. <li class="caption text-caption">
  1375. {Body}
  1376. </li>
  1377. {/block:NotReblog}
  1378. {block:RebloggedFrom}
  1379. {block:Reblogs}
  1380. <li class="caption text-caption">
  1381. <img src="{PortraitURL-64}" class="user-icon">
  1382. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1383. {Body}
  1384. </li>
  1385. {/block:Reblogs}
  1386. {/block:RebloggedFrom}
  1387. {/block:Text}
  1388.  
  1389. {block:Link}
  1390. <a href="{URL}" class="link-wrap">
  1391. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  1392. <div class="link">
  1393. <div class="title">{Name}</div>
  1394. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1395. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  1396. </div>
  1397. </a>
  1398. {block:Description}
  1399. {block:NotReblog}
  1400. <li class="caption">
  1401. {Description}
  1402. </li>
  1403. {/block:NotReblog}
  1404. {/block:Description}
  1405. {block:RebloggedFrom}
  1406. {block:Reblogs}
  1407. <li class="caption">
  1408. <img src="{PortraitURL-64}" class="user-icon">
  1409. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1410. {Body}
  1411. </li>
  1412. {/block:Reblogs}
  1413. {/block:RebloggedFrom}
  1414. {/block:Link}
  1415.  
  1416. {block:Photo}
  1417. <div class="photo">
  1418. {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}
  1419. </div>
  1420. {block:Caption}
  1421. {block:NotReblog}
  1422. <li class="caption">
  1423. {Caption}
  1424. </li>
  1425. {/block:NotReblog}
  1426. {block:RebloggedFrom}
  1427. {block:Reblogs}
  1428. <li class="caption">
  1429. <img src="{PortraitURL-64}" class="user-icon">
  1430. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1431. {Body}
  1432. </li>
  1433. {/block:Reblogs}
  1434. {/block:RebloggedFrom}
  1435. {/block:Caption}
  1436. {/block:Photo}
  1437.  
  1438. {block:Photoset}
  1439. <div class="photo">{Photoset-700}</div>
  1440. {block:Caption}
  1441. {block:NotReblog}
  1442. <li class="caption">
  1443. {Caption}
  1444. </li>
  1445. {/block:NotReblog}
  1446. {block:RebloggedFrom}
  1447. {block:Reblogs}
  1448. <li class="caption">
  1449. <img src="{PortraitURL-64}" class="user-icon">
  1450. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1451. {Body}
  1452. </li>
  1453. {/block:Reblogs}
  1454. {/block:RebloggedFrom}
  1455. {/block:Caption}
  1456. {/block:Photoset}
  1457.  
  1458. {block:Video}
  1459. <div class="video">{Video-500}</div>
  1460. {block:Caption}
  1461. {block:NotReblog}
  1462. <li class="caption">
  1463. {Caption}
  1464. </li>
  1465. {/block:NotReblog}
  1466. {block:RebloggedFrom}
  1467. {block:Reblogs}
  1468. <li class="caption">
  1469. <img src="{PortraitURL-64}" class="user-icon">
  1470. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1471. {Body}
  1472. </li>
  1473. {/block:Reblogs}
  1474. {/block:RebloggedFrom}
  1475. {/block:Caption}
  1476. {/block:Video}
  1477.  
  1478. {block:Quote}
  1479. <div class="quote">{Quote}</div>
  1480. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1481. {/block:Quote}
  1482.  
  1483. {block:Chat}
  1484. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1485. <ul class="chat">{block:Lines}
  1486. <li>
  1487. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1488. {Line}
  1489. </li>
  1490. {/block:Lines}</ul>
  1491. {/block:Chat}
  1492.  
  1493. {block:Answer}
  1494. <div class="ask-wrap">
  1495. <img src="{AskerPortraitURL-64}" class="ask-icon">
  1496. <div class="asking">{Asker} asked</div>
  1497. <div class="question">{Question}</div>
  1498. </div>
  1499. {block:Answerer}
  1500. <li class="caption">
  1501. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1502. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1503. {Answer}
  1504. </li>
  1505. {/block:Answerer}
  1506. {block:NotReblog}
  1507. <li class="caption">
  1508. {Replies}
  1509. </li>
  1510. {/block:NotReblog}
  1511. {block:RebloggedFrom}
  1512. {block:Reblogs}
  1513. <li class="caption">
  1514. <img src="{PortraitURL-64}" class="user-icon">
  1515. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1516. {Body}
  1517. </li>
  1518. {/block:Reblogs}
  1519. {/block:RebloggedFrom}
  1520. {/block:Answer}
  1521.  
  1522. {block:Audio}
  1523. <div class="audiopost">
  1524. <div class="audiobox">
  1525. <div class="button">
  1526. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1527. </div>
  1528. </div>
  1529. {block:AlbumArt}
  1530. <img src="{AlbumArtURL}" class="album-art">
  1531. {/block:AlbumArt}
  1532. <div class="audioinfo">
  1533. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1534. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1535. {block:Album}<li>{Album}</li>{/block:Album}
  1536. </div>
  1537. </div>
  1538. {block:Caption}
  1539. {block:NotReblog}
  1540. <li class="caption">
  1541. {Caption}
  1542. </li>
  1543. {/block:NotReblog}
  1544. {block:RebloggedFrom}
  1545. {block:Reblogs}
  1546. <li class="caption">
  1547. <img src="{PortraitURL-64}" class="user-icon">
  1548. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1549. {Body}
  1550. </li>
  1551. {/block:Reblogs}
  1552. {/block:RebloggedFrom}
  1553. {/block:Caption}
  1554. {/block:Audio}
  1555.  
  1556.  
  1557.  
  1558. <!----- BOTTOM INFO ----->
  1559. {block:Date}
  1560. <bottominfo>
  1561.  
  1562. <!-- reblog button -->
  1563. <div class="bibutton"><a title="reblog this post" href="{ReblogURL}" target="_blank">reblog</a></div>
  1564.  
  1565. <!-- like button -->
  1566. <div class="bibutton"><a class="likeb" href="#" title="like this post">{LikeButton}<span class="actual-button">like</span></a></div>
  1567.  
  1568. </bottominfo>
  1569. {/block:Date}
  1570.  
  1571. <!----- TAGS ----->
  1572.  
  1573. {block:HasTags}
  1574. <div class="tags">
  1575. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  1576. </div>
  1577. {/block:HasTags}
  1578.  
  1579. <!----- POST NOTES ----->
  1580.  
  1581. {block:PermalinkPage}{block:Date}
  1582. {block:NoteCount}{block:PostNotes}
  1583. <div class="notes">
  1584. {PostNotes-64}
  1585. </div>
  1586. {/block:PostNotes}{/block:NoteCount}
  1587. {/block:Date}{/block:PermalinkPage}
  1588.  
  1589. </article>
  1590. {/block:Posts}
  1591.  
  1592. <!-- end of posts container -->
  1593.  
  1594.  
  1595. <!----- PAGINATION ----->
  1596.  
  1597. {block:Pagination}
  1598. <article id="page-navigation">
  1599. {block:PreviousPage}<a href="{PreviousPage}"><i class="ph-caret-left"></i> previous</a>{/block:PreviousPage}
  1600. {block:JumpPagination length="10"}
  1601. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1602. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1603. {/block:JumpPagination}
  1604. {block:NextPage}<a href="{NextPage}">next <i class="ph-caret-right"></i></a>{/block:NextPage}
  1605. </article>
  1606. {/block:Pagination}
  1607.  
  1608. </section>
  1609.  
  1610. <!-- end of main container -->
  1611. </div>
  1612. </main>
  1613.  
  1614.  
  1615.  
  1616.  
  1617. <!-- JQUERY -->
  1618.  
  1619. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  1620. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1621.  
  1622. <script>
  1623.  
  1624. // sticky topbar
  1625. $(document).ready(function(){
  1626. $(window).bind('scroll', function(){
  1627. if($(window).scrollTop() > 200){
  1628. $('.topbar').addClass('blazeit');
  1629. }
  1630.  
  1631. else{
  1632. $('.topbar').removeClass('blazeit');
  1633. }
  1634. });
  1635. });
  1636.  
  1637.  
  1638. // tooltips
  1639. tippy('[title]', {
  1640. theme: 'custom',
  1641. arrow: false,
  1642. followCursor: true,
  1643. delay: 100,
  1644. placement: 'bottom',
  1645. offset: "40, 10",
  1646. zIndex: 9999999999,
  1647. maxWidth: 400,
  1648.  
  1649. content(reference) {
  1650. const title = reference.getAttribute('title');
  1651. reference.removeAttribute('title');
  1652. return title;
  1653. },
  1654. });
  1655.  
  1656.  
  1657. // searchbar & suggestions by glenthemes
  1658. $(document).ready(function(){
  1659. $('.expand').click(function(list){
  1660. list.stopPropagation();
  1661. $("#searchentries").slideToggle('slow');
  1662. });
  1663. });
  1664.  
  1665. $(document).click(function(outside){
  1666. var box = $('#searchentries');
  1667. if(!box.is(outside.target) && box.has(outside.target).length === 0){
  1668. $('#searchentries').slideUp('slow');
  1669. }
  1670. });
  1671.  
  1672. </script>
  1673.  
  1674. </body>
  1675. </html>
Advertisement
Add Comment
Please, Sign In to add comment