API tools faq
paste
Advertisement
mariokartgod

rook tumblr code...2!

mariokartgod
Jan 2nd, 2025 (edited)
46
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 77.16 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. "Glazed"
  4. Theme by palemomos [themesbypale.tumblr.com]
  5. ver. 2.0 (August/27/2023)
  6. Please don't remove the credits.
  7.  
  8. *CHANGELOG*
  9. - Removed hide captions option.
  10. - Added robust compatibility with all NPF posts.
  11.  
  12. ★ Icons: Bootstrap Icons https://icons.getbootstrap.com/
  13. ★ CSS Photosets: by @annasthms & @eggdesign https://annasthms.github.io/photosets/
  14. ★ Griddery script:  by @glenthemes
  15. ★ Custom audio controls: by @annasthms
  16. ★ Fonts: all fonts are from Google Fonts
  17. ★ Custom like & reblog buttons tutorial: @shythemes
  18. ★ Basecode for unnested captions by @annasthms
  19. ★ Loading animation: https://loading.io/css/
  20.  
  21. Note: default images are only for demo purposes and belong to their respective authors.
  22.  
  23. If you have questions please send them to themesbypale.tumblr.com/ask or to themesbypale@gmail.com
  24.  
  25. Support me on Ko-fi ? https://ko-fi.com/palemomos
  26.  
  27. -->
  28. <!DOCTYPE html>
  29. <html>
  30. <head>
  31.     <meta charset="UTF-8">
  32.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  33.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
  34.     <title>{Title}
  35.         {block:PermalinkPage}{block:PostSummary} | {PostSummary} {/block:PostSummary}{/block:PermalinkPage}
  36.         {block:TagPage} | {lang:Posts tagged Tag}{/block:TagPage}
  37.         {block:DayPage} | {Month} {DayOfMonth}, {Year} {/block:DayPage}
  38.         {block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}</title>
  39.     <link rel="shortcut icon" href="{Favicon}">
  40.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  41.     <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  42.     <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  43.     <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
  44.          integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
  45.          crossorigin="anonymous"></script>
  46.     <script src="//griddery.github.io/grid.js"></script>
  47.     <link href="//griddery.github.io/basics.css" rel="stylesheet">
  48.     <script src="https://static.tumblr.com/0podkko/aZZqe4033/customaudio.min.js"></script>
  49.  
  50.     <!--Variables-->
  51.     <!--Texts and links--->
  52.     {block:Description}
  53.     <meta name="description" content="{MetaDescription}" />
  54.     {/block:Description}
  55.    
  56.     <meta name="text:Link 1" content="Link 1">
  57.     <meta name="text:Link 1 URL" content="">
  58.     <meta name="text:Link 2" content="Link 2">
  59.     <meta name="text:Link 2 URL" content="">
  60.     <meta name="text:Link 3" content="Link 3">
  61.     <meta name="text:Link 3 URL" content="">
  62.     <meta name="text:Link 4" content="Link 4">
  63.     <meta name="text:Link 4 URL" content="">
  64.    
  65.      <!--About section-->
  66.     <meta name="text:About Name" content="Name">
  67.     <meta name="text:About Age" content="Age">
  68.     <meta name="text:About Zodiac" content="Zodiac">
  69.     <meta name="text:About Location" content="Location">
  70.     <meta name="text:About Occupation" content="Occupation">
  71.     <meta name="text:About Pronouns" content="Pronouns">
  72.     <meta name="text:About Description" content="Your Mini Description">
  73.     <meta name="text:About Skill 1 Label" content="Your Skill 1">
  74.     <meta name="text:About Skill 1 Total" content="50">
  75.     <meta name="text:About Skill 2 Label" content="Your Skill 2">
  76.     <meta name="text:About Skill 2 Total" content="60">
  77.     <meta name="text:About Skill 3 Label" content="Your Skill 3">
  78.     <meta name="text:About Skill 3 Total" content="40">
  79.     <meta name="text:About Skill 4 Label" content="Your Skill 4">
  80.     <meta name="text:About Skill 4 Total" content="80">
  81.     <meta name="text:Website URL" content="">
  82.     <meta name="text:Twitter URL" content="">
  83.     <meta name="text:Instagram URL" content="">
  84.     <meta name="text:Shop URL" content="">
  85.     <meta name="text:Twitch URL" content="">
  86.     <meta name="text:Facebook URL" content="">
  87.     <meta name="text:Spotify URL" content="">
  88.     <meta name="text:Tags List" content="">
  89.     <meta name="text:Extra Text" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat">
  90.    
  91.     <!--Colors-->
  92.     <meta name="color:Accent Color" content="#ff66a3">
  93.     <meta name="color:Accent Color Dark Mode" content="#ff66a3">
  94.     <meta name="color:Accent Color 2" content="#ff66a3">
  95.    
  96.     <!--Images-->
  97.     <meta name="image:Custom Avatar" content="https://static.tumblr.com/vsycwa1/Igjqzy150/avatarexample.jpg" />
  98.     <meta name="image:BG Image" content="https://static.tumblr.com/vsycwa1/dQSrgs2qr/bgexample.jpg" />
  99.     <meta name="image:About Section Cover" content="https://static.tumblr.com/vsycwa1/Igjqzy150/avatarexample.jpg" />
  100.     <meta name="image:About Section Avatar" content="https://static.tumblr.com/vsycwa1/Igjqzy150/avatarexample.jpg" />
  101.  
  102.     <!--Fonts-->
  103.     <meta name="select:Font Style" content="Nanum Gothic Coding" />
  104.     <meta name="select:Font Style" content="Noto Sans JP" />
  105.     <meta name="select:Font Style" content="Coming Soon" />
  106.     <meta name="select:Font Style" content="Mali" />
  107.     <meta name="select:Font Style" content="Patrick Hand SC" />
  108.     <meta name="select:Font Style" content="Short Stack" />
  109.     <meta name="select:Font Style" content="Noto Serif JP" />
  110.    
  111.     <meta name="select:Font Style Title" content="Nanum Gothic Coding" />
  112.     <meta name="select:Font Style Title" content="Noto Sans JP" />
  113.     <meta name="select:Font Style Title" content="Coming Soon" />
  114.     <meta name="select:Font Style Title" content="Mali" />
  115.     <meta name="select:Font Style Title" content="Patrick Hand SC" />
  116.     <meta name="select:Font Style Title" content="Short Stack" />
  117.     <meta name="select:Font Style Title" content="Noto Serif JP" />
  118.    
  119.     <meta name="select:Font Style Links" content="Nanum Gothic Coding" />
  120.     <meta name="select:Font Style Links" content="Noto Sans JP" />
  121.     <meta name="select:Font Style Links" content="Coming Soon" />
  122.     <meta name="select:Font Style Links" content="Mali" />
  123.     <meta name="select:Font Style Links" content="Patrick Hand SC" />
  124.     <meta name="select:Font Style Links" content="Short Stack" />
  125.     <meta name="select:Font Style Links" content="Noto Serif JP" />
  126.  
  127.     <!--Font Sizes-->
  128.     <meta name="select:Font Size" content="12px" />
  129.     <meta name="select:Font Size" content="14px" />
  130.     <meta name="select:Font Size" content="16px" />
  131.    
  132.     <!--Mode-->
  133.     <meta name="select:Columns" content="1" />
  134.     <meta name="select:Columns" content="2" />
  135.    
  136.     <!--Bools-->
  137.     <meta name="if:Background Repeat" content="0" />
  138.     <meta name="if:Show Tags" content="0"/>
  139.     <meta name="if:Show Following" content="0"/>
  140.     <meta name="if:Show About Section" content="0" />
  141.     <meta name="if:Hide Loading Screen" content="1" />
  142.     <meta name="if:Drop Posts Animation" content="0" />
  143.    
  144. <script>
  145.     var theme = localStorage.getItem('theme') ? localStorage.getItem('theme') : "light";
  146.     document.documentElement.setAttribute('data-theme', theme);
  147. </script>
  148.    
  149. <style>
  150. @import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&family=Coming+Soon&family=Indie+Flower&family=Mali:wght@300;400&family=Patrick+Hand+SC&family=Nanum+Gothic+Coding&family=Noto+Sans+JP&family=Noto+Serif+JP&family=Short+Stack&display=swap');
  151.  
  152. :root {
  153.     --bg-color: rgba(0,0,0,0.6);
  154.     --text-color: {color:Accent Color};
  155.     --accent-color: {color:Accent Color 2};
  156.     --accent-color-2: {color:Accent Color 2};
  157.     --bg-dark: rgb(40, 40, 40);
  158.     --text-color-light: ghostwhite;
  159.     --Post-Columns: {select:Columns};
  160.     --Post-Columns-Spacing:30px;
  161.     --Post-Rows-Spacing:30px;
  162.     --bg-img: url({image:BG Image});
  163.     --border-color: {color:Accent Color 2};
  164. }
  165.  
  166. [data-theme="dark"] {
  167.     --bg-color: rgba(40, 40, 40, 0.5);
  168.     --text-color: ghostwhite;
  169.     --accent-color: {color:Accent Color Dark Mode};
  170.     --bg-img: url({image:BG Image});
  171.     --border-color: rgb(40, 40, 40);
  172. }
  173.  
  174.  
  175. /* grid column spacing */
  176. [griddery-id=".post"]
  177. [griddery-col] + [griddery-col]{
  178.     padding-left:var(--Post-Columns-Spacing);
  179. }
  180.  
  181. /*general settings*/
  182. * {
  183.     margin: 0;
  184.     padding: 0;
  185.     box-sizing: border-box;
  186.   }
  187.  
  188. ::-webkit-scrollbar {
  189.     width: 5px;
  190.     background-color: transparent;
  191. }
  192.  
  193. ::-webkit-scrollbar-corner {
  194.     background-color: var(--bg-color);
  195.     }
  196.  
  197. ::-webkit-scrollbar-track {
  198.     border: 2px solid var(--bg-color);
  199.     background-color: {color:Accent Color 2} ;
  200. }
  201.  
  202. ::-webkit-scrollbar-thumb {
  203.     background-image: linear-gradient(var(--accent-color-2) 0%, var(--accent-color-2) 100%);
  204.    
  205. }
  206.  
  207. html {
  208.     scroll-behavior: smooth;  
  209. }
  210.  
  211. body {
  212.     margin: 0;
  213.     font-family: {select:Font Style};
  214.     color: var(--text-color);
  215.     background-color: var(--bg-color);
  216.     transition: 0.5s all ease;
  217.     background-image: var(--bg-img);
  218.     background-position: center;
  219.     background-attachment: fixed;
  220.     background-repeat: no-repeat;
  221.     background-size: cover;
  222.     {block:IfBackgroundRepeat}
  223.     background-size: auto;
  224.     background-repeat: repeat;
  225.     {/block:IfBackgroundRepeat}
  226.     letter-spacing: 1px;
  227.     line-height: 1.5;
  228.     font-size: {select:Font Size};
  229. }
  230.  
  231. header, main, nav, footer, .about {
  232.      font-size: {select:Font Size};
  233. }
  234.  
  235. /*loading*/
  236. #loading {
  237.     transition: all 0.5s ease;
  238.     opacity: 1;
  239.     display: flex;
  240.     position: fixed;
  241.     width: 100%;
  242.     top: 0;
  243.     height: 100%;
  244.     justify-content: center;
  245.     align-items: center;
  246.     text-align: center;
  247.     z-index: 99;
  248.     background-color: var(--bg-color);
  249.     backdrop-filter: blur(10px);
  250.     {block:IfHideLoadingScreen}
  251.     display: none;
  252.     {/block:IfHideLoadingScreen}
  253. }
  254.  
  255. .lds-dual-ring {
  256.     display: inline-block;
  257.     width: 80px;
  258.     height: 80px;
  259. }
  260.  
  261. .lds-dual-ring:after {
  262.     content: " ";
  263.     display: block;
  264.     width: 64px;
  265.     height: 64px;
  266.     margin: 8px;
  267.     border-radius: 50%;
  268.     border: 6px solid var(--border-color);
  269.     border-color: var(--border-color) transparent var(--border-color) transparent;
  270.     animation: lds-dual-ring 1.2s linear infinite;
  271. }
  272.  
  273. @keyframes lds-dual-ring {
  274.     0% {
  275.         transform: rotate(0deg);
  276.     }
  277.     100% {
  278.         transform: rotate(360deg);
  279.     }
  280. }
  281.  
  282. a {
  283.     font-family: {select:Font Style Links};
  284.     text-shadow: 0px 0px 3px var(--border-color);
  285.     font-size: {select:Font Size};
  286. }
  287.  
  288. a, a:visited, a:active, a:hover {
  289.     color: var(--accent-color);
  290.     transition: 0.5s all ease;
  291.     text-decoration: none;
  292. }
  293.  
  294. h1,h2,h3,h4,h5 {
  295.     font-family: {select:Font Style Title};
  296. }
  297.  
  298. blockquote {
  299.     padding: 10px 30px !important;
  300. }
  301.  
  302. .iframe-controls--desktop {
  303.     height: 54px !important;
  304.     margin-top: 30px;
  305.     display: none;
  306.     z-index: 40 !important;
  307. }
  308.    
  309. .tmblr-iframe--unified-controls {
  310.     display: none;
  311. }
  312.  
  313. /*header, nav & cover */
  314. .navigation {
  315.    display: flex;
  316.     background-color: var(--bg-color);
  317.     flex-direction: column;
  318.     width: 100%;
  319.     transition: all 0.5s ease;
  320. }
  321.  
  322. .navigation_side .links {
  323.     display: flex;
  324.     max-height: 100px;
  325.     overflow: auto;
  326. }
  327.  
  328.  
  329. .navigation a, .navigation a:visited, .navigation a:active {
  330.     margin: 10px;
  331.     font-size: {select:Font Size};
  332.     line-height: 1;
  333.     color: var(--text-color);
  334.     font-family: {select:Font Style Links};
  335. }
  336.  
  337. .navigation button {
  338.     all: unset;
  339.     margin: 10px;
  340.     font-size: {select:Font Size};
  341.     line-height: 1;
  342.     color: var(--text-color);
  343.     font-family: {select:Font Style Links};
  344.     cursor: pointer;
  345. }
  346.  
  347. .navigation a:hover, .navigation button:hover {
  348.     color: var(--accent-color);
  349. }
  350.  
  351. .navigation_side .links {
  352.     flex-wrap: wrap;
  353.     justify-content: space-evenly;
  354. }
  355.  
  356.  
  357. .inputsearch {
  358.     all: unset;
  359.     border-bottom: 1px solid var(--accent-color);
  360.     width: 200px;
  361.     margin: 10px 20px;
  362.     position: absolute;
  363.     color: var(--text-color) !important;
  364.     left: 0;
  365.     background-color: var(--bg-color) !important;
  366.     transition: all 0.5s ease;
  367. }
  368.  
  369. .navigation_side .inputsearch {
  370.     position: relative;
  371.     padding: 5px;
  372.     margin: 0;
  373.     width: 100%;
  374.     box-sizing: border-box;
  375. }
  376.  
  377. .navigation_side form {
  378.     width: 100%;
  379. }
  380.  
  381. .btn_dark_mode, .controls_tumblr {
  382.     all: unset;
  383.     display: flex;
  384.     flex-direction: column;
  385.     align-items: center;
  386.     justify-content: center;
  387.     text-align: center;
  388.     width: 30px;
  389.     height: 30px;
  390.     color: var(--text-color);
  391.     cursor: pointer;
  392.     font-size: 1.3em;
  393.     transition: all 0.5s ease;
  394.     color: var(--text-color);
  395.     z-index: 9;
  396.     border: 1px solid var(--border-color);
  397.     outline: none;
  398.     cursor: pointer;
  399.     line-height: 0.5;
  400.     border-radius: 10px;
  401.     background-color: var(--bg-color);
  402.     position: relative;
  403.     backdrop-filter: blur(5px);
  404. }
  405.  
  406. .controls_tumblr {
  407.     margin-bottom: 10px;
  408. }
  409.  
  410. .btn_dark_mode:hover {
  411.     color: var(--accent-color);
  412. }
  413.  
  414. .btn_dark_mode_mobile {
  415.     display: none;
  416. }
  417.  
  418.  
  419.  
  420. .controls_tumblr:hover {
  421.     color: var(--accent-color);
  422. }
  423.  
  424. .page_controls {
  425.     display: flex;
  426.     flex-direction: column;
  427.     position: fixed;
  428.     top: 10px;
  429.     z-index: 10;
  430.     right: 20px;
  431. }
  432.  
  433. header {
  434.     width: 100%;
  435.     position: relative;
  436.     position: sticky;
  437.     top: 0;
  438.     z-index: 10;
  439.     display: flex;
  440.     justify-content: flex-end;
  441. }
  442.  
  443.     main {
  444.     width: 100%;
  445.     margin: 0 auto;
  446. }
  447.    
  448.  
  449. /*posts*/
  450.  
  451. .layout {
  452.     max-width: 1400px;
  453. }
  454.  
  455. .layout_blog {
  456.     max-width: 1400px;
  457.     display: grid;
  458.     grid-template-columns: 300px auto;
  459.     width: 95%;
  460.     margin: 0 auto;
  461. }
  462.  
  463. #posts_list {
  464.     padding: 0rem 2rem 2rem 2rem;
  465.     margin: 50px auto;
  466.     transition: 0.5s all ease;
  467.     {block:IfDropPostsAnimation}
  468.     animation: dropPosts 1s linear 1s 1;
  469.     {/block:IfDropPostsAnimation}
  470. }
  471.  
  472. @keyframes dropPosts {
  473.     0% {
  474.         transform: translateY(-100%);
  475.     }
  476.     100% {
  477.         transform: translateY(0px);
  478.     }
  479. }
  480.  
  481.  
  482. .post, .post-notes {
  483.     width: 100%;
  484.     min-width: 400px;
  485.     max-width: 550px;
  486.     background-color: var(--bg-color);
  487.     box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
  488.     border: 1px solid var(--border-color);
  489.     border-radius: 10px;
  490.     padding: 1.7rem;
  491.     transition: 0.5s all ease;
  492.     backdrop-filter: blur(2px);
  493. }
  494.  
  495. .post {
  496.     margin-top:var(--Post-Rows-Spacing);
  497. }
  498.  
  499. .post:hover {
  500.     backdrop-filter: blur(10px);
  501. }
  502.  
  503. .post-image {
  504.     width: 100%;
  505. }
  506.  
  507. .post-image img {
  508.     width: 100%;
  509. }
  510.  
  511. .post a {
  512.     word-break: break-word;
  513. }
  514.  
  515. .post-notes {
  516.     margin-top: 30px;
  517. }
  518.  
  519. .post_content ul, .post_content ol {
  520.     list-style-position: inside;
  521. }
  522.  
  523. /*types*/
  524.  
  525. /*audio, video and others*/
  526. .text p {
  527.     margin-top: 0.5rem;
  528. }
  529.  
  530. .tmblr-full img {
  531.     height: 100% !important;
  532. }
  533.  
  534. .audio, .video, .spotify_audio_player, .video iframe {
  535.     width: 100%;
  536. }
  537.  
  538. /*audio*/
  539. .spotify_audio_player {
  540.     height: 250px;
  541. }
  542.  
  543. .full-audio-player {
  544.     padding: 10px;
  545.     width: 100%;
  546.     grid-area: info;
  547. }
  548.  
  549. .audio_wrapper_npf, .tmblr-full>.audio-caption {
  550.     height: 100%;
  551.      padding: 1rem;
  552.     border-radius: 5px;
  553.     backdrop-filter: blur(5px);
  554.     border: none;
  555.     margin-bottom: 16px;
  556.     display: grid;
  557.     grid-template-columns: fit-content(35%) 65%;
  558.     grid-template-areas: "cover2 info2"
  559.                             " . ."
  560. }
  561.  
  562. .audio_info .track {
  563.     display: flex;
  564.     font-size: calc({select:Font Size} + 3px);
  565.     font-weight: bold;
  566. }
  567.  
  568. .audio_info .artist {
  569.     font-size: calc({select:Font Size} + 2px);
  570. }
  571.  
  572. .audio_info .album {
  573.     font-size: {select:Font Size};
  574.     text-align: left;
  575.     margin-top: 10px;
  576. }
  577.  
  578. .audio_wrapper {
  579.     height: 100%;
  580.     padding: 1rem;
  581.     border-radius: 5px;
  582.     backdrop-filter: blur(5px);
  583.     border: none;
  584.     margin-bottom: 16px;
  585.     display: grid;
  586.     grid-template-columns: 30% 70%;
  587.     grid-template-areas: "cover info"
  588.                         " . ."
  589. }
  590.  
  591. .audio .post-image {
  592.     grid-area: cover;
  593. }
  594.  
  595. .audio .post-image img {
  596.     height: 100%;
  597.     object-fit: cover;
  598. }
  599.  
  600. .audio_player > div {
  601.     display: inline-block;
  602.     margin: 0 0.5em 0 0;
  603.     vertical-align: middle;
  604. }
  605.  
  606. .audio_buttons {
  607.     height : 1.25em;
  608.     cursor: pointer;
  609.     margin-right: 15px;
  610.     font-size: 25px;
  611. }
  612. .audio_buttons svg {
  613.     width  : 1.25em;
  614.     height : 1.25em;
  615. }
  616. .error_icon svg {
  617.     stroke : red;
  618. }
  619.  
  620. .audio_info p {
  621.     margin : 0.25em 0;
  622.     color: var(--text-color);
  623. }
  624.  
  625. button.play_npf_audio {
  626.     cursor: pointer;
  627.     height : 1.25em;
  628.     font-size: 25px;
  629.     border: none;
  630.     background-color: transparent;
  631.     color: var(--text-color);
  632.     margin-right: 15px;
  633. }
  634.  
  635. .tmblr-audio-meta.title {
  636.     display: flex;
  637.     font-size: calc({select:Font Size} + 3px);
  638.     align-items: center;
  639.     letter-spacing: 2px;
  640. }
  641.  
  642. .tmblr-full>.audio-caption .album-cover {
  643.     height: 100%;
  644.     grid-area: cover2;
  645.     width: 100% !important;
  646.     object-fit: cover;
  647. }
  648.  
  649. .tmblr-full>.audio-caption .album-cover img {
  650.     height: 100%;
  651.     min-height: 168px;
  652.     width: 100% !important;
  653.     object-fit: cover;
  654. }
  655.  
  656. .tmblr-full audio {
  657.     display: none;
  658. }
  659.  
  660. .tmblr-full>.audio-caption .audio-details {
  661.     padding: 10px;
  662.     grid-area: info2;
  663.     justify-content: flex-start;
  664. }
  665.  
  666. .tmblr-full>.audio-caption .album, .tmblr-full>.audio-caption .artist {
  667.     line-height: 1;
  668. }
  669.  
  670. .tmblr-full>.audio-caption .artist {
  671.     font-size: calc({select:Font Size} + 2px);
  672.     letter-spacing: 2px;
  673. }
  674.  
  675. .tmblr-full>.audio-caption .album {
  676.     text-align: left;
  677.     margin-top: 10px;
  678. }
  679.  
  680. .caption:not(:has(div)), .audio_wrapper:not(:has(div)) {
  681.    display: none
  682. }
  683.  
  684. /*photosets*/
  685. [photoset-layout] {
  686.     height: 100%;
  687. }
  688.  
  689. [photoset-layout] img, .npf_inst .tmblr-full img {
  690.     transition: all 0.5s ease;
  691. }
  692.  
  693. .photo [photoset-layout] img {
  694.     height: 100%;
  695.     object-fit: cover;
  696. }
  697.  
  698. [photoset-layout] img:hover, .npf_inst .tmblr-full img:hover {
  699.     filter: brightness(0.7);
  700. }
  701.  
  702. [photoset-layout] div {
  703.       cursor: pointer;
  704. }
  705.  
  706. /*link*/
  707. .link-excerpt, div.npf-link-block, .no-thumb-exceprt {
  708.     padding: 1rem;
  709.     border-radius: 5px;
  710.     backdrop-filter: blur(5px);
  711.     border: none;
  712.     margin-bottom: 16px;
  713. }
  714.  
  715. .link-name {
  716.     font-size: 1.3em;
  717. }
  718.  
  719. .link-excerpt .exceprt {
  720.     font-size: 0.8em;
  721. }
  722.  
  723. .no-thumb-exceprt, .link-excerpt {
  724.     padding: 1rem;
  725. }
  726.  
  727.  
  728. .link-excerpt + .no-thumb-exceprt {
  729.     display: none;
  730. }
  731.  
  732. .no-thumb-exceprt .exceprt {
  733.     margin-top: 10px;
  734. }
  735.  
  736. div.npf-link-block .title {
  737.     color: var(--accent-color);
  738.     max-height: 100% !important;
  739. }
  740.  
  741. .link-description {
  742.     margin-top: 15px;
  743. }
  744.  
  745. /*chat*/
  746. .answer .post_content ,  .chat .post_content, .text .post_content , .quote  .post_content  {
  747.     width: 100%;
  748. }
  749.  
  750. .chat-line .label {
  751.     width: auto;
  752.     margin-left: 5px;
  753.     font-family: {select:Font Style Links};
  754. }
  755.  
  756. .chat-line {
  757.     margin: 10px 0px;
  758.    
  759. }
  760.  
  761. .chat-text {
  762.     padding: 5px;
  763.     backdrop-filter: blur(5px);
  764.     border-radius: 5px;
  765. }
  766.  
  767. .chat-full {
  768.     margin-bottom: 1.5rem;
  769. }
  770.  
  771. .question-block {
  772.     text-align: left;
  773.     display: flex;
  774.     flex-direction: column;
  775. }
  776.  
  777. .question_text, .answer_text  {
  778.     margin-top: 5px;
  779.     padding: 10px;
  780.     border-radius: 5px;
  781.     backdrop-filter: blur(5px);
  782.     border: none;
  783. }
  784.  
  785. .reply_container {
  786.     margin-top: 1rem;
  787. }
  788.  
  789. .post .question_text, .post .answer_text {
  790.     max-height: 100%;
  791. }
  792.  
  793. .answer_container {
  794.     margin-top: 10px;
  795. }
  796.  
  797.  
  798. .asker, .answerer, .replier {
  799.     color: var(--accent-color);
  800.     display: flex;
  801.     align-items: center;
  802. }
  803.  
  804. .reply {
  805.     margin-top: 0.5rem;
  806. }
  807.  
  808. .answerer {
  809.     color: var(--accent-color);
  810.     flex-direction: row-reverse;
  811. }
  812.  
  813. a.answerer, a.asker, a.replier {
  814.     padding: 5px;
  815.     backdrop-filter: blur(1px);
  816.     border-radius: 5px;
  817.     width: auto;
  818. }
  819.  
  820. .answer-avatar {
  821.     width: 30px;
  822.     margin: 0px 5px;
  823.     border-radius: 5px;
  824.     border: 1px solid var(--border-color);
  825.     padding: 2px;
  826. }
  827.  
  828.  
  829. /*quote*/
  830. .quote .post_content {
  831.     display: flex;
  832.     justify-content: center;
  833.     align-items: flex-end;
  834.     flex-direction: column;
  835. }
  836.  
  837. .post-quote {
  838.     padding: 20px;
  839.     font-size: 1.5rem;
  840.     text-align: center;
  841. }
  842.  
  843. .quote .post_content p:not(.post-quote) {
  844.     text-align: right;
  845.     font-size: 0.8em;
  846. }
  847.  
  848.  
  849. /*reblog & like + actions*/
  850. .like  + svg path {
  851.    fill: var(--text-color);
  852. }
  853.  
  854. .vias {
  855.     display: flex;
  856.     justify-content: flex-end;
  857.     flex-wrap: wrap;
  858.     margin-top: 1.5rem;
  859.     padding-top: 10px;
  860. }
  861.  
  862. .vias a {
  863.     color: var(--text-color);
  864. }
  865.  
  866. .vias a:hover{
  867.     color: var(--accent-color);
  868. }
  869.  
  870. .via, .originally, .vias .source {
  871.   font-size: 0.8em;
  872.   text-align: right;
  873.   margin: 0px 10px;
  874. }
  875.  
  876.      
  877. svg {
  878.     height:auto;
  879.     display:block;
  880. }
  881.  
  882. .controls, .controls:visited, .controls:active {
  883.     font-size: 0.8em;
  884.     color: var(--text-color);
  885.     margin: 0 10px;
  886. }
  887.  
  888.  
  889. .controls svg {
  890.     width:16px;
  891.     fill: var(--border-color);
  892.     transition: 0.5s all ease;
  893.     z-index: 9;
  894. }
  895.  
  896. .dark_mode .controls svg {
  897.     fill: var(--text-color-light);
  898. }
  899.  
  900. .controls svg:hover, .like:hover svg {
  901.     fill: var(--accent-color);
  902. }
  903. .controls .like .liked + svg {
  904.     opacity:1;
  905. }
  906. .controls .like .liked + svg path {
  907.     fill: var(--accent-color);
  908. }
  909. .controls .like .like_button {
  910.     position:relative;
  911. }
  912. .controls .like .like_button iframe {
  913.     position:absolute;
  914.     top:0;
  915.     left:0;
  916.     bottom:0;
  917.     right:0;
  918.     opacity:0;
  919. }
  920.  
  921.  
  922. .actions_container {
  923.     background-image: linear-gradient(to right, var(--accent-color-2) 0%, transparent 100%);
  924.     width: 100%;
  925.     padding: 8px 0px;
  926.     margin-top: 10px;
  927.     transition: all 0.5s ease;
  928.     color: var(--border-color);
  929. }
  930.  
  931. .actions_container a, .actions_container a:visited, .actions_container a:active {
  932.     color: var(--border-color);
  933. }
  934. .actions_container a:hover {
  935.     color: var(--accent-color);
  936. }
  937.  
  938. .post:hover .actions_container {
  939.     box-shadow: -200px 200px 79px 79px var(--accent-color-2) inset;
  940. -webkit-box-shadow: -200px 200px 79px 79px var(--accent-color-2) inset;
  941. -moz-box-shadow: -200px 200px 79px 79px var(--accent-color-2) inset;
  942. }
  943.  
  944.  
  945.  
  946. .actions {
  947.   display: flex;
  948.   justify-content: space-between;
  949.  
  950. }
  951.  
  952. .actions_btns {
  953.     display: flex;
  954.     justify-content: space-between;
  955. }
  956.  
  957. .notes_count {
  958.     margin-left: 10px;
  959. }
  960.  
  961. /*tags*/
  962. .maintags {
  963.     overflow: hidden;
  964. }
  965.  
  966. .tags {
  967.     display: flex;
  968.     justify-content: flex-start;
  969.     flex-wrap: wrap;
  970.     padding-top: 10px;
  971. }
  972.  
  973. .tags li {
  974.     list-style-type: none;
  975.     margin-right: 10px;
  976.     backdrop-filter: blur(1px);
  977.     font-family: {select:Font Style Links};
  978.     padding: 3px 5px;
  979.     border-radius: 5px;
  980. }
  981.  
  982. .tags li a, .tags li a:visited, .tags li a:active {
  983.     color: var(--accent-color2);
  984.     transition: 0.5s all ease;
  985.     font-size: 0.8em;
  986. }
  987.  
  988. .tags li a:hover {
  989.     color: var(--accent-color);
  990. }
  991.  
  992. /*reblogs*/
  993. .user, .commenter, .user-following, .following-container li {
  994.     display: flex;
  995.     align-items: center;
  996.     width:-webkit-fill-available;
  997. }
  998.  
  999. .commenter > span {
  1000.     padding: 5px;
  1001.     backdrop-filter: blur(1px);
  1002.     border-radius: 5px;
  1003. }
  1004.  
  1005. .source-head {
  1006.     margin-bottom: 10px;
  1007. }
  1008.  
  1009. .user {
  1010.     border-bottom: 2px dashed var(--accent-color2);
  1011.     padding-bottom: 10px;
  1012.     color: var(--accent-color);
  1013. }
  1014.  
  1015. .comment {
  1016.     margin-top: 5px;
  1017.     margin-bottom: 5px;
  1018. }
  1019.  
  1020. .comment_container {
  1021.     padding-top: 5px;
  1022. }
  1023.  
  1024. div.caption div.comment_container:first-of-type {
  1025.     border-top: none;
  1026. }
  1027.  
  1028. {block:IfHideCaptions}
  1029. .caption {
  1030.     display: none;
  1031. }
  1032. {/block:IfHideCaptions}
  1033.  
  1034. .commenter img:first-of-type {
  1035.     border-radius: 5px;
  1036.     margin-right: 10px;
  1037.     width: 30px;
  1038.     height: 30px;
  1039.     border: 1px solid var(--border-color);
  1040.     padding: 2px;
  1041.     object-fit: cover;
  1042. }
  1043.  
  1044. .source-head {
  1045.     margin-top: 0px !important;
  1046. }
  1047.  
  1048. /*about*/
  1049.  
  1050. .about {
  1051.     transition: 0.5s all ease;
  1052. }
  1053.  
  1054. .about_container {
  1055.     border: 1px solid var(--border-color);
  1056.     padding: 1.5rem;
  1057.     transition: all 0.5s ease;
  1058.     border-radius: 10px;
  1059.     background-color: var(--bg-color);
  1060.     backdrop-filter: blur(2px);
  1061.     max-width: 300px;
  1062.     box-shadow: 0px 0px 10px rgb(0 0 0 / 40%);
  1063. }
  1064.  
  1065. .about_container:hover {
  1066.     backdrop-filter: blur(10px);
  1067. }
  1068.  
  1069. .about_container h1 {
  1070.     letter-spacing: 2px;
  1071.     background: #121FCF;
  1072.     background: linear-gradient(to right, var(--accent-color) 0%, {color:Accent Color} 100%);
  1073.     -webkit-background-clip: text;
  1074.     -webkit-text-fill-color: transparent;
  1075.     text-align: left;
  1076.     width: 100%;
  1077.    
  1078.     font-weight: bold;
  1079. }
  1080.  
  1081. .title-container {
  1082.     background-color: var(--bg-color);
  1083.     transition: 0.3s all ease;
  1084.     padding: 5px 3px;
  1085.     border-radius: 5px;
  1086. }
  1087.  
  1088. .about_container .subtitle {
  1089.     font-size: 1.2em;
  1090. }
  1091.  
  1092. .about_container h1 img {
  1093.     vertical-align: bottom;
  1094. }
  1095.  
  1096. .about_blog {
  1097.     position: sticky;
  1098.     top: 50px;
  1099.     margin-top: 50px;
  1100.     display: flex;
  1101.     flex-direction: column;
  1102.     justify-content: center;
  1103.     align-items: center;
  1104.    
  1105. }
  1106.  
  1107. .about_intro {
  1108.    
  1109. }
  1110.  
  1111. .about_avatar {
  1112.     width: 100%;
  1113.     grid-area: avatar;
  1114.     margin-top: 10px;
  1115.     text-align: center;
  1116. }
  1117.  
  1118. .about_avatar img {
  1119.     width: auto;
  1120.     height: 210px;
  1121.     border-radius: 50%;
  1122.     object-fit: cover;
  1123.     object-position: top;
  1124.    
  1125. }
  1126.  
  1127. .description {
  1128.     height: auto;
  1129.     max-height: 100px;
  1130.     padding-right: 3px;
  1131.     overflow: auto;
  1132.     margin: 10px 0px;
  1133.     grid-area: side;
  1134. }
  1135.  
  1136.  
  1137.  
  1138. /*notes*/
  1139.  
  1140. .notes {
  1141.     list-style-type: none;
  1142.     margin-top: 1rem;
  1143. }
  1144.  
  1145. .notes li img{
  1146.     width: 20px;
  1147.     border-radius: 5px;
  1148.     margin-right: 5px;
  1149.   }
  1150.  
  1151.   .notes li {
  1152.     font-size: 0.8em;
  1153.     margin: 5px 0px;
  1154.     font-family: {select:Font Style Links};
  1155.   }
  1156.  
  1157.   .notes li a{
  1158.     font-size: 1em;
  1159.   }
  1160.  
  1161.   .notes .action {
  1162.     line-height: 1.5rem;
  1163.     vertical-align: super;
  1164.   }
  1165.  
  1166.  
  1167. /*pagination*/
  1168.  
  1169. #page-pagination {
  1170.     display :flex;
  1171.     justify-content: center;
  1172.     margin: 10px 0 0 0;
  1173. }
  1174.  
  1175. #page-pagination a {
  1176.     margin: 0px 10px;
  1177.     color: var(--text-color);
  1178. }
  1179.  
  1180. #page-pagination a:hover {
  1181.     color: var(--accent-color);
  1182. }
  1183.  
  1184.  
  1185. .current-page {
  1186.     backdrop-filter: blur(5px);
  1187.     padding: 0px 5px;
  1188.     color: var(--accent-color);
  1189.     border-radius: 5px;
  1190. }
  1191.  
  1192. .mobile_pagination {
  1193.     display: none !important;
  1194. }
  1195.  
  1196. /*footer*/
  1197.  
  1198. footer {
  1199.     text-align: center;
  1200.     position: fixed;
  1201.     width: 100%;
  1202.     bottom: 0;
  1203. }
  1204.  
  1205. footer p {
  1206.     background-color: var(--bg-color);
  1207.     padding: 5px;
  1208.     transition: 0.5s all ease;
  1209.     backdrop-filter: blur(2px);
  1210. }
  1211.  
  1212. #btn_open_menu_mobile {
  1213.     display: none;
  1214.    
  1215. }
  1216.  
  1217. #btn_close_menu {
  1218.     position: absolute;
  1219.     display: none;
  1220.     top: 10px;
  1221.     right: 10px;
  1222.     font-size: 18px;
  1223. }
  1224.  
  1225. #btn_mode_mobile {
  1226.     position: absolute;
  1227.     display: none;
  1228.     top: 10px;
  1229.     left: 10px;
  1230.     font-size: 18px;
  1231. }
  1232.  
  1233.  #top_button{
  1234.     all: unset;
  1235.     display: flex;
  1236.     flex-direction: column;
  1237.     align-items: center;
  1238.     justify-content: center;
  1239.     text-align: center;
  1240.     width: 30px;
  1241.     height: 30px;
  1242.     color: var(--text-color);
  1243.     cursor: pointer;
  1244.     font-size: 1.3em;
  1245.     transition: all 0.5s ease;
  1246.     color: var(--text-color);
  1247.     z-index: 9;
  1248.     border: 1px solid var(--border-color);
  1249.     outline: none;
  1250.     cursor: pointer;
  1251.     border-radius: 10px;
  1252.     background-color: var(--bg-color);
  1253.     position: fixed;
  1254.     bottom: 40px;
  1255.     line-height: 0.5;
  1256.     right: 20px;
  1257.     transform: translateY(200px);
  1258.     backdrop-filter: blur(5px);
  1259. }
  1260.  
  1261. #top_button:hover {
  1262.     color: var(--accent-color) !important;
  1263. }
  1264.  
  1265. /*data titles*/
  1266.  
  1267. [data-title]:hover:before {
  1268.     opacity: 1;
  1269.     visibility: visible;
  1270.     z-index: 100;
  1271. }
  1272.  
  1273. [data-title]:before {
  1274.     content: attr(data-title);
  1275.     position: absolute;
  1276.     top: -2.5em;
  1277.     left: 0px;
  1278.     font-size: 10px;
  1279.     font-family: {select:Font Style Links};
  1280.     color: var(--text-color);
  1281.     background-color: var(--bg-color);
  1282.     white-space: nowrap;
  1283.     opacity: 0;
  1284.     z-index: -1;
  1285.     transition: all 0.5s ease;
  1286.     border-radius: 5px;
  1287.     text-align: center;
  1288.     padding: 3px 5px;
  1289.     backdrop-filter: blur(5px);
  1290.     visibility: hidden;
  1291. }
  1292.  
  1293. [data-title] {
  1294.     position: relative;
  1295. }
  1296.  
  1297. [data-title-menu]:hover:before {
  1298.     opacity: 1;
  1299.     z-index: 100;
  1300.     visibility: visible;
  1301. }
  1302.  
  1303. [data-title-menu]:before {
  1304.     content: attr(data-title-menu);
  1305.     position: absolute;
  1306.     right: 40px;
  1307.     font-size: 10px;
  1308.     font-family: {select:Font Style Links};
  1309.     color: var(--text-color);
  1310.     background-color: var(--bg-color);
  1311.     white-space: nowrap;
  1312.     opacity: 0;
  1313.     line-height: 1.5;
  1314.     z-index: -1;
  1315.     transition: all 0.5s ease;
  1316.     border-radius: 5px;
  1317.     text-align: center;
  1318.     padding: 3px 5px;
  1319.     backdrop-filter: blur(5px);
  1320.     visibility: hidden;
  1321. }
  1322.  
  1323. [data-title-menu] {
  1324.     position: relative;
  1325. }
  1326.  
  1327. /*credit*/
  1328. #credit {
  1329.     position: fixed;
  1330.     bottom: 4px;
  1331.     left: 10px;
  1332.     font-size: 15px;
  1333.     display: flex;
  1334. }
  1335.  
  1336. [data-credit]:hover:after {
  1337.     opacity: 1;
  1338.     z-index: 101;
  1339.     visibility: visible;
  1340. }
  1341. [data-credit]:after {
  1342.     content: attr(data-credit);
  1343.     position: absolute;
  1344.     left: 30px;
  1345.     font-size: 10px;
  1346.     font-family: {select:Font Style Links};
  1347.     line-height: 1rem;
  1348.     color: var(--text-color);
  1349.     background-color: var(--bg-color);
  1350.     white-space: nowrap;
  1351.     opacity: 0;
  1352.     z-index: 100;
  1353.     transition: all 0.5s ease;
  1354.     border-radius: 5px;
  1355.     text-align: center;
  1356.     z-index: -30;
  1357.     padding: 2px 10px;
  1358.     backdrop-filter: blur(3px);
  1359.     visibility: hidden;
  1360. }
  1361.  
  1362. [data-credit] {
  1363.     position: relative;
  1364. }
  1365.  
  1366. /*about section*/
  1367.  
  1368. #modal_about {
  1369.     transition: 0.5s all ease;
  1370.     opacity: 0;
  1371.     visibility: hidden;
  1372.     z-index: -2;
  1373. }
  1374.  
  1375. .modal_backdrop {
  1376.     height: 100%;
  1377.     width: 100vw;
  1378.     position: fixed;
  1379.     z-index: 1000;
  1380.     top: 0;
  1381.     left: 0;
  1382.     backdrop-filter: blur(10px);
  1383.     background-color: var(--color-backdrop);
  1384.     transition: 1s all ease-in-out;
  1385.     display: flex;
  1386.     flex-direction: column;
  1387.     justify-content: center;
  1388.     align-items: center;
  1389. }
  1390.  
  1391. .about_info {
  1392.     background-color: var(--bg-color);
  1393.     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  1394.     border: 1px solid var(--border-color);
  1395.     border-radius: 10px;
  1396.     padding: 1.7rem;
  1397.     transition: 1s all ease;
  1398.     backdrop-filter: blur(2px);
  1399.     width: 650px;
  1400.     height: 450px;
  1401.     display: flex;
  1402.     opacity: 0;
  1403.     transform: translateY(-50vh);
  1404. }
  1405.  
  1406. .about_section {
  1407.     flex: 1;
  1408. }
  1409.  
  1410. .img-nav {
  1411.     width: 100%;
  1412.     object-fit: cover;
  1413.     height: 100%;
  1414.     padding-right: 1rem;
  1415. }
  1416.  
  1417. .description-nav {
  1418.     height: 380px;
  1419.     overflow: auto;
  1420.     padding-right: 5px;
  1421.     font-size: 12px;
  1422.     position: relative;
  1423.     text-align: center;
  1424.     line-height: 1;
  1425.     color: var(--text-color);
  1426. }
  1427.  
  1428. .description-nav h2,
  1429. .description-nav h3,
  1430. .description-nav h4,
  1431. .description-nav h5 {
  1432.     text-align: left;
  1433.     margin-bottom: 0.5rem;
  1434. }
  1435.  
  1436. .nav-links {
  1437.     display: flex;
  1438.     width: 100%;
  1439.     justify-content: flex-end;
  1440.     flex-wrap: wrap;
  1441.     background-image: linear-gradient(to left, var(--accent-color-2) 0%, transparent 100%);
  1442. }
  1443.  
  1444. .nav-links button {
  1445.     all: unset;
  1446.     text-align: center;
  1447.     text-decoration: none;
  1448.     font-size: 12px;
  1449.     margin: 2px 0px;
  1450.     font-family: 'Noto Sans JP', sans-serif;
  1451.     color: var(--border-color);
  1452.     display: block;
  1453.     padding: 8px;
  1454.     cursor: pointer;
  1455.     transition: 0.3s;
  1456. }
  1457.  
  1458. .modal_backdrop a:hover {
  1459.     color: var(--accent-color);
  1460.  
  1461. }
  1462.  
  1463. #close_modal {
  1464.     all: unset;
  1465.     color: #fff;
  1466.     position: absolute;
  1467.     top: 10px;
  1468.     right: 10px;
  1469.     font-size: 30px;
  1470.     -webkit-transition: .3s ease;
  1471.     transition: .3s ease;
  1472.     cursor: pointer;
  1473. }
  1474.  
  1475. #close_modal:hover {
  1476.     color: var(--accent-color);
  1477. }
  1478.  
  1479. .section {
  1480.     -webkit-transition: .3s all ease;
  1481.     transition: .3s all ease;
  1482.     opacity: 0;
  1483.     position: absolute;
  1484.     top: 0;
  1485.     visibility: hidden;
  1486. }
  1487.  
  1488.  
  1489. .active {
  1490.     opacity: 1;
  1491.     visibility: visible;
  1492. }
  1493.  
  1494. .stats_basic {
  1495.     display: flex;
  1496. }
  1497.  
  1498. .mini_description {
  1499.     backdrop-filter: blur(5px);
  1500.     font-size: 12px;
  1501.     padding: 10px;
  1502.     border-radius: 5px;
  1503.     letter-spacing: 1px;
  1504.     margin: 1rem 0px;
  1505.     height: 100%;
  1506.     max-height: 100px;
  1507.     overflow: auto;
  1508.     line-height: 1;
  1509.     transition: 0.3s all ease;
  1510. }
  1511.  
  1512. .stats_ul {
  1513.     padding-left: 0;
  1514.     width: 170px;
  1515.     margin-top: 1rem;
  1516. }
  1517.  
  1518. .mini_avi {
  1519.     margin: 1rem 10px 0px 10px;
  1520. }
  1521.  
  1522. .mini_avi img {
  1523.     width: 100px;
  1524.     height: 100px;
  1525.     border-radius: 50%;
  1526.     border: 1px var(--border-color) solid;
  1527.     padding: 3px;
  1528. }
  1529.  
  1530. .stats_ul span {
  1531.     letter-spacing: 1px;
  1532.     font-weight: bold;
  1533.     color: var(--accent-color);
  1534. }
  1535.  
  1536. .stats_ul li {
  1537.     list-style-type: none;
  1538.     margin-top: 5px;
  1539. }
  1540.  
  1541. .skills {
  1542.     display: flex;
  1543.     flex-wrap: wrap;
  1544.     justify-content: space-around;
  1545. }
  1546.  
  1547. .skill_progress {
  1548.     width: 100%;
  1549.     flex: 1;
  1550.     display: flex;
  1551.     flex-direction: column;
  1552.     justify-content: center;
  1553.     align-items: center;
  1554.     margin-bottom: 1.5em;
  1555. }
  1556.  
  1557. .skill_progress label {
  1558.     font-size: 10px;
  1559.     font-family: 'Noto Sans JP', sans-serif;
  1560.     letter-spacing: 1px;
  1561.     margin-top: 5px;
  1562. }
  1563.  
  1564. .skill_progress progress {
  1565.     height: 10px;
  1566.     width: 120px;
  1567.     border-radius: 10px;
  1568.     border: 1px var(--border-color) double;
  1569. }
  1570.  
  1571. .fullgamelabel {
  1572.     letter-spacing: 4px;
  1573. }
  1574.  
  1575. progress::-webkit-progress-bar {
  1576.     background-color: black;
  1577.     border-radius: 10px;
  1578. }
  1579.  
  1580. .skill1::-webkit-progress-value {
  1581.     background-color: var(--accent-color-2);
  1582.     background-image: linear-gradient(to left, var(--accent-color-2) 0%, var(--accent-color) 100%);
  1583.     border-radius: 10px;
  1584. }
  1585.  
  1586. .social_media {
  1587.     display: flex;
  1588.     justify-content: flex-end;
  1589.     flex-wrap: wrap;
  1590. }
  1591.  
  1592. .social_media a {
  1593.     margin: 0 10px;
  1594.     color: var(--text-color);
  1595.     transition: 0.3s all ease;
  1596. }
  1597.  
  1598. .social_media a:hover {
  1599.     color: var(--accent-color);
  1600. }
  1601.  
  1602. .tags_content {
  1603.     margin-top: 1rem;
  1604.     height: 340px;
  1605.     overflow: auto;
  1606. }
  1607.  
  1608. .tags_group {
  1609.     margin-bottom: 20px;
  1610.     width: 100%;
  1611. }
  1612.  
  1613. .tags_group h3 {
  1614.     color: var(--border-color);
  1615.     margin-bottom: 0.5rem;
  1616.     padding: 5px;
  1617.     letter-spacing: 2px;
  1618.     text-transform: uppercase;
  1619.     background-image: linear-gradient(to right, var(--accent-color) 0%, transparent 100%);
  1620. }
  1621.  
  1622. .tags_group .tags {
  1623.     display: flex;
  1624.     justify-content: flex-start;
  1625.     flex-wrap: wrap;
  1626.     padding-top: 0;
  1627.     /*border-left: 1px var(--border-color) solid;*/
  1628. }
  1629.  
  1630. .tags_group .tags a {
  1631.     padding: 5px 15px;
  1632.     /*border: 1px var(--border-color) solid;
  1633.     margin:-1px 0 0 -1px;*/
  1634.     width: 98px;
  1635.     color: var(--text-color);
  1636.     border-radius: 5px;
  1637.     text-decoration: none;
  1638.     transition: 0.3s all ease;
  1639.     text-overflow: ellipsis;
  1640.     font-family: {select:Font Style Links};
  1641. }
  1642.  
  1643. .tags_group .tags a:hover {
  1644.     color: var(--accent-color);
  1645.     letter-spacing: 0px;
  1646.     background-color: var(--bg-color);
  1647. }
  1648.  
  1649. .user-following, .following-container li {
  1650.     display: flex;
  1651.     align-items: center;
  1652.     width:-webkit-fill-available;
  1653. }
  1654.  
  1655. .following-container li img {
  1656.     border-radius: 10px;
  1657.     margin-right: 10px;
  1658.     width: 50px;
  1659.     height: 50px;
  1660.     object-fit: cover;
  1661. }
  1662.  
  1663. .following-container li {
  1664.     margin: 5px 5px 5px 0px;
  1665.     backdrop-filter: blur(5px);
  1666.     padding: 5px 10px 5px 5px;
  1667.     border-radius: 10px;
  1668.     transition: 0.3s all ease;
  1669.     word-break: break-word;
  1670. }
  1671.  
  1672. .following-container li:hover {
  1673.     background-color: var(--bg-color);
  1674. }
  1675.  
  1676. .following-container li a {
  1677.     word-break: break-word;
  1678.     font-size: 1.2em;
  1679.     font-family: {select:Font Style Links};
  1680. }
  1681.  
  1682. .following-container li a:hover {
  1683.     color: var(--accent-color);
  1684. }
  1685.  
  1686. .user-following {
  1687.     margin: 5px 0px;
  1688. }
  1689.  
  1690. #extra {
  1691.     margin-top: 1rem;
  1692. }
  1693.  
  1694. #extra p {
  1695.     margin-bottom: 0.5rem;
  1696. }
  1697.  
  1698. .extra_text {
  1699.     height: 340px;
  1700.     overflow: auto;
  1701.     padding-right: 5px;
  1702. }
  1703.  
  1704. .tmblr-full{
  1705.     text-align: center;
  1706. }
  1707.  
  1708. @media only screen and (max-width: 768px) {
  1709.     :root {
  1710.         --Post-Columns-Spacing:30px;
  1711.         --Post-Rows-Spacing:30px;
  1712.     }
  1713.  
  1714.     #posts_list {
  1715.         padding: 16px;
  1716.         width: 100%;
  1717.         transition: 0.5s all ease;
  1718.     }
  1719.  
  1720.     .layout_blog {
  1721.         display: flex;
  1722.         flex-direction: column;
  1723.         width: 100%;
  1724.     }
  1725.    
  1726.     .about {
  1727.         margin-top 30px;
  1728.         padding: 16px;
  1729.     }
  1730.    
  1731.     .about_blog {
  1732.         position: static;
  1733.         display: flex;
  1734.         flex-direction: column;
  1735.         justify-content: center;
  1736.         align-items: center;
  1737.         width: 100%;
  1738.         max-width: 100%;
  1739.         margin: 0 auto;
  1740.     }
  1741.    
  1742.     .about_avatar img {
  1743.         height: 250px;
  1744.         object-position: center;
  1745.     }
  1746.  
  1747.     header {
  1748.         width: 100%;
  1749.         display: flex;
  1750.         justify-content: flex-end;
  1751.     }
  1752.    
  1753.     #btn_open_menu_mobile {
  1754.         display: block;
  1755.         position: absolute;
  1756.         right: 0;
  1757.         top: 0;
  1758.         background-color: var(--border-color);
  1759.         border-radius: 10px;
  1760.         padding: 10px;
  1761.         font-size: 30px;
  1762.         line-height: 10px;
  1763.     }
  1764.  
  1765.     #btn_close_menu, #btn_mode_mobile {
  1766.         display: block;  
  1767.     }
  1768.  
  1769.     .navigation {
  1770.         height: 100%;
  1771.         font-size: 20px;
  1772.         width: 100%;
  1773.         position: fixed;
  1774.         top: 0;
  1775.         left: 0;
  1776.         padding: 40px 10px 0px 10px;
  1777.         transition: 0.5s;
  1778.         display: flex;
  1779.         flex-direction: column;
  1780.         justify-content: flex-start;
  1781.          border-radius: 10px;
  1782.         backdrop-filter: blur(50px);
  1783.         opacity: 0;
  1784.         visibility: hidden;
  1785.         z-index: -1;
  1786.     }
  1787.    
  1788.     .navigation .links {
  1789.         flex-direction: column;
  1790.         max-height: 100%;
  1791.     }
  1792.  
  1793.     .inputsearch {
  1794.         position: static;
  1795.         width: 90%;
  1796.     }
  1797.  
  1798.     .controls_tumblr {
  1799.         display: none;  
  1800.     }
  1801.  
  1802.     .btn_dark_mode_mobile {
  1803.         display: block;
  1804.     }
  1805.  
  1806.     .btn_dark_mode{
  1807.         display: none;
  1808.     }
  1809.  
  1810.     [data-title-menu]:after, [data-title]:after    {
  1811.         display: none;  
  1812.         width: 0px;
  1813.     }
  1814.    
  1815.      .controls, .controls:visited, .controls:active {
  1816.         height: auto;  
  1817.         font-size: 0.75rem;
  1818.     }
  1819.    
  1820.    
  1821.      .actions_btns .date {
  1822.         margin-right: 5px;
  1823.     }
  1824.    
  1825.     .actions_btns .notes_count {
  1826.         margin-right: 0px;
  1827.     }
  1828.    
  1829.     .actions_container {
  1830.         padding: 8px 0px;  
  1831.     }
  1832.    
  1833.     .post, .post-notes {
  1834.         max-width: 100%;
  1835.         margin-bottom: 30px;
  1836.         width: 100%;
  1837.         min-width: auto;
  1838.        
  1839.     }
  1840.    
  1841.      #about_cover {
  1842.         display: none;
  1843.     }
  1844.  
  1845.     .about_info {
  1846.         width: 95%;
  1847.     }
  1848.    
  1849.     footer p {
  1850.         padding: 0 20px;
  1851.     }
  1852.  
  1853. }
  1854.  
  1855. {CustomCSS}
  1856. </style>
  1857. </head>
  1858. <script>
  1859. //apply mode layout
  1860. $(document).ready(function(){
  1861. if(window.screen.width > 768){
  1862.     gridderyV2(".post", "--Post-Columns");
  1863. }
  1864. });
  1865. </script>
  1866.  
  1867. <body>
  1868.     <div id="loading">
  1869.         <div class="lds-dual-ring"></div>
  1870.     </div>
  1871.     <header>  
  1872.          <button type="button" class="btn_dark_mode btn_dark_mode_mobile"><i class="bi bi-moon-stars"></i></button>
  1873.     </header>
  1874.     <main>
  1875.     <article class="page_controls">
  1876.         <button type="button" data-title-menu="Controls" class="controls_tumblr"><i class="bi bi-gear"></i></button>
  1877.         <button type="button" data-title-menu="Mode" class="btn_dark_mode"><i class="bi bi-moon-stars"></i></button>
  1878.     </article>
  1879.     <article class="layout layout_blog">
  1880.     <section class="about">
  1881.             <div class="about_container about_blog">
  1882.             <div class="about_content">
  1883.                 <div class="title-container"><h1>{Title}</h1></div>
  1884.                 <span id="btn_open_menu_mobile" ><i class="bi bi-list"></i></span>
  1885.                 {block:DayPage} <h2 class="subtitle">Posts from {Month} {DayOfMonth}, {Year}</h2> {/block:DayPage}
  1886.                 {block:TagPage} <h2 class="subtitle">Posts tagged "{Tag}"</h2> {/block:TagPage}  
  1887.                 {block:SearchPage} <h2 class="subtitle">Search results for "{SearchQuery}"</h2> {/block:SearchPage}
  1888.                 <figure class="about_avatar">
  1889.                 <img alt="{Title} blog avatar" src="{image:Custom Avatar}" />
  1890.                 </figure>
  1891.                 <div class="description">
  1892.                     <p>
  1893.                     {block:Description}
  1894.                     {Description}
  1895.                     {/block:Description}
  1896.                     </p>
  1897.                  </div>
  1898.             </div>
  1899.          <nav class="navigation navigation_side">
  1900.             <span id="btn_close_menu"><i class="bi bi-x-lg"></i></span>
  1901.             <span id="btn_mode_mobile"><i class="bi bi-moon-stars"></i></span>
  1902.             <form action="/search" method="get">
  1903.                 <input type="text" autocomplete="off" class="inputsearch" name="q" value="{SearchQuery}" placeholder="Search..." />
  1904.             </form>
  1905.             <div class="links">
  1906.                 <a href="/" >Home</a>
  1907.                 <a href="/archive" >Archive</a>
  1908.                 {block:ifShowAboutSection}
  1909.                 <button id="open_modal" >About</button>
  1910.                 {/block:ifShowAboutSection}
  1911.                 {block:AskEnabled}
  1912.                 <a href="/ask" >Ask</a>
  1913.                 {/block:AskEnabled}
  1914.                 <a href="/random" >Random</a>
  1915.                 {block:SubmissionsEnabled}
  1916.                 <a href="/submit" >{SubmitLabel}</a>
  1917.                 {/block:SubmissionsEnabled}
  1918.                 {block:ifLink1}<a href="{text:Link 1 URL}" >{text:Link 1}</a>{/block:ifLink1}
  1919.                 {block:ifLink2}<a href="{text:Link 2 URL}" >{text:Link 2}</a>{/block:ifLink2}
  1920.                 {block:ifLink3}<a href="{text:Link 3 URL}" >{text:Link 3}</a>{/block:ifLink3}
  1921.                 {block:ifLink4}<a href="{text:Link 4 URL}" >{text:Link 4}</a>{/block:ifLink4}
  1922.                 {block:HasPages}
  1923.                 {block:Pages}
  1924.                 <a href="{URL}" title="{Label}" >{Label}</a>
  1925.                 {/block:Pages}
  1926.                 {/block:HasPages}
  1927.             </div>
  1928.         </nav>
  1929.         {block:Pagination}
  1930.         <div id="page-pagination" class="blog_pagination">
  1931.         {block:PreviousPage}
  1932.             <a href="{PreviousPage}" > Previous</a>
  1933.         {/block:PreviousPage}
  1934.         {block:JumpPagination length="5"}
  1935.         {block:CurrentPage}
  1936.             <span class="current-page">{PageNumber}</span>
  1937.         {/block:CurrentPage}
  1938.         {block:JumpPage}
  1939.             <a href="{URL}" >{PageNumber}</a>
  1940.         {/block:JumpPage}
  1941.         {/block:JumpPagination}
  1942.         {block:NextPage}
  1943.                 <a href="{NextPage}" > Next</a>
  1944.         {/block:NextPage}
  1945.         </div>
  1946.         {/block:Pagination}
  1947.         </div>
  1948.     </section>
  1949.     <article id="posts_list">
  1950.     {block:Posts}
  1951.     <section class="post {PostType}" id="{PostID}">
  1952.         <div class="post_content">
  1953.         {block:Text}
  1954.             {block:Title} <h3 class="post-title">{Title}</h3>
  1955.             {/block:Title}
  1956.             {block:NotReblog}{Body}{/block:NotReblog}
  1957.             {block:RebloggedFrom}
  1958.             {block:Reblogs}
  1959.             <div class="comment_container">
  1960.                 <div class="commenter source-head">
  1961.                     <img src="{PortraitURL-64}" />
  1962.                     <span>
  1963.                         {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}
  1964.                     </span>
  1965.                 </div>
  1966.                 <div class="comment">{Body}
  1967.                 </div>
  1968.             </div>
  1969.             {/block:Reblogs}
  1970.             {/block:RebloggedFrom}
  1971.         {/block:Text}
  1972.        
  1973.         {block:Photo}
  1974.         <figure class="post-image">
  1975.             <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  1976.         </figure>
  1977.         {/block:Photo}
  1978.        
  1979.         {block:Panorama}
  1980.             {LinkOpenTag}
  1981.             <div class="photoset-grid">
  1982.                 <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
  1983.             </div>{LinkCloseTag}
  1984.         {/block:Panorama}
  1985.  
  1986.         {block:Photoset}
  1987.             <div class="photoset-grid" photoset-layout="{PhotosetLayout}">
  1988.             {block:Photos}
  1989.             <div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)">
  1990.             <img src="{PhotoURL-HighRes}" />
  1991.             </div>{/block:Photos}
  1992.             </div>
  1993.         {/block:Photoset}
  1994.        
  1995.         {block:Quote}
  1996.         <p class="post-quote">{Quote}</p>
  1997.         <p class="quote-source">{block:Source}{Source}{/block:Source}</p>
  1998.         {/block:Quote}
  1999.        
  2000.         {block:Link}
  2001.          {block:Thumbnail}
  2002.        
  2003.         <div class="link-excerpt">
  2004.             <figure class="post-image">
  2005.                 <img src="{Thumbnail-HighRes}" />
  2006.             </figure>
  2007.             <p><a class="link-name" href="{URL}" {Target}>{Name}</a></p>
  2008.             {block:Excerpt}<p class="exceprt">{Excerpt}</p>{/block:Excerpt}
  2009.         </div>
  2010.         {/block:Thumbnail}
  2011.         <div class="no-thumb-exceprt">
  2012.             <p><a class="link-name" href="{URL}" {Target}>{Name}</a></p>
  2013.             {block:Excerpt}<p class="exceprt">{Excerpt}</p>{/block:Excerpt}
  2014.         </div>
  2015.         {block:Description}
  2016.         <div class="link-description">
  2017.             {block:NotReblog}{Description}{/block:NotReblog}
  2018.             {block:RebloggedFrom}
  2019.             {block:Reblogs}
  2020.             <div class="comment_container">
  2021.                 <div class="commenter">
  2022.                     <img src="{PortraitURL-64}" />
  2023.                     <span>
  2024.                         {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}
  2025.                     </span>
  2026.                 </div>
  2027.                 <div class="comment">{Body}</div>
  2028.             </div>
  2029.             {/block:Reblogs}
  2030.             {/block:RebloggedFrom}
  2031.         </div>
  2032.         {/block:Description}
  2033.         {/block:Link}
  2034.        
  2035.         {block:Chat}
  2036.             {block:Title}
  2037.             <h3 class="post-title">
  2038.                 {Title}
  2039.             </h3>
  2040.             {/block:Title}
  2041.             <div class="chat-full">
  2042.                 {block:Lines}
  2043.                 <div class="chat-line"><div class="label"> {block:Label}{Label}{/block:Label}</div><div class="chat-text"> {Line} </div></div>
  2044.                 {/block:Lines}
  2045.             </div>
  2046.         {/block:Chat}
  2047.        
  2048.         {block:Audio}
  2049.         {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  2050.         <div class="audio_wrapper"1>
  2051.         {block:AudioPlayer}
  2052.         {block:AlbumArt}
  2053.         <figure class="post-image">
  2054.            <img src="{AlbumArtURL}" />
  2055.         </figure>
  2056.         {/block:AlbumArt}
  2057.         {AudioPlayer}
  2058.         <div class="full-audio-player">
  2059.             <div class="audio_info">
  2060.                 {block:TrackName}<p class="track">{audio:AudioButtons} {TrackName}</p>{/block:TrackName}
  2061.                 {block:Artist}<p class="artist">{Artist}</p>{/block:Artist}
  2062.                 {block:Album}<p class="album">{Album}</p>{/block:Album}
  2063.             </div>
  2064.         </div>
  2065.         {/block:AudioPlayer}
  2066.         </div>
  2067.         {/block:Audio}
  2068.        
  2069.         {block:Video}{VideoEmbed-500}{/block:Video}
  2070.        
  2071.         {block:Answer}
  2072.         <div class="question_container">
  2073.             <div class="asker">
  2074.                 <img src="{AskerPortraitURL-48}" class="answer-avatar"/>
  2075.                 {Asker}
  2076.             </div>
  2077.             <div class="question_text">{Question}</div>
  2078.         </div>
  2079.         {block:Answerer}
  2080.         <div class="answer_container">
  2081.             <div class="answerer">
  2082.                 <img src="{AnswererPortraitURL-48}" class="answer-avatar"/>
  2083.                 {Answerer}
  2084.             </div>
  2085.             <div class="answer_text">{Answer}</div>
  2086.         </div>
  2087.         {block:Reblogs}
  2088.         <div class="reply_container">
  2089.             <div class="replier">
  2090.                 <img src="{PortraitURL-64}" class="answer-avatar" />
  2091.                 {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a> {/block:HasPermalink}
  2092.             </div>
  2093.             <div class="reply">{Body}</div>
  2094.         </div>
  2095.         {/block:Reblogs}
  2096.         {/block:Answerer}
  2097.         {block:NotReblog}
  2098.         <div class="answer_container">
  2099.             <div class="answerer">
  2100.                 <img src="{PortraitURL-48}" class="answer-avatar"/>
  2101.                 <a href="{Permalink}">{Name}</a>
  2102.             </div>
  2103.             <div class="answer_text">{Answer}</div>
  2104.         </div>
  2105.         {/block:NotReblog}
  2106.         {/block:Answer}
  2107.        
  2108.     </div>
  2109.    
  2110.     <!--Captions-->
  2111.     <div class="post-caption">
  2112.         <div class="caption">
  2113.             {block:Caption}
  2114.             {block:NotReblog}{Caption}{/block:NotReblog}
  2115.             {block:RebloggedFrom}
  2116.             {block:Reblogs}
  2117.             <div class="comment_container">
  2118.                 <div class="commenter">
  2119.                     <img src="{PortraitURL-64}" />
  2120.                     <span>
  2121.                         {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}
  2122.                     </span>
  2123.                 </div>
  2124.                 <div class="comment">{Body}
  2125.                 </div>
  2126.             </div>
  2127.             {/block:Reblogs}
  2128.             {/block:RebloggedFrom}
  2129.             {/block:Caption}
  2130.    
  2131.             {block:RebloggedFrom}
  2132.             <div class="vias">
  2133.                 <div class="via" data-title="Reblogged via">
  2134.                 <a href="{ReblogParentURL}"><i class="bi bi-arrow-repeat"></i> {ReblogParentName}</a>
  2135.                 </div>
  2136.                 {block:ContentSource}
  2137.                 <div class="source">
  2138.                     <a href="{SourceURL}"><i class="bi bi-link-45deg"></i> source</a>
  2139.                 </div>
  2140.                 {/block:ContentSource}
  2141.                 <div class="originally" data-title="Originally posted by">
  2142.                     <a  href="{ReblogRootURL}"><i class="bi bi-emoji-smile"></i> {ReblogRootName}</a>
  2143.                 </div>
  2144.             </div>
  2145.             {/block:RebloggedFrom}
  2146.         </div>
  2147.     </div>
  2148.    <!--actions-->
  2149.    {block:Date}
  2150.    <div class="actions_container">
  2151.         <div class="actions">
  2152.             <div class="actions_btns">
  2153.                 <a class="controls date" href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}"><i class="bi bi-clock"></i> {Month} {DayOfMonth}, {Year}</a>
  2154.                 <a href="{Permalink}" class="controls notes_count"><i class="bi bi-stars"></i>{NoteCountWithLabel}</a>
  2155.             </div>
  2156.             <div class="actions_btns">
  2157.                 <div class="post-like controls" >
  2158.                     <a href="#" class="like">{LikeButton}
  2159.                         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1"  x="0px" y="0px" viewBox="0 0 442.403 442.403"  style="enable-background:new 0 0 442.403 442.403;" xml:space="preserve"><g><g><path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95    c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1    c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1    c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z     M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4    c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5    c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767    c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45    c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z"/></g></g></svg>
  2160.                     </a>
  2161.                 </div>
  2162.                 <div class="post-reblog controls" >
  2163.                     <a href="{ReblogURL}" target="_blank" class="reblog">
  2164.                         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1"  x="0px" y="0px" viewBox="0 0 361.095 361.095"  style="enable-background:new 0 0 361.095 361.095;" xml:space="preserve"><g><g><path d="M182.595,325.678c-63.183,0-120.133-42.217-138.267-102.567c-2.833-9.067-12.183-14.167-21.25-11.333    c-9.067,2.833-14.167,12.183-11.333,21.25c22.95,75.933,91.517,126.65,170.85,126.65c98.317,0,178.5-80.183,178.5-178.5    s-80.183-178.5-178.5-178.5c-55.817,0-108.233,26.633-141.667,69.7l-7.083-56.1c-1.133-9.35-9.633-15.867-18.983-14.733    C5.511,2.678-1.005,11.178,0.128,20.528l13.317,103.7c1.133,8.5,8.5,14.733,16.717,14.733c0.567,0,1.417,0,1.983,0l102.567-11.617    c9.35-1.133,16.15-9.35,15.017-18.7s-9.35-16.15-18.7-15.017l-68.85,7.65c26.633-39.95,71.683-64.6,120.417-64.6    c79.617,0,144.5,64.883,144.5,144.5S262.211,325.678,182.595,325.678z"/></g></g></svg>
  2165.                     </a>
  2166.                 </div>
  2167.             </div>
  2168.         </div>
  2169.     </div>
  2170.     {/block:Date}
  2171.  
  2172. <!--tags-->
  2173.    {block:IfShowTags}
  2174.     <div class="maintags">
  2175.           {block:HasTags}
  2176.                 <ul class="tags">
  2177.                     {block:Tags}
  2178.                         <li>
  2179.                             <a href="{TagURL}">{Tag}</a>
  2180.                         </li>
  2181.                     {/block:Tags}
  2182.                 </ul>
  2183.             {/block:HasTags}
  2184.       </div>
  2185.     {/block:IfShowTags}
  2186.     </section>
  2187.     <!--Permalink Notes--->
  2188.     {block:PermalinkPage}    
  2189.     {block:NoteCount}
  2190.      <div class="post-notes">
  2191.             {block:PostNotes}
  2192.             <div class="notes">
  2193.                 {PostNotes-64}
  2194.             </div>
  2195.             {/block:PostNotes}
  2196.         </div>
  2197.     {/block:NoteCount}
  2198.     {/block:PermalinkPage}  
  2199.    
  2200.     {/block:Posts}
  2201.            
  2202.     <!--Pagination-->
  2203.     {block:Pagination}
  2204.     <div id="page-pagination" class="mobile_pagination">
  2205.     {block:PreviousPage}
  2206.         <a href="{PreviousPage}"> Previous</a>
  2207.     {/block:PreviousPage}
  2208.         {block:JumpPagination length="5"}
  2209.             {block:CurrentPage}
  2210.         <span class="current-page">{PageNumber}</span>
  2211.             {/block:CurrentPage}
  2212.             {block:JumpPage}
  2213.         <a href="{URL}" >{PageNumber}</a>
  2214.             {/block:JumpPage}
  2215.         {/block:JumpPagination}
  2216.     {block:NextPage}
  2217.         <a href="{NextPage}"> Next</a>
  2218.     {/block:NextPage}
  2219.     </div>
  2220.     {/block:Pagination}
  2221.     </article>
  2222.     </article>
  2223.     {block:ifShowAboutSection}
  2224.     <div id="modal_about" class="modal_backdrop">
  2225.         <button id="close_modal"><i class="bi bi-x-lg"></i></button>
  2226.         <div class="about_info">
  2227.             <div class="about_section" id="about_cover">
  2228.                 <img class="img-nav" src="{image:About Section Cover}" />
  2229.             </div>
  2230.             <div class="about_section">
  2231.                 <div class="nav-links">
  2232.                     <button class="about_link" data-section="#about">About</button>
  2233.                     {block:ifTagsList}
  2234.                     <button class="about_link" data-section="#tags">Tags</button>
  2235.                     {/block:ifTagsList}
  2236.                     {block:ifShowFollowing}
  2237.                     <button class="about_link" data-section="#blogroll">BlogRoll</button>
  2238.                     {/block:ifShowFollowing}
  2239.                     {block:ifExtraText}
  2240.                     <button class="about_link" data-section="#extra">Extra</button>
  2241.                     {/block:ifExtraText}
  2242.                 </div>
  2243.                 <div class="description-nav">
  2244.                     <div id="about" class="section active">
  2245.                         <div class="stats_basic">
  2246.                             <ul class="stats_ul">
  2247.                             {block:ifAboutName}
  2248.                                 <li>
  2249.                                     <span>Name:</span>
  2250.                                     {text:About Name}
  2251.                                 </li>
  2252.                             {/block:ifAboutName}
  2253.                             {block:ifAboutAge}
  2254.                                 <li>
  2255.                                     <span>Age:</span>
  2256.                                     {text:About Age}
  2257.                                 </li>
  2258.                             {/block:ifAboutAge}
  2259.                             {block:ifAboutZodiac}
  2260.                                 <li>
  2261.                                     <span>Zodiac:</span>
  2262.                                     {text:About Zodiac}
  2263.                                 </li>
  2264.                              {/block:ifAboutZodiac}
  2265.                              {block:ifAboutLocation}
  2266.                                 <li>
  2267.                                     <span>Location:</span>
  2268.                                     {text:About Location}
  2269.                                 </li>
  2270.                             {/block:ifAboutLocation}
  2271.                             {block:ifAboutOccupation}
  2272.                                 <li>
  2273.                                     <span>Occupation:</span>
  2274.                                     {text:About Occupation}
  2275.                                 </li>
  2276.                              {/block:ifAboutOccupation}
  2277.                              {block:ifAboutPronouns}
  2278.                                 <li>
  2279.                                     <span>Pronouns:</span>
  2280.                                     {text:About Pronouns}
  2281.                                 </li>
  2282.                             {/block:ifAboutPronouns}
  2283.                             </ul>
  2284.                             <figure class="mini_avi">
  2285.                                 <img src="{image:About Section Avatar}" />
  2286.                             </figure>
  2287.                         </div>
  2288.                         {block:ifAboutDescription}
  2289.                         <div class="mini_description">
  2290.                             <p>
  2291.                                 {text:About Description}
  2292.                             </p>
  2293.                         </div>
  2294.                          {/block:ifAboutDescription}
  2295.                         <div class="skills">
  2296.                         {block:ifAboutSkill1Label}
  2297.                             <div class="skill_progress">
  2298.                                 <progress id="skill1" class="skills skill1" value="{text:About Skill 1 Total}" max="100"> {text:About Skill 1 Total}% </progress>
  2299.                                 <label for="skill1">{text:About Skill 1 Label}</label>
  2300.                             </div>
  2301.                         {/block:ifAboutSkill1Label}
  2302.                         {block:ifAboutSkill2Label}
  2303.                             <div class="skill_progress">
  2304.                                 <progress id="skill1" class="skills skill1" value="{text:About Skill 2 Total}" max="100"> {text:About Skill 2 Total}% </progress>
  2305.                                 <label for="skill1">{text:About Skill 2 Label}</label>
  2306.                             </div>
  2307.                         {/block:ifAboutSkill2Label}
  2308.                         {block:ifAboutSkill3Label}
  2309.                             <div class="skill_progress">
  2310.                                 <progress id="skill1" class="skills skill1" value="{text:About Skill 3 Total}" max="100"> {text:About Skill 3 Total}% </progress>
  2311.                                 <label for="skill1">{text:About Skill 3 Label}</label>
  2312.                             </div>
  2313.                         {/block:ifAboutSkill3Label}
  2314.                         {block:ifAboutSkill4Label}
  2315.                             <div class="skill_progress">
  2316.                                 <progress id="skill1" class="skills skill1" value="{text:About Skill 4 Total}" max="100"> {text:About Skill 4 Total}% </progress>
  2317.                                 <label for="skill1">{text:About Skill 4 Label}</label>
  2318.                             </div>
  2319.                         {/block:ifAboutSkill4Label}
  2320.                         </div>
  2321.                         <div class="social_media">
  2322.                             {block:ifWebsiteURL}
  2323.                             <a href="{text:Website URL}" target="_blank" aria-label="user's website"><i class="bi bi-globe2"></i></a>
  2324.                             {/block:ifWebsiteURL}
  2325.                             {block:ifTwitterURL}
  2326.                             <a href="{text:Twitter URL}" target="_blank" aria-label="user's twitter"><i class="bi bi-twitter"></i></a>
  2327.                             {/block:ifTwitterURL}
  2328.                             {block:ifInstagramURL}
  2329.                             <a href="{text:Instagram URL}" target="_blank" aria-label="user's instagram"><i class="bi bi-instagram"></i></a>
  2330.                             {/block:ifInstagramURL}
  2331.                             {block:ifShopURL}
  2332.                             <a href="{text:Shop URL}" target="_blank" aria-label="user's shop"><i class="bi bi-bag"></i></a>
  2333.                             {/block:ifShopURL}
  2334.                             {block:ifSpotifyURL}
  2335.                             <a href="{text:Spotify URL}" target="_blank" aria-label="user's spotify"><i class="bi bi-spotify"></i></a>
  2336.                             {/block:ifSpotifyURL}
  2337.                             {block:ifTwitchURL}
  2338.                             <a href="{text:Twitch URL}" target="_blank" aria-label="user's twitch" ><i class="bi bi-twitch"></i></a>
  2339.                             {/block:ifTwitchURL}
  2340.                             {block:ifFacebookURL}
  2341.                             <a href="{text:Facebook URL}" target="_blank" aria-label="user's facebook page"><i class="bi bi-facebook"></i></a>
  2342.                             {/block:ifFacebookURL}
  2343.                         </div>
  2344.                     </div>
  2345.                     {block:ifTagsList}
  2346.                     <div id="tags" class="section">
  2347.                         <div class="tags_content">
  2348.                            
  2349.                         </div>
  2350.                     </div>
  2351.                     {/block:ifTagsList}
  2352.                     {block:IfShowFollowing}
  2353.                     <div id="blogroll" class="section">
  2354.                         <div class="tags_content">
  2355.                           <div class="following-container">
  2356.                             {block:Following}
  2357.                         <ul class="followings">{block:Followed}
  2358.                                 <li>
  2359.                                     <a href="{FollowedURL}" target="_blank"><img src="{FollowedPortraitURL-48}"/></a>
  2360.                                     <p>
  2361.                                         <a href="{FollowedURL}" target="_blank">{FollowedName}</a><br/>
  2362.                                         {FollowedTitle}
  2363.                                     </p>
  2364.                                 </li>{/block:Followed}
  2365.                         </ul>{/block:Following}
  2366.                           </div>
  2367.                         </div>
  2368.                     </div>
  2369.                     {/block:IfShowFollowing}
  2370.                     {block:ifExtraText}
  2371.                     <div id="extra" class="section">
  2372.                         <div class="extra_text">
  2373.                         {text:Extra Text}
  2374.                         </div>
  2375.                     </div>
  2376.                     {/block:ifExtraText}
  2377.                 </div>
  2378.             </div>
  2379.         </div>
  2380.     </div>
  2381.     {/block:ifShowAboutSection}
  2382. </main>
  2383. <footer>
  2384.     <p>Theme <b>Glazed</b> by <a target="_blank" title="or Palemomos Themes" href="https://themesbypale.tumblr.com">Themes by Pale. </a> Powered by Tumblr.</p>
  2385. </footer>
  2386. <button id="top_button" data-title-menu="Go Top"><i class="bi bi-chevron-up"></i></button>
  2387.  <!--CREDITS DO NOT REMOVE-->
  2388. <a href="https://themesbypale.tumblr.com" target="_blank" data-credit="by Palemomos" id="credit">
  2389. <svg version="1.1" id="Layer_1" width="24" fill="{color:Accent Color}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  2390.     viewBox="471.3518 2.2063 1944.5809 1704.2247" enable-background="new 471.3518 2.2063 1944.5809 1704.2247" xml:space="preserve"
  2391.    >
  2392. <path d="M2350.2393,158.1748c-5.0859-23.5078-13.5498-43.4277-25.1553-59.2065c-11.9902-16.4072-29.2705-29.2495-48.6563-36.1616
  2393.    c-15.0801-5.4404-32.3848-8.1992-51.4355-8.1992c-6.1221,0-12.5791,0.2832-19.1895,0.8408
  2394.    c-25.5352,2.2466-52.3076,8.1172-81.8467,17.9473c-54.3477,18.1973-105.7998,45.5605-155.5586,72.0234l-0.6504,0.3452
  2395.    c-14.5254,7.8628-29.3789,15.6899-43.7422,23.2588c-13.6504,7.1934-27.7656,14.6313-41.5742,22.0864
  2396.    c-44.5957,24.2129-95.7031,53.3179-137.8369,92.4028c-17.127,16.0908-34.0918,33.812-50.4238,52.6719
  2397.    c-15.3037,17.6709-30.5391,36.9063-45.2852,57.1714c-24.4414,33.7764-48.4004,71.3877-73.2441,114.9839
  2398.    c-23.6133,41.436-45.6328,84.1299-64.0586,120.4272c-10.3027,19.3867-22.7822,41.5537-40.5703,59.396
  2399.    c0.8525-4.8379,1.8809-9.7524,2.877-14.5078c3.0215-14.4365,6.1465-29.3638,4.8438-44.397
  2400.    c-0.6768-9.0459-3.583-18.4917-8.6357-28.0737c20.5898-40.6646,38.7676-83.2778,56.3457-124.4883
  2401.    c7.1523-16.7656,14.5469-34.1025,22.001-51.0654c1.5869-3.5103,3.1572-7.105,4.6768-10.5811
  2402.    c5.3535-12.2534,10.8906-24.9243,18.2031-36.4033c0.3105-0.5166,0.6221-1.0332,0.9346-1.5518
  2403.    c5.8037-9.6338,11.8066-19.5957,13.3545-30.9258c1.0625-7.8403-2.1885-16.0889-8.6943-22.0645l-0.0791-0.0728l-0.0459,0.0967
  2404.    c-1.918,3.9541-3.4395,8.1577-4.9111,12.2231c-0.9844,2.7183-2.002,5.5288-3.1289,8.2422
  2405.    c-15.8262,40.9468-34.5029,81.4624-52.5654,120.644c-10.834,23.502-22.0371,47.8047-32.5068,71.9448
  2406.    c-3.4043,7.4473-5.5391,15.4966-7.6025,23.2808c-2.6201,9.8804-5.3291,20.0972-10.6592,29.1333
  2407.    c-4.9033,8.2275-12.1152,13.6611-19.7734,14.9067c-8.5977-0.0859-17.3008-5.0801-22.7139-13.0347
  2408.    c-6.2295-8.9292-9.6709-19.3413-12.999-29.4102c-2.0586-6.2271-4.1865-12.666-6.9541-18.6978
  2409.    c-7.3799-16.1133-14.9902-32.2197-22.1514-47.3359c-9.6396-20.2764-18.4414-42.106-26.9102-66.7373
  2410.    c-0.874-2.4512-1.7441-4.9082-2.6162-7.3682c-11.7559-33.1763-23.9121-67.4814-45.9424-95.7476l-0.0381-0.0488l-3.6387,1.5884
  2411.    l0.0166,0.0654c8.835,35.1567,22.3691,68.4751,35.6777,99.2441c8.9922,20.5425,18.6074,41.228,27.9063,61.2324
  2412.    c17.6846,38.0454,35.9707,77.3838,50.75,117.4229c-0.7305,1.5615-1.7021,3.0288-2.6426,4.4487
  2413.    c-1.2285,1.8545-2.498,3.7725-3.251,5.9248c-5.042,11.5771-3.293,24.6938-0.6514,37.1421c0.4375,2.3374,0.9561,4.7344,1.4561,7.0527
  2414.    c2.0361,9.4302,4.1416,19.1787,1.8809,28.7524c-33.9092-66.793-71.2285-137.8452-114.3154-204.9683
  2415.    c-19.3433-30.2349-39.3203-58.9014-59.376-85.2031c-21.625-28.3604-44.1646-55.0542-66.9927-79.3408
  2416.    c-28.8398-30.9521-56.8179-56.3301-85.5317-77.584c-35.354-26.498-75.3115-51.4966-129.5596-81.0542
  2417.    c-31.7109-17.1323-73.6396-39.2295-116.7612-58.1982c-22.3022-9.752-42.1411-17.5908-60.6499-23.9639
  2418.    c-22.1597-7.6304-42.709-13.2979-62.8228-17.3262c-21.8486-4.2651-45.0933-6.6597-69.0908-7.1167
  2419.    c-0.311-0.0015-0.6201-0.002-0.9321-0.002c-28.9321,0-50.7749,5.9492-66.7803,18.1919
  2420.    c-15.7275,13.6499-24.4761,33.1108-30.959,50.3477c-10.3413,28.3667-16.4009,60.1602-18.0098,94.4966
  2421.    c-1.1167,26.4624,0.6426,49.9043,5.3789,71.667c4.29,18.25,14.7974,33.8462,24.9585,48.9287
  2422.    c5.0684,7.5234,10.3091,15.3027,14.7065,23.3086c6.6934,11.2808,12.0396,24.5859,16.8242,41.873
  2423.    c12.2256,43.5132,18.8901,88.8931,25.3354,132.7793c4.9189,33.4922,10.0049,68.125,17.5288,101.707
  2424.    c4.1021,17.48,7.8672,30.6494,12.21,42.7002c5.5176,15.3115,11.8672,28.3384,19.4111,39.8247
  2425.    c9.6987,14.7964,23.6729,27.4766,40.4111,36.6689c10.2441,5.6792,21.4897,10.3193,34.3784,14.1841
  2426.    c10.6709,3.1997,22.5586,5.8735,36.3438,8.1743c22.6772,3.6455,44.9233,5.375,63.6938,6.5864
  2427.    c10.6289,0.6846,21.4512,1.2778,31.9175,1.8521c37.1606,2.0386,75.5864,4.146,112.8901,10.7246
  2428.    c1.4868,0.3008,2.9204,0.7891,4.2539,1.2803c-14.9653,9.6694-30.3306,19.2642-45.1909,28.5425
  2429.    c-25.9873,16.2266-52.8599,33.0049-78.4834,50.748c-49.8862,34.415-86.2549,66.5361-114.4541,101.0869
  2430.    c-9.0757,11.3945-18.5684,23.6289-26.1191,36.8994l-0.0103,0.0371c-0.5259,25.6689,0.8984,52.9834,4.6177,88.5654
  2431.    c8.0811,73.7803,24.8901,144.8701,44.4019,223.5l0.0596,0.2383c13.9409,55.9063,28.3564,113.7148,49.1631,168.5039
  2432.    c13.3545,34.6582,26.8882,61.7236,42.5913,85.1758c10.0024,15.5156,23.2017,29.7412,39.2314,42.2842
  2433.    c16.8862,13.0586,32.5259,21.6113,47.8125,26.1465c6.835,2.0918,14.311,3.1094,22.855,3.1094c3.5269,0,7.1772-0.1709,11.1616-0.5234
  2434.    c21.8872-2.2988,44.8008-10.1045,68.1035-23.2002c24.9331-13.6406,48.1831-32.1807,69.105-55.1074
  2435.    c28.334-30.9473,54.0771-67.9551,81.0151-116.4658c20.7251-37.4854,39.6768-77.7021,57.9375-122.9512
  2436.    c14.8291-36.3301,28.2808-76.001,39.981-117.9111c5.1533-18.1279,10.1104-36.6396,14.9053-54.542
  2437.    c7.9951-29.8555,16.2627-60.7275,25.6777-90.7256c11.5605-36.293,26.5693-78.5039,50.2441-116.4629
  2438.    c5.377,21.6592,5.1572,44.3838,4.9443,66.3613c-0.0264,2.7139-0.0527,5.5195-0.0693,8.2715
  2439.    c-0.0869,6.1318-0.2324,12.3721-0.374,18.4053c-0.457,19.6016-0.9307,39.8701,0.5156,59.7686
  2440.    c0.9727,12.3574,2.7109,26.7617,8.2344,39.8945c4.0742,9.4707,10.4941,16.6172,18.0752,20.1221
  2441.    c4.7041,2.1475,9.917,3.2363,15.4941,3.2354c5.668,0,11.5469-1.1631,17.002-3.3633c12.5488-5.4863,18.2793-17.9756,20.5781-24.9316
  2442.    c5.0498-15.2383,5.749-31.8193,6.0088-46.165c0.1904-13.6318-0.2939-27.4805-0.7627-40.874
  2443.    c-0.5215-14.915-1.0615-30.3379-0.6699-45.5166c0.6563-18.623,1.9805-38.25,10.1318-55.5693
  2444.    c22.084,52.7959,40.1777,108.1182,57.6758,161.6201l0.6729,2.0596c2.8291,8.7461,5.6973,17.6426,8.4707,26.2451
  2445.    c16.3584,50.7441,33.2734,103.2148,51.6631,154.2188c17.9072,49.3896,42.8193,113.9736,76.8096,175.5195
  2446.    c13.4717,24.1338,26.7568,45.0098,40.6143,63.8213c16.0273,21.7559,32.4229,40.2529,50.125,56.5488
  2447.    c17.0498,15.7676,37.9014,29.4297,61.9756,40.6074c21.2051,9.5391,40.5586,15.0967,59.166,16.9883
  2448.    c3.9473,0.4307,7.9014,0.6484,11.752,0.6484c12.2598,0,23.6582-2.1563,33.875-6.4072
  2449.    c19.0557-7.6611,36.6582-21.6729,53.8145-42.8379c12.5576-15.5303,24.0381-33.7998,36.1299-57.4951
  2450.    c21.0088-41.7197,35.8262-85.2529,47.5498-122.335c16.2588-52.6182,27.623-93.4473,36.8486-132.3838
  2451.    c21.4863-89.7715,33.9941-182.7197,37.1748-276.2617l0.001-0.0244l-0.0127-0.0205c-11.1748-18.1592-24.5527-36.1035-39.7627-53.3359
  2452.    c-14.0342-15.9014-30.001-31.6182-47.458-46.7148c-22.6221-19.3086-43.3945-34.6543-63.5039-46.9131
  2453.    c-10.4434-6.4893-21.2783-12.8047-31.7559-18.9121c-28.416-16.5625-57.7939-33.6855-82.6816-56.1895
  2454.    c18.4287-1.269,37.1934-2.0679,55.3438-2.8413c12.7813-0.5439,25.998-1.1069,38.9863-1.8291
  2455.    c49.9268-2.7495,94.8408-5.834,138.9316-15.7734c22.2012-5.3218,47.7305-12.8594,68.7461-28.4106
  2456.    c14.168-10.6758,25.3633-26.5273,35.2295-49.8853c10.4902-24.9985,16.7471-50.9946,22.752-77.6509
  2457.    c1.0508-4.96,2.1338-10.0005,3.1807-14.8745c3.0508-14.1953,6.2051-28.8735,8.9424-43.3818
  2458.    c3.292-18.0894,5.8711-36.6016,8.3652-54.5044c1.3828-9.9302,2.8135-20.1982,4.3496-30.2749
  2459.    c6.4824-42.0781,13.8389-82.8955,32.4092-119.6919c3.7393-7.5576,7.7939-15.127,11.7148-22.4468
  2460.    c7.6152-14.2173,15.4893-28.9185,21.4316-44.2378c7.7041-19.7031,11.7393-39.313,11.9951-58.2852
  2461.    C2356.8828,203.1455,2354.8281,179.4941,2350.2393,158.1748z"/>
  2462. </svg>
  2463. </a>
  2464. <script>
  2465. const audioSettings = {
  2466.     post: ".post",
  2467.     default: false,
  2468.     pauseAll: true,
  2469.     playButton: '<i class="bi bi-play-circle"></i>',
  2470.     pauseButton: '<i class="bi bi-pause-circle"></i>',
  2471.     errorIcon: '<i class="bi bi-x-circle"></i>',
  2472.     hideInfoIfError: true,
  2473.     callAfterLoad: null
  2474. };
  2475. $(document).ready(function(){
  2476.     //cssphotosets
  2477.     initPhotosets();
  2478.     //transparent accent color
  2479.     //credits: https://stackoverflow.com/questions/21646738/convert-hex-to-rgba
  2480.     var c;
  2481.     var hex = '{color:Accent Color}';
  2482.     c= hex.substring(1).split('');
  2483.     if(c.length== 3){
  2484.         c= [c[0], c[0], c[1], c[1], c[2], c[2]];
  2485.     }
  2486.     c= '0x'+c.join('');
  2487.     var rgba = 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',0.6)';
  2488.     document.documentElement.style.setProperty('--accent-color-2', rgba);
  2489.    
  2490.     //show captions on permalink page
  2491.     {block:PermalinkPage}
  2492.     $(".caption").css("display", "block");
  2493.     {/block:PermalinkPage}
  2494.    
  2495.     //toggle controls
  2496.     $('.controls_tumblr').click(function(){
  2497.         $(".iframe-controls--desktop").toggle( "slow" )
  2498.     });
  2499.    
  2500.     //mobile nav
  2501.     var showMenu = false;
  2502.     $('#btn_open_menu_mobile, #btn_close_menu').click(function(){
  2503.         showMenu = !showMenu;
  2504.         if(showMenu){
  2505.             $(".navigation").css({"visibility":"visible","opacity":"1","z-index":"10" });        
  2506.             $(".about_content").css("opacity", "0");
  2507.         } else {
  2508.             $(".navigation").css({"visibility":"hiden","opacity":"0","z-index":"-1" });
  2509.             $(".about_content").css("opacity", "1");
  2510.         }  
  2511.     });
  2512.    
  2513.     //about section
  2514.     {block:ifShowAboutSection}
  2515.     var showModal = false;
  2516.     $('#open_modal, #close_modal').click(function () {
  2517.         showModal = !showModal;
  2518.         if (showModal) {
  2519.             $("#modal_about").css({"visibility":"visible","opacity":"1","z-index":"20"});
  2520.             $(".about_info").css({"transform":"translateY(0px)","opacity":"1"});
  2521.             $("#posts_list, .about").css("opacity",0);
  2522.             setTimeout(function(){
  2523.                 $("html").css("overflow", "hidden");
  2524.             }, 1000);
  2525.         } else {
  2526.             $("html").css("overflow", "auto");
  2527.             $("#modal_about").css({"visibility":"hidden","opacity":"0","z-index":"-2"});
  2528.             $(".about_info").css({"transform":"translateY(-50vh)","opacity":"0"});
  2529.             $("#posts_list, .about").css("opacity",1);
  2530.         }
  2531.     });
  2532.     //change sections
  2533.     $('.about_link').click(function () {
  2534.         let clas = $(this).attr("data-section");
  2535.         $(".section").removeClass("active");
  2536.         $(clas).addClass("active");
  2537.     });
  2538.     {/block:ifShowAboutSection}    
  2539.    
  2540.     //print tags about modal
  2541.     {block:ifTagsList}
  2542.     let matrix = [{text:Tags List}];
  2543.     for(let i=0; i<matrix.length; i++){
  2544.        $(".tags_content").append('<div class="tags_group"></div>');
  2545.         for(let j=0; j<matrix[i].length; j++){
  2546.            if(j===0){
  2547.                $(".tags_group").eq(i).append('<h3>'+matrix[i][0]+'</h3><div class="tags"></div>');
  2548.             } else {
  2549.                 let parsed_tag = matrix[i][j].replace(" ", "%20");
  2550.                 $(".tags_group .tags").eq(i).append('<a href="/tagged/'+parsed_tag+'" taget="_blank">'+matrix[i][j]+'</a>');
  2551.             }
  2552.         }
  2553.     }
  2554.     {/block:ifTagsList}
  2555.        
  2556.     //custom audio
  2557.     customAudio(audioSettings);
  2558.     let audios = $(".audio-caption");
  2559.    
  2560.     for (let i = 0; i<audios.length; i++) {
  2561.        let idPost = audios[i].closest('section').id;
  2562.        let currentAudioPost = document.getElementById(idPost);
  2563.        let details = $(currentAudioPost).find('.title');
  2564.        details[0].innerHTML =  '<button id="btn_play_'+idPost+'" class="play_npf_audio" onclick="playbtn(\''+idPost+'\')"><i class="bi bi-play-circle"></i></button>' + details[0].innerHTML;
  2565.         let wrapper = audios[i].closest('figure');
  2566.     }
  2567.  
  2568.     //dark mode
  2569.     if (theme === 'dark') {
  2570.         $(".btn_dark_mode").html('<i class="bi bi-sun"></i>');
  2571.     } else {
  2572.         $(".btn_dark_mode").html('<i class="bi bi-moon-stars"></i>');
  2573.     }
  2574.     $('.btn_dark_mode, #btn_mode_mobile').click(function(){
  2575.             if (theme === 'dark') {
  2576.                 $(".btn_dark_mode, #btn_mode_mobile").html('<i class="bi bi-moon-stars"></i>');
  2577.                 localStorage.setItem('theme', 'light');
  2578.                 document.documentElement.setAttribute('data-theme', 'light');
  2579.                 theme = "light";
  2580.             } else {
  2581.                 $(".btn_dark_mode, #btn_mode_mobile").html('<i class="bi bi-sun"></i>');
  2582.                 localStorage.setItem('theme', 'dark');
  2583.                 document.documentElement.setAttribute('data-theme', 'dark');
  2584.                 theme = "dark";
  2585.             }
  2586.     });
  2587.    
  2588.     //scroll to top button
  2589.     function scrollFunction() {
  2590.         if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {  
  2591.             $('#top_button').css("transform", "translateY(0px)");
  2592.         } else {
  2593.             $('#top_button').css("transform", "translateY(200px)");
  2594.         }
  2595.     }
  2596.  
  2597.     $('#top_button').click(function(){
  2598.         document.body.scrollTop = 0;
  2599.         document.documentElement.scrollTop = 0;
  2600.     });
  2601.    
  2602.     $(window).on("scroll", function() {
  2603.         scrollFunction();
  2604.     });
  2605. });
  2606.  
  2607. //onload loading
  2608. if(window.location.href.indexOf("customize") === -1) {
  2609.     $(window).on('load', function () {
  2610.         $("#loading").css("display", "none");
  2611.     });
  2612. } else {
  2613.     $("#loading").css("display", "none");
  2614. }
  2615.  
  2616. function playbtn(id) {
  2617.    if($('#'+id+" audio")[0].paused) {
  2618.        $('#btn_play_'+id)[0].innerHTML = audioSettings.pauseButton;
  2619.        $('#'+id+" audio")[0].play();
  2620.     } else {
  2621.         $('#btn_play_'+id)[0].innerHTML = audioSettings.playButton;
  2622.         $('#'+id+" audio")[0].pause();
  2623.     }
  2624. }
  2625.  
  2626. </script>
  2627.  
  2628. </body>
  2629. </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!