cleandream23

opaldreamthere

Sep 2nd, 2026 (edited)
55
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 45.78 KB | Source Code | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  
  7.   <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}{block:SearchQuery} - {SearchQuery}{/block:SearchQuery}</title>
  8.  
  9.   <link rel="preconnect" href="https://fonts.googleapis.com">
  10.   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  11.   <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Exo:ital,wght@0,100..900;1,100..900&family=Inter:wght@400;500;600;700&family=Roboto+Slab:[email protected]&family=Roboto:wght@400;500;700&family=Tomorrow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  12.  
  13.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css" />
  14.  
  15.   <meta name="image:Header" content="https://64.media.tumblr.com/b1dd1b484e342e38313d8b67e3dd5f43/789a116e9587f969-93/s2048x3072/d51baa29b24aa856e6f54c34cde86101ef2656ed.jpg"/>
  16.  
  17.   <meta name="select:Date Format" content="short" title="23 JUN">
  18.   <meta name="select:Date Format" content="slashed" title="23/JUN/2020">
  19.   <meta name="select:Date Format" content="full" title="June 23rd, 2020">
  20.   <meta name="select:Date Format" content="relative" title="Instagram Style (5h ago)">
  21.  
  22.   <meta name="select:Image Border Radius" content="0px" title="Square (0px)">
  23.   <meta name="select:Image Border Radius" content="6px" title="Slightly Rounded (6px)">
  24.   <meta name="select:Image Border Radius" content="12px" title="Medium Rounded (12px)">
  25.   <meta name="select:Image Border Radius" content="16px" title="Extra Rounded (16px)">
  26.  
  27.   <meta name="select:Avatar Shape" content="50%" title="Circle">
  28.   <meta name="select:Avatar Shape" content="12px" title="Rounded Square">
  29.   <meta name="select:Avatar Shape" content="0px" title="Square">
  30.   <meta name="color:Avatar Border Color" content="#ffffff"/>
  31.  
  32.   <meta name="color:Background Color" content="#f0f2f5"/>
  33.   <meta name="color:Gradient Color 2" content="#e2e8f0"/>
  34.  
  35.   <meta name="color:Card Background Color" content="#ffffff"/>
  36.   <meta name="color:Ask Card Background Color" content="#f8fafc"/>
  37.   <meta name="color:Main Text Color" content="#262626"/>
  38.   <meta name="color:Header Title Color" content="#111827"/>
  39.   <meta name="color:Muted Text Color" content="#737373"/>
  40.   <meta name="color:Border Color" content="#e2e8f0"/>
  41.   <meta name="color:Header Link Color" content="#0095f6"/>
  42.   <meta name="color:Tag Color" content="#0095f6"/>
  43.  
  44.   <meta name="color:Selection Text Color" content="#ffffff"/>
  45.   <meta name="color:Selection Background Color" content="#0095f6"/>
  46.  
  47.   <meta name="select:Header Title Font" content="'Alfa Slab One', cursive" title="Alfa Slab One">
  48.   <meta name="select:Header Title Font" content="'Tomorrow', sans-serif" title="Tomorrow">
  49.   <meta name="select:Header Title Font" content="'Inter', sans-serif" title="Inter">
  50.   <meta name="select:Header Title Font" content="'Roboto Slab', serif" title="Roboto Slab">
  51.  
  52.   <meta name="select:Primary Font" content="'Inter', sans-serif" title="Inter">
  53.   <meta name="select:Primary Font" content="'Exo', sans-serif" title="Exo">
  54.   <meta name="select:Primary Font" content="'Tomorrow', sans-serif" title="Tomorrow">
  55.   <meta name="select:Primary Font" content="'Alfa Slab One', cursive" title="Alfa Slab One">
  56.  
  57.   <meta name="select:Secondary Font" content="'Exo 2', sans-serif" title="Exo 2">
  58.   <meta name="select:Secondary Font" content="'Exo', sans-serif" title="Exo">
  59.   <meta name="select:Secondary Font" content="'Roboto Slab', serif" title="Roboto Slab">
  60.   <meta name="select:Secondary Font" content="'Inter', sans-serif" title="Inter">
  61.  
  62.   <meta name="select:Post Width" content="540px" title="Default (540px)">
  63.   <meta name="select:Post Width" content="480px" title="Compact (480px)">
  64.   <meta name="select:Post Width" content="600px" title="Wide (600px)">
  65.   <meta name="select:Post Width" content="650px" title="Extra Wide (650px)">
  66.  
  67.   <meta name="text:Instagram Username" content=""/>
  68.   <meta name="text:Instagram URL" content=""/>
  69.  
  70.   <meta name="text:Threads Username" content=""/>
  71.   <meta name="text:Threads URL" content=""/>
  72.  
  73.   <meta name="text:Twitter Username" content=""/>
  74.   <meta name="text:Twitter URL" content=""/>
  75.  
  76.   <meta name="text:TikTok Username" content=""/>
  77.   <meta name="text:TikTok URL" content=""/>
  78.  
  79.   <meta name="text:YouTube Username" content=""/>
  80.   <meta name="text:YouTube URL" content=""/>
  81.  
  82.   <meta name="text:Custom Sidebar Widget HTML" content=""/>
  83.   <meta name="text:Custom Footer Text" content=""/>
  84.  
  85.   <style>
  86.     /* ====================================
  87.        EDITABLE CONFIGURATION (CSS VARIABLES)
  88.     ==================================== */
  89.     :root {
  90.       --header-title-font: {select:Header Title Font};
  91.       --main-font: {select:Primary Font};
  92.       --second-font: {select:Secondary Font};
  93.       --post-width: {select:Post Width};
  94.       --img-border-radius: {select:Image Border Radius};
  95.  
  96.       /* Dynamic Theme Colors */
  97.       --bg-color-1: {color:Background Color};
  98.       --bg-color-2: {color:Gradient Color 2};
  99.       --card-bg: {color:Card Background Color};
  100.       --ask-bg: {color:Ask Card Background Color};
  101.       --text-main: {color:Main Text Color};
  102.       --text-header-title: {color:Header Title Color};
  103.       --text-muted: {color:Muted Text Color};
  104.       --border-color: {color:Border Color};
  105.       --post-header-color: {color:Main Text Color};
  106.       --post-header-link: {color:Header Link Color};
  107.       --tag-color: {color:Tag Color};
  108.  
  109.       /* Avatar Customizations */
  110.       --avatar-radius: {select:Avatar Shape};
  111.       --avatar-border-color: {color:Avatar Border Color};
  112.  
  113.       /* Text Selection Colors */
  114.       --selection-text: {color:Selection Text Color};
  115.       --selection-bg: {color:Selection Background Color};
  116.     }
  117.  
  118.     * {
  119.       box-sizing: border-box;
  120.       margin: 0;
  121.       padding: 0;
  122.     }
  123.  
  124.     /* CUSTOM TEXT SELECTION */
  125.     ::selection {
  126.       background-color: var(--selection-bg);
  127.       color: var(--selection-text);
  128.     }
  129.  
  130.     ::-moz-selection {
  131.       background-color: var(--selection-bg);
  132.       color: var(--selection-text);
  133.     }
  134.  
  135.     body {
  136.       color: var(--text-main);
  137.       font-family: var(--main-font);
  138.       min-height: 100vh;
  139.       display: flex;
  140.       flex-direction: column;
  141.       align-items: center;
  142.       padding: 40px 20px 20px;
  143.       background: linear-gradient(to bottom, var(--bg-color-1), var(--bg-color-2));
  144.       background-attachment: fixed;
  145.     }
  146.  
  147.     a {
  148.       color: inherit;
  149.       text-decoration: none;
  150.     }
  151.  
  152.      h1, h2, h3, h4, .post-title {
  153.       font-family: var(--header-title-font);
  154.       color: var(--text-header-title);
  155.     }
  156.  
  157.     .app-layout {
  158.       display: flex;
  159.       width: 100%;
  160.       max-width: calc(280px + var(--post-width) + 30px);
  161.       align-items: flex-start;
  162.       margin-bottom: 24px;
  163.     }
  164.  
  165.     /* ====================================
  166.        SIDEBAR & SEARCH CARD
  167.    ==================================== */
  168.    .sidebar-wrapper {
  169.      width: 280px;
  170.       min-width: 280px;
  171.       margin-right: 30px !important;
  172.       position: relative;
  173.       display: flex;
  174.       flex-direction: column;
  175.     }
  176.    
  177.     .sidebar-wrapper > * + * {
  178.       margin-top: 20px;
  179.     }
  180.  
  181.     .search-card {
  182.       background: var(--card-bg);
  183.       border: none;
  184.       border-radius: 12px;
  185.       padding: 8px 12px;
  186.       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  187.     }
  188.  
  189.     .search-card form {
  190.       display: flex;
  191.       align-items: center;
  192.       width: 100%;
  193.       gap: 8px;
  194.     }
  195.  
  196.     .search-card input {
  197.       flex: 1;
  198.       padding: 8px 10px;
  199.       border-radius: 6px;
  200.       border: none;
  201.       background: transparent;
  202.       font-family: var(--second-font);
  203.       color: var(--text-main);
  204.       font-size: 0.89rem;
  205.       outline: none;
  206.     }
  207.  
  208.     .search-card input::placeholder {
  209.       color: var(--text-muted);
  210.     }
  211.  
  212.     .search-card button {
  213.       background: var(--post-header-link);
  214.       border: none;
  215.       border-radius: 6px;
  216.       cursor: pointer;
  217.       color: #ffffff;
  218.       display: flex;
  219.       align-items: center;
  220.       justify-content: center;
  221.       padding: 8px;
  222.       transition: opacity 0.2s;
  223.     }
  224.  
  225.     .search-card button:hover {
  226.       opacity: 0.85;
  227.     }
  228.  
  229.     .search-card button span {
  230.       font-size: 1.1rem;
  231.     }
  232.  
  233.     .sidebar-card {
  234.       background: var(--card-bg);
  235.       border: none;
  236.       border-radius: 12px;
  237.       overflow: hidden;
  238.       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  239.       display: flex;
  240.       flex-direction: column;
  241.     }
  242.  
  243.     /* HEADER BANNER IMAGE SUPPORT */
  244.     .sidebar-banner {
  245.   height: 110px;
  246.   background-size: cover;
  247.   background-position: center;
  248.   background-color: var(--border-color);
  249.   {block:ShowHeaderImage}
  250.   background-image: url('{HeaderImage}');
  251.   {/block:ShowHeaderImage}
  252. }
  253.  
  254.     .sidebar-profile {
  255.       padding: 0 20px 20px;
  256.       margin-top: -40px;
  257.       display: flex;
  258.       flex-direction: column;
  259.       align-items: center;
  260.       text-align: center;
  261.     }
  262.  
  263.     /* DYNAMIC AVATAR SHAPE AND BORDER COLOR */
  264.     .sidebar-avatar img {
  265.       width: 5.3rem;
  266.       height: 5.3rem;
  267.       border-radius: var(--avatar-radius);
  268.       object-fit: cover;
  269.       border: 3px solid var(--avatar-border-color);
  270.       box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  271.     }
  272.  
  273.     .sidebar-title {
  274.       font-size: 1.3rem;
  275.       font-weight: 700;
  276.       margin-top: 11px;
  277.     }
  278.  
  279.     .sidebar-desc {
  280.       font-size: 0.85rem;
  281.       color: var(--text-muted);
  282.       line-height: 1.4;
  283.       margin-top: 8px;
  284.       font-family: var(--second-font);
  285.     }
  286.  
  287.     .sidebar-content-body {
  288.       padding: 0 20px 20px;
  289.       display: flex;
  290.       flex-direction: column;
  291.       gap: 16px;
  292.     }
  293.  
  294.     .sidebar-divider {
  295.       height: 1px;
  296.       background: var(--border-color);
  297.       width: 85%;
  298.       margin: 0 auto;
  299.     }
  300.  
  301.     .sidebar-nav {
  302.       display: flex;
  303.       flex-direction: column;
  304.       gap: 6px;
  305.     }
  306.  
  307.     .sidebar-nav a {
  308.       font-weight: 600;
  309.       font-size: 1.1rem;
  310.       padding: 8px 11px;
  311.       border-radius: 6px;
  312.       transition: all 0.2s ease;
  313.       display: flex;
  314.       align-items: center;
  315.       gap: 8px;
  316.       color: var(--text-main);
  317.     }
  318.  
  319.     .sidebar-nav a:hover,
  320.     .sidebar-nav a.active-nav {
  321.       color: var(--post-header-link) !important;
  322.       background-color: var(--ask-bg);
  323.     }
  324.  
  325.     .sidebar-socials {
  326.       display: flex;
  327.       flex-direction: column;
  328.       gap: 10px;
  329.     }
  330.  
  331.     .social-link {
  332.       display: flex;
  333.       align-items: center;
  334.       gap: 10px;
  335.       font-size: 0.9rem;
  336.       font-family: var(--second-font);
  337.       font-weight: 500;
  338.       color: var(--text-main);
  339.       padding: 6px 8px;
  340.       border-radius: 6px;
  341.       transition: color 0.2s;
  342.     }
  343.  
  344.     .social-link span.icon {
  345.       font-size: 1.25rem;
  346.       display: flex;
  347.       align-items: center;
  348.       justify-content: center;
  349.     }
  350.  
  351.     .social-link:hover {
  352.       color: var(--post-header-link);
  353.     }
  354.  
  355.     .custom-html-block {
  356.       font-size: 0.85rem;
  357.       color: var(--text-main);
  358.       font-family: var(--second-font);
  359.       line-height: 1.4;
  360.       word-break: break-word;
  361.     }
  362.  
  363.     /* ====================================
  364.        FEED & BASE POST CARDS
  365.    ==================================== */
  366.    .feed {
  367.      flex: 1;
  368.       width: var(--post-width);
  369.       max-width: var(--post-width);
  370.       min-width: 0;
  371.     }
  372.  
  373.     .ig-card {
  374.       background: var(--card-bg);
  375.       border: none;
  376.       border-radius: 12px;
  377.       margin-bottom: 24px;
  378.       overflow: hidden;
  379.       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  380.       position: relative;
  381.     }
  382.  
  383.     .card-header {
  384.       display: flex;
  385.       align-items: center;
  386.       justify-content: space-between;
  387.       padding: 12px 16px;
  388.       color: var(--post-header-color);
  389.       position: relative;
  390.     }
  391.  
  392.     .card-header::after {
  393.       content: "";
  394.       position: absolute;
  395.       bottom: 0;
  396.       left: 7.5%;
  397.       width: 85%;
  398.       height: 1px;
  399.       background-color: var(--border-color);
  400.     }
  401.  
  402.     .card-header .user-info {
  403.       display: flex;
  404.       align-items: center;
  405.       gap: 8px;
  406.       font-weight: 600;
  407.       font-size: 0.9rem;
  408.     }
  409.  
  410.     .card-header .user-info img {
  411.       width: 32px;
  412.       height: 32px;
  413.       border-radius: 50%;
  414.     }
  415.  
  416.     .card-header a {
  417.       color: var(--post-header-link);
  418.     }
  419.  
  420.     .card-header .post-date {
  421.       font-size: 0.75rem;
  422.       color: var(--text-muted);
  423.       text-transform: uppercase;
  424.       font-family: var(--second-font);
  425.     }
  426.  
  427.     .card-content img,
  428.     .reblog-content-body img {
  429.       width: 100%;
  430.       display: block;
  431.       height: auto;
  432.       border-radius: var(--img-border-radius);
  433.     }
  434.    
  435.     .html_photoset {
  436.   width: 100% !important;
  437.   max-width: 100% !important;
  438.   margin-left: 1.1rem !important;
  439.   margin-right: 1.1rem !important;
  440.   border-radius: var(--img-border-radius);
  441. }
  442.  
  443.     .card-text-body {
  444.       padding: 16px;
  445.       font-size: 0.95rem;
  446.       line-height: 1.5;
  447.       font-family: var(--main-font);
  448.     }
  449.  
  450.     .card-text-body h3, .card-text-body h1, .card-text-body h2 {
  451.       font-family: var(--header-title-font);
  452.       color: var(--text-header-title);
  453.       margin-bottom: 8px;
  454.     }
  455.  
  456.     .read_more, a.read_more, .read-more, a.read-more {
  457.       display: flex;
  458.       align-items: center;
  459.       justify-content: center;
  460.       margin: 16px auto 8px auto;
  461.       width: fit-content;
  462.       padding: 8px 18px;
  463.       background: var(--ask-bg);
  464.       border: 1px solid var(--border-color);
  465.       border-radius: 20px;
  466.       color: var(--post-header-link) !important;
  467.       font-weight: 600;
  468.       font-size: 0.85rem;
  469.       font-family: var(--second-font);
  470.       transition: all 0.2s ease;
  471.       text-align: center;
  472.     }
  473.  
  474.     .read_more:hover, a.read_more:hover, .read-more:hover, a.read-more:hover {
  475.       background: var(--border-color);
  476.     }
  477.  
  478.     .card-content iframe,
  479.     .reblog-content-body iframe,
  480.     .tumblr_video_container iframe,
  481.     iframe.tumblr_audio_player {
  482.       max-width: 100% !important;
  483.       border-radius: var(--img-border-radius);
  484.     }
  485.  
  486.     .tumblr_video_container {
  487.       width: 100% !important;
  488.       height: auto !important;
  489.       aspect-ratio: 16 / 9;
  490.       margin: 10px 0;
  491.       overflow: hidden;
  492.       border-radius: var(--img-border-radius);
  493.     }
  494.  
  495.     .tumblr_video_container iframe {
  496.       width: 100% !important;
  497.       height: 100% !important;
  498.     }
  499.  
  500.     .tumblr_parent, .np_link_embed, a.tumblr-link-anchor {
  501.       display: block !important;
  502.       background: var(--ask-bg) !important;
  503.       border: 1px solid var(--border-color) !important;
  504.       border-radius: var(--img-border-radius) !important;
  505.       margin: 12px 0 !important;
  506.       text-decoration: none !important;
  507.       overflow: hidden !important;
  508.       transition: border-color 0.2s ease, background-color 0.2s ease;
  509.     }
  510.  
  511.     .tumblr_parent:hover, a.tumblr-link-anchor:hover {
  512.       border-color: var(--post-header-link) !important;
  513.     }
  514.  
  515.     .tumblr-link-card, .np_link_embed {
  516.       display: flex;
  517.       flex-direction: column;
  518.     }
  519.  
  520.     .tumblr-link-card .link-asset, .np_link_embed .link-asset img {
  521.       width: 100%;
  522.       height: auto;
  523.       max-height: 280px;
  524.       object-fit: cover;
  525.     }
  526.  
  527.     .tumblr-link-card .link-summary, .np_link_embed .link-summary {
  528.       padding: 14px;
  529.     }
  530.  
  531.     .tumblr-link-card .link-title, .np_link_embed .link-title {
  532.       font-family: var(--header-title-font);
  533.       font-size: 1.05rem;
  534.       font-weight: 700;
  535.       color: var(--text-header-title);
  536.       margin-bottom: 6px;
  537.     }
  538.  
  539.     .tumblr-link-card .link-description, .np_link_embed .link-description {
  540.       font-size: 0.85rem;
  541.       color: var(--text-muted);
  542.       font-family: var(--second-font);
  543.       line-height: 1.4;
  544.       margin-bottom: 8px;
  545.     }
  546.  
  547.     .tumblr-link-card .link-site-name, .np_link_embed .link-site-name {
  548.       font-size: 0.75rem;
  549.       font-family: var(--second-font);
  550.       color: var(--post-header-link);
  551.       text-transform: uppercase;
  552.       font-weight: 600;
  553.       letter-spacing: 0.5px;
  554.     }
  555.    
  556.     /* ====================================
  557.    CUSTOM RICH TEXT & CONTENT FORMATTING
  558. ==================================== */
  559.  
  560. /* 1. QUOTE & CHAT POSTS/BLOCKS USE SECONDARY FONT */
  561. .quote-text,
  562. .quote-source,
  563. .reblog-content-body blockquote.np_quote,
  564. .card-text-body blockquote.np_quote,
  565. .chat-teaser,
  566. .np_chat,
  567. .reblog-content-body .chat,
  568. .card-text-body .chat,
  569. ul.chat,
  570. li.chat-line {
  571.  font-family: var(--second-font) !important;
  572. }
  573.  
  574. /* 2. INDENTED BLOCKQUOTES (STYLING LIKE ASK CARDS) */
  575. .card-text-body blockquote,
  576. .reblog-content-body blockquote {
  577.   background: var(--ask-bg) !important;
  578.   border: 1px solid var(--border-color) !important;
  579.   border-left: 1px solid var(--border-color) !important; /* Removes default thick vertical accent bar */
  580.   border-radius: 8px !important;
  581.   padding: 14px 16px !important;
  582.   margin: 12px 0 !important;
  583.   box-shadow: none !important;
  584. }
  585.  
  586. /* 3. BULLETED & NUMBERED LIST INDENTATION */
  587. .card-text-body ul,
  588. .card-text-body ol,
  589. .reblog-content-body ul,
  590. .reblog-content-body ol {
  591.  padding-left: 24px !important;
  592.   margin: 12px 0 !important;
  593. }
  594.  
  595. .card-text-body li,
  596. .reblog-content-body li {
  597.   margin-bottom: 6px;
  598.   padding-left: 4px;
  599. }
  600.  
  601. .card-text-body li:last-child,
  602. .reblog-content-body li:last-child {
  603.   margin-bottom: 0;
  604. }
  605.  
  606.     .reblog-list {
  607.       display: flex;
  608.       flex-direction: column;
  609.     }
  610.  
  611.     .reblog-item {
  612.       padding: 16px;
  613.       position: relative;
  614.     }
  615.  
  616.     .reblog-item::after {
  617.   content: "";
  618.   position: absolute;
  619.   bottom: 0;
  620.   left: 7.5%;
  621.   width: 85%;
  622.   height: 1px;
  623.   background-color: var(--border-color);
  624. }
  625.  
  626. /* Only remove the separator from the final reblog item */
  627. .reblog-list:not(:has(~ .reblog-list)) .reblog-item::after {
  628.   display: none;
  629. }
  630.  
  631.     .reblog-item-header {
  632.       display: flex;
  633.       align-items: center;
  634.       justify-content: space-between;
  635.       margin-bottom: 12px;
  636.     }
  637.  
  638.     .reblog-user {
  639.       display: flex;
  640.       align-items: center;
  641.       gap: 10px;
  642.       font-weight: 600;
  643.       font-size: 0.9rem;
  644.     }
  645.  
  646.     .reblog-user img {
  647.       width: 28px;
  648.       height: 28px;
  649.       border-radius: 50%;
  650.       object-fit: cover;
  651.     }
  652.  
  653.     .reblog-user a {
  654.       color: var(--post-header-link);
  655.     }
  656.  
  657.     .reblog-user .deactivated {
  658.       color: var(--text-muted);
  659.       font-style: italic;
  660.     }
  661.  
  662.     .reblog-post-date {
  663.       font-size: 0.75rem;
  664.       color: var(--text-muted);
  665.       text-transform: uppercase;
  666.       font-family: var(--second-font);
  667.     }
  668.  
  669.     .reblog-content-body {
  670.       font-size: 0.93rem;
  671.       line-height: 1.5;
  672.       font-family: var(--main-font);
  673.       color: var(--text-main);
  674.     }
  675.  
  676.     .reblog-content-body h1, .reblog-content-body h2, .reblog-content-body h3 {
  677.       font-family: var(--header-title-font);
  678.       color: var(--text-header-title);
  679.       margin-bottom: 8px;
  680.     }
  681.  
  682.     .reblog-content-body p {
  683.       margin-bottom: 10px;
  684.     }
  685.  
  686.     .reblog-content-body p:last-child {
  687.       margin-bottom: 0;
  688.     }
  689.  
  690.     .ask-box {
  691.       background: var(--ask-bg);
  692.       border-left: 5px solid var(--post-header-link);
  693.       margin: 16px 16px 0;
  694.       border-radius: 8px;
  695.       padding: 16px;
  696.     }
  697.  
  698.     .asker-info {
  699.       display: flex;
  700.       align-items: center;
  701.       gap: 10px;
  702.       font-family: var(--second-font);
  703.       font-weight: 600;
  704.       font-size: 0.9rem;
  705.       margin-bottom: 10px;
  706.     }
  707.  
  708.     .asker-info img {
  709.       width: 28px;
  710.       height: 28px;
  711.       border-radius: 50%;
  712.     }
  713.  
  714.     .asker-info span {
  715.       color: var(--text-muted);
  716.       font-weight: 400;
  717.       font-size: 0.85rem;
  718.     }
  719.  
  720.     .ask-question {
  721.       font-size: 0.95rem;
  722.       font-weight: 500;
  723.       line-height: 1.4;
  724.       color: var(--text-main);
  725.       padding-left: 38px;
  726.       font-family: var(--second-font);
  727.     }
  728.  
  729.     .ask-answer {
  730.       padding: 16px;
  731.       font-size: 0.95rem;
  732.       line-height: 1.5;
  733.       font-family: var(--main-font);
  734.     }
  735.    
  736.     .ask-answer > blockquote:first-of-type ~ * {
  737.     display: none;
  738. }
  739.  
  740.     .ig-card:has(.reblog-list) .fallback-text-body {
  741.   display: none;
  742. }
  743.  
  744.     .quote-body {
  745.       padding: 24px 20px 20px;
  746.       text-align: center;
  747.     }
  748.  
  749.     .quote-text {
  750.       font-family: var(--header-title-font);
  751.       font-size: 1.3rem;
  752.       line-height: 1.4;
  753.       color: var(--text-header-title);
  754.       margin-bottom: 12px;
  755.     }
  756.  
  757.     .quote-source {
  758.       font-size: 0.88rem;
  759.       color: var(--text-muted);
  760.       font-style: italic;
  761.       font-family: var(--second-font);
  762.     }
  763.  
  764.     .quote-source::before {
  765.       content: "— ";
  766.     }
  767.  
  768.     .card-actions {
  769.       display: flex;
  770.       align-items: center;
  771.       justify-content: space-between;
  772.       padding: 12px 16px;
  773.       position: relative;
  774.     }
  775.  
  776.     .card-actions::before {
  777.       content: "";
  778.       position: absolute;
  779.       top: 0;
  780.       left: 7.5%;
  781.       width: 85%;
  782.       height: 1px;
  783.       background-color: var(--border-color);
  784.     }
  785.  
  786.     .action-group-left {
  787.       display: flex;
  788.       align-items: center;
  789.       gap: 16px;
  790.     }
  791.  
  792.     .action-group-right {
  793.       display: flex;
  794.       align-items: center;
  795.       gap: 16px;
  796.     }
  797.  
  798.     .action-item {
  799.       display: flex;
  800.       align-items: center;
  801.       position: relative;
  802.     }
  803.    
  804.     /* Colorize Tumblr's internal iframe reblog icon */
  805. .action-item iframe {
  806.   filter: grayscale(100%) opacity(0.7);
  807.   transition: filter 0.2s ease;
  808. }
  809.  
  810. /* Hover effect matching action button hover styles */
  811. .action-item:hover iframe {
  812.   /* Shifts the icon to match bright/accent link colors */
  813.   filter: invert(48%) sepia(85%) saturate(2476%) hue-rotate(180deg) brightness(98%) contrast(107%);
  814. }
  815.  
  816.     .action-btn {
  817.       background: none;
  818.       border: none;
  819.       cursor: pointer;
  820.       display: flex;
  821.       align-items: center;
  822.       padding: 4px;
  823.       border-radius: 4px;
  824.       color: inherit;
  825.       transition: color 0.2s;
  826.     }
  827.  
  828.     .action-btn span {
  829.       font-size: 1.4rem;
  830.     }
  831.  
  832.     .action-item:hover .action-btn, .action-btn:hover, .action-btn.active {
  833.       color: var(--post-header-link);
  834.     }
  835.  
  836.     .tumblr-btn-wrapper {
  837.       position: relative;
  838.       display: flex;
  839.       align-items: center;
  840.     }
  841.  
  842.     .tumblr-btn-wrapper iframe {
  843.       position: absolute;
  844.       top: 0;
  845.       left: 0;
  846.       width: 100%;
  847.       height: 100%;
  848.       opacity: 0.0001;
  849.       z-index: 2;
  850.       cursor: pointer;
  851.     }
  852.  
  853.     .card-tags {
  854.       padding: 0 16px 14px;
  855.       font-size: 0.85rem;
  856.       line-height: 1.4;
  857.     }
  858.  
  859.     .card-tags a {
  860.       font-family: var(--second-font);
  861.       color: var(--tag-color);
  862.       margin-right: 6px;
  863.     }
  864.  
  865.     .pagination-card {
  866.       background: var(--card-bg);
  867.       border: none;
  868.       border-radius: 12px;
  869.       padding: 16px;
  870.       margin-bottom: 0;
  871.       text-align: center;
  872.       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  873.       display: flex;
  874.       align-items: center;
  875.       justify-content: space-between;
  876.       font-weight: 600;
  877.       font-size: 0.9rem;
  878.     }
  879.  
  880.     .page-btn {
  881.       display: inline-flex;
  882.       align-items: center;
  883.       gap: 4px;
  884.       color: var(--text-main);
  885.       padding: 6px 12px;
  886.       border-radius: 6px;
  887.       transition: color 0.2s;
  888.     }
  889.  
  890.     .page-btn:hover {
  891.       color: var(--post-header-link);
  892.     }
  893.  
  894.     .page-btn.disabled {
  895.       color: var(--text-muted);
  896.       opacity: 0.4;
  897.       cursor: not-allowed;
  898.       pointer-events: none;
  899.     }
  900.    
  901.    /* ====================================
  902.    NOTES TABS & FILTERING
  903. ==================================== */
  904.  
  905. #notes {
  906.  padding: 16px;
  907. }
  908.  
  909.  
  910. /* ------------------------------------
  911.    TAB BAR
  912. ------------------------------------ */
  913.  
  914. .notes-tabs {
  915.   display: flex;
  916.   gap: 8px;
  917.   padding-bottom: 12px;
  918.   border-bottom: 1px solid var(--border-color);
  919.   margin-bottom: 16px;
  920. }
  921.  
  922. .notes-tabs .action-btn {
  923.   font-family: var(--second-font);
  924.   font-size: 0.85rem;
  925.   font-weight: 600;
  926.  
  927.   display: flex;
  928.   align-items: center;
  929.   gap: 6px;
  930.  
  931.   padding: 6px 12px;
  932.  
  933.   border-radius: 6px;
  934.   border: none;
  935.  
  936.   color: var(--text-muted);
  937.   background: transparent;
  938.  
  939.   cursor: pointer;
  940.  
  941.   transition:
  942.     color 0.2s ease,
  943.     background-color 0.2s ease;
  944. }
  945.  
  946. .notes-tabs .action-btn:hover {
  947.   color: var(--post-header-link);
  948.   background-color: var(--ask-bg);
  949. }
  950.  
  951. .notes-tabs .action-btn.active {
  952.   color: var(--post-header-link);
  953.   background-color: var(--ask-bg);
  954. }
  955.  
  956.  
  957. /* ------------------------------------
  958.    NOTES LIST
  959. ------------------------------------ */
  960.  
  961. .notes-content ol.notes {
  962.   margin: 0;
  963.   padding: 0;
  964.   list-style: none;
  965. }
  966.  
  967. .notes-content ol.notes li.note {
  968.   margin: 0;
  969.   padding: 10px 0;
  970.   list-style: none;
  971. }
  972.  
  973. /* User Avatars in Notes */
  974. .notes-content ol.notes li.note img.avatar {
  975.   width: 22px;
  976.   height: 22px;
  977.   margin: 0 8px 0 0;
  978.   border-radius: 50%;
  979.   object-fit: cover;
  980. }
  981.  
  982. /* ------------------------------------
  983.    HIDE UNWANTED NOTE TYPES
  984. ------------------------------------ */
  985.  
  986. /* Likes are not shown in the activity tabs */
  987.  
  988. .notes-content ol.notes li.like,
  989. .notes-content ol.notes li.post_attribution {
  990.   display: none;
  991. }
  992.  
  993.  
  994. /* ------------------------------------
  995.    NOTE DIVIDERS
  996. ------------------------------------ */
  997.  
  998. .notes-content ol.notes > li.note {
  999.   border-bottom: 1px solid var(--border-color);
  1000. }
  1001.  
  1002. .notes-content ol.notes > li.note:last-child {
  1003.   border-bottom: none;
  1004. }
  1005.  
  1006.  
  1007. /* ------------------------------------
  1008.    MORE NOTES
  1009. ------------------------------------ */
  1010.  
  1011. .notes-content ol.notes li.more_notes_link_container {
  1012.   display: block;
  1013.   text-align: center;
  1014.   border-bottom: none;
  1015. }
  1016.  
  1017.     .site-footer-card {
  1018.       width: 100%;
  1019.       max-width: calc(280px + var(--post-width) + 30px);
  1020.       background: var(--card-bg);
  1021.       border-radius: 12px;
  1022.       padding: 18px 24px;
  1023.       text-align: center;
  1024.       font-size: 0.85rem;
  1025.       color: var(--text-muted);
  1026.       font-family: var(--second-font);
  1027.       line-height: 1.5;
  1028.       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  1029.     }
  1030.  
  1031.     @media (max-width: 820px) {
  1032.       .app-layout, .site-footer-card {
  1033.         width: 100% !important;
  1034.         max-width: 100% !important;
  1035.       }
  1036.  
  1037.       .app-layout {
  1038.         flex-direction: column;
  1039.         align-items: center;
  1040.       }
  1041.  
  1042.       .sidebar-wrapper, .feed {
  1043.         width: 100% !important;
  1044.         max-width: 100% !important;
  1045.       }
  1046.  
  1047.       .sidebar-wrapper {
  1048.         margin-right: 0 !important;
  1049.         width: 100% !important;
  1050.         min-width: 100% !important;
  1051.         margin-bottom: 24px !important;
  1052.       }
  1053.     }
  1054.   </style>
  1055. </head>
  1056. <body>
  1057.  
  1058.   <div class="app-layout">
  1059.    
  1060.     <div class="sidebar-wrapper">
  1061.      
  1062.       <div class="search-card">
  1063.         <form action="/search" method="get">
  1064.           <input type="text" name="q" value="{SearchQuery}" placeholder="Search posts...">
  1065.           <button type="submit" aria-label="Search">
  1066.             <span class="ti ti-search"></span>
  1067.           </button>
  1068.         </form>
  1069.       </div>
  1070.  
  1071.       <aside class="sidebar-card">
  1072.        
  1073.         <div class="sidebar-banner"></div>
  1074.  
  1075.         <div class="sidebar-profile">
  1076.           <div class="sidebar-avatar">
  1077.             <img src="{PortraitURL-96}" alt="{Title}">
  1078.           </div>
  1079.           <h1 class="sidebar-title">{Title}</h1>
  1080.           {block:Description}
  1081.             <div class="sidebar-desc">{Description}</div>
  1082.           {/block:Description}
  1083.         </div>
  1084.  
  1085.         <div class="sidebar-content-body">
  1086.          
  1087.           <nav class="sidebar-nav" id="sidebarNav">
  1088.             <a href="/" class="nav-item home-link"><span class="ti ti-home"></span> Home</a>
  1089.             <a href="/archive" class="nav-item"><span class="ti ti-archive"></span> Archive</a>
  1090.             {block:AskEnabled}
  1091.               <a href="/ask" class="nav-item"><span class="ti ti-message"></span> {AskLabel}</a>
  1092.             {/block:AskEnabled}
  1093.             {block:SubmissionsEnabled}
  1094.               <a href="/submit" class="nav-item"><span class="ti ti-paperclip"></span> {SubmitLabel}</a>
  1095.             {/block:SubmissionsEnabled}
  1096.             {block:HasPages}
  1097.               {block:Pages}
  1098.                 <a href="{URL}" class="nav-item"><span class="ti ti-info-circle"></span> {Label}</a>
  1099.               {/block:Pages}
  1100.             {/block:HasPages}
  1101.           </nav>
  1102.  
  1103.           {block:IfInstagramURL}
  1104.             <div class="sidebar-divider"></div>
  1105.           {/block:IfInstagramURL}
  1106.  
  1107.           <div class="sidebar-socials">
  1108.             {block:IfInstagramURL}
  1109.               <a href="{text:Instagram URL}" target="_blank" rel="noopener noreferrer" class="social-link">
  1110.                 <span class="icon ti ti-brand-instagram"></span>
  1111.                 <span class="username">{block:IfInstagramUsername}{text:Instagram Username}{/block:IfInstagramUsername}{block:IfNotInstagramUsername}Instagram{/block:IfNotInstagramUsername}</span>
  1112.               </a>
  1113.             {/block:IfInstagramURL}
  1114.  
  1115.             {block:IfThreadsURL}
  1116.               <a href="{text:Threads URL}" target="_blank" rel="noopener noreferrer" class="social-link">
  1117.                 <span class="icon ti ti-brand-threads"></span>
  1118.                 <span class="username">{block:IfThreadsUsername}{text:Threads Username}{/block:IfThreadsUsername}{block:IfNotThreadsUsername}Threads{/block:IfNotThreadsUsername}</span>
  1119.               </a>
  1120.             {/block:IfThreadsURL}
  1121.  
  1122.             {block:IfTwitterURL}
  1123.               <a href="{text:Twitter URL}" target="_blank" rel="noopener noreferrer" class="social-link">
  1124.                 <span class="icon ti ti-brand-x"></span>
  1125.                 <span class="username">{block:IfTwitterUsername}{text:Twitter Username}{/block:IfTwitterUsername}{block:IfNotTwitterUsername}X / Twitter{/block:IfNotTwitterUsername}</span>
  1126.               </a>
  1127.             {/block:IfTwitterURL}
  1128.  
  1129.             {block:IfTikTokURL}
  1130.               <a href="{text:TikTok URL}" target="_blank" rel="noopener noreferrer" class="social-link">
  1131.                 <span class="icon ti ti-brand-tiktok"></span>
  1132.                 <span class="username">{block:IfTikTokUsername}{text:TikTok Username}{/block:IfTikTokUsername}{block:IfNotTikTokUsername}TikTok{/block:IfNotTikTokUsername}</span>
  1133.               </a>
  1134.             {/block:IfTikTokURL}
  1135.  
  1136.             {block:IfYouTubeURL}
  1137.               <a href="{text:YouTube URL}" target="_blank" rel="noopener noreferrer" class="social-link">
  1138.                 <span class="icon ti ti-brand-youtube"></span>
  1139.                 <span class="username">{block:IfYouTubeUsername}{text:YouTube Username}{/block:IfYouTubeUsername}{block:IfNotYouTubeUsername}YouTube{/block:IfNotYouTubeUsername}</span>
  1140.               </a>
  1141.             {/block:IfYouTubeURL}
  1142.           </div>
  1143.  
  1144.           {block:IfCustomSidebarWidgetHTML}
  1145.             <div class="sidebar-divider"></div>
  1146.             <div class="custom-html-block">
  1147.               {text:Custom Sidebar Widget HTML}
  1148.             </div>
  1149.           {/block:IfCustomSidebarWidgetHTML}
  1150.  
  1151.         </div>
  1152.       </aside>
  1153.  
  1154.     </div>
  1155.  
  1156.     <main class="feed">
  1157.  
  1158.       {block:Posts}
  1159.         <article class="ig-card">
  1160.          
  1161.           <header class="card-header">
  1162.             <div class="user-info">
  1163.               {block:RebloggedFrom}
  1164.                 <img src="{PortraitURL-64}" alt="{Name}">
  1165.                 <a href="{BlogURL}">{Name}</a>
  1166.                 <span class="ti ti-chevron-right"></span>
  1167.                 <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1168.               {/block:RebloggedFrom}
  1169.  
  1170.               {block:NotReblog}
  1171.                 <img src="{PortraitURL-64}" alt="{Title}">
  1172.                 <a href="{BlogURL}">{Name}</a>
  1173.               {/block:NotReblog}
  1174.             </div>
  1175.            
  1176.             {block:Date}
  1177.               <a href="{Permalink}" class="post-date custom-date-format"
  1178.                 data-timestamp="{Timestamp}"
  1179.                 data-short="{DayOfMonth} {ShortMonth}"
  1180.                 data-slashed="{DayOfMonthWithZero}/{ShortMonth}/{Year}"
  1181.                 data-full="{Month} {DayOfMonthWithZero}{DayOfMonthSuffix}, {Year}">
  1182.                 {DayOfMonth} {ShortMonth}
  1183.               </a>
  1184.             {/block:Date}
  1185.           </header>
  1186.  
  1187.           <div class="card-content">
  1188.            
  1189.             {block:Photo}
  1190.               <img src="{PhotoURL-500}" alt="{PhotoAlt}">
  1191.               {block:NotReblog}
  1192.                 {block:Caption}
  1193.                   <div class="card-text-body">{Caption}</div>
  1194.                 {/block:Caption}
  1195.               {/block:NotReblog}
  1196.             {/block:Photo}
  1197.  
  1198.             {block:Photoset}
  1199.               {Photoset}
  1200.               {block:NotReblog}
  1201.                 {block:Caption}
  1202.                   <div class="card-text-body">{Caption}</div>
  1203.                 {/block:Caption}
  1204.               {/block:NotReblog}
  1205.             {/block:Photoset}
  1206.  
  1207.             {block:Quote}
  1208.               <div class="quote-body">
  1209.                 <p class="quote-text">"{Quote}"</p>
  1210.                 {block:Source}
  1211.                   <p class="quote-source">{Source}</p>
  1212.                 {/block:Source}
  1213.               </div>
  1214.             {/block:Quote}
  1215.  
  1216.             {block:Link}
  1217.               <div class="card-text-body">
  1218.                 <h3 class="post-title"><a href="{URL}" {Target}>{Name}</a></h3>
  1219.                 {block:NotReblog}
  1220.                   {block:Description}
  1221.                     {Description}
  1222.                   {/block:Description}
  1223.                 {/block:NotReblog}
  1224.               </div>
  1225.             {/block:Link}
  1226.  
  1227.             {block:Video}
  1228.               <div class="tumblr_video_container">
  1229.                 {Video-500}
  1230.               </div>
  1231.               {block:NotReblog}
  1232.                 {block:Caption}
  1233.                   <div class="card-text-body">{Caption}</div>
  1234.                 {/block:Caption}
  1235.               {/block:NotReblog}
  1236.             {/block:Video}
  1237.  
  1238.             {block:Audio}
  1239.               {AudioPlayer}
  1240.               {block:NotReblog}
  1241.                 {block:Caption}
  1242.                   <div class="card-text-body">{Caption}</div>
  1243.                 {/block:Caption}
  1244.               {/block:NotReblog}
  1245.             {/block:Audio}
  1246.            
  1247.             {block:Answer}
  1248.               <div class="ask-box">
  1249.                 <div class="asker-info">
  1250.                   <img src="{AskerPortraitURL-64}">
  1251.                   {Asker} <span>asked:</span>
  1252.                 </div>
  1253.                 <p class="ask-question">{Question}</p>
  1254.               </div>
  1255.  
  1256.               <div class="ask-answer">
  1257.                 {Answer}
  1258.               </div>
  1259.             {/block:Answer}
  1260.            
  1261.             {block:Reblogs}
  1262.               <div class="reblog-list">
  1263.                 <div class="reblog-item">
  1264.                   <div class="reblog-item-header">
  1265.                     <div class="reblog-user">
  1266.                       {block:IsActive}
  1267.                         <img src="{PortraitURL-64}" alt="{Username}">
  1268.                         <a href="{Permalink}">{Username}</a>
  1269.                       {/block:IsActive}
  1270.                       {block:IsDeactivated}
  1271.                         <span class="deactivated">{Username} (deactivated)</span>
  1272.                       {/block:IsDeactivated}
  1273.                     </div>
  1274.                   </div>
  1275.                   <div class="reblog-content-body">
  1276.                     {Body}
  1277.                   </div>
  1278.                 </div>
  1279.               </div>
  1280.             {/block:Reblogs}
  1281.  
  1282.             {block:Text}
  1283.               <div class="card-text-body fallback-text-body">
  1284.                 {block:Title}
  1285.                   <h3 class="post-title">{Title}</h3>
  1286.                 {/block:Title}
  1287.                 {Body}
  1288.               </div>
  1289.             {/block:Text}
  1290.            
  1291.  
  1292.           </div>
  1293.  
  1294.           <!-- ACTION BUTTON BAR -->
  1295.           <footer class="card-actions">
  1296.             <div class="action-group-left">
  1297.               <!-- Like Button -->
  1298.               <div class="action-item tumblr-btn-wrapper">
  1299.                 <button class="action-btn" aria-label="Like"><span class="ti ti-heart"></span></button>
  1300.                 {LikeButton}
  1301.               </div>
  1302.              
  1303.               <!-- Reblog Button -->
  1304.               <div class="action-item tumblr-btn-wrapper">
  1305.                 <a href="{ReblogURL}" class="action-btn" aria-label="Reblog">
  1306.     <span class="ti ti-repeat"></span>
  1307. </a>
  1308.               </div>
  1309.              
  1310.               <!-- Comment / Permalink Button -->
  1311.              
  1312.               <a href="{Permalink}#notes" class="action-btn" aria-label="Comment">
  1313.   <span class="ti ti-message-circle"></span>
  1314. </a>
  1315.             </div>
  1316.            
  1317.             <div class="action-group-right">
  1318.               <!-- Share / Send Icon Moved to Right -->
  1319.               <button class="action-btn share-btn" type="button" data-url="{Permalink}" aria-label="Share Post">
  1320.               <span class="ti ti-send"></span>
  1321.             </button>
  1322.             </div>
  1323.           </footer>
  1324.  
  1325.           {block:HasTags}
  1326.             <div class="card-tags">
  1327.               {block:Tags}
  1328.                 <a href="{TagURL}">#{Tag}</a>
  1329.               {/block:Tags}
  1330.             </div>
  1331.           {/block:HasTags}
  1332.  
  1333.         </article>
  1334.       {/block:Posts}
  1335.      
  1336.       {block:PermalinkPage}
  1337.   {block:PostNotes}
  1338.     <section class="ig-card" id="notes">
  1339.  
  1340.       <!-- FILTER TAB BUTTONS -->
  1341.       <div class="notes-tabs">
  1342.         <button class="action-btn active" type="button" data-tab="all">
  1343.           <span class="ti ti-list"></span> All
  1344.         </button>
  1345.         <button class="action-btn" type="button" data-tab="comments">
  1346.           <span class="ti ti-message-circle"></span> Comments
  1347.         </button>
  1348.         <button class="action-btn" type="button" data-tab="reblogs">
  1349.           <span class="ti ti-repeat"></span> Reblogs
  1350.         </button>
  1351.       </div>
  1352.  
  1353.       <div class="notes-content">
  1354.         {PostNotes}
  1355.       </div>
  1356.  
  1357.     </section>
  1358.   {/block:PostNotes}
  1359. {/block:PermalinkPage}
  1360.  
  1361.       {block:Pagination}
  1362.         <nav class="pagination-card">
  1363.           {block:PreviousPage}
  1364.             <a href="{PreviousPage}" class="page-btn"><span class="ti ti-chevron-left"></span> Previous</a>
  1365.           {/block:PreviousPage}
  1366.           {block:IfNotPreviousPage}
  1367.             <span class="page-btn disabled"><span class="ti ti-chevron-left"></span> Previous</span>
  1368.           {/block:IfNotPreviousPage}
  1369.          
  1370.           <span>Page {CurrentPage} of {TotalPages}</span>
  1371.          
  1372.           {block:NextPage}
  1373.             <a href="{NextPage}" class="page-btn">Next <span class="ti ti-chevron-right"></span></a>
  1374.           {/block:NextPage}
  1375.           {block:IfNotNextPage}
  1376.             <span class="page-btn disabled">Next <span class="ti ti-chevron-right"></span></span>
  1377.           {/block:IfNotNextPage}
  1378.         </nav>
  1379.       {/block:Pagination}
  1380.  
  1381.     </main>
  1382.  
  1383.   </div>
  1384.  
  1385.   <footer class="site-footer-card">
  1386.     {block:IfCustomFooterText}
  1387.       {text:Custom Footer Text}
  1388.     {/block:IfCustomFooterText}
  1389.     {block:IfNotCustomFooterText}
  1390.       {Title}. Powered by Tumblr.
  1391.     {/block:IfNotCustomFooterText}
  1392.   </footer>
  1393.  
  1394.   <script>
  1395.     document.addEventListener("DOMContentLoaded", function() {
  1396.       // 1. HOME BUTTON AND NAVIGATION HIGHLIGHTING
  1397.       const currentPath = window.location.pathname;
  1398.       const navLinks = document.querySelectorAll(".sidebar-nav .nav-item");
  1399.  
  1400.       navLinks.forEach(function(link) {
  1401.         const linkPath = link.getAttribute("href");
  1402.         if (currentPath === "/" || currentPath === "" || currentPath.startsWith("/page/")) {
  1403.           if (link.classList.contains("home-link")) {
  1404.             link.classList.add("active-nav");
  1405.           }
  1406.         } else if (currentPath === linkPath) {
  1407.           link.classList.add("active-nav");
  1408.         }
  1409.       });
  1410.  
  1411.       // 2. RELIABLE DATE FORMATTING
  1412.       const selectedDateFormat = "{select:Date Format}";
  1413.      
  1414.       function getRelativeTime(timestamp) {
  1415.         const now = Math.floor(Date.now() / 1000);
  1416.         const diff = now - parseInt(timestamp, 10);
  1417.         if (isNaN(diff) || diff < 0) return "just now";
  1418.  
  1419.        const seconds = diff;
  1420.        const minutes = Math.floor(seconds / 60);
  1421.        const hours = Math.floor(minutes / 60);
  1422.        const days = Math.floor(hours / 24);
  1423.        const weeks = Math.floor(days / 7);
  1424.  
  1425.        if (seconds < 60) return `${seconds}s ago`;
  1426.        if (minutes < 60) return `${minutes}m ago`;
  1427.        if (hours < 24) return `${hours}h ago`;
  1428.        if (days === 1) return "Yesterday";
  1429.        if (days < 7) return `${days}d ago`;
  1430.        return `${weeks}w ago`;
  1431.      }
  1432.  
  1433.      const dateElements = document.querySelectorAll('.custom-date-format');
  1434.      dateElements.forEach(function(el) {
  1435.        if (selectedDateFormat === "slashed") {
  1436.          el.textContent = el.getAttribute('data-slashed');
  1437.        } else if (selectedDateFormat === "full") {
  1438.          el.textContent = el.getAttribute('data-full');
  1439.        } else if (selectedDateFormat === "relative") {
  1440.          const ts = el.getAttribute('data-timestamp');
  1441.          if (ts) el.textContent = getRelativeTime(ts);
  1442.        } else {
  1443.          el.textContent = el.getAttribute('data-short');
  1444.        }
  1445.      });
  1446.  
  1447.      // 3. SHARE BUTTON LOGIC
  1448.      document.querySelectorAll('.share-btn').forEach(function(btn) {
  1449.        btn.addEventListener('click', function() {
  1450.          const url = this.getAttribute('data-url');
  1451.          if (navigator.share) {
  1452.            navigator.share({ title: document.title, url: url }).catch(() => {});
  1453.           } else {
  1454.             navigator.clipboard.writeText(url).then(() => {
  1455.               alert('Post link copied to clipboard!');
  1456.             });
  1457.           }
  1458.         });
  1459.       });
  1460.  
  1461.       // 4. NOTES TAB BUTTON TOGGLE
  1462.       (function () {
  1463.  
  1464.   function setupNotesTabs() {
  1465.  
  1466.     const notesCard = document.querySelector("#notes");
  1467.     if (!notesCard) return;
  1468.  
  1469.     const tabs = notesCard.querySelectorAll(".notes-tabs .action-btn");
  1470.     const notesContent = notesCard.querySelector(".notes-content");
  1471.  
  1472.     if (!tabs.length || !notesContent) return;
  1473.  
  1474.  
  1475.     function filterNotes(filter) {
  1476.  
  1477.       const notes = notesContent.querySelectorAll("ol.notes > li.note");
  1478.  
  1479.       notes.forEach(function (note) {
  1480.  
  1481.         /* --------------------------------
  1482.            Always keep "Show more notes"
  1483.         -------------------------------- */
  1484.         if (note.classList.contains("more_notes_link_container")) {
  1485.           note.style.removeProperty("display");
  1486.           return;
  1487.         }
  1488.  
  1489.  
  1490.         /* --------------------------------
  1491.            Likes / attribution
  1492.            Never show these in our tabs
  1493.         -------------------------------- */
  1494.         if (
  1495.           note.classList.contains("like") ||
  1496.           note.classList.contains("post_attribution")
  1497.         ) {
  1498.           note.style.setProperty("display", "none", "important");
  1499.           return;
  1500.         }
  1501.  
  1502.  
  1503.         /* --------------------------------
  1504.            ALL
  1505.         -------------------------------- */
  1506.         if (filter === "all") {
  1507.           note.style.setProperty("display", "", "important");
  1508.           return;
  1509.         }
  1510.  
  1511.  
  1512.         /* --------------------------------
  1513.            COMMENTS
  1514.         -------------------------------- */
  1515.         if (filter === "comments") {
  1516.  
  1517.           const isReply =
  1518.             note.classList.contains("reply");
  1519.  
  1520.           const isCommentaryReblog =
  1521.             note.classList.contains("reblog") &&
  1522.            !note.classList.contains("without_commentary");
  1523.  
  1524.           if (isReply || isCommentaryReblog) {
  1525.             note.style.setProperty("display", "", "important");
  1526.           } else {
  1527.             note.style.setProperty("display", "none", "important");
  1528.           }
  1529.  
  1530.           return;
  1531.         }
  1532.  
  1533.  
  1534.         /* --------------------------------
  1535.            REBLOGS
  1536.         -------------------------------- */
  1537.         if (filter === "reblogs") {
  1538.  
  1539.           const isReblog =
  1540.             note.classList.contains("reblog");
  1541.  
  1542.           if (isReblog) {
  1543.             note.style.setProperty("display", "", "important");
  1544.           } else {
  1545.             note.style.setProperty("display", "none", "important");
  1546.           }
  1547.  
  1548.         }
  1549.  
  1550.       });
  1551.     }
  1552.  
  1553.  
  1554.     /* --------------------------------
  1555.        TAB CLICK
  1556.     -------------------------------- */
  1557.  
  1558.     tabs.forEach(function (tab) {
  1559.  
  1560.       tab.addEventListener("click", function (event) {
  1561.  
  1562.         event.preventDefault();
  1563.  
  1564.         const filter = this.getAttribute("data-tab");
  1565.  
  1566.         /* Active button */
  1567.         tabs.forEach(function (button) {
  1568.           button.classList.remove("active");
  1569.         });
  1570.  
  1571.         this.classList.add("active");
  1572.  
  1573.  
  1574.         /* State classes */
  1575.         notesContent.classList.remove(
  1576.           "show-all",
  1577.           "show-comments",
  1578.           "show-reblogs"
  1579.         );
  1580.  
  1581.         notesContent.classList.add("show-" + filter);
  1582.  
  1583.  
  1584.         /* Filter */
  1585.         filterNotes(filter);
  1586.  
  1587.       });
  1588.  
  1589.     });
  1590.  
  1591.  
  1592.     /* --------------------------------
  1593.        DEFAULT = ALL
  1594.     -------------------------------- */
  1595.  
  1596.     filterNotes("all");
  1597.  
  1598.  
  1599.     /* --------------------------------
  1600.        WATCH FOR TUMBLR ADDING NOTES
  1601.     -------------------------------- */
  1602.  
  1603.     const observer = new MutationObserver(function () {
  1604.  
  1605.       const activeTab =
  1606.         notesCard.querySelector(".notes-tabs .action-btn.active");
  1607.  
  1608.       if (!activeTab) return;
  1609.  
  1610.       const filter =
  1611.         activeTab.getAttribute("data-tab");
  1612.  
  1613.       filterNotes(filter);
  1614.  
  1615.     });
  1616.  
  1617.     observer.observe(notesContent, {
  1618.       childList: true,
  1619.       subtree: true
  1620.     });
  1621.  
  1622.   }
  1623.  
  1624.  
  1625.   /* Run after page is ready */
  1626.   if (document.readyState === "loading") {
  1627.     document.addEventListener("DOMContentLoaded", setupNotesTabs);
  1628.   } else {
  1629.     setupNotesTabs();
  1630.   }
  1631.  
  1632. })();
  1633.     });
  1634.   </script>
  1635.  
  1636. </body>
  1637. </html>
Advertisement
Add Comment
Please, Sign In to add comment