raintalon24

III | THE SWEET INSOMNIAC PROJECT

Dec 30th, 2020 (edited)
2,190
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.71 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!---
  5. UNDEAD MAGIKARP THEMES
  6. III | THE SWEET INSOMNIAC PROJECT
  7. http://undeadmagikarp.tumblr.com/
  8.  
  9. General theme/page rules apply. Thank you!
  10.  
  11. --->
  12.  
  13. <head>
  14.  
  15. <title>{Title}</title>
  16. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  17. <link rel="shorcut icon" href="{Favicon}">
  18.  
  19. <meta name="if:250px Posts" content="" />
  20. <meta name="if:400px Posts" content="" />
  21. <meta name="if:500px Posts" content="" />
  22.  
  23. <meta name="if:Hide Captions" content=""/>
  24. <meta name="if:Show Tags" content=""/>
  25. <meta name="if:Monochrome Posts" content=""/>
  26. <meta name="if:Built in Ask Page" content=""/>
  27. <meta name="if:White Down Arrow" content=""/>
  28.  
  29. <meta name="image:Full Blog Background Image" content="" />
  30. <meta name="image:Top Third Background Image" content="" />
  31. <meta name="image:Middle Third Background Image" content="" />
  32. <meta name="image:Bottom Third Background Image" content="" />
  33. <meta name="color:Full Blog Background Color" content="#f9f9f9"/>
  34. <meta name="color:Top Third Background Color" content="#f9f9f9"/>
  35. <meta name="color:Middle Third Background Color" content="#f9f9f9"/>
  36. <meta name="color:Bottom Third Background Color" content="#f9f9f9"/>
  37.  
  38. <meta name="text:NAME presents" content="Undead magikarp"/>
  39. <meta name="text:Blog Title Line 1" content="THE SWEET"/>
  40. <meta name="text:Blog Title Line 2" content="INSOMNIAC"/>
  41. <meta name="text:Blog Title Line 3" content="PROJECT"/>
  42. <meta name="text:Subtitle" content="Subtitle here"/>
  43. <meta name="text:Ask Page Title" content="ask box" />
  44. <meta name="text:Custom Link 1 Title" content="here lies link 1"/>
  45. <meta name="text:Custom Link 1 URL" content="/"/>
  46. <meta name="text:Custom Link 2 Title" content="while here is another link 2"/>
  47. <meta name="text:Custom Link 2 URL" content="/"/>
  48.  
  49. <meta name="text:Tumblr URL" content="undeadmagikarp.tumblr.com"/>
  50.  
  51. <meta name="color:Highlight Color" content="#A38DE0" />
  52. <meta name="color:Scrollbar Thumb" content="#000000" />
  53. <meta name="color:Scrollbar Line Color" content="#151515" />
  54. <meta name="color:Scrollbar Background Color" content="#f9f9f9" />
  55. <meta name="color:Blog Title Color" content="#151515"/>
  56. <meta name="color:Subtitle Color" content="#151515"/>
  57. <meta name="color:Homepage Links Color" content="#151515"/>
  58. <meta name="color:Blog Description Color" content="#545454"/>
  59.  
  60. <meta name="color:Link Color" content="#8066CA"/>
  61. <meta name="color:Link Underline Color" content="#4B2D9E"/>
  62. <meta name="color:Post Title Color" content="#151515"/>
  63. <meta name="color:Text Color" content="#151515"/>
  64. <meta name="color:Post Sidebar Numbers Color" content="#cccccc"/>
  65. <meta name="color:Numbers Hover Color" content="#151515"/>
  66. <meta name="color:Tooltip Background" content="#363636"/>
  67. <meta name="color:Tooltip Accent" content="#CBBDF2"/>
  68. <meta name="text:Blockquote Background RGB" content="243,243,243"/>
  69. <meta name="color:Blockquote Border" content="#cccccc"/>
  70. <meta name="color:Pagination Color" content="#151515"/>
  71. <meta name="color: Built in Askbox Title Color" content="#151515"/>
  72.  
  73. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  74.  
  75. <!-- FONTS -->
  76. <link rel="preconnect" href="https://fonts.gstatic.com">
  77. <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
  78.  
  79. <!-- script for smooth scrolling -->
  80. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  81. <script>
  82. $(document).ready(function(){
  83. // Add smooth scrolling to all links
  84. $("a").on('click', function(event) {
  85.  
  86. // Make sure this.hash has a value before overriding default behavior
  87. if (this.hash !== "") {
  88. // Prevent default anchor click behavior
  89. event.preventDefault();
  90.  
  91. // Store hash
  92. var hash = this.hash;
  93.  
  94. // Using jQuery's animate() method to add smooth page scroll
  95. // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
  96. $('html, body').animate({
  97. scrollTop: $(hash).offset().top
  98. }, 1000, function(){
  99.  
  100. // Add hash (#) to URL when done scrolling (default click behavior)
  101. window.location.hash = hash;
  102. });
  103. } // End if
  104. });
  105. });
  106. </script>
  107.  
  108. <!-- script for randomly generated entry ID -->
  109. <script>
  110. document.addEventListener("DOMContentLoaded", function(){
  111. var elements = document.getElementsByClassName("entry_title");
  112. for (var i = 0; i < elements.length; i++) {
  113. min = Math.ceil(0);
  114. max = Math.floor(9);
  115. var one = Math.floor(Math.random() * (max - min + 1)) + min;
  116. var two = Math.floor(Math.random() * (max - min + 1)) + min;
  117. var three = Math.floor(Math.random() * (max - min + 1)) + min;
  118. var oneString = one.toString();
  119. var twoString = two.toString();
  120. var threeString = three.toString();
  121. elements[i].innerHTML = "Entry #" + oneString + twoString + threeString;
  122. }
  123. });
  124. </script>
  125.  
  126. <!-- script for stylized tooltips -->
  127. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  128. <script>
  129. (function($){
  130. $(document).ready(function(){
  131. $("[title]").style_my_tooltips({
  132. tip_follows_cursor:true,
  133. tip_delay_time:300,
  134. tip_fade_speed:300,
  135. }
  136. );
  137. });
  138. })(jQuery);
  139. </script>
  140.  
  141.  
  142. <style type="text/css">
  143.  
  144. ::-webkit-scrollbar {
  145. width: 5px;
  146. height: 3px;
  147. border: 2px solid {color:Scrollbar Background Color};
  148. background: {color:Scrollbar Line Color};
  149. }
  150.  
  151. ::-webkit-scrollbar-thumb {
  152. background-color: {color:Scrollbar Thumb};
  153. border-left: 2px solid {color:Scrollbar Thumb};
  154. }
  155.  
  156. #tumblr_controls, .tmblr-iframe{
  157. z-index:999999999999999999!important;
  158. -webkit-filter:invert(100%);
  159. -moz-filter:invert(100%);
  160. -o-filter:invert(100%);
  161. -ms-filter:invert(100%);
  162. filter:invert(100%);
  163. position:fixed!important;
  164. top:0px!important;
  165. right:0px!important;
  166. opacity:.5;
  167. -webkit-transition: all 0.6s ease-out;
  168. -webkit-transition: opacity 0.7s linear;
  169. opacity: 0.2;
  170. -webkit-transition: all 0.8s ease-out;
  171. -moz-transition: all 0.8s ease-out;
  172. transition: all 0.8s ease-out
  173. }
  174.  
  175. #tumblr_controls, .tmblr-iframe:hover{
  176. opacity:.9;
  177. webkit-transition: all 0.4s ease-out;
  178. -moz-transition: all 0.4s ease-out;
  179. transition: all 0.4s ease-out;
  180. -webkit-transition:all 0.6s ease-out;
  181. -webkit-filter:invert(80%);
  182. -moz-filter:invert(80%);
  183. -o-filter:invert(80%);
  184. -ms-filter:invert(80%);
  185. filter:invert(80%);
  186. }
  187.  
  188. html {
  189. scroll-behavior: smooth;
  190. }
  191.  
  192. body {
  193. margin: 0;
  194. padding: 0;
  195. height: 100%;
  196. width: 100%;
  197. word-wrap: break-word;
  198. font-family: 'Poppins', sans-serif;
  199. font-weight: 400;
  200. color: {color:Text Color};
  201. cursor: crosshair;
  202. background-color: {color:Full Blog Background Color};
  203. background-image: url('{image:Full Blog Background Image}');
  204. background-size: auto;
  205. background-attachment: fixed;
  206. background-repeat: repeat;
  207. }
  208.  
  209. a {
  210. text-decoration: none;
  211. cursor: crosshair;
  212. color: {color:Link Color};
  213. }
  214.  
  215. a:hover {
  216. cursor: crosshair;
  217. }
  218.  
  219. ::selection {
  220. background: {color:Highlight Color};
  221. }
  222.  
  223. ::-moz-selection {
  224. background: {color:Highlight Color};
  225. }
  226.  
  227. blockquote {
  228. background-color: rgba({text:Blockquote Background RGB}, 0.4);
  229. border-left: 3px solid {color:Blockquote Border};
  230. padding: 0.1px 25px;
  231. }
  232.  
  233. ul {
  234. list-style: none;
  235. margin-left: 15px;
  236. padding-left: 1em;
  237. }
  238.  
  239. ol {
  240. margin-left: 15px;
  241. padding-left: 1em;
  242. }
  243.  
  244. ul > li:before {
  245. display: inline-block;
  246. content: "-";
  247. width: 1em;
  248. margin-left: -1em;
  249. }
  250.  
  251. #s-m-t-tooltip {
  252. background: {color:Tooltip Background};
  253. z-index: 999999;
  254. padding: 3px;
  255. border: solid 1px {color:Tooltip Accent};
  256. color: {color:Tooltip Accent};
  257. margin: 10px;
  258. font-size: 9px;
  259. font-family: 'Poppins', sans-serif;
  260. font-weight: 400;
  261. }
  262.  
  263. #landing1 {
  264. height: 100vh;
  265. width: 100%;
  266. position: relative;
  267. background-color: {color:Top Third Background Color};
  268. background-image: url('{image:Top Third Background Image}');
  269. background-size: 100% 100vh;
  270. background-attachment: fixed;
  271. background-repeat: no-repeat;
  272. z-index: 3;
  273. }
  274.  
  275. #landing2 {
  276. height: 100%;
  277. width: 100%;
  278. position: relative;
  279. padding-bottom: 50px;
  280. background-color: {color:Middle Third Background Color};
  281. background-image: url('{image:Middle Third Background Image}');
  282. background-size: 100% 100%;
  283. background-attachment: fixed;
  284. background-repeat: no-repeat;
  285. z-index: 3;
  286. }
  287.  
  288. #landing3 {
  289. height: 100vh;
  290. width: 100%;
  291. position: relative;
  292. background-color: {color:Bottom Third Background Color};
  293. background-image: url('{image:Bottom Third Background Image}');
  294. background-size: 100% 100vh;
  295. background-attachment: scroll;
  296. background-repeat: no-repeat;
  297. z-index: 3;
  298. }
  299.  
  300. #header {
  301. position: absolute;
  302. top: 0;
  303. width: 100%;
  304. height: 125px;
  305. display: flex;
  306. justify-content: center;
  307. align-items: center;
  308. color: {color:Subtitle Color};
  309. }
  310.  
  311. #blog_title {
  312. position: absolute;
  313. height: 250px;
  314. width: 60%;
  315. left: 20%;
  316. top: 90px;
  317. text-align: center;
  318. font-family: 'Playfair Display', serif;
  319. font-size: 65px;
  320. line-height: 20px;
  321. word-spacing: 20px;
  322. }
  323.  
  324. #blog_title p {
  325. transform: translate(0, -20px);
  326. }
  327.  
  328. #blog_title a {
  329. color: {color:Blog Title Color};
  330. cursor: pointer;
  331. }
  332.  
  333. #blog_subtitle {
  334. position: absolute;
  335. height: 40px;
  336. top: 385px;
  337. width: 30%;
  338. margin-left: 10px;
  339. left: 50%;
  340. font-family: 'Poppins', sans-serif;
  341. font-weight: 500;
  342. line-height: 22px;
  343. font-size: 18px;
  344. color: {color:Subtitle Color};
  345. }
  346.  
  347. #blog_subtitle p {
  348. transform: translate(0, -5px);
  349. }
  350.  
  351. #blog_links {
  352. position: absolute;
  353. height: 100px;
  354. top: 460px;
  355. width: 30%;
  356. margin-right: 10px;
  357. right: 50%;
  358. text-align: right;
  359. font-family: 'Playfair Display', serif;
  360. font-size: 15px;
  361. line-height: 10px;
  362. text-transform: uppercase;
  363. }
  364.  
  365. #blog_links p {
  366. transform: translate(0, -10px);
  367. }
  368.  
  369. #blog_links a {
  370. letter-spacing: 1px;
  371. color: {color:Homepage Links Color};
  372. transition: all .6s ease-in-out;
  373. -webkit-transition: all .6s ease-in-out;
  374. -moz-transition: all .6s ease-in-out;
  375. -ms-transition: all .6s ease-in-out;
  376. -o-transition: all .6s ease-in-out;
  377. }
  378.  
  379. #blog_links a:hover {
  380. letter-spacing: 3px;
  381. }
  382.  
  383. #blog_description {
  384. position: absolute;
  385. height: 100px;
  386. top: 460px;
  387. width: 30%;
  388. margin-left: 10px;
  389. left: 50%;
  390. font-family: 'Poppins', sans-serif;
  391. font-weight: 400;
  392. font-size: 15px;
  393. text-align: justify;
  394. line-height: 24px;
  395. color: {color:Blog Description Color};
  396. }
  397.  
  398. #blog_description p {
  399. transform: translate(0, -15px);
  400. }
  401.  
  402. #arrow {
  403. position: absolute;
  404. width: 20px;
  405. height: 20px;
  406. left: 0;
  407. right: 0;
  408. margin: auto;
  409. bottom: 20px;
  410. background-image: {block:IfNotWhiteDownArrow} url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjEzLjMzMyAyMTMuMzMzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMTMuMzMzIDIxMy4zMzM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cG9seWdvbiBwb2ludHM9IjAsNTMuMzMzIDEwNi42NjcsMTYwIDIxMy4zMzMsNTMuMzMzIAkJIi8+DQoJPC9nPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=){/block:IfNotWhiteDownArrow}
  411. {block:IfWhiteDownArrow}url(https://static.tumblr.com/bkdoxe7/q7Pqm6i82/down-arrow.png) {/block:IfWhiteDownArrow};
  412. background-size: 20px 20px;
  413. }
  414.  
  415. #arrow:hover, #credit:hover, #bar a:hover {
  416. cursor: pointer;
  417. }
  418.  
  419. /**DO NOT DELETE**/
  420. #credit {
  421. position: fixed;
  422. bottom: 5px;
  423. right: 5px;
  424. width: 12px;
  425. height: 12px;
  426. background-color: rgba(142,142,142, 0.5);
  427. z-index: 999;
  428. border-radius: 2px;
  429. padding: 4px;
  430. }
  431.  
  432. /**DO NOT DELETE**/
  433. #credit img {
  434. display: block;
  435. width: 12px;
  436. height: 12px;
  437. opacity: .9;
  438. }
  439.  
  440. .posts {
  441. position: relative;
  442. margin: 100px auto;
  443. width: {block:if500pxposts}500px{/block:if500pxposts}{block:if400pxposts}400px{/block:if400pxposts}{block:if250pxposts}250px{/block:if250pxposts};
  444.  
  445. }
  446.  
  447. .posts img {
  448. {block:ifMonochromePosts}
  449. -webkit-filter: Grayscale(100%);
  450. {/block:ifMonochromePosts}
  451. }
  452.  
  453. .posts .html_photoset {
  454. {block:ifMonochromePosts}
  455. -webkit-filter: Grayscale(100%);
  456. {/block:ifMonochromePosts}
  457. }
  458.  
  459. .caption {
  460. position: absolute;
  461. left: calc({block:if500pxposts}500px{/block:if500pxposts}{block:if400pxposts}400px{/block:if400pxposts}{block:if250pxposts}250px{/block:if250pxposts} + 25px);
  462. top: 75px;
  463. width: 285px;
  464. font-family: 'Poppins', sans-serif;
  465. font-weight: 400;
  466. font-size: 12px;
  467. text-align: justify;
  468. color: {color:Text Color};
  469. }
  470.  
  471. .caption_opp {
  472. position: absolute;
  473. right: calc({block:if500pxposts}500px{/block:if500pxposts}{block:if400pxposts}400px{/block:if400pxposts}{block:if250pxposts}250px{/block:if250pxposts} + 25px);
  474. top: 75px;
  475. width: 285px;
  476. font-family: 'Poppins', sans-serif;
  477. font-weight: 400;
  478. font-size: 12px;
  479. color: {color:Text Color};
  480. }
  481.  
  482. .caption blockquote, .caption_opp blockquote {
  483. margin-left: 0;
  484. border-left: none;
  485. padding: 0.1px 25px;
  486. }
  487.  
  488. .tags {
  489. position: relative;
  490. width: {block:if500pxposts}500px{/block:if500pxposts}{block:if400pxposts}400px{/block:if400pxposts}{block:if250pxposts}250px{/block:if250pxposts};
  491. margin: auto;
  492. font-family: 'Playfair Display', serif;
  493. font-size: 12px;
  494. text-transform: uppercase;
  495. text-align: center;
  496. }
  497.  
  498. .caption a, .caption_opp a, .textbody a, .tags a, #postnotes a {
  499. display: inline-block;
  500. text-decoration: none;
  501. }
  502.  
  503. .caption a::after, .caption_opp a::after, .textbody a::after, .tags a::after, #postnotes a::after {
  504. content: '';
  505. display: block;
  506. width: 0;
  507. height: 2px;
  508. background: {color:Link Underline Color};
  509. transition: width .7s;
  510. }
  511.  
  512. .caption a:hover::after, .caption_opp a:hover::after, .textbody a:hover::after, .tags a:hover::after, #postnotes a:hover::after {
  513. width: 100%;
  514. }
  515.  
  516. .entry_title {
  517. position: absolute;
  518. height: 100px;
  519. width: 300px;
  520. right: calc({block:if500pxposts}500px{/block:if500pxposts}{block:if400pxposts}400px{/block:if400pxposts}{block:if250pxposts}250px{/block:if250pxposts} + 25px);
  521. top: 50px;
  522. text-align: right;
  523. font-family: 'Playfair Display', serif;
  524. font-size: 50px;
  525. text-transform: uppercase;
  526. line-height: 0px;
  527. color: {color:Post Title Color};
  528. }
  529.  
  530. .postinfo {
  531. position: absolute;
  532. right: calc({block:if500pxposts}500px{/block:if500pxposts}{block:if400pxposts}400px{/block:if400pxposts}{block:if250pxposts}250px{/block:if250pxposts} + 25px);
  533. width: 100px;
  534. height: 150px;
  535. top: 125px;
  536. text-align: right;
  537. font-family: 'Playfair Display', serif;
  538. font-size: 40px;
  539. line-height: 7px;
  540. }
  541.  
  542. .postinfo a {
  543. color: {color:Post Sidebar Numbers Color};
  544. transition: all .5s ease-in-out;
  545. -webkit-transition: all .5s ease-in-out;
  546. -moz-transition: all .5s ease-in-out;
  547. -ms-transition: all .5s ease-in-out;
  548. -o-transition: all .5s ease-in-out;
  549. }
  550.  
  551. .postinfo a:hover {
  552. color: {color:Numbers Hover Color};
  553. }
  554.  
  555. .textpost_title {
  556. font-family: 'Playfair Display', serif;
  557. font-size: 35px;
  558. text-align: center;
  559. text-transform: uppercase;
  560. color: {color:Post Title Color};
  561. }
  562.  
  563. .textpost_title a {
  564. cursor: pointer;
  565. color: {color:Link Color};
  566. letter-spacing: 1px;
  567. transition: all .6s ease-in-out;
  568. -webkit-transition: all .6s ease-in-out;
  569. -moz-transition: all .6s ease-in-out;
  570. -ms-transition: all .6s ease-in-out;
  571. -o-transition: all .6s ease-in-out;
  572. }
  573.  
  574. .textpost_title a:hover {
  575. letter-spacing: 4px;
  576. }
  577.  
  578. .audio_heading {
  579. width: {block:if500pxposts}500px{/block:if500pxposts}{block:if400pxposts}400px{/block:if400pxposts}{block:if250pxposts}250px{/block:if250pxposts};
  580. position: relative;
  581. height: 125px;
  582. }
  583.  
  584. .audio_title {
  585. position: absolute;
  586. width: calc({block:if500pxposts}500px{/block:if500pxposts}{block:if400pxposts}400px{/block:if400pxposts}{block:if250pxposts}250px{/block:if250pxposts} - 50px);
  587. height: 125px;
  588. right: 0;
  589. top: 0;
  590. font-family: 'Playfair Display', serif;
  591. font-size: 20px;
  592. text-align: center;
  593. text-transform: uppercase;
  594. }
  595.  
  596. .textbody {
  597. font-size: 12px;
  598. color: {color:Text Color};
  599. }
  600.  
  601. .textbody img {
  602. width: 100%;
  603. height: 100%;
  604. }
  605.  
  606. .playbutton {
  607. margin: 0;
  608. position: absolute;
  609. top: 50%;
  610. -ms-transform: translateY(-50%);
  611. transform: translateY(-50%);
  612. height: 30px;
  613. width: 33px;
  614. overflow: hidden;
  615. opacity: 0.6;
  616. left: 8.5px;
  617. }
  618.  
  619. #footer {
  620. position: absolute;
  621. bottom: 0;
  622. width: 100%;
  623. height: 50px;
  624. color: {color:Pagination Color};
  625. }
  626.  
  627. #bar {
  628. position: relative;
  629. border-top: solid 3px {color:Pagination Color};
  630. height: 50px;
  631. width: {block:if500pxposts}500px{/block:if500pxposts}{block:if400pxposts}400px{/block:if400pxposts}{block:if250pxposts}250px{/block:if250pxposts};
  632. margin: 0 auto;
  633. text-align: center;
  634. font-family: 'Poppins', sans-serif;
  635. font-weight: 600;
  636. font-size: 17px;
  637. line-height: 0px;
  638. text-transform: uppercase;
  639. }
  640.  
  641. #bar a {
  642. letter-spacing: 1px;
  643. color: {color:Pagination Color};
  644. transition: all .6s ease-in-out;
  645. -webkit-transition: all .6s ease-in-out;
  646. -moz-transition: all .6s ease-in-out;
  647. -ms-transition: all .6s ease-in-out;
  648. -o-transition: all .6s ease-in-out;
  649. }
  650.  
  651. #bar a:hover {
  652. letter-spacing: 3px;
  653. }
  654.  
  655. #bar #leftarrow {
  656. position: absolute;
  657. width: 200px;
  658. left: 0;
  659. top: 15px;
  660. text-align: left;
  661. font-family: 'Playfair Display', serif;
  662. font-size: 17px;
  663. line-height: 0px;
  664. text-transform: uppercase;
  665. }
  666.  
  667. #bar #rightarrow {
  668. position: absolute;
  669. width: 200px;
  670. right: 0;
  671. top: 15px;
  672. text-align: right;
  673. font-family: 'Playfair Display', serif;
  674. font-size: 17px;
  675. line-height: 0px;
  676. text-transform: uppercase;
  677. }
  678.  
  679. .askbox {
  680. position: absolute;
  681. top: 50%;
  682. left: 50%;
  683. width: {block:if500pxposts}500px{/block:if500pxposts}{block:if400pxposts}400px{/block:if400pxposts}{block:if250pxposts}250px{/block:if250pxposts};
  684. height: 300px;
  685. margin: -150px 0 0 {block:if500pxposts}-250px{/block:if500pxposts}{block:if400pxposts}-200px{/block:if400pxposts}{block:if250pxposts}-125px{/block:if250pxposts};
  686. }
  687.  
  688. .askbox_title {
  689. position: absolute;
  690. left: 50%;
  691. margin-left: {block:if500pxposts}-250px{/block:if500pxposts}{block:if400pxposts}-200px{/block:if400pxposts}{block:if250pxposts}-125px{/block:if250pxposts};
  692. bottom: calc(50% + 150px + 15px);
  693. width: {block:if500pxposts}500px{/block:if500pxposts}{block:if400pxposts}400px{/block:if400pxposts}{block:if250pxposts}250px{/block:if250pxposts};
  694. font-family: 'Playfair Display', serif;
  695. font-size: 35px;
  696. text-align: center;
  697. text-transform: uppercase;
  698. color: {color: Built in Askbox Title Color};
  699. }
  700.  
  701. #postnotes {
  702. font-size: 10px;
  703. }
  704.  
  705. #postnotes img {
  706. width: 0;
  707. }
  708.  
  709. </style>
  710. </head>
  711.  
  712. <body>
  713. {block:ifBuiltinAskPage}
  714. <script>
  715. if(window.location.pathname == '/ask') location.replace('/#landing3');
  716. </script>
  717. {/block:ifBuiltinAskPage}
  718.  
  719. <!--LANDING AREA-->
  720. <a href="https://undeadmagikarp.tumblr.com/"><div id="credit"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDIyMCAyMjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIyMCAyMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGQ9Ik0xMTAsMEM0OS4zNDYsMCwwLDQ5LjM0NiwwLDExMHM0OS4zNDYsMTEwLDExMCwxMTBzMTEwLTQ5LjM0NiwxMTAtMTEwUzE3MC42NTQsMCwxMTAsMHogTTExMCwxOTANCgljLTQ0LjExMiwwLTgwLTM1Ljg4OC04MC04MHMzNS44ODgtODAsODAtODBjNDQuMTEyLDAsODAsMzUuODg4LDgwLDgwUzE1NC4xMTIsMTkwLDExMCwxOTB6IE0xMzkuNzE4LDEyOC4yNjRsMTYuMjE4LDE1LjA2NQ0KCWwtOC4xNzIsNy4xNTJjLTEwLjIzNiw4Ljk1Ni0yMy4zMTIsMTMuODktMzYuODE3LDEzLjg5Yy0zMC4zNDQsMC01NS4wMzEtMjQuMTc4LTU1LjAzMS01My44OTUNCgljMC0yOS42NDksMjQuNjg3LTUzLjc3MSw1NS4wMzEtNTMuNzcxYzEzLjUxNiwwLDI2LjU0OCw0Ljg4OCwzNi42OTIsMTMuNzY0bDcuODczLDYuODlMMTM5Ljk3LDkyLjkxbC02LjkwMS02LjA5Nw0KCWMtNS45MzctNS4yNDMtMTMuNzkyLTguMTMxLTIyLjEyMi04LjEzMWMtMTguMjI2LDAtMzMuMDU0LDE0LjI2My0zMy4wNTQsMzEuNzkzYzAsMTcuNiwxNC44MjgsMzEuOTE4LDMzLjA1NCwzMS45MTgNCgljOC4yMzgsMCwxNi4wOTQtMi45MzMsMjIuMTIyLTguMjU4TDEzOS43MTgsMTI4LjI2NHoiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K" /></div></a><!--DO NOT DELETE-->
  721. <div id="landing1">
  722. <div id="header"><p style="font-family: 'Playfair Display', serif;">{text:NAME presents} &nbsp;</p><p style="font-family: 'Poppins', sans-serif; font-size:13px; transform: translate(0, 3px);"><i>presents</i></p></div>
  723. <div id="blog_title">
  724. <a href="/"><p>{text:Blog Title Line 1}</p>
  725. <p>{text:Blog Title Line 2}</p>
  726. <p>{text:Blog Title Line 3}</p></a>
  727. </div>
  728. <div id="blog_subtitle"><p>{text:Subtitle}</p></div>
  729. <div id="blog_links">
  730. <p>
  731. {block:ifBuiltinAskPage}<a href= "#landing3">{ {text:Ask Page Title} }</a>{/block:ifBuiltinAskPage}
  732. {block:ifNotBuiltinAskPage}<a href= "/ask">{ {text:Ask Page Title} }</a>{/block:ifNotBuiltinAskPage}
  733. </p>
  734. <p><a href= "/archive">{ ARCHIVE }</a></p>
  735. <p><a href= "{text:Custom Link 1 URL}">{ {text:Custom Link 1 Title} }</a></p>
  736. <p><a href= "{text:Custom Link 2 URL}">{ {text:Custom Link 2 Title} }</a></p>
  737. </div>
  738. <div id="blog_description"><p>{Description}</p></div>
  739.  
  740. <a href="#landing2"><div id="arrow"></div></a>
  741.  
  742. </div>
  743.  
  744. <!--POST AREA-->
  745. <div id="landing2">
  746.  
  747. {block:Posts}
  748. <div class="posts">
  749.  
  750. <!--PHOTO POST-->
  751. {block:Photo}
  752. {LinkOpenTag}
  753. {block:if500pxposts}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{/block:if500pxposts}
  754. {block:if400pxposts}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{/block:if400pxposts}
  755. {block:if250pxposts}<img src="{PhotoURL-250}" alt="{PhotoAlt}"/>{/block:if250pxposts}
  756. {LinkCloseTag}
  757. <div class="entry_title"></div>
  758. <div class="postinfo">
  759. {block:Date}<p><a href="{Permalink}" style="color:{color:Numbers Hover Color};" title="{block:Date}{DayOfMonth}{DayOfMonthSuffix} {Month}{/block:Date}">1</a></p>{/block:Date}
  760. {block:NoteCount}<p><a href="{Permalink}" title="{NoteCount} notes">2</a></p>{/block:NoteCount}
  761.  
  762. {block:RebloggedFrom}<p><a href="{ReblogParentURL}" title="from {ReblogParentName}">3</a></p>{/block:RebloggedFrom}
  763. </div>
  764.  
  765. {block:ifnotHideCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifnotHideCaptions}
  766.  
  767. {block:ifShowTags}{block:HasTags}<div class="tags">{block:Tags}
  768. #<a href="{TagURL}">{Tag} </a>
  769. {/block:Tags}</div>{/block:HasTags}{/block:ifShowTags}
  770. {/block:Photo}
  771.  
  772. <!--TEXT POST-->
  773. {block:Text}
  774. {block:Title}<div class="textpost_title">{Title}</div>{/block:Title}
  775. <div class="textbody">{Body}</div>
  776.  
  777. <div class="postinfo" style="top:25px;">
  778. <p><a href="{Permalink}" style="color:{color:Numbers Hover Color};" title="{block:Date}{DayOfMonth}{DayOfMonthSuffix} {Month}{/block:Date}">1</a></p>
  779. {block:NoteCount}<p><a href="{Permalink}" title="{NoteCount} notes">2</a></p>{/block:NoteCount}
  780. {block:RebloggedFrom}<p><a href="{ReblogParentURL}" title="from {ReblogParentName}">3</a></p>{/block:RebloggedFrom}
  781. </div>
  782.  
  783. {block:ifShowTags}{block:HasTags}<div class="tags">{block:Tags}
  784. #<a href="{TagURL}">{Tag} </a>
  785. {/block:Tags}</div>{/block:HasTags}{/block:ifShowTags}
  786. {/block:Text}
  787.  
  788. <!--VIDEO POST-->
  789. {block:Video}
  790. {block:if500pxposts}{Video-500}{/block:if500pxposts}
  791. {block:if400pxposts}{Video-400}{/block:if400pxposts}
  792. {block:if250pxposts}{Video-250}{/block:if250pxposts}
  793.  
  794. <div class="postinfo" style="right: -45px;">
  795. <p><a href="{Permalink}" style="color:{color:Numbers Hover Color};" title="{block:Date}{DayOfMonth}{DayOfMonthSuffix} {Month}{/block:Date}">1</a></p>
  796. {block:NoteCount}<p><a href="{Permalink}" title="{NoteCount} notes">2</a></p>{/block:NoteCount}
  797. {block:RebloggedFrom}<p><a href="{ReblogParentURL}" title="from {ReblogParentName}">3</a></p>{/block:RebloggedFrom}
  798. </div>
  799.  
  800. {block:ifnotHideCaptions}{block:Caption}<div class="caption_opp">{Caption}</div>{/block:Caption}{/block:ifnotHideCaptions}
  801.  
  802. {block:ifShowTags}{block:HasTags}<div class="tags" style="padding-top: 5px;">{block:Tags}
  803. #<a href="{TagURL}">{Tag} </a>
  804. {/block:Tags}</div>{/block:HasTags}{/block:ifShowTags}
  805. {/block:Video}
  806.  
  807. <!--PHOTOSET POST-->
  808. {block:Photoset}
  809. {block:if500pxposts}{Photoset-500}{/block:if500pxposts}
  810. {block:if400pxposts}{Photoset-400}{/block:if400pxposts}
  811. {block:if250pxposts}{Photoset-250}{/block:if250pxposts}
  812. <div class="entry_title"></div>
  813. <div class="postinfo">
  814. <p><a href="{Permalink}" style="color:{color:Numbers Hover Color};" title="{block:Date}{DayOfMonth}{DayOfMonthSuffix} {Month}{/block:Date}">1</a></p>
  815. {block:NoteCount}<p><a href="{Permalink}" title="{NoteCount} notes">2</a></p>{/block:NoteCount}
  816. {block:RebloggedFrom}<p><a href="{ReblogParentURL}" title="from {ReblogParentName}">3</a></p>{/block:RebloggedFrom}
  817. </div>
  818.  
  819. {block:ifnotHideCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifnotHideCaptions}
  820.  
  821. {block:ifShowTags}{block:HasTags}<div class="tags">{block:Tags}
  822. #<a href="{TagURL}">{Tag} </a>
  823. {/block:Tags}</div>{/block:HasTags}{/block:ifShowTags}
  824. {/block:Photoset}
  825.  
  826. <!--QUOTE POST-->
  827. {block:Quote}
  828. <div class="textpost_title" style="text-transform: initial;">{Quote}</div>
  829. {block:Source}<div class="textbody" style="text-align: right; margin-top: 5px;">- {Source}</div>{/block:Source}
  830.  
  831. <div class="postinfo" style="right: -45px; top: 0; font-size: 20px;">
  832. <p><a href="{Permalink}" style="color:{color:Numbers Hover Color};" title="{block:Date}{DayOfMonth}{DayOfMonthSuffix} {Month}{/block:Date}">1</a></p>
  833. {block:NoteCount}<p><a href="{Permalink}" title="{NoteCount} notes">2</a></p>{/block:NoteCount}
  834. {block:RebloggedFrom}<p><a href="{ReblogParentURL}" title="from {ReblogParentName}">3</a></p>{/block:RebloggedFrom}
  835. </div>
  836.  
  837. {block:ifShowTags}{block:HasTags}<div class="tags" style="padding-top: 5px;">{block:Tags}
  838. #<a href="{TagURL}">{Tag} </a>
  839. {/block:Tags}</div>{/block:HasTags}{/block:ifShowTags}
  840. {/block:Quote}
  841.  
  842. <!--LINK POST-->
  843. {block:Link}
  844. <div class="textpost_title">{ <a href="{URL}">{Name}</a> }</div>
  845. {block:Author}<div class="textbody" style="text-align: right;">- {Author}</div>{/block:Author}
  846. {block:Description}<div class="textbody">{Description}</div>{/block:Description}
  847.  
  848. <div class="postinfo" style="right: -45px; top: 0; font-size: 20px;">
  849. <p><a href="{Permalink}" style="color:{color:Numbers Hover Color};" title="{block:Date}{DayOfMonth}{DayOfMonthSuffix} {Month}{/block:Date}">1</a></p>
  850. {block:NoteCount}<p><a href="{Permalink}" title="{NoteCount} notes">2</a></p>{/block:NoteCount}
  851. {block:RebloggedFrom}<p><a href="{ReblogParentURL}" title="from {ReblogParentName}">3</a></p>{/block:RebloggedFrom}
  852. </div>
  853.  
  854. {block:ifShowTags}{block:HasTags}<div class="tags" style="padding-top: 5px;">{block:Tags}
  855. #<a href="{TagURL}">{Tag} </a>
  856. {/block:Tags}</div>{/block:HasTags}{/block:ifShowTags}
  857. {/block:Link}
  858.  
  859. <!--CHAT POST-->
  860. {block:Chat}
  861. {block:Title}<div class="textpost_title">{Title}</div>{/block:Title}
  862. <div class="textbody">
  863. {block:Lines}
  864. <p>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</p>
  865. {/block:Lines}
  866. </div>
  867.  
  868. <div class="postinfo" style="right: -45px; top: 0; font-size: 20px;">
  869. <p><a href="{Permalink}" style="color:{color:Numbers Hover Color};" title="{block:Date}{DayOfMonth}{DayOfMonthSuffix} {Month}{/block:Date}">1</a></p>
  870. {block:NoteCount}<p><a href="{Permalink}" title="{NoteCount} notes">2</a></p>{/block:NoteCount}
  871. {block:RebloggedFrom}<p><a href="{ReblogParentURL}" title="from {ReblogParentName}">3</a></p>{/block:RebloggedFrom}
  872. </div>
  873.  
  874. {block:ifShowTags}{block:HasTags}<div class="tags">{block:Tags}
  875. #<a href="{TagURL}">{Tag} </a>
  876. {/block:Tags}</div>{/block:HasTags}{/block:ifShowTags}
  877. {/block:Text}
  878.  
  879. {/block:Chat}
  880.  
  881. <!--ANSWER POST-->
  882. {block:Answer}
  883.  
  884. <div class="textpost_title" style="text-align: left; text-transform: initial;">{Question}</div>
  885. <div class="textbody" style="text-align: right;transform: translate(0, -10px);">inquired {Asker}.</div>
  886.  
  887. <div class="textbody">{Answer}</div>
  888.  
  889. <div class="postinfo" style="right: -45px; top: 0; font-size: 20px;">
  890. <p><a href="{Permalink}" style="color:{color:Numbers Hover Color};" title="{block:Date}{DayOfMonth}{DayOfMonthSuffix} {Month}{/block:Date}">1</a></p>
  891. {block:NoteCount}<p><a href="{Permalink}" title="{NoteCount} notes">2</a></p>{/block:NoteCount}
  892. {block:RebloggedFrom}<p><a href="{ReblogParentURL}" title="from {ReblogParentName}">3</a></p>{/block:RebloggedFrom}
  893. </div>
  894.  
  895. {block:ifShowTags}{block:HasTags}<div class="tags">{block:Tags}
  896. #<a href="{TagURL}">{Tag} </a>
  897. {/block:Tags}</div>{/block:HasTags}{/block:ifShowTags}
  898.  
  899. {/block:Answer}
  900.  
  901. <!--AUDIO POST-->
  902. {block:Audio}
  903.  
  904. <div class="audio_heading">
  905. <div class="audio_title">
  906. {block:trackname}<p>{trackname}</p>{/block:trackname}
  907. {block:Artist}<p style="font-family: 'Poppins', sans-serif;font-weight: 500; font-size: 13px; text-transform: initial;">{ {Artist} }</p>{/block:Artist}
  908. </div>
  909. {block:AudioPlayer}<div class="playbutton">{AudioPlayer}</div>{/block:AudioPlayer}
  910. </div>
  911.  
  912. {block:Caption}<div class="textbody">{Caption}</div>{/block:Caption}
  913.  
  914. <div class="postinfo" style="right: -45px; top: 0; font-size: 20px;">
  915. <p><a href="{Permalink}" style="color:{color:Numbers Hover Color};" title="{block:Date}{DayOfMonth}{DayOfMonthSuffix} {Month}{/block:Date}">1</a></p>
  916. <p><a href="{Permalink}" title="{FormattedPlayCount} hits">2</a></p>
  917. {block:NoteCount}<p><a href="{Permalink}" title="{NoteCount} notes">3</a></p>{/block:NoteCount}
  918. {block:RebloggedFrom}<p><a href="{ReblogParentURL}" title="from {ReblogParentName}">4</a></p>{/block:RebloggedFrom}
  919. </div>
  920.  
  921. {block:ifShowTags}{block:HasTags}<div class="tags">{block:Tags}
  922. #<a href="{TagURL}">{Tag} </a>
  923. {/block:Tags}</div>{/block:HasTags}{/block:ifShowTags}
  924.  
  925. {/block:Audio}
  926.  
  927. {block:PostNotes}
  928. <div id="postnotes">{PostNotes}</div>
  929. {/block:PostNotes}
  930.  
  931. </div>
  932. {/block:Posts}
  933.  
  934. {block:Pagination}<div id="footer">
  935. <div id="bar">
  936. {block:PreviousPage}<a href="{PreviousPage}"><div id="leftarrow">{&nbsp; PREV</div></a>{/block:PreviousPage}
  937. {block:NextPage}<a href="{NextPage}"><div id="rightarrow">NEXT &nbsp;}</div></a>{/block:NextPage}
  938. <p>Page #{CurrentPage}</p>
  939. </div>
  940. </div>{/block:Pagination}
  941.  
  942. </div>
  943.  
  944. {block:ifBuiltinAskPage}{block:AskEnabled}
  945. <div id="landing3">
  946. <div class="askbox">
  947. <iframe frameborder="0" border="none" height="300px" id="ask_form" scrolling="yes" src="https://www.tumblr.com/ask_form/{text:Tumblr URL}" width="100%" ></iframe>
  948. </div>
  949. <div class="askbox_title">{AskLabel}</div>
  950.  
  951. <div id="footer">
  952. <div id="bar">
  953. <a href="#landing1"><div id="leftarrow">{ TOP }</div></a>
  954. <a href="#landing2"><div id="rightarrow">{ POSTS }</div></a>
  955. </div>
  956. </div>
  957. </div>
  958. {/block:AskEnabled}{/block:ifBuiltinAskPage}
  959.  
  960. </body>
  961. </html>
Add Comment
Please, Sign In to add comment