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="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <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">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css" />
- <meta name="image:Header" content="https://64.media.tumblr.com/b1dd1b484e342e38313d8b67e3dd5f43/789a116e9587f969-93/s2048x3072/d51baa29b24aa856e6f54c34cde86101ef2656ed.jpg"/>
- <meta name="select:Date Format" content="short" title="23 JUN">
- <meta name="select:Date Format" content="slashed" title="23/JUN/2020">
- <meta name="select:Date Format" content="full" title="June 23rd, 2020">
- <meta name="select:Date Format" content="relative" title="Instagram Style (5h ago)">
- <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="#ffffff"/>
- <meta name="color:Background Color" content="#f0f2f5"/>
- <meta name="color:Gradient Color 2" content="#e2e8f0"/>
- <meta name="color:Card Background Color" content="#ffffff"/>
- <meta name="color:Ask Card Background Color" content="#f8fafc"/>
- <meta name="color:Main Text Color" content="#262626"/>
- <meta name="color:Header Title Color" content="#111827"/>
- <meta name="color:Muted Text Color" content="#737373"/>
- <meta name="color:Border Color" content="#e2e8f0"/>
- <meta name="color:Header Link Color" content="#0095f6"/>
- <meta name="color:Tag Color" content="#0095f6"/>
- <meta name="color:Selection Text Color" content="#ffffff"/>
- <meta name="color:Selection Background Color" content="#0095f6"/>
- <meta name="select:Header Title Font" content="'Alfa Slab One', cursive" title="Alfa Slab One">
- <meta name="select:Header Title Font" content="'Tomorrow', sans-serif" title="Tomorrow">
- <meta name="select:Header Title Font" content="'Inter', sans-serif" title="Inter">
- <meta name="select:Header Title Font" content="'Roboto Slab', serif" title="Roboto Slab">
- <meta name="select:Primary Font" content="'Inter', sans-serif" title="Inter">
- <meta name="select:Primary Font" content="'Exo', sans-serif" title="Exo">
- <meta name="select:Primary Font" content="'Tomorrow', sans-serif" title="Tomorrow">
- <meta name="select:Primary Font" content="'Alfa Slab One', cursive" title="Alfa Slab One">
- <meta name="select:Secondary Font" content="'Exo 2', sans-serif" title="Exo 2">
- <meta name="select:Secondary Font" content="'Exo', sans-serif" title="Exo">
- <meta name="select:Secondary Font" content="'Roboto Slab', serif" title="Roboto Slab">
- <meta name="select:Secondary Font" content="'Inter', sans-serif" title="Inter">
- <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)">
- <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:Custom Sidebar Widget HTML" content=""/>
- <meta name="text:Custom Footer Text" content=""/>
- <style>
- /* ====================================
- EDITABLE CONFIGURATION (CSS VARIABLES)
- ==================================== */
- :root {
- --header-title-font: {select:Header Title Font};
- --main-font: {select:Primary Font};
- --second-font: {select:Secondary Font};
- --post-width: {select:Post Width};
- --img-border-radius: {select:Image Border Radius};
- /* Dynamic Theme Colors */
- --bg-color-1: {color:Background Color};
- --bg-color-2: {color:Gradient Color 2};
- --card-bg: {color:Card Background Color};
- --ask-bg: {color:Ask Card Background Color};
- --text-main: {color:Main Text Color};
- --text-header-title: {color:Header Title Color};
- --text-muted: {color:Muted Text Color};
- --border-color: {color:Border Color};
- --post-header-color: {color:Main Text Color};
- --post-header-link: {color:Header Link Color};
- --tag-color: {color:Tag Color};
- /* Avatar Customizations */
- --avatar-radius: {select:Avatar Shape};
- --avatar-border-color: {color:Avatar Border Color};
- /* Text Selection Colors */
- --selection-text: {color:Selection Text Color};
- --selection-bg: {color:Selection Background 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 20px;
- background: linear-gradient(to bottom, var(--bg-color-1), var(--bg-color-2));
- background-attachment: fixed;
- }
- 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(280px + var(--post-width) + 30px);
- align-items: flex-start;
- margin-bottom: 24px;
- }
- /* ====================================
- SIDEBAR & SEARCH CARD
- ==================================== */
- .sidebar-wrapper {
- width: 280px;
- min-width: 280px;
- margin-right: 30px !important;
- position: relative;
- display: flex;
- flex-direction: column;
- }
- .sidebar-wrapper > * + * {
- margin-top: 20px;
- }
- .search-card {
- background: var(--card-bg);
- border: none;
- border-radius: 12px;
- padding: 8px 12px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
- }
- .search-card form {
- display: flex;
- align-items: center;
- width: 100%;
- gap: 8px;
- }
- .search-card input {
- flex: 1;
- padding: 8px 10px;
- border-radius: 6px;
- border: none;
- background: transparent;
- font-family: var(--second-font);
- color: var(--text-main);
- font-size: 0.89rem;
- outline: none;
- }
- .search-card input::placeholder {
- color: var(--text-muted);
- }
- .search-card button {
- background: var(--post-header-link);
- border: none;
- border-radius: 6px;
- cursor: pointer;
- color: #ffffff;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 8px;
- transition: opacity 0.2s;
- }
- .search-card button:hover {
- opacity: 0.85;
- }
- .search-card button span {
- font-size: 1.1rem;
- }
- .sidebar-card {
- background: var(--card-bg);
- border: none;
- 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: 110px;
- background-size: cover;
- background-position: center;
- background-color: var(--border-color);
- {block:ShowHeaderImage}
- background-image: url('{HeaderImage}');
- {/block:ShowHeaderImage}
- }
- .sidebar-profile {
- padding: 0 20px 20px;
- margin-top: -40px;
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- }
- /* DYNAMIC AVATAR SHAPE AND BORDER COLOR */
- .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-nav {
- display: flex;
- flex-direction: column;
- gap: 6px;
- }
- .sidebar-nav a {
- font-weight: 600;
- font-size: 1.1rem;
- padding: 8px 11px;
- border-radius: 6px;
- transition: all 0.2s ease;
- display: flex;
- align-items: center;
- gap: 8px;
- color: var(--text-main);
- }
- .sidebar-nav a:hover,
- .sidebar-nav a.active-nav {
- color: var(--post-header-link) !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(--post-header-link);
- }
- .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 {
- background: var(--card-bg);
- border: none;
- border-radius: 12px;
- margin-bottom: 24px;
- overflow: hidden;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
- position: relative;
- }
- .card-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 12px 16px;
- color: var(--post-header-color);
- position: relative;
- }
- .card-header::after {
- content: "";
- position: absolute;
- bottom: 0;
- left: 7.5%;
- width: 85%;
- height: 1px;
- background-color: var(--border-color);
- }
- .card-header .user-info {
- display: flex;
- align-items: center;
- gap: 8px;
- font-weight: 600;
- font-size: 0.9rem;
- }
- .card-header .user-info img {
- width: 32px;
- height: 32px;
- border-radius: 50%;
- }
- .card-header a {
- color: var(--post-header-link);
- }
- .card-header .post-date {
- font-size: 0.75rem;
- color: var(--text-muted);
- text-transform: uppercase;
- 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;
- margin-left: 1.1rem !important;
- margin-right: 1.1rem !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 {
- 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(--post-header-link) !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 {
- 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(--post-header-link) !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(--post-header-link);
- text-transform: uppercase;
- font-weight: 600;
- letter-spacing: 0.5px;
- }
- /* ====================================
- CUSTOM RICH TEXT & CONTENT FORMATTING
- ==================================== */
- /* 1. QUOTE & CHAT POSTS/BLOCKS USE SECONDARY FONT */
- .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;
- }
- /* 2. INDENTED BLOCKQUOTES (STYLING LIKE ASK CARDS) */
- .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; /* Removes default thick vertical accent bar */
- border-radius: 8px !important;
- padding: 14px 16px !important;
- margin: 12px 0 !important;
- box-shadow: none !important;
- }
- /* 3. BULLETED & NUMBERED LIST INDENTATION */
- .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);
- }
- /* Only remove the separator from the final reblog item */
- .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(--post-header-link);
- }
- .reblog-user .deactivated {
- color: var(--text-muted);
- font-style: italic;
- }
- .reblog-post-date {
- font-size: 0.75rem;
- color: var(--text-muted);
- text-transform: uppercase;
- font-family: var(--second-font);
- }
- .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(--post-header-link);
- 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: "— ";
- }
- .card-actions {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 12px 16px;
- position: relative;
- }
- .card-actions::before {
- content: "";
- position: absolute;
- top: 0;
- left: 7.5%;
- width: 85%;
- height: 1px;
- background-color: var(--border-color);
- }
- .action-group-left {
- display: flex;
- align-items: center;
- gap: 16px;
- }
- .action-group-right {
- display: flex;
- align-items: center;
- gap: 16px;
- }
- .action-item {
- display: flex;
- align-items: center;
- position: relative;
- }
- /* Colorize Tumblr's internal iframe reblog icon */
- .action-item iframe {
- filter: grayscale(100%) opacity(0.7);
- transition: filter 0.2s ease;
- }
- /* Hover effect matching action button hover styles */
- .action-item:hover iframe {
- /* Shifts the icon to match bright/accent link colors */
- filter: invert(48%) sepia(85%) saturate(2476%) hue-rotate(180deg) brightness(98%) contrast(107%);
- }
- .action-btn {
- background: none;
- border: none;
- cursor: pointer;
- display: flex;
- align-items: center;
- padding: 4px;
- border-radius: 4px;
- color: inherit;
- transition: color 0.2s;
- }
- .action-btn span {
- font-size: 1.4rem;
- }
- .action-item:hover .action-btn, .action-btn:hover, .action-btn.active {
- color: var(--post-header-link);
- }
- .tumblr-btn-wrapper {
- position: relative;
- display: flex;
- align-items: center;
- }
- .tumblr-btn-wrapper iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0.0001;
- z-index: 2;
- cursor: pointer;
- }
- .card-tags {
- padding: 0 16px 14px;
- font-size: 0.85rem;
- line-height: 1.4;
- }
- .card-tags a {
- font-family: var(--second-font);
- color: var(--tag-color);
- margin-right: 6px;
- }
- .pagination-card {
- background: var(--card-bg);
- border: none;
- border-radius: 12px;
- padding: 16px;
- margin-bottom: 0;
- text-align: center;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: 600;
- font-size: 0.9rem;
- }
- .page-btn {
- display: inline-flex;
- align-items: center;
- gap: 4px;
- color: var(--text-main);
- padding: 6px 12px;
- border-radius: 6px;
- transition: color 0.2s;
- }
- .page-btn:hover {
- color: var(--post-header-link);
- }
- .page-btn.disabled {
- color: var(--text-muted);
- opacity: 0.4;
- cursor: not-allowed;
- pointer-events: none;
- }
- /* ====================================
- NOTES TABS & FILTERING
- ==================================== */
- #notes {
- padding: 16px;
- }
- /* ------------------------------------
- TAB BAR
- ------------------------------------ */
- .notes-tabs {
- display: flex;
- gap: 8px;
- padding-bottom: 12px;
- border-bottom: 1px solid var(--border-color);
- margin-bottom: 16px;
- }
- .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-radius: 6px;
- border: none;
- color: var(--text-muted);
- background: transparent;
- cursor: pointer;
- transition:
- color 0.2s ease,
- background-color 0.2s ease;
- }
- .notes-tabs .action-btn:hover {
- color: var(--post-header-link);
- background-color: var(--ask-bg);
- }
- .notes-tabs .action-btn.active {
- color: var(--post-header-link);
- background-color: var(--ask-bg);
- }
- /* ------------------------------------
- NOTES LIST
- ------------------------------------ */
- .notes-content ol.notes {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .notes-content ol.notes li.note {
- margin: 0;
- padding: 10px 0;
- list-style: none;
- }
- /* User Avatars in Notes */
- .notes-content ol.notes li.note img.avatar {
- width: 22px;
- height: 22px;
- margin: 0 8px 0 0;
- border-radius: 50%;
- object-fit: cover;
- }
- /* ------------------------------------
- HIDE UNWANTED NOTE TYPES
- ------------------------------------ */
- /* Likes are not shown in the activity tabs */
- .notes-content ol.notes li.like,
- .notes-content ol.notes li.post_attribution {
- display: none;
- }
- /* ------------------------------------
- NOTE DIVIDERS
- ------------------------------------ */
- .notes-content ol.notes > li.note {
- border-bottom: 1px solid var(--border-color);
- }
- .notes-content ol.notes > li.note:last-child {
- border-bottom: none;
- }
- /* ------------------------------------
- MORE NOTES
- ------------------------------------ */
- .notes-content ol.notes li.more_notes_link_container {
- display: block;
- text-align: center;
- border-bottom: none;
- }
- .site-footer-card {
- width: 100%;
- max-width: calc(280px + var(--post-width) + 30px);
- background: var(--card-bg);
- 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);
- }
- @media (max-width: 820px) {
- .app-layout, .site-footer-card {
- width: 100% !important;
- max-width: 100% !important;
- }
- .app-layout {
- flex-direction: column;
- align-items: center;
- }
- .sidebar-wrapper, .feed {
- width: 100% !important;
- max-width: 100% !important;
- }
- .sidebar-wrapper {
- margin-right: 0 !important;
- width: 100% !important;
- min-width: 100% !important;
- margin-bottom: 24px !important;
- }
- }
- </style>
- </head>
- <body>
- <div class="app-layout">
- <div class="sidebar-wrapper">
- <div class="search-card">
- <form action="/search" method="get">
- <input type="text" name="q" value="{SearchQuery}" placeholder="Search posts...">
- <button type="submit" aria-label="Search">
- <span class="ti ti-search"></span>
- </button>
- </form>
- </div>
- <aside class="sidebar-card">
- <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">
- <nav class="sidebar-nav" id="sidebarNav">
- <a href="/" class="nav-item home-link"><span class="ti ti-home"></span> Home</a>
- <a href="/archive" class="nav-item"><span class="ti ti-archive"></span> Archive</a>
- {block:AskEnabled}
- <a href="/ask" class="nav-item"><span class="ti ti-message"></span> {AskLabel}</a>
- {/block:AskEnabled}
- {block:SubmissionsEnabled}
- <a href="/submit" class="nav-item"><span class="ti ti-paperclip"></span> {SubmitLabel}</a>
- {/block:SubmissionsEnabled}
- {block:HasPages}
- {block:Pages}
- <a href="{URL}" class="nav-item"><span class="ti ti-info-circle"></span> {Label}</a>
- {/block:Pages}
- {/block:HasPages}
- </nav>
- {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}
- </div>
- {block:IfCustomSidebarWidgetHTML}
- <div class="sidebar-divider"></div>
- <div class="custom-html-block">
- {text:Custom Sidebar Widget HTML}
- </div>
- {/block:IfCustomSidebarWidgetHTML}
- </div>
- </aside>
- </div>
- <main class="feed">
- {block:Posts}
- <article class="ig-card">
- <header class="card-header">
- <div class="user-info">
- {block:RebloggedFrom}
- <img src="{PortraitURL-64}" alt="{Name}">
- <a href="{BlogURL}">{Name}</a>
- <span class="ti ti-chevron-right"></span>
- <a href="{ReblogParentURL}">{ReblogParentName}</a>
- {/block:RebloggedFrom}
- {block:NotReblog}
- <img src="{PortraitURL-64}" alt="{Title}">
- <a href="{BlogURL}">{Name}</a>
- {/block:NotReblog}
- </div>
- {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}
- </header>
- <div class="card-content">
- {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}
- </div>
- <!-- ACTION BUTTON BAR -->
- <footer class="card-actions">
- <div class="action-group-left">
- <!-- Like Button -->
- <div class="action-item tumblr-btn-wrapper">
- <button class="action-btn" aria-label="Like"><span class="ti ti-heart"></span></button>
- {LikeButton}
- </div>
- <!-- Reblog Button -->
- <div class="action-item tumblr-btn-wrapper">
- <a href="{ReblogURL}" class="action-btn" aria-label="Reblog">
- <span class="ti ti-repeat"></span>
- </a>
- </div>
- <!-- Comment / Permalink Button -->
- <a href="{Permalink}#notes" class="action-btn" aria-label="Comment">
- <span class="ti ti-message-circle"></span>
- </a>
- </div>
- <div class="action-group-right">
- <!-- Share / Send Icon Moved to Right -->
- <button class="action-btn share-btn" type="button" data-url="{Permalink}" aria-label="Share Post">
- <span class="ti ti-send"></span>
- </button>
- </div>
- </footer>
- {block:HasTags}
- <div class="card-tags">
- {block:Tags}
- <a href="{TagURL}">#{Tag}</a>
- {/block:Tags}
- </div>
- {/block:HasTags}
- </article>
- {/block:Posts}
- {block:PermalinkPage}
- {block:PostNotes}
- <section class="ig-card" id="notes">
- <!-- FILTER TAB BUTTONS -->
- <div class="notes-tabs">
- <button class="action-btn active" type="button" data-tab="all">
- <span class="ti ti-list"></span> All
- </button>
- <button class="action-btn" 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}
- {block:Pagination}
- <nav class="pagination-card">
- {block:PreviousPage}
- <a href="{PreviousPage}" class="page-btn"><span class="ti ti-chevron-left"></span> Previous</a>
- {/block:PreviousPage}
- {block:IfNotPreviousPage}
- <span class="page-btn disabled"><span class="ti ti-chevron-left"></span> Previous</span>
- {/block:IfNotPreviousPage}
- <span>Page {CurrentPage} of {TotalPages}</span>
- {block:NextPage}
- <a href="{NextPage}" class="page-btn">Next <span class="ti ti-chevron-right"></span></a>
- {/block:NextPage}
- {block:IfNotNextPage}
- <span class="page-btn disabled">Next <span class="ti ti-chevron-right"></span></span>
- {/block:IfNotNextPage}
- </nav>
- {/block:Pagination}
- </main>
- </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. HOME BUTTON AND NAVIGATION HIGHLIGHTING
- const currentPath = window.location.pathname;
- const navLinks = document.querySelectorAll(".sidebar-nav .nav-item");
- navLinks.forEach(function(link) {
- const linkPath = link.getAttribute("href");
- if (currentPath === "/" || currentPath === "" || currentPath.startsWith("/page/")) {
- if (link.classList.contains("home-link")) {
- link.classList.add("active-nav");
- }
- } else if (currentPath === linkPath) {
- link.classList.add("active-nav");
- }
- });
- // 2. 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`;
- }
- const dateElements = document.querySelectorAll('.custom-date-format');
- dateElements.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');
- }
- });
- // 3. SHARE BUTTON LOGIC
- document.querySelectorAll('.share-btn').forEach(function(btn) {
- btn.addEventListener('click', function() {
- const url = this.getAttribute('data-url');
- if (navigator.share) {
- navigator.share({ title: document.title, url: url }).catch(() => {});
- } else {
- navigator.clipboard.writeText(url).then(() => {
- alert('Post link copied to clipboard!');
- });
- }
- });
- });
- // 4. NOTES TAB BUTTON TOGGLE
- (function () {
- function setupNotesTabs() {
- const notesCard = document.querySelector("#notes");
- if (!notesCard) return;
- const tabs = notesCard.querySelectorAll(".notes-tabs .action-btn");
- const notesContent = notesCard.querySelector(".notes-content");
- if (!tabs.length || !notesContent) return;
- function filterNotes(filter) {
- const notes = notesContent.querySelectorAll("ol.notes > li.note");
- notes.forEach(function (note) {
- /* --------------------------------
- Always keep "Show more notes"
- -------------------------------- */
- if (note.classList.contains("more_notes_link_container")) {
- note.style.removeProperty("display");
- return;
- }
- /* --------------------------------
- Likes / attribution
- Never show these in our tabs
- -------------------------------- */
- if (
- note.classList.contains("like") ||
- note.classList.contains("post_attribution")
- ) {
- note.style.setProperty("display", "none", "important");
- return;
- }
- /* --------------------------------
- ALL
- -------------------------------- */
- if (filter === "all") {
- note.style.setProperty("display", "", "important");
- return;
- }
- /* --------------------------------
- COMMENTS
- -------------------------------- */
- if (filter === "comments") {
- const isReply =
- note.classList.contains("reply");
- const isCommentaryReblog =
- note.classList.contains("reblog") &&
- !note.classList.contains("without_commentary");
- if (isReply || isCommentaryReblog) {
- note.style.setProperty("display", "", "important");
- } else {
- note.style.setProperty("display", "none", "important");
- }
- return;
- }
- /* --------------------------------
- REBLOGS
- -------------------------------- */
- if (filter === "reblogs") {
- const isReblog =
- note.classList.contains("reblog");
- if (isReblog) {
- note.style.setProperty("display", "", "important");
- } else {
- note.style.setProperty("display", "none", "important");
- }
- }
- });
- }
- /* --------------------------------
- TAB CLICK
- -------------------------------- */
- tabs.forEach(function (tab) {
- tab.addEventListener("click", function (event) {
- event.preventDefault();
- const filter = this.getAttribute("data-tab");
- /* Active button */
- tabs.forEach(function (button) {
- button.classList.remove("active");
- });
- this.classList.add("active");
- /* State classes */
- notesContent.classList.remove(
- "show-all",
- "show-comments",
- "show-reblogs"
- );
- notesContent.classList.add("show-" + filter);
- /* Filter */
- filterNotes(filter);
- });
- });
- /* --------------------------------
- DEFAULT = ALL
- -------------------------------- */
- filterNotes("all");
- /* --------------------------------
- WATCH FOR TUMBLR ADDING NOTES
- -------------------------------- */
- const observer = new MutationObserver(function () {
- const activeTab =
- notesCard.querySelector(".notes-tabs .action-btn.active");
- if (!activeTab) return;
- const filter =
- activeTab.getAttribute("data-tab");
- filterNotes(filter);
- });
- observer.observe(notesContent, {
- childList: true,
- subtree: true
- });
- }
- /* Run after page is ready */
- if (document.readyState === "loading") {
- document.addEventListener("DOMContentLoaded", setupNotesTabs);
- } else {
- setupNotesTabs();
- }
- })();
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment