userkai

OH, ABIGAIL by KAI

May 24th, 2023 (edited)
929
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.54 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3.  
  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. OH, ABIGAIL by kai @heroeddiemunson
  15.  
  16. - base code & tags on click | seyche.tumblr.com
  17. base: seyche.tumblr.com/post/636055768176689152
  18. tags on click: seyche.tumblr.com/post/643682133088583680/
  19.  
  20. - new tumblr controls | odeysseus.tumblr.com
  21. odeysseus.tumblr.com/post/163708246967/
  22.  
  23. - right click disabled | Maximus w/ mods by DynamicDrive
  24. tumblrblogette.tumblr.com/post/8296084974/
  25.  
  26. - sticky topbar | cationcodes.tumblr.com (deactivated)
  27. theme-rec.tumblr.com/post/187243710433
  28.  
  29. - day/night mode tutorial | egg.design
  30. egg.design/post/186889223257/
  31.  
  32. - tippy.js tooltips | atomiks.github.io/tippyjs/
  33. - fonts | bunny fonts
  34. - icons | phosphor icons
  35.  
  36. --->
  37.  
  38. <!----- BUNNY FONTS ---->
  39. <link href="https://fonts.bunny.net/css?family={text:font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  40. <link href="https://fonts.bunny.net/css?family={text:title font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  41.  
  42. <!---- ICONS ---->
  43. <script src="https://unpkg.com/phosphor-icons"></script>
  44. <script src="https://unpkg.com/[email protected]"></script>
  45.  
  46. <!---- TAGS ON CLICK BY SEYCHE ---->
  47. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  48.  
  49. <!---- TIPPY TOOLTIPS ---->
  50. <script src="https://unpkg.com/popper.js@1"></script>
  51. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  52.  
  53. <!---- STICKY TOPBAR ---->
  54. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  55.  
  56.  
  57. <!------------------------------- VARIABLES --------------------------------->
  58.  
  59. <meta name="image:sidebar" content=""/>
  60.  
  61. <meta name="color:background" content="#181818"/>
  62. <meta name="color:post background" content="#2a2a2a"/>
  63. <meta name="color:text" content="#f6f6f6"/>
  64. <meta name="color:link" content="#9058c5"/>
  65. <meta name="color:accent one" content="#a265dc"/>
  66. <meta name="color:accent two" content="#b37de7"/>
  67. <meta name="color:accent three" content="#c592f6"/>
  68. <meta name="color:borders" content="#555555"/>
  69. <meta name="color:shadow" content="#323131"/>
  70.  
  71. <meta name="color:day background" content="#fafafa"/>
  72. <meta name="color:day post background" content="#f4f4f4"/>
  73. <meta name="color:day text" content="#707070"/>
  74. <meta name="color:day link" content="#9058c5"/>
  75. <meta name="color:day accent one" content="#a265dc"/>
  76. <meta name="color:day accent two" content="#b37de7"/>
  77. <meta name="color:day accent three" content="#c592f6"/>
  78. <meta name="color:day borders" content="#9058c5"/>
  79. <meta name="color:day shadow" content="#e3e3e3"/>
  80.  
  81. <meta name="if:gradient background" content="1"/>
  82. <meta name="if:right click disabled" content="0"/>
  83.  
  84. <meta name="select:post width" content="540px" title="540px"/>
  85. <meta name="select:post width" content="500px" title="500px"/>
  86. <meta name="select:post width" content="400px" title="400px"/>
  87. <meta name="select:rounded corners" content="10px" title="round"/>
  88. <meta name="select:rounded corners" content="5px" title="less round"/>
  89. <meta name="select:rounded corners" content="15px" title="more round"/>
  90. <meta name="select:rounded corners" content="0px" title="not round"/>
  91.  
  92. <meta name="text:post margin" content="150"/>
  93. <meta name="text:title font" content="Montserrat Alternates"/>
  94. <meta name="text:font" content="Poppins"/>
  95. <meta name="text:title font size" content="15"/>
  96. <meta name="text:font size" content="13"/>
  97.  
  98. <meta name="text:right click disabled message" content="function disabled!"/>
  99.  
  100. <meta name="text:custom title" content="custom title"/>
  101. <meta name="text:tracking tag" content="tracking tag"/>
  102. <meta name="text:custom description" content="custom description; no more than two lines of text!"/>
  103.  
  104. <meta name="text:link 1 URL" content="/"/>
  105. <meta name="text:link 1 title" content="link 1"/>
  106. <meta name="text:link 1 icon" content="planet"/>
  107. <meta name="text:link 2 URL" content="/"/>
  108. <meta name="text:link 2 title" content="link 2"/>
  109. <meta name="text:link 2 icon" content="sun"/>
  110. <meta name="text:link 3 URL" content="/"/>
  111. <meta name="text:link 3 title" content="link 3"/>
  112. <meta name="text:link 3 icon" content="moon"/>
  113. <meta name="text:link 4 URL" content="/"/>
  114. <meta name="text:link 4 title" content="link 4"/>
  115. <meta name="text:link 4 icon" content="star"/>
  116. <meta name="text:link 5 URL" content="/"/>
  117. <meta name="text:link 5 title" content="link 5"/>
  118. <meta name="text:link 5 icon" content="rocket-launch"/>
  119.  
  120. <!----- CSS ----->
  121.  
  122. <style type="text/css">
  123.  
  124.  
  125.  
  126. /*----- BASIC STYLING -----*/
  127.  
  128. ::-webkit-scrollbar {
  129. width: 5px;
  130. background:{color:accent three};
  131. }
  132.  
  133. ::-webkit-scrollbar-track {
  134. width:3px;
  135. }
  136.  
  137. ::-webkit-scrollbar-thumb {
  138. background:{color:accent one};
  139. }
  140.  
  141. ::selection {
  142. background: {color:accent one}; /* WebKit/Blink Browsers */
  143. color:{color:background};
  144. }
  145. ::-moz-selection {
  146. background: {color:accent one}; /* Gecko Browsers */
  147. color:{color:background};
  148. }
  149.  
  150.  
  151. body {
  152. font-family: {text:font};
  153. font-size: {text:font size}px;
  154. color: {color:text};
  155. background-color: {color:background};
  156. line-height: 160%;
  157. word-wrap: break-word;
  158. letter-spacing: 0.04em;
  159. margin: 0;
  160. padding: 0;
  161. }
  162.  
  163. {block:ifGradientBackground}
  164. body {
  165. background-image:linear-gradient(to bottom right, {color:accent one}, {color:accent two}, {color:accent three});
  166. }
  167. {/block:ifGradientBackground}
  168.  
  169.  
  170.  
  171. /*---- DAY/NIGHT ----*/
  172.  
  173. body.night {
  174. background:{color:day background};
  175. color:{color:day text};
  176. transition:.6s;
  177. }
  178.  
  179. {block:ifGradientBackground}
  180. body.night {
  181. background-image:linear-gradient(to bottom right, {color:accent one}, {color:accent two}, {color:accent three});
  182. }
  183. {/block:ifGradientBackground}
  184.  
  185. .daynight span {
  186. cursor:pointer;
  187. font-size:16px;
  188. margin-top:1.3em;
  189. margin-left:1em;
  190. }
  191.  
  192. body.night a {
  193. color:{color:day link};!important;
  194. }
  195.  
  196. body.night article, body.night #sidebar {
  197. background:{color:day post background};!important;
  198. box-shadow:0px 0px 10px {color:day shadow};!important;
  199. }
  200.  
  201. body.night .nav a {
  202. color:white;
  203. margin-top:3px;
  204. padding:8px;
  205. border-radius:100%;
  206. text-shadow:0 1px rgba(0,0,0,.1);
  207. }
  208.  
  209. body.night .nav a:hover {
  210. color:{color:day accent three};
  211. }
  212.  
  213. body.night .info a {
  214. color:white;
  215. display: inline-block;
  216. vertical-align: middle;
  217. padding:15px;
  218. }
  219.  
  220. body.night .info a:hover {
  221. color:{color:link};
  222. }
  223.  
  224. body.night a.pinned-post {
  225. font-weight: bold; color: {color:link};
  226. }
  227.  
  228. body.night .title {
  229. color:{color:post background};
  230. text-shadow:0px 0px 10px {color:shadow};
  231. }
  232.  
  233.  
  234.  
  235.  
  236. a {
  237. color: {color:link};
  238. display: inline-block;
  239. position: relative;
  240. text-decoration: none;
  241. -webkit-transition: all 0.3s;
  242. -moz-transition: all 0.3s;
  243. -ms-transition: all 0.3s;
  244. -o-transition: all 0.3s;
  245. transition: all 0.3s;
  246. }
  247.  
  248. a:hover {
  249. color: {color:accent one};
  250. -webkit-transition: all 0.3s;
  251. -moz-transition: all 0.3s;
  252. -ms-transition: all 0.3s;
  253. -o-transition: all 0.3s;
  254. transition: all 0.3s;
  255. }
  256.  
  257. a::after {
  258. content: '';
  259. position: absolute;
  260. width: 100%;
  261. transform: scaleX(0);
  262. height: 2px;
  263. bottom: 0;
  264. left: 0;
  265. background-image:linear-gradient(to right, {color:accent one}, {color:accent two});
  266. transform-origin: bottom right;
  267. transition: transform 0.25s ease-out;
  268. }
  269.  
  270. a:hover::after {
  271. transform: scaleX(1);
  272. transform-origin: bottom left;
  273. }
  274.  
  275. blockquote {
  276. padding: 0 0 0 1.5em;
  277. border-left: 2px solid {color:borders};
  278. margin: 1.5em 0 1.5em 1.5em;
  279. }
  280.  
  281. h1, h2, h3, h4, h5, .title {
  282. font-family: {text:title font};
  283. font-size:{text:title font size}px;
  284. letter-spacing: 0.06em;
  285. line-height: 145%;
  286. font-weight: bold;
  287. }
  288.  
  289. .title {
  290. text-shadow:0px 0px 10px {color:day shadow};
  291. display: inline-block;
  292. position: absolute;
  293. top: 50%;
  294. left: 50%;
  295. transform: translate(-50%,-50%);
  296. }
  297.  
  298. h1, .title {font-size: 1.5em;}
  299. h2 {font-size: 1.3em;}
  300. h3 {font-size: 1.25em;}
  301. h4 {font-size: 1.1em;}
  302. h5 {font-size: 1em;}
  303.  
  304. small {font-family: {text:font}font-size: 0.9em;}
  305. big {font-family: {text:title font};font-size:{text:font size}px;}
  306.  
  307. hr {
  308. height: 1px;
  309. border: none;
  310. box-shadow: none;
  311. background-color: {color:borders};
  312. }
  313.  
  314. pre {
  315. line-height: inherit;
  316. font-size: inherit;
  317. white-space: pre-wrap;
  318. white-space: -moz-pre-wrap;
  319. white-space: -pre-wrap;
  320. white-space: -o-pre-wrap;
  321. word-wrap: break-word;
  322. }
  323.  
  324. .tmblr-iframe{
  325. white-space:nowrap;
  326. opacity:.2;
  327. transition: .4s ease-in-out;
  328. -webkit-transition: .4s ease-in-out;
  329. -moz-transition: .4s ease-in-out;
  330. -o-transition: .4s ease-in-out;
  331. position:fixed!important;
  332. right:-3em!important;
  333. transform:scale(0.7,0.7);
  334. margin-top:-.1em;
  335. z-index:9999999999999999!important;
  336. }
  337.  
  338. .tmblr-iframe:hover { opacity:1; }
  339.  
  340. /*----- SIDEBAR -----*/
  341.  
  342. #sidebar {
  343. background:{color:post background};
  344. border-radius:{select:rounded corners};
  345. box-shadow:0px 0px 10px {color:shadow};
  346. padding:15px;
  347. width: 300px;
  348. position: fixed;
  349. top:{text:post margin}px;
  350. text-align: center;
  351. }
  352.  
  353. {block:ifSidebarImage}
  354. #side-img {
  355. text-align:center;
  356. border-radius:{select:rounded corners};
  357. margin-bottom: 1em;
  358. width:100%;
  359. height:100%;
  360. }
  361. {/block:ifSidebarImage}
  362.  
  363. .trackedtag {
  364. font:{text:font};
  365. font-size:{text:title font size}px;
  366. margin-bottom:15px;
  367. display: inline-block;
  368. position: relative;
  369. }
  370.  
  371. .trackedtag::after {
  372. content: '';
  373. position: absolute;
  374. width: 100%;
  375. transform: scaleX(0);
  376. height: 2px;
  377. bottom: 0;
  378. left: 0;
  379. background-image:linear-gradient(to right, {color:accent one}, {color:accent two});
  380. transform-origin: bottom right;
  381. transition: transform 0.25s ease-out;
  382. }
  383.  
  384. .trackedtag:hover::after {
  385. transform: scaleX(1);
  386. transform-origin: bottom left;
  387. }
  388.  
  389. .description {
  390. text-align:center;
  391. height:50px;
  392. }
  393.  
  394. .nav {
  395. background-image:linear-gradient(to bottom right, {color:accent one}, {color:accent two});
  396. border-radius:{select:rounded corners};
  397. font-size:15px;
  398. margin-top: 5px;
  399. position: inline block;
  400. }
  401.  
  402. .nav a {
  403. color:white;
  404. margin-top:3px;
  405. padding:8px;
  406. border-radius:100%;
  407. text-shadow:0 1px rgba(0,0,0,.1);
  408. }
  409.  
  410. .nav a:hover {
  411. color:{color:accent three};
  412. }
  413.  
  414.  
  415. /*----- POSTS -----*/
  416.  
  417. main {
  418. position: relative;
  419. width: calc(250px + {select:post width} + 150px);
  420. margin: auto;
  421. }
  422.  
  423. section {
  424. position: relative;
  425. width: {select:post width};
  426. margin-left: 400px;
  427. }
  428.  
  429. article {
  430. background: {color:post background};
  431. border-radius:{select:rounded corners};
  432. box-shadow:0px 0px 10px {color:shadow};
  433. padding:15px;
  434. width: 100%;
  435. position: relative;
  436. margin: {text:post margin}px auto;
  437. }
  438.  
  439. .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%;}
  440.  
  441. /*----- CAPTIONS -----*/
  442.  
  443. .caption {margin-top: 2em; list-style-type: none;}
  444. .text-caption:first-of-type {margin-top: 0;}
  445.  
  446. .user-icon, .ask-icon {
  447. border: 3px solid {color:accent one};
  448. border-radius:100%;
  449. display: inline-block;
  450. vertical-align: middle;
  451. width: 2em;
  452. height: 2em;
  453. margin-right: 1em;
  454. }
  455.  
  456. .ask-icon {
  457. margin-bottom:.4em;
  458. }
  459.  
  460. .username {
  461. display: inline-block;
  462. position: relative;
  463. vertical-align: middle;
  464. font-weight: bold;
  465. }
  466.  
  467. .username::after {
  468. content: '';
  469. position: absolute;
  470. width: 100%;
  471. transform: scaleX(0);
  472. height: 2px;
  473. bottom: 0;
  474. left: 0;
  475. background-image:linear-gradient(to right, {color:accent one}, {color:accent two});
  476. transform-origin: bottom right;
  477. transition: transform 0.25s ease-out;
  478. }
  479.  
  480. .username:hover::after {
  481. transform: scaleX(1);
  482. transform-origin: bottom left;
  483. }
  484.  
  485. .deactive::after {
  486. content: '(deactivated)';
  487. margin-left: 10em;
  488. opacity: 0.75;
  489. color: {color:text};
  490. }
  491.  
  492. p.tmblr-attribution {margin-top: 1em !important;}
  493.  
  494. /*----- TEXT -----*/
  495.  
  496. h1.post-title {
  497. font-family: {text:title font};
  498. font-size:{text:title font size}px;
  499. margin-top: 0;}
  500.  
  501. /*----- LINK -----*/
  502.  
  503. a.link-wrap {display: block; border: 1px solid {color:borders};}
  504. .link {padding: 2em;}
  505. .link-host, .link-txt {margin-top: 1.5em;}
  506.  
  507. .npf-link-block {
  508. margin-top: 1.5em;
  509. background-color: inherit;
  510. border: 1px solid inherit;
  511. color: inherit;
  512. }
  513.  
  514. /*----- PHOTO -----*/
  515.  
  516. img {
  517. margin: 0;
  518. display: block;
  519. height: auto;
  520. max-width: 100%;
  521. }
  522.  
  523. .photo img {width: 100%;}
  524. .vignette, #vignette {opacity: 0;}
  525. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  526.  
  527. .lightbox-image, #tumblr_lightbox img {
  528. box-shadow: none !important;
  529. border-radius: 0 !important;
  530. max-width: none;
  531. }
  532.  
  533. #tumblr_lightbox_caption, .lightbox-caption {
  534. color: #fff !important;
  535. font-family: inherit;
  536. margin-top: 1em !important;
  537. }
  538.  
  539. /*----- PHOTOSET -----*/
  540.  
  541. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  542. margin-left: 0 !important;
  543. margin-right: 0 !important;
  544. }
  545.  
  546. /*----- QUOTE -----*/
  547.  
  548. .quote {
  549. background-image:linear-gradient(to bottom right, {color:accent two}, {color:accent three});
  550. border-radius:{select:rounded corners};
  551. padding:15px;
  552. line-height: 160%;
  553. font-size: 1.5em;
  554. font:{text:title font};
  555. color:white;
  556. }
  557.  
  558. .quote p:first-of-type {margin-top: 0;}
  559. .quote p:last-of-type {margin-bottom: 0;}
  560.  
  561. .source {
  562. text-align:right;
  563. margin-top: 1.5em;
  564. }
  565.  
  566. /*----- CHAT -----*/
  567.  
  568. .chat {padding: 0; margin: 0;}
  569. .chat li {list-style-type: none; margin-top: 1em;}
  570. .chat li:first-of-type {margin-top: 0;}
  571. .chatter {
  572. font-weight: bold;
  573. color:{color:accent two};
  574. }
  575.  
  576. p.npf_chat, p.npf_chat b {font-family: inherit;}
  577.  
  578. /*----- ANSWER -----*/
  579.  
  580. .ask-wrap {padding-bottom: .25em;}
  581.  
  582. .ask-wrap .asking {
  583. display: inline-block;
  584. margin-bottom:.3em;
  585. font-weight: bold;
  586. }
  587.  
  588. .question {
  589. background-image:linear-gradient(to bottom right, {color:accent two}, {color:accent three});
  590. border-radius:{select:rounded corners};
  591. color:white;
  592. padding:15px;
  593. margin-top: 1em;
  594. }
  595.  
  596. .question p:first-of-type {margin-top: 0;}
  597. .question p:last-of-type {margin-bottom: 0;}
  598.  
  599. /*----- AUDIO -----*/
  600.  
  601. .audiopost {
  602. background-image:linear-gradient(to bottom right, {color:accent two}, {color:accent three});
  603. border-radius:{select:rounded corners};
  604. padding: 2em;
  605. }
  606.  
  607. .album-art {
  608. border-radius:{select:rounded corners};
  609. z-index: 1;
  610. display: inline-block;
  611. vertical-align: middle;
  612. float: left;
  613. width: 100px;
  614. height: 100px;
  615. }
  616.  
  617. .audio-player-wrap {
  618. width: 100px;
  619. height: 100px;
  620. display: inline-block;
  621. }
  622.  
  623. .button {
  624. width: 30px;
  625. height: 30px;
  626. overflow: hidden;
  627. position: relative;
  628. z-index: 2;
  629. margin: 7px;
  630. }
  631.  
  632. .audiobox {
  633. background-color: {color:post background};
  634. z-index: 3;
  635. position: absolute;
  636. margin: 28px 0 0 28px;
  637. border-radius: 50%;
  638. }
  639.  
  640. .audioinfo {
  641. text-align:right;
  642. display: inline-block;
  643. height: 100px;
  644. max-width: calc(100% + 150px);
  645. margin-left: 100px;
  646. display: flex;
  647. justify-content: center;
  648. flex-direction: column;
  649. box-sizing: border-box;
  650. padding-right: 2em;
  651. color:white;
  652. }
  653.  
  654. .audioinfo li {list-style-type: none;}
  655. .track {font-weight: bold;}
  656.  
  657. /*----- INFO -----*/
  658.  
  659. .info {
  660. background-image:linear-gradient(to bottom right, {color:accent one}, {color:accent two}, {color:accent three});
  661. border-radius:{select:rounded corners};
  662. margin-top: 10px;
  663. font-size:12px;
  664. }
  665.  
  666. .info a {
  667. color:white;
  668. display: inline-block;
  669. vertical-align: middle;
  670. padding:15px;
  671. }
  672.  
  673. .info a:hover {
  674. color:{color:link};
  675. }
  676.  
  677. .likeb {
  678. position: relative;
  679. display: inline-block;
  680. height: 1.6em;
  681. margin-bottom: -1px;
  682. }
  683.  
  684. .likeb .like_button iframe {
  685. position: absolute;
  686. top: 0;
  687. left: 0;
  688. bottom: 0;
  689. right: 0;
  690. z-index: 2;
  691. opacity: 0;
  692. }
  693.  
  694. .like_button iframe {width: 100% !important; height: 100% !important;}
  695. .like-button .liked + .actual-button {
  696. color:{color:accent two};
  697. }
  698.  
  699. .likeb .liked + .actual-button:after {
  700. content: 'color:{color:accent two};';
  701. }
  702.  
  703. a.clicktagsbutton.tags-click i {
  704. color:{color:accent two};
  705. }
  706.  
  707. .info a {margin-right: 0.75em;}
  708.  
  709. a.pinned-post {font-weight: bold; color: {color:link};}
  710.  
  711. /*---- POST NOTES -----*/
  712.  
  713. .notes {margin: {text:post margin}px 0;}
  714.  
  715. ol.notes {
  716. max-width: 100%;
  717. padding: 0;
  718. margin: 2em 0 0 0;
  719. }
  720.  
  721. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  722.  
  723. ol.notes li.note img.avatar {
  724. margin-right: 1em;
  725. vertical-align: middle;
  726. display: inline-block;
  727. width: 1.25em;
  728. height: 1.25em;
  729. }
  730.  
  731. /*--- TAGS ON CLICK BY SEYCHE ---*/
  732. a.tag-button {
  733. cursor: pointer;
  734. display: inline-block;
  735. vertical-align: middle;
  736. }
  737.  
  738. a.tag-button svg {
  739. width: 20px;
  740. height: 20px;
  741. }
  742.  
  743. a.tag-button:hover {
  744. color: {color:accent one};
  745. }
  746.  
  747. a.tag-button.tag-clicked {
  748. color: {color:accent one};
  749. }
  750.  
  751. .tags {
  752. color:{color:text};
  753. margin-top:1em;
  754. font-size:12px;
  755. display: none;
  756. }
  757.  
  758. .tags a {
  759. margin-right: 0.75em;
  760. display: inline-block;
  761. position: relative;
  762. }
  763.  
  764. .tags a::after {
  765. content: '';
  766. position: absolute;
  767. width: 100%;
  768. transform: scaleX(0);
  769. height: 2px;
  770. bottom: 0;
  771. left: 0;
  772. background-image:linear-gradient(to right, {color:accent one}, {color:accent two});
  773. transform-origin: bottom right;
  774. transition: transform 0.25s ease-out;
  775. }
  776.  
  777. .tags a:hover::after {
  778. transform: scaleX(1);
  779. transform-origin: bottom left;
  780. }
  781.  
  782. /*--- TIPPY TOOLTIPS ---*/
  783.  
  784. .tippy-tooltip.custom-theme {
  785. background-image:linear-gradient(to bottom right, {color:accent one}, {color:accent two});
  786. font-size:1em;
  787. font-weight:500;
  788. color:white;
  789. text-transform:lowercase;
  790. text-shadow:0 1px rgba(0,0,0,.1);
  791. text-align:center;
  792. border-radius:5px;
  793. box-shadow:0 2px 8px -2px rgba(0,0,0,.2);
  794. }
  795. /* Right placement tooltip arrow (arrow will be on left side of tooltip) */
  796. .tippy-popper[x-placement^=right] .tippy-tooltip.custom-theme .tippy-arrow {
  797. border-right: 7px solid {color:accent one}; /* your color here */
  798. }
  799.  
  800. /* Left placement tooltip arrow (arrow will be on right side of tooltip) */
  801. .tippy-popper[x-placement^=left] .tippy-tooltip.custom-theme .tippy-arrow {
  802. border-left: 7px solid {color:accent one}; /* your color here */
  803. }
  804.  
  805. /* Top placement tooltip arrow (arrow will be on bottom side of tooltip) */
  806. .tippy-popper[x-placement^=top] .tippy-tooltip.custom-theme .tippy-arrow {
  807. border-top: 7px solid {color:accent one}; /* your color here */
  808. }
  809.  
  810. /* Bottom placement tooltip arrow (arrow will be on top side of tooltip) */
  811. .tippy-popper[x-placement^=bottom] .tippy-tooltip.custom-theme .tippy-arrow {
  812. border-bottom: 7px solid {color:accent one}; /* your color here */
  813. }
  814.  
  815. /*---- STICKY TOPBAR ----*/
  816.  
  817. .four20 {
  818. left:0;
  819. top:0px;
  820. width:100%;
  821. height:60px;
  822. position:absolute;
  823. background:{color:accent three};
  824. opacity:0.9;
  825. z-index:999999!important;
  826. }
  827.  
  828. .four20 a{
  829. color:#ffffff;
  830. display:inline-block;
  831. }
  832.  
  833. .blazeit{
  834. position:fixed;
  835. top:0;
  836. }
  837.  
  838.  
  839. /*---- PAGINATION -----*/
  840.  
  841. #page-navigation {text-align: center;}
  842. #page-navigation a, .current-page {margin: 0 0.5em;}
  843. .current-page {font-weight: bold; color: {color:accent one};}
  844.  
  845. /*---- CREDIT -----*/
  846.  
  847. #credit {
  848. position: fixed;
  849. bottom: 15px;
  850. right: 20px;
  851. font-size: 15px;
  852. text-shadow:0px 0px 10px {color:shadow};
  853. }
  854.  
  855. {CustomCSS}
  856.  
  857. </style>
  858. </head>
  859.  
  860. <!----- HTML ----->
  861.  
  862. <body>
  863.  
  864. <!-- RIGHT CLICK DISABLED -->
  865. {block:ifRightClickDisabled}
  866. <script language=JavaScript>
  867. <!--
  868.  
  869. //Disable right mouse click Script
  870. //By Maximus ([email protected]) w/ mods by DynamicDrive
  871. //For full source code, visit https://www.dynamicdrive.com
  872.  
  873. var message="{text:right click disabled message}";
  874.  
  875. ///////////////////////////////////
  876. function clickIE4(){
  877. if (event.button==2){
  878. alert(message);
  879. return false;
  880. }
  881. }
  882.  
  883. function clickNS4(e){
  884. if (document.layers||document.getElementById&&!document.all){
  885. if (e.which==2||e.which==3){
  886. alert(message);
  887. return false;
  888. }
  889. }
  890. }
  891.  
  892. if (document.layers){
  893. document.captureEvents(Event.MOUSEDOWN);
  894. document.onmousedown=clickNS4;
  895. }
  896. else if (document.all&&!document.getElementById){
  897. document.onmousedown=clickIE4;
  898. }
  899.  
  900. document.oncontextmenu=new Function("alert(message);return false")
  901.  
  902. // -->
  903. </script>
  904. {/block:ifRightClickDisabled}
  905.  
  906. <!-- main = main container -->
  907.  
  908. <div class="four20">
  909.  
  910. <div class="daynight"><span class="ph-sun"></span></div>
  911. <center>
  912. <div class="title">{text:custom title}</div>
  913. </center>
  914.  
  915. </div>
  916.  
  917. </div>
  918.  
  919.  
  920. <main>
  921.  
  922. <!----- SIDEBAR ----->
  923.  
  924. <aside id="sidebar">
  925.  
  926. <div class="trackedtag"><a href="https://www.tumblr.com/tagged/{text:tracking tag}?sort=recent" target="_blank"><b>#{text:tracking tag}</b></a></div>
  927.  
  928. {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img" alt="Sidebar image"/></a>{/block:ifSidebarImage}
  929.  
  930. <div class="description">{text:custom description}</div>
  931.  
  932. <div class="nav">
  933. <a title="refresh" href="/"><i class="ph ph-house-fill"></i></a>
  934.  
  935. {block:AskEnabled}
  936. <a title="message" href="/ask"><i class="ph ph-chat-circle-fill"></i></a>
  937. {/block:AskEnabled}
  938.  
  939. <a title="archive" href="/archive"><i class="ph ph-archive-fill"></i></a>
  940.  
  941. {block:SubmissionsEnabled}
  942. <a title="submit" href="/submit"><i class="ph ph-archive-tray-fill"></i></a>
  943. {/block:SubmissionsEnabled}
  944.  
  945. {block:ifLink1URL}{block:ifLink1Icon}{block:ifLink1Title}
  946. <a title="{text:link 1 title}" href="{text:link 1 URL}"><i class="ph ph-{text:link 1 icon}-fill"></i></a>
  947. {/block:ifLink1URL}{/block:ifLink1Icon}{/block:ifLink1Title}
  948.  
  949. {block:ifLink2URL}{block:ifLink2Icon}{block:ifLink2Title}
  950. <a title="{text:link 2 title}" href="{text:link 2 URL}"><i class="ph ph-{text:link 2 icon}-fill"></i></a>
  951. {/block:ifLink2URL}{/block:ifLink2Icon}{/block:ifLink2Title}
  952.  
  953. {block:ifLink3URL}{block:ifLink3Icon}{block:ifLink3Title}
  954. <a title="{text:link 3 title}" href="{text:link 3 URL}"><i class="ph ph-{text:link 3 icon}-fill"></i></a>
  955. {/block:ifLink3URL}{/block:ifLink1Icon}{/block:ifLink3Title}
  956.  
  957. {block:ifLink4URL}{block:ifLink4Icon}{block:ifLink4Title}
  958. <a title="{text:link 4 title}" href="{text:link 4 URL}"><i class="ph ph-{text:link 4 icon}-fill"></i></a>
  959. {/block:ifLink4URL}{/block:ifLink4Icon}{/block:ifLink4Title}
  960.  
  961. {block:ifLink5URL}{block:ifLink5Icon}{block:ifLink5Title}
  962. <a title="{text:link 5 title}" href="{text:link 5 URL}"><i class="ph ph-{text:link 5 icon}-fill"></i></a>
  963. {/block:ifLink5URL}{/block:ifLink5Icon}{/block:ifLink5Title}
  964.  
  965. </div>
  966.  
  967. </aside>
  968.  
  969. <!----- TAG AND DAY PAGES ----->
  970.  
  971. <!-- section = post container -->
  972.  
  973. <section>
  974.  
  975. {block:TagPage}
  976. <article>
  977. viewing <b>{tagresultcount}</b> posts under #{Tag}
  978. </article>
  979. {/block:TagPage}
  980.  
  981. {block:DayPage}
  982. <article>
  983. viewing posts made on {Month} {DayOfMonth}, {Year}
  984. </article>
  985. {/block:DayPage}
  986.  
  987. <!----- POSTS ----->
  988.  
  989. {block:Posts}
  990. <article class="posts" id="{PostID}">
  991.  
  992. {block:Text}
  993. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  994. {block:NotReblog}
  995. <li class="caption text-caption">
  996. {Body}
  997. </li>
  998. {/block:NotReblog}
  999. {block:RebloggedFrom}
  1000. {block:Reblogs}
  1001. <li class="caption text-caption">
  1002. <img src="{PortraitURL-64}" class="user-icon">
  1003. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1004. {Body}
  1005. </li>
  1006. {/block:Reblogs}
  1007. {/block:RebloggedFrom}
  1008. {/block:Text}
  1009.  
  1010. {block:Link}
  1011. <a href="{URL}" class="link-wrap">
  1012. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  1013. <div class="link">
  1014. <div class="title">{Name}</div>
  1015. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1016. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  1017. </div>
  1018. </a>
  1019. {block:Description}
  1020. {block:NotReblog}
  1021. <li class="caption">
  1022. {Description}
  1023. </li>
  1024. {/block:NotReblog}
  1025. {/block:Description}
  1026. {block:RebloggedFrom}
  1027. {block:Reblogs}
  1028. <li class="caption">
  1029. <img src="{PortraitURL-64}" class="user-icon">
  1030. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1031. {Body}
  1032. </li>
  1033. {/block:Reblogs}
  1034. {/block:RebloggedFrom}
  1035. {/block:Link}
  1036.  
  1037. {block:Photo}
  1038. <div class="photo">
  1039. {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}
  1040. </div>
  1041. {block:Caption}
  1042. {block:NotReblog}
  1043. <li class="caption">
  1044. {Caption}
  1045. </li>
  1046. {/block:NotReblog}
  1047. {block:RebloggedFrom}
  1048. {block:Reblogs}
  1049. <li class="caption">
  1050. <img src="{PortraitURL-64}" class="user-icon">
  1051. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1052. {Body}
  1053. </li>
  1054. {/block:Reblogs}
  1055. {/block:RebloggedFrom}
  1056. {/block:Caption}
  1057. {/block:Photo}
  1058.  
  1059. {block:Photoset}
  1060. <div class="photo">{Photoset-700}</div>
  1061. {block:Caption}
  1062. {block:NotReblog}
  1063. <li class="caption">
  1064. {Caption}
  1065. </li>
  1066. {/block:NotReblog}
  1067. {block:RebloggedFrom}
  1068. {block:Reblogs}
  1069. <li class="caption">
  1070. <img src="{PortraitURL-64}" class="user-icon">
  1071. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1072. {Body}
  1073. </li>
  1074. {/block:Reblogs}
  1075. {/block:RebloggedFrom}
  1076. {/block:Caption}
  1077. {/block:Photoset}
  1078.  
  1079. {block:Video}
  1080. <div class="video">{Video-500}</div>
  1081. {block:Caption}
  1082. {block:NotReblog}
  1083. <li class="caption">
  1084. {Caption}
  1085. </li>
  1086. {/block:NotReblog}
  1087. {block:RebloggedFrom}
  1088. {block:Reblogs}
  1089. <li class="caption">
  1090. <img src="{PortraitURL-64}" class="user-icon">
  1091. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1092. {Body}
  1093. </li>
  1094. {/block:Reblogs}
  1095. {/block:RebloggedFrom}
  1096. {/block:Caption}
  1097. {/block:Video}
  1098.  
  1099. {block:Quote}
  1100. <div class="quote">{Quote}</div>
  1101. {block:Source}<div class="source">— {Source}</div>{/block:Source}
  1102. {/block:Quote}
  1103.  
  1104. {block:Chat}
  1105. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1106. <ul class="chat">{block:Lines}
  1107. <li>
  1108. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1109. {Line}
  1110. </li>
  1111. {/block:Lines}</ul>
  1112. {/block:Chat}
  1113.  
  1114. {block:Answer}
  1115. <div class="ask-wrap">
  1116. <div class="question">
  1117. <img src="{AskerPortraitURL-64}" class="ask-icon">
  1118. <div class="asking">{Asker} asked:</div>
  1119. {Question}
  1120. </div>
  1121. </div>
  1122. {block:Answerer}
  1123. <li class="caption">
  1124. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1125. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1126. {Answer}
  1127. </li>
  1128. {/block:Answerer}
  1129. {block:NotReblog}
  1130. <li class="caption">
  1131. {Replies}
  1132. </li>
  1133. {/block:NotReblog}
  1134. {block:RebloggedFrom}
  1135. {block:Reblogs}
  1136. <li class="caption">
  1137. <img src="{PortraitURL-64}" class="user-icon">
  1138. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1139. {Body}
  1140. </li>
  1141. {/block:Reblogs}
  1142. {/block:RebloggedFrom}
  1143. {/block:Answer}
  1144.  
  1145. {block:Audio}
  1146. <div class="audiopost">
  1147. <div class="audiobox">
  1148. <div class="button">
  1149. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1150. </div>
  1151. </div>
  1152. {block:AlbumArt}
  1153. <img src="{AlbumArtURL}" class="album-art">
  1154. {/block:AlbumArt}
  1155. <div class="audioinfo">
  1156. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1157. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1158. {block:Album}<li>{Album}</li>{/block:Album}
  1159. </div>
  1160. </div>
  1161. {block:Caption}
  1162. {block:NotReblog}
  1163. <li class="caption">
  1164. {Caption}
  1165. </li>
  1166. {/block:NotReblog}
  1167. {block:RebloggedFrom}
  1168. {block:Reblogs}
  1169. <li class="caption">
  1170. <img src="{PortraitURL-64}" class="user-icon">
  1171. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1172. {Body}
  1173. </li>
  1174. {/block:Reblogs}
  1175. {/block:RebloggedFrom}
  1176. {/block:Caption}
  1177. {/block:Audio}
  1178.  
  1179. <!----- INFO ----->
  1180. <center>
  1181. {block:Date}
  1182. <div class="info">
  1183.  
  1184. <!-- reblog info and content source on permalink pages -->
  1185.  
  1186. {block:PermalinkPage}
  1187.  
  1188. {block:RebloggedFrom}
  1189. via <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1190. originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>
  1191. {/block:RebloggedFrom}
  1192.  
  1193. {block:ContentSource}
  1194. <a href="{SourceURL}">{lang:Source}</a>
  1195. {/block:ContentSource}
  1196.  
  1197. {/block:PermalinkPage}
  1198.  
  1199. <!-- like and reblog buttons -->
  1200. <center>
  1201.  
  1202. {block:PinnedPostLabel}
  1203. <a style="padding:10px;" title="pinned post" href="{Permalink}" class="pinned-post" target="_blank">
  1204. <i class="ph ph-push-pin-fill"></i>
  1205. </a>{/block:PinnedPostLabel}
  1206.  
  1207. <a style="padding:10px;" title="{Month} {DayOfMonth}, {Year}" href="{Permalink}" target="_blank">
  1208. <i class="ph ph-clock"></i>
  1209. </a>
  1210.  
  1211. {block:NoteCount}
  1212. <a style="padding:10px;" title="{NoteCountWithLabel}" href="{Permalink}" target="_blank">
  1213. <i class="ph ph-note-blank"></i>
  1214. </a>{/block:NoteCount}
  1215.  
  1216. <a style="padding:10px;" title="reblog this post" href="{ReblogURL}" target="_blank">
  1217. <i class="ph ph-arrow-counter-clockwise"></i>
  1218. </a>
  1219.  
  1220. <a title="like this post" style="padding:10px;" style="padding:10px;" class="likeb" href="#"><span class="actual-button">
  1221. <i class="ph ph-heart-fill">{LikeButton}</i>
  1222. </span></a>
  1223.  
  1224. {block:HasTags}
  1225. <a style="padding:10px;" title="toggle tags" class="tag-button" target="_blank">
  1226. <i class="ph ph-tag"></i>
  1227. </a>
  1228. {/block:HasTags}
  1229.  
  1230. </center>
  1231.  
  1232. </div>
  1233. {/block:Date}
  1234.  
  1235. <!----- TAGS ----->
  1236.  
  1237. {block:HasTags}
  1238. <div class="tags">
  1239. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  1240. </div>
  1241. {/block:HasTags}
  1242.  
  1243.  
  1244. <!----- POST NOTES ----->
  1245.  
  1246. {block:PermalinkPage}{block:Date}
  1247. {block:NoteCount}{block:PostNotes}
  1248. <div class="notes">
  1249. {PostNotes-64}
  1250. </div>
  1251. {/block:PostNotes}{/block:NoteCount}
  1252. {/block:Date}{/block:PermalinkPage}
  1253.  
  1254. </article>
  1255. {/block:Posts}
  1256.  
  1257. <!-- end of posts container -->
  1258.  
  1259.  
  1260.  
  1261. <!----- PAGINATION ----->
  1262.  
  1263. {block:Pagination}
  1264. <article id="page-navigation">
  1265. {block:PreviousPage}<a title="previous page" href="{PreviousPage}"><i class="ph ph-caret-left-fill"></i></a>{/block:PreviousPage}
  1266. {block:JumpPagination length="5"}
  1267. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1268. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1269. {/block:JumpPagination}
  1270. {block:NextPage}<a title="next page" href="{NextPage}"><i class="ph ph-caret-right-fill"></i></a>{/block:NextPage}
  1271. </article>
  1272. {/block:Pagination}
  1273.  
  1274. <br><br><br></section>
  1275.  
  1276. <!-- end of main container -->
  1277.  
  1278. </main>
  1279.  
  1280. <script>
  1281.  
  1282. //Disable right mouse click Script
  1283. //By Maximus ([email protected]) w/ mods by DynamicDrive
  1284. //For full source code, visit https://www.dynamicdrive.com
  1285. {block:ifRightClickDisabled}
  1286.  
  1287. var message="{text:right click disabled message}";
  1288.  
  1289. ///////////////////////////////////
  1290. function clickIE4(){
  1291. if (event.button==2){
  1292. alert(message);
  1293. return false;
  1294. }
  1295. }
  1296.  
  1297. function clickNS4(e){
  1298. if (document.layers||document.getElementById&&!document.all){
  1299. if (e.which==2||e.which==3){
  1300. alert(message);
  1301. return false;
  1302. }
  1303. }
  1304. }
  1305.  
  1306. if (document.layers){
  1307. document.captureEvents(Event.MOUSEDOWN);
  1308. document.onmousedown=clickNS4;
  1309. }
  1310. else if (document.all&&!document.getElementById){
  1311. document.onmousedown=clickIE4;
  1312. }
  1313.  
  1314. document.oncontextmenu=new Function("alert(message);return false")
  1315. {/block:ifRightClickDisabled}
  1316.  
  1317.  
  1318. // tippy tooltips
  1319. tippy('[title]', {
  1320. theme: 'custom',
  1321. arrow: false,
  1322. followCursor: false,
  1323. delay: 100,
  1324. placement: 'top',
  1325. offset: "0, -5",
  1326. zIndex: 9999999999,
  1327. maxWidth: 400,
  1328.  
  1329. content(reference) {
  1330. const title = reference.getAttribute('title');
  1331. reference.removeAttribute('title');
  1332. return title;
  1333. },
  1334. });
  1335.  
  1336.  
  1337.  
  1338. //tags on click by seyche
  1339. $(document).ready(function(){
  1340. $('.tags').hide();
  1341. $('.tag-button').click(function() {
  1342. $(this).closest('article').find('.tags').slideToggle(500);
  1343. $(this).toggleClass('tag-clicked');
  1344. return false;
  1345. });
  1346. });
  1347.  
  1348.  
  1349.  
  1350. //sticky topbar
  1351. $(document).ready(function(){
  1352. $(window).bind('scroll', function(){
  1353. if($(window).scrollTop() > 200){
  1354. $('.four20').addClass('blazeit');
  1355. }
  1356.  
  1357. else{
  1358. $('.four20').removeClass('blazeit');
  1359. }
  1360. });
  1361. });
  1362.  
  1363.  
  1364.  
  1365. //daynight mode
  1366.  
  1367. $(document).ready(function(){
  1368. $('.daynight').click(function(){
  1369. //rest of the code will go here
  1370.  
  1371. $(document).ready(function(){
  1372. $('.daynight').click(function(){
  1373. $('body').toggleClass('night');
  1374. $('.daynight span').toggleClass('ph-moon');
  1375. });
  1376. });
  1377.  
  1378. });
  1379. });
  1380.  
  1381.  
  1382.  
  1383. </script>
  1384.  
  1385. <!----- CREDIT: DO NOT TOUCH. ----->
  1386.  
  1387. <a title="OH, ABIGAIL by kai" href="https://heroeddiemunson.tumblr.com" id="credit">
  1388.  
  1389. <svg xmlns="https://www.w3.org/2000/svg" width="18" height="18" fill="{color:accent one}" viewBox="0 0 256 256"><path d="M128,16a96.11,96.11,0,0,0-96,96c0,24,12.56,55.06,33.61,83,21.18,28.15,44.5,45,62.39,45s41.21-16.81,62.39-45c21.05-28,33.61-59,33.61-83A96.11,96.11,0,0,0,128,16ZM64,116a12,12,0,0,1,12-12,36,36,0,0,1,36,36,12,12,0,0,1-12,12A36,36,0,0,1,64,116Zm80,84H112a8,8,0,0,1,0-16h32a8,8,0,0,1,0,16Zm12-48a12,12,0,0,1-12-12,36,36,0,0,1,36-36,12,12,0,0,1,12,12A36,36,0,0,1,156,152Z"></path></svg>
  1390.  
  1391. </a>
  1392.  
  1393. </body>
  1394. </html>
Advertisement
Add Comment
Please, Sign In to add comment