API tools faq
paste
skypxllar

Streamer Luck Theme

skypxllar
Nov 17th, 2022 (edited)
483
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 112.45 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3.    STREAMER LUCK THEME: A simple and functional theme
  4.    AUTHOR: Β© SKYE TRICKSTER (Vincent)
  5.    TUMBLR: @mxstball
  6.    GITHUB: @skye-trickster
  7.    VERSION: 2.0.1a
  8.    RELEASE DATE: 22 OCTOBER 2023
  9.    GET THE THEME: https://skyetrick-streamerluck.tumblr.com/
  10.    TEXT ICON CREDIT: GOOGLE MATERIAL
  11.    
  12.    Credits:
  13.        - Lightbox tutorial by shythemes: https://shythemes.tumblr.com/post/140444996328/tutorial-lightboxes
  14.        - Audio Player tutorial by octomoosey: https://octomoosey.tumblr.com/post/165373017577/hi-g-im-in-the-process-of-creating-my-own-theme
  15.        - NPF Format rendering by eggdesign: https://npftemplate.tumblr.com/
  16.    
  17.    Please do not remove the credit.
  18. -->
  19. <html lang="en">
  20.  
  21. <head>
  22.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  23.     <title>{Title}{block:SearchPage} - {URLSafeSearchQuery}{/block:SearchPage}{block:TagPage} - {URLSafeTag}{/block:TagPage}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
  24.  
  25.     {block:Hidden}
  26.  
  27.     <!-- VARIABLES -->
  28.    
  29.     <!-- NPF RENDERING -->
  30.     <meta name="if:Show Npf Rendering" content="1">
  31.     <!-- /NPF RENDERING -->
  32.    
  33.     <meta name="text:Custom Ask Label" content="Ask">
  34.     <meta name="text:Custom Submit Label" content="Submit">
  35.     <meta name="text:Custom Pages Label" content="Links">
  36.     <meta name="text:Tagline" content="Caught in my Electroweb">
  37.     <meta name="text:Status Name" content="Playing">
  38.     <meta name="text:Status" content="Pokemon Scarlet">
  39.     <meta name="text:Status URL" content="https://scarletviolet.pokemon.com/en-us/">
  40.     <meta name="text:Subtitle" content="Swayshock">
  41.     <meta name="text:Description" content="This is a description.">
  42.    
  43.     <meta name="text:Updates Title" content="Updates">
  44.     <meta name="text:Updates Link" content="">
  45.     <meta name="text:Updates Text" content="Feel free to place updates here">
  46.  
  47.     <meta name="text:Custom Links Title" content="Categories">
  48.     <meta name="text:Link 1 Name" content="">
  49.     <meta name="text:Link 1 URL" content="">
  50.    
  51.     <meta name="text:Link 2 Name" content="">
  52.     <meta name="text:Link 2 URL" content="">
  53.    
  54.     <meta name="text:Link 3 Name" content="">
  55.     <meta name="text:Link 3 URL" content="">
  56.    
  57.     <meta name="text:Link 4 Name" content="">
  58.     <meta name="text:Link 4 URL" content="">
  59.    
  60.     <meta name="text:Link 5 Name" content="">
  61.     <meta name="text:Link 5 URL" content="">
  62.    
  63.     <meta name="text:Link 6 Name" content="">
  64.     <meta name="text:Link 6 URL" content="">
  65.  
  66.     <meta name="text:Link 7 Name" content="">
  67.     <meta name="text:Link 7 URL" content="">
  68.    
  69.     <meta name="text:Link 8 Name" content="">
  70.     <meta name="text:Link 8 URL" content="">
  71.    
  72.     <meta name="text:Common Tag 1" content="tag1">
  73.     <meta name="text:Common Tag 2" content="tag2">    
  74.     <meta name="text:Common Tag 3" content="tag3">
  75.  
  76.     <!-- FONTS -->
  77.     <meta name="font:Title Font" content="Helvetica Neue">
  78.     <meta name="font:Body Font" content="Arial, Helvetica, sans-serif">
  79.     <meta name="font:Chat Font" content="Square Serif">
  80.     <meta name="select:Font Size" content="16px" title="16px (Default)">    
  81.     <meta name="select:Font Size" content="14px" title="14">
  82.     <meta name="select:Font Size" content="18px" title="18">
  83.     <meta name="select:Font Size" content="20px" title="20">
  84.  
  85.     <!-- IMAGES -->
  86.     <meta name="image:Background Image" content="">
  87.     <meta name="image:Mobile Background Image" content="">
  88.     <meta name="image:Featured Icon" content="">
  89.  
  90.     <!-- COLORS: LIGHT MODE -->
  91.     <meta name="color:Background Color" content="#cdb4db">
  92.     <meta name="color:Text Color" content="#000">
  93.     <meta name="color:Link Color" content="#4d36c4">
  94.     <meta name="color:Disabled Link Color" content="grey">
  95.     <meta name="color:Link Blend Color" content="#4d36c4">
  96.     <meta name="color:Link Hover Color" content="#000033">
  97.     <meta name="color:Profile Intro Color" content="#ffafcc">
  98.     <meta name="color:Avatar Border Color" content="#333">
  99.     <meta name="color:Reblog Header Border Color" content="#000">
  100.     <meta name="color:Post Background Color" content="#ffc8dd">
  101.     <meta name="color:Post Border Color" content="#a2d2ff">
  102.     <meta name="color:Post Footer Color" content="#bde0fe">
  103.     <meta name="color:Photo Clickthrough Background Color" content="#aaa">
  104.     <meta name="color:Photo Clickthrough Color" content="#000">
  105.  
  106.     <meta name="color:Desktop Sidebar Color" content="#ffc8dd">
  107.     <meta name="color:Actions Background Color" content="#ff0">
  108.     <meta name="color:Actions Hover Background Color" content="#ff8">
  109.     <meta name="color:Actions Desktop Color" content="#000">
  110.     <meta name="color:Actions Active Background Color" content="#fff">
  111.     <meta name="color:Actions Border Color" content="#000">
  112.    
  113.     <meta name="color:Ask Border Color" content="#a9259d">
  114.     <meta name="color:Ask Background Color" content="#ffafcc">
  115.     <meta name="color:Asker Barrier Color" content="#a9259d">
  116.  
  117.     <meta name="color:Chat Background Color" content="#ffafcc">
  118.     <meta name="color:Chat Odd Background Color" content="#bde0fe">
  119.    
  120.     <meta name="color:Tag Background Color" content="#ff0">
  121.     <meta name="color:Tag Background Hover Color" content="#fff">
  122.  
  123.     <meta name="color:Mobile Sidebar Background Color" content="#ffc8dd">
  124.     <meta name="color:Mobile Sidebar Link Color" content="#222">
  125.     <meta name="color:Mobile Sidebar Link Hover Background Color" content="#fff">
  126.     <meta name="color:Mobile Sidebar Border Color" content="#a9259d">
  127.    
  128.     <meta name="color:Desktop Sidebar Border Color" content="#a9259d">
  129.     <meta name="color:Desktop Sidebar Link Color" content="darkblue">
  130.  
  131.     <meta name="color:Search Background Color" content="#a2d2ff">
  132.     <meta name="color:Search Text Color" content="black">
  133.     <meta name="color:Search Border Color" content="#a9259d">
  134.     <meta name="color:Search Placeholder Color" content="#444">
  135.  
  136.     <!-- LIKE AND REBLOG BUTTON COLORS -->
  137.     <meta name="if:Enable Dark Mode" content="1">
  138.     <meta name="if:Dark Mode By Default" content="0">
  139.     <meta name="if:Black Like and Reblog Button" content="0">
  140.     <meta name="if:Dark Mode Black Like and Reblog Button" content="0">
  141.    
  142.     <!-- SHADOWS -->
  143.     <meta name="if:Desktop Nav Shadow" content="0">
  144.     <meta name="if:Desktop Action Shadow" content="0">
  145.     <meta name="if:Dark Desktop Nav Shadow" content="1">
  146.     <meta name="if:Dark Desktop Action Shadow" content="0">
  147.     <meta name="if:Text Shadow" content="1">
  148.     <meta name="if:Dark Text Shadow" content="0">
  149.     <meta name="if:Reblog Avatar Shadow" content="1">
  150.     <meta name="if:Dark Reblog Avatar Shadow" content="1">
  151.     <meta name="if:Post Shadow" content="1">
  152.     <meta name="if:Dark Post Shadow" content="1">
  153.     <meta name="if:Tag Shadow" content="1">
  154.     <meta name="if:Dark Tag Shadow" content="1">
  155.  
  156.     <!-- COLORS: LIGHT MODE -->
  157.     <meta name="color:Dark Background Color" content="#441d6e">
  158.     <meta name="color:Dark Text Color" content="#fff">
  159.     <meta name="color:Dark Link Color" content="#ff0">
  160.     <meta name="color:Dark Disabled Link Color" content="grey">
  161.     <meta name="color:Dark Link Blend Color" content="#ff0">
  162.     <meta name="color:Dark Link Hover Color" content="#cccc00">
  163.     <meta name="color:Dark Profile Intro Color" content="#0e0e10">
  164.     <meta name="color:Dark Avatar Border Color" content="#fff">
  165.     <meta name="color:Dark Reblog Header Border Color" content="#888">
  166.     <meta name="color:Dark Post Background Color" content="#362176">
  167.     <meta name="color:Dark Post Border Color" content="#ff7ed0">
  168.     <meta name="color:Dark Post Footer Color" content="#2b069a">
  169.     <meta name="color:Dark Photo Clickthrough Background Color" content="#333">
  170.     <meta name="color:Dark Photo Clickthrough Color" content="#fff">
  171.     <meta name="color:Dark Actions Background Color" content="#ff0">
  172.     <meta name="color:Dark Actions Hover Background Color" content="#ff8">
  173.     <meta name="color:Dark Actions Desktop Color" content="#000">
  174.     <meta name="color:Dark Actions Active Background Color" content="#fff">
  175.     <meta name="color:Dark Actions Border Color" content="#000">
  176.    
  177.     <meta name="color:Dark Ask Border Color" content="#000">
  178.     <meta name="color:Dark Ask Background Color" content="#000">
  179.     <meta name="color:Dark Asker Barrier Color" content="#888">
  180.    
  181.     <meta name="color:Dark Chat Background Color" content="#000">
  182.     <meta name="color:Dark Chat Odd Background Color" content="#333">
  183.    
  184.     <meta name="color:Dark Tag Background Color" content="#333333">
  185.     <meta name="color:Dark Tag Background Hover Color" content="#000">
  186.  
  187.     <meta name="color:Dark Mobile Sidebar Background Color" content="#333">
  188.     <meta name="color:Dark Mobile Sidebar Link Color" content="#eee">
  189.     <meta name="color:Dark Mobile Sidebar Link Hover Background Color" content="#666">
  190.     <meta name="color:Dark Mobile Sidebar Border Color" content="#000">
  191.  
  192.     <meta name="color:Dark Desktop Sidebar Color" content="#18181b">
  193.    
  194.     <meta name="color:Dark Desktop Sidebar Border Color" content="black">
  195.     <meta name="color:Dark Desktop Sidebar Link Color" content="yellow">
  196.  
  197.     <meta name="color:Dark Search Background Color" content="#aaa">
  198.     <meta name="color:Dark Search Text Color" content="black">
  199.     <meta name="color:Dark Search Border Color" content="grey">
  200.     <meta name="color:Dark Search Placeholder Color" content="#222">
  201.  
  202.     <!-- EXTRA TOGGLES -->
  203.     <meta name="if:Flip Sidebar" content="0">
  204.     <meta name="if:Flip Post Orientation" content="0">
  205.     <meta name="if:Two Column Side Links" content="0">
  206.     <meta name="if:Stretch Background" content="1">
  207.     <meta name="if:Follow Button" content="1">
  208.     <meta name="if:Hide Mobile Header" content="0">
  209.     <meta name="if:Full Width Photosets" content="1">
  210.     <meta name="if:Show Featured Image Border" content="0">
  211.     <meta name="if:Show Body Image Border" content="1">
  212.     <!-- / VARIABLES -->
  213.     {/block:Hidden}
  214.  
  215.     <link rel="shortcut icon" href="{Favicon}">
  216.  
  217.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  218.     {block:Description}
  219.     <meta name="description" content="{MetaDescription}">
  220.     {/block:Description}
  221.  
  222.     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  223.  
  224.     <style>
  225.         /* LIGHT MODE */
  226.         :root {
  227.             --background-color: {color:Background Color};
  228.             --text-color: {color:Text Color};
  229.             --link-color: {color:Link Color};
  230.             --link-disabled-color: {color:Disabled Link Color};
  231.             --link-blend-color: {color:Link Blend Color};
  232.             --link-hover-color: {color:Link Hover Color};
  233.  
  234.             --avatar-border-color: {color:Avatar Border Color};
  235.            
  236.             --intro-background-color: {color:Profile Intro Color};
  237.            
  238.             --post-background-color: {color:Post Background Color};
  239.             --post-border-color: {color:Post Border Color};
  240.             --post-footer-color: {color:Post Footer Color};
  241.            
  242.             --reblog-header-border-color: rgba({RGBcolor:Reblog Header Border Color}, 0.4);
  243.  
  244.             --clickthrough-background-color: {color:Photo Clickthrough Background Color};
  245.             --clickthrough-color: {color:Photo Clickthrough Color};
  246.            
  247.             --ask-border-color: {color:Ask Border Color};
  248.             --ask-background-color: {color:Ask Background Color};
  249.             --ask-barrier-color: {color:Asker Barrier Color};
  250.            
  251.             --chat-background-color: {color:Chat Background Color};
  252.             --chat-odd-background-color: {color:Chat Odd Background Color};
  253.            
  254.             --blockquote-color: rgba({RGBcolor:Text Color}, 0.4);
  255.            
  256.            
  257.             --test-shadow: none;
  258.             --mobile-side-shadow: none;
  259.             --post-shadow: none;
  260.             --reblog-avatar-shadow: none;
  261.             --tag-shadow: none;
  262.            
  263.             {block:IfTextShadow}
  264.             --text-shadow: -2px 2px black;
  265.             --mobile-side-shadow: -2px 3px 3px black;
  266.             {/block:IfTextShadow}
  267.             --post-shadow: none;
  268.             {block:IfReblogAvatarShadow}
  269.             --reblog-avatar-shadow: -2px 2px 2px black;
  270.             {/block:IfReblogAvatarShadow}
  271.             {block:IfPostShadow}
  272.             --post-shadow: 0px 3px 3px black;
  273.             {/block:IfPostShadow}
  274.             {block:IfTagShadow}
  275.             --tag-shadow: 0 2px 2px black;
  276.             {/block:IfTagShadow}
  277.            
  278.             --tag-background-color: {color:Tag Background Color};
  279.             --tag-background-color-hover: {color:Tag Background Hover Color};
  280.            
  281.             --sidebar-background-color: rgba(0, 0, 0, 0.5);
  282.             --sidebar-wrapper-background-color: {color:Mobile Sidebar Background Color};
  283.             --side-link-color: {color:Mobile Sidebar Link Color};
  284.             --sidebar-link-background-color: {color:Mobile Sidebar Link Hover Background Color};
  285.             --sidebar-border-color: {color:Mobile Sidebar Border Color};
  286.             --actions-background-color: {color:Actions Background Color};
  287.             --actions-hover-background-color: {color:Actions Hover Background Color};
  288.             --actions-click-background-color: {color:Actions Active Background Color};
  289.         }
  290.        
  291.         /* DARK MODE */
  292.         :root.dark-mode {
  293.             --background-color: {color:Dark Background Color};
  294.             --text-color: {color:Dark Text Color};
  295.             --link-color: {color:Dark Link Color};
  296.             --link-disabled-color: {color:Dark Disabled Link Color};
  297.             --link-blend-color: {color:Dark Link Blend Color};
  298.             --link-hover-color: {color:Dark Link Hover Color};
  299.            
  300.             --avatar-border-color: {color:Dark Avatar Border Color};
  301.             --intro-background-color: {color:Dark Profile Intro Color};
  302.            
  303.             --post-background-color: {color:Dark Post Background Color};
  304.             --post-border-color: {color:Dark Post Border Color};
  305.             --post-footer-color: {color:Dark Post Footer Color};
  306.            
  307.             --reblog-header-border-color: rgba({RGBcolor:Dark Reblog Header Border Color}, 0.4);
  308.            
  309.             --clickthrough-background-color: {color:Dark Photo Clickthrough Background Color};
  310.             --clickthrough-color: {color:Dark Photo Clickthrough Color};
  311.            
  312.             --ask-border-color: {color:Dark Ask Border Color};
  313.             --ask-background-color: {color:Dark Ask Background Color};
  314.             --ask-barrier-color: {color:Dark Ask Barrier Color};
  315.            
  316.             --chat-background-color: {color:Dark Chat Background Color};
  317.             --chat-odd-background-color: {color:Dark Chat Odd Background Color};
  318.            
  319.             --blockquote-color: rgba({RGBcolor:Dark Text Color}, 0.4);
  320.            
  321.             --text-shadow: none;
  322.             --mobile-side-shadow: none;
  323.             --post-shadow: none;
  324.             --reblog-avatar-shadow: none;
  325.             --tag-shadow: none;
  326.             {block:IfDarkTextShadow}
  327.             --text-shadow: -2px 2px black;
  328.             --mobile-side-shadow: -2px 3px 3px black;
  329.             {/block:IfDarkTextShadow}
  330.             {block:IfDarkReblogAvatarShadow}
  331.             --reblog-avatar-shadow: -2px 2px 2px black;
  332.             {/block:IfDarkReblogAvatarShadow}
  333.             {block:IfDarkPostShadow}
  334.             --post-shadow: 0px 3px 3px black;
  335.             {/block:IfDarkPostShadow}
  336.             {block:IfDarkTagShadow}
  337.             --tag-shadow: 0 2px 2px black;
  338.             {/block:IfDarkTagShadow}
  339.            
  340.             --tag-background-color: {color:Dark Tag Background Color};
  341.             --tag-background-color-hover: {color:Dark Tag Background Hover Color};
  342.             --tag-shadow-color: black;
  343.            
  344.             --sidebar-background-color: rgba(0, 0, 0, 0.5);
  345.             --sidebar-wrapper-background-color: {color:Dark Mobile Sidebar Background Color};
  346.             --side-link-color: {color:Dark Mobile Sidebar Link Color};
  347.             --sidebar-link-background-color: {color:Dark Mobile Sidebar Link Hover Background Color};
  348.             --sidebar-border-color: {color:Dark Mobile Sidebar Border Color};
  349.             --actions-background-color: {color:Dark Actions Background Color};
  350.             --actions-hover-background-color: {color:Dark Actions Hover Background Color};
  351.             --actions-click-background-color: {color:Dark Actions Active Background Color};
  352.         }
  353.  
  354.         /* ALL VARIANTS */
  355.         :root {
  356.             --title-font: {font:Title Font};
  357.             --body-font: {font:Body Font};
  358.             --chat-font: {font:Chat Font};
  359.            
  360.             --avatar-border: 2px solid var(--avatar-border-color);
  361.            
  362.             --mobile-header-height: 60px;
  363.             --mobile-header-height-pushdown: calc(var(--mobile-header-height) + 54px);
  364.             --mobile-nav-height: 7vh;
  365.         }
  366.        
  367.         /* MOBILE STYLING */
  368.         * {
  369.             margin: 0;
  370.             padding: 0;
  371.             box-sizing: border-box;
  372.             font-family: {font:Body Font};
  373.             color: var(--text-color);
  374.         }
  375.        
  376.         .like_button_list > * {
  377.             display: none;
  378.         }
  379.        
  380.         .light_black .like_button_black,
  381.         .light_grey .like_button_grey,
  382.         .light_white .like_button_white {
  383.             display: block;
  384.         }
  385.        
  386.         .dark-mode .like_button_list > * {
  387.             display: none;
  388.         }
  389.  
  390.         .dark-mode .dark_black .like_button_black,
  391.         .dark-mode .dark_grey .like_button_grey,
  392.         .dark-mode .dark_white .like_button_white {
  393.             display: block;
  394.         }
  395.        
  396.         .material-icons {
  397.             font-size: 2em;
  398.         }
  399.        
  400.         main .material-icons {
  401.             font-size: 1em;
  402.         }
  403.  
  404.         a {
  405.             color: var(--link-color);
  406.             text-decoration: none;
  407.         }
  408.        
  409.         a:hover {
  410.             color: var(--link-hover-color);
  411.             text-decoration: underline;
  412.             -webkit-transition: 1s color;
  413.             -moz-transition: 1s color;
  414.             -ms-transition: 1s color;
  415.             -o-transition: 1s color;
  416.             transition: 1s;
  417.         }
  418.        
  419.         html {
  420.             color: var(--text-color);
  421.             visibility: hidden;
  422.             font-size: {select:Font Size};
  423.             background-color:  {color:Background Color};
  424.         }
  425.        
  426.         @media all and (prefers-color-scheme: dark) {
  427.             html {
  428.                 background-color: {color:Dark Background Color}
  429.             }
  430.         }
  431.        
  432.         html.loaded {
  433.             visibility: visible;
  434.             background-color: var(--background-color);
  435.             -webkit-transition: 1s background-color;
  436.             -moz-transition: 1s background-color;
  437.             -ms-transition: 1s background-color;
  438.             -o-transition: 1s background-color;
  439.             transition: background-color 1s;
  440.         }
  441.        
  442.         /* For image and mobile sidebar */
  443.         html.no-scroll, html.mobile-disabled {
  444.             overflow: hidden;
  445.         }
  446.        
  447.         main {
  448.             opacity: 0;
  449.         }
  450.        
  451.         .loaded main {
  452.             opacity: 1;
  453.             -webkit-transition: 1s;
  454.             -moz-transition: 1s;
  455.             -ms-transition: 1s;
  456.             -o-transition: 1s;
  457.             transition: opacity 1s;
  458.         }
  459.        
  460.         .main-wrapper {
  461.             margin-bottom: var(--mobile-nav-height);
  462.         }
  463.        
  464.         .intro-info {
  465.             width: 100%;
  466.             padding: 0 10px;
  467.         }
  468.        
  469.         /* HEADER INTRO SPACING */
  470.         .header-intro {
  471.             background-color: var(--intro-background-color);
  472.             display: flex;
  473.             align-items: center;
  474.             justify-content: space-between;
  475.             padding: 5px 10px;
  476.             position: fixed;
  477.             top: 0px;
  478.             right: 0px;
  479.             left: 0px;
  480.             height: var(--mobile-header-height);
  481.             z-index: 50;
  482.         }
  483.        
  484.         .tmblr-iframe-pushdown .header-intro {
  485.             margin-top: 54px;
  486.         }
  487.        
  488.         .header-image {
  489.             height: 100%;
  490.             display: flex;
  491.             align-items: center;
  492.         }
  493.        
  494.         .header-image > img {
  495.             max-height: 100%;
  496.             object-fit: contain;
  497.             border: var(--avatar-border);
  498.             border-radius: 50%;
  499.             height: 100px;
  500.         }
  501.        
  502.         .headline {
  503.             display: flex;
  504.             justify-content: space-between;
  505.             align-items: center;
  506.             width: 100%;
  507.         }
  508.        
  509.         .headline .title {
  510.             margin: auto;
  511.             font-size: 2em;
  512.         }
  513.        
  514.         .headline .title a {
  515.             color: inherit;
  516.             text-decoration: none;
  517.             font-size: inherit;
  518.         }
  519.        
  520.         .status {
  521.             font-weight: bold;
  522.         }
  523.        
  524.         {block:IfStatus}
  525.         .status-name::after {
  526.             content: ":";
  527.         }
  528.         {/block:IfStatus}
  529.        
  530.         /* ELEMENTS HIDING ON MOBILE */
  531.  
  532.         .actions {
  533.             display: flex;
  534.         }
  535.        
  536.         .actions > * {
  537.             background: none;
  538.             border: none;
  539.             display: flex;
  540.             align-items: center;
  541.         }
  542.         .actions *:hover {
  543.             text-decoration: none;
  544.         }
  545.        
  546.         .actions > button:hover {
  547.             cursor: pointer;
  548.             -webkit-user-select: none;
  549.             user-select: none;
  550.         }
  551.        
  552.         .actions .material-icons {
  553.             color: var(--actions-background-color);
  554.         }
  555.        
  556.         .actions .material-icons:hover {
  557.             text-decoration: none;
  558.             color: var(--actions-hover-background-color);
  559.             -webkit-transition: 1s;
  560.             -moz-transition: 1s;
  561.             -ms-transition: 1s;
  562.             -o-transition: 1s;
  563.             transition: 1s;
  564.         }
  565.        
  566.         .actions .material-icons:active {
  567.             color: var(--actions-click-background-color);
  568.         }
  569.        
  570.         .tagline,
  571.         .auxillary,
  572.         .follow {
  573.             display: none;
  574.         }
  575.        
  576.         /* NAVIGATION SPACING */
  577.         .navigation {
  578.             display: flex;
  579.             justify-content: space-between;
  580.             align-items: center;
  581.             background-color: var(--intro-background-color);
  582.             padding: 5px 10px;
  583.             position: fixed;
  584.             bottom: 0px;
  585.             left: 0px;
  586.             right: 0px;
  587.             min-height: var(--mobile-nav-height);
  588.             height: var(--mobile-nav-height);
  589.             z-index: 50;
  590.         }
  591.        
  592.         .navigation ul {
  593.             display: flex;
  594.             flex: 1 1 100%;
  595.             text-align: center;
  596.         }
  597.        
  598.         .navigation li {
  599.             width: 100%;
  600.             list-style: none;
  601.             height: 100%;
  602.         }
  603.        
  604.         .navigation li a {
  605.             display: flex;
  606.             flex-direction: column;
  607.             align-items: center;
  608.             justify-content: center;
  609.             text-decoration: none;
  610.             color: var(--link-blend-color);
  611.         }
  612.        
  613.         .navigation .nav-disabled a {
  614.             color: var(--link-disabled-color);
  615.             pointer-events: none;
  616.         }
  617.        
  618.         .navigation .nav-disabled .nav-link {
  619.             color: var(--link-disabled-color);
  620.         }
  621.        
  622.         .nav-disabled:hover {
  623.             text-decoration: none;
  624.         }
  625.        
  626.         .nav-disabled .material-icons {
  627.             color: var(--link-disabled-color);
  628.         }
  629.        
  630.         .navigation .nav-enabled a {
  631.             color: var(--text-color);
  632.             pointer-events: initial;
  633.         }
  634.        
  635.         .navigation li a:hover * {
  636.             color: var(--link-color);
  637.             cursor: pointer;
  638.         }
  639.        
  640.         /* MAIN ELEMENT */
  641.         .background {
  642.             position: fixed;
  643.             top: 0;
  644.             bottom: 0;
  645.             left: 0;
  646.             right: 0;
  647.             z-index: -100;
  648.             background-size: cover;
  649.             {block:IfStretchBackground}
  650.             background-size: 100% 100%;
  651.             {/block:IfStretchBackground}
  652.             background-image: url('{image:Mobile Background Image}')
  653.         }
  654.        
  655.         .featured-icon {
  656.             display: none;
  657.         }
  658.        
  659.         /*  POST STYLING */
  660.         .posts {
  661.             margin-top: var(--mobile-header-height);
  662.         }
  663.        
  664.         .post {
  665.             margin-bottom: 15px;
  666.         }
  667.        
  668.         .search-result {
  669.             text-align: center;
  670.             padding: 10px;
  671.             font-size: 1.5em;
  672.         }
  673.        
  674.         .search_query, .tag {
  675.             font-weight: bold;
  676.         }
  677.        
  678.         .post-body,
  679.         .note-wrapper {
  680.             background-color: var(--post-background-color);
  681.             border-top: 3px solid var(--post-border-color);
  682.             border-bottom: 3px solid var(--post-border-color);
  683.             box-shadow: var(--post-shadow);
  684.         }
  685.        
  686.         .post:first-child > .post-body {
  687.             border-top: none;
  688.         }
  689.        
  690.         .post-body .title {
  691.             margin-top: 3px;
  692.             text-align: center;
  693.             text-shadow: var(--text-shadow);
  694.             font-size: 2em;
  695.         }
  696.        
  697.         .post-body ul, .post-body ol {
  698.             margin-inline-start: 40px;
  699.         }
  700.        
  701.         .post-content a, .post-caption a {
  702.             text-decoration: underline;
  703.         }
  704.        
  705.         /* REBLOG STYLING */
  706.         .reblog-item {
  707.             border-bottom: 1px solid var(--post-border-color);
  708.         }
  709.        
  710.         .reblog-item:last-child {
  711.             border-bottom: none;
  712.         }
  713.        
  714.         .post.reblog .post-content {
  715.             display: none;
  716.         }
  717.        
  718.         .post-reblog-header {
  719.             border-bottom: 1px solid var(--reblog-header-border-color);
  720.             padding: 10px 0;
  721.             margin: 0 5%;
  722.         }
  723.        
  724.         .post-reblog-wrapper {
  725.             display: flex;
  726.             align-items: center;
  727.             justify-content: center;
  728.         }
  729.        
  730.         .reblog-avatar {
  731.             display: inline;
  732.             width: 2em;
  733.         }
  734.        
  735.         .reblog-avatar img {
  736.             width: 100%;
  737.             border-radius: 50%;
  738.             box-shadow: var(--reblog-avatar-shadow);
  739.         }
  740.        
  741.         .reblog-username {
  742.             margin-left: 10px;
  743.             text-transform: uppercase;
  744.             font-weight: bold;
  745.             text-align: center;
  746.             font-size: 1.4em;
  747.             text-shadow: -2px 2px 2px var(--text-shadow-color);
  748.             text-decoration: none;
  749.         }
  750.        
  751.         .post.reblog .reblog-list .post-content {
  752.             display: block;
  753.         }
  754.        
  755.         /* TEXT POST CONTENT */
  756.  
  757.         .post-content {
  758.             padding: 5px 10px 15px 10px;
  759.         }
  760.        
  761.         .post-content > * {
  762.             margin-top: 7px;
  763.         }
  764.        
  765.         .post-content h2 {
  766.             font-weight: normal;
  767.         }
  768.        
  769.         .post-content ul {
  770.             list-style: disc inside;
  771.         }
  772.        
  773.         .post-content ol {
  774.             list-style: decimal inside;
  775.         }
  776.        
  777.         .post-content blockquote {
  778.             border-left: 3px solid var(--blockquote-color);
  779.             margin: 1em 0;
  780.             padding-left: 15px;
  781.             padding-right: 10px;
  782.         }
  783.        
  784.         .post-content figure img {
  785.             {block:IfShowBodyImageBorder}
  786.             border: 1px solid var(--post-border-color);
  787.             {/block:IfShowBodyImageBorder}
  788.             object-fit: contain;
  789.             max-width: 100%;
  790.         }
  791.  
  792.         /* SUBMISSION STYLING */
  793.         .submission-header {
  794.             padding: 10px;
  795.             background-color: var(--post-footer-color);
  796.             display: flex;
  797.             justify-content: center;
  798.             align-items: center;
  799.             margin-bottom: 5px;
  800.             border-bottom: 1px solid var(--post-border-color);
  801.         }
  802.        
  803.         .submission-header > * {
  804.             margin-right: 10px;
  805.         }
  806.        
  807.         .submitter-avatar {
  808.             width: 2em;
  809.         }
  810.        
  811.         /* PHOTO TYPE */
  812.         .post.photo .photo-header {
  813.             margin-bottom: 5px;
  814.             display: flex;
  815.         }
  816.        
  817.         .post.photo .featured {
  818.             display: flex;
  819.             justify-content: center;
  820.             {block:IfShowFeaturedImageBorder}
  821.             border: 2px solid var(--post-border-color);
  822.             border-radius: 3px;
  823.             {/block:IfShowFeaturedImageBorder}
  824.             {block:IfNotShowFeaturedImageBorder}
  825.             border: none;
  826.             {/block:IfNotShowFeaturedImageBorder}
  827.             margin: 0px auto;
  828.             flex-direction: column;
  829.             width: 100%;
  830.         }
  831.        
  832.         .post.photo .featured img {
  833.             max-width: 100%;
  834.         }
  835.        
  836.         .post.photo .click-through {
  837.             background-color: var(--clickthrough-background-color);
  838.             padding: 3px;
  839.             text-align: center;
  840.             border-top: 2px solid var(--post-border-color);
  841.             {block:IfNotShowFeaturedImageBorder}
  842.             border-bottom: 2px solid var(--post-border-color);
  843.             {/block:IfNotShowFeaturedImageBorder}
  844.         }
  845.        
  846.         .post.photo .click-through a {
  847.             color: var(--clickthrough-color);
  848.             text-decoration: none;
  849.             display: block;
  850.             font-weight: bold;
  851.             overflow: hidden;
  852.             white-space: nowrap;
  853.             padding: 3px;
  854.             text-overflow: ellipsis;
  855.         }
  856.        
  857.         .post.photo .click-through a:hover {
  858.             text-decoration: underline;
  859.         }
  860.        
  861.         .post.photo .post-caption {
  862.             margin: 10px;
  863.         }
  864.        
  865.         .post * {
  866.             max-width: 100%;
  867.         }
  868.  
  869.         .high-res .featured-image:hover {
  870.             cursor: pointer;
  871.         }
  872.        
  873.         /* PHOTOSET STYLING */
  874.         .photoset {
  875.             display: flex;
  876.             flex-direction: column;
  877.             align-items: center;
  878.         }
  879.        
  880.         .slideshow {
  881.             display: flex;
  882.             flex-direction: column;
  883.             {block:IfFullWidthPhotosets}
  884.             width: 100%;
  885.             {/block:IfFullWidthPhotosets}
  886.             {block:IfNotFullWidthPhotosets}
  887.             max-width: 500px;
  888.             {/block:IfNotFullWidthPhotosets}
  889.         }
  890.  
  891.         .slideshow .row {
  892.             display: flex;
  893.             margin-top: 5px;
  894.         }
  895.  
  896.         .slideshow .row:first-child{
  897.             margin-top: 0;
  898.         }
  899.  
  900.         .slideshow .row .image {
  901.             width: 100%;
  902.             display: flex;
  903.             margin-left: 5px;
  904.             flex-direction: column;
  905.         }
  906.        
  907.         .slideshow .row .image:hover {
  908.             cursor: pointer;
  909.         }
  910.        
  911.         .slideshow .image figcaption {
  912.             text-align: center;
  913.             padding: 5px;
  914.             border-bottom: 1px solid var(--post-border-color);
  915.         }
  916.  
  917.         .slideshow .row .image:first-child {
  918.             margin-left: 0;
  919.         }
  920.  
  921.         .slideshow img {
  922.             width: 100%;
  923.             height: 100%;
  924.             object-fit: cover;
  925.             {block:IfShowFeaturedImageBorder}
  926.             border: 2px solid var(--post-border-color);
  927.             border-radius: 3px;
  928.             {/block:IfShowFeaturedImageBorder}
  929.             {block:IfNotShowFeaturedImageBorder}
  930.             border: none;
  931.             {/block:IfNotShowFeaturedImageBorder}
  932.         }
  933.        
  934.         {block:IfFullWidthPhotosets}
  935.         {block:IfShowFeaturedImageBorder}
  936.         .photoset > .slideshow .row:first-child img {
  937.             border-top: none;
  938.             border-top-left-radius: 0;
  939.             border-top-right-radius: 0;
  940.         }
  941.         .photoset > .slideshow .row .image:first-child img {
  942.             border-left: none;
  943.             border-top-left-radius: 0;
  944.             border-bottom-left-radius: 0;
  945.         }
  946.         .photoset > .slideshow .row .image:last-child img {
  947.             border-right: none;
  948.             border-top-right-radius: 0;
  949.             border-bottom-right-radius: 0;
  950.         }
  951.         {/block:IfFullWidthPhotosets}
  952.         {/block:IfShowFeaturedImageBorder}
  953.        
  954.         .photoset .caption {
  955.             margin-top: 10px;
  956.             width: 100%;
  957.         }
  958.        
  959.         /* QUOTE STYLING */
  960.         .post.quote .quote blockquote {
  961.             font-size: 1.5em;
  962.             text-align: center;
  963.             margin: 10px;
  964.             margin-bottom: 5px;
  965.             text-shadow: var(--text-shadow);
  966.         }
  967.  
  968.         .post.quote .quote blockquote:before {
  969.             content: "❝";
  970.         }
  971.        
  972.         .post.quote .quote blockquote:after {
  973.             content: "❞";
  974.         }
  975.        
  976.         .post.quote .quote .source {
  977.             margin: 10px;
  978.             text-shadow: var(--text-shadow);
  979.             text-align: center;
  980.         }
  981.        
  982.         .post.quote .quote .source:before {
  983.             content: "β€”";
  984.         }
  985.        
  986.         .post.quote .quote .source a {
  987.             font-weight: bold;
  988.         }
  989.        
  990.         /* POST ANSWER STYLING */
  991.         .answer .post-body {
  992.             padding-top: 5px;
  993.         }
  994.        
  995.         .ask-answer, .ask-header {
  996.             display: flex;
  997.             justify-content: space-between;
  998.             flex: 1 1 100%;
  999.             min-height: 80px;
  1000.             margin-bottom: 10px;
  1001.             padding: 0 10px;
  1002.         }
  1003.        
  1004.         .asker-avatar {
  1005.             width: 80px;
  1006.             margin-right: 15px;
  1007.         }
  1008.        
  1009.         .answerer-avatar {
  1010.             width: 80px;
  1011.             margin-left: 15px;
  1012.         }
  1013.        
  1014.         .asker-avatar img, .answerer-avatar img {
  1015.             width: 100%;
  1016.             border-radius: 50%;
  1017.         }
  1018.        
  1019.         .asker-content, .answer-content {
  1020.             background-color: var(--ask-background-color);
  1021.             width: 100%;
  1022.             border: 2px solid var(--ask-border-color);
  1023.         }
  1024.        
  1025.         .asker-content, .answer-content {
  1026.             position: relative;
  1027.             border-radius: 5px;
  1028.             padding: 5px 10px;
  1029.             z-index: 0;
  1030.         }
  1031.        
  1032.         .asker-content::after {
  1033.             content: '';
  1034.             position: absolute;
  1035.             left: 0;
  1036.             top: 40px;
  1037.             width: 0;
  1038.             height: 0;
  1039.             border: 10px solid transparent;
  1040.             border-right-color: var(--ask-border-color);
  1041.             border-left: 0;
  1042.             margin-top: -10px;
  1043.             margin-left: -10px;
  1044.         }
  1045.        
  1046.         .answer-content::after {
  1047.             content: '';
  1048.             position: absolute;
  1049.             right: 0;
  1050.             top: 40px;
  1051.             width: 0;
  1052.             height: 0;
  1053.             border: 10px solid transparent;
  1054.             border-left-color: var(--ask-border-color);
  1055.             border-right: 0;
  1056.             margin-top: -10px;
  1057.             margin-right: -10px;
  1058.         }
  1059.        
  1060.         .answer-asker, .answer-responder {
  1061.             text-transform: uppercase;
  1062.             font-weight: bold;
  1063.             font-size: 1.3em;
  1064.             border-bottom: 1px solid var(--ask-barrier-color);
  1065.             padding: 5px 0;
  1066.             text-align: center;
  1067.             margin-bottom: 5px;
  1068.         }
  1069.        
  1070.         .asker-question, .answerer-answer {
  1071.             text-align: justify;
  1072.         }
  1073.        
  1074.         /* LINK STYLING */
  1075.         .link-wrapper > a {
  1076.             display: flex;
  1077.             justify-content: center;
  1078.             padding-bottom: 10px;
  1079.             margin-top: 0;
  1080.             padding: 0;
  1081.             background-color: var(--clickthrough-background-color);
  1082.         }
  1083.        
  1084.         .link-wrapper > a:hover {
  1085.             text-decoration: none;
  1086.         }
  1087.        
  1088.         .link-thumbnail {
  1089.             flex-grow: 1;
  1090.             flex-basis: 20%;
  1091.             display: flex;
  1092.             align-items: center;
  1093.         }
  1094.        
  1095.         .link-details {
  1096.             flex-grow: 3;
  1097.             padding: 0 10px;
  1098.         }
  1099.        
  1100.         .link-details > * {
  1101.             color: var(--text-color);
  1102.         }
  1103.        
  1104.         .link-details .link-title {
  1105.             font-size: 1.75em;
  1106.             text-align: center;
  1107.             padding-bottom: 5px;
  1108.             padding-top: 5px;
  1109.             margin-bottom: 10px;
  1110.             border-bottom: 1px solid var(--ask-border-color);
  1111.             font-weight: bold;
  1112.         }
  1113.        
  1114.         .link-source {
  1115.             color: var(--link-color);
  1116.             font-weight: bold;
  1117.         }
  1118.        
  1119.         .link-source:hover {
  1120.             text-decoration: underline;
  1121.         }
  1122.        
  1123.         /* CHAT STYLING */
  1124.        
  1125.         .conversation {
  1126.             margin: 10px 0;
  1127.             background-color: var(--chat-background-color);
  1128.         }
  1129.        
  1130.        
  1131.        
  1132.         ul.chat-lines {
  1133.             padding: 5px;
  1134.             list-style: none;
  1135.             margin: 0;
  1136.         }
  1137.        
  1138.         .chat-item {
  1139.             padding: 5px 10px;
  1140.         }
  1141.        
  1142.         .chat-item.chat-odd {
  1143.             background-color: var(--chat-odd-background-color);
  1144.         }
  1145.        
  1146.         .chat-item > * {
  1147.             font-family: var(--chat-font);
  1148.         }
  1149.        
  1150.         .chat-label {
  1151.             font-weight: bold;
  1152.         }
  1153.        
  1154.         /* AUDIO STYLING */
  1155.         .post.audio .audio-wrapper {
  1156.             margin: 10px;
  1157.             margin-top: 0;
  1158.             padding-top: 10px;
  1159.         }
  1160.        
  1161.         .post.audio .audio-embed {
  1162.             text-align: center;
  1163.             margin: 10px;
  1164.         }
  1165.        
  1166.         .playbutton {
  1167.            position:relative;
  1168.            margin-top:45px;
  1169.            margin-left:44px;
  1170.            z-index:9;
  1171.            width:33px;
  1172.            height:30px;
  1173.            overflow:hidden;
  1174.         }
  1175.        
  1176.         .albumart img {
  1177.            position:relative;
  1178.            margin-top:-75px;
  1179.            margin-left: 0px;
  1180.            height:120px;
  1181.            width:120px;
  1182.         }    
  1183.        
  1184.         .trackinfo {
  1185.            margin-bottom:10px;
  1186.            background:var(--clickthrough-background-color);
  1187.            top:-4px;
  1188.            position:relative;
  1189.            margin-left:120px;
  1190.            height:120px;
  1191.            margin-top:-120px;
  1192.         }
  1193.        
  1194.         .trackname {
  1195.            position:relative;
  1196.            padding-top:30px;
  1197.            text-align:center;
  1198.            font-size:14px;
  1199.            text-transform:uppercase;
  1200.            font-weight: bold;
  1201.            letter-spacing:2px;
  1202.         }  
  1203.        
  1204.         .artist {
  1205.            text-align:center;
  1206.            font-size:12px;
  1207.            text-transform:uppercase;
  1208.            letter-spacing:4px;
  1209.         }
  1210.        
  1211.         .album {
  1212.            text-align:center;
  1213.            font-style: italic;
  1214.            letter-spacing:4px;
  1215.         }  
  1216.        
  1217.         .playcount {
  1218.            font-weight: bold;
  1219.            margin-top:5px;
  1220.            text-align:center;
  1221.            letter-spacing:2px;
  1222.         }
  1223.        
  1224.         /* VIDEO STYLING */
  1225.         .video-embed {
  1226.             text-align: center;
  1227.             margin-top: 5px;
  1228.         }
  1229.        
  1230.         /* NPF STYLING */
  1231.         .npf-photoset {
  1232.             margin: 0;
  1233.             margin-bottom: 5px;
  1234.            
  1235.             display: flex;
  1236.             flex-direction: column;
  1237.             row-gap: 5px;
  1238.         }
  1239.  
  1240.         {block:IfNotFullWidthPhotosets}
  1241.         .npf-post-photoset .npf-photoset {
  1242.             max-width: 500px;
  1243.             margin: 0 auto;
  1244.         }
  1245.         {/block:IfNotFullWidthPhotosets}
  1246.        
  1247.         .npf-photoset .row {
  1248.             display: flex;
  1249.             justify-content: space-between;
  1250.             width: 100%;
  1251.             column-gap: 5px;
  1252.         }
  1253.        
  1254.         .npf-photoset .col {
  1255.             width: 100%;
  1256.         }
  1257.        
  1258.         .npf-photoset figure {
  1259.             {block:IfShowFeaturedImageBorder}
  1260.             border: 2px solid var(--post-border-color);
  1261.             border-radius: 3px;
  1262.             {/block:IfShowFeaturedImageBorder}
  1263.             {block:IfNotShowFeaturedImageBorder}
  1264.             border: none;
  1265.             {/block:IfNotShowFeaturedImageBorder}
  1266.         }
  1267.  
  1268.         {block:IfShowFeaturedImageBorder}        
  1269.         .npf-post-photo .npf-photoset .row:first-child figure {
  1270.             border-top: none;
  1271.             border-top-right-radius: 0;
  1272.             border-top-left-radius: 0;
  1273.         }
  1274.        
  1275.         .npf-post-photo .npf-photoset .row > .col:first-child figure {
  1276.             border-left: none;
  1277.             border-top-left-radius: 0;
  1278.             border-bottom-left-radius: 0;
  1279.         }
  1280.        
  1281.         .npf-post-photo .npf-photoset .row > .col:last-child figure {
  1282.             border-right: none;
  1283.             border-top-right-radius: 0;
  1284.             border-bottom-right-radius: 0;
  1285.         }
  1286.         {/block:IfShowFeaturedImageBorder}
  1287.        
  1288.         {block:IfFullWidthPhotosets}
  1289.         {block:IfShowFeaturedImageBorder}        
  1290.         .npf-post-photoset .npf-photoset .row:first-child figure {
  1291.             border-top: none;
  1292.             border-top-right-radius: 0;
  1293.             border-top-left-radius: 0;
  1294.         }
  1295.        
  1296.         .npf-post-photoset .npf-photoset .row > .col:first-child figure {
  1297.             border-left: none;
  1298.             border-top-left-radius: 0;
  1299.             border-bottom-left-radius: 0;
  1300.         }
  1301.        
  1302.         .npf-post-photoset .npf-photoset .row > .col:last-child figure {
  1303.             border-right: none;
  1304.             border-top-right-radius: 0;
  1305.             border-bottom-right-radius: 0;
  1306.         }
  1307.         {/block:IfShowFeaturedImageBorder}
  1308.         {/block:IfFullWidthPhotosets}
  1309.        
  1310.         .npf-photoset a.post_media_photo_anchor {
  1311.             display: flex;
  1312.         }
  1313.        
  1314.         .npf-photoset img {
  1315.             width: 100%;
  1316.         }
  1317.        
  1318.         .npf-photoset .click-through {
  1319.             background-color: var(--clickthrough-background-color);
  1320.             padding: 3px;
  1321.             text-align: center;
  1322.             border-top: 2px solid var(--post-border-color);
  1323.            
  1324.             {block:IfNotShowFeaturedImageBorder}
  1325.             border: 2px solid var(--post-border-color);
  1326.             {/block:IfNotShowFeaturedImageBorder}
  1327.         }
  1328.        
  1329.         .npf-photoset .row > .col:first-child .click-through {
  1330.             border-left: none;
  1331.         }
  1332.        
  1333.         .npf-photoset .row > .col:last-child .click-through {
  1334.             border-right: none;
  1335.         }
  1336.        
  1337.         .npf-photoset .click-through a {
  1338.             color: var(--clickthrough-color);
  1339.             text-decoration: none;
  1340.             display: block;
  1341.             font-weight: bold;
  1342.             overflow: hidden;
  1343.             white-space: nowrap;
  1344.             padding: 3px;
  1345.             text-overflow: ellipsis;
  1346.         }
  1347.        
  1348.        
  1349.         .npf-photoset .click-through a:hover {
  1350.             text-decoration: underline;
  1351.         }
  1352.        
  1353.         /* POST FOOTER STYLING */
  1354.         .post-footer {
  1355.             background-color: var(--post-footer-color);
  1356.             display: flex;
  1357.             justify-content: space-between;
  1358.             align-items: center;
  1359.             font-weight: bold;
  1360.             padding: 5px;
  1361.         }
  1362.        
  1363.         .post-footer .post-info {
  1364.             display: flex;
  1365.             align-items: center;
  1366.             justify-content: flex-start;
  1367.         }
  1368.        
  1369.         .pinned {
  1370.             margin-right: 5px;
  1371.             font-size: 1em;
  1372.         }
  1373.        
  1374.         .post-footer .reblog-from,
  1375.         .post-footer .reblog-from a {
  1376.             color: var(--link-blend-color);
  1377.             display: inline;
  1378.         }
  1379.        
  1380.         .post-meta {
  1381.             display: flex;
  1382.             justify-content: flex-end;
  1383.         }
  1384.        
  1385.         .post-meta li {
  1386.             list-style: none;
  1387.             margin-right: 10px;
  1388.             display: flex;
  1389.             align-items: center;
  1390.         }
  1391.        
  1392.         .post-notes {
  1393.             padding-right: 10px;
  1394.         }
  1395.        
  1396.         .post-notes {
  1397.             color: var(--link-blend-color);
  1398.         }
  1399.        
  1400.         .post-notes:hover {
  1401.             color: var(--link-color);
  1402.         }
  1403.        
  1404.         .post-reblog {
  1405.             display: inline;
  1406.             font-size: 1em;
  1407.             margin-inline: 2px;
  1408.         }
  1409.        
  1410.         /* POST TAGS STYLING */
  1411.         .post-tags {
  1412.             padding: 0px 5px 5px;
  1413.             margin-top: 7px;
  1414.             overflow: auto;
  1415.             white-space: nowrap;
  1416.             text-align: center;
  1417.         }
  1418.        
  1419.         .tag-item {
  1420.             display: inline-block;
  1421.             margin-left: 5px;
  1422.         }
  1423.        
  1424.         .tag-item a {
  1425.             background-color: var(--tag-background-color);
  1426.             color: var(--text-color);
  1427.             padding: 3px 10px;
  1428.             display: inline-block;
  1429.             border-radius: 24px;
  1430.             font-size: 1em;
  1431.             box-shadow: var(--tag-shadow);
  1432.         }
  1433.        
  1434.         .tag-item:first-child {
  1435.             margin-left: 0px;
  1436.         }
  1437.        
  1438.         .tag-item a:hover {
  1439.             background-color: var(--tag-background-color-hover);
  1440.             color: var(--link-color);
  1441.             text-decoration: none;
  1442.         }
  1443.  
  1444.         /* PAGINATION STYLING */
  1445.         .pagination:hover {
  1446.             text-decoration: none;
  1447.         }
  1448.        
  1449.         .pages-wrapper {
  1450.             display: flex;
  1451.             justify-content: space-around;
  1452.             align-items: center;
  1453.             padding: 0 5vw 15px 5vw;
  1454.         }
  1455.        
  1456.         .pages-wrapper .pagination {
  1457.             display: flex;
  1458.             background-color: var(--post-background-color);
  1459.             border: 2px solid var(--post-border-color);
  1460.             border-radius: 3px;
  1461.             color: var(--text-color);
  1462.             padding: 5px 10px;
  1463.             box-shadow: 0px 2px 2px black;
  1464.             -webkit-transition: 0s;
  1465.             -moz-transition: 0s;
  1466.             -ms-transition: 0s;
  1467.             -o-transition: 0s;
  1468.             transition: 0s;
  1469.         }
  1470.        
  1471.         .pages-wrapper .pagination:active {
  1472.             background-color: var(--post-border-color);
  1473.             color: var(--link-color);
  1474.             -webkit-transition: 0s;
  1475.             -moz-transition: 0s;
  1476.             -ms-transition: 0s;
  1477.             -o-transition: 0s;
  1478.             transition: 0s;
  1479.         }
  1480.        
  1481.         .pages-wrapper .pagination.page-number:active {
  1482.             background-color: var(--post-background-color);
  1483.             color: var(--text-color);
  1484.         }
  1485.        
  1486.         .pages-wrapper .pagination .first,
  1487.         .pages-wrapper .pagination .last,
  1488.         .pages-wrapper .pagination .current {
  1489.             display: inline-block;
  1490.         }
  1491.        
  1492.         .pages-wrapper .pagination .material-icons {
  1493.             font-size: 1em;
  1494.         }
  1495.        
  1496.         .fast-forward,
  1497.         .fast-reverse {
  1498.             display: none;
  1499.         }
  1500.        
  1501.         .pages-wrapper .page-number {
  1502.             display: none;
  1503.         }
  1504.        
  1505.         /* SIDEBAR */
  1506.         #sidebar {
  1507.             display: none;
  1508.             background-color: var(--sidebar-background-color);
  1509.             top: var(--mobile-header-height);
  1510.             left: 0;
  1511.             right: 0;
  1512.             bottom: var(--mobile-nav-height);
  1513.         }
  1514.        
  1515.         .tmblr-iframe-pushdown #sidebar {
  1516.             margin-top: 54px;
  1517.         }
  1518.        
  1519.         #sidebar.enabled {
  1520.             display: flex;
  1521.             justify-content: center;
  1522.             align-items: flex-end;
  1523.             position: fixed;
  1524.             z-index: 50;
  1525.         }
  1526.        
  1527.         #sidebar > .wrapper {
  1528.             background-color: var(--sidebar-wrapper-background-color);
  1529.             overflow: hidden;
  1530.             width: 100%;
  1531.         }
  1532.        
  1533.         .pagination,
  1534.         .details,
  1535.         .side-actions,
  1536.         .updates,
  1537.         .side-title {
  1538.             display: none;
  1539.         }
  1540.        
  1541.         #sidebar nav {
  1542.             display: flex;
  1543.             flex-direction: row;
  1544.             width: 100%;
  1545.             border-top: 2px solid var(--sidebar-border-color);
  1546.             align-items: center;
  1547.             justify-content: space-between;
  1548.         }
  1549.        
  1550.         #sidebar nav h3 {
  1551.             display: none;
  1552.         }
  1553.        
  1554.         #sidebar nav ul {
  1555.             overflow-x: auto;
  1556.             overflow-y: hidden;
  1557.             padding: 0 10px;
  1558.             white-space: nowrap;
  1559.             text-align: center;
  1560.             margin: auto;
  1561.         }
  1562.        
  1563.         #sidebar nav li {
  1564.             display: inline-block;
  1565.             list-style: none;
  1566.             padding-right: 10px;
  1567.             min-height: 0;
  1568.             min-width: 0;
  1569.         }
  1570.        
  1571.         #sidebar nav li:last-child {
  1572.             padding-right: 0px;
  1573.         }
  1574.        
  1575.         #sidebar nav li a {
  1576.             display: block;
  1577.             padding: 4px;
  1578.             font-size: 1.4em;
  1579.             font-weight: bold;
  1580.             color: var(--side-link-color);
  1581.             text-shadow: var(--mobile-side-shadow);
  1582.         }
  1583.        
  1584.         #sidebar nav li a:hover {
  1585.             text-decoration: none;
  1586.             background-color: var(--sidebar-link-background-color);
  1587.             cursor: pointer;
  1588.         }
  1589.  
  1590.         /* NOTES STYLING */
  1591.         .note-info {
  1592.             margin-bottom: var(--mobile-nav-height);
  1593.             padding-bottom: 15px;
  1594.         }
  1595.        
  1596.         .note-count {
  1597.             display: block;
  1598.             text-align: center;
  1599.             padding: 10px 5px;
  1600.             background-color: var(--intro-background-color);
  1601.             font-size: 1.3em;
  1602.             font-weight: bold;
  1603.         }
  1604.        
  1605.         .notes {
  1606.             padding: 10px 5px;
  1607.             list-style: none;
  1608.         }
  1609.        
  1610.         .note {
  1611.             display: flex;
  1612.             align-items: center;
  1613.             margin-bottom: 5px;
  1614.             flex-wrap: wrap;
  1615.         }
  1616.        
  1617.         .note:last-child {
  1618.             margin-bottom: 0;
  1619.         }
  1620.        
  1621.         .avatar_frame {
  1622.             width: 64px;
  1623.             margin-right: 10px;
  1624.         }
  1625.        
  1626.         .avatar {
  1627.             width: 100%;
  1628.         }
  1629.        
  1630.        
  1631.         .no-search {
  1632.             display: none;
  1633.         }
  1634.  
  1635.  
  1636.  
  1637.         /* MEDIA QUERIES */
  1638.         /* FOR DESKTOP */
  1639.         @media all and (min-width: 700px) and (min-height: 600px) {
  1640.            
  1641.             :root {
  1642.                 --desktop-nav-shadow: none;
  1643.                 {block:IfDesktopNavShadow}
  1644.                 --desktop-nav-shadow: -2px 2px 2px black;
  1645.                 {block:IfDesktopNavShadow}
  1646.                 --actions-shadows: none;
  1647.                 {block:IfDesktopActionShadow}
  1648.                 --actions-shadows: -2px 2px 2px black;
  1649.                 {/block:IfDesktopActionShadow}
  1650.                
  1651.                 --desktop-wrapper-color: {color:Desktop Sidebar Color};
  1652.                 --side-border-color: {color:Desktop Sidebar Border Color};
  1653.                 --sidebar-link-color: {color:Desktop Sidebar Link Color};
  1654.                
  1655.                 --search-background-color: {color:Search Background Color};
  1656.                 --search-color: {color:Search Text Color};
  1657.                 --search-border-color: {color:Search Border Color};
  1658.                 --search-placeholder-color: {color:Search Placeholder Color};
  1659.  
  1660.                 --actions-color: {color:Actions Desktop Color};
  1661.                 --actions-click-border-color: {color:Actions Border Color};
  1662.  
  1663.                
  1664.        
  1665.                 --scrollbar-background-color: rgba(255, 255, 255, 0.2);
  1666.                
  1667.                 --desktop-intro-height: 125px;
  1668.                 --desktop-sidebar-width: 25vw;
  1669.                 --desktop-nav-height: 54px;
  1670.                 --desktop-pushdown-height: 54px;
  1671.                 --desktop-nav-height-pushdown: calc(var(--desktop-pushdown-height) + var(--desktop-nav-height));
  1672.                 --scrollbar-width: 10px;
  1673.  
  1674.             }
  1675.            
  1676.             :root.dark-mode {
  1677.  
  1678.        
  1679.                 --desktop-nav-shadow: none;
  1680.                 {block:IfDarkDesktopNavShadow}
  1681.                 --desktop-nav-shadow: -2px 2px 2px black;
  1682.                 {block:IfDarkDesktopNavShadow}
  1683.        
  1684.                 --desktop-wrapper-color: {color:Dark Desktop Sidebar Color};
  1685.  
  1686.                 --side-border-color: {color:Dark Desktop Sidebar Border Color};
  1687.                 --sidebar-link-color: {color:Dark Desktop Sidebar Link Color};
  1688.        
  1689.                 --search-background-color: {color:Dark Search Background Color};
  1690.                 --search-color: {color:Dark Search Text Color};
  1691.                 --search-border-color: {color:Dark Search Border Color};
  1692.                 --search-placeholder-color: {color:Dark Search Placeholder Color};
  1693.  
  1694.                 --scrollbar-background-color: rgba(0, 0, 0, 0.2);
  1695.  
  1696.  
  1697.                 --actions-color: {color:Dark Actions Desktop Color};
  1698.                
  1699.                 --actions-shadows: none;
  1700.                 {block:IfDarkDesktopActionShadow}
  1701.                 --actions-shadows: -2px 2px 2px black;
  1702.                 {/block:IfDarkDesktopActionShadow}
  1703.  
  1704.                 --actions-click-color: {color:Dark Actions Desktop Color};
  1705.                 --actions-click-border-color: {color:Dark Actions Border Color};
  1706.             }
  1707.        
  1708.  
  1709.        
  1710.             .material-icons {
  1711.                 font-size: 1em;
  1712.             }
  1713.        
  1714.             html,
  1715.             html.mobile-disabled {
  1716.                 overflow: hidden;
  1717.             }
  1718.        
  1719.             body::-webkit-scrollbar {
  1720.                 background-color: var(--desktop-wrapper-color);
  1721.                 width: var(--scrollbar-width);
  1722.             }
  1723.        
  1724.             /* HEADER INTRO */
  1725.             .header-intro {
  1726.                 top: initial;
  1727.                 bottom: 0px;
  1728.                 height: var(--desktop-intro-height);
  1729.                 justify-content: flex-start;
  1730.                 right: var(--desktop-sidebar-width);
  1731.                 border-top: 1px solid var(--side-border-color);
  1732.             }
  1733.        
  1734.             .side-flip .header-intro {
  1735.                 right: 0;
  1736.                 left: var(--desktop-sidebar-width);
  1737.             }
  1738.        
  1739.             .intro-info {
  1740.                 display: flex;
  1741.                 flex-direction: column;
  1742.                 justify-content: center;
  1743.        
  1744.                 min-width: 0;
  1745.                 height: 100%;
  1746.                 padding: 10px;
  1747.                 flex-basis: 100%;
  1748.             }
  1749.        
  1750.             .intro-info > * {
  1751.                 height: 100%;
  1752.             }
  1753.        
  1754.             .tagline {
  1755.                 display: flex;
  1756.                 align-items: center;
  1757.             }
  1758.        
  1759.             .tagline h2 {
  1760.                 font-size: 1.2rem;
  1761.             }
  1762.        
  1763.             .headline .title {
  1764.                 font-size: 2rem;
  1765.                 margin: 0;
  1766.             }
  1767.        
  1768.             .auxillary {
  1769.                 display: flex;
  1770.                 white-space: nowrap;
  1771.                 min-height: 2em;
  1772.                 align-items: center;
  1773.             }
  1774.        
  1775.             .status {
  1776.                 margin-right: 10px;
  1777.                 display: flex;
  1778.                 align-items: center;
  1779.             }
  1780.            
  1781.             {block:IfNotStatusName}
  1782.             {block:IfNotStatus}
  1783.             .status {
  1784.                 display: none;
  1785.             }
  1786.             {/block:IfNotStatus}
  1787.             {/block:IfNotStatusName}
  1788.            
  1789.             {block:IfStatusName}
  1790.             .status-description::before {
  1791.                 content: "\00a0";
  1792.             }
  1793.             {/block:IfStatusName}
  1794.        
  1795.             .taglist-common {
  1796.                 overflow-x: auto;
  1797.                 overflow-y: hidden;
  1798.                 display: flex;
  1799.                 align-items: center;
  1800.             }
  1801.        
  1802.             .taglist-common .tag-item {
  1803.                 margin: 3px;
  1804.             }
  1805.        
  1806.             .actions {
  1807.                 display: flex;
  1808.                 align-items: center;
  1809.                 height: 100%;
  1810.             }
  1811.        
  1812.             .actions > *:hover {
  1813.                 cursor: pointer;
  1814.                 text-decoration: none;
  1815.             }
  1816.        
  1817.             .actions > * {
  1818.                 display: flex;
  1819.                 height: 70%;
  1820.                 background-color: var(--actions-background-color);
  1821.                 color: var(--actions-color);
  1822.                 box-shadow: var(--actions-shadows);
  1823.                 border: 1px solid var(--actions-background-color);
  1824.                 border-radius: 5px;
  1825.                 margin: 0 3px;
  1826.                 padding: 3px 10px;
  1827.                 font-weight: bold;
  1828.             }
  1829.        
  1830.             .actions > *:hover {
  1831.                 transition-duration: 0s;
  1832.                 color: var(--actions-color);
  1833.                 background-color: var(--actions-hover-background-color);
  1834.             }
  1835.        
  1836.             .actions > *:active {
  1837.                 transition-duration: 0s;
  1838.                 box-shadow: none;
  1839.                 background-color: var(--actions-click-background-color);
  1840.                 border: 1px solid var(--actions-click-border-color);
  1841.                 color: var(--actions-click-color);
  1842.             }
  1843.        
  1844.             .actions .material-icons,
  1845.             .actions .follow > * {
  1846.                 color: var(--actions-color);
  1847.             }
  1848.        
  1849.             .actions .material-icons:hover,
  1850.             .actions .follow:hover > * {
  1851.                 color: var(--actions-color);
  1852.                 transition: color 1s;
  1853.             }
  1854.        
  1855.             /* NAVIGATION */
  1856.             .navigation {
  1857.                 top: 0px;
  1858.                 bottom: initial;
  1859.                 height: var(--desktop-nav-height);
  1860.                 box-shadow: var(--desktop-nav-shadow);
  1861.                 border-bottom: 1px solid var(--side-border-color);
  1862.                 min-height: var(--desktop-nav-height);
  1863.                 z-index: 10;
  1864.             }
  1865.            
  1866.             .tmblr-iframe-pushdown .navigation {
  1867.                 top: var(--desktop-pushdown-height);
  1868.             }
  1869.        
  1870.             .navigation .material-icons {
  1871.                 display: none;
  1872.             }
  1873.        
  1874.             .navigation ul {
  1875.                 text-transform: uppercase;
  1876.                 font-weight: bold;
  1877.                 display: block;
  1878.                 width: 100%;
  1879.                 margin: auto;
  1880.                 text-align: start;
  1881.                 padding: 0 1%;
  1882.             }
  1883.        
  1884.             .navigation ul li {
  1885.                 display: inline-block;
  1886.                 list-style: none;
  1887.                 min-height: 0;
  1888.                 min-width: 0;
  1889.                 width: auto;
  1890.                 padding-right: 1%;
  1891.                 font-size: 1.2em;
  1892.             }
  1893.        
  1894.             .navigation ul li:last-child {
  1895.                 padding-right: 0px;
  1896.             }
  1897.            
  1898.             .navigation ul li:hover {
  1899.                 text-decoration: underline;
  1900.                 color: var(--link-color);
  1901.             }
  1902.            
  1903.             .navigation ul li.nav-disabled:hover {
  1904.                 text-decoration: none;
  1905.             }
  1906.            
  1907.             .navigation ul li.nav-enabled:hover {
  1908.                 text-decoration: underline;
  1909.             }
  1910.        
  1911.             .navigation li a {
  1912.                 text-align: left;
  1913.             }
  1914.  
  1915.             #link-list {
  1916.                 display: none;
  1917.             }
  1918.        
  1919.             /* MAIN ELEMENT */
  1920.        
  1921.             main {
  1922.                 position: fixed;
  1923.                 bottom: var(--desktop-intro-height);
  1924.                 right: var(--desktop-sidebar-width);
  1925.                 overflow-y: auto;
  1926.                 top: var(--desktop-nav-height);
  1927.                 left: 0;
  1928.                 padding-top: 0;
  1929.             }
  1930.            
  1931.             .tmblr-iframe-pushdown main {
  1932.                 top: var(--desktop-nav-height-pushdown);
  1933.             }
  1934.        
  1935.             .side-flip main {
  1936.                 right: 0;
  1937.                 left: var(--desktop-sidebar-width);
  1938.             }
  1939.        
  1940.             .main-wrapper {
  1941.                 width: 100%;
  1942.                 overflow-y: auto;
  1943.                 overflow-x: hidden;
  1944.                 height: 100%;
  1945.                 margin-bottom: 0;
  1946.                 padding-bottom: 15px;
  1947.             }
  1948.        
  1949.             *::-webkit-scrollbar {
  1950.                 width: var(--scrollbar-width);
  1951.                 height: var(--scrollbar-width);
  1952.                 background-color: var(--scrollbar-background-color);
  1953.             }
  1954.        
  1955.             *::-webkit-scrollbar-thumb {
  1956.                 background-color: var(--post-border-color);
  1957.                 border-radius: 2px;
  1958.                 border: 1px solid var(--side-border-color);
  1959.                 width: var(--scrollbar-width);
  1960.             }
  1961.        
  1962.             .no-scroll .main-wrapper {
  1963.                 overflow: hidden;
  1964.             }
  1965.            
  1966.             .background {
  1967.                 background-image: url('{image:Background Image}');
  1968.                 background-size: cover;
  1969.                 background-repeat: no-repeat;
  1970.                 {block:IfStretchBackground}
  1971.                 background-size: 100% 100%;
  1972.                 {/block:IfStretchBackground}
  1973.                 right: var(--desktop-sidebar-width);
  1974.                 bottom: var(--desktop-intro-height);
  1975.                 top: var(--desktop-nav-height);
  1976.             }
  1977.            
  1978.             .tmblr-iframe-pushdown .background {
  1979.                 top: var(--desktop-nav-height-pushdown);
  1980.             }
  1981.        
  1982.             .side-flip .background {
  1983.                 right: 0;
  1984.                 left: var(--desktop-sidebar-width);
  1985.             }
  1986.        
  1987.             .featured-icon {
  1988.                 display: none;
  1989.                 width: 25vw;
  1990.                 max-width: 300px;
  1991.                 position: fixed;
  1992.                 bottom: var(--desktop-intro-height);
  1993.                 right: calc(var(--desktop-sidebar-width) + var(--scrollbar-width));
  1994.                 flex-direction: column-reverse;
  1995.                 z-index: 20;
  1996.                 transition: z-index 3s, opacity 3s;
  1997.             }
  1998.        
  1999.             .side-flip .featured-icon {
  2000.                 right: var(--scrollbar-width);
  2001.             }
  2002.        
  2003.             .post-flip .featured-icon {
  2004.                 right: 0;
  2005.                 left: 0;
  2006.             }
  2007.        
  2008.             .side-flip.post-flip .featured-icon {
  2009.                 left: var(--desktop-sidebar-width);
  2010.             }
  2011.        
  2012.             .featured-icon figure {
  2013.                 display: flex;
  2014.                 justify-content: flex-end;
  2015.             }
  2016.            
  2017.             .post-flip .featured-icon figure {
  2018.                 justify-content: flex-start;
  2019.             }
  2020.        
  2021.             .featured-icon img {
  2022.                 max-width: 100%;
  2023.                 opacity: 0;
  2024.             }
  2025.        
  2026.             .posts {
  2027.                 margin: 0;
  2028.                 min-height: 100%;
  2029.             }
  2030.        
  2031.             .post:first-child > .post-body {
  2032.                 border-top: 1px solid var(--post-background-color);
  2033.             }
  2034.        
  2035.             .note-info {
  2036.                 margin-bottom: 15px;
  2037.                 padding-bottom: 0;
  2038.             }
  2039.        
  2040.             .pages-mobile {
  2041.                 margin-top: 15px;
  2042.                 padding-bottom: 0;
  2043.             }
  2044.        
  2045.             .post-flip .pages-mobile {
  2046.                 margin-left: 25vw;
  2047.                 margin-right: 0;
  2048.             }
  2049.        
  2050.             .pages-wrapper {
  2051.                 justify-content: space-evenly;
  2052.                 align-items: stretch;
  2053.                 padding: 0 10px;
  2054.             }
  2055.        
  2056.             .pages-wrapper .pagination {
  2057.                 align-items: center;
  2058.             }
  2059.        
  2060.             .pages-wrapper .page-number {
  2061.                 display: block;
  2062.             }
  2063.        
  2064.             .fast-forward,
  2065.             .fast-reverse {
  2066.                 display: block;
  2067.             }
  2068.        
  2069.             /* SIDEBAR */
  2070.             #sidebar,
  2071.             #sidebar.enabled {
  2072.                 display: flex;
  2073.                 justify-content: initial;
  2074.                 align-items: initial;
  2075.                 position: fixed;
  2076.                 top: var(--desktop-nav-height);
  2077.                 right: 0;
  2078.                 bottom: 0;
  2079.                 left: initial;
  2080.                 width: var(--desktop-sidebar-width);
  2081.                 border-left: 1px solid var(--side-border-color);
  2082.             }
  2083.        
  2084.             .side-flip #sidebar {
  2085.                 left: 0;
  2086.                 border-right: 2px solid var(--side-border-color);
  2087.                 border-left: none;
  2088.             }
  2089.        
  2090.             #sidebar > .wrapper {
  2091.                 background-color: var(--desktop-wrapper-color);
  2092.                 display: flex;
  2093.                 flex-direction: column;
  2094.                 align-items: center;
  2095.                 justify-content: space-between;
  2096.             }
  2097.        
  2098.             #sidebar .side-title {
  2099.                 display: flex;
  2100.                 justify-content: space-around;
  2101.                 width: 100%;
  2102.                 padding: 5px;
  2103.                 align-items: center;
  2104.                 border-bottom: 2px solid var(--side-border-color);
  2105.             }
  2106.        
  2107.             .side-title .pagination {
  2108.                 display: flex;
  2109.             }
  2110.        
  2111.             .pagination div {
  2112.                 margin: auto;
  2113.                 font-size: 1.1em;
  2114.             }
  2115.        
  2116.             .subtitle {
  2117.                 font-size: 1.4em;
  2118.             }
  2119.        
  2120.             .subtitle a {
  2121.                 color: var(--text-color);
  2122.             }
  2123.        
  2124.             #sidebar .information {
  2125.                 overflow: hidden;
  2126.                 width: 100%;
  2127.                 margin: 0;
  2128.                 padding: 0;
  2129.                 display: flex;
  2130.                 flex-direction: column;
  2131.                 border-bottom: 2px solid var(--side-border-color);
  2132.             }
  2133.            
  2134.             .information > * {
  2135.                 flex-shrink: 0;
  2136.             }
  2137.        
  2138.             #sidebar .details {
  2139.                 display: block;
  2140.                 width: 100%;
  2141.                 padding: 5px;
  2142.             }
  2143.        
  2144.             #sidebar .updates {
  2145.                 display: block;
  2146.                 border-top: 2px solid var(--side-border-color);
  2147.                 padding: 5px;
  2148.             }
  2149.        
  2150.             .update-title {
  2151.                 display: block;
  2152.                 text-align: center;
  2153.                 margin-bottom: 10px;
  2154.                 padding-bottom: 5px;
  2155.                 font-size: 1.2em;
  2156.                 border-bottom: 1px solid var(--side-border-color);
  2157.             }
  2158.  
  2159.             {block:IfNotUpdatesText}
  2160.             {block:IfNotUpdatesTitle}
  2161.             #sidebar .updates {
  2162.                 display: none;
  2163.             }
  2164.             {/block:IfNotUpdatesTitle}
  2165.             {/block:IfNotUpdatesText}
  2166.        
  2167.             #sidebar nav {
  2168.                 padding: 5px;
  2169.                 display: flex;
  2170.                 flex-direction: column;
  2171.                 border-top-color: var(--side-border-color);
  2172.             }
  2173.        
  2174.             #sidebar nav h3 {
  2175.                 display: block;
  2176.                 text-transform: uppercase;
  2177.                 text-align: center;
  2178.                 padding: 0 5px;
  2179.                 font-size: 1.5em;
  2180.                 border: none;
  2181.                 width: 100%;
  2182.                 border-bottom: 1px solid var(--side-border-color);
  2183.             }
  2184.        
  2185.             #sidebar nav ul {
  2186.                 display: block;
  2187.                 overflow: auto;
  2188.                 white-space: initial;
  2189.                 text-align: left;
  2190.                 margin: 0;
  2191.                 width: 100%;
  2192.                 padding: 5px 0;
  2193.             }
  2194.        
  2195.             #sidebar nav li {
  2196.                 display: block;
  2197.                 width: 100%;
  2198.                 padding-right: 0px;
  2199.             }
  2200.        
  2201.             #sidebar nav li a {
  2202.                 display: block;
  2203.                 width: 100%;
  2204.                 font-size: 1.1rem;
  2205.                 color: var(--sidebar-link-color);
  2206.                 text-shadow: none;
  2207.             }
  2208.            
  2209.             #sidebar .categories, #sidebar .side-links {
  2210.                 flex-shrink: 1;
  2211.             }
  2212.        
  2213.             #sidebar .categories ul {
  2214.                 display: flex;
  2215.                 flex-wrap: wrap;
  2216.                 justify-content: space-evenly;
  2217.             }
  2218.        
  2219.             /* TWO COLUMNS */
  2220.             {block:IfTwoColumnSideLinks}
  2221.             #sidebar .categories ul li {
  2222.                 flex-basis: 50%;
  2223.             }
  2224.             {/block:IfTwoColumnSideLinks}
  2225.            
  2226.             {block:IfNotCustomLinksTitle}
  2227.             {block:IfNotLink1Name}
  2228.             {block:IfNotLink2Name}
  2229.             {block:IfNotLink3Name}
  2230.             {block:IfNotLink4Name}
  2231.             {block:IfNotLink5Name}
  2232.             {block:IfNotLink6Name}
  2233.             {block:IfNotLink7Name}
  2234.             {block:IfNotLink8Name}
  2235.             #sidebar .categories {
  2236.                 display: none;
  2237.             }
  2238.             {/block:IfNotLink8Name}
  2239.             {/block:IfNotLink7Name}
  2240.             {/block:IfNotLink6Name}
  2241.             {/block:IfNotLink5Name}
  2242.             {/block:IfNotLink4Name}
  2243.             {/block:IfNotLink3Name}
  2244.             {/block:IfNotLink2Name}
  2245.             {/block:IfNotLink1Name}
  2246.             {/block:IfNotCustomLinksTitle}
  2247.  
  2248.        
  2249.             #sidebar .side-links {
  2250.                 overflow: auto;
  2251.                 padding-bottom: 0px;
  2252.             }
  2253.        
  2254.             #sidebar .side-links ul::-webkit-scrollbar {
  2255.                 width: var(--scrollbar-width);
  2256.             }
  2257.        
  2258.             #sidebar .side-links ul::-webkit-scrollbar-track {
  2259.                 background-color: var(--desktop-wrapper-color);
  2260.             }
  2261.        
  2262.             #sidebar .side-links ul::-webkit-scrollbar-thumb {
  2263.                 background-color: var(--background-color);
  2264.                 width: var(--scrollbar-width);
  2265.                 border-right: 2px solid var(--desktop-wrapper-color);
  2266.                 border-left: 2px solid var(--desktop-wrapper-color);
  2267.             }
  2268.        
  2269.             #sidebar:hover .side-links ul::-webkit-scrollbar {
  2270.                 width: var(--scrollbar-width);
  2271.                 border: 2px solid var(--desktop-wrapper-color);
  2272.             }
  2273.        
  2274.             /* SIDE ACTIONS */
  2275.        
  2276.             #sidebar .side-actions {
  2277.                 display: flex;
  2278.                 flex-direction: column;
  2279.                 padding: 5px 5px 5vh 5px;
  2280.                 width: 100%;
  2281.                 text-align: center;
  2282.             }
  2283.        
  2284.             #sidebar .search {
  2285.                 display: block;
  2286.                 justify-self: flex-end;
  2287.             }
  2288.        
  2289.             #sidebar .search input {
  2290.                 background-color: var(--search-background-color);
  2291.                 font-size: 1.1rem;
  2292.                 color: var(--search-color);
  2293.                 width: 100%;
  2294.                 border-radius: 3px;
  2295.                 border: 1px solid var(--search-border-color);
  2296.                 padding: 5px;
  2297.                 text-align: center;
  2298.             }
  2299.        
  2300.             #sidebar .search input::placeholder {
  2301.                 /* Chrome, Firefox, Opera, Safari 10.1+ */
  2302.                 color: var(--search-placeholder-color);
  2303.                 opacity: 0.5;
  2304.                 text-align: center;
  2305.             }
  2306.        
  2307.             #sidebar .search input::-ms-input-placeholder {
  2308.                 /* Internet Explorer 10-11 */
  2309.                 color: var(--search-placeholder-color);
  2310.             }
  2311.        
  2312.             #sidebar .search input::-ms-input-placeholder {
  2313.                 /* Microsoft Edge */
  2314.                 color: var(--search-placeholder-color);
  2315.             }
  2316.         }
  2317.        
  2318.         @media all and (min-height: 1000px) {
  2319.             :root {
  2320.                 --desktop-intro-height: 125px;
  2321.                 --desktop-nav-height: 50px;
  2322.             }
  2323.         }
  2324.        
  2325.         @media all and (min-width: 1250px) {
  2326.             :root {
  2327.                 --desktop-sidebar-width: 300px;
  2328.             }
  2329.    
  2330.  
  2331.    
  2332.             .side-flip .featured-icon {
  2333.                 right: 0;
  2334.             }
  2335.    
  2336.             .post-flip .featured-icon {
  2337.                 right: 0;
  2338.                 left: 0;
  2339.             }
  2340.    
  2341.             .featured-icon:hover {
  2342.                 z-index: -20;
  2343.             }
  2344.    
  2345.  
  2346.    
  2347.             .posts {
  2348.                 width: 700px; /*1000px*/
  2349.                 margin: auto;
  2350.                 padding-top: 2vh;
  2351.                 margin-left: 15%;
  2352.             }
  2353.            
  2354.             .post-flip .posts {
  2355.                 margin-left: auto;
  2356.                 margin-right: 15%;
  2357.             }
  2358.  
  2359.             .post-body,
  2360.             .note-wrapper {
  2361.                 border-radius: 4px;
  2362.                 border: 2px solid var(--post-border-color);
  2363.             }
  2364.    
  2365.             .post:first-child > .post-body {
  2366.                 border-top: 2px solid var(--post-border-color);
  2367.             }
  2368.    
  2369.             .post-flip .post-body {
  2370.                 margin-right: 0;
  2371.                 margin-left: 15px;
  2372.             }
  2373.    
  2374.             .post-flip .note-info {
  2375.                 display: flex;
  2376.                 flex-direction: row-reverse;
  2377.             }
  2378.             .post-flip .note-wrapper {
  2379.                 margin-right: 0;
  2380.             }
  2381.    
  2382.             .post:hover .post-tags {
  2383.                 display: block;
  2384.                 opacity: 1;
  2385.                 -webkit-transition: 1s;
  2386.                 -moz-transition: 1s;
  2387.                 -ms-transition: 1s;
  2388.                 -o-transition: 1s;
  2389.                 transition: 1s;
  2390.                 -webkit-user-select: auto;
  2391.                 user-select: auto;
  2392.                 pointer-events: auto;
  2393.             }
  2394.  
  2395.             .pages-mobile {
  2396.                 width: 700px;
  2397.                 margin: auto;
  2398.                 padding: 0;
  2399.                 margin-left: 15%;
  2400.             }
  2401.    
  2402.             .pages-wrapper {
  2403.                 width: 700px;
  2404.             }
  2405.  
  2406.         }
  2407.            
  2408.         @media all and (min-width: 1475px) {
  2409.             .featured-icon {
  2410.                 display: flex;
  2411.                 z-index: -20;
  2412.             }
  2413.             .featured-icon img {
  2414.                 opacity: 1;
  2415.                 transition: 1s;
  2416.             }
  2417.         }
  2418.         @media all and (min-width: 1750px) {
  2419.             .posts {
  2420.                 margin: auto;
  2421.             }
  2422.            
  2423.             .pages-mobile {
  2424.                 margin: auto;
  2425.             }
  2426.         }
  2427.  
  2428.         .post-meta .light-button {
  2429.             display: block;
  2430.         }
  2431.        
  2432.         .post-meta .dark-button {
  2433.             display: none;
  2434.         }
  2435.        
  2436.         .dark-mode .post-meta .light-button {
  2437.             display: none;
  2438.         }
  2439.        
  2440.          .dark-mode .post-meta .dark-button {
  2441.             display: block;
  2442.         }
  2443.        
  2444.         .post-body p {
  2445.             margin: 0.5em 0;
  2446.         }
  2447.        
  2448.         .post-body ul, .post-body ol {
  2449.             margin-block-start: 0.5em;
  2450.             margin-block-end: 0.5em;
  2451.         }
  2452.        
  2453.         .post-body ul li, .post-body ol li {
  2454.             list-style-position: outside;
  2455.         }
  2456.        
  2457.         a > b, a > em, a > i {
  2458.             color: inherit;
  2459.         }
  2460.        
  2461.         @media all and (max-width: 700px) {
  2462.             .header-intro {
  2463.                 overflow: hidden;
  2464.             }
  2465.            
  2466.             .header-image {
  2467.                 height: 50px;
  2468.                
  2469.             }
  2470.            
  2471.             .post.photo .click-through a {
  2472.                 word-break: break-all;
  2473.             }
  2474.            
  2475.             .headline {
  2476.                 justify-content: flex-end;
  2477.             }
  2478.            
  2479.             .headline .title {
  2480.                 text-align: center;
  2481.                 font-size: 1.6em;
  2482.                 {block:IfHideMobileHeader}
  2483.                 display: none;
  2484.                 {/block:IfHideMobileHeader}
  2485.             }
  2486.         }
  2487.        
  2488.         /* END MEDIA QUERIES */
  2489.         {CustomCSS}
  2490.     </style>
  2491.  
  2492. </head>
  2493.  
  2494. <body class="{block:IfFlipSidebar}side-flip{/block:IfFlipSidebar}{block:IfFlipPostOrientation} post-flip{/block:IfFlipPostOrientation}">
  2495.     <header>
  2496.         <div class="header-intro">
  2497.             <a class="header-image" href="/">
  2498.                 <img alt={Title} src="{PortraitURL-96}">
  2499.             </a>
  2500.             <div class="intro-info">
  2501.                 <div class="headline">
  2502.                     <h1 class="title"><a href="/">{Title}</a></h1>
  2503.                     <div class="actions">
  2504.                         {block:IfEnableDarkMode}
  2505.                         <button class="scheme" role="button">
  2506.                             <div class="material-icons">light_mode</div>
  2507.                         </button>
  2508.                         {/block:IfEnableDarkMode}
  2509.                         <a href="https://skyetrick-streamerluck.tumblr.com/" class="credit" role="button" aria-label="credit link">
  2510.                             <div class="material-icons" aria-disabled="true">code</div>{Username}
  2511.                         </a>
  2512.                         {block:IfFollowButton}
  2513.                         <a href="https://tumblr.com/follow/{Name}" class="follow" role="button">
  2514.                             <div>Follow</div>
  2515.                         </a>
  2516.                         {/block:IfFollowButton}
  2517.                     </div>
  2518.                 </div>
  2519.                 <div class="tagline">
  2520.                     <h2>{text:Tagline}</h2>
  2521.                 </div>
  2522.                 <div class="auxillary">
  2523.                     <span class="status">
  2524.                         {block:IfStatusName}
  2525.                         <span class="status-name">{text:Status Name}</span>
  2526.                         {/block:IfStatusName}
  2527.                         {block:IfStatus}
  2528.                         {block:IfStatusURL}
  2529.                         <a class="status-description" href="{text:Status URL}" title="{text: Status}">{text:Status}</a>
  2530.                         {/block:IfStatusURL}
  2531.                         {block:IfNotStatusURL}
  2532.                         <span class="status-description">{text:Status}</span>
  2533.                         {/block:IfNotStatusURL}
  2534.                         {/block:IfStatus}
  2535.                     </span>
  2536.                     <div class="taglist-common">
  2537.                         {block:IfCommonTag1}
  2538.                         <div class="tag-item">
  2539.                             <a href="/tagged/{text:Common Tag 1}">
  2540.                                 {text:Common Tag 1}
  2541.                             </a>
  2542.                         </div>
  2543.                         {/block:IfCommonTag1}
  2544.                         {block:IfCommonTag2}
  2545.                         <div class="tag-item">
  2546.                             <a href="/tagged/{text:Common Tag 2}">
  2547.                                 {text:Common Tag 2}
  2548.                             </a>
  2549.                         </div>
  2550.                         {/block:IfCommonTag2}
  2551.                         {block:IfCommonTag3}
  2552.                         <div class="tag-item">
  2553.                             <a href="/tagged/{text:Common Tag 3}">
  2554.                                 {text:Common Tag 3}
  2555.                             </a>
  2556.                         </div>
  2557.                         {/block:IfCommonTag3}
  2558.                     </div>
  2559.                 </div>
  2560.             </div>
  2561.         </div>
  2562.  
  2563.         <nav class="navigation">
  2564.             <ul>
  2565.                 <li>
  2566.                     <a href="/" aria-label="{lang:Home}">
  2567.                         <span class="material-icons">home</span>
  2568.                         <span class="nav-link">{lang:Home}</span>
  2569.                     </a>
  2570.                 </li>
  2571.                 <li class="{block:AskDisabled}nav-disabled{/block:AskDisabled}{block:AskEnabled}nav-enabled{/block:AskEnabled}">
  2572.                     <a href="/ask">
  2573.                         <i class="material-icons">question_mark</i>
  2574.                         {block:IfCustomAskLabel}
  2575.                         <span class="nav-link">{text:Custom Ask Label}</span>
  2576.                         {/block:IfCustomAskLabel}
  2577.                         {block:IfNotCustomAskLabel}
  2578.                         <span class="nav-link">{AskLabel}</span>
  2579.                         {/block:IfNotCustomAskLabel}
  2580.                     </a>
  2581.                 </li>
  2582.                 <li id="link-list">
  2583.                     <a class="links" role="button">
  2584.                         <i class="material-icons">add_circle</i>
  2585.                         {block:IfCustomPagesLabel}
  2586.                         <span class="nav-link">{text:Custom Pages Label}</span>
  2587.                         {/block:IfCustomPagesLabel}
  2588.                         {block:IfNotCustomPagesLabel}
  2589.                         <span class="nav-link">{lang:Pages}</span>
  2590.                         {/block:IfNotCustomPagesLabel}
  2591.                     </a>
  2592.                 </li>
  2593.                 <li class="nav-disabled {block:SubmissionsEnabled}nav-enabled{/block:SubmissionsEnabled} {block:SubmissionsDisabled}test{/block:SubmissionsDisabled}">
  2594.                     <a href="/submit">
  2595.                         <span class="material-icons">email</span>
  2596.                         {block:IfCustomSubmitLabel}
  2597.                         <span class="nav-link">{text:Custom Submit Label}</span>
  2598.                         {/block:IfCustomSubmitLabel}
  2599.                         {block:IfNotCustomSubmitLabel}
  2600.                         <span class="nav-link">{SubmitLabel}</span>
  2601.                         {/block:IfNotCustomSubmitLabel}
  2602.                     </a>
  2603.                 </li>
  2604.                 <li>
  2605.                     <a href="/archive">
  2606.                         <i class="material-icons">folder</i>
  2607.                         <span class="nav-link">{lang:Archive}</span>
  2608.                     </a>
  2609.                 </li>
  2610.             </ul>
  2611.         </nav>
  2612.     </header>
  2613.     <div class="background"></div>
  2614.  
  2615.     <div class="featured-icon">
  2616.         <figure><img src="{image:Featured Icon}"></figure>
  2617.     </div>
  2618.  
  2619.     <main>
  2620.         <div class="main-wrapper">
  2621.             <div class="posts">
  2622.                 {block:SearchPage}
  2623.                 <article class="post">
  2624.                     <div class="post-body">
  2625.                         <div class="search-result">
  2626.                             {lang:Your search for SearchQuery returned SearchResultCount results 2}
  2627.                         </div>
  2628.                     </div>
  2629.                 </article>
  2630.                 {/block:SearchPage}
  2631.                 {block:TagPage}
  2632.                 <article class="post">
  2633.                     <div class="post-body">
  2634.                         <div class="search-result">
  2635.                             {lang:Showing TagResultCount posts tagged Tag 3}
  2636.                         </div>
  2637.                     </div>
  2638.                 </article>
  2639.                 {/block:TagPage}
  2640.                 {block:Posts}
  2641.  
  2642.                 <article class="post {PostType}{block:RebloggedFrom} reblog{/block:RebloggedFrom}" id={PostID}>
  2643.                     <div class="post-body">
  2644.                         {block:Submission}
  2645.                         <div class="submission-header">
  2646.                             <figure class="submitter-avatar">
  2647.                                 <a href="{SubmitterURL}" alt="{Submitter}">
  2648.                                     <img src="{SubmitterPortraitURL-40}" alt="{Submitter}">
  2649.                                 </a>
  2650.                             </figure>
  2651.                             <h3 class="submitter-title">
  2652.                                 <a href="{SubmitterURL}" alt="{Submitter}">
  2653.                                     {lang:Submitted By}
  2654.                                 </a>
  2655.                             </h3>
  2656.                         </div>
  2657.                         {/block:Submission}
  2658.                         {block:Title}
  2659.                         <h2 class="title">{Title}</h2>
  2660.                         {/block:Title}
  2661.  
  2662.                         {block:Photo}
  2663.  
  2664.                         <figure class="photo-info">
  2665.                             <div class="photo-header">
  2666.                                 <figure
  2667.                                    class="featured {block:HighRes}high-res{/block:HighRes}"
  2668.                                    {block:HighRes}
  2669.                                    data-full-width="{PhotoWidth-HighRes}"
  2670.                                    data-full-height="{PhotoHeight-HighRes}"
  2671.                                    data-full-url="{PhotoURL-HighRes}"
  2672.                                    data-orig-url="{PhotoURL-500}"
  2673.                                    {/block:HighRes}
  2674.                                >
  2675.                                     <img
  2676.                                        loading="lazy"
  2677.                                        alt="{PhotoAlt}"
  2678.                                        src="{PhotoURL-500}"
  2679.                                        class="featured-image"
  2680.                                    >
  2681.                                     {block:LinkURL}
  2682.                                     <figcaption class="click-through">
  2683.                                         <a href="{LinkURL}">
  2684.                                             {LinkURL}
  2685.                                         </a>
  2686.                                     </figcaption>
  2687.                                     {/block:LinkURL}
  2688.                                 </figure>
  2689.                                
  2690.                             </div>
  2691.                             {block:NotReblog}
  2692.                             <figcaption class="post-caption">{Caption}</figcaption>
  2693.                             {/block:NotReblog}
  2694.                         </figure>
  2695.  
  2696.                         {/block:Photo}
  2697.  
  2698.                         {block:Photoset}
  2699.                         <div class="photoset">
  2700.                             <div
  2701.                                class="slideshow"
  2702.                                data-layout="{PhotosetLayout}">
  2703.                                 {block:Photos}
  2704.                                 <figure
  2705.                                    class="image"
  2706.                                    data-full-width="{PhotoWidth-HighRes}"
  2707.                                    data-full-height="{PhotoHeight-HighRes}"
  2708.                                    data-full-url="{PhotoURL-HighRes}"
  2709.                                    {block:IfFullWidthPhotosets}
  2710.                                    data-orig-url="{PhotoUrl-HighRes}"
  2711.                                    {/block:IfFullWidthPhotosets}
  2712.                                    {block:IfNotFullWidthPhotosets}
  2713.                                    data-orig-url="{PhotoUrl-500}"
  2714.                                    {/block:IfNotFullWidthPhotosets}
  2715.                                >
  2716.                                     <img
  2717.                                        alt="{PhotoAlt}"
  2718.                                        {block:IfFullWidthPhotosets}
  2719.                                        src="{PhotoUrl-HighRes}"
  2720.                                        {/block:IfFullWidthPhotosets}
  2721.                                        {block:IfNotFullWidthPhotosets}
  2722.                                        src="{PhotoUrl-500}"
  2723.                                        {/block:IfNotFullWidthPhotosets}
  2724.                                    >
  2725.                                     {block:Caption}
  2726.                                     <figcaption>
  2727.                                         {Caption}
  2728.                                     </figcaption>
  2729.                                     {/block:Caption}
  2730.                                 </figure>
  2731.                                 {/block:Photos}
  2732.                             </div>
  2733.                             {block:NotReblog}
  2734.                             {block:Caption}
  2735.                             <div class="caption">
  2736.                                 {Caption}
  2737.                             </div>
  2738.                            
  2739.                             {/block:Caption}
  2740.                             {/block:NotReblog}
  2741.                         </div>
  2742.                         {/block:Photoset}
  2743.  
  2744.                         {block:quote}
  2745.                         <div class="quote">
  2746.                             <blockquote>{Quote}</blockquote>
  2747.                             <div class="source">
  2748.                                 {Source}
  2749.                             </div>
  2750.                         </div>
  2751.                         {/block:quote}
  2752.  
  2753.                         {block:Link}
  2754.                         <div class="link-wrapper">
  2755.                             <a {Target} href="{URL}">
  2756.                                 {block:Thumbnail}
  2757.                                 <div class="link-thumbnail">
  2758.                                     <img src="{Thumbnail}" alt="{Name}" />
  2759.                                 </div>
  2760.                                 {/block:Thumbnail}
  2761.                                 <div class="link-details">
  2762.                                     <div class="link-title">{Name}</div>
  2763.                                     {block:Excerpt}
  2764.                                     <div class="link-exerpt">{Excerpt}</div>
  2765.                                     {/block:Excerpt}
  2766.                                     {block:Author}
  2767.                                     <div class="link-author">{lang:By PostAuthorName 2}</div>
  2768.                                     {/block:Author}
  2769.                                     {block:Host}
  2770.                                     <div class="link-host"><span class="link-source">{Host}</span> </div>
  2771.                                     {/block:Host}
  2772.                                 </div>
  2773.  
  2774.                             </a>
  2775.                         </div>
  2776.                         {/block:Link}
  2777.  
  2778.                         {block:Chat}
  2779.                         <div class="conversation">
  2780.                             <ul class="chat-lines">
  2781.                                 {block:Lines}
  2782.                                 <li class="chat-item chat-{Alt}">
  2783.                                     {block:Label}
  2784.                                     <span class="chat-label">{Label}</span>
  2785.                                     {/block:Label}
  2786.                                     <span class="chat-text">{Line}</span>
  2787.                                 </li>
  2788.                                 {/block:Lines}
  2789.                             </ul>
  2790.                         </div>
  2791.                         {/block:Chat}
  2792.  
  2793.                         {block:Audio}
  2794.                         <div class="audio-wrapper">
  2795.                             {block:AudioEmbed}
  2796.                             <div class="audio-embed">
  2797.                                 {AudioEmbed}
  2798.                             </div>
  2799.                             {/block:AudioEmbed}
  2800.                             {block:AudioPlayer}
  2801.                             <div class="audio-player-wrapper">
  2802.                                 <div class="playbutton">{AudioPlayerGrey}</div>
  2803.                                 {block:AlbumArt}
  2804.                                 <div class="albumart">
  2805.                                     <img src="{AlbumArtURL}">
  2806.                                 </div>{/block:AlbumArt}
  2807.                                 <div class="trackinfo">
  2808.                                     <div class="trackname">
  2809.                                     {block:TrackName}
  2810.                                         {TrackName}
  2811.                                     {/block:TrackName}
  2812.                                     </div>
  2813.                                     <div class="artist">
  2814.                                     {block:Artist}{Artist}{/block:Artist}
  2815.                                     </div>
  2816.                                     <div class="album">
  2817.                                     {block:Album}{Album}{/block:Album}
  2818.                                     </div>
  2819.                                     {block:PlayCount}
  2820.                                     <div class="playcount">
  2821.                                     {PlayCountWithLabel}
  2822.                                     </div>
  2823.                                     {/block:PlayCount}
  2824.                                 </div>
  2825.  
  2826.                             </div>
  2827.                             {block:Caption}
  2828.                             <div class="caption">
  2829.                                 {Caption}
  2830.                             </div>
  2831.                             {/block:Caption}
  2832.                             {/block:AudioPlayer}
  2833.                            
  2834.                             {block:ExternalAudio}
  2835.                             <div class="link-wrapper">
  2836.                                 <a {ExternalAudioURL} href="{URL}">
  2837.                                     {block:AlbumArt}
  2838.                                     <div class="link-thumbnail">
  2839.                                         <img src="{AlbumArtURL}" alt="{block:TrackName}{TrackName}{/block:TrackName}" />
  2840.                                     </div>
  2841.                                     {/block:AlbumArt}
  2842.                                     <div class="link-details">
  2843.                                         {block:Artist}
  2844.                                         <div class="link-title">{Artist}</div>
  2845.                                         {/block:Artist}
  2846.                                         {block:Album}
  2847.                                         <div class="link-exerpt">{Album}</div>
  2848.                                         {/block:Album}
  2849.                                         {block:Artist}
  2850.                                         <div class="link-author">{lang:Artist}</div>
  2851.                                         {/block:Artist}
  2852.                                         {block:TrackName}
  2853.                                         <div class="link-host"><span class="link-source">{TrackName}</span> </div>{/block:TrackName}
  2854.                                        
  2855.                                     </div>
  2856.    
  2857.                                 </a>
  2858.                             </div>
  2859.                             {/block:ExternalAudio}
  2860.                         </div>
  2861.                         {/block:Audio}
  2862.  
  2863.                         {block:Video}
  2864.                         <div class="video-embed">
  2865.                             {VideoEmbed-500}
  2866.                         </div>
  2867.                         {/block:Video}
  2868.  
  2869.                         {block:Answer}
  2870.                         <div class="ask-header">
  2871.                             <div class="asker-avatar">
  2872.                                 <img src="{AskerPortraitURL-96}" alt="Asker Image">
  2873.                             </div>
  2874.  
  2875.                             <div class="asker-content">
  2876.                                 <div class="answer-asker">{lang:Asker asked 2}</div>
  2877.                                 <div class="asker-question">
  2878.                                     {Question}
  2879.                                 </div>
  2880.                             </div>
  2881.                         </div>
  2882.                         {block:Answerer}
  2883.                         <div class="ask-answer">
  2884.                             <div class="answer-content">
  2885.                                 <div class="answer-responder">{Answerer} {lang:Answer}</div>
  2886.                                 <div class="answerer-answer">{Answer}</div>
  2887.                             </div>
  2888.                             <div class="answerer-avatar">
  2889.                                 <img src="{AnswererPortraitURL-96}" alt="Answerer Portrait" />
  2890.                             </div>
  2891.                         </div>
  2892.                         {/block:Answerer}
  2893.                         <div class="post-content">{Replies}</div>
  2894.                         {/block:Answer}
  2895.  
  2896.  
  2897.  
  2898.                         {block:RebloggedFrom}
  2899.                         <div class="reblog-list">
  2900.                             {block:Reblogs}
  2901.                             <div class="reblog-item">
  2902.                                 <div class="post-reblog-header">
  2903.                                     <div class="post-reblog-wrapper">
  2904.                                         {block:IsDeactivated}
  2905.                                         <div class="reblog-avatar">
  2906.                                             <img src="{PortraitURL-64}" alt="{Username} Profle Picture">
  2907.                                         </div>
  2908.                                         <span class="inactive reblog-username">{Username}</span>
  2909.                                         {/block:IsDeactivated}
  2910.                                         {block:IsActive}
  2911.                                         <a href="{Permalink}" class="reblog-avatar">
  2912.                                             <img src="{PortraitURL-64}" alt="{Username} Profle Picture">
  2913.                                         </a>
  2914.                                         <a class="active reblog-username" href="{Permalink}">{Username}</a>
  2915.                                         {/block:IsActive}
  2916.                                     </div>
  2917.                                 </div>
  2918.                                 <div class="post-content">
  2919.                                     {body}
  2920.                                 </div>
  2921.                             </div>
  2922.                             {/block:Reblogs}
  2923.                         </div>
  2924.                         {/block:RebloggedFrom}
  2925.  
  2926.                         {block:NotReblog}
  2927.                         {block:Text}
  2928.  
  2929.                         <div class="post-content">
  2930.                             {block:Link}
  2931.                             {Description}
  2932.                             {/block:Link}
  2933.                             {Caption}
  2934.                             {Body}
  2935.                         </div>
  2936.  
  2937.                         {block:Text}
  2938.                         {/block:NotReblog}
  2939.                         {block:Date}
  2940.                         <div class="post-footer">
  2941.                             <div class="post-info">
  2942.                                 {block:PinnedPostLabel}
  2943.                                 <span class="material-icons pinned">
  2944.                                     push_pin
  2945.                                 </span>
  2946.                                 {/block:PinnedPostLabel}
  2947.                                 <span>
  2948.                                     <a
  2949.                                        href="{Permalink}"
  2950.                                        title="{lang:Posted on DayOfWeek the DayOfMonthWithSuffix of Month Year at FormattedTime}"
  2951.                                    > {lang:Posted TimeAgo}</a>
  2952.                                 </span>
  2953.                                 {block:RebloggedFrom}
  2954.                                 <i aria-title="Reblogged from " class="post-reblog material-icons">loop</i>
  2955.                                 <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>
  2956.                                 {/block:RebloggedFrom}
  2957.                             </div>
  2958.                             <ul class="post-meta dark_{select:Dark Like and Reblog Colors} light_{select:Like and Reblog Colors}">
  2959.                                 <li><a href="{Permalink}" title="{NoteCountWithLabel}">{NoteCount}</a></li>
  2960.                                 <li class="light-button">
  2961.                                     {block:IfBlackLikeAndReblogButton}
  2962.                                     {ReblogButton color="black"}
  2963.                                     {/block:IfBlackLikeAndReblogButton}
  2964.                                     {block:IfNotBlackLikeAndReblogButton}
  2965.                                     {ReblogButton color="white"}
  2966.                                     {/block:IfNotBlackLikeAndReblogButton}
  2967.                                 </li>
  2968.                                 <li class="dark-button">
  2969.                                
  2970.                                     {block:IfDarkModeBlackLikeAndReblogButton}
  2971.                                     {ReblogButton color="black"}
  2972.                                     {/block:IfDarkModeBlackLikeAndReblogButton}
  2973.                                     {block:IfNotDarkModeBlackLikeAndReblogButton}
  2974.                                     {ReblogButton color="white"}
  2975.                                     {/block:IfNotDarkModeBlackLikeAndReblogButton}
  2976.                                 </li>
  2977.                             </ul>
  2978.                         </div>
  2979.                     {/block:Date}
  2980.             </div>
  2981.            
  2982.             {block:HasTags}
  2983.             <div class="post-tags">
  2984.                 {block:Tags}
  2985.                 <div class="tag-item">
  2986.                     <a aria-label="{URLSafeTag}" href="{TagURL}">
  2987.                         {Tag}
  2988.                     </a>
  2989.                 </div>
  2990.                 {/block:Tags}
  2991.             </div>
  2992.             {/block:HasTags}
  2993.  
  2994.             </article>
  2995.  
  2996.             {block:PostNotes}
  2997.             <!-- POST NOTES -->
  2998.             <div class="note-info">
  2999.                 <div class="note-wrapper">
  3000.                     {block:NoteCount}
  3001.                     <div class="note-count">{NoteCountWithLabel}</div>
  3002.                     {/block:NoteCount}
  3003.                     {PostNotes-64}
  3004.                 </div>
  3005.             </div>
  3006.             {/block:PostNotes}
  3007.  
  3008.             {/block:Posts}
  3009.             </div>
  3010.             {block:Pagination}
  3011.             <div class="pages-mobile">
  3012.                 <div class="pages-wrapper">
  3013.                     {block:PreviousPage}
  3014.                     <a href="{PreviousPage}" class="pagination page-back">
  3015.                         <div class="material-icons">arrow_back</div>
  3016.                         <span class="prev">{lang:Prev}</span>
  3017.                     </a>
  3018.                     {block:PreviousPage}
  3019.                     <span class="pagination page-number">
  3020.                         <div class="current">
  3021.                             {lang:Page CurrentPage of TotalPages}
  3022.                         </div>
  3023.                     </span>
  3024.                     {block:NextPage}
  3025.                     <a href="{NextPage}" class="pagination page-next">
  3026.                         <span class="next">{lang:Next}</span>
  3027.                         <div class="material-icons">arrow_forward</div>
  3028.                     </a>
  3029.                     {/block:NextPage}
  3030.                 </div>
  3031.             </div>
  3032.             {/block:Pagination}
  3033.            
  3034.         </div> <!-- / MAIN-WRAPPER -->
  3035.     </main> <!-- / MAIN -->
  3036.  
  3037.     <aside id="sidebar">
  3038.         <div class="wrapper">
  3039.             <div class="information">
  3040.                 <div class="side-title">
  3041.                     {block:PreviousPage}
  3042.                     <a href="{PreviousPage}" class="pagination">
  3043.                         <div class="material-icons">arrow_back</div>
  3044.                     </a>
  3045.                     {/block:PreviousPage}
  3046.                     <h2 class="subtitle"><a href="/">{text:Subtitle}</a></h2>
  3047.                     {block:NextPage}
  3048.                     <a href="{NextPage}" class="pagination">
  3049.                         <div class="material-icons">arrow_forward</div>
  3050.                     </a>
  3051.                     {/block:NextPage}
  3052.                 </div>
  3053.                 <div class="details"><p>{text:Description}</p></div>
  3054.                 {block:IfUpdatesText}
  3055.                 <div class="updates">
  3056.                     {block:IfUpdatesTitle}
  3057.                     <div class="update-title">
  3058.                         <h3>
  3059.                             {block:IfUpdatesLink}
  3060.                             <a href="{text:Updates Link}">
  3061.                                 {text:Updates Title}
  3062.                             </a>
  3063.                             {/block:IfUpdatesLink}
  3064.                             {block:IfNotUpdatesLink}
  3065.                             <span>
  3066.                                 {text:Updates Title}
  3067.                             </span>
  3068.                             {/block:IfNotUpdatesLink}
  3069.                         </h3>
  3070.                     </div>
  3071.                     {block:IfUpdatesTitle}
  3072.                    
  3073.                     <div class="update-details">
  3074.                         <p>{text:Updates Text}</p>                        
  3075.                     </div>
  3076.  
  3077.                 </div>
  3078.                 {/block:IfUpdatesText}
  3079.                 <nav class="categories">
  3080.                     {block:IfCustomLinksTitle}
  3081.                     <h3>{text:Custom Links Title}</h3>
  3082.                     {block:IfCustomLinksTitle}
  3083.                     <ul>
  3084.                         {block:IfLink1Name}
  3085.                         <li>
  3086.                             <a href="{text:Link 1 URL}">
  3087.                                 {text:Link 1 Name}
  3088.                             </a>
  3089.                         </li>
  3090.                         {/block:IfLink1Name}
  3091.                         {block:IfLink2Name}
  3092.                         <li>
  3093.                             <a href="{text:Link 2 URL}">
  3094.                                 {text:Link 2 Name}
  3095.                             </a>
  3096.                         </li>
  3097.                         {/block:IfLink2Name}
  3098.                         {block:IfLink3Name}
  3099.                         <li>
  3100.                             <a href="{text:Link 3 URL}">
  3101.                                 {text:Link 3 Name}
  3102.                             </a>
  3103.                         </li>
  3104.                         {/block:IfLink3Name}
  3105.                         {block:IfLink4Name}
  3106.                         <li>
  3107.                             <a href="{text:Link 4 URL}">
  3108.                                 {text:Link 4 Name}
  3109.                             </a>
  3110.                         </li>
  3111.                         {/block:IfLink4Name}
  3112.                         {block:IfLink5Name}
  3113.                         <li>
  3114.                             <a href="{text:Link 5 URL}">
  3115.                                 {text:Link 5 Name}
  3116.                             </a>
  3117.                         </li>
  3118.                         {/block:IfLink5Name}
  3119.                         {block:IfLink6Name}
  3120.                         <li>
  3121.                             <a href="{text:Link 6 URL}">
  3122.                                 {text:Link 6 Name}
  3123.                             </a>
  3124.                         </li>
  3125.                         {/block:IfLink6Name}
  3126.                         {block:IfLink7Name}
  3127.                         <li>
  3128.                             <a href="{text:Link 7 URL}">
  3129.                                 {text:Link 7 Name}
  3130.                             </a>
  3131.                         </li>
  3132.                         {/block:IfLink7Name}
  3133.                         {block:IfLink8Name}
  3134.                         <li>
  3135.                             <a href="{text:Link 8 URL}">
  3136.                                 {text:Link 8 Name}
  3137.                             </a>
  3138.                         </li>
  3139.                         {/block:IfLink8Name}
  3140.                     </ul>
  3141.                 </nav>
  3142.                 {block:HasPages}
  3143.                 <nav class="side-links">
  3144.                     {block:IfCustomPagesLabel}
  3145.                     <h3 class="nav-link">{text:Custom Pages Label}</h3>
  3146.                     {/block:IfCustomPagesLabel}
  3147.                     {block:IfNotCustomPagesLabel}
  3148.                     <h3 class="nav-link">{lang:Pages}</h3>
  3149.                     {/block:IfNotCustomPagesLabel}
  3150.                     <ul>
  3151.                         {block:Pages}
  3152.                         <li>
  3153.                             <a href="{URL}" title="{Label}">
  3154.                                 {Label}
  3155.                             </a>
  3156.                         </li>
  3157.                         {/block:Pages}
  3158.                     </ul>
  3159.                 </nav>
  3160.                 {/block:HasPages}
  3161.             </div>
  3162.             <div class="side-actions">
  3163.                 <form class="{block:HideFromSearchEnabled}no-search{/block:HideFromSearchEnabled} search" action="/search" method="get">
  3164.                     <input type="text" name="q" placeholder="Search this blog..." />
  3165.                 </form>
  3166.             </div>
  3167.         </div>
  3168.     </aside> <!-- SIDENAV -->
  3169.  
  3170.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  3171.        
  3172.         <!-- Minified functions for lightboxes and photosets-->
  3173.         <script src="https://static.tumblr.com/7ijwq6x/CPWrlisng/functions1.min.js"></script>
  3174.        
  3175.         <script>
  3176.             function colorMode() {
  3177.                
  3178.                 const cookiesEnabled = navigator.cookieEnabled;
  3179.                
  3180.                 function storeMode(darkMode) {
  3181.                     if (cookiesEnabled) localStorage.setItem("dark", darkMode);
  3182.                 }
  3183.                
  3184.                 let dark = cookiesEnabled ? localStorage.getItem("dark") === "true" : false;
  3185.  
  3186.                 function setMode() {
  3187.                     $(".scheme div").text(dark ? "dark_mode" : "light_mode");
  3188.                     $(":root").toggleClass("dark-mode", dark)
  3189.                    
  3190.                     storeMode(dark);
  3191.                 }
  3192.                
  3193.                 if (dark === null) {
  3194.                     dark = false;
  3195.  
  3196.                     {block:IfDarkModeByDefault}
  3197.                    
  3198.                     dark = true;
  3199.                    
  3200.                     {/block:IfDarkModeByDefault}
  3201.                    
  3202.                     {block:IfNotDarkModeByDefault}
  3203.                     dark = window.matchMedia("(prefers-color-scheme: dark)").matches
  3204.                     {/block:IfNotDarkModeByDefault}
  3205.  
  3206.                 }
  3207.                
  3208.                 {block:IfNotEnableDarkMode}
  3209.                 dark = false;
  3210.                 {/block:IfNotEnableDarkMode}
  3211.                
  3212.                 setMode(dark);
  3213.  
  3214.                 {block:IfEnableDarkMode}
  3215.                 $(".scheme").click(function () {
  3216.                     dark = !dark;
  3217.                     setMode();
  3218.                 });
  3219.                
  3220.                 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
  3221.                     dark = event.matches;
  3222.                     setMode()
  3223.                     })
  3224.                 {/block:IfEnableDarkMode}
  3225.                
  3226.             }
  3227.        
  3228.             $(document).ready(function () {
  3229.                 $("html").addClass("loaded")
  3230.                
  3231.                 colorMode();
  3232.                
  3233.                 $(".high-res .featured-image").click(openLightbox)
  3234.                 $("#link-list").click(toggleSidebar);
  3235.                
  3236.                 $( '#sidebar' ).click(disableCheck);
  3237.                 $( '.slideshow' ).each(setPhotosetLayout);
  3238.                 $( '.slideshow .image' ).click(startSlideshow);
  3239.             })
  3240.         </script>
  3241.        
  3242.         {block:IfShowNpfRendering}
  3243.         <!-- NPF Rendering -->
  3244.         <script>
  3245.        
  3246.             /// Updates the post type for an NPF post
  3247.             function updateTypes(type, article) {
  3248.                 article.classList.remove("text");
  3249.                 const postName = "npf-post-" + type;
  3250.                 article.classList.add(postName, "npf-post");
  3251.             }
  3252.            
  3253.             /// rename photoset row and column classes for custom rendering
  3254.             function renamePhotosetClasses(photoset) {
  3255.                 const rows = photoset.querySelectorAll(".npf_row");
  3256.                 rows.forEach(row => row.classList.replace("npf_row", "row"));
  3257.                 const cols = photoset.querySelectorAll(".npf_col");
  3258.                 cols.forEach(col => col.classList.replace("npf_col", "col"));
  3259.             }
  3260.            
  3261.             /// returns a list of NPF image objects
  3262.             function getNPFImages(npf) {
  3263.                 const imageList = [];
  3264.                
  3265.                 for (const trail of npf.trail) {
  3266.                     for (const content of trail.content) {
  3267.                         if (content.type === "image") {
  3268.                             imageList.push(content);
  3269.                         }
  3270.                     }
  3271.                 }
  3272.                 for (const content of npf.content) {
  3273.                     if (content.type === "image") {
  3274.                         imageList.push(content);
  3275.                     }
  3276.                 }
  3277.  
  3278.                 return imageList;
  3279.             }
  3280.            
  3281.             /// function for customizing images based on NPF format
  3282.             function customizeImages(npf, content) {
  3283.                 const npfImageList = getNPFImages(npf);
  3284.                 if (npfImageList.length === 0) return;
  3285.                 const htmlImageList = content.querySelectorAll("figure .post_media_photo");
  3286.  
  3287.                 for (const index in npfImageList) {
  3288.                     const img = npfImageList[index];
  3289.                     const htmlImg = htmlImageList[index];
  3290.                    
  3291.                     // create attribution object for images with attribution
  3292.                     if(img?.attribution && htmlImg) {
  3293.                        const url = img.attribution.url;
  3294.                         const figure = htmlImg.parentElement.parentElement;
  3295.                         let innerText = img.attribution.display_text ?? url;
  3296.                        
  3297.                         const link = document.createElement("a");
  3298.                         link.innerText = innerText;
  3299.                         link.href = url;
  3300.                        
  3301.                         const attribution = document.createElement("figcaption");
  3302.                         attribution.classList.add("click-through");
  3303.                         attribution.append(link);
  3304.                         figure.append(attribution);
  3305.                     }
  3306.                 }
  3307.             }
  3308.        
  3309.             // remove empty p tags
  3310.             for (const p of document.querySelectorAll("p")) {
  3311.                 if (p.innerHTML.trim() === "") {
  3312.                     p.remove()
  3313.                 }
  3314.             }
  3315.             // create posts array
  3316.             let posts = [];
  3317.             {block:Posts}
  3318.                 posts.push({ npf: JSON.parse({JSNPF}), id: {JSPostId}});
  3319.             {/block:Posts}
  3320.            
  3321.             for (const post of posts) {
  3322.                 let npf = post.npf;
  3323.                 let article = document.getElementById(`${post.id}`);
  3324.                 let content = article.querySelector(".post-body");
  3325.  
  3326.                 if (content != null && article.classList.contains("text")) {
  3327.                    customizeImages(npf, content);
  3328.                     switch(npf.trail[0]?.content[0]?.type ?? npf.content[0].type) {
  3329.                         case "image":
  3330.                             if (article.querySelector(".npf_row")) {
  3331.                                 const parent = content.querySelectorAll(".npf_row")[0].parentElement;
  3332.                                 const elements = [];
  3333.                                 const photoset = document.createElement("div");
  3334.                                 photoset.classList.add("npf-photoset");
  3335.                                 content.prepend(photoset);
  3336.  
  3337.                                 let current = parent.firstElementChild;
  3338.  
  3339.                                 // gather all of the photoset items in the first row; break when there's not one.
  3340.                                 while(current?.classList.contains("npf_row")) {
  3341.                                     elements.push(current);
  3342.                                     current = current.nextElementSibling;
  3343.                                 }
  3344.                                
  3345.                                 photoset.append(...elements);
  3346.                                 renamePhotosetClasses(photoset, true);
  3347.  
  3348.                                 // set post type to photoset if there are multiple photos in the photoset; otherwise, it's a singular photo
  3349.                                 if (photoset.querySelectorAll(".col").length > 1) {
  3350.                                     updateTypes("photoset", article);
  3351.                                 }
  3352.                                 else {
  3353.                                     updateTypes("photo", article);
  3354.                                 }
  3355.  
  3356.                                 // clean up any potential stray reblog headers
  3357.                                 let reblogHeader = article.querySelector(".reblog-header")
  3358.                                 let reblogBody = article.querySelector(".reblog-body")
  3359.                                 if (reblogHeader?.nextElementSibling === reblogBody && reblogBody?.childElementCount === 0) {
  3360.                                    reblogHeader.remove()
  3361.                                    reblogBody.remove()
  3362.                                }
  3363.                            }
  3364.                            break;
  3365.                         case "video":
  3366.                             updateTypes("video", article);
  3367.                             let video = article.querySelector("figure");
  3368.                             content.prepend(video);
  3369.                             break;
  3370.                         case "link":
  3371.                             updateTypes("link", article);
  3372.                             break;
  3373.                         case "audio":
  3374.                             updateTypes("audio", article);
  3375.                             break;
  3376.                         case "quote":
  3377.                             updateTypes("quote", article);
  3378.                     }
  3379.                 }
  3380.             }
  3381.         </script>
  3382.         {/block:IfShowNpfRendering}
  3383.  
  3384.         <noscript>This page requires JavaScript.</noscript>
  3385.  
  3386.     </body>
  3387. </html>
Tags: tumblr theme
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!