Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}{block:SearchQuery} - {SearchQuery}{/block:SearchQuery}</title>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css" />
- <meta name="image:Header" content=""/>
- <meta name="color-scheme" content="light dark">
- <!-- FONTS -->
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
- <!-- WALLPAPER -->
- <meta name="select:Wallpaper Style" content="Gradient" title="Gradient">
- <meta name="select:Wallpaper Style" content="Image" title="Image">
- <meta name="select:Wallpaper Style" content="Plain" title="Plain">
- <meta name="color:Wallpaper Color 1" content="#ffffff"/>
- <meta name="color:Wallpaper Color 2" content="#dbeafe"/>
- <meta name="text:Wallpaper Image URL" content=""/>
- <!-- Font Options -->
- <meta name="select:Primary Font" content="'Inter', sans-serif" title="Inter">
- <meta name="select:Primary Font" content="'Open Sans', sans-serif" title="Open Sans">
- <meta name="select:Primary Font" content="'Roboto', sans-serif" title="Roboto">
- <meta name="select:Primary Font" content="'Roboto Condensed', sans-serif" title="Roboto Condensed">
- <meta name="select:Primary Font" content="'DM Sans', sans-serif" title="DM Sans">
- <meta name="select:Primary Font" content="'Lato', sans-serif" title="Lato">
- <!-- Date Format Options -->
- <meta name="select:Date Format" content="short" title="Short (12 Aug)">
- <meta name="select:Date Format" content="slashed" title="Slashed (08/12/2026)">
- <meta name="select:Date Format" content="full" title="Full (August 12th, 2026)">
- <meta name="select:Date Format" content="relative" title="Relative (2h ago)">
- <!-- Layout Options -->
- <meta name="select:Image Border Radius" content="0px" title="Square (0px)">
- <meta name="select:Image Border Radius" content="6px" title="Slightly Rounded (6px)">
- <meta name="select:Image Border Radius" content="12px" title="Medium Rounded (12px)">
- <meta name="select:Image Border Radius" content="16px" title="Extra Rounded (16px)">
- <meta name="select:Avatar Shape" content="50%" title="Circle">
- <meta name="select:Avatar Shape" content="12px" title="Rounded Square">
- <meta name="select:Avatar Shape" content="0px" title="Square">
- <meta name="color:Avatar Border Color" content="#e4e4e7"/>
- <meta name="select:Post Width" content="540px" title="Default (540px)">
- <meta name="select:Post Width" content="480px" title="Compact (480px)">
- <meta name="select:Post Width" content="600px" title="Wide (600px)">
- <meta name="select:Post Width" content="650px" title="Extra Wide (650px)">
- <!-- SINGLE THEME ACCENT COLOR -->
- <meta name="color:Accent Color" content="#0095f6"/>
- <!-- Social Links -->
- <meta name="text:Instagram Username" content=""/>
- <meta name="text:Instagram URL" content=""/>
- <meta name="text:Threads Username" content=""/>
- <meta name="text:Threads URL" content=""/>
- <meta name="text:Twitter Username" content=""/>
- <meta name="text:Twitter URL" content=""/>
- <meta name="text:TikTok Username" content=""/>
- <meta name="text:TikTok URL" content=""/>
- <meta name="text:YouTube Username" content=""/>
- <meta name="text:YouTube URL" content=""/>
- <meta name="text:GitHub Username" content=""/>
- <meta name="text:GitHub URL" content=""/>
- <meta name="text:Custom Sidebar Widget HTML" content=""/>
- <meta name="text:Custom Footer Text" content=""/>
- <style>
- /* ====================================
- EDITABLE CONFIGURATION (CSS VARIABLES)
- Monochrome Palette + Single Accent Color
- ==================================== */
- :root {
- --wallpaper-image: url('{text:Wallpaper Image URL}');
- --header-title-font: {select:Primary Font};
- --main-font: {select:Primary Font};
- --second-font: {select:Primary Font};
- --post-width: {select:Post Width};
- --img-border-radius: {select:Image Border Radius};
- /* SINGLE ACCENT COLOR */
- --accent-color: {color:Accent Color};
- /* MONOCHROME PALETTE */
- --bg-color-1: {color:Wallpaper Color 1};
- --bg-color-2: {color:Wallpaper Color 2};
- --card-bg: rgba(255, 255, 255, 0.67);
- --ask-bg: #f8f9fa87;
- --text-main: #18181b;
- --text-header-title: #09090b;
- --text-muted: #71717a;
- --border-color: #e4e4e7;
- --post-header-color: #18181b;
- --post-header-link: var(--accent-color);
- --tag-color: var(--accent-color);
- /* Avatar Customizations */
- --avatar-radius: {select:Avatar Shape};
- --avatar-border-color: {color:Avatar Border Color};
- /* Text Selection Colors */
- --selection-text: #ffffff;
- --selection-bg: var(--accent-color);
- }
- * {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- }
- /* CUSTOM TEXT SELECTION */
- ::selection {
- background-color: var(--selection-bg);
- color: var(--selection-text);
- }
- ::-moz-selection {
- background-color: var(--selection-bg);
- color: var(--selection-text);
- }
- body {
- color: var(--text-main);
- font-family: var(--main-font);
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 40px 20px 80px;
- background:
- linear-gradient(
- 135deg,
- var(--bg-color-1),
- var(--bg-color-2)
- );
- background-attachment: fixed;
- background-size: cover;
- }
- /* Wallpaper image override */
- body.has-wallpaper {
- background-image: url('{text:Wallpaper Image URL}');
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- background-attachment: fixed;
- }
- /* ====================================
- NIGHT MODE
- ==================================== */
- body.night-mode {
- --bg-color-1: {color:Wallpaper Color 1};
- --bg-color-2: {color:Wallpaper Color 2};
- --card-bg: rgba(28, 28, 30, 0.67);
- --ask-bg: #2c2c2e95;
- --text-main: #f5f5f7;
- --text-header-title: #ffffff;
- --text-muted: #98989d;
- --border-color: #38383a;
- --post-header-color: #f5f5f7;
- --post-header-link: var(--accent-color);
- --tag-color: var(--accent-color);
- --selection-text: #000000;
- }
- a {
- color: inherit;
- text-decoration: none;
- }
- h1, h2, h3, h4, .post-title {
- font-family: var(--header-title-font);
- color: var(--text-header-title);
- }
- .app-layout {
- display: flex;
- width: 100%;
- max-width: calc(290px + var(--post-width) + 30px);
- align-items: flex-start;
- margin-bottom: 24px;
- }
- /* Glass Effect Utilities */
- .glass-card {
- background: var(--card-bg);
- backdrop-filter: blur(16px) saturate(140%);
- -webkit-backdrop-filter: blur(16px) saturate(140%);
- border: 1px solid var(--border-color);
- }
- /* Hide Tumblr's injected navigation/control iframe */
- body > iframe.tmblr-iframe,
- body > iframe#tumblr_controls {
- display: none !important;
- }
- /* ====================================
- SIDEBAR & SEARCH CARD
- ==================================== */
- .sidebar-wrapper {
- width: 290px;
- max-width: 290px;
- margin-right: 30px !important;
- position: sticky;
- top: 24px;
- align-self: flex-start;
- height: fit-content;
- }
- .sidebar-wrapper > * + * {
- margin-top: 20px;
- }
- .sidebar-card {
- border-radius: 12px;
- overflow: hidden;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
- display: flex;
- flex-direction: column;
- }
- /* HEADER BANNER IMAGE SUPPORT */
- .sidebar-banner {
- height: 130px;
- background-size: cover;
- background-position: center;
- background-color: var(--border-color);
- background-image: url('{HeaderImage}');
- }
- .sidebar-profile {
- padding: 0 20px 20px;
- margin-top: -40px;
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- }
- .sidebar-avatar img {
- width: 5.3rem;
- height: 5.3rem;
- border-radius: var(--avatar-radius);
- object-fit: cover;
- border: 3px solid var(--avatar-border-color);
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
- }
- .sidebar-title {
- font-size: 1.3rem;
- font-weight: 700;
- margin-top: 11px;
- }
- .sidebar-desc {
- font-size: 0.85rem;
- color: var(--text-muted);
- line-height: 1.4;
- margin-top: 8px;
- font-family: var(--second-font);
- }
- .sidebar-content-body {
- padding: 0 20px 20px;
- display: flex;
- flex-direction: column;
- gap: 16px;
- }
- .sidebar-divider {
- height: 1px;
- background: var(--border-color);
- width: 85%;
- margin: 0 auto;
- }
- .sidebar-pages-nav {
- display: flex;
- flex-direction: column;
- gap: 6px;
- }
- .sidebar-pages-nav .nav-item {
- font-weight: 600;
- font-size: 0.95rem;
- padding: 8px 11px;
- border-radius: 6px;
- transition: all 0.2s ease;
- display: flex;
- align-items: center;
- gap: 8px;
- color: var(--text-main);
- font-family: var(--second-font);
- }
- .sidebar-pages-nav .nav-item:hover {
- color: var(--accent-color) !important;
- background-color: var(--ask-bg);
- }
- .sidebar-socials {
- display: flex;
- flex-direction: column;
- gap: 10px;
- }
- .social-link {
- display: flex;
- align-items: center;
- gap: 10px;
- font-size: 0.9rem;
- font-family: var(--second-font);
- font-weight: 500;
- color: var(--text-main);
- padding: 6px 8px;
- border-radius: 6px;
- transition: color 0.2s;
- }
- .social-link span.icon {
- font-size: 1.25rem;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .social-link:hover {
- color: var(--accent-color);
- }
- .custom-html-block {
- font-size: 0.85rem;
- color: var(--text-main);
- font-family: var(--second-font);
- line-height: 1.4;
- word-break: break-word;
- }
- /* ====================================
- FEED & BASE POST CARDS
- ==================================== */
- .feed {
- flex: 1;
- width: var(--post-width);
- max-width: var(--post-width);
- min-width: 0;
- }
- .ig-card {
- border-radius: 16px;
- margin-bottom: 28px;
- overflow: hidden;
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
- position: relative;
- }
- .card-header.ipados-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 12px 16px;
- gap: 5px;
- color: var(--post-header-color);
- position: relative;
- background: rgba(255, 255, 255, 0.03);
- }
- .card-header::after {
- content: "";
- position: absolute;
- bottom: 0;
- left: 5%;
- width: 90%;
- height: 1px;
- background-color: var(--border-color);
- }
- .header-left,
- .header-right {
- display: flex;
- align-items: center;
- gap: 5px;
- }
- .dot-menu-indicator {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- gap: 8px;
- height: 28px;
- padding: 0 10px;
- border-radius: 14px;
- background: var(--ask-bg);
- border: 1px solid var(--border-color);
- }
- .dot-menu-indicator .dot {
- width: 5px;
- height: 5px;
- border-radius: 50%;
- flex-shrink: 0;
- background-color: var(--text-muted);
- opacity: 0.6;
- }
- .dot-menu-indicator .dot-close {
- background-color: #ff7d56;
- opacity: 1;
- }
- .dot-menu-indicator .dot-minimize {
- background-color: #f7c734;
- opacity: 1;
- }
- .dot-menu-indicator .dot-maximize {
- background-color: #29cba8;
- opacity: 1;
- }
- .header-dropdown-details {
- position: relative;
- display: inline-block;
- }
- .header-dropdown-details summary {
- list-style: none;
- cursor: pointer;
- }
- .header-dropdown-details summary::-webkit-details-marker {
- display: none;
- }
- .title-pill {
- display: flex;
- align-items: center;
- gap: 6px;
- padding: 4px 12px;
- border-radius: 20px;
- background: var(--ask-bg);
- border: 1px solid var(--border-color);
- font-size: 0.85rem;
- font-weight: 600;
- transition: background-color 0.2s ease;
- }
- .title-pill:hover {
- background: var(--border-color);
- }
- .title-pill .reblog-arrow {
- font-size: 0.8rem;
- color: var(--text-muted);
- }
- .title-pill .chevron-icon {
- font-size: 0.85rem;
- color: var(--text-muted);
- }
- .header-popover {
- position: absolute;
- top: calc(100% + 8px);
- left: 50%;
- transform: translateX(-50%);
- padding: 10px 14px;
- border-radius: 12px;
- box-shadow: 0 8px 24px rgba(0,0,0,0.12);
- z-index: 20;
- white-space: nowrap;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 2px;
- }
- .popover-label {
- font-size: 0.7rem;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- color: var(--text-muted);
- }
- .card-header .post-date {
- font-size: 0.8rem;
- color: var(--accent-color);
- font-weight: 600;
- font-family: var(--second-font);
- }
- .card-content img,
- .reblog-content-body img {
- width: 100%;
- display: block;
- height: auto;
- border-radius: var(--img-border-radius);
- }
- .html_photoset {
- width: 100% !important;
- max-width: 100% !important;
- border-radius: var(--img-border-radius);
- }
- .card-text-body {
- padding: 16px;
- font-size: 0.95rem;
- line-height: 1.5;
- font-family: var(--main-font);
- }
- .card-text-body h3, .card-text-body h1, .card-text-body h2 {
- font-family: var(--header-title-font);
- color: var(--text-header-title);
- margin-bottom: 8px;
- }
- .read_more, a.read_more, .read-more, a.read-more, .read-more-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 16px auto 8px auto;
- width: fit-content;
- padding: 8px 18px;
- background: var(--ask-bg);
- border: 1px solid var(--border-color);
- border-radius: 20px;
- color: var(--accent-color) !important;
- font-weight: 600;
- font-size: 0.85rem;
- font-family: var(--second-font);
- transition: all 0.2s ease;
- text-align: center;
- }
- .read_more:hover, a.read_more:hover, .read-more:hover, a.read-more:hover, .read-more-btn:hover {
- background: var(--border-color);
- }
- .card-content iframe,
- .reblog-content-body iframe,
- .tumblr_video_container iframe,
- iframe.tumblr_audio_player {
- max-width: 100% !important;
- border-radius: var(--img-border-radius);
- }
- .tumblr_video_container {
- width: 100% !important;
- height: auto !important;
- aspect-ratio: 16 / 9;
- margin: 10px 0;
- overflow: hidden;
- border-radius: var(--img-border-radius);
- }
- .tumblr_video_container iframe {
- width: 100% !important;
- height: 100% !important;
- }
- .tumblr_parent, .np_link_embed, a.tumblr-link-anchor {
- display: block !important;
- background: var(--ask-bg) !important;
- border: 1px solid var(--border-color) !important;
- border-radius: var(--img-border-radius) !important;
- margin: 12px 0 !important;
- text-decoration: none !important;
- overflow: hidden !important;
- transition: border-color 0.2s ease, background-color 0.2s ease;
- }
- .tumblr_parent:hover, a.tumblr-link-anchor:hover {
- border-color: var(--accent-color) !important;
- }
- .tumblr-link-card, .np_link_embed {
- display: flex;
- flex-direction: column;
- }
- .tumblr-link-card .link-asset, .np_link_embed .link-asset img {
- width: 100%;
- height: auto;
- max-height: 280px;
- object-fit: cover;
- }
- .tumblr-link-card .link-summary, .np_link_embed .link-summary {
- padding: 14px;
- }
- .tumblr-link-card .link-title, .np_link_embed .link-title {
- font-family: var(--header-title-font);
- font-size: 1.05rem;
- font-weight: 700;
- color: var(--text-header-title);
- margin-bottom: 6px;
- }
- .tumblr-link-card .link-description, .np_link_embed .link-description {
- font-size: 0.85rem;
- color: var(--text-muted);
- font-family: var(--second-font);
- line-height: 1.4;
- margin-bottom: 8px;
- }
- .tumblr-link-card .link-site-name, .np_link_embed .link-site-name {
- font-size: 0.75rem;
- font-family: var(--second-font);
- color: var(--accent-color);
- text-transform: uppercase;
- font-weight: 600;
- letter-spacing: 0.5px;
- }
- /* ====================================
- CUSTOM RICH TEXT & CONTENT FORMATTING
- ==================================== */
- .quote-text,
- .quote-source,
- .reblog-content-body blockquote.np_quote,
- .card-text-body blockquote.np_quote,
- .chat-teaser,
- .np_chat,
- .reblog-content-body .chat,
- .card-text-body .chat,
- ul.chat,
- li.chat-line {
- font-family: var(--second-font) !important;
- }
- .card-text-body blockquote,
- .reblog-content-body blockquote {
- background: var(--ask-bg) !important;
- border: 1px solid var(--border-color) !important;
- border-left: 1px solid var(--border-color) !important;
- border-radius: 8px !important;
- padding: 14px 16px !important;
- margin: 12px 0 !important;
- box-shadow: none !important;
- }
- .card-text-body ul,
- .card-text-body ol,
- .reblog-content-body ul,
- .reblog-content-body ol {
- padding-left: 24px !important;
- margin: 12px 0 !important;
- }
- .card-text-body li,
- .reblog-content-body li {
- margin-bottom: 6px;
- padding-left: 4px;
- }
- .card-text-body li:last-child,
- .reblog-content-body li:last-child {
- margin-bottom: 0;
- }
- .reblog-list {
- display: flex;
- flex-direction: column;
- }
- .reblog-item {
- padding: 16px;
- position: relative;
- }
- .reblog-item::after {
- content: "";
- position: absolute;
- bottom: 0;
- left: 7.5%;
- width: 85%;
- height: 1px;
- background-color: var(--border-color);
- }
- .reblog-list:not(:has(~ .reblog-list)) .reblog-item::after {
- display: none;
- }
- .reblog-item-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 12px;
- }
- .reblog-user {
- display: flex;
- align-items: center;
- gap: 10px;
- font-weight: 600;
- font-size: 0.9rem;
- }
- .reblog-user img {
- width: 28px;
- height: 28px;
- border-radius: 50%;
- object-fit: cover;
- }
- .reblog-user a {
- color: var(--accent-color);
- }
- .reblog-user .deactivated {
- color: var(--text-muted);
- font-style: italic;
- }
- .reblog-content-body {
- font-size: 0.93rem;
- line-height: 1.5;
- font-family: var(--main-font);
- color: var(--text-main);
- }
- .reblog-content-body h1, .reblog-content-body h2, .reblog-content-body h3 {
- font-family: var(--header-title-font);
- color: var(--text-header-title);
- margin-bottom: 8px;
- }
- .reblog-content-body p {
- margin-bottom: 10px;
- }
- .reblog-content-body p:last-child {
- margin-bottom: 0;
- }
- .ask-box {
- background: var(--ask-bg);
- border-left: 5px solid var(--accent-color);
- margin: 16px 16px 0;
- border-radius: 8px;
- padding: 16px;
- }
- .asker-info {
- display: flex;
- align-items: center;
- gap: 10px;
- font-family: var(--second-font);
- font-weight: 600;
- font-size: 0.9rem;
- margin-bottom: 10px;
- }
- .asker-info img {
- width: 28px;
- height: 28px;
- border-radius: 50%;
- }
- .asker-info span {
- color: var(--text-muted);
- font-weight: 400;
- font-size: 0.85rem;
- }
- .ask-question {
- font-size: 0.95rem;
- font-weight: 500;
- line-height: 1.4;
- color: var(--text-main);
- padding-left: 38px;
- font-family: var(--second-font);
- }
- .ask-answer {
- padding: 16px;
- font-size: 0.95rem;
- line-height: 1.5;
- font-family: var(--main-font);
- }
- .ask-answer > blockquote:first-of-type ~ * {
- display: none;
- }
- .ig-card:has(.reblog-list) .fallback-text-body {
- display: none;
- }
- .quote-body {
- padding: 24px 20px 20px;
- text-align: center;
- }
- .quote-text {
- font-family: var(--header-title-font);
- font-size: 1.3rem;
- line-height: 1.4;
- color: var(--text-header-title);
- margin-bottom: 12px;
- }
- .quote-source {
- font-size: 0.88rem;
- color: var(--text-muted);
- font-style: italic;
- font-family: var(--second-font);
- }
- .quote-source::before {
- content: "— ";
- }
- /* ====================================
- IPADOS FLOATING TOOLBAR CAPSULE
- ==================================== */
- .ipados-toolbar-wrapper {
- padding: 12px 16px 16px;
- display: flex;
- justify-content: center;
- }
- .card-actions {
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- }
- .card-actions.ipados-toolbar {
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- padding: 6px 14px;
- background: var(--ask-bg);
- border: 1px solid var(--border-color);
- border-radius: 30px;
- box-shadow: 0 4px 12px rgba(0,0,0,0.04);
- position: relative;
- }
- .action-group-left,
- .action-group-right {
- display: flex;
- align-items: center;
- gap: 12px;
- }
- .tool-group {
- display: flex;
- align-items: center;
- gap: 12px;
- }
- .tool-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 34px;
- height: 34px;
- border-radius: 50%;
- transition: background-color 0.2s ease, color 0.2s ease;
- }
- .tool-btn:hover {
- background-color: var(--border-color);
- }
- .tool-icon {
- font-size: 1.2rem;
- }
- .header-btn {
- background: var(--ask-bg);
- border: 1px solid var(--border-color);
- color: inherit;
- }
- .header-btn:hover,
- .action-btn:hover,
- .action-btn.active {
- color: var(--accent-color);
- }
- .action-btn {
- background: none;
- border: none;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 4px;
- border-radius: 50%;
- color: inherit;
- transition: color 0.2s;
- }
- .action-item:hover .action-btn, .action-btn:hover, .action-btn.active {
- color: var(--accent-color);
- }
- .tumblr-btn-wrapper {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .action-item iframe {
- filter: grayscale(100%) opacity(0.7);
- transition: filter 0.2s ease;
- }
- .action-item:hover iframe {
- filter: none;
- }
- .tumblr-btn-wrapper iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0.0001;
- z-index: 2;
- cursor: pointer;
- }
- .popover-details {
- position: relative;
- }
- .popover-details summary {
- list-style: none;
- cursor: pointer;
- }
- .popover-details summary::-webkit-details-marker {
- display: none;
- }
- .ipados-tag-popover {
- position: absolute;
- bottom: calc(100% + 10px);
- right: 0;
- width: 240px;
- padding: 12px;
- border-radius: 12px;
- box-shadow: 0 8px 24px rgba(0,0,0,0.12);
- z-index: 20;
- }
- .popover-header {
- font-size: 0.75rem;
- font-weight: 700;
- text-transform: uppercase;
- color: var(--text-muted);
- margin-bottom: 8px;
- }
- .card-tags {
- font-size: 0.85rem;
- line-height: 1.5;
- display: flex;
- flex-wrap: wrap;
- gap: 4px;
- }
- .card-tags a {
- font-family: var(--second-font);
- color: var(--tag-color);
- }
- /* ====================================
- NOTES
- ==================================== */
- #notes {
- padding: 16px;
- }
- .notes-content{
- width: 100%;
- }
- /* ------------------------------------
- TAB BAR
- ------------------------------------ */
- .notes-tabs {
- display: flex;
- gap: 8px;
- padding-bottom: 12px;
- margin-bottom: 16px;
- border-bottom: 1px solid var(--border-color);
- }
- .notes-tabs .action-btn {
- font-family: var(--second-font);
- font-size: 0.85rem;
- font-weight: 600;
- display: flex;
- align-items: center;
- gap: 6px;
- padding: 6px 12px;
- border: none;
- border-radius: 20px;
- color: var(--text-muted);
- background: transparent;
- cursor: pointer;
- transition:
- color 0.2s ease,
- background-color 0.2s ease;
- }
- .notes-tabs .action-btn:hover,
- .notes-tabs .action-btn.active {
- color: var(--post-header-link);
- background-color: var(--ask-bg);
- }
- .notes-content ol.notes {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .notes-content ol.notes li.note {
- margin: 0;
- padding: 12px 0;
- list-style: none;
- border-bottom: 1px solid var(--border-color);
- }
- .notes-content ol.notes li.note:last-child {
- border-bottom: none;
- }
- .notes-content ol.notes li.note img.avatar {
- width: 22px;
- height: 22px;
- margin: 0 8px 0 0;
- border-radius: 50%;
- object-fit: cover;
- }
- /* Keep the notes list readable */
- .notes-content ol.notes li.note a {
- color: var(--post-header-link);
- }
- /* ------------------------------------
- ALWAYS HIDE LIKES
- ------------------------------------ */
- .notes-content ol.notes > li.note.like {
- display: none !important;
- }
- /* ------------------------------------
- COMMENTS / REPLIES
- ------------------------------------ */
- .notes-content.show-comments ol.notes > li.note:not(.reply) {
- display: none;
- }
- .notes-content.show-comments ol.notes > li.note.reply {
- display: block;
- }
- /* ------------------------------------
- REBLOGS
- ------------------------------------ */
- .notes-content.show-reblogs ol.notes > li.note:not(.reblog) {
- display: none;
- }
- .notes-content.show-reblogs ol.notes > li.note.reblog {
- display: block;
- }
- /* ------------------------------------
- REPLY CONTENT
- ------------------------------------ */
- .notes-content ol.notes li.note.reply .answer_content {
- display: block;
- margin-top: 8px;
- padding: 10px 12px;
- border-radius: 10px;
- background: var(--ask-bg);
- color: var(--text-main);
- }
- /* ------------------------------------
- NOTE LINKS
- ------------------------------------ */
- .notes-content ol.notes li.note a {
- color: var(--post-header-link);
- }
- /* ------------------------------------
- MORE NOTES
- ------------------------------------ */
- .notes-content ol.notes li.more_notes_link_container {
- display: block;
- padding-top: 16px;
- text-align: center;
- border-bottom: none;
- }
- /* ====================================
- NEW FLOATING NAV & PAGINATION ADDITIONS
- ==================================== */
- /* ====================================
- FLOATING PAGINATION
- ==================================== */
- .sticky-pagination-capsule {
- position: fixed;
- top: 30%;
- right: 20px;
- transform: translateY(-50%);
- z-index: 9998;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 8px;
- width: 44px;
- padding: 8px 6px;
- border-radius: 24px;
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
- font-weight: 700;
- font-size: 0.9rem;
- }
- .sticky-pagination-capsule .page-arrow {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 32px;
- height: 28px;
- color: var(--accent-color);
- font-size: 1rem;
- border-radius: 50%;
- transition:
- background-color 0.2s ease,
- opacity 0.2s ease;
- }
- .sticky-pagination-capsule .page-arrow:hover {
- background-color: var(--ask-bg);
- }
- .sticky-pagination-capsule .page-arrow.disabled {
- color: var(--text-muted);
- opacity: 0.35;
- pointer-events: none;
- }
- .sticky-pagination-capsule .page-number {
- color: var(--text-main);
- font-family: var(--second-font);
- font-size: 0.8rem;
- line-height: 1;
- }
- /* ====================================
- FLOATING NAVIGATION
- ==================================== */
- #floating-nav-container {
- position: fixed;
- right: 20px;
- bottom: 20px;
- z-index: 9999;
- }
- .glass-circle-btn {
- width: 44px;
- height: 44px;
- border-radius: 50%;
- background: var(--card-bg);
- backdrop-filter: blur(16px) saturate(140%);
- -webkit-backdrop-filter: blur(16px);
- border: 1px solid var(--border-color);
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
- color: var(--text-main);
- }
- #popup-nav-menu {
- position: absolute;
- bottom: calc(100% + 10px);
- right: 0;
- width: 44px;
- min-width: 44px;
- max-width: 44px;
- padding: 6px;
- border-radius: 24px;
- display: flex;
- flex-direction: column;
- gap: 4px;
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
- transform-origin: bottom right;
- animation: menuPopupFade 0.2s ease;
- }
- @keyframes menuPopupFade {
- from { opacity: 0; transform: scale(0.95) translateY(10px); }
- to { opacity: 1; transform: scale(1) translateY(0); }
- }
- #popup-nav-menu .nav-item {
- position: relative;
- width: 32px;
- min-width: 32px;
- height: 32px;
- padding: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- color: var(--text-main);
- background: transparent;
- border: none;
- cursor: pointer;
- transition:
- background-color 0.2s ease,
- color 0.2s ease;
- }
- #popup-nav-menu .nav-icon {
- flex-shrink: 0;
- width: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 1.1rem;
- color: var(--accent-color);
- }
- #popup-nav-menu .nav-label {
- position: absolute;
- right: calc(100% + 8px);
- white-space: nowrap;
- padding: 5px 9px;
- border-radius: 15px;
- background: var(--card-bg);
- border: 1px solid var(--border-color);
- box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
- color: var(--text-main);
- opacity: 0;
- pointer-events: none;
- transform: translateX(5px);
- transition:
- opacity 0.2s ease,
- transform 0.2s ease;
- }
- #popup-nav-menu .nav-item:hover .nav-label,
- #popup-nav-menu .nav-item:focus-visible .nav-label {
- opacity: 1;
- transform: translateX(0);
- }
- #popup-nav-menu .nav-item:hover,
- #popup-nav-menu .nav-item.active-nav {
- background: var(--ask-bg);
- color: var(--accent-color);
- }
- /* Liquid Glass Search Modal Overlay */
- .glass-modal-overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background: rgba(0, 0, 0, 0.3);
- backdrop-filter: blur(8px);
- -webkit-backdrop-filter: blur(8px);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 10000;
- opacity: 0;
- pointer-events: none;
- transition: opacity 0.25s ease;
- }
- .glass-modal-overlay.is-active {
- opacity: 1;
- pointer-events: auto;
- }
- .liquid-search-card {
- width: 90%;
- max-width: 500px;
- border-radius: 16px;
- padding: 16px;
- box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
- transform: scale(0.95);
- transition: transform 0.25s ease;
- }
- .glass-modal-overlay.is-active .liquid-search-card {
- transform: scale(1);
- }
- .search-modal-header {
- display: flex;
- align-items: center;
- gap: 10px;
- padding-bottom: 12px;
- border-bottom: 1px solid var(--border-color);
- }
- .search-modal-icon {
- font-size: 1.2rem;
- color: var(--accent-color);
- }
- .search-modal-form {
- flex: 1;
- }
- #search-modal-input {
- width: 100%;
- border: none;
- background: transparent;
- font-family: var(--second-font);
- font-size: 1rem;
- color: var(--text-main);
- outline: none;
- }
- #search-modal-input::placeholder {
- color: var(--text-muted);
- }
- .close-modal-btn {
- background: transparent;
- border: none;
- cursor: pointer;
- color: var(--text-muted);
- font-size: 1.1rem;
- padding: 4px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: background-color 0.2s, color 0.2s;
- }
- .close-modal-btn:hover {
- background: var(--border-color);
- color: var(--text-main);
- }
- .search-recommendations {
- padding-top: 12px;
- }
- .recommendations-title {
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- color: var(--text-muted);
- font-weight: 700;
- margin-bottom: 8px;
- }
- .recommendations-list {
- display: flex;
- flex-direction: column;
- gap: 4px;
- }
- .rec-item {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 8px 10px;
- border-radius: 6px;
- font-size: 0.88rem;
- font-family: var(--second-font);
- color: var(--text-main);
- transition: background-color 0.2s, color 0.2s;
- }
- .rec-item:hover {
- background: var(--ask-bg);
- color: var(--accent-color);
- }
- .site-footer-card {
- width: 100%;
- max-width: calc(290px + var(--post-width) + 30px);
- background: var(--card-bg);
- border: 1px solid var(--border-color);
- border-radius: 12px;
- padding: 18px 24px;
- text-align: center;
- font-size: 0.85rem;
- color: var(--text-muted);
- font-family: var(--second-font);
- line-height: 1.5;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
- }
- /* ====================================
- RESPONSIVE (MOBILE) VIEWPORT
- ==================================== */
- @media (max-width: 820px) {
- .app-layout, .site-footer-card {
- width: 100% !important;
- max-width: 100% !important;
- margin-right: 0 !important;
- }
- .app-layout {
- flex-direction: column;
- align-items: center;
- }
- .sidebar-wrapper, .feed {
- width: 100% !important;
- max-width: 100% !important;
- }
- .sidebar-wrapper {
- position: relative;
- margin-right: 0 !important;
- min-width: 100% !important;
- margin-bottom: 44px !important;
- }
- /* Convert desktop vertical pagination into horizontal pill attached next to floating button */
- .sticky-pagination-capsule {
- position: fixed;
- top: auto;
- left: 11%;
- bottom: 20px;
- transform: none;
- z-index: 9998;
- display: inline-flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- gap: 2px;
- padding: 4px;
- border-radius: 40px;
- width: fit-content;
- height: fit-content;
- }
- .sticky-pagination-capsule .page-arrow {
- width: 28px;
- height: 28px;
- padding: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 1rem;
- flex-shrink: 0;
- }
- .sticky-pagination-capsule .page-number {
- min-width: 20px;
- height: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
- }
- }
- /* ====================================
- LANDSCAPE MOBILE NAVIGATION
- Horizontal popup beside the button
- ==================================== */
- @media (max-width: 820px) and (orientation: landscape) {
- #popup-nav-menu {
- bottom: 0;
- right: calc(100% + 10px);
- width: auto;
- min-width: 0;
- max-width: none;
- height: 40px;
- padding: 4px 6px;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- gap: 2px;
- border-radius: 22px;
- transform-origin: right center;
- }
- #popup-nav-menu .nav-item {
- width: 32px;
- min-width: 32px;
- height: 32px;
- flex-shrink: 0;
- }
- #popup-nav-menu .nav-label {
- right: auto;
- bottom: calc(100% + 8px);
- transform: translateY(5px);
- }
- #popup-nav-menu .nav-item:hover .nav-label,
- #popup-nav-menu .nav-item:focus-visible .nav-label {
- transform: translateY(0);
- }
- }
- </style>
- </head>
- <body>
- <div class="app-layout">
- <!-- Sidebar Wrapper -->
- <div class="sidebar-wrapper">
- <aside class="sidebar-card glass-card">
- <header class="card-header ipados-header">
- <div class="header-left">
- <div class="dot-menu-indicator">
- <span class="dot dot-close"></span>
- <span class="dot dot-minimize"></span>
- <span class="dot dot-maximize"></span>
- </div>
- </div>
- <details class="header-dropdown-details">
- <summary class="title-pill">
- <span class="title-text user-info">
- <a href="{BlogURL}">{Name}</a>
- </span>
- </summary>
- </details>
- <div class="header-right">
- <div class="header-btn tool-btn" aria-hidden="true">
- <span class="ti ti-dots tool-icon"></span>
- </div>
- </div>
- </header>
- <div class="sidebar-banner"></div>
- <div class="sidebar-profile">
- <div class="sidebar-avatar">
- <img src="{PortraitURL-96}" alt="{Title}">
- </div>
- <h1 class="sidebar-title">{Title}</h1>
- {block:Description}
- <div class="sidebar-desc">{Description}</div>
- {/block:Description}
- </div>
- <div class="sidebar-content-body">
- <!-- Pages List inside Sidebar (Standard Nav & Search moved to Floating Nav) -->
- {block:HasPages}
- <nav class="sidebar-pages-nav">
- {block:Pages}
- <a href="{URL}" class="nav-item"><span class="ti ti-info-circle"></span> {Label}</a>
- {/block:Pages}
- </nav>
- {/block:HasPages}
- {block:IfInstagramURL}
- <div class="sidebar-divider"></div>
- {/block:IfInstagramURL}
- <div class="sidebar-socials">
- {block:IfInstagramURL}
- <a href="{text:Instagram URL}" target="_blank" rel="noopener noreferrer" class="social-link">
- <span class="icon ti ti-brand-instagram"></span>
- <span class="username">{block:IfInstagramUsername}{text:Instagram Username}{/block:IfInstagramUsername}{block:IfNotInstagramUsername}Instagram{/block:IfNotInstagramUsername}</span>
- </a>
- {/block:IfInstagramURL}
- {block:IfThreadsURL}
- <a href="{text:Threads URL}" target="_blank" rel="noopener noreferrer" class="social-link">
- <span class="icon ti ti-brand-threads"></span>
- <span class="username">{block:IfThreadsUsername}{text:Threads Username}{/block:IfThreadsUsername}{block:IfNotThreadsUsername}Threads{/block:IfNotThreadsUsername}</span>
- </a>
- {/block:IfThreadsURL}
- {block:IfTwitterURL}
- <a href="{text:Twitter URL}" target="_blank" rel="noopener noreferrer" class="social-link">
- <span class="icon ti ti-brand-x"></span>
- <span class="username">{block:IfTwitterUsername}{text:Twitter Username}{/block:IfTwitterUsername}{block:IfNotTwitterUsername}X / Twitter{/block:IfNotTwitterUsername}</span>
- </a>
- {/block:IfTwitterURL}
- {block:IfTikTokURL}
- <a href="{text:TikTok URL}" target="_blank" rel="noopener noreferrer" class="social-link">
- <span class="icon ti ti-brand-tiktok"></span>
- <span class="username">{block:IfTikTokUsername}{text:TikTok Username}{/block:IfTikTokUsername}{block:IfNotTikTokUsername}TikTok{/block:IfNotTikTokUsername}</span>
- </a>
- {/block:IfTikTokURL}
- {block:IfYouTubeURL}
- <a href="{text:YouTube URL}" target="_blank" rel="noopener noreferrer" class="social-link">
- <span class="icon ti ti-brand-youtube"></span>
- <span class="username">{block:IfYouTubeUsername}{text:YouTube Username}{/block:IfYouTubeUsername}{block:IfNotYouTubeUsername}YouTube{/block:IfNotYouTubeUsername}</span>
- </a>
- {/block:IfYouTubeURL}
- {block:IfGitHubURL}
- <a href="{text:GitHub URL}" target="_blank" rel="noopener noreferrer" class="social-link">
- <span class="icon ti ti-brand-github"></span>
- <span class="username">{block:IfGitHubUsername}{text:GitHub Username}{/block:IfGitHubUsername}{block:IfNotGitHubUsername}GitHub{/block:IfNotGitHubUsername}</span>
- </a>
- {/block:IfGitHubURL}
- </div>
- {block:IfCustomSidebarWidgetHTML}
- <div class="sidebar-divider"></div>
- <div class="custom-html-block">
- {text:Custom Sidebar Widget HTML}
- </div>
- {/block:IfCustomSidebarWidgetHTML}
- </div>
- </aside>
- </div>
- <!-- Feed Section -->
- <main class="feed">
- {block:Posts}
- <article class="ig-card glass-card ipados-card" id="post-{PostID}">
- <!-- iPadOS Window Header Bar -->
- <header class="card-header ipados-header">
- <div class="header-left">
- <div class="dot-menu-indicator">
- <span class="dot dot-close"></span>
- <span class="dot dot-minimize"></span>
- <span class="dot dot-maximize"></span>
- </div>
- {block:PermalinkPage}
- <button type="button"
- class="header-btn tool-btn permalink-back-btn"
- aria-label="Go back"
- title="Go back">
- <span class="ti ti-chevron-left tool-icon"></span>
- </button>
- {/block:PermalinkPage}
- </div>
- <!-- Username Title Pill + Pure CSS Date Dropdown Popover -->
- <details class="header-dropdown-details">
- <summary class="title-pill">
- <span class="title-text user-info">
- {block:RebloggedFrom}
- <a href="{BlogURL}">{Name}</a>
- <span class="ti ti-chevron-right reblog-arrow"></span>
- <a href="{ReblogParentURL}">{ReblogParentName}</a>
- {/block:RebloggedFrom}
- {block:NotReblog}
- <a href="{BlogURL}">{Name}</a>
- {/block:NotReblog}
- </span>
- <span class="ti ti-chevron-down chevron-icon"></span>
- </summary>
- <!-- Date Dropdown Popover -->
- <div class="header-popover glass-card">
- <span class="popover-label">Posted</span>
- {block:Date}
- <a href="{Permalink}" class="post-date custom-date-format"
- data-timestamp="{Timestamp}"
- data-short="{DayOfMonth} {ShortMonth}"
- data-slashed="{DayOfMonthWithZero}/{ShortMonth}/{Year}"
- data-full="{Month} {DayOfMonthWithZero}{DayOfMonthSuffix}, {Year}">
- {DayOfMonth} {ShortMonth}
- </a>
- {/block:Date}
- </div>
- </details>
- <div class="header-right">
- <button class="header-btn share-btn tool-btn"
- type="button"
- aria-label="Share Post"
- title="Share">
- <span class="ti ti-share-2 tool-icon"></span>
- </button>
- </div>
- </header>
- <!-- Main Post Content -->
- <div class="card-content ipados-body">
- {block:Photo}
- <img src="{PhotoURL-500}" alt="{PhotoAlt}">
- {block:NotReblog}
- {block:Caption}
- <div class="card-text-body">{Caption}</div>
- {/block:Caption}
- {/block:NotReblog}
- {/block:Photo}
- {block:Photoset}
- {Photoset}
- {block:NotReblog}
- {block:Caption}
- <div class="card-text-body">{Caption}</div>
- {/block:Caption}
- {/block:NotReblog}
- {/block:Photoset}
- {block:Quote}
- <div class="quote-body">
- <p class="quote-text">"{Quote}"</p>
- {block:Source}
- <p class="quote-source">{Source}</p>
- {/block:Source}
- </div>
- {/block:Quote}
- {block:Link}
- <div class="card-text-body">
- <h3 class="post-title"><a href="{URL}" {Target}>{Name}</a></h3>
- {block:NotReblog}
- {block:Description}
- {Description}
- {/block:Description}
- {/block:NotReblog}
- </div>
- {/block:Link}
- {block:Video}
- <div class="tumblr_video_container">
- {Video-500}
- </div>
- {block:NotReblog}
- {block:Caption}
- <div class="card-text-body">{Caption}</div>
- {/block:Caption}
- {/block:NotReblog}
- {/block:Video}
- {block:Audio}
- {AudioPlayer}
- {block:NotReblog}
- {block:Caption}
- <div class="card-text-body">{Caption}</div>
- {/block:Caption}
- {/block:NotReblog}
- {/block:Audio}
- {block:Answer}
- <div class="ask-box">
- <div class="asker-info">
- <img src="{AskerPortraitURL-64}">
- {Asker} <span>asked:</span>
- </div>
- <p class="ask-question">{Question}</p>
- </div>
- <div class="ask-answer">
- {Answer}
- </div>
- {/block:Answer}
- {block:Reblogs}
- <div class="reblog-list">
- <div class="reblog-item">
- <div class="reblog-item-header">
- <div class="reblog-user">
- {block:IsActive}
- <img src="{PortraitURL-64}" alt="{Username}">
- <a href="{Permalink}">{Username}</a>
- {/block:IsActive}
- {block:IsDeactivated}
- <span class="deactivated">{Username} (deactivated)</span>
- {/block:IsDeactivated}
- </div>
- </div>
- <div class="reblog-content-body">
- {Body}
- </div>
- </div>
- </div>
- {/block:Reblogs}
- {block:Text}
- <div class="card-text-body fallback-text-body">
- {block:Title}
- <h3 class="post-title">{Title}</h3>
- {/block:Title}
- {Body}
- </div>
- {/block:Text}
- {block:More}
- <div class="read-more-wrapper">
- <a href="{Permalink}" class="read-more-btn">Read More</a>
- </div>
- {/block:More}
- </div>
- <!-- iPadOS Floating Toolbar Footer Capsule -->
- <div class="ipados-toolbar-wrapper">
- <footer class="card-actions ipados-toolbar">
- <!-- Left Action Group -->
- <div class="action-group-left tool-group">
- <!-- Like Button -->
- <div class="action-item tumblr-btn-wrapper tool-btn like-wrapper" title="Like">
- <button class="action-btn" aria-label="Like">
- <span class="ti ti-heart tool-icon"></span>
- </button>
- {LikeButton}
- </div>
- <!-- Reblog Button -->
- <div class="action-item tumblr-btn-wrapper tool-btn" title="Reblog">
- <a href="{ReblogURL}" class="action-btn" aria-label="Reblog">
- <span class="ti ti-repeat tool-icon"></span>
- </a>
- </div>
- <!-- Comment / Permalink Notes Button -->
- <div class="action-item tool-btn" title="Notes">
- <a href="{Permalink}#notes"
- class="action-btn"
- aria-label="Notes">
- <span class="ti ti-message-circle tool-icon"></span>
- </a>
- </div>
- </div>
- <!-- Right Action Group -->
- <div class="action-group-right tool-group">
- {block:HasTags}
- <details class="popover-details">
- <summary class="action-btn tool-btn tag-trigger-btn"
- aria-label="Tags"
- title="Tags">
- <span class="ti ti-hash tool-icon"></span>
- </summary>
- <div class="ipados-tag-popover glass-card">
- <div class="popover-header">Tags</div>
- <div class="tags-cloud card-tags">
- {block:Tags}
- <a href="{TagURL}">#{Tag}</a>
- {/block:Tags}
- </div>
- </div>
- </details>
- {/block:HasTags}
- </div>
- </footer>
- </div>
- </article>
- {/block:Posts}
- {block:PermalinkPage}
- {block:PostNotes}
- <section class="ig-card glass-card" id="notes">
- <!-- NOTES FILTERS -->
- <div class="notes-tabs">
- <button class="action-btn active" type="button" data-tab="comments">
- <span class="ti ti-message-circle"></span>
- Comments
- </button>
- <button class="action-btn" type="button" data-tab="reblogs">
- <span class="ti ti-repeat"></span>
- Reblogs
- </button>
- </div>
- <div class="notes-content">
- {PostNotes}
- </div>
- </section>
- {/block:PostNotes}
- {/block:PermalinkPage}
- </main>
- </div>
- <!-- Middle-Right Sticky Pagination Capsule (Desktop: Vertical / Mobile: Horizontal) -->
- {block:Pagination}
- <nav class="sticky-pagination-capsule glass-card">
- {block:PreviousPage}
- <a href="{PreviousPage}" class="page-arrow" title="Previous Page" aria-label="Previous Page">
- <span class="ti ti-chevron-left"></span>
- </a>
- {/block:PreviousPage}
- {block:IfNotPreviousPage}
- <span class="page-arrow disabled" aria-hidden="true">
- <span class="ti ti-chevron-left"></span>
- </span>
- {/block:IfNotPreviousPage}
- <span class="page-number">{CurrentPage}</span>
- {block:NextPage}
- <a href="{NextPage}" class="page-arrow" title="Next Page" aria-label="Next Page">
- <span class="ti ti-chevron-right"></span>
- </a>
- {/block:NextPage}
- {block:IfNotNextPage}
- <span class="page-arrow disabled" aria-hidden="true">
- <span class="ti ti-chevron-right"></span>
- </span>
- {/block:IfNotNextPage}
- </nav>
- {/block:Pagination}
- <!-- Sticky Lower Right Floating Navigation Menu -->
- <details id="floating-nav-container">
- <summary class="glass-circle-btn" aria-label="Toggle Navigation" title="Menu">
- <span class="ti ti-menu-2 trigger-icon"></span>
- </summary>
- <!-- Popup Menu directly above the button -->
- <nav id="popup-nav-menu" class="glass-card">
- <a href="/" class="nav-item">
- <span class="ti ti-home nav-icon"></span>
- <span class="nav-label">Home</span>
- </a>
- <a href="/archive" class="nav-item">
- <span class="ti ti-archive nav-icon"></span>
- <span class="nav-label">Archive</span>
- </a>
- {block:AskEnabled}
- <a href="/ask" class="nav-item">
- <span class="ti ti-message nav-icon"></span>
- <span class="nav-label">Ask</span>
- </a>
- {/block:AskEnabled}
- {block:SubmissionsEnabled}
- <a href="/submit" class="nav-item">
- <span class="ti ti-paperclip nav-icon"></span>
- <span class="nav-label">Submit</span>
- </a>
- {/block:SubmissionsEnabled}
- <button type="button" id="theme-toggle-btn" class="nav-item">
- <span class="ti ti-moon nav-icon" id="theme-icon"></span>
- <span class="nav-label">Dark Mode</span>
- </button>
- <button type="button" id="open-search-modal" class="nav-item">
- <span class="ti ti-search nav-icon"></span>
- <span class="nav-label">Search</span>
- </button>
- </nav>
- </details>
- <!-- Liquid Glass Search Window Modal -->
- <div id="liquid-glass-search-modal" class="glass-modal-overlay">
- <div class="liquid-search-card glass-card">
- <header class="search-modal-header">
- <span class="ti ti-search search-modal-icon"></span>
- <form action="/search" method="get" class="search-modal-form">
- <input type="text" name="q" id="search-modal-input" placeholder="Search blog..." autocomplete="off">
- </form>
- <button type="button" id="close-search-modal" class="close-modal-btn">
- <span class="ti ti-x"></span>
- </button>
- </header>
- <!-- Liquid Glass Recommendations Container -->
- <div class="search-recommendations" id="search-recommendations">
- <div class="recommendations-title">Suggested Searches</div>
- <div class="recommendations-list">
- <a href="/archive" class="rec-item"><span class="ti ti-history"></span> Recent Archives</a>
- {block:HasPages}
- {block:Pages}
- <a href="{URL}" class="rec-item"><span class="ti ti-link"></span> {Label}</a>
- {/block:Pages}
- {/block:HasPages}
- </div>
- </div>
- </div>
- </div>
- <footer class="site-footer-card">
- {block:IfCustomFooterText}
- {text:Custom Footer Text}
- {/block:IfCustomFooterText}
- {block:IfNotCustomFooterText}
- {Title}. Powered by Tumblr.
- {/block:IfNotCustomFooterText}
- </footer>
- <script>
- document.addEventListener("DOMContentLoaded", function() {
- // 1. WALLPAPER
- const wallpaperUrl = "{text:Wallpaper Image URL}".trim();
- if (wallpaperUrl) {
- document.body.classList.add("has-wallpaper");
- }
- // 2. HOME BUTTON AND NAVIGATION HIGHLIGHTING
- const currentPath = window.location.pathname;
- const navLinks = document.querySelectorAll("#popup-nav-menu .nav-item");
- navLinks.forEach(function(link) {
- const linkPath = link.getAttribute("href");
- if (
- currentPath === "/" ||
- currentPath === "" ||
- currentPath.startsWith("/page/")
- ) {
- if (linkPath === "/") {
- link.classList.add("active-nav");
- }
- } else if (linkPath && currentPath === linkPath) {
- link.classList.add("active-nav");
- }
- });
- // 3. LIQUID GLASS SEARCH MODAL TOGGLE
- const searchModal = document.getElementById("liquid-glass-search-modal");
- const openSearchBtn = document.getElementById("open-search-modal");
- const closeSearchBtn = document.getElementById("close-search-modal");
- const navDetails = document.getElementById("floating-nav-container");
- if (openSearchBtn && searchModal) {
- openSearchBtn.addEventListener("click", function(e) {
- e.preventDefault();
- if (navDetails) {
- navDetails.removeAttribute("open");
- }
- searchModal.classList.add("is-active");
- const input = document.getElementById("search-modal-input");
- if (input) input.focus();
- });
- }
- if (closeSearchBtn && searchModal) {
- closeSearchBtn.addEventListener("click", function() {
- searchModal.classList.remove("is-active");
- });
- }
- // 4. DAY / NIGHT TOGGLE SWITCH
- const themeToggleBtn = document.getElementById("theme-toggle-btn");
- const themeIcon = document.getElementById("theme-icon");
- function updateThemeIcon() {
- if (!themeIcon) return;
- if (document.body.classList.contains("night-mode")) {
- themeIcon.className = "ti ti-sun nav-icon";
- } else {
- themeIcon.className = "ti ti-moon nav-icon";
- }
- }
- if (localStorage.getItem("theme") === "night") {
- document.body.classList.add("night-mode");
- }
- updateThemeIcon();
- if (themeToggleBtn) {
- themeToggleBtn.addEventListener("click", function() {
- document.body.classList.toggle("night-mode");
- const isNight =
- document.body.classList.contains("night-mode");
- localStorage.setItem(
- "theme",
- isNight ? "night" : "day"
- );
- updateThemeIcon();
- });
- }
- // 5. RELIABLE DATE FORMATTING
- const selectedDateFormat = "{select:Date Format}";
- function getRelativeTime(timestamp) {
- const now = Math.floor(Date.now() / 1000);
- const diff = now - parseInt(timestamp, 10);
- if (isNaN(diff) || diff < 0) {
- return "just now";
- }
- const seconds = diff;
- const minutes = Math.floor(seconds / 60);
- const hours = Math.floor(minutes / 60);
- const days = Math.floor(hours / 24);
- const weeks = Math.floor(days / 7);
- if (seconds < 60) return `${seconds}s ago`;
- if (minutes < 60) return `${minutes}m ago`;
- if (hours < 24) return `${hours}h ago`;
- if (days === 1) return "Yesterday";
- if (days < 7) return `${days}d ago`;
- return `${weeks}w ago`;
- }
- document.querySelectorAll(".custom-date-format").forEach(function(el) {
- if (selectedDateFormat === "slashed") {
- el.textContent = el.getAttribute("data-slashed");
- } else if (selectedDateFormat === "full") {
- el.textContent = el.getAttribute("data-full");
- } else if (selectedDateFormat === "relative") {
- const ts = el.getAttribute("data-timestamp");
- if (ts) {
- el.textContent = getRelativeTime(ts);
- }
- } else {
- el.textContent = el.getAttribute("data-short");
- }
- });
- // 6. SHARE BUTTON LOGIC
- document.querySelectorAll(".share-btn").forEach(function(btn) {
- btn.addEventListener("click", function() {
- const url = window.location.href;
- if (navigator.share) {
- navigator.share({
- title: document.title,
- url: url
- }).catch(() => {});
- } else if (navigator.clipboard) {
- navigator.clipboard.writeText(url).then(function() {
- alert("Link copied to clipboard!");
- });
- }
- });
- });
- // 7. PERMALINK BACK BUTTON
- // Return to the exact page the visitor came from instead of always going home.
- document.querySelectorAll(".permalink-back-btn").forEach(function(btn) {
- btn.addEventListener("click", function() {
- const referrer = document.referrer;
- if (referrer) {
- try {
- const referrerURL = new URL(referrer);
- if (
- referrerURL.protocol === "http:" ||
- referrerURL.protocol === "https:"
- ) {
- window.location.href = referrerURL.href;
- return;
- }
- } catch (error) {}
- }
- if (window.history.length > 1) {
- window.history.back();
- } else {
- window.location.href = "{BlogURL}";
- }
- });
- });
- // 8. PERMALINK BACK BUTTON
- document.querySelectorAll("#notes").forEach(function(notesSection) {
- const tabs = notesSection.querySelectorAll(".notes-tabs .action-btn");
- const notesContent = notesSection.querySelector(".notes-content");
- if (!tabs.length || !notesContent) return;
- function filterNotes(tab) {
- // Remove previous state
- notesContent.classList.remove("show-comments", "show-reblogs");
- // Apply selected filter
- if (tab === "comments") {
- notesContent.classList.add("show-comments");
- }
- if (tab === "reblogs") {
- notesContent.classList.add("show-reblogs");
- }
- }
- tabs.forEach(function(button) {
- button.addEventListener("click", function() {
- tabs.forEach(function(tabButton) {
- tabButton.classList.remove("active");
- });
- button.classList.add("active");
- filterNotes(button.dataset.tab);
- });
- });
- // Default to Comments
- filterNotes("comments");
- });
- });
- </script>
- </body>
- </html>
Advertisement