tricksterkid

nuclearthemes / theme 001

Dec 16th, 2020 (edited)
1,553
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 46.65 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!-- theme by nuclearthemes || base code by seyche -->
  4. <!-- consider supporting me on ko-fi >> https://ko-fi.com/cameroni -->
  5.  
  6. <!--
  7. || CREDITS ||
  8.  
  9. • Base code from seyche, thank you!! >> https://seyche.tumblr.com/
  10. • Chat bubbles with Bubbly >> http://projects.verou.me/bubbly/
  11. • Custom tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
  12. • Fonts from Google >> https://fonts.google.com/
  13. • Hidden tags by lmthemes >> https://lmthemes.tumblr.com/
  14. • Icons from Font Awesome >> https://fontawesome.com/
  15. • Tumblr controls fix by odeysseus >> https://odeysseus.tumblr.com/
  16.  
  17. -->
  18.  
  19. <head>
  20.  
  21. <title>{Title}{block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary} {/block:PostSummary}</title>
  22.  
  23. <link rel="shortcut icon" href="{Favicon}">
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  26. <meta charset="utf-8">
  27. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  28.  
  29. <link href="https://fonts.googleapis.com/css?family=Courgette:400,400i,700,700i|Cabin:400,400i,700,700i|Nunito:400,400i,700,700i|Poppins:400,400i,700,700i|PT+Serif:400,400i,700,700i|Roboto+Slab:400,400i,700,700i|Work+Sans:400,400i,700,700i" rel="stylesheet">
  30.  
  31. <script src="https://kit.fontawesome.com/802dca85f3.js" crossorigin="anonymous"></script>
  32.  
  33. <!------------------------------- variables -------------------------------->
  34.  
  35. <meta name="image:Menu" content=""/>
  36.  
  37. <meta name="color:Background" content="#ffffff"/>
  38. <meta name="color:Title" content="#000000"/>
  39. <meta name="color:Text" content="#000000"/>
  40.  
  41. <meta name="color:Menu" content="#f5f5f5"/>
  42. <meta name="color:Menu Icons" content="#b0b0b0"/>
  43.  
  44. <meta name="color:Posts" content="#f5f5f5"/>
  45. <meta name="color:Accent 1" content="#cf8f8f"/>
  46. <meta name="color:Accent 2" content="#9e4444"/>
  47. <meta name="color:Link" content="#cf8f8f"/>
  48.  
  49. <meta name="text:Post Margin" content="50"/>
  50.  
  51. <meta name="select:font" title="Cabin" content="Cabin" />
  52. <meta name="select:font" title="Nunito" content="Nunito" />
  53. <meta name="select:font" title="Poppins" content="Poppins" />
  54. <meta name="select:font" title="PT Serif" content="PT Serif" />
  55. <meta name="select:font" title="Roboto Slab" content="Roboto Slab" />
  56. <meta name="select:font" title="Work Sans" content="Work Sans" />
  57.  
  58. <meta name="select:font size" title="14px" content="14px" />
  59. <meta name="select:font size" title="15px" content="15px" />
  60. <meta name="select:font size" title="16px" content="16px" />
  61.  
  62. <meta name="text:Home Link Hover" content="home"/>
  63. <meta name="text:Ask Link" content="ask"/>
  64. <meta name="text:Ask Link Hover" content="ask"/>
  65. <meta name="text:Archive Link" content="archive"/>
  66. <meta name="text:Archive Link Hover" content="archive"/>
  67. <meta name="text:Navigation Link Hover" content="nav"/>
  68.  
  69. <meta name="text:Link 1 URL" content="/"/>
  70. <meta name="text:Link 1" content="link1"/>
  71. <meta name="text:Link 2 URL" content="/"/>
  72. <meta name="text:Link 2" content="link2"/>
  73. <meta name="text:Link 3 URL" content="/"/>
  74. <meta name="text:Link 3" content="link3"/>
  75.  
  76. <style type="text/css">
  77.  
  78. * {margin:0; padding:0;}
  79.  
  80. /* ----------------------------------------------------------------------- */
  81. /* --------------------------- tumblr controls --------------------------- */
  82.  
  83. .tmblr-iframe {
  84. filter: invert(100%);
  85. -o-filter: invert(100%);
  86. -moz-filter: invert(100%);
  87. -ms-filter: invert(100%);
  88. -webkit-filter: invert(100%);
  89. opacity: 0.2;
  90. position: fixed;
  91. right: 5px;
  92. top: 5px;
  93. transform: scale(0.7,0.7);
  94. transform-origin: 100% 0%;
  95. -ms-transform-origin: 100% 0%;
  96. -webkit-transform-origin: 100% 0%;
  97. transition: 0.4s;
  98. -o-transition: 0.4s;
  99. -moz-transition: 0.4s;
  100. -ms-transition: 0.4s;
  101. -webkit-transition: 0.4s;
  102. white-space: nowrap;
  103. }
  104.  
  105. .tmblr-iframe:hover {
  106. opacity: 1;
  107. }
  108.  
  109. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  110. z-index: 999999999!important;
  111. }
  112.  
  113. /* ----------------------------------------------------------------------- */
  114. /* --------------------------- custom tooltips --------------------------- */
  115.  
  116. .tippy-tooltip.custom-theme {
  117. background-color: {color:accent 2};
  118. border-radius: 0;
  119. color: {color:background};
  120. font-family: inherit;
  121. font-size: inherit;
  122. text-align: center;
  123. }
  124.  
  125. /* ----------------------------------------------------------------------- */
  126. /* -------------------- custom selection & scrollbar --------------------- */
  127.  
  128. ::-moz-selection {background: {color:background}; color: {color:accent 1};}
  129. ::selection {background: {color:background}; color: {color:accent 1};}
  130.  
  131. ::-webkit-scrollbar-thumb {background: {color:accent 1}; border: 5px solid {color:background}; border-radius: 10px;}
  132. ::-webkit-scrollbar-track {background: {color:menu}; border: 7px solid {color:background};}
  133. ::-webkit-scrollbar {width: 15px;}
  134.  
  135. /* ----------------------------------------------------------------------- */
  136. /* ----------------------------- page layout ----------------------------- */
  137.  
  138. body {
  139. background-color: {color:background};
  140. color: {color:text};
  141. letter-spacing: 0.04em;
  142. line-height: 160%;
  143. font-family: '{select:font}';
  144. font-size: {select:font size};
  145. text-align: justify;
  146. word-wrap: break-word;
  147. }
  148.  
  149. main {
  150. margin-bottom: {text:post margin}px;
  151. margin-left: auto;
  152. margin-right: auto;
  153. width: 500px;
  154. }
  155.  
  156. section {
  157. position: relative;
  158. width: 500px;
  159. }
  160.  
  161. article {
  162. background: {color:posts};
  163. margin: 0 auto;
  164. position: relative;
  165. width: 100%;
  166. }
  167.  
  168. .posts {
  169. padding: 20px;
  170. width: calc(100% - 40px);
  171. width: -moz-calc(100% - 40px);
  172. width: -webkit-calc(100% - 40px);
  173. }
  174.  
  175. .tumblr_video_container {max-height: 500px !important; overflow: hidden !important;}
  176. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe {max-width: 100%;}
  177.  
  178. /* ----------------------------------------------------------------------- */
  179. /* --------------------------------- menu -------------------------------- */
  180.  
  181. #menu {
  182. background: {color:menu};
  183. font-family: '{select:font}';
  184. height: 235px;
  185. line-height: 26px;
  186. margin: 50px auto;
  187. text-align: center;
  188. width: 500px;
  189. }
  190.  
  191. #menutitle {
  192. background: {color:accent 1};
  193. height: 95px;
  194. padding: 10px;
  195. width: calc(100% - 20px);
  196. width: -moz-calc(100% - 20px);
  197. width: -webkit-calc(100% - 20px);
  198. }
  199.  
  200. {block:ifMenuImage}
  201.  
  202. #menuimg {
  203. background: {color:menu};
  204. border-radius: 100%;
  205. margin: auto;
  206. padding: 6px;
  207. width: 50px;
  208. }
  209.  
  210. {/block:ifMenuImage}
  211.  
  212. .menutitle {
  213. font-size: 24px;
  214. font-weight: bold;
  215. letter-spacing: 2px;
  216. line-height: 145%;
  217. text-align: center;
  218. text-transform: uppercase;
  219. }
  220.  
  221. .menutitle a {
  222. color: {color:background};
  223. }
  224.  
  225. #menutext {
  226. font-size: {select:font size};
  227. height: 30px;
  228. overflow: auto;
  229. padding: 15px;
  230. text-align: center;
  231. width: calc(100% - 30px);
  232. width: -moz-calc(100% - 30px);
  233. width: -webkit-calc(100% - 30px);
  234. -moz-overflow-style: none;
  235. -ms-overflow-style: none;
  236. -o-overflow-style: none;
  237. }
  238.  
  239. #menutext::-webkit-scrollbar {
  240. display: none;
  241. }
  242.  
  243. #menunav {
  244. border-top: 2px solid {color:accent 1};
  245. height: 60px;
  246. }
  247.  
  248. nav {
  249. height: calc(100% - 15px);
  250. height: -moz-calc(100% - 15px);
  251. height: -webkit-calc(100% - 15px);
  252. text-align: left;
  253. }
  254.  
  255. nav a {
  256. color: {color:menu icons};
  257. font-size: 22px;
  258. padding: 16px 0;
  259. }
  260.  
  261. nav a:hover {
  262. color: {color:accent 2};
  263. }
  264.  
  265. .menubuttons {
  266. align-items: center;
  267. border-right: 2px solid {color:accent 1};
  268. display: flex;
  269. float: left;
  270. margin-top: -1px;
  271. height: 59px;
  272. justify-content: center;
  273. width: calc(25% - 1px);
  274. width: -moz-calc(25% - 1px);
  275. width: -webkit-calc(25% - 1px);
  276. }
  277.  
  278. /* ----------------------------------------------------------------------- */
  279. /* ------------------------------- dropdown ------------------------------ */
  280.  
  281. .dropdown {
  282. display: block;
  283. float: right;
  284. position: relative;
  285. width: calc(25% - 3px);
  286. width: -moz-calc(25% - 3px);
  287. width: -webkit-calc(25% - 3px);
  288. }
  289.  
  290. .dropbtn {
  291. background: none;
  292. border: none;
  293. color: {color:menu icons};
  294. cursor: help;
  295. display: block;
  296. line-height: 160%;
  297. font-family: '{select:font}';
  298. font-size: 22px;
  299. outline: none;
  300. padding: 10px 0px;
  301. transition: 0.4s;
  302. -moz-transition: 0.4s;
  303. -ms-transition: 0.4s;
  304. -o-transition: 0.4s;
  305. -webkit-transition: 0.4s;
  306. width: 100%;
  307. }
  308.  
  309. .dropbtn:hover, .dropbtn:focus {
  310. color: {color:accent 2};
  311. transition: 0.4;
  312. -moz-transition: 0.4s;
  313. -ms-transition: 0.4s;
  314. -o-transition: 0.4s;
  315. -webkit-transition: 0.4s;
  316. }
  317.  
  318. .dropdown-content {
  319. background-color: {color:menu};
  320. display: none;
  321. overflow: auto;
  322. position: absolute;
  323. text-align: center;
  324. transform: translate(135px, -55px);
  325. -moz-transform: translate(135px, -55px);
  326. -ms-transform: translate(135px, -55px);
  327. -o-transform: translate(135px, -55px);
  328. -webkit-transform: translate(135px, -55px);
  329. width: 175px;
  330. z-index: 1;
  331. }
  332.  
  333. .dropdown-content a {
  334. border: none;
  335. color: {color:accent 1};
  336. display: block;
  337. line-height: 160%;
  338. font-family: 'Cabin';
  339. font-size: {select:font size};
  340. padding: 7px 10px;
  341. text-decoration: none;
  342. transition: 0.4s;
  343. -moz-transition: 0.4s;
  344. -ms-transition: 0.4s;
  345. -o-transition: 0.4s;
  346. -webkit-transition: 0.4s;
  347. }
  348.  
  349. .dropdown a:hover {
  350. background-color: {color:accent 1};
  351. color: {color:background};
  352. transition: 0.4s;
  353. -moz-transition: 0.4s;
  354. -ms-transition: 0.4s;
  355. -o-transition: 0.4s;
  356. -webkit-transition: 0.4s;
  357. }
  358.  
  359. .show {
  360. display: block;
  361. }
  362.  
  363. /* ----------------------------------------------------------------------- */
  364. /* -------------------------------- text --------------------------------- */
  365.  
  366. a {
  367. color: {color:link};
  368. text-decoration: none;
  369. transition: 0.4s;
  370. -moz-transition: 0.4s;
  371. -ms-transition: 0.4s;
  372. -o-transition: 0.4s;
  373. -webkit-transition: 0.4s;
  374. }
  375.  
  376. a:hover {
  377. color: {color:accent 2};
  378. transition: 0.4s;
  379. -moz-transition: 0.4s;
  380. -ms-transition: 0.4s;
  381. -o-transition: 0.4s;
  382. -webkit-transition: 0.4s;
  383. }
  384.  
  385. p a {
  386. border-bottom: 2px solid {color:accent 2};
  387. }
  388.  
  389. blockquote {
  390. border-left: 2px solid {color:accent 2};
  391. margin: 1em 0 1em 1.5em;
  392. padding: 0 0 0 1em;
  393. }
  394.  
  395. h1, h2, h3, h4, h5, .title {
  396. color: {color:title};
  397. letter-spacing: 0.06em;
  398. line-height: 145%;
  399. font-weight: bold;
  400. }
  401.  
  402. h1 a, h2 a, h3 a, h4 a, h5 a, .title a {color: {color:title};}
  403. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, .title a:hover {color: {color:accent 2}}
  404.  
  405. h1, .title {font-size: 1.5em;}
  406. h2 {font-size: 1.3em; margin-top: 0.5em;}
  407. h3 {font-size: 1.25em;}
  408. h4 {font-size: 1.1em;}
  409. h5 {font-size: 1em;}
  410.  
  411. small {font-size: 0.9em;}
  412. big {font-size: 1.1em;}
  413.  
  414. hr {
  415. background-color: {color:accent 2};
  416. border: none;
  417. box-shadow: none;
  418. height: 1px;
  419. }
  420.  
  421. pre {
  422. font-size: inherit;
  423. line-height: inherit;
  424. white-space: pre-wrap;
  425. white-space: -moz-pre-wrap;
  426. white-space: -o-pre-wrap;
  427. white-space: -pre-wrap;
  428. word-wrap: break-word;
  429. }
  430.  
  431. li {list-style-type: circle; max-width: 100%;}
  432.  
  433. /* ----------------------------------------------------------------------- */
  434. /* ------------------------- post information ---------------------------- */
  435.  
  436. .topinformation {
  437. background: {color:accent 1};
  438. font-size: 0.8em;
  439. margin: {text:post margin}px auto 0 auto;
  440. padding: 10px 25px;
  441. }
  442.  
  443. .topinformation a {color: {color:title};}
  444. .topinformation a:hover {color: {color:accent 2};}
  445.  
  446. .info {
  447. align-items: flex-start;
  448. display: flex;
  449. flex-direction: row;
  450. justify-content: space-between;
  451. }
  452.  
  453. .likeb {
  454. display: inline-block;
  455. height: 1.6em;
  456. margin-bottom: -1px;
  457. position: relative;
  458. }
  459.  
  460. .likeb .like_button iframe {
  461. bottom: 0;
  462. left: 0;
  463. opacity: 0;
  464. position: absolute;
  465. right: 0;
  466. top: 0;
  467. z-index: 2;
  468. }
  469.  
  470. .like_button iframe {height: 100% !important; width: 100% !important;}
  471. .likeb .liked + .actual-button {color: #cf2929;}
  472. .likeb .liked + .actual-button:after {content: '';}
  473. .info-left a, .tags a {margin-right: 0.75em;}
  474. .post-controls a {margin-left: 0.75em;}
  475. .source-info li {list-style-type: none;}
  476.  
  477. .source-info {
  478. border-left: 1px solid {color:accent 2};
  479. display: flex;
  480. font-style: italic;
  481. justify-content: space-between;
  482. margin-left: 5px;
  483. padding-left: 10px;
  484. width: 100%;
  485. }
  486.  
  487. a.pinned-post {font-weight: bold; color: {color:accent 1};}
  488. .tag-day {font-weight: bold; color: {color:accent 1};}
  489.  
  490. .tagday-page {
  491. background: none;
  492. color: {color:text};
  493. text-align: center;
  494. }
  495.  
  496. .bottominformation {
  497. border-top: 2px solid {color:accent 2};
  498. font-size: 0.8em;
  499. height: 45px;
  500. }
  501.  
  502. .bottomtags {
  503. background: {color:posts};
  504. float: left;
  505. max-height: 25px;
  506. overflow: hidden;
  507. padding: 10px 25px;
  508. transition: 1s;
  509. -moz-transition: 1s;
  510. -ms-transition: 1s;
  511. -o-transition: 1s;
  512. -webkit-transition: 1s;
  513. width: calc(100% - 50px);
  514. width: -moz-calc(100% - 50px);
  515. width: -webkit-calc(100% - 50px);
  516. }
  517.  
  518. .bottomtags:hover {
  519. height: auto;
  520. max-height: 200px;
  521. transition: 1s;
  522. -moz-transition: 1s;
  523. -ms-transition: 1s;
  524. -o-transition: 1s;
  525. -webkit-transition: 1s;
  526. }
  527.  
  528. .bottomnotes {
  529. background: {color:posts};
  530. border-left: 2px solid {color:accent 2};
  531. height: 25px;
  532. padding: 10px 25px;
  533. position: absolute;
  534. right: 0;
  535. text-align: right;
  536. width: calc(50% - 50px);
  537. width: -moz-calc(50% - 50px);
  538. width: -webkit-calc(50% - 50px);
  539. z-index: 9999;
  540. }
  541.  
  542. .revealonhover {
  543. margin-top: 1em;
  544. font-style: italic;
  545. }
  546.  
  547. /* ----------------------------------------------------------------------- */
  548. /* ---------------------------- text posts ------------------------------- */
  549.  
  550. h1.post-title {
  551. border-bottom: 1px solid {color:title};
  552. margin-bottom: 10px;
  553. margin-top: 0;
  554. padding-bottom: 0.2em;
  555. text-align: center;
  556. text-transform: uppercase;
  557. }
  558.  
  559. /* ----------------------------------------------------------------------- */
  560. /* ----------------------------- captions -------------------------------- */
  561.  
  562. .caption {list-style-type: none; margin-top: 1em;}
  563. .caption p {margin-bottom: 1em;}
  564. .caption p:last-of-type {margin-bottom: 0;}
  565. .caption li {margin-left: 1.5em; padding-left: 1em;}
  566. .caption li:last-of-type {margin-bottom: 1em;}
  567.  
  568. .caption img {margin-bottom: 10px;}
  569.  
  570. .original-caption p:first-of-type {margin-top: 0;}
  571. .text-caption:first-of-type {margin-top: 0;}
  572. .caption iframe, .caption img {max-width: 100%;}
  573.  
  574. p.tmblr-attribution {margin-top: 1em !important;}
  575.  
  576. .user-icon {
  577. border-radius: 100%;
  578. display: inline-block;
  579. height: 2em;
  580. margin-right: 0.5em;
  581. vertical-align: middle;
  582. width: 2em;
  583. }
  584.  
  585. .username {
  586. display: inline-block;
  587. font-weight: bold;
  588. margin-top: 1px;
  589. vertical-align: top;
  590. }
  591.  
  592. .deactive::after {
  593. color: {color:text};
  594. content: '(deactivated)';
  595. margin-left: 1em;
  596. opacity: 0.75;
  597. }
  598.  
  599. /* ----------------------------------------------------------------------- */
  600. /* ---------------------------- quote posts ------------------------------ */
  601.  
  602. .quote, p.npf_quote {
  603. border: 1px solid {color:link};
  604. border-bottom: none;
  605. font-family: 'Courgette';
  606. font-size: 1.25em;
  607. line-height: 160%;
  608. padding: 25px 10px;
  609. text-align: center;
  610. }
  611.  
  612. .quote p:first-of-type {margin-top: 0;}
  613. .quote p:last-of-type {margin-bottom: 0;}
  614. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  615.  
  616. .source {
  617. border: 1px solid {color:link};
  618. border-top: none;
  619. padding: 0px 20px 20px 0px;
  620. text-align: right;
  621. text-transform: uppercase;
  622. }
  623.  
  624. /* ----------------------------------------------------------------------- */
  625. /* ----------------------------- chat posts ------------------------------ */
  626.  
  627. p.npf_chat {font-family: inherit; margin-top: 1em;}
  628. p.npf_chat b {font-family: inherit;}
  629.  
  630. .chat {
  631. font-size: 1.1em;
  632. margin: 0;
  633. padding: 0;
  634. padding-bottom: 15px;
  635. }
  636.  
  637. .chat li {
  638. border-radius: 20px;
  639. list-style-type: none;
  640. margin-bottom: 10px;
  641. margin-top: 1em;
  642. padding: 10px 20px;
  643. }
  644.  
  645. .chat li:first-of-type {margin-top: 0;}
  646.  
  647. .chat li:nth-of-type(odd) {
  648. border: 4px solid {color:accent 1};
  649. margin-left: 25%;
  650. position: relative;
  651. text-align: right;
  652. }
  653.  
  654. .chat li:nth-of-type(odd):after {
  655. border: 30px solid transparent;
  656. border-bottom: 0;
  657. border-right: 0;
  658. border-top-color: {color:accent 1};
  659. bottom: 0;
  660. content: '';
  661. height: 0;
  662. left: 50%;
  663. margin-bottom: -30px;
  664. margin-left: 35%;
  665. position: absolute;
  666. width: 0;
  667. }
  668.  
  669. .chat li:nth-of-type(even) {
  670. border: 4px solid {color:link};
  671. margin-right: 25%;
  672. position: relative;
  673. }
  674.  
  675. .chat li:nth-of-type(even):after {
  676. border: 30px solid transparent;
  677. border-bottom: 0;
  678. border-left: 0;
  679. border-top-color: {color:link};
  680. bottom: 0;
  681. content: '';
  682. height: 0;
  683. left: 50%;
  684. margin-bottom: -30px;
  685. margin-left: -45%;
  686. position: absolute;
  687. width: 0;
  688. }
  689.  
  690. .chatlabel {
  691. font-style: italic;
  692. text-transform: uppercase;
  693. }
  694.  
  695. /* ----------------------------------------------------------------------- */
  696. /* ----------------------------- ask posts ------------------------------- */
  697.  
  698. .question {
  699. background-color: {color:background};
  700. border-radius: 20px;
  701. padding: 20px 20px 30px 20px;
  702. }
  703.  
  704. .asker {
  705. color: {color:link};
  706. margin-bottom: 10px;
  707. text-transform: uppercase;
  708. }
  709.  
  710. .asker-question {
  711. background-color: {color:posts};
  712. border-radius: 20px;
  713. margin-top: 1em;
  714. padding: 10px 20px;
  715. width: 70%;
  716. }
  717.  
  718. .asker-question p:first-of-type {margin-top: 0;}
  719. .asker-question p:last-of-type {margin-bottom: 0;}
  720.  
  721. .asker-pic {
  722. border: 4px solid {color:posts};
  723. border-radius: 100%;
  724. float: right;
  725. margin: 0px;
  726. max-width: 40px;
  727. padding: 5px;
  728. }
  729.  
  730. .answer {
  731. background-color: {color:posts};
  732. border-radius: 20px;
  733. padding: 20px 20px 30px 20px;
  734. }
  735.  
  736. .answerer-answer img {
  737. border-radius: 20px;
  738. margin: 10px 0;
  739. }
  740.  
  741. .answerer {
  742. color: {color:link};
  743. margin-bottom: 10px;
  744. text-align: right;
  745. text-transform: uppercase;
  746. }
  747.  
  748. .answerer-answer {
  749. background-color: {color:background};
  750. border-radius: 20px;
  751. margin: 0px 0px 0px 19%;
  752. padding: 10px 20px;
  753. }
  754.  
  755. .answerer-pic {
  756. border: 4px solid {color:background};
  757. border-radius: 100%;
  758. float: left;
  759. margin: 0px;
  760. max-width: 40px;
  761. padding: 5px;
  762. }
  763.  
  764. /* ----------------------------------------------------------------------- */
  765. /* ---------------------------- link posts ------------------------------- */
  766.  
  767. a.link-wrap {border: 1px solid {color:accent 2}; display: block;}
  768. .link {padding: 2em;}
  769. .link-host, .link-txt {margin-top: 1.5em;}
  770.  
  771. .npf-link-block {
  772. background-color: initial;
  773. border-radius: 0;
  774. margin-top: 1.5em;
  775. }
  776.  
  777. .npf-link-block .poster .title {padding: 1.5em;}
  778. .npf-link-block.no-poster .title {padding: 1.5em 1.5em 0 1.5em;}
  779. .npf-link-block .title {border-bottom: none; font-size: 1.25em;}
  780. .npf-link-block .bottom {padding: 1.5em !important;}
  781.  
  782. /* ----------------------------------------------------------------------- */
  783. /* --------------------------- picture posts ----------------------------- */
  784.  
  785. img {
  786. display: block;
  787. height: auto;
  788. margin: 0;
  789. max-width: 100%;
  790. }
  791.  
  792. .photo img {width: 100%;}
  793. .vignette, #vignette {opacity: 0;}
  794. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  795.  
  796. .lightbox-image, #tumblr_lightbox img {
  797. border-radius: 0 !important;
  798. box-shadow: none !important;
  799. max-width: none;
  800. }
  801.  
  802. #tumblr_lightbox_caption, .lightbox-caption {
  803. color: #fff !important;
  804. font-family: inherit;
  805. margin-top: 1em !important;
  806. }
  807.  
  808. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  809. margin-left: 0 !important;
  810. margin-right: 0 !important;
  811. }
  812.  
  813. /* ----------------------------------------------------------------------- */
  814. /* ---------------------------- audio posts ------------------------------ */
  815.  
  816. .audiopost {border: 1px solid {color:accent 1}; padding: 2em;}
  817.  
  818. .audiobox {
  819. background-color: #f2f2f2;
  820. border-radius: 50%;
  821. margin: 28px 0 0 28px;
  822. position: absolute;
  823. z-index: 3;
  824. }
  825.  
  826. .button {
  827. height: 30px;
  828. margin: 7px;
  829. overflow: hidden;
  830. position: relative;
  831. width: 30px;
  832. z-index: 2;
  833. }
  834.  
  835. .album-art {
  836. display: inline-block;
  837. float: left;
  838. height: 100px;
  839. vertical-align: middle;
  840. width: 100px;
  841. z-index: 1;
  842. }
  843.  
  844. .audioinfo {
  845. box-sizing: border-box;
  846. display: inline-block;
  847. display: flex;
  848. flex-direction: column;
  849. height: 100px;
  850. justify-content: center;
  851. padding-left: 130px;
  852. }
  853.  
  854. .audioinfo li {list-style-type: none;}
  855. .track {font-weight: bold;}
  856. .spotify_audio_player {height: 80px!important;}
  857. .soundcloud_audio_player {height: 150px!important; width: 100%!important;}
  858.  
  859. /* ----------------------------------------------------------------------- */
  860. /* ------------------------------- notes --------------------------------- */
  861.  
  862. .notes {margin: {text:post margin}px 0;}
  863.  
  864. ol.notes {
  865. margin: 2em 0 0 0;
  866. max-width: 100%;
  867. padding: 0;
  868. }
  869.  
  870. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  871.  
  872. ol.notes li.note img.avatar {
  873. border-radius: 50%;
  874. display: inline-block;
  875. height: 1.25em;
  876. margin-right: 1em;
  877. vertical-align: middle;
  878. width: 1.25em;
  879. }
  880.  
  881. /* ----------------------------------------------------------------------- */
  882. /* ----------------------------- pagination ------------------------------ */
  883.  
  884. #page-navigation {
  885. margin-top: {text:post margin}px;
  886. padding: 20px 0;
  887. text-align: center;
  888. }
  889.  
  890. #page-navigation a {margin: 0 0.5em;}
  891.  
  892. .current-page {
  893. color: {color:accent 1};
  894. font-weight: bold;
  895. margin: 0 0.5em;
  896. }
  897.  
  898. /* ----------------------------------------------------------------------- */
  899. /* ------------------------------- credits ------------------------------- */
  900.  
  901. #credit, #othercredit {
  902. background-color: {color:background};
  903. color: {color:accent 1};
  904. bottom: 0;
  905. font-size: 20px;
  906. font-style: italic;
  907. margin: 10px;
  908. padding: 7px 1px;
  909. position: fixed;
  910. text-align: center;
  911. transition: 0.4s;
  912. -moz-transition: 0.4s;
  913. -ms-transition: 0.4s;
  914. -o-transition: 0.4s;
  915. -webkit-transition: 0.4s;
  916. width: 40px;
  917. }
  918.  
  919. #credit {padding: 7px 1px; right: 0;}
  920. #othercredit {left: 0; padding: 7px 1px 7px 2px;}
  921.  
  922. #credit:hover, #othercredit:hover {
  923. background-color: {color:accent 1};
  924. color: {color:background};
  925. transition: 0.4s;
  926. -moz-transition: 0.4s;
  927. -ms-transition: 0.4s;
  928. -o-transition: 0.4s;
  929. -webkit-transition: 0.4s;
  930. }
  931.  
  932. /* ----------------------------------------------------------------------- */
  933. /* ----------------------------- responsive ------------------------------ */
  934.  
  935. @media only screen and (max-width: 1100px) { }
  936.  
  937. @media only screen and (max-width: 550px) {
  938. main, section, #menu {width: 450px;}
  939. nav a {}
  940. .dropbtn {}
  941.  
  942.  
  943. .dropdown-content {
  944. transform: translate(-65px, 0px);
  945. -moz-transform: translate(-65px, 0px);
  946. -ms-transform: translate(-65px, 0px);
  947. -o-transform: translate(-65px, 0px);
  948. -webkit-transform: translate(-65px, 0px);
  949. }
  950.  
  951. .dropbtn i {
  952. transform: rotate(90deg);
  953. -moz-transform: rotate(90deg);
  954. -ms-transform: rotate(90deg);
  955. -o-transform: rotate(90deg);
  956. -webkit-transform: rotate(90deg);
  957. }
  958.  
  959. }
  960.  
  961. {CustomCSS}
  962.  
  963. </style>
  964.  
  965. </head>
  966.  
  967. <body>
  968.  
  969. <!--------------------------- START MAIN CONTENT---------------------------->
  970.  
  971. <main>
  972.  
  973. <!----------------------------- start sidebar ------------------------------>
  974.  
  975. <aside id="menu">
  976.  
  977. <div id="menutitle">
  978.  
  979. {block:ifMenuImage}
  980. <a href="/"><img src="{image:Menu}" id="menuimg" alt="Menu image" title="{Name}"/></a>
  981. {/block:ifMenuImage}
  982.  
  983. <div class="menutitle"><a href="/">{Title}</a></div>
  984.  
  985. </div>
  986.  
  987. <div id="menutext">
  988.  
  989. {block:Description}<div id="description">{Description}</div>{/block:Description}
  990.  
  991. </div>
  992.  
  993. <div id="menunav">
  994.  
  995. <nav>
  996.  
  997. <div class="menubuttons"><a href="/" title="{text:Home Link Hover}"><i class="fas fa-home"></i></a></div>
  998. <div class="menubuttons"><a href="/{text:Ask Link}" title="{text:Ask Link Hover}"><i class="fas fa-envelope"></i></a></div>
  999. <div class="menubuttons"><a href="/{text:Archive Link}" title="{text:Archive Link Hover}"><i class="fas fa-folder"></i></a></div>
  1000.  
  1001. <div class="dropdown">
  1002.  
  1003. <button onclick="dropDownMenu()" class="dropbtn" title="{text:Navigation Link Hover}">
  1004. <i class="fas fa-chevron-circle-right"></i>
  1005. </button>
  1006.  
  1007. <div id="myDropdown" class="dropdown-content">
  1008.  
  1009. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  1010. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  1011. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  1012. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  1013.  
  1014. </div>
  1015.  
  1016. </div>
  1017.  
  1018. </nav>
  1019.  
  1020. </div>
  1021.  
  1022. </aside>
  1023.  
  1024. <!------------------------------ end sidebar ------------------------------->
  1025.  
  1026. <!------------------------- start post container --------------------------->
  1027.  
  1028. <section>
  1029.  
  1030. <!------------------------ start tags / day pages -------------------------->
  1031.  
  1032. {block:TagPage}
  1033. <article class="tagday-page">
  1034. Viewing posts filed under <span class="tag-day">#{Tag}</span>
  1035. </article>
  1036. {/block:TagPage}
  1037.  
  1038. {block:DayPage}
  1039. <article class="tagday-page">
  1040. Viewing posts made on <span class="tag-day">{Month} {DayOfMonth}, {Year}</span>
  1041. </article>
  1042. {/block:DayPage}
  1043.  
  1044. <!------------------------- end tags / day pages --------------------------->
  1045.  
  1046. <!----------------------------- start posts -------------------------------->
  1047.  
  1048. {block:Posts}
  1049.  
  1050. <!--------------------------- start top info ------------------------------->
  1051.  
  1052. <div class="topinformation">
  1053.  
  1054. {block:Date}
  1055.  
  1056. <div class="info">
  1057.  
  1058. <div class="info-left">
  1059.  
  1060. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post">{PinnedPostLabel}</a>{/block:PinnedPostLabel}
  1061.  
  1062. <a href="{Permalink}"><i class="fas fa-clock"></i> {TimeAgo}</a>
  1063.  
  1064. {block:PermalinkPage}
  1065. <div class="source-info">
  1066. {block:RebloggedFrom}
  1067. <li><i class="fas fa-sync"></i> <a href="{ReblogParentURL}">{ReblogParentName}</a></li>
  1068. <li><i class="fas fa-user"></i> <a href="{ReblogRootURL}">{ReblogRootName}</a></li>
  1069. {/block:RebloggedFrom}
  1070.  
  1071. {block:ContentSource}<li><i class="fas fa-map-marker-alt"></i> <a href="{SourceURL}">{SourceTitle}</a></li>{/block:ContentSource}
  1072. </div>
  1073. {/block:PermalinkPage}
  1074. </div>
  1075.  
  1076. <div class="post-controls">
  1077. <a href="{ReblogURL}" target="_blank" title="reblog"><i class="fas fa-redo-alt"></i></a>
  1078. <a class="likeb" href="#" title="like">{LikeButton}<span class="actual-button"><i class="fas fa-heart"></i></span></a>
  1079. </div>
  1080.  
  1081. </div>
  1082.  
  1083. {/block:Date}
  1084.  
  1085. </div>
  1086.  
  1087. <!----------------------------- end top info ------------------------------->
  1088.  
  1089. <article class="posts" id="{PostID}">
  1090.  
  1091. <!--------------------------- start text post ------------------------------>
  1092.  
  1093. {block:Text}
  1094.  
  1095. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1096.  
  1097. {block:NotReblog}
  1098.  
  1099. <li class="caption original-caption text-caption">
  1100. <div class="caption-text">{Body}</div>
  1101. </li>
  1102.  
  1103. {/block:NotReblog}
  1104.  
  1105. {block:RebloggedFrom}
  1106.  
  1107. <div class="reblog-wrap">
  1108.  
  1109. {block:Reblogs}
  1110.  
  1111. <li class="caption text-caption">
  1112.  
  1113. <img src="{PortraitURL-64}" class="user-icon">
  1114.  
  1115. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}">
  1116. <a href="{Permalink}">{Username}</a>
  1117. </div>
  1118.  
  1119. <div class="caption-text">{Body}</div>
  1120.  
  1121. </li>
  1122.  
  1123. {/block:Reblogs}
  1124.  
  1125. </div>
  1126.  
  1127. {/block:RebloggedFrom}
  1128.  
  1129. {/block:Text}
  1130.  
  1131. <!---------------------------- end text post ------------------------------->
  1132.  
  1133. <!-------------------------- start quote post ------------------------------>
  1134.  
  1135. {block:Quote}
  1136. <div class="quote">
  1137. <i class="fas fa-quote-left"></i> {Quote} <i class="fas fa-quote-right"></i>
  1138. </div>
  1139.  
  1140. {block:Source}<div class="source">- {Source}</div>{/block:Source}
  1141. {/block:Quote}
  1142.  
  1143. <!--------------------------- end quote post ------------------------------->
  1144.  
  1145. <!--------------------------- start chat post ------------------------------>
  1146.  
  1147. {block:Chat}
  1148. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1149.  
  1150. <ul class="chat">
  1151. {block:Lines}
  1152. <li>
  1153. {block:Label}<div class="chatlabel">{Label}</div>{/block:Label}
  1154. <div class="chatline">{Line}</div>
  1155. </li>
  1156. {/block:Lines}
  1157. </ul>
  1158. {/block:Chat}
  1159.  
  1160. <!---------------------------- end chat post ------------------------------->
  1161.  
  1162. <!--------------------------- start ask post ------------------------------->
  1163.  
  1164. {block:Answer}
  1165.  
  1166. <div class="question">
  1167. <img class="asker-pic" src="{AskerPortraitURL-128}">
  1168. <div class="asker">{Asker} said</div>
  1169. <div class="asker-question">{Question}</div>
  1170. </div>
  1171.  
  1172. {block:Answerer}
  1173. <div class="answer">
  1174. <img class="answerer-pic" src="{AnswererPortraitURL-128}">
  1175. <div class="answerer"><a href="{Permalink}">{Answerer} said</a></div>
  1176. <div class="answerer-answer">{Answer}</div>
  1177. </div>
  1178. {/block:Answerer}
  1179.  
  1180. {block:NotReblog}
  1181. <li class="caption original-caption">
  1182. <div class="caption-text">{Replies}</div>
  1183. </li>
  1184. {/block:NotReblog}
  1185.  
  1186. {block:RebloggedFrom}
  1187. <div class="reblog-wrap">
  1188. {block:Reblogs}
  1189. <li class="caption">
  1190. <img src="{PortraitURL-64}" class="user-icon">
  1191. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1192. <div class="caption-text">{Body}</div>
  1193. </li>
  1194. {/block:Reblogs}
  1195. </div>
  1196. {/block:RebloggedFrom}
  1197.  
  1198. {/block:Answer}
  1199.  
  1200. <!---------------------------- end ask post -------------------------------->
  1201.  
  1202. <!-------------------------- start link post ------------------------------->
  1203.  
  1204. {block:Link}
  1205.  
  1206. <a href="{URL}" class="link-wrap">
  1207. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  1208.  
  1209. <div class="link">
  1210. <div class="title">{Name}</div>
  1211. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1212. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  1213. </div>
  1214. </a>
  1215.  
  1216. {block:Description}
  1217. {block:NotReblog}
  1218. <li class="caption original-caption">
  1219. <div class="caption-text">{Description}</div>
  1220. </li>
  1221. {/block:NotReblog}
  1222. {/block:Description}
  1223.  
  1224. {block:RebloggedFrom}
  1225. <div class="reblog-wrap">
  1226. {block:Reblogs}
  1227. <li class="caption">
  1228. <img src="{PortraitURL-64}" class="user-icon">
  1229. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1230. <div class="caption-text">{Body}</div>
  1231. </li>
  1232. {/block:Reblogs}
  1233. </div>
  1234. {/block:RebloggedFrom}
  1235.  
  1236. {/block:Link}
  1237.  
  1238. <!--------------------------- end link post -------------------------------->
  1239.  
  1240. <!---------------------- start photo & video post -------------------------->
  1241.  
  1242. {block:Photo}
  1243.  
  1244. <div class="photo">
  1245. {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}
  1246. </div>
  1247.  
  1248. {block:Caption}
  1249. {block:NotReblog}
  1250. <li class="caption original-caption">
  1251. <div class="caption-text">{Caption}</div>
  1252. </li>
  1253. {/block:NotReblog}
  1254.  
  1255. {block:RebloggedFrom}
  1256. <div class="reblog-wrap">
  1257. {block:Reblogs}
  1258. <li class="caption">
  1259. <img src="{PortraitURL-64}" class="user-icon">
  1260. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1261. <div class="caption-text">{Body}</div>
  1262. </li>
  1263. {/block:Reblogs}
  1264. </div>
  1265. {/block:RebloggedFrom}
  1266. {/block:Caption}
  1267.  
  1268. {/block:Photo}
  1269.  
  1270. {block:Photoset}
  1271.  
  1272. <div class="photo">{Photoset-700}</div>
  1273.  
  1274. {block:Caption}
  1275. {block:NotReblog}
  1276. <li class="caption original-caption">
  1277. <div class="caption-text">{Caption}</div>
  1278. </li>
  1279. {/block:NotReblog}
  1280.  
  1281. {block:RebloggedFrom}
  1282. <div class="reblog-wrap">
  1283. {block:Reblogs}
  1284. <li class="caption">
  1285. <img src="{PortraitURL-64}" class="user-icon">
  1286. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1287. <div class="caption-text">{Body}</div>
  1288. </li>
  1289. {/block:Reblogs}
  1290. </div>
  1291. {/block:RebloggedFrom}
  1292. {/block:Caption}
  1293.  
  1294. {/block:Photoset}
  1295.  
  1296. {block:Video}
  1297.  
  1298. <div class="video">{Video-500}</div>
  1299.  
  1300. {block:Caption}
  1301. {block:NotReblog}
  1302. <li class="caption original-caption">
  1303. <div class="caption-text">{Caption}</div>
  1304. </li>
  1305. {/block:NotReblog}
  1306.  
  1307. {block:RebloggedFrom}
  1308. <div class="reblog-wrap">
  1309. {block:Reblogs}
  1310. <li class="caption">
  1311. <img src="{PortraitURL-64}" class="user-icon">
  1312. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1313. <div class="caption-text">{Body}</div>
  1314. </li>
  1315. {/block:Reblogs}
  1316. </div>
  1317. {/block:RebloggedFrom}
  1318. {/block:Caption}
  1319.  
  1320. {/block:Video}
  1321.  
  1322. <!----------------------- end photo & video post --------------------------->
  1323.  
  1324. <!-------------------------- start audio post ------------------------------>
  1325.  
  1326. {block:Audio}
  1327.  
  1328. <div class="audiopost">
  1329.  
  1330. <div class="audiobox"><div class="button">
  1331. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1332. </div></div>
  1333.  
  1334. {block:AlbumArt}
  1335. <img src="{AlbumArtURL}" class="album-art">
  1336. {/block:AlbumArt}
  1337.  
  1338. <div class="audioinfo">
  1339. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1340. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1341. {block:Album}<li>{Album}</li>{/block:Album}
  1342. </div>
  1343.  
  1344. </div>
  1345.  
  1346. {block:Caption}
  1347. {block:NotReblog}
  1348. <li class="caption original-caption">
  1349. <div class="caption-text">{Caption}</div>
  1350. </li>
  1351. {/block:NotReblog}
  1352.  
  1353. {block:RebloggedFrom}
  1354. <div class="reblog-wrap">
  1355. {block:Reblogs}
  1356. <li class="caption">
  1357. <img src="{PortraitURL-64}" class="user-icon">
  1358. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1359. <div class="caption-text">{Body}</div>
  1360. </li>
  1361. {/block:Reblogs}
  1362. </div>
  1363. {/block:RebloggedFrom}
  1364. {/block:Caption}
  1365.  
  1366. {/block:Audio}
  1367.  
  1368. <!--------------------------- end audio post ------------------------------->
  1369.  
  1370. </article>
  1371.  
  1372. <!-------------------------- start bottom info ----------------------------->
  1373.  
  1374. <div class="bottominformation">
  1375.  
  1376. {block:Date}
  1377.  
  1378. <div class="bottomtags">
  1379.  
  1380. <span style="float:left;margin-right:8px"><i class="fas fa-tags"></i></span>
  1381.  
  1382. {block:HasTags}
  1383. <div class="tags">
  1384. show tags
  1385. <div class="revealonhover">{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>
  1386. </div>
  1387. {/block:HasTags}
  1388.  
  1389. </div>
  1390.  
  1391. <div class="bottomnotes">
  1392.  
  1393. <span style="float:right;margin-left:8px"><i class="fas fa-comments"></i></span>
  1394.  
  1395. {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  1396.  
  1397. </div>
  1398.  
  1399. {/block:Date}
  1400.  
  1401. </div>
  1402.  
  1403. <!--------------------------- end bottom info ------------------------------>
  1404.  
  1405. {block:PermalinkPage}{block:Date}
  1406. {block:NoteCount}{block:PostNotes}
  1407. <div class="notes">
  1408. <div class="title">{NoteCountWithLabel}</div>
  1409. {PostNotes-64}
  1410. </div>
  1411. {/block:PostNotes}{/block:NoteCount}
  1412. {/block:Date}{/block:PermalinkPage}
  1413.  
  1414. {/block:Posts}
  1415.  
  1416. </section>
  1417.  
  1418. <!-------------------------- end post container ---------------------------->
  1419.  
  1420. <!--------------------------- start pagination ----------------------------->
  1421.  
  1422. {block:Pagination}
  1423. <article id="page-navigation">
  1424. {block:PreviousPage}<a href="{PreviousPage}"><i class="fas fa-arrow-left"></i></a>{/block:PreviousPage}
  1425.  
  1426. {block:JumpPagination length="5"}
  1427. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1428. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1429. {/block:JumpPagination}
  1430.  
  1431. {block:NextPage}<a href="{NextPage}"><i class="fas fa-arrow-right"></i></a>{/block:NextPage}
  1432. </article>
  1433. {/block:Pagination}
  1434.  
  1435. <!---------------------------- end pagination ------------------------------>
  1436.  
  1437. </main>
  1438.  
  1439. <!---------------------------- END MAIN CONTENT----------------------------->
  1440.  
  1441. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  1442.  
  1443. <a id="othercredit" target="blank" title="base code by seyche" href="https://seyche.tumblr.com/">&.</a>
  1444. <a id="credit" target="blank" title="theme by bones" href="https://nuclearthemes.tumblr.com/"><i class="fas fa-skull"></i></a>
  1445.  
  1446. <script src="https://unpkg.com/popper.js@1"></script>
  1447. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1448. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1449.  
  1450. <script>
  1451.  
  1452. function dropDownMenu() {
  1453. document.getElementById("myDropdown").classList.toggle("show");
  1454. }
  1455.  
  1456. window.onclick = function(event) {
  1457. if (!event.target.matches('.dropbtn')) {
  1458. var dropdowns = document.getElementsByClassName("dropdown-content");
  1459. var i;
  1460.  
  1461. for (i = 0; i < dropdowns.length; i++) {
  1462. var openDropdown = dropdowns[i];
  1463. if (openDropdown.classList.contains('show')) {
  1464. openDropdown.classList.remove('show');
  1465. }
  1466. }
  1467. }
  1468. }
  1469.  
  1470. tippy('[title]', {
  1471. theme: 'custom',
  1472. arrow: false,
  1473. delay: [200, 0],
  1474. zIndex: 9999999999,
  1475. maxWidth: 300,
  1476.  
  1477. content(reference) {
  1478. const title = reference.getAttribute('title');
  1479. reference.removeAttribute('title');
  1480. return title;
  1481. },
  1482. });
  1483. </script>
  1484.  
  1485. </body>
  1486.  
  1487. </html>
Advertisement
Add Comment
Please, Sign In to add comment