API tools faq
paste
Advertisement
mariokartgod

rook tumblr code

mariokartgod
Jan 2nd, 2025
40
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 76.56 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(255,255,255,0.5);
  154.     --text-color: rgb(60, 60, 60);
  155.     --accent-color: {color:Accent Color};
  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: #fff;
  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: transparent;
  200. }
  201.  
  202. ::-webkit-scrollbar-thumb {
  203.     background-image: linear-gradient(var(--accent-color-2) 0%, var(--accent-color) 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 2} 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. }
  1201.  
  1202. footer p {
  1203.     background-color: var(--bg-color);
  1204.     padding: 5px;
  1205.     transition: 0.5s all ease;
  1206.     backdrop-filter: blur(2px);
  1207. }
  1208.  
  1209. #btn_open_menu_mobile {
  1210.     display: none;
  1211.    
  1212. }
  1213.  
  1214. #btn_close_menu {
  1215.     position: absolute;
  1216.     display: none;
  1217.     top: 10px;
  1218.     right: 10px;
  1219.     font-size: 18px;
  1220. }
  1221.  
  1222. #btn_mode_mobile {
  1223.     position: absolute;
  1224.     display: none;
  1225.     top: 10px;
  1226.     left: 10px;
  1227.     font-size: 18px;
  1228. }
  1229.  
  1230.  #top_button{
  1231.     all: unset;
  1232.     display: flex;
  1233.     flex-direction: column;
  1234.     align-items: center;
  1235.     justify-content: center;
  1236.     text-align: center;
  1237.     width: 30px;
  1238.     height: 30px;
  1239.     color: var(--text-color);
  1240.     cursor: pointer;
  1241.     font-size: 1.3em;
  1242.     transition: all 0.5s ease;
  1243.     color: var(--text-color);
  1244.     z-index: 9;
  1245.     border: 1px solid var(--border-color);
  1246.     outline: none;
  1247.     cursor: pointer;
  1248.     border-radius: 10px;
  1249.     background-color: var(--bg-color);
  1250.     position: fixed;
  1251.     bottom: 40px;
  1252.     line-height: 0.5;
  1253.     right: 20px;
  1254.     transform: translateY(200px);
  1255.     backdrop-filter: blur(5px);
  1256. }
  1257.  
  1258. #top_button:hover {
  1259.     color: var(--accent-color) !important;
  1260. }
  1261.  
  1262. /*data titles*/
  1263.  
  1264. [data-title]:hover:before {
  1265.     opacity: 1;
  1266.     visibility: visible;
  1267.     z-index: 100;
  1268. }
  1269.  
  1270. [data-title]:before {
  1271.     content: attr(data-title);
  1272.     position: absolute;
  1273.     top: -2.5em;
  1274.     left: 0px;
  1275.     font-size: 10px;
  1276.     font-family: {select:Font Style Links};
  1277.     color: var(--text-color);
  1278.     background-color: var(--bg-color);
  1279.     white-space: nowrap;
  1280.     opacity: 0;
  1281.     z-index: -1;
  1282.     transition: all 0.5s ease;
  1283.     border-radius: 5px;
  1284.     text-align: center;
  1285.     padding: 3px 5px;
  1286.     backdrop-filter: blur(5px);
  1287.     visibility: hidden;
  1288. }
  1289.  
  1290. [data-title] {
  1291.     position: relative;
  1292. }
  1293.  
  1294. [data-title-menu]:hover:before {
  1295.     opacity: 1;
  1296.     z-index: 100;
  1297.     visibility: visible;
  1298. }
  1299.  
  1300. [data-title-menu]:before {
  1301.     content: attr(data-title-menu);
  1302.     position: absolute;
  1303.     right: 40px;
  1304.     font-size: 10px;
  1305.     font-family: {select:Font Style Links};
  1306.     color: var(--text-color);
  1307.     background-color: var(--bg-color);
  1308.     white-space: nowrap;
  1309.     opacity: 0;
  1310.     line-height: 1.5;
  1311.     z-index: -1;
  1312.     transition: all 0.5s ease;
  1313.     border-radius: 5px;
  1314.     text-align: center;
  1315.     padding: 3px 5px;
  1316.     backdrop-filter: blur(5px);
  1317.     visibility: hidden;
  1318. }
  1319.  
  1320. [data-title-menu] {
  1321.     position: relative;
  1322. }
  1323.  
  1324. /*credit*/
  1325. #credit {
  1326.     position: fixed;
  1327.     bottom: 4px;
  1328.     left: 10px;
  1329.     font-size: 15px;
  1330.     display: flex;
  1331. }
  1332.  
  1333. [data-credit]:hover:after {
  1334.     opacity: 1;
  1335.     z-index: 101;
  1336.     visibility: visible;
  1337. }
  1338. [data-credit]:after {
  1339.     content: attr(data-credit);
  1340.     position: absolute;
  1341.     left: 30px;
  1342.     font-size: 10px;
  1343.     font-family: {select:Font Style Links};
  1344.     line-height: 1rem;
  1345.     color: var(--text-color);
  1346.     background-color: var(--bg-color);
  1347.     white-space: nowrap;
  1348.     opacity: 0;
  1349.     z-index: 100;
  1350.     transition: all 0.5s ease;
  1351.     border-radius: 5px;
  1352.     text-align: center;
  1353.     z-index: -30;
  1354.     padding: 2px 10px;
  1355.     backdrop-filter: blur(3px);
  1356.     visibility: hidden;
  1357. }
  1358.  
  1359. [data-credit] {
  1360.     position: relative;
  1361. }
  1362.  
  1363. /*about section*/
  1364.  
  1365. #modal_about {
  1366.     transition: 0.5s all ease;
  1367.     opacity: 0;
  1368.     visibility: hidden;
  1369.     z-index: -2;
  1370. }
  1371.  
  1372. .modal_backdrop {
  1373.     height: 100%;
  1374.     width: 100vw;
  1375.     position: fixed;
  1376.     z-index: 1000;
  1377.     top: 0;
  1378.     left: 0;
  1379.     backdrop-filter: blur(10px);
  1380.     background-color: var(--color-backdrop);
  1381.     transition: 1s all ease-in-out;
  1382.     display: flex;
  1383.     flex-direction: column;
  1384.     justify-content: center;
  1385.     align-items: center;
  1386. }
  1387.  
  1388. .about_info {
  1389.     background-color: var(--bg-color);
  1390.     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  1391.     border: 1px solid var(--border-color);
  1392.     border-radius: 10px;
  1393.     padding: 1.7rem;
  1394.     transition: 1s all ease;
  1395.     backdrop-filter: blur(2px);
  1396.     width: 650px;
  1397.     height: 450px;
  1398.     display: flex;
  1399.     opacity: 0;
  1400.     transform: translateY(-50vh);
  1401. }
  1402.  
  1403. .about_section {
  1404.     flex: 1;
  1405. }
  1406.  
  1407. .img-nav {
  1408.     width: 100%;
  1409.     object-fit: cover;
  1410.     height: 100%;
  1411.     padding-right: 1rem;
  1412. }
  1413.  
  1414. .description-nav {
  1415.     height: 380px;
  1416.     overflow: auto;
  1417.     padding-right: 5px;
  1418.     font-size: 12px;
  1419.     position: relative;
  1420.     text-align: justify;
  1421.     line-height: 1;
  1422.     color: var(--text-color);
  1423. }
  1424.  
  1425. .description-nav h2,
  1426. .description-nav h3,
  1427. .description-nav h4,
  1428. .description-nav h5 {
  1429.     text-align: left;
  1430.     margin-bottom: 0.5rem;
  1431. }
  1432.  
  1433. .nav-links {
  1434.     display: flex;
  1435.     width: 100%;
  1436.     justify-content: flex-end;
  1437.     flex-wrap: wrap;
  1438.     background-image: linear-gradient(to left, var(--accent-color-2) 0%, transparent 100%);
  1439. }
  1440.  
  1441. .nav-links button {
  1442.     all: unset;
  1443.     text-align: center;
  1444.     text-decoration: none;
  1445.     font-size: 12px;
  1446.     margin: 2px 0px;
  1447.     font-family: 'Noto Sans JP', sans-serif;
  1448.     color: var(--border-color);
  1449.     display: block;
  1450.     padding: 8px;
  1451.     cursor: pointer;
  1452.     transition: 0.3s;
  1453. }
  1454.  
  1455. .modal_backdrop a:hover {
  1456.     color: var(--accent-color);
  1457.  
  1458. }
  1459.  
  1460. #close_modal {
  1461.     all: unset;
  1462.     color: #fff;
  1463.     position: absolute;
  1464.     top: 10px;
  1465.     right: 10px;
  1466.     font-size: 30px;
  1467.     -webkit-transition: .3s ease;
  1468.     transition: .3s ease;
  1469.     cursor: pointer;
  1470. }
  1471.  
  1472. #close_modal:hover {
  1473.     color: var(--accent-color);
  1474. }
  1475.  
  1476. .section {
  1477.     -webkit-transition: .3s all ease;
  1478.     transition: .3s all ease;
  1479.     opacity: 0;
  1480.     position: absolute;
  1481.     top: 0;
  1482.     visibility: hidden;
  1483. }
  1484.  
  1485.  
  1486. .active {
  1487.     opacity: 1;
  1488.     visibility: visible;
  1489. }
  1490.  
  1491. .stats_basic {
  1492.     display: flex;
  1493. }
  1494.  
  1495. .mini_description {
  1496.     backdrop-filter: blur(5px);
  1497.     font-size: 12px;
  1498.     padding: 10px;
  1499.     border-radius: 5px;
  1500.     letter-spacing: 1px;
  1501.     margin: 1rem 0px;
  1502.     height: 100%;
  1503.     max-height: 100px;
  1504.     overflow: auto;
  1505.     line-height: 1;
  1506.     transition: 0.3s all ease;
  1507. }
  1508.  
  1509. .stats_ul {
  1510.     padding-left: 0;
  1511.     width: 170px;
  1512.     margin-top: 1rem;
  1513. }
  1514.  
  1515. .mini_avi {
  1516.     margin: 1rem 10px 0px 10px;
  1517. }
  1518.  
  1519. .mini_avi img {
  1520.     width: 100px;
  1521.     height: 100px;
  1522.     border-radius: 50%;
  1523.     border: 1px var(--border-color) solid;
  1524.     padding: 3px;
  1525. }
  1526.  
  1527. .stats_ul span {
  1528.     letter-spacing: 1px;
  1529.     font-weight: bold;
  1530.     color: var(--accent-color);
  1531. }
  1532.  
  1533. .stats_ul li {
  1534.     list-style-type: none;
  1535.     margin-top: 5px;
  1536. }
  1537.  
  1538. .skills {
  1539.     display: flex;
  1540.     flex-wrap: wrap;
  1541.     justify-content: space-around;
  1542. }
  1543.  
  1544. .skill_progress {
  1545.     width: 100%;
  1546.     flex: 1;
  1547.     display: flex;
  1548.     flex-direction: column;
  1549.     justify-content: center;
  1550.     align-items: center;
  1551.     margin-bottom: 1.5em;
  1552. }
  1553.  
  1554. .skill_progress label {
  1555.     font-size: 10px;
  1556.     font-family: 'Noto Sans JP', sans-serif;
  1557.     letter-spacing: 1px;
  1558.     margin-top: 5px;
  1559. }
  1560.  
  1561. .skill_progress progress {
  1562.     height: 10px;
  1563.     width: 120px;
  1564.     border-radius: 10px;
  1565.     border: 1px var(--border-color) double;
  1566. }
  1567.  
  1568. .fullgamelabel {
  1569.     letter-spacing: 4px;
  1570. }
  1571.  
  1572. progress::-webkit-progress-bar {
  1573.     background-color: lightgray;
  1574.     border-radius: 10px;
  1575. }
  1576.  
  1577. .skill1::-webkit-progress-value {
  1578.     background-color: var(--accent-color-2);
  1579.     background-image: linear-gradient(to left, var(--accent-color-2) 0%, var(--accent-color) 100%);
  1580.     border-radius: 10px;
  1581. }
  1582.  
  1583. .social_media {
  1584.     display: flex;
  1585.     justify-content: flex-end;
  1586.     flex-wrap: wrap;
  1587. }
  1588.  
  1589. .social_media a {
  1590.     margin: 0 10px;
  1591.     color: var(--text-color);
  1592.     transition: 0.3s all ease;
  1593. }
  1594.  
  1595. .social_media a:hover {
  1596.     color: var(--accent-color);
  1597. }
  1598.  
  1599. .tags_content {
  1600.     margin-top: 1rem;
  1601.     height: 340px;
  1602.     overflow: auto;
  1603. }
  1604.  
  1605. .tags_group {
  1606.     margin-bottom: 20px;
  1607.     width: 100%;
  1608. }
  1609.  
  1610. .tags_group h3 {
  1611.     color: var(--border-color);
  1612.     margin-bottom: 0.5rem;
  1613.     padding: 5px;
  1614.     letter-spacing: 2px;
  1615.     text-transform: uppercase;
  1616.     background-image: linear-gradient(to right, var(--accent-color) 0%, transparent 100%);
  1617. }
  1618.  
  1619. .tags_group .tags {
  1620.     display: flex;
  1621.     justify-content: flex-start;
  1622.     flex-wrap: wrap;
  1623.     padding-top: 0;
  1624.     /*border-left: 1px var(--border-color) solid;*/
  1625. }
  1626.  
  1627. .tags_group .tags a {
  1628.     padding: 5px 15px;
  1629.     /*border: 1px var(--border-color) solid;
  1630.     margin:-1px 0 0 -1px;*/
  1631.     width: 98px;
  1632.     color: var(--text-color);
  1633.     border-radius: 5px;
  1634.     text-decoration: none;
  1635.     transition: 0.3s all ease;
  1636.     text-overflow: ellipsis;
  1637.     font-family: {select:Font Style Links};
  1638. }
  1639.  
  1640. .tags_group .tags a:hover {
  1641.     color: var(--accent-color);
  1642.     letter-spacing: 0px;
  1643.     background-color: var(--bg-color);
  1644. }
  1645.  
  1646. .user-following, .following-container li {
  1647.     display: flex;
  1648.     align-items: center;
  1649.     width:-webkit-fill-available;
  1650. }
  1651.  
  1652. .following-container li img {
  1653.     border-radius: 10px;
  1654.     margin-right: 10px;
  1655.     width: 50px;
  1656.     height: 50px;
  1657.     object-fit: cover;
  1658. }
  1659.  
  1660. .following-container li {
  1661.     margin: 5px 5px 5px 0px;
  1662.     backdrop-filter: blur(5px);
  1663.     padding: 5px 10px 5px 5px;
  1664.     border-radius: 10px;
  1665.     transition: 0.3s all ease;
  1666.     word-break: break-word;
  1667. }
  1668.  
  1669. .following-container li:hover {
  1670.     background-color: var(--bg-color);
  1671. }
  1672.  
  1673. .following-container li a {
  1674.     word-break: break-word;
  1675.     font-size: 1.2em;
  1676.     font-family: {select:Font Style Links};
  1677. }
  1678.  
  1679. .following-container li a:hover {
  1680.     color: var(--accent-color);
  1681. }
  1682.  
  1683. .user-following {
  1684.     margin: 5px 0px;
  1685. }
  1686.  
  1687. #extra {
  1688.     margin-top: 1rem;
  1689. }
  1690.  
  1691. #extra p {
  1692.     margin-bottom: 0.5rem;
  1693. }
  1694.  
  1695. .extra_text {
  1696.     height: 340px;
  1697.     overflow: auto;
  1698.     padding-right: 5px;
  1699. }
  1700.  
  1701. .tmblr-full{
  1702.     text-align: center;
  1703. }
  1704.  
  1705. @media only screen and (max-width: 768px) {
  1706.     :root {
  1707.         --Post-Columns-Spacing:30px;
  1708.         --Post-Rows-Spacing:30px;
  1709.     }
  1710.  
  1711.     #posts_list {
  1712.         padding: 16px;
  1713.         width: 100%;
  1714.         transition: 0.5s all ease;
  1715.     }
  1716.  
  1717.     .layout_blog {
  1718.         display: flex;
  1719.         flex-direction: column;
  1720.         width: 100%;
  1721.     }
  1722.    
  1723.     .about {
  1724.         margin-top 30px;
  1725.         padding: 16px;
  1726.     }
  1727.    
  1728.     .about_blog {
  1729.         position: static;
  1730.         display: flex;
  1731.         flex-direction: column;
  1732.         justify-content: center;
  1733.         align-items: center;
  1734.         width: 100%;
  1735.         max-width: 100%;
  1736.         margin: 0 auto;
  1737.     }
  1738.    
  1739.     .about_avatar img {
  1740.         height: 250px;
  1741.         object-position: center;
  1742.     }
  1743.  
  1744.     header {
  1745.         width: 100%;
  1746.         display: flex;
  1747.         justify-content: flex-end;
  1748.     }
  1749.    
  1750.     #btn_open_menu_mobile {
  1751.         display: block;
  1752.         position: absolute;
  1753.         right: 0;
  1754.         top: 0;
  1755.         background-color: var(--border-color);
  1756.         border-radius: 10px;
  1757.         padding: 10px;
  1758.         font-size: 30px;
  1759.         line-height: 10px;
  1760.     }
  1761.  
  1762.     #btn_close_menu, #btn_mode_mobile {
  1763.         display: block;  
  1764.     }
  1765.  
  1766.     .navigation {
  1767.         height: 100%;
  1768.         font-size: 20px;
  1769.         width: 100%;
  1770.         position: fixed;
  1771.         top: 0;
  1772.         left: 0;
  1773.         padding: 40px 10px 0px 10px;
  1774.         transition: 0.5s;
  1775.         display: flex;
  1776.         flex-direction: column;
  1777.         justify-content: flex-start;
  1778.          border-radius: 10px;
  1779.         backdrop-filter: blur(50px);
  1780.         opacity: 0;
  1781.         visibility: hidden;
  1782.         z-index: -1;
  1783.     }
  1784.    
  1785.     .navigation .links {
  1786.         flex-direction: column;
  1787.         max-height: 100%;
  1788.     }
  1789.  
  1790.     .inputsearch {
  1791.         position: static;
  1792.         width: 90%;
  1793.     }
  1794.  
  1795.     .controls_tumblr {
  1796.         display: none;  
  1797.     }
  1798.  
  1799.     .btn_dark_mode_mobile {
  1800.         display: block;
  1801.     }
  1802.  
  1803.     .btn_dark_mode{
  1804.         display: none;
  1805.     }
  1806.  
  1807.     [data-title-menu]:after, [data-title]:after    {
  1808.         display: none;  
  1809.         width: 0px;
  1810.     }
  1811.    
  1812.      .controls, .controls:visited, .controls:active {
  1813.         height: auto;  
  1814.         font-size: 0.75rem;
  1815.     }
  1816.    
  1817.    
  1818.      .actions_btns .date {
  1819.         margin-right: 5px;
  1820.     }
  1821.    
  1822.     .actions_btns .notes_count {
  1823.         margin-right: 0px;
  1824.     }
  1825.    
  1826.     .actions_container {
  1827.         padding: 8px 0px;  
  1828.     }
  1829.    
  1830.     .post, .post-notes {
  1831.         max-width: 100%;
  1832.         margin-bottom: 30px;
  1833.         width: 100%;
  1834.         min-width: auto;
  1835.        
  1836.     }
  1837.    
  1838.      #about_cover {
  1839.         display: none;
  1840.     }
  1841.  
  1842.     .about_info {
  1843.         width: 95%;
  1844.     }
  1845.    
  1846.     footer p {
  1847.         padding: 0 20px;
  1848.     }
  1849.  
  1850. }
  1851.  
  1852. {CustomCSS}
  1853. </style>
  1854. </head>
  1855. <script>
  1856. //apply mode layout
  1857. $(document).ready(function(){
  1858. if(window.screen.width > 768){
  1859.     gridderyV2(".post", "--Post-Columns");
  1860. }
  1861. });
  1862. </script>
  1863.  
  1864. <body>
  1865.     <div id="loading">
  1866.         <div class="lds-dual-ring"></div>
  1867.     </div>
  1868.     <header>  
  1869.          <button type="button" class="btn_dark_mode btn_dark_mode_mobile"><i class="bi bi-moon-stars"></i></button>
  1870.     </header>
  1871.     <main>
  1872.     <article class="page_controls">
  1873.         <button type="button" data-title-menu="Controls" class="controls_tumblr"><i class="bi bi-gear"></i></button>
  1874.         <button type="button" data-title-menu="Mode" class="btn_dark_mode"><i class="bi bi-moon-stars"></i></button>
  1875.     </article>
  1876.     <article class="layout layout_blog">
  1877.     <section class="about">
  1878.             <div class="about_container about_blog">
  1879.             <div class="about_content">
  1880.                 <div class="title-container"><h1>{Title}</h1></div>
  1881.                 <span id="btn_open_menu_mobile" ><i class="bi bi-list"></i></span>
  1882.                 {block:DayPage} <h2 class="subtitle">Posts from {Month} {DayOfMonth}, {Year}</h2> {/block:DayPage}
  1883.                 {block:TagPage} <h2 class="subtitle">Posts tagged "{Tag}"</h2> {/block:TagPage}  
  1884.                 {block:SearchPage} <h2 class="subtitle">Search results for "{SearchQuery}"</h2> {/block:SearchPage}
  1885.                 <figure class="about_avatar">
  1886.                 <img alt="{Title} blog avatar" src="{image:Custom Avatar}" />
  1887.                 </figure>
  1888.                 <div class="description">
  1889.                     <p>
  1890.                     {block:Description}
  1891.                     {Description}
  1892.                     {/block:Description}
  1893.                     </p>
  1894.                  </div>
  1895.             </div>
  1896.          <nav class="navigation navigation_side">
  1897.             <span id="btn_close_menu"><i class="bi bi-x-lg"></i></span>
  1898.             <span id="btn_mode_mobile"><i class="bi bi-moon-stars"></i></span>
  1899.             <form action="/search" method="get">
  1900.                 <input type="text" autocomplete="off" class="inputsearch" name="q" value="{SearchQuery}" placeholder="Search..." />
  1901.             </form>
  1902.             <div class="links">
  1903.                 <a href="/" >Home</a>
  1904.                 <a href="/archive" >Archive</a>
  1905.                 {block:ifShowAboutSection}
  1906.                 <button id="open_modal" >About</button>
  1907.                 {/block:ifShowAboutSection}
  1908.                 {block:AskEnabled}
  1909.                 <a href="/ask" >Ask</a>
  1910.                 {/block:AskEnabled}
  1911.                 <a href="/random" >Random</a>
  1912.                 {block:SubmissionsEnabled}
  1913.                 <a href="/submit" >{SubmitLabel}</a>
  1914.                 {/block:SubmissionsEnabled}
  1915.                 {block:ifLink1}<a href="{text:Link 1 URL}" >{text:Link 1}</a>{/block:ifLink1}
  1916.                 {block:ifLink2}<a href="{text:Link 2 URL}" >{text:Link 2}</a>{/block:ifLink2}
  1917.                 {block:ifLink3}<a href="{text:Link 3 URL}" >{text:Link 3}</a>{/block:ifLink3}
  1918.                 {block:ifLink4}<a href="{text:Link 4 URL}" >{text:Link 4}</a>{/block:ifLink4}
  1919.                 {block:HasPages}
  1920.                 {block:Pages}
  1921.                 <a href="{URL}" title="{Label}" >{Label}</a>
  1922.                 {/block:Pages}
  1923.                 {/block:HasPages}
  1924.             </div>
  1925.         </nav>
  1926.         {block:Pagination}
  1927.         <div id="page-pagination" class="blog_pagination">
  1928.         {block:PreviousPage}
  1929.             <a href="{PreviousPage}" > Previous</a>
  1930.         {/block:PreviousPage}
  1931.         {block:JumpPagination length="5"}
  1932.         {block:CurrentPage}
  1933.             <span class="current-page">{PageNumber}</span>
  1934.         {/block:CurrentPage}
  1935.         {block:JumpPage}
  1936.             <a href="{URL}" >{PageNumber}</a>
  1937.         {/block:JumpPage}
  1938.         {/block:JumpPagination}
  1939.         {block:NextPage}
  1940.                 <a href="{NextPage}" > Next</a>
  1941.         {/block:NextPage}
  1942.         </div>
  1943.         {/block:Pagination}
  1944.         </div>
  1945.     </section>
  1946.     <article id="posts_list">
  1947.     {block:Posts}
  1948.     <section class="post {PostType}" id="{PostID}">
  1949.         <div class="post_content">
  1950.         {block:Text}
  1951.             {block:Title} <h3 class="post-title">{Title}</h3>
  1952.             {/block:Title}
  1953.             {block:NotReblog}{Body}{/block:NotReblog}
  1954.             {block:RebloggedFrom}
  1955.             {block:Reblogs}
  1956.             <div class="comment_container">
  1957.                 <div class="commenter source-head">
  1958.                     <img src="{PortraitURL-64}" />
  1959.                     <span>
  1960.                         {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}
  1961.                     </span>
  1962.                 </div>
  1963.                 <div class="comment">{Body}
  1964.                 </div>
  1965.             </div>
  1966.             {/block:Reblogs}
  1967.             {/block:RebloggedFrom}
  1968.         {/block:Text}
  1969.        
  1970.         {block:Photo}
  1971.         <figure class="post-image">
  1972.             <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  1973.         </figure>
  1974.         {/block:Photo}
  1975.        
  1976.         {block:Panorama}
  1977.             {LinkOpenTag}
  1978.             <div class="photoset-grid">
  1979.                 <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
  1980.             </div>{LinkCloseTag}
  1981.         {/block:Panorama}
  1982.  
  1983.         {block:Photoset}
  1984.             <div class="photoset-grid" photoset-layout="{PhotosetLayout}">
  1985.             {block:Photos}
  1986.             <div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)">
  1987.             <img src="{PhotoURL-HighRes}" />
  1988.             </div>{/block:Photos}
  1989.             </div>
  1990.         {/block:Photoset}
  1991.        
  1992.         {block:Quote}
  1993.         <p class="post-quote">{Quote}</p>
  1994.         <p class="quote-source">{block:Source}{Source}{/block:Source}</p>
  1995.         {/block:Quote}
  1996.        
  1997.         {block:Link}
  1998.          {block:Thumbnail}
  1999.        
  2000.         <div class="link-excerpt">
  2001.             <figure class="post-image">
  2002.                 <img src="{Thumbnail-HighRes}" />
  2003.             </figure>
  2004.             <p><a class="link-name" href="{URL}" {Target}>{Name}</a></p>
  2005.             {block:Excerpt}<p class="exceprt">{Excerpt}</p>{/block:Excerpt}
  2006.         </div>
  2007.         {/block:Thumbnail}
  2008.         <div class="no-thumb-exceprt">
  2009.             <p><a class="link-name" href="{URL}" {Target}>{Name}</a></p>
  2010.             {block:Excerpt}<p class="exceprt">{Excerpt}</p>{/block:Excerpt}
  2011.         </div>
  2012.         {block:Description}
  2013.         <div class="link-description">
  2014.             {block:NotReblog}{Description}{/block:NotReblog}
  2015.             {block:RebloggedFrom}
  2016.             {block:Reblogs}
  2017.             <div class="comment_container">
  2018.                 <div class="commenter">
  2019.                     <img src="{PortraitURL-64}" />
  2020.                     <span>
  2021.                         {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}
  2022.                     </span>
  2023.                 </div>
  2024.                 <div class="comment">{Body}</div>
  2025.             </div>
  2026.             {/block:Reblogs}
  2027.             {/block:RebloggedFrom}
  2028.         </div>
  2029.         {/block:Description}
  2030.         {/block:Link}
  2031.        
  2032.         {block:Chat}
  2033.             {block:Title}
  2034.             <h3 class="post-title">
  2035.                 {Title}
  2036.             </h3>
  2037.             {/block:Title}
  2038.             <div class="chat-full">
  2039.                 {block:Lines}
  2040.                 <div class="chat-line"><div class="label"> {block:Label}{Label}{/block:Label}</div><div class="chat-text"> {Line} </div></div>
  2041.                 {/block:Lines}
  2042.             </div>
  2043.         {/block:Chat}
  2044.        
  2045.         {block:Audio}
  2046.         {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  2047.         <div class="audio_wrapper"1>
  2048.         {block:AudioPlayer}
  2049.         {block:AlbumArt}
  2050.         <figure class="post-image">
  2051.            <img src="{AlbumArtURL}" />
  2052.         </figure>
  2053.         {/block:AlbumArt}
  2054.         {AudioPlayer}
  2055.         <div class="full-audio-player">
  2056.             <div class="audio_info">
  2057.                 {block:TrackName}<p class="track">{audio:AudioButtons} {TrackName}</p>{/block:TrackName}
  2058.                 {block:Artist}<p class="artist">{Artist}</p>{/block:Artist}
  2059.                 {block:Album}<p class="album">{Album}</p>{/block:Album}
  2060.             </div>
  2061.         </div>
  2062.         {/block:AudioPlayer}
  2063.         </div>
  2064.         {/block:Audio}
  2065.        
  2066.         {block:Video}{VideoEmbed-500}{/block:Video}
  2067.        
  2068.         {block:Answer}
  2069.         <div class="question_container">
  2070.             <div class="asker">
  2071.                 <img src="{AskerPortraitURL-48}" class="answer-avatar"/>
  2072.                 {Asker}
  2073.             </div>
  2074.             <div class="question_text">{Question}</div>
  2075.         </div>
  2076.         {block:Answerer}
  2077.         <div class="answer_container">
  2078.             <div class="answerer">
  2079.                 <img src="{AnswererPortraitURL-48}" class="answer-avatar"/>
  2080.                 {Answerer}
  2081.             </div>
  2082.             <div class="answer_text">{Answer}</div>
  2083.         </div>
  2084.         {block:Reblogs}
  2085.         <div class="reply_container">
  2086.             <div class="replier">
  2087.                 <img src="{PortraitURL-64}" class="answer-avatar" />
  2088.                 {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a> {/block:HasPermalink}
  2089.             </div>
  2090.             <div class="reply">{Body}</div>
  2091.         </div>
  2092.         {/block:Reblogs}
  2093.         {/block:Answerer}
  2094.         {block:NotReblog}
  2095.         <div class="answer_container">
  2096.             <div class="answerer">
  2097.                 <img src="{PortraitURL-48}" class="answer-avatar"/>
  2098.                 <a href="{Permalink}">{Name}</a>
  2099.             </div>
  2100.             <div class="answer_text">{Answer}</div>
  2101.         </div>
  2102.         {/block:NotReblog}
  2103.         {/block:Answer}
  2104.        
  2105.     </div>
  2106.    
  2107.     <!--Captions-->
  2108.     <div class="post-caption">
  2109.         <div class="caption">
  2110.             {block:Caption}
  2111.             {block:NotReblog}{Caption}{/block:NotReblog}
  2112.             {block:RebloggedFrom}
  2113.             {block:Reblogs}
  2114.             <div class="comment_container">
  2115.                 <div class="commenter">
  2116.                     <img src="{PortraitURL-64}" />
  2117.                     <span>
  2118.                         {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}
  2119.                     </span>
  2120.                 </div>
  2121.                 <div class="comment">{Body}
  2122.                 </div>
  2123.             </div>
  2124.             {/block:Reblogs}
  2125.             {/block:RebloggedFrom}
  2126.             {/block:Caption}
  2127.    
  2128.             {block:RebloggedFrom}
  2129.             <div class="vias">
  2130.                 <div class="via" data-title="Reblogged via">
  2131.                 <a href="{ReblogParentURL}"><i class="bi bi-arrow-repeat"></i> {ReblogParentName}</a>
  2132.                 </div>
  2133.                 {block:ContentSource}
  2134.                 <div class="source">
  2135.                     <a href="{SourceURL}"><i class="bi bi-link-45deg"></i> source</a>
  2136.                 </div>
  2137.                 {/block:ContentSource}
  2138.                 <div class="originally" data-title="Originally posted by">
  2139.                     <a  href="{ReblogRootURL}"><i class="bi bi-emoji-smile"></i> {ReblogRootName}</a>
  2140.                 </div>
  2141.             </div>
  2142.             {/block:RebloggedFrom}
  2143.         </div>
  2144.     </div>
  2145.    <!--actions-->
  2146.    {block:Date}
  2147.    <div class="actions_container">
  2148.         <div class="actions">
  2149.             <div class="actions_btns">
  2150.                 <a class="controls date" href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}"><i class="bi bi-clock"></i> {Month} {DayOfMonth}, {Year}</a>
  2151.                 <a href="{Permalink}" class="controls notes_count"><i class="bi bi-stars"></i>{NoteCountWithLabel}</a>
  2152.             </div>
  2153.             <div class="actions_btns">
  2154.                 <div class="post-like controls" >
  2155.                     <a href="#" class="like">{LikeButton}
  2156.                         <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>
  2157.                     </a>
  2158.                 </div>
  2159.                 <div class="post-reblog controls" >
  2160.                     <a href="{ReblogURL}" target="_blank" class="reblog">
  2161.                         <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>
  2162.                     </a>
  2163.                 </div>
  2164.             </div>
  2165.         </div>
  2166.     </div>
  2167.     {/block:Date}
  2168.  
  2169. <!--tags-->
  2170.    {block:IfShowTags}
  2171.     <div class="maintags">
  2172.           {block:HasTags}
  2173.                 <ul class="tags">
  2174.                     {block:Tags}
  2175.                         <li>
  2176.                             <a href="{TagURL}">{Tag}</a>
  2177.                         </li>
  2178.                     {/block:Tags}
  2179.                 </ul>
  2180.             {/block:HasTags}
  2181.       </div>
  2182.     {/block:IfShowTags}
  2183.     </section>
  2184.     <!--Permalink Notes--->
  2185.     {block:PermalinkPage}    
  2186.     {block:NoteCount}
  2187.      <div class="post-notes">
  2188.             {block:PostNotes}
  2189.             <div class="notes">
  2190.                 {PostNotes-64}
  2191.             </div>
  2192.             {/block:PostNotes}
  2193.         </div>
  2194.     {/block:NoteCount}
  2195.     {/block:PermalinkPage}  
  2196.    
  2197.     {/block:Posts}
  2198.            
  2199.     <!--Pagination-->
  2200.     {block:Pagination}
  2201.     <div id="page-pagination" class="mobile_pagination">
  2202.     {block:PreviousPage}
  2203.         <a href="{PreviousPage}"> Previous</a>
  2204.     {/block:PreviousPage}
  2205.         {block:JumpPagination length="5"}
  2206.             {block:CurrentPage}
  2207.         <span class="current-page">{PageNumber}</span>
  2208.             {/block:CurrentPage}
  2209.             {block:JumpPage}
  2210.         <a href="{URL}" >{PageNumber}</a>
  2211.             {/block:JumpPage}
  2212.         {/block:JumpPagination}
  2213.     {block:NextPage}
  2214.         <a href="{NextPage}"> Next</a>
  2215.     {/block:NextPage}
  2216.     </div>
  2217.     {/block:Pagination}
  2218.     </article>
  2219.     </article>
  2220.     {block:ifShowAboutSection}
  2221.     <div id="modal_about" class="modal_backdrop">
  2222.         <button id="close_modal"><i class="bi bi-x-lg"></i></button>
  2223.         <div class="about_info">
  2224.             <div class="about_section" id="about_cover">
  2225.                 <img class="img-nav" src="{image:About Section Cover}" />
  2226.             </div>
  2227.             <div class="about_section">
  2228.                 <div class="nav-links">
  2229.                     <button class="about_link" data-section="#about">About</button>
  2230.                     {block:ifTagsList}
  2231.                     <button class="about_link" data-section="#tags">Tags</button>
  2232.                     {/block:ifTagsList}
  2233.                     {block:ifShowFollowing}
  2234.                     <button class="about_link" data-section="#blogroll">BlogRoll</button>
  2235.                     {/block:ifShowFollowing}
  2236.                     {block:ifExtraText}
  2237.                     <button class="about_link" data-section="#extra">Extra</button>
  2238.                     {/block:ifExtraText}
  2239.                 </div>
  2240.                 <div class="description-nav">
  2241.                     <div id="about" class="section active">
  2242.                         <div class="stats_basic">
  2243.                             <ul class="stats_ul">
  2244.                             {block:ifAboutName}
  2245.                                 <li>
  2246.                                     <span>Name:</span>
  2247.                                     {text:About Name}
  2248.                                 </li>
  2249.                             {/block:ifAboutName}
  2250.                             {block:ifAboutAge}
  2251.                                 <li>
  2252.                                     <span>Age:</span>
  2253.                                     {text:About Age}
  2254.                                 </li>
  2255.                             {/block:ifAboutAge}
  2256.                             {block:ifAboutZodiac}
  2257.                                 <li>
  2258.                                     <span>Zodiac:</span>
  2259.                                     {text:About Zodiac}
  2260.                                 </li>
  2261.                              {/block:ifAboutZodiac}
  2262.                              {block:ifAboutLocation}
  2263.                                 <li>
  2264.                                     <span>Location:</span>
  2265.                                     {text:About Location}
  2266.                                 </li>
  2267.                             {/block:ifAboutLocation}
  2268.                             {block:ifAboutOccupation}
  2269.                                 <li>
  2270.                                     <span>Occupation:</span>
  2271.                                     {text:About Occupation}
  2272.                                 </li>
  2273.                              {/block:ifAboutOccupation}
  2274.                              {block:ifAboutPronouns}
  2275.                                 <li>
  2276.                                     <span>Pronouns:</span>
  2277.                                     {text:About Pronouns}
  2278.                                 </li>
  2279.                             {/block:ifAboutPronouns}
  2280.                             </ul>
  2281.                             <figure class="mini_avi">
  2282.                                 <img src="{image:About Section Avatar}" />
  2283.                             </figure>
  2284.                         </div>
  2285.                         {block:ifAboutDescription}
  2286.                         <div class="mini_description">
  2287.                             <p>
  2288.                                 {text:About Description}
  2289.                             </p>
  2290.                         </div>
  2291.                          {/block:ifAboutDescription}
  2292.                         <div class="skills">
  2293.                         {block:ifAboutSkill1Label}
  2294.                             <div class="skill_progress">
  2295.                                 <progress id="skill1" class="skills skill1" value="{text:About Skill 1 Total}" max="100"> {text:About Skill 1 Total}% </progress>
  2296.                                 <label for="skill1">{text:About Skill 1 Label}</label>
  2297.                             </div>
  2298.                         {/block:ifAboutSkill1Label}
  2299.                         {block:ifAboutSkill2Label}
  2300.                             <div class="skill_progress">
  2301.                                 <progress id="skill1" class="skills skill1" value="{text:About Skill 2 Total}" max="100"> {text:About Skill 2 Total}% </progress>
  2302.                                 <label for="skill1">{text:About Skill 2 Label}</label>
  2303.                             </div>
  2304.                         {/block:ifAboutSkill2Label}
  2305.                         {block:ifAboutSkill3Label}
  2306.                             <div class="skill_progress">
  2307.                                 <progress id="skill1" class="skills skill1" value="{text:About Skill 3 Total}" max="100"> {text:About Skill 3 Total}% </progress>
  2308.                                 <label for="skill1">{text:About Skill 3 Label}</label>
  2309.                             </div>
  2310.                         {/block:ifAboutSkill3Label}
  2311.                         {block:ifAboutSkill4Label}
  2312.                             <div class="skill_progress">
  2313.                                 <progress id="skill1" class="skills skill1" value="{text:About Skill 4 Total}" max="100"> {text:About Skill 4 Total}% </progress>
  2314.                                 <label for="skill1">{text:About Skill 4 Label}</label>
  2315.                             </div>
  2316.                         {/block:ifAboutSkill4Label}
  2317.                         </div>
  2318.                         <div class="social_media">
  2319.                             {block:ifWebsiteURL}
  2320.                             <a href="{text:Website URL}" target="_blank" aria-label="user's website"><i class="bi bi-globe2"></i></a>
  2321.                             {/block:ifWebsiteURL}
  2322.                             {block:ifTwitterURL}
  2323.                             <a href="{text:Twitter URL}" target="_blank" aria-label="user's twitter"><i class="bi bi-twitter"></i></a>
  2324.                             {/block:ifTwitterURL}
  2325.                             {block:ifInstagramURL}
  2326.                             <a href="{text:Instagram URL}" target="_blank" aria-label="user's instagram"><i class="bi bi-instagram"></i></a>
  2327.                             {/block:ifInstagramURL}
  2328.                             {block:ifShopURL}
  2329.                             <a href="{text:Shop URL}" target="_blank" aria-label="user's shop"><i class="bi bi-bag"></i></a>
  2330.                             {/block:ifShopURL}
  2331.                             {block:ifSpotifyURL}
  2332.                             <a href="{text:Spotify URL}" target="_blank" aria-label="user's spotify"><i class="bi bi-spotify"></i></a>
  2333.                             {/block:ifSpotifyURL}
  2334.                             {block:ifTwitchURL}
  2335.                             <a href="{text:Twitch URL}" target="_blank" aria-label="user's twitch" ><i class="bi bi-twitch"></i></a>
  2336.                             {/block:ifTwitchURL}
  2337.                             {block:ifFacebookURL}
  2338.                             <a href="{text:Facebook URL}" target="_blank" aria-label="user's facebook page"><i class="bi bi-facebook"></i></a>
  2339.                             {/block:ifFacebookURL}
  2340.                         </div>
  2341.                     </div>
  2342.                     {block:ifTagsList}
  2343.                     <div id="tags" class="section">
  2344.                         <div class="tags_content">
  2345.                            
  2346.                         </div>
  2347.                     </div>
  2348.                     {/block:ifTagsList}
  2349.                     {block:IfShowFollowing}
  2350.                     <div id="blogroll" class="section">
  2351.                         <div class="tags_content">
  2352.                           <div class="following-container">
  2353.                             {block:Following}
  2354.                         <ul class="followings">{block:Followed}
  2355.                                 <li>
  2356.                                     <a href="{FollowedURL}" target="_blank"><img src="{FollowedPortraitURL-48}"/></a>
  2357.                                     <p>
  2358.                                         <a href="{FollowedURL}" target="_blank">{FollowedName}</a><br/>
  2359.                                         {FollowedTitle}
  2360.                                     </p>
  2361.                                 </li>{/block:Followed}
  2362.                         </ul>{/block:Following}
  2363.                           </div>
  2364.                         </div>
  2365.                     </div>
  2366.                     {/block:IfShowFollowing}
  2367.                     {block:ifExtraText}
  2368.                     <div id="extra" class="section">
  2369.                         <div class="extra_text">
  2370.                         {text:Extra Text}
  2371.                         </div>
  2372.                     </div>
  2373.                     {/block:ifExtraText}
  2374.                 </div>
  2375.             </div>
  2376.         </div>
  2377.     </div>
  2378.     {/block:ifShowAboutSection}
  2379. </main>
  2380. <footer>
  2381.     <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>
  2382. </footer>
  2383. <button id="top_button" data-title-menu="Go Top"><i class="bi bi-chevron-up"></i></button>
  2384.  <!--CREDITS DO NOT REMOVE-->
  2385. <a href="https://themesbypale.tumblr.com" target="_blank" data-credit="by Palemomos" id="credit">
  2386. <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"
  2387.      viewBox="471.3518 2.2063 1944.5809 1704.2247" enable-background="new 471.3518 2.2063 1944.5809 1704.2247" xml:space="preserve"
  2388.     >
  2389. <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
  2390.     c-15.0801-5.4404-32.3848-8.1992-51.4355-8.1992c-6.1221,0-12.5791,0.2832-19.1895,0.8408
  2391.     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
  2392.     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
  2393.     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
  2394.     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
  2395.     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
  2396.     c0.8525-4.8379,1.8809-9.7524,2.877-14.5078c3.0215-14.4365,6.1465-29.3638,4.8438-44.397
  2397.     c-0.6768-9.0459-3.583-18.4917-8.6357-28.0737c20.5898-40.6646,38.7676-83.2778,56.3457-124.4883
  2398.     c7.1523-16.7656,14.5469-34.1025,22.001-51.0654c1.5869-3.5103,3.1572-7.105,4.6768-10.5811
  2399.     c5.3535-12.2534,10.8906-24.9243,18.2031-36.4033c0.3105-0.5166,0.6221-1.0332,0.9346-1.5518
  2400.     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
  2401.     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
  2402.     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
  2403.     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
  2404.     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
  2405.     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
  2406.     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
  2407.     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
  2408.     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
  2409.     c17.6846,38.0454,35.9707,77.3838,50.75,117.4229c-0.7305,1.5615-1.7021,3.0288-2.6426,4.4487
  2410.     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
  2411.     c2.0361,9.4302,4.1416,19.1787,1.8809,28.7524c-33.9092-66.793-71.2285-137.8452-114.3154-204.9683
  2412.     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
  2413.     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
  2414.     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
  2415.     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
  2416.     c-0.311-0.0015-0.6201-0.002-0.9321-0.002c-28.9321,0-50.7749,5.9492-66.7803,18.1919
  2417.     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
  2418.     c-1.1167,26.4624,0.6426,49.9043,5.3789,71.667c4.29,18.25,14.7974,33.8462,24.9585,48.9287
  2419.     c5.0684,7.5234,10.3091,15.3027,14.7065,23.3086c6.6934,11.2808,12.0396,24.5859,16.8242,41.873
  2420.     c12.2256,43.5132,18.8901,88.8931,25.3354,132.7793c4.9189,33.4922,10.0049,68.125,17.5288,101.707
  2421.     c4.1021,17.48,7.8672,30.6494,12.21,42.7002c5.5176,15.3115,11.8672,28.3384,19.4111,39.8247
  2422.     c9.6987,14.7964,23.6729,27.4766,40.4111,36.6689c10.2441,5.6792,21.4897,10.3193,34.3784,14.1841
  2423.     c10.6709,3.1997,22.5586,5.8735,36.3438,8.1743c22.6772,3.6455,44.9233,5.375,63.6938,6.5864
  2424.     c10.6289,0.6846,21.4512,1.2778,31.9175,1.8521c37.1606,2.0386,75.5864,4.146,112.8901,10.7246
  2425.     c1.4868,0.3008,2.9204,0.7891,4.2539,1.2803c-14.9653,9.6694-30.3306,19.2642-45.1909,28.5425
  2426.     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
  2427.     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
  2428.     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
  2429.     c13.3545,34.6582,26.8882,61.7236,42.5913,85.1758c10.0024,15.5156,23.2017,29.7412,39.2314,42.2842
  2430.     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
  2431.     c21.8872-2.2988,44.8008-10.1045,68.1035-23.2002c24.9331-13.6406,48.1831-32.1807,69.105-55.1074
  2432.     c28.334-30.9473,54.0771-67.9551,81.0151-116.4658c20.7251-37.4854,39.6768-77.7021,57.9375-122.9512
  2433.     c14.8291-36.3301,28.2808-76.001,39.981-117.9111c5.1533-18.1279,10.1104-36.6396,14.9053-54.542
  2434.     c7.9951-29.8555,16.2627-60.7275,25.6777-90.7256c11.5605-36.293,26.5693-78.5039,50.2441-116.4629
  2435.     c5.377,21.6592,5.1572,44.3838,4.9443,66.3613c-0.0264,2.7139-0.0527,5.5195-0.0693,8.2715
  2436.     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
  2437.     c0.9727,12.3574,2.7109,26.7617,8.2344,39.8945c4.0742,9.4707,10.4941,16.6172,18.0752,20.1221
  2438.     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
  2439.     c5.0498-15.2383,5.749-31.8193,6.0088-46.165c0.1904-13.6318-0.2939-27.4805-0.7627-40.874
  2440.     c-0.5215-14.915-1.0615-30.3379-0.6699-45.5166c0.6563-18.623,1.9805-38.25,10.1318-55.5693
  2441.     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
  2442.     c16.3584,50.7441,33.2734,103.2148,51.6631,154.2188c17.9072,49.3896,42.8193,113.9736,76.8096,175.5195
  2443.     c13.4717,24.1338,26.7568,45.0098,40.6143,63.8213c16.0273,21.7559,32.4229,40.2529,50.125,56.5488
  2444.     c17.0498,15.7676,37.9014,29.4297,61.9756,40.6074c21.2051,9.5391,40.5586,15.0967,59.166,16.9883
  2445.     c3.9473,0.4307,7.9014,0.6484,11.752,0.6484c12.2598,0,23.6582-2.1563,33.875-6.4072
  2446.     c19.0557-7.6611,36.6582-21.6729,53.8145-42.8379c12.5576-15.5303,24.0381-33.7998,36.1299-57.4951
  2447.     c21.0088-41.7197,35.8262-85.2529,47.5498-122.335c16.2588-52.6182,27.623-93.4473,36.8486-132.3838
  2448.     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
  2449.     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
  2450.     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
  2451.     c18.4287-1.269,37.1934-2.0679,55.3438-2.8413c12.7813-0.5439,25.998-1.1069,38.9863-1.8291
  2452.     c49.9268-2.7495,94.8408-5.834,138.9316-15.7734c22.2012-5.3218,47.7305-12.8594,68.7461-28.4106
  2453.     c14.168-10.6758,25.3633-26.5273,35.2295-49.8853c10.4902-24.9985,16.7471-50.9946,22.752-77.6509
  2454.     c1.0508-4.96,2.1338-10.0005,3.1807-14.8745c3.0508-14.1953,6.2051-28.8735,8.9424-43.3818
  2455.     c3.292-18.0894,5.8711-36.6016,8.3652-54.5044c1.3828-9.9302,2.8135-20.1982,4.3496-30.2749
  2456.     c6.4824-42.0781,13.8389-82.8955,32.4092-119.6919c3.7393-7.5576,7.7939-15.127,11.7148-22.4468
  2457.     c7.6152-14.2173,15.4893-28.9185,21.4316-44.2378c7.7041-19.7031,11.7393-39.313,11.9951-58.2852
  2458.     C2356.8828,203.1455,2354.8281,179.4941,2350.2393,158.1748z"/>
  2459. </svg>
  2460. </a>
  2461. <script>
  2462. const audioSettings = {
  2463.     post: ".post",
  2464.     default: false,
  2465.     pauseAll: true,
  2466.     playButton: '<i class="bi bi-play-circle"></i>',
  2467.     pauseButton: '<i class="bi bi-pause-circle"></i>',
  2468.     errorIcon: '<i class="bi bi-x-circle"></i>',
  2469.     hideInfoIfError: true,
  2470.     callAfterLoad: null
  2471. };
  2472. $(document).ready(function(){
  2473.     //cssphotosets
  2474.     initPhotosets();
  2475.     //transparent accent color
  2476.     //credits: https://stackoverflow.com/questions/21646738/convert-hex-to-rgba
  2477.     var c;
  2478.     var hex = '{color:Accent Color 2}';
  2479.     c= hex.substring(1).split('');
  2480.     if(c.length== 3){
  2481.         c= [c[0], c[0], c[1], c[1], c[2], c[2]];
  2482.     }
  2483.     c= '0x'+c.join('');
  2484.     var rgba = 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',0.6)';
  2485.     document.documentElement.style.setProperty('--accent-color-2', rgba);
  2486.    
  2487.     //show captions on permalink page
  2488.     {block:PermalinkPage}
  2489.     $(".caption").css("display", "block");
  2490.     {/block:PermalinkPage}
  2491.    
  2492.     //toggle controls
  2493.     $('.controls_tumblr').click(function(){
  2494.         $(".iframe-controls--desktop").toggle( "slow" )
  2495.     });
  2496.    
  2497.     //mobile nav
  2498.     var showMenu = false;
  2499.     $('#btn_open_menu_mobile, #btn_close_menu').click(function(){
  2500.         showMenu = !showMenu;
  2501.         if(showMenu){
  2502.             $(".navigation").css({"visibility":"visible","opacity":"1","z-index":"10" });        
  2503.             $(".about_content").css("opacity", "0");
  2504.         } else {
  2505.             $(".navigation").css({"visibility":"hiden","opacity":"0","z-index":"-1" });
  2506.             $(".about_content").css("opacity", "1");
  2507.         }  
  2508.     });
  2509.    
  2510.     //about section
  2511.     {block:ifShowAboutSection}
  2512.     var showModal = false;
  2513.     $('#open_modal, #close_modal').click(function () {
  2514.         showModal = !showModal;
  2515.         if (showModal) {
  2516.             $("#modal_about").css({"visibility":"visible","opacity":"1","z-index":"20"});
  2517.             $(".about_info").css({"transform":"translateY(0px)","opacity":"1"});
  2518.             $("#posts_list, .about").css("opacity",0);
  2519.             setTimeout(function(){
  2520.                 $("html").css("overflow", "hidden");
  2521.             }, 1000);
  2522.         } else {
  2523.             $("html").css("overflow", "auto");
  2524.             $("#modal_about").css({"visibility":"hidden","opacity":"0","z-index":"-2"});
  2525.             $(".about_info").css({"transform":"translateY(-50vh)","opacity":"0"});
  2526.             $("#posts_list, .about").css("opacity",1);
  2527.         }
  2528.     });
  2529.     //change sections
  2530.     $('.about_link').click(function () {
  2531.         let clas = $(this).attr("data-section");
  2532.         $(".section").removeClass("active");
  2533.         $(clas).addClass("active");
  2534.     });
  2535.     {/block:ifShowAboutSection}    
  2536.    
  2537.     //print tags about modal
  2538.     {block:ifTagsList}
  2539.     let matrix = [{text:Tags List}];
  2540.     for(let i=0; i<matrix.length; i++){
  2541.        $(".tags_content").append('<div class="tags_group"></div>');
  2542.         for(let j=0; j<matrix[i].length; j++){
  2543.            if(j===0){
  2544.                $(".tags_group").eq(i).append('<h3>'+matrix[i][0]+'</h3><div class="tags"></div>');
  2545.             } else {
  2546.                 let parsed_tag = matrix[i][j].replace(" ", "%20");
  2547.                 $(".tags_group .tags").eq(i).append('<a href="/tagged/'+parsed_tag+'" taget="_blank">'+matrix[i][j]+'</a>');
  2548.             }
  2549.         }
  2550.     }
  2551.     {/block:ifTagsList}
  2552.        
  2553.     //custom audio
  2554.     customAudio(audioSettings);
  2555.     let audios = $(".audio-caption");
  2556.    
  2557.     for (let i = 0; i<audios.length; i++) {
  2558.        let idPost = audios[i].closest('section').id;
  2559.        let currentAudioPost = document.getElementById(idPost);
  2560.        let details = $(currentAudioPost).find('.title');
  2561.        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;
  2562.         let wrapper = audios[i].closest('figure');
  2563.     }
  2564.  
  2565.     //dark mode
  2566.     if (theme === 'dark') {
  2567.         $(".btn_dark_mode").html('<i class="bi bi-sun"></i>');
  2568.     } else {
  2569.         $(".btn_dark_mode").html('<i class="bi bi-moon-stars"></i>');
  2570.     }
  2571.     $('.btn_dark_mode, #btn_mode_mobile').click(function(){
  2572.             if (theme === 'dark') {
  2573.                 $(".btn_dark_mode, #btn_mode_mobile").html('<i class="bi bi-moon-stars"></i>');
  2574.                 localStorage.setItem('theme', 'light');
  2575.                 document.documentElement.setAttribute('data-theme', 'light');
  2576.                 theme = "light";
  2577.             } else {
  2578.                 $(".btn_dark_mode, #btn_mode_mobile").html('<i class="bi bi-sun"></i>');
  2579.                 localStorage.setItem('theme', 'dark');
  2580.                 document.documentElement.setAttribute('data-theme', 'dark');
  2581.                 theme = "dark";
  2582.             }
  2583.     });
  2584.    
  2585.     //scroll to top button
  2586.     function scrollFunction() {
  2587.         if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {  
  2588.             $('#top_button').css("transform", "translateY(0px)");
  2589.         } else {
  2590.             $('#top_button').css("transform", "translateY(200px)");
  2591.         }
  2592.     }
  2593.  
  2594.     $('#top_button').click(function(){
  2595.         document.body.scrollTop = 0;
  2596.         document.documentElement.scrollTop = 0;
  2597.     });
  2598.    
  2599.     $(window).on("scroll", function() {
  2600.         scrollFunction();
  2601.     });
  2602. });
  2603.  
  2604. //onload loading
  2605. if(window.location.href.indexOf("customize") === -1) {
  2606.     $(window).on('load', function () {
  2607.         $("#loading").css("display", "none");
  2608.     });
  2609. } else {
  2610.     $("#loading").css("display", "none");
  2611. }
  2612.  
  2613. function playbtn(id) {
  2614.    if($('#'+id+" audio")[0].paused) {
  2615.        $('#btn_play_'+id)[0].innerHTML = audioSettings.pauseButton;
  2616.        $('#'+id+" audio")[0].play();
  2617.     } else {
  2618.         $('#btn_play_'+id)[0].innerHTML = audioSettings.playButton;
  2619.         $('#'+id+" audio")[0].pause();
  2620.     }
  2621. }
  2622.  
  2623. </script>
  2624.  
  2625. </body>
  2626. </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!