API tools faq
paste
Advertisement
phantasyreign

THEME 08: INUKAGO

phantasyreign
Feb 19th, 2024
687
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 36.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <!--
  3.    THEME08: INUYASHA KAGOME
  4.    RELEASED DATE:10/10/2021
  5.    THEME CREATOR: JASMIN @ http://phantasyreign.tumblr.com/
  6.    PLEASE DO NOT REMOVE THE CREDIT. THANKS!
  7.    
  8.    TO VIEW THE GUIDELINE, KINDLY GO TO THIS PAGE: http://phantasyreign.tumblr.com/inukago
  9. -->
  10. <html>
  11. <head>
  12. <title>{Title}{block:PostTitle}: {PostTitle}{/block:PostTitle}</title>
  13. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  16. <link href="https://static.tumblr.com/v6akjgz/sCOr08bjm/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  17. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  18. <script src="https://static.tumblr.com/v6akjgz/rKcr08bkb/jquery.style-my-tooltips.js"></script>
  19. <script type="text/javascript" src="https://static.tumblr.com/8pnyeus/10hors8sn/themekid-popup.min.js"></script>
  20. <script src="//pull.cappuccicons.com/cpf.js"></script>
  21. <meta name="viewport" content="width=device-width, initial-scale=1">
  22.  
  23. <meta name="image:Background" content="">
  24. <meta name="image:Post" content="">
  25. <meta name="image:Polaroid" content="https://static.tumblr.com/v6akjgz/lSTqzm84l/03.jpg">
  26.  
  27. <meta name="color:Background" content="#FEEFEE">
  28. <meta name="color:Accent01" content="#F79E9A">
  29. <meta name="color:Accent01 Text" content="white">
  30. <meta name="color:Accent02" content="#FBD4D7">
  31. <meta name="color:Accent03" content="#fff">
  32. <meta name="color:Title" content="#2F4692">
  33. <meta name="color:Text" content="#667288">
  34. <meta name="color:Bold" content="#6EBBCD">
  35. <meta name="color:Italic" content="#F59879">
  36. <meta name="folor:Blockquote" content="#302F41">
  37. <meta name="color:Numbered Bulleted Lists" content="#F79E9A">
  38. <meta name="color:Post Link" content="#AD0004">
  39. <meta name="color:Post Link Hover" content="#FA707F">
  40. <meta name="color:Menu" content="white">
  41. <meta name="color:Text Selection Background" content="#FBD4D7">
  42. <meta name="color:Text Selection Text" content="#667288">
  43. <meta name="color:Accessibility Buttons" content="#C0C2DB">
  44. <meta name="color:Accessibility Buttons Text" content="#fff">
  45. <meta name="color:Dark Mode Accent" content="#C0C2DB">
  46. <meta name="color:Dark Mode Link Post" content=#c0c2db>
  47. <meta name="color:Border" content="#eee">
  48. <meta name="color:Polaroid" content="#fff">
  49.  
  50. <meta name="select:Font Body" content="Figure Things">
  51. <meta name="select:Font Body" content="Negara Serif">
  52. <meta name="select:Font Body" content="Caviar Dreams">
  53. <meta name="select:Font Body" content="RNS Camelia">
  54.  
  55. <meta name="text:About Title" content="About Blog">
  56. <meta name="text:Title Font Size" content="3rem">
  57. <meta name="text:Cursor" content="https://static.tumblr.com/v6akjgz/oplr06dzc/white-pointer.png">
  58. <meta name="text:Cursor Hover" content="https://static.tumblr.com/v6akjgz/w8Mr06e4f/yellow-pointer.png">
  59.  
  60. <style type="text/css">
  61. /*GENERAL STYLING*/
  62. *{margin:0;box-sizing:border-box;}
  63.  
  64. body{background-color:{color:Background};font-size:1rem;}
  65.  
  66. html{overflow:hidden;}
  67.  
  68. /*FONTS*/
  69. p, ol li, blockquote, ul li, h1, h2, h3, h4, h5, h6{
  70.     margin-bottom:1rem;
  71.     line-height:1.5;
  72.     word-spacing:0.75rem;
  73.     color:{color:Text};
  74.     word-break:break-word;
  75. }
  76. h1, h2, h3, h4, h5, h6{color:{color:Title};}
  77.  
  78. h1,h2{font-family:new romantics; letter-spacing:3px;}
  79.  
  80. b{color:{color:Bold};}
  81.  
  82. i{color:{color:Italic};}
  83.  
  84. ::marker{color:{color:Numbered Bulleted Lists};}
  85.  
  86. ::selection{
  87.     background-color:{color:text selection background};
  88.     color:{color:text selection text};
  89.     text-shadow:0;
  90. }
  91.  
  92. blockquote{
  93.     border-left:3px solid {color:Blockquote};
  94.     padding:0.25rem 0.5rem;
  95.     margin:1rem auto;
  96. }
  97.  
  98. pre{
  99.     width:100%;
  100.     background-color:{color:accent01};
  101.     color:{color:accent01 text};
  102.     margin-bottom:1rem;
  103.     white-space:pre-wrap;
  104.     word-break:break-all;
  105.     padding:1rem 2rem;
  106.     border-radius:10px;
  107.     outline:2px dashed {color:border};
  108.     outline-offset:-10px;
  109. }
  110.  
  111. code{
  112.     padding:0.25rem 0.5rem;
  113.     background-color:{color:accent01};
  114.     color:{color:accent01 text};
  115.     border-radius:10px;
  116. }
  117.  
  118. @font-face { font-family:'figure things'; src: url(https://static.tumblr.com/v6akjgz/HU3qoivkr/figure_things.otf); }
  119. @font-face { font-family:'rns camelia'; src: url(https://static.tumblr.com/v6akjgz/nMVqoiykm/rns_camelia.otf); }
  120. @font-face { font-family:'negara serif'; src: url(https://static.tumblr.com/v6akjgz/Hzpqoixei/negaraserif-hairlineitalic.otf); }
  121. @font-face { font-family: caviar dreams; src: url(https://static.tumblr.com/v6akjgz/RCIqf9hvq/caviardreams.ttf); }
  122. @font-face { font-family:'new romantics'; src: url(https://static.tumblr.com/v6akjgz/rLVqoitw9/newromantics.ttf); }
  123. @font-face { font-family:Open Dyslexia; src: url(https://static.tumblr.com/v6akjgz/5iZqzojkv/opendyslexicalta-regular.otf); }
  124.  
  125. /*CURSORS*/
  126. html, a {cursor: url('{text:cursor}'), auto !important;}
  127.  
  128. a:hover{cursor: url('{text:cursor hover}'), auto !important;}
  129.  
  130. /*HORIZONTAL LINE*/
  131. hr{
  132.     width:70%;
  133.     margin:1rem auto;
  134.     border:1px dashed {color:accent01};
  135. }
  136.  
  137. /*OUTER SQUARES*/
  138. .sqone, .sqtwo{background-color:{color:Accent01};position:absolute;}
  139.  
  140. .sqone{width:30%;height:30%;}
  141.  
  142. .sqtwo{
  143.     width:60%; height:80%;
  144.     bottom:0; right:0;
  145.     z-index:-2;
  146. }
  147.  
  148. /*CONTAINER*/
  149. main{
  150.     width:80%; height:90%;
  151.     background-image:url('{image:Background}');
  152.     background-color:{color:accent03};
  153.     inset:0;
  154.     margin:auto;
  155.     position:fixed;
  156.     border-radius:20px;
  157. }
  158.  
  159. /*POLAROID*/
  160. .pw{
  161.     height:100vh; width:400px;
  162.     position:relative;
  163.     display:flex;
  164.     flex-direction:column;
  165.     justify-content:center;
  166.     align-items:flex-end;
  167. }
  168.  
  169. aside{
  170.     width:350px; height:400px;
  171.     padding:0.5rem 1rem;
  172.     background-color:{color:Polaroid};
  173.     border:2px solid {color:Border};
  174.     transform:rotate(350deg);
  175.     z-index:2;
  176. }
  177.  
  178. aside img{
  179.     width:100%;
  180.     border:1px solid {color:border};
  181.     pointer-events:none;
  182. }
  183.  
  184. /*BLOG TITLE*/
  185. .title{
  186.     font-family:new romantics;
  187.     color:{color:Title};
  188.     font-size:{text:Title Font Size};
  189.     letter-spacing:3px;
  190.     text-align:center;
  191.     margin:0.5rem 0;
  192. }
  193.  
  194. /*LINKS: NAVIGATION*/
  195. .bx-menu{
  196.     font-size:2rem;
  197.     color:{color:accent03};
  198.     border:1px solid {color:accent03};
  199.     border-radius:50%;
  200.     padding:0.25rem;
  201.     position:absolute;
  202.     top:40%; left:50%;
  203.     transform:translate(-50%, -40%);
  204.     transition:0.25s ease-out;
  205. }
  206.  
  207. .bx-menu:hover{
  208.     background-color:{color:accent03};
  209.     color:{color:Accent02};
  210.     border:1px solid {color:accent02};
  211.     transition:0.25s ease-in;
  212. }
  213.  
  214. .link{
  215.     background-color:{color:Accent02};
  216.     width:25%; height:27.9%;
  217.     border-radius:19px 0 0 0;
  218.     position:absolute;
  219.     top:0; left:0;
  220. }
  221.  
  222. /*POPUP*/
  223. .popup_block {
  224.     padding: 30px;
  225.     background:{color:accent03};
  226.     border: 2px solid {color:border};
  227.     display: none;
  228.     position: fixed;
  229.     top: 50%; left: 50%;
  230.     z-index: 99999999;
  231.     max-height:70vh;
  232.     overflow:auto;
  233.     border-radius:10px;
  234.     animation: zoom 0.5s;
  235. }
  236.  
  237. *html .popup_block {position: absolute;}
  238.  
  239. @-webkit-keyframes zoom {0% {transform: scale(0);-webkit-transform: scale(0);}100% {transform: scale(1.0);-webkit-transform: scale(1.0);}}@-moz-keyframes zoom {0% {transform: scale(0);-moz-transform: scale(0);}100% {transform: scale(1.0);-moz-transform: scale(1.0);}}@keyframes zoom {0% {transform: scale(0);}100% {transform: scale(1.0);}}
  240.  
  241. #fade {
  242.     background:{color:Background};
  243.     opacity: .8;
  244.     display: none;
  245.     position: fixed; left: 0; top: 0;
  246.     width: 100%; height: 100%;
  247.     z-index: 9999;
  248. }
  249.  
  250. *html #fade {position: absolute;}
  251.  
  252. /*DESCRIPTION*/
  253. .description{
  254.     width:80%;
  255.     text-align:center;
  256.     line-height:1.5;
  257.     letter-spacing:1px;
  258.     word-spacing:0.25rem;
  259.     margin:0 auto;
  260.     color:{color:Text};
  261. }
  262.  
  263. /*LINKS INSIDE THE MENU*/
  264. .morelinks{
  265.     margin:0rem auto;
  266.     width:90%;
  267.     text-align:center;
  268. }
  269.  
  270. .morelinks a{
  271.     background-color:{color:accent01};
  272.     color:{color:accent01 text};
  273.     padding:0.25rem 0.5rem;
  274.     margin:0 0.25rem;
  275.     line-height:3;
  276.     text-decoration:none;
  277.     border:1px solid transparent;
  278.     border-radius:10px;
  279.     transition:0.25s ease-out;
  280. }
  281.  
  282. .morelinks a:hover{
  283.     color:{color:accent01};
  284.     background-color:{color:accent01 text};
  285.     border:1px dashed {color:accent01};
  286.     transition:0.25s ease-in;
  287. }
  288.  
  289. /*LINKS APPEAR AT THE TOP OF THE POST (THE ONE WITH SEARCH BAR)*/
  290. .basiclink{
  291.     padding:0.5rem 1rem;
  292.     text-align:right;
  293.     width:60%;
  294.     position:absolute;
  295.     top:5%; right:0;
  296.     display:flex;
  297.     justify-content:flex-end;
  298.     align-items:center;
  299. }
  300.  
  301. .basiclink a{
  302.     padding:0.5rem 1rem;
  303.     margin:0 1.5rem;
  304.     border:1px solid transparent;
  305.     background-color:{color:accent01};
  306.     color:{color:accent01 text};
  307.     text-decoration:none;
  308.     border-radius:10px;
  309.     transition:0.25s ease-out;
  310.     display:flex;
  311.     align-items: baseline
  312. }
  313.  
  314. .basiclink a span{ margin-right:0.25rem; font-size:1.2rem;}
  315.  
  316. .basiclink a:hover{
  317.     color:{color:accent01};
  318.     background-color:{color:accent01 text};
  319.     border:1px dashed {color:accent01};
  320.     transition:0.25s ease-in;
  321. }
  322.  
  323. /*SEARCH BAR*/
  324. .sb input{
  325.     width:100px;
  326.     border-radius:10px;
  327.     border:1px solid {color:Border};
  328.     padding:0.25rem 0.5rem;
  329.     transition:0.25s ease-out;
  330.     font-family:{select:Font Body};
  331. }
  332.  
  333. .sb input:focus{
  334.     width:120px;
  335.     border-bottom:2px dashed {color:Accent01};
  336.     border-width:0 0 2px 0;
  337.     outline:0; border-radius:0;
  338.     transition:0.25s ease-in;
  339. }
  340.  
  341. /*POST CONTENT CONTAINER*/
  342. article{
  343.     background-color:rgba({RGBcolor:Accent02},0.75);
  344.     width:62.5%; height:83.3%;
  345.     border-radius:0 0 19px 0;
  346.     position:absolute;
  347.     bottom:0; right:0;
  348.     overflow:auto;
  349.     z-index:2;
  350. }
  351.  
  352. /*POST CONTENT*/
  353. .postcont{
  354.     width:90%;
  355.     background-color:{color:accent03};
  356.     margin:2rem auto;
  357.     padding:1rem 1.5rem;
  358.     background-image:url('{image:Post}');
  359.     border-radius:10px;
  360. }
  361.  
  362. /*POST CONTENT TITLE*/
  363. .postcont h1{text-align:center;margin-bottom:-.5rem;}
  364.  
  365. .postcont h1 a{
  366.     text-decoration:none;
  367.     font-size:1.5rem;
  368.     color:{color:Title};
  369.     letter-spacing:5px;
  370.     word-spacing:.5rem;
  371. }
  372.  
  373. /*POST CONTENT LINKS*/
  374. .postcont a{
  375.     color:{color:Post Link};
  376.     text-decoration:none;
  377.     transition:0.25s ease-out;
  378. }
  379.  
  380. .postcont a:hover{color:{color:Post Link Hover};}
  381.  
  382. /*POST CONTENT IMAGES*/
  383. .postcont img{
  384.     width:100%;
  385.     margin:1rem auto;
  386.     outline:3px dashed {color:Border};
  387.     outline-offset:-10px;
  388. }
  389.  
  390. img.post_media_photo.image{outline:3px dashed {color:Border}!important;outline-offset:-15px!important;
  391. }
  392.  
  393. a.post_media_photo_anchor{margin-bottom:1rem;}
  394.  
  395. {block:Text}.postcont figure{outline:0!important;}{/block:Text}
  396.  
  397. /*TUMBLR ATTRIBUTION*/
  398. .tmblr-attribution{
  399.     width:100%;
  400.     background-color:{color:border};
  401.     margin-top:-1.4rem;
  402.     padding:0.25rem 0.5rem;
  403. }
  404.  
  405. /*UNNEST CAPTION*/
  406. .unnest-caption img{
  407.     width:50px; height:50px;
  408.     object-fit:cover;
  409.     margin:0 1rem 0 0;
  410.     border:0; outline:0;
  411.     border-radius:50%;
  412. }
  413.  
  414. .unnest-caption{
  415.     display:flex;
  416.     align-items:center;
  417.     margin:1rem auto;
  418. }
  419.  
  420. .unnest-caption span{margin:0 0.5rem;}
  421.  
  422. /*LIGHTBOX*/
  423. .vignette, #vignette {opacity:0;}
  424.  
  425. .lightbox-image, #tumblr_lightbox img {
  426.     box-shadow:none !important;
  427.     border-radius:0 !important;
  428.     max-width:none;
  429. }
  430.  
  431. .tmblr-lightbox, #tumblr_lightbox {background-color:rgba({RGBcolor:Background},.8) !important;}
  432.  
  433. .lightbox-image, #tumblr_lightbox img {
  434.     outline:3px dashed {color:Border};
  435.     outline-offset:-10px;
  436.     box-sizing:border-box;
  437. }
  438.  
  439. /*PHOTOSET POSTS*/
  440. .photoset{margin-bottom:1rem;width:100%;}
  441.  
  442. /*QUOTE POSTS*/
  443. .quote{
  444.     font-size:1.5rem;
  445.     line-height:1.5;
  446.     text-align:center;
  447.     font-weight:750;
  448.     margin-bottom:0.5rem;
  449.     color:{color:Title};
  450. }
  451.  
  452. .quote::before{content:open-quote;padding-right:0.25rem;}
  453.  
  454. .quote::after{content:close-quote;padding-left:0.25rem;}
  455.  
  456. .qsource{color:{color:Text};}
  457.  
  458. .qsource::before{
  459.     content:'';
  460.     width:50px; height:2.5px;
  461.     background-color:{color:accent01};
  462.     display:inline-block;
  463.     margin:0 0.5rem 3px 0;
  464. }
  465.  
  466. /*LINK POSTS*/
  467. .linkp{
  468.     width:100%;
  469.     padding:0.5rem 1rem;
  470.     border:2px solid {color:border};
  471.     border-radius:10px 10px 0 0;
  472.     display:flex;
  473.     justify-content:space-between;
  474. }
  475.  
  476. .linkp::after{content:'\ea92';font-family:cappuccicons;}
  477.  
  478. .linkpe{
  479.     border:2px solid {color:border};
  480.     border-top:0;
  481.     border-radius:0 0 10px 10px;
  482.     padding:0.5rem 1rem;
  483.     margin-bottom:1rem;
  484.     font-size:0.8rem;
  485. }
  486.  
  487. /*CHAT POSTS*/
  488. .chatp{margin-top:1rem;}
  489.  
  490. .label{
  491.     background-color:{color:accent01};
  492.     color:{color:accent01 text};
  493.     padding:0.25rem 0.5rem;
  494.     border-radius:10px;
  495.     line-height:2;
  496. }
  497.  
  498. /*AUDIO POSTS*/
  499. .audio iframe{
  500.     width:100%;
  501.     border-radius:10px;
  502.     border-bottom:5px solid {color:border};
  503. }
  504.  
  505. iframe[class^="spotify_audio_player"],
  506. iframe[class^="soundcloud_audio_player"]{
  507.     width:100%; height:80px!important;
  508.     margin-bottom:1rem;
  509. }
  510.  
  511. /*VIDEO POSTS*/
  512. .video iframe{width:100%;border-radius:10px;}
  513.  
  514. /*ASK POSTS*/
  515. .answ{
  516.     width:100%;
  517.     padding:0.5rem 1rem;
  518.     display:flex;
  519. }
  520.  
  521. .answ img{
  522.     width:30px; height:30px;
  523.     outline:0;
  524.     margin-right:2rem;
  525. }
  526.  
  527. .question{
  528.     width:90%;
  529.     border:2px solid {color:border};
  530.     border-radius:10px;
  531.     position:relative;
  532.     padding:0.5rem 1rem;
  533.     color:{color:text};
  534.     line-height:1.5;
  535. }
  536.  
  537. .question::after{
  538.     content: '';
  539.     position: absolute;
  540.     left: 0; top: 50%;
  541.     width: 0; height: 0;
  542.     border: 20px solid transparent;
  543.     border-right-color: {color:border};
  544.     border-left: 0; border-top: 0;
  545.     margin-top: 0.5rem; margin-left: -20px;
  546. }
  547.  
  548. .asker{font-weight:bold;}
  549.  
  550. /*POST INFORMATION - TIME, NOTES, LIKE, REBLOG*/
  551. .posti{
  552.     width:90%;
  553.     margin:0 auto;
  554.     display:flex;
  555.     justify-content:center;
  556.     align-items:center;
  557.     flex-flow:row wrap;
  558.     {block:PermalinkPage}
  559.     margin-bottom:1rem;
  560.     {block:PermalinkPage}
  561. }
  562.  
  563. .posti > span{
  564.     color:{color:accent01 text};
  565.     background-color:{color:accent01};
  566.     margin:0 1rem .5rem 0;
  567.     padding:0.25rem 0.5rem;
  568.     border-radius:10px;
  569. }
  570.  
  571. .posti > span a{color:{color:accent01 text};text-decoration:none;}
  572.  
  573. /*LIKE BUTTON*/
  574. .like-b {
  575.   background-color:{color:accent01};
  576.   padding:0.25rem 0.5rem;
  577.   position:relative;
  578.   display:inline-block;
  579.   height:1em;
  580.   line-height:1em;
  581.   overflow:hidden;
  582.   margin-bottom:-1px;
  583. }
  584.  
  585. .like-b .like_button iframe {
  586.    position:absolute;
  587.    top:0; left:0; bottom:0; right:0;
  588.    z-index:2;
  589.    opacity:0;
  590. }
  591. .like-b .liked + .b {color:{color:accent01 text};}
  592.  
  593. .like-b .liked + .b:after {content:'d';}
  594.  
  595. /*POST NOTE*/
  596. .postn{
  597.     width:98%;
  598.     background-color:{color:accent03};
  599.     margin:1rem auto;
  600.     padding:1rem 2rem;
  601.     border-radius:10px;
  602.     background-image:url({image:post});
  603. }
  604.  
  605. .postn img{
  606.     width:20px; height:20px;
  607.     margin-right:1rem;
  608. }
  609.  
  610. .postn ol{list-style:none;}
  611.  
  612. .postn ol li a{color:{color:post link};text-decoration:none;}
  613.  
  614. .postn ol li a:hover{color:{color:post link hover};}
  615.  
  616. /*TAGS*/
  617. .tagw{
  618.     width:90%;
  619.     margin:1rem auto;
  620.     display:flex;
  621.     justify-content:space-evenly;
  622.     flex-flow:row wrap;
  623. }
  624.  
  625. .tagw > a{
  626.     background-color:{color:accent01 text};
  627.     color:{color:accent01};
  628.     padding:0.25rem 0.5rem;
  629.     border-radius:10px;
  630.     text-decoration:none;
  631.     transition:0.25s ease-out;
  632.     margin:0.25rem 0.5rem;
  633. }
  634.  
  635. .tagw > a::before{ content:'\eabb'; font-family:cappuccicons;}
  636.  
  637. .tagw > a:hover{
  638.     color:{color:accent01 text};
  639.     background-color:{color:accent01};
  640.     transition:0.25s ease-in;
  641. }
  642.  
  643. /*JUMP PAGINATION*/
  644. .pagination{
  645.     width:90%;
  646.     display:flex;
  647.     justify-content:space-evenly;
  648.     margin:2rem auto 1rem auto;
  649.     border-top:2px solid {color:accent03}; border-bottom:2px solid {color:accent03};
  650.     padding:1rem 2rem;
  651. }
  652.  
  653. .jumpp, .totalp{
  654.     background-color:{color:accent01};
  655.     padding:0.25rem 0.5rem;
  656.     margin:0 0.5rem;
  657.     text-decoration:none;
  658.     color:{color:accent01 text};
  659.     border-radius:10px;
  660.     transition:0.25s ease-out;
  661. }
  662.  
  663. .jumpp:hover, .currentp{  
  664.     color:{color:accent01};
  665.     background-color:{color:accent01 text};
  666.     padding:0.25rem 0.5rem;
  667.     border-radius:10px;
  668.     transition:0.25s ease-in;
  669. }
  670.  
  671. /*THINGS NOT TO DISPLAY OUTSIDE MEDIA QUERIES*/
  672. .linkmq{display:none;}
  673.  
  674. /*CREDITS - DO NOT REMOVE!*/
  675. .credits{
  676.     text-align:center;
  677.     color:{color:accent01 text};
  678.     background-color:{color:accent01};
  679.     padding:0.5rem 1rem;
  680.     width:50%;
  681.     margin:0 auto 1rem auto;
  682.     border-radius:10px;
  683.     border-bottom:3px solid {color:accent03};
  684. }
  685.  
  686. .credits a{color:{color:accent01 text};text-decoration:none;}
  687.  
  688. /*TUMBLR CONTROL*/
  689. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  690.     top:0; right:-3%;
  691.     display:block;
  692.     transform:scale(0.75, 0.75)!important;
  693. }
  694.  
  695. /*ACCESSIBILITY - DARKMODE*/
  696. /*BUTTONS*/
  697. .acc{
  698.     height:100vh; width:10%;
  699.     position:relative;
  700.     display:flex;
  701.     justify-content:center;
  702.     align-items:center;
  703.     flex-direction:column;
  704. }
  705.  
  706. input#chk{
  707.     width:0; height:0; opacity:0;
  708. }
  709.  
  710. .darkmode, .dw{
  711.     background-color:{color:Accessibility Buttons};
  712.     color:{color:Accessibility Buttons Text};
  713.     text-align:center;
  714.     padding:0.5rem 1rem;
  715.     border-radius:20px;
  716.     border-bottom:2px solid gray;
  717.     transition:0.25s ease-out;
  718.     display:flex;
  719.     justify-content:center;
  720.     align-items:center;
  721.     flex-direction:column;
  722.     cursor: url('{text:cursor hover}'), auto !important;
  723.     margin-bottom:1rem;
  724. }
  725.  
  726. .darkmode:hover, .dw:hover{border-bottom:2px solid transparent;transition:0.25s ease-in;}
  727.  
  728. .bx-bulb{font-size:2rem;color:{color:accessibility buttons text};}
  729.  
  730. /*I'LL BE COMMENTING THESE SECTIONS ONE BY ONE TO MAKE IT EASY FOR YOU TO TWEAK IT ACCORDING!*/
  731.  
  732. /*BODY/ POLAROID/ FADENESS OF THE POPUP NAVIGATION*/
  733. body.dark, body.dark aside, body.dark #fade{background:#333;}
  734.  
  735. /*DISABLE BACKGROUND IMAGES DURING DARK MODE*/
  736. body.dark .postcont, body.dark main{background-image:none;}
  737.  
  738. /*POLAROID'S BORDER*/
  739. body.dark aside{border:2px solid #4d4d4d;}
  740.  
  741. /*LIGHTBOX BACKGROUND*/
  742. body.dark .tmblr-lightbox, body.dark #tumblr_lightbox{background:rgba(51, 51, 51, 0.9)!important;}
  743.  
  744. /*SQUARES*/
  745. body.dark .sqone, body.dark .sqtwo{background-color:#262626;}
  746.  
  747. /*MENU NAVIGATION ICON*/
  748. body.dark .bx-menu:hover{
  749.     background-color:white;
  750.     color:#4d4d4d;
  751.     border:1px solid transparent;
  752. }
  753.  
  754. /*MENU NAVIGATION / POST'S WRAPPER */
  755. body.dark .link, body.dark article{background-color:#4d4d4d;}
  756.  
  757. /*CONTAINER / POST CONTAINER / POPUP CONTENT / POST NOTES*/
  758. body.dark main, body.dark .postcont, body.dark .popup_block, body.dark .postn{background-color:#18181b;}
  759.  
  760. /*POPUP'S BORDER*/
  761. body.dark .popup_block{border:2px solid #4d4d4d;}
  762.  
  763. /*FONTS*/
  764. body.dark p, body.dark ol li, body.dark blockquote, body.dark ul li, body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6, body.dark ::marker, body.dark .description, body.dark .title, body.dark b, body.dark i, body.dark .postcont h1 a{color:white;}
  765.  
  766. /*POST CONTENTS LINKS / POST NOTES LINKS*/
  767. body.dark .postcont a, body.dark .postn ol li a{color:{color:dark mode link post};}
  768.  
  769. /*LINKS HOVER (POSTS AND POSTNOTES)*/
  770. body.dark .postcont a:hover, body.dark .postn ol li a:hover{color:white;}
  771.  
  772. /*CODE TAG / PRE TAG / BASIC LINKS (REFRESH, ASK, RANDOM, ARCHIVE) / POST INFORMATION / LIKE BUTTON */
  773. body.dark code, body.dark pre, body.dark .basiclink a, body.dark .posti span, body.dark .posti a.like-b{background-color:{color:dark mode accent};}
  774.  
  775. /*TAG HOVER / LINKS INSIDE THE NAVIGATION MENU / LABEL CHAT POST*/
  776. body.dark .tagw > a:hover, body.dark .morelinks a, body.dark .label{color:white;background-color:{color:dark mode accent};}
  777.  
  778. /*TAG*/
  779. body.dark .tagw > a{background-color:#181818;color:{color:dark mode accent};}
  780.  
  781. /*LINKS INSIDE THE NAVIGATION MENU HOVER*/
  782. body.dark .morelinks a:hover{
  783.     color:{color:dark mode accent};
  784.     border:1px dashed{color: dark mode accent};
  785.     background-color:transparent;
  786. }
  787.  
  788. /*BASIC LINKS HOVER*/
  789. body.dark .basiclink a:hover{color:{color:dark mode accent};background-color:#18181b;border-color:{color:dark mode accent};}
  790.  
  791. /*SCROLLBAR*/
  792. body.dark ::-webkit-scrollbar-track{  background-color: #18181b;border:6px solid  #4d4d4d;}
  793.  
  794. body.dark ::-webkit-scrollbar-thumb{background-color: #4d4d4d;border:2px solid #18181b;}
  795.  
  796. /*JUMP PAGINATION*/
  797. body.dark .totalp, body.dark .jumpp{color:white;background-color:{color:dark mode accent};}
  798.  
  799. body.dark .jumpp:hover, body.dark .credits, body.dark .currentp{color:{color:dark mode accent};background-color:#18181b;}
  800.  
  801. /*QUOTE POSTS*/
  802. body.dark .qsource{color:{color:dark mode accent};}
  803.  
  804. body.dark .quote{color:white;}
  805.  
  806. body.dark .qsource::before{background-color:white;}
  807.  
  808. /*SEARCH BAR*/
  809. body.dark .sb input{background-color:transparent;border:1px solid #4d4d4d;}
  810.  
  811. body.dark ::placeholder{color:white;}
  812.  
  813. body.dark .sb input:focus{border-bottom:2px dashed {color:dark mode accent}!important;border:0;}
  814.  
  815. /*HORIZONTAL LINE*/
  816. body.dark hr{border:1px dashed white;}
  817.  
  818. /*LINK POSTS*/
  819. body.dark .linkp, body.dark .linkpe{border:2px solid #4d4d4d;}
  820.  
  821. body.dark .linkpe{border-top:0;}
  822.  
  823.  
  824. /*DYSLEXIA*/
  825. .dw{width:90%;}
  826.  
  827. select{
  828.     cursor: url('{text:cursor hover}'), auto !important;
  829.     border-radius: 10px;
  830.     font-family:{select:Font Body};
  831.     letter-spacing:1px;
  832.     width:100%;
  833. }
  834.  
  835. label{margin-bottom:0.25rem;}
  836.  
  837. /*SCROLLBAR*/
  838. ::-webkit-scrollbar{width: 14px;height:14px;}
  839.  
  840. ::-webkit-scrollbar-track{  
  841.     background-color: {color:accent01};
  842.     border:6px solid {color:accent02};
  843.     border-radius:0 0 2rem 0;
  844. }
  845.  
  846. ::-webkit-scrollbar-thumb{  
  847.     background-color: {color:accent02};
  848.     border:2px solid {color:accent01};
  849.     border-radius:1rem;
  850. }
  851.  
  852. /*TOOTIPS*/
  853. #s-m-t-tooltip{
  854.   max-width:300px;
  855.   z-index:10;
  856.   margin:24px 14px 7px 12px;
  857.   padding:8px;
  858.   background:rgba({RGBcolor:Accessibility Buttons},0.98);
  859.   border-radius:3px;
  860.   font-size:12px;
  861.   color:{color:accessibility buttons text};
  862. }
  863.  
  864. /*MEDIA QUERIES*/
  865. @media screen and (max-width:1024px){
  866.     main{ width:98%;height:90%;}
  867.    
  868.     .pw{display:none;}
  869.    
  870.     article, .postcont{width:100%;}
  871.  
  872.     .sqone, .sqtwo{width:100%;height:20%;}
  873.    
  874.     .link, .basiclink{display:none;}
  875.    
  876.     .linkmq{
  877.         background-color:{color:accent03};
  878.         width:100%;
  879.         height:16.6%;
  880.         border-radius:19px 19px 0 0;
  881.         display:flex;
  882.         justify-content:space-evenly;
  883.         align-items:center;
  884.         flex-flow:row wrap;
  885.         padding:1rem 0;
  886.     }
  887.    
  888.     .linkmq > a{
  889.         background-color:{color:accent02};
  890.         color:{color:post link};
  891.         padding:0.25rem 0.5rem;
  892.         border-radius:10px;
  893.         text-decoration:none;
  894.         margin-bottom:0.5rem;
  895.         border:1px solid transparent;
  896.     }
  897.    
  898.     .linkmq > a:hover{color:{color:post link};background-color:transparent;}
  899.    
  900.     .linkmq .poplight{
  901.         background-color:{color:accent03};
  902.         font-size:1.5rem;
  903.         display:flex;
  904.     }
  905.    
  906.     .tmblr-iframe-compact .tmblr-iframe--unified-controls, .acc{display:none;}
  907.    
  908.     .popup_block{width:98%;}
  909.    
  910.     .credits, .posti, .tagw{width:92%;}
  911. }
  912. @media screen and (min-width:1440px){
  913.     .pw{z-index:2;}
  914.    
  915.     aside{
  916.        width:100%; height:calc(400px + 5%);
  917.        position:relative;
  918.        left:10%;
  919.     }
  920. }
  921. @media screen and (min-width:1920px){
  922.     aside{left:30%;}
  923.    
  924.     .basiclink{justify-content:space-around;}
  925.    
  926.     .bx-menu{font-size:4rem;}
  927. }
  928.  
  929. {CustomCSS}
  930. </style>
  931. <script>
  932. ///TOOLTIPS
  933.     (function($){
  934.         $(document).ready(function(){
  935.             $("[title]").style_my_tooltips({
  936.                 tip_follows_cursor:true,
  937.             });
  938.         });
  939.     })(jQuery);
  940. </script>
  941.  
  942. <script type="text/javascript">
  943. ///POPUP
  944. $(document).ready(function(){
  945.   popUp(true);
  946. });
  947. </script>
  948. </head>
  949.  
  950. <body>
  951. <!--OUTER SQUARE (TOP LEFT)-->
  952. <div class="sqone"></div>
  953.  
  954. <!--ACCESSIBILITY-->
  955. <div class="acc">
  956. <!--DARK MODE-->
  957.     <label class="darkmode">
  958.         <input type="checkbox" id="chk" />
  959.         <span class='bx bx-bulb'></span>
  960.     </label>
  961. <!--FONT SELECTOR-->    
  962.     <div class="dw">
  963.     <label for="font-selector">Select Font</label>
  964. <select id="font-selector">
  965.   <option value="{select:Font Body}">{select:Font Body}</option>
  966.   <option value="Open Dyslexia">Open Dyslexia</option>
  967. </select>
  968.     </div>
  969. </div>
  970.  
  971. <!--OUTER SQUARE (BOTTOM RIGHT)-->
  972. <div class="sqtwo"></div>
  973.  
  974. <!--CONTAINER-->
  975. <main>
  976. <!--BASIC LINKS-->    
  977.     <nav class="basiclink">
  978.         <a href="/"><span class='bx bxs-home' ></span> Refresh</a>
  979.         <a href="/ask"><span class='bx bxs-envelope' ></span>  Ask</a>
  980.         <a href="/random"><span class='bx bx-shuffle' ></span> Random</a>
  981.         <a href="/archive"><span class='bx bxs-archive' ></span> Archive</a>
  982.     <!--SEARCHBAR-->    
  983.     <section class="sb">
  984.         <form action="/search" method="get">
  985.     <input type="text"  autocomplete="off" name="q" placeholder="🔍 Search" value="{SearchQuery}"/>
  986. </form>
  987.     </section>
  988.     </nav>
  989.    
  990. <!--POLAROID-->
  991.     <div class="pw">
  992.         <aside>
  993.             <img src="{image:Polaroid}">
  994.             <div class="title">{Title}</div>
  995.         </aside>
  996.     </div>
  997.    
  998. <!--MAIN NAVIGATION-->
  999.     <div class="link"><a href="#?w=1000" rel="menu" class="poplight" title="Main Menu"><i class='bx bx-menu'></i></a></div>
  1000.    
  1001. <!--MEDIA QUERIES LINKS-->
  1002.     <div class="linkmq">
  1003.         <a href="#?w=100%" rel="menu" class="poplight" title="Main Menu"><i class='bx bx-dots-vertical-rounded'></i></a>
  1004.         <a href="/"><span class='bx bxs-home' ></span> Refresh</a>
  1005.         <a href="/ask"><span class='bx bxs-envelope' ></span>  Ask</a>
  1006.         <a href="/random"><span class='bx bx-shuffle' ></span> Random</a>
  1007.         <a href="/archive"><span class='bx bxs-archive' ></span> Archive</a>
  1008.     <!--SEARCHBAR-->    
  1009.     <section class="sb">
  1010.         <form action="/search" method="get">
  1011.     <input type="text"  autocomplete="off" name="q" placeholder="🔍 Search" value="{SearchQuery}"/>
  1012. </form>
  1013.     </section>
  1014.     </div>
  1015.  
  1016. <!--POSTS-->    
  1017.     <article>
  1018.     {block:Posts}      
  1019.         <section class="postcont" >
  1020.         <!--TEXT POSTS-->
  1021.             {block:Text}
  1022.             {block:Title}<h1><a href="{Permalink}">{Title}</a></h1><hr>{/block:Title}
  1023.     {block:NotReblog}{Body}{/block:NotReblog}
  1024.     {block:RebloggedFrom}
  1025.     {block:Reblogs}
  1026.      <div class="unnest-caption">
  1027.         {block:IsActive}
  1028.         <img src="{PortraitURL-64}">
  1029.         {block:IsActive}
  1030.         {block:IsDeactivated}
  1031.         <img src="">
  1032.         {/block:IsDeactivated}
  1033.         {block:HasPermalink}
  1034.         <a href="{Permalink}" target="_blank">
  1035.             {Username}
  1036.         </a>
  1037.         {/block:HasPermalink}
  1038.     </div>
  1039.     {Body}
  1040.     {/block:Reblogs}
  1041.     {/block:RebloggedFrom}
  1042.     {/block:Text}
  1043.    
  1044.     <!--PHOTO POST-->
  1045.     {block:Photo}
  1046.     <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">
  1047.     <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  1048. </a>
  1049.     {block:Caption}
  1050.     {block:NotReblog}
  1051.     {Caption}
  1052.     {/block:NotReblog}
  1053.         {block:RebloggedFrom}
  1054.     {block:Reblogs}
  1055.     <div class="unnest-caption">
  1056.         {block:IsActive}
  1057.         <img src="{PortraitURL-64}">
  1058.         {block:IsActive}
  1059.         {block:IsDeactivated}
  1060.         <img src="">
  1061.         {/block:IsDeactivated}
  1062.         {block:HasPermalink}
  1063.         <a href="{Permalink}" target="_blank">
  1064.             {Username}
  1065.         </a>
  1066.         {/block:HasPermalink}
  1067.     </div>
  1068.     {Body}
  1069.     {/block:Reblogs}
  1070.     {/block:RebloggedFrom}
  1071.     {/block:Caption}
  1072.     {/block:Photo}
  1073.    
  1074.     <!--PHOTOSET POST-->
  1075.     {block:Photoset}
  1076.     <div class="photoset">
  1077.         {Photoset}
  1078.     </div>
  1079.     {block:Caption}
  1080.     {block:NotReblog}
  1081.     {Caption}
  1082.     {/block:NotReblog}
  1083.         {block:RebloggedFrom}
  1084.     {block:Reblogs}
  1085.     <div class="unnest-caption">
  1086.         {block:IsActive}
  1087.         <img src="{PortraitURL-64}">
  1088.         {block:IsActive}
  1089.         {block:IsDeactivated}
  1090.         <img src="">
  1091.         {/block:IsDeactivated}
  1092.         {block:HasPermalink}
  1093.         <a href="{Permalink}" target="_blank">
  1094.             {Username}
  1095.         </a>
  1096.         {/block:HasPermalink}
  1097.     </div>
  1098.     {Body}
  1099.     {/block:Reblogs}
  1100.     {/block:RebloggedFrom}
  1101.     {/block:Caption}
  1102.     {/block:Photoset}
  1103.    
  1104.     <!--QUOTE POST-->
  1105.     {block:Quote}
  1106.     <center>
  1107.     <div class="quote">{Quote}</div>
  1108.     </center>
  1109.     {block:Source}
  1110.     <center>
  1111.         <div class="qsource">{Source}</div>
  1112.     </center>
  1113.     {/block:Source}
  1114.     {/block:Quote}
  1115.    
  1116.     <!--LINK POST-->
  1117.     {block:Link}
  1118.     <a href="{URL}" target="_blank">
  1119.         <div class="linkp">{Name}
  1120.         </div>
  1121.         {block:Excerpt}
  1122.         <div class="linkpe">{Excerpt}</div>
  1123.         {/block:Excerpt}
  1124.     </a>
  1125.         {block:Description}
  1126.     {block:NotReblog}
  1127.     {Description}
  1128.     {/block:NotReblog}
  1129.         {block:RebloggedFrom}
  1130.     {block:Reblogs}
  1131.     <div class="unnest-caption">
  1132.         {block:IsActive}
  1133.         <img src="{PortraitURL-64}">
  1134.         {block:IsActive}
  1135.         {block:IsDeactivated}
  1136.         <img src="">
  1137.         {/block:IsDeactivated}
  1138.         {block:HasPermalink}
  1139.         <a href="{Permalink}" target="_blank">
  1140.             {Username}
  1141.         </a>
  1142.         {/block:HasPermalink}
  1143.     </div>
  1144.     {Body}
  1145.     {/block:Reblogs}
  1146.     {/block:RebloggedFrom}
  1147.     {/block:Description}
  1148.     {/block:Link}
  1149.    
  1150.     <!--CHAT POST-->
  1151.     {block:Chat}
  1152.     <a href="{Permalink}">
  1153.         <h1>{Title}</h1>
  1154.     </a>
  1155.     {block:Lines}
  1156.     <div class="chatp">
  1157.         <p>{block:Label}
  1158.     <span class="label">{Label}</span>
  1159.     {/block:Label} {Line}
  1160.     </div>
  1161.     {/block:Lines}
  1162.     {/block:Chat}
  1163.    
  1164.     <!--AUDIO POSTS-->
  1165.     {block:Audio}
  1166.     <div class="audio">{AudioEmbed}</div>
  1167.     {block:Caption}
  1168.     {block:NotReblog}
  1169.     {Caption}
  1170.     {/block:NotReblog}
  1171.     {block:RebloggedFrom}
  1172.     {block:Reblogs}
  1173.     <div class="unnest-caption">
  1174.         {block:IsActive}
  1175.         <img src="{PortraitURL-64}">
  1176.         {block:IsActive}
  1177.         {block:IsDeactivated}
  1178.         <img src="">
  1179.         {/block:IsDeactivated}
  1180.         {block:HasPermalink}
  1181.         <a href="{Permalink}" target="_blank">
  1182.             {Username}
  1183.         </a>
  1184.         {/block:HasPermalink}
  1185.     </div>
  1186.     {Body}
  1187.     {/block:Reblogs}
  1188.     {/block:RebloggedFrom}
  1189.     {/block:Caption}
  1190.     {/block:Audio}
  1191.    
  1192.     <!--VIDEO POST-->
  1193.     {block:Video}
  1194.     <div class="video">
  1195.         {Video-500}
  1196.     </div>
  1197.     {block:Caption}
  1198.     {block:NotReblog}
  1199.     {Caption}
  1200.     {/block:NotReblog}
  1201.     {block:RebloggedFrom}
  1202.     {block:Reblogs}
  1203.     <div class="unnest-caption">
  1204.         {block:IsActive}
  1205.         <img src="{PortraitURL-64}">
  1206.         {block:IsActive}
  1207.         {block:IsDeactivated}
  1208.         <img src="">
  1209.         {/block:IsDeactivated}
  1210.         {block:HasPermalink}
  1211.         <a href="{Permalink}" target="_blank">
  1212.             {Username}
  1213.         </a>
  1214.         {/block:HasPermalink}
  1215.     </div>
  1216.     {Body}
  1217.     {/block:Reblogs}
  1218.     {/block:RebloggedFrom}
  1219.     {/block:Caption}
  1220.     {/block:Video}
  1221.    
  1222.     <!--ANSWER-->
  1223.     {block:Answer}
  1224.     <section class="answ">
  1225.     <img src="{AskerPortraitURL-30}">
  1226.     <div class="question">
  1227.         <span class="asker">{Asker}</span> asked:
  1228.         {Question}
  1229.     </div>
  1230.     </section>
  1231.     {block:NotReblog}
  1232.     <p>{Answer}
  1233.     {block:NotReblog}
  1234.     {block:RebloggedFrom}
  1235.    {block:Answerer}
  1236.     <div class="unnest-caption">
  1237.            <img src="{AnswererPortraitURL-64}"> {Answerer} <span> answered:</span>
  1238.     </div>
  1239.     <p>{Answer}
  1240.    {/block:Answerer}
  1241.     {block:Reblogs}
  1242.     <div class="unnest-caption">
  1243.         {block:IsActive}
  1244.         <img src="{PortraitURL-64}">
  1245.         {block:IsActive}
  1246.         {block:IsDeactivated}
  1247.         <img src="">
  1248.         {/block:IsDeactivated}
  1249.         {block:HasPermalink}
  1250.         <a href="{Permalink}" target="_blank">
  1251.             {Username}
  1252.         </a>
  1253.         {/block:HasPermalink}
  1254.     </div>
  1255.     {Body}
  1256.     {/block:Reblogs}
  1257.     {/block:RebloggedFrom}
  1258.     {/block:Answer}
  1259.     </section>
  1260.    
  1261.     <!--POST INFORMATION-->
  1262.         {block:Date}
  1263.     <section class="posti">
  1264.         <span><span class='bx bxs-info-circle'></span> <span class="time-ago">{TimeStamp}</span></span>
  1265.         <span><a href="{Permalink}" title="View Permalink"><span class='bx bxs-note'></span> {NoteCountWithLabel}</a></span>
  1266.         {block:ContentSource}<span><a href="{SourceURL}" target="_blank" title="Source"><span class='bx bx-link-external'></span> {SourceTitle}</a></span>{/block:ContentSource}
  1267.         <span><span class='bx bxs-heart'></span>
  1268.         <a class="like-b" href="#" title="Like this post?">{LikeButton}<span class="b">Like</span></a></span>
  1269.         <span><span class='cp cp-reblog-alt'></span>
  1270.             <a href="{ReblogURL}" title="Reblog this post?">Reblog</a>
  1271.         </span>
  1272.     </section>
  1273.     {/block:Date}
  1274.    
  1275.     <!--TAGS-->
  1276.     <div class="tagw">
  1277.         {block:HasTags}
  1278.     {block:Tags}
  1279.         <a href="{TagURL}">
  1280.             <span>{Tag}</span>
  1281.         </a>
  1282.             {/block:Tags}
  1283.     {/block:HasTags}
  1284.     </div>
  1285.    
  1286.         <!--POST NOTE-->
  1287.     {block:PostNotes}
  1288.     <section class="postn">
  1289.         {PostNotes}
  1290.     </section>
  1291.     {/block:PostNotes}
  1292.     {/block:Posts}  
  1293.    
  1294.     <!--PAGINATION-->
  1295.     {block:Pagination}
  1296.     <nav class="pagination">
  1297.         <div class="totalp">
  1298.             {CurrentPage} of {TotalPages}
  1299.         </div>
  1300.             {block:PreviousPage}
  1301.                 <a class="jumpp" href="{PreviousPage}">Previous</a>
  1302.             {/block:PreviousPage}
  1303.             {block:JumpPagination length="5"}
  1304.             {block:CurrentPage}
  1305.                     <span class="currentp">{PageNumber}</span>
  1306.             {/block:CurrentPage}
  1307.             {block:JumpPage}
  1308.                     <a class="jumpp" href="{URL}">{PageNumber}</a>
  1309.             {/block:JumpPage}
  1310.             {/block:JumpPagination}
  1311.             {block:NextPage}
  1312.                 <a class="jumpp" href="{NextPage}">Next</a>
  1313.             {/block:NextPage}
  1314.     </nav>
  1315.     {/block:Pagination}
  1316.    
  1317.     <!--CREDITS-->
  1318.     <section class="credits">
  1319.         © {CopyrightYears}, Theme by <a href="http://phantasyreign.tumblr.com/" target="_blank">Jasmin</a>
  1320.     </section>
  1321.     </article>
  1322. </main>
  1323.  
  1324. <!--POPUP MENU-->
  1325. <div id="menu" class="popup_block">
  1326.    <div class="description">
  1327.        {block:Description}
  1328.        <h2>
  1329.            {text:About Title}
  1330.        </h2>
  1331.        {Description}{/block:Description}
  1332.    </div><hr>
  1333.    
  1334.    <nav class="morelinks">
  1335.        {block:HasPages}
  1336.        {block:Pages}
  1337.       <a href="{URL}">{Label}</a>
  1338.        {/block:Pages}
  1339.        {/block:HasPages}
  1340.    </nav>
  1341. </div>
  1342.  
  1343. <!--SCRIPTS-->
  1344. <script>
  1345. ///Dyslexia
  1346. document.body.style.fontFamily = '{select:Font Body}';
  1347. var fontSelector = document.getElementById('font-selector');
  1348. fontSelector.addEventListener('change', (event) => {
  1349.     document.body.style.fontFamily = event.target.value;
  1350. });
  1351. </script>
  1352.  
  1353. <script>
  1354. ///Dark Mode
  1355. const chk = document.getElementById('chk');
  1356. chk.addEventListener('click', () => {
  1357.   chk.checked?document.body.classList.add("dark"):document.body.classList.remove("dark");
  1358.   localStorage.setItem('darkModeStatus', chk.checked);
  1359. });
  1360. window.addEventListener('load', (event) => {
  1361.   if(localStorage.getItem('darkModeStatus')=="true"){
  1362.     document.body.classList.add("dark");
  1363.     document.getElementById('chk').checked = true;
  1364.   }
  1365. });
  1366. </script>  
  1367.  
  1368. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  1369. <script type="text/javascript">
  1370. $(document).ready(function() {
  1371.     $(".time-ago").timeAgo({
  1372.         time: "short",
  1373.     spaces: true,
  1374.     words: false,
  1375.     prefix: "",
  1376.     suffix: "",
  1377.     });
  1378. });
  1379. </script>
  1380. </body>
  1381. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!