cleandream23

DN Glass Theme

Sep 13th, 2026 (edited)
178
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 61.99 KB | Software | 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="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css" />
  10.  
  11. <meta name="image:Header" content=""/>
  12.  
  13. <meta name="color-scheme" content="light dark">
  14.  
  15. <!-- FONTS -->
  16. <link rel="preconnect" href="https://fonts.googleapis.com">
  17. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  18. <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">
  19.  
  20. <!-- WALLPAPER -->
  21. <meta name="select:Wallpaper Style" content="Gradient" title="Gradient">
  22. <meta name="select:Wallpaper Style" content="Image" title="Image">
  23. <meta name="select:Wallpaper Style" content="Plain" title="Plain">
  24.  
  25. <meta name="color:Wallpaper Color 1" content="#ffffff"/>
  26. <meta name="color:Wallpaper Color 2" content="#dbeafe"/>
  27.  
  28. <meta name="text:Wallpaper Image URL" content=""/>
  29.  
  30. <!-- Font Options -->
  31. <meta name="select:Primary Font" content="'Inter', sans-serif" title="Inter">
  32. <meta name="select:Primary Font" content="'Open Sans', sans-serif" title="Open Sans">
  33. <meta name="select:Primary Font" content="'Roboto', sans-serif" title="Roboto">
  34. <meta name="select:Primary Font" content="'Roboto Condensed', sans-serif" title="Roboto Condensed">
  35. <meta name="select:Primary Font" content="'DM Sans', sans-serif" title="DM Sans">
  36. <meta name="select:Primary Font" content="'Lato', sans-serif" title="Lato">
  37.  
  38. <!-- Date Format Options -->
  39. <meta name="select:Date Format" content="short" title="Short (12 Aug)">
  40. <meta name="select:Date Format" content="slashed" title="Slashed (08/12/2026)">
  41. <meta name="select:Date Format" content="full" title="Full (August 12th, 2026)">
  42. <meta name="select:Date Format" content="relative" title="Relative (2h ago)">
  43.  
  44. <!-- Layout Options -->
  45. <meta name="select:Image Border Radius" content="0px" title="Square (0px)">
  46. <meta name="select:Image Border Radius" content="6px" title="Slightly Rounded (6px)">
  47. <meta name="select:Image Border Radius" content="12px" title="Medium Rounded (12px)">
  48. <meta name="select:Image Border Radius" content="16px" title="Extra Rounded (16px)">
  49.  
  50. <meta name="select:Avatar Shape" content="50%" title="Circle">
  51. <meta name="select:Avatar Shape" content="12px" title="Rounded Square">
  52. <meta name="select:Avatar Shape" content="0px" title="Square">
  53. <meta name="color:Avatar Border Color" content="#e4e4e7"/>
  54.  
  55. <meta name="select:Post Width" content="540px" title="Default (540px)">
  56. <meta name="select:Post Width" content="480px" title="Compact (480px)">
  57. <meta name="select:Post Width" content="600px" title="Wide (600px)">
  58. <meta name="select:Post Width" content="650px" title="Extra Wide (650px)">
  59.  
  60. <!-- SINGLE THEME ACCENT COLOR -->
  61. <meta name="color:Accent Color" content="#0095f6"/>
  62.  
  63. <!-- Social Links -->
  64. <meta name="text:Instagram Username" content=""/>
  65. <meta name="text:Instagram URL" content=""/>
  66.  
  67. <meta name="text:Threads Username" content=""/>
  68. <meta name="text:Threads URL" content=""/>
  69.  
  70. <meta name="text:Twitter Username" content=""/>
  71. <meta name="text:Twitter URL" content=""/>
  72.  
  73. <meta name="text:TikTok Username" content=""/>
  74. <meta name="text:TikTok URL" content=""/>
  75.  
  76. <meta name="text:YouTube Username" content=""/>
  77. <meta name="text:YouTube URL" content=""/>
  78.  
  79. <meta name="text:GitHub Username" content=""/>
  80. <meta name="text:GitHub 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. Monochrome Palette + Single Accent Color
  89. ==================================== */
  90. :root {
  91. --wallpaper-image: url('{text:Wallpaper Image URL}');
  92.  
  93. --header-title-font: {select:Primary Font};
  94. --main-font: {select:Primary Font};
  95. --second-font: {select:Primary Font};
  96. --post-width: {select:Post Width};
  97. --img-border-radius: {select:Image Border Radius};
  98.  
  99. /* SINGLE ACCENT COLOR */
  100. --accent-color: {color:Accent Color};
  101.  
  102. /* MONOCHROME PALETTE */
  103. --bg-color-1: {color:Wallpaper Color 1};
  104. --bg-color-2: {color:Wallpaper Color 2};
  105. --card-bg: rgba(255, 255, 255, 0.67);
  106. --ask-bg: #f8f9fa87;
  107. --text-main: #18181b;
  108. --text-header-title: #09090b;
  109. --text-muted: #71717a;
  110. --border-color: #e4e4e7;
  111. --post-header-color: #18181b;
  112. --post-header-link: var(--accent-color);
  113. --tag-color: var(--accent-color);
  114.  
  115. /* Avatar Customizations */
  116. --avatar-radius: {select:Avatar Shape};
  117. --avatar-border-color: {color:Avatar Border Color};
  118.  
  119. /* Text Selection Colors */
  120. --selection-text: #ffffff;
  121. --selection-bg: var(--accent-color);
  122. }
  123.  
  124. * {
  125. box-sizing: border-box;
  126. margin: 0;
  127. padding: 0;
  128. }
  129.  
  130. /* CUSTOM TEXT SELECTION */
  131. ::selection {
  132. background-color: var(--selection-bg);
  133. color: var(--selection-text);
  134. }
  135.  
  136. ::-moz-selection {
  137. background-color: var(--selection-bg);
  138. color: var(--selection-text);
  139. }
  140.  
  141. body {
  142. color: var(--text-main);
  143. font-family: var(--main-font);
  144. min-height: 100vh;
  145. display: flex;
  146. flex-direction: column;
  147. align-items: center;
  148. padding: 40px 20px 80px;
  149.  
  150. background:
  151. linear-gradient(
  152. 135deg,
  153. var(--bg-color-1),
  154. var(--bg-color-2)
  155. );
  156.  
  157. background-attachment: fixed;
  158. background-size: cover;
  159. }
  160.  
  161. /* Wallpaper image override */
  162. body.has-wallpaper {
  163. background-image: url('{text:Wallpaper Image URL}');
  164. background-position: center;
  165. background-repeat: no-repeat;
  166. background-size: cover;
  167. background-attachment: fixed;
  168. }
  169.  
  170. /* ====================================
  171. NIGHT MODE
  172. ==================================== */
  173.  
  174. body.night-mode {
  175. --bg-color-1: {color:Wallpaper Color 1};
  176. --bg-color-2: {color:Wallpaper Color 2};
  177.  
  178. --card-bg: rgba(28, 28, 30, 0.67);
  179. --ask-bg: #2c2c2e95;
  180.  
  181. --text-main: #f5f5f7;
  182. --text-header-title: #ffffff;
  183. --text-muted: #98989d;
  184.  
  185. --border-color: #38383a;
  186.  
  187. --post-header-color: #f5f5f7;
  188. --post-header-link: var(--accent-color);
  189. --tag-color: var(--accent-color);
  190.  
  191. --selection-text: #000000;
  192. }
  193.  
  194. a {
  195. color: inherit;
  196. text-decoration: none;
  197. }
  198.  
  199. h1, h2, h3, h4, .post-title {
  200. font-family: var(--header-title-font);
  201. color: var(--text-header-title);
  202. }
  203.  
  204. .app-layout {
  205. display: flex;
  206. width: 100%;
  207. max-width: calc(290px + var(--post-width) + 30px);
  208. align-items: flex-start;
  209. margin-bottom: 24px;
  210. }
  211.  
  212. /* Glass Effect Utilities */
  213. .glass-card {
  214. background: var(--card-bg);
  215. backdrop-filter: blur(16px) saturate(140%);
  216. -webkit-backdrop-filter: blur(16px) saturate(140%);
  217. border: 1px solid var(--border-color);
  218. }
  219.  
  220. /* Hide Tumblr's injected navigation/control iframe */
  221. body > iframe.tmblr-iframe,
  222. body > iframe#tumblr_controls {
  223. display: none !important;
  224. }
  225.  
  226. /* ====================================
  227. SIDEBAR & SEARCH CARD
  228. ==================================== */
  229. .sidebar-wrapper {
  230. width: 290px;
  231. max-width: 290px;
  232. margin-right: 30px !important;
  233. position: sticky;
  234. top: 24px;
  235. align-self: flex-start;
  236. height: fit-content;
  237. }
  238.  
  239. .sidebar-wrapper > * + * {
  240. margin-top: 20px;
  241. }
  242.  
  243. .sidebar-card {
  244. border-radius: 12px;
  245. overflow: hidden;
  246. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  247. display: flex;
  248. flex-direction: column;
  249. }
  250.  
  251. /* HEADER BANNER IMAGE SUPPORT */
  252. .sidebar-banner {
  253. height: 130px;
  254. background-size: cover;
  255. background-position: center;
  256. background-color: var(--border-color);
  257. background-image: url('{HeaderImage}');
  258. }
  259.  
  260. .sidebar-profile {
  261. padding: 0 20px 20px;
  262. margin-top: -40px;
  263. display: flex;
  264. flex-direction: column;
  265. align-items: center;
  266. text-align: center;
  267. }
  268.  
  269. .sidebar-avatar img {
  270. width: 5.3rem;
  271. height: 5.3rem;
  272. border-radius: var(--avatar-radius);
  273. object-fit: cover;
  274. border: 3px solid var(--avatar-border-color);
  275. box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  276. }
  277.  
  278. .sidebar-title {
  279. font-size: 1.3rem;
  280. font-weight: 700;
  281. margin-top: 11px;
  282. }
  283.  
  284. .sidebar-desc {
  285. font-size: 0.85rem;
  286. color: var(--text-muted);
  287. line-height: 1.4;
  288. margin-top: 8px;
  289. font-family: var(--second-font);
  290. }
  291.  
  292. .sidebar-content-body {
  293. padding: 0 20px 20px;
  294. display: flex;
  295. flex-direction: column;
  296. gap: 16px;
  297. }
  298.  
  299. .sidebar-divider {
  300. height: 1px;
  301. background: var(--border-color);
  302. width: 85%;
  303. margin: 0 auto;
  304. }
  305.  
  306. .sidebar-pages-nav {
  307. display: flex;
  308. flex-direction: column;
  309. gap: 6px;
  310. }
  311.  
  312. .sidebar-pages-nav .nav-item {
  313. font-weight: 600;
  314. font-size: 0.95rem;
  315. padding: 8px 11px;
  316. border-radius: 6px;
  317. transition: all 0.2s ease;
  318. display: flex;
  319. align-items: center;
  320. gap: 8px;
  321. color: var(--text-main);
  322. font-family: var(--second-font);
  323. }
  324.  
  325. .sidebar-pages-nav .nav-item:hover {
  326. color: var(--accent-color) !important;
  327. background-color: var(--ask-bg);
  328. }
  329.  
  330. .sidebar-socials {
  331. display: flex;
  332. flex-direction: column;
  333. gap: 10px;
  334. }
  335.  
  336. .social-link {
  337. display: flex;
  338. align-items: center;
  339. gap: 10px;
  340. font-size: 0.9rem;
  341. font-family: var(--second-font);
  342. font-weight: 500;
  343. color: var(--text-main);
  344. padding: 6px 8px;
  345. border-radius: 6px;
  346. transition: color 0.2s;
  347. }
  348.  
  349. .social-link span.icon {
  350. font-size: 1.25rem;
  351. display: flex;
  352. align-items: center;
  353. justify-content: center;
  354. }
  355.  
  356. .social-link:hover {
  357. color: var(--accent-color);
  358. }
  359.  
  360. .custom-html-block {
  361. font-size: 0.85rem;
  362. color: var(--text-main);
  363. font-family: var(--second-font);
  364. line-height: 1.4;
  365. word-break: break-word;
  366. }
  367.  
  368. /* ====================================
  369. FEED & BASE POST CARDS
  370. ==================================== */
  371. .feed {
  372. flex: 1;
  373. width: var(--post-width);
  374. max-width: var(--post-width);
  375. min-width: 0;
  376. }
  377.  
  378. .ig-card {
  379. border-radius: 16px;
  380. margin-bottom: 28px;
  381. overflow: hidden;
  382. box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  383. position: relative;
  384. }
  385.  
  386. .card-header.ipados-header {
  387. display: flex;
  388. align-items: center;
  389. justify-content: space-between;
  390. padding: 12px 16px;
  391. gap: 5px;
  392. color: var(--post-header-color);
  393. position: relative;
  394. background: rgba(255, 255, 255, 0.03);
  395. }
  396.  
  397. .card-header::after {
  398. content: "";
  399. position: absolute;
  400. bottom: 0;
  401. left: 5%;
  402. width: 90%;
  403. height: 1px;
  404. background-color: var(--border-color);
  405. }
  406.  
  407. .header-left,
  408. .header-right {
  409. display: flex;
  410. align-items: center;
  411. gap: 5px;
  412. }
  413.  
  414. .dot-menu-indicator {
  415. display: flex;
  416. flex-direction: row;
  417. align-items: center;
  418. justify-content: center;
  419. gap: 8px;
  420. height: 28px;
  421. padding: 0 10px;
  422. border-radius: 14px;
  423. background: var(--ask-bg);
  424. border: 1px solid var(--border-color);
  425. }
  426.  
  427. .dot-menu-indicator .dot {
  428. width: 5px;
  429. height: 5px;
  430. border-radius: 50%;
  431. flex-shrink: 0;
  432. background-color: var(--text-muted);
  433. opacity: 0.6;
  434. }
  435.  
  436. .dot-menu-indicator .dot-close {
  437. background-color: #ff7d56;
  438. opacity: 1;
  439. }
  440.  
  441. .dot-menu-indicator .dot-minimize {
  442. background-color: #f7c734;
  443. opacity: 1;
  444. }
  445.  
  446. .dot-menu-indicator .dot-maximize {
  447. background-color: #29cba8;
  448. opacity: 1;
  449. }
  450.  
  451. .header-dropdown-details {
  452. position: relative;
  453. display: inline-block;
  454. }
  455.  
  456. .header-dropdown-details summary {
  457. list-style: none;
  458. cursor: pointer;
  459. }
  460.  
  461. .header-dropdown-details summary::-webkit-details-marker {
  462. display: none;
  463. }
  464.  
  465. .title-pill {
  466. display: flex;
  467. align-items: center;
  468. gap: 6px;
  469. padding: 4px 12px;
  470. border-radius: 20px;
  471. background: var(--ask-bg);
  472. border: 1px solid var(--border-color);
  473. font-size: 0.85rem;
  474. font-weight: 600;
  475. transition: background-color 0.2s ease;
  476. }
  477.  
  478. .title-pill:hover {
  479. background: var(--border-color);
  480. }
  481.  
  482. .title-pill .reblog-arrow {
  483. font-size: 0.8rem;
  484. color: var(--text-muted);
  485. }
  486.  
  487. .title-pill .chevron-icon {
  488. font-size: 0.85rem;
  489. color: var(--text-muted);
  490. }
  491.  
  492. .header-popover {
  493. position: absolute;
  494. top: calc(100% + 8px);
  495. left: 50%;
  496. transform: translateX(-50%);
  497. padding: 10px 14px;
  498. border-radius: 12px;
  499. box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  500. z-index: 20;
  501. white-space: nowrap;
  502. display: flex;
  503. flex-direction: column;
  504. align-items: center;
  505. gap: 2px;
  506. }
  507.  
  508. .popover-label {
  509. font-size: 0.7rem;
  510. text-transform: uppercase;
  511. letter-spacing: 0.5px;
  512. color: var(--text-muted);
  513. }
  514.  
  515. .card-header .post-date {
  516. font-size: 0.8rem;
  517. color: var(--accent-color);
  518. font-weight: 600;
  519. font-family: var(--second-font);
  520. }
  521.  
  522. .card-content img,
  523. .reblog-content-body img {
  524. width: 100%;
  525. display: block;
  526. height: auto;
  527. border-radius: var(--img-border-radius);
  528. }
  529.  
  530. .html_photoset {
  531. width: 100% !important;
  532. max-width: 100% !important;
  533. border-radius: var(--img-border-radius);
  534. }
  535.  
  536. .card-text-body {
  537. padding: 16px;
  538. font-size: 0.95rem;
  539. line-height: 1.5;
  540. font-family: var(--main-font);
  541. }
  542.  
  543. .card-text-body h3, .card-text-body h1, .card-text-body h2 {
  544. font-family: var(--header-title-font);
  545. color: var(--text-header-title);
  546. margin-bottom: 8px;
  547. }
  548.  
  549. .read_more, a.read_more, .read-more, a.read-more, .read-more-btn {
  550. display: flex;
  551. align-items: center;
  552. justify-content: center;
  553. margin: 16px auto 8px auto;
  554. width: fit-content;
  555. padding: 8px 18px;
  556. background: var(--ask-bg);
  557. border: 1px solid var(--border-color);
  558. border-radius: 20px;
  559. color: var(--accent-color) !important;
  560. font-weight: 600;
  561. font-size: 0.85rem;
  562. font-family: var(--second-font);
  563. transition: all 0.2s ease;
  564. text-align: center;
  565. }
  566.  
  567. .read_more:hover, a.read_more:hover, .read-more:hover, a.read-more:hover, .read-more-btn:hover {
  568. background: var(--border-color);
  569. }
  570.  
  571. .card-content iframe,
  572. .reblog-content-body iframe,
  573. .tumblr_video_container iframe,
  574. iframe.tumblr_audio_player {
  575. max-width: 100% !important;
  576. border-radius: var(--img-border-radius);
  577. }
  578.  
  579. .tumblr_video_container {
  580. width: 100% !important;
  581. height: auto !important;
  582. aspect-ratio: 16 / 9;
  583. margin: 10px 0;
  584. overflow: hidden;
  585. border-radius: var(--img-border-radius);
  586. }
  587.  
  588. .tumblr_video_container iframe {
  589. width: 100% !important;
  590. height: 100% !important;
  591. }
  592.  
  593. .tumblr_parent, .np_link_embed, a.tumblr-link-anchor {
  594. display: block !important;
  595. background: var(--ask-bg) !important;
  596. border: 1px solid var(--border-color) !important;
  597. border-radius: var(--img-border-radius) !important;
  598. margin: 12px 0 !important;
  599. text-decoration: none !important;
  600. overflow: hidden !important;
  601. transition: border-color 0.2s ease, background-color 0.2s ease;
  602. }
  603.  
  604. .tumblr_parent:hover, a.tumblr-link-anchor:hover {
  605. border-color: var(--accent-color) !important;
  606. }
  607.  
  608. .tumblr-link-card, .np_link_embed {
  609. display: flex;
  610. flex-direction: column;
  611. }
  612.  
  613. .tumblr-link-card .link-asset, .np_link_embed .link-asset img {
  614. width: 100%;
  615. height: auto;
  616. max-height: 280px;
  617. object-fit: cover;
  618. }
  619.  
  620. .tumblr-link-card .link-summary, .np_link_embed .link-summary {
  621. padding: 14px;
  622. }
  623.  
  624. .tumblr-link-card .link-title, .np_link_embed .link-title {
  625. font-family: var(--header-title-font);
  626. font-size: 1.05rem;
  627. font-weight: 700;
  628. color: var(--text-header-title);
  629. margin-bottom: 6px;
  630. }
  631.  
  632. .tumblr-link-card .link-description, .np_link_embed .link-description {
  633. font-size: 0.85rem;
  634. color: var(--text-muted);
  635. font-family: var(--second-font);
  636. line-height: 1.4;
  637. margin-bottom: 8px;
  638. }
  639.  
  640. .tumblr-link-card .link-site-name, .np_link_embed .link-site-name {
  641. font-size: 0.75rem;
  642. font-family: var(--second-font);
  643. color: var(--accent-color);
  644. text-transform: uppercase;
  645. font-weight: 600;
  646. letter-spacing: 0.5px;
  647. }
  648.  
  649. /* ====================================
  650. CUSTOM RICH TEXT & CONTENT FORMATTING
  651. ==================================== */
  652. .quote-text,
  653. .quote-source,
  654. .reblog-content-body blockquote.np_quote,
  655. .card-text-body blockquote.np_quote,
  656. .chat-teaser,
  657. .np_chat,
  658. .reblog-content-body .chat,
  659. .card-text-body .chat,
  660. ul.chat,
  661. li.chat-line {
  662. font-family: var(--second-font) !important;
  663. }
  664.  
  665. .card-text-body blockquote,
  666. .reblog-content-body blockquote {
  667. background: var(--ask-bg) !important;
  668. border: 1px solid var(--border-color) !important;
  669. border-left: 1px solid var(--border-color) !important;
  670. border-radius: 8px !important;
  671. padding: 14px 16px !important;
  672. margin: 12px 0 !important;
  673. box-shadow: none !important;
  674. }
  675.  
  676. .card-text-body ul,
  677. .card-text-body ol,
  678. .reblog-content-body ul,
  679. .reblog-content-body ol {
  680. padding-left: 24px !important;
  681. margin: 12px 0 !important;
  682. }
  683.  
  684. .card-text-body li,
  685. .reblog-content-body li {
  686. margin-bottom: 6px;
  687. padding-left: 4px;
  688. }
  689.  
  690. .card-text-body li:last-child,
  691. .reblog-content-body li:last-child {
  692. margin-bottom: 0;
  693. }
  694.  
  695. .reblog-list {
  696. display: flex;
  697. flex-direction: column;
  698. }
  699.  
  700. .reblog-item {
  701. padding: 16px;
  702. position: relative;
  703. }
  704.  
  705. .reblog-item::after {
  706. content: "";
  707. position: absolute;
  708. bottom: 0;
  709. left: 7.5%;
  710. width: 85%;
  711. height: 1px;
  712. background-color: var(--border-color);
  713. }
  714.  
  715. .reblog-list:not(:has(~ .reblog-list)) .reblog-item::after {
  716. display: none;
  717. }
  718.  
  719. .reblog-item-header {
  720. display: flex;
  721. align-items: center;
  722. justify-content: space-between;
  723. margin-bottom: 12px;
  724. }
  725.  
  726. .reblog-user {
  727. display: flex;
  728. align-items: center;
  729. gap: 10px;
  730. font-weight: 600;
  731. font-size: 0.9rem;
  732. }
  733.  
  734. .reblog-user img {
  735. width: 28px;
  736. height: 28px;
  737. border-radius: 50%;
  738. object-fit: cover;
  739. }
  740.  
  741. .reblog-user a {
  742. color: var(--accent-color);
  743. }
  744.  
  745. .reblog-user .deactivated {
  746. color: var(--text-muted);
  747. font-style: italic;
  748. }
  749.  
  750. .reblog-content-body {
  751. font-size: 0.93rem;
  752. line-height: 1.5;
  753. font-family: var(--main-font);
  754. color: var(--text-main);
  755. }
  756.  
  757. .reblog-content-body h1, .reblog-content-body h2, .reblog-content-body h3 {
  758. font-family: var(--header-title-font);
  759. color: var(--text-header-title);
  760. margin-bottom: 8px;
  761. }
  762.  
  763. .reblog-content-body p {
  764. margin-bottom: 10px;
  765. }
  766.  
  767. .reblog-content-body p:last-child {
  768. margin-bottom: 0;
  769. }
  770.  
  771. .ask-box {
  772. background: var(--ask-bg);
  773. border-left: 5px solid var(--accent-color);
  774. margin: 16px 16px 0;
  775. border-radius: 8px;
  776. padding: 16px;
  777. }
  778.  
  779. .asker-info {
  780. display: flex;
  781. align-items: center;
  782. gap: 10px;
  783. font-family: var(--second-font);
  784. font-weight: 600;
  785. font-size: 0.9rem;
  786. margin-bottom: 10px;
  787. }
  788.  
  789. .asker-info img {
  790. width: 28px;
  791. height: 28px;
  792. border-radius: 50%;
  793. }
  794.  
  795. .asker-info span {
  796. color: var(--text-muted);
  797. font-weight: 400;
  798. font-size: 0.85rem;
  799. }
  800.  
  801. .ask-question {
  802. font-size: 0.95rem;
  803. font-weight: 500;
  804. line-height: 1.4;
  805. color: var(--text-main);
  806. padding-left: 38px;
  807. font-family: var(--second-font);
  808. }
  809.  
  810. .ask-answer {
  811. padding: 16px;
  812. font-size: 0.95rem;
  813. line-height: 1.5;
  814. font-family: var(--main-font);
  815. }
  816.  
  817. .ask-answer > blockquote:first-of-type ~ * {
  818. display: none;
  819. }
  820.  
  821. .ig-card:has(.reblog-list) .fallback-text-body {
  822. display: none;
  823. }
  824.  
  825. .quote-body {
  826. padding: 24px 20px 20px;
  827. text-align: center;
  828. }
  829.  
  830. .quote-text {
  831. font-family: var(--header-title-font);
  832. font-size: 1.3rem;
  833. line-height: 1.4;
  834. color: var(--text-header-title);
  835. margin-bottom: 12px;
  836. }
  837.  
  838. .quote-source {
  839. font-size: 0.88rem;
  840. color: var(--text-muted);
  841. font-style: italic;
  842. font-family: var(--second-font);
  843. }
  844.  
  845. .quote-source::before {
  846. content: "— ";
  847. }
  848.  
  849. /* ====================================
  850. IPADOS FLOATING TOOLBAR CAPSULE
  851. ==================================== */
  852. .ipados-toolbar-wrapper {
  853. padding: 12px 16px 16px;
  854. display: flex;
  855. justify-content: center;
  856. }
  857.  
  858. .card-actions {
  859. display: flex;
  860. align-items: center;
  861. justify-content: space-between;
  862. width: 100%;
  863. }
  864.  
  865. .card-actions.ipados-toolbar {
  866. display: flex;
  867. align-items: center;
  868. justify-content: space-between;
  869. width: 100%;
  870. padding: 6px 14px;
  871. background: var(--ask-bg);
  872. border: 1px solid var(--border-color);
  873. border-radius: 30px;
  874. box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  875. position: relative;
  876. }
  877.  
  878. .action-group-left,
  879. .action-group-right {
  880. display: flex;
  881. align-items: center;
  882. gap: 12px;
  883. }
  884.  
  885. .tool-group {
  886. display: flex;
  887. align-items: center;
  888. gap: 12px;
  889. }
  890.  
  891. .tool-btn {
  892. display: flex;
  893. align-items: center;
  894. justify-content: center;
  895. width: 34px;
  896. height: 34px;
  897. border-radius: 50%;
  898. transition: background-color 0.2s ease, color 0.2s ease;
  899. }
  900.  
  901. .tool-btn:hover {
  902. background-color: var(--border-color);
  903. }
  904.  
  905. .tool-icon {
  906. font-size: 1.2rem;
  907. }
  908.  
  909. .header-btn {
  910. background: var(--ask-bg);
  911. border: 1px solid var(--border-color);
  912. color: inherit;
  913. }
  914.  
  915. .header-btn:hover,
  916. .action-btn:hover,
  917. .action-btn.active {
  918. color: var(--accent-color);
  919. }
  920.  
  921. .action-btn {
  922. background: none;
  923. border: none;
  924. cursor: pointer;
  925. display: flex;
  926. align-items: center;
  927. justify-content: center;
  928. padding: 4px;
  929. border-radius: 50%;
  930. color: inherit;
  931. transition: color 0.2s;
  932. }
  933.  
  934. .action-item:hover .action-btn, .action-btn:hover, .action-btn.active {
  935. color: var(--accent-color);
  936. }
  937.  
  938. .tumblr-btn-wrapper {
  939. position: relative;
  940. display: flex;
  941. align-items: center;
  942. justify-content: center;
  943. }
  944.  
  945. .action-item iframe {
  946. filter: grayscale(100%) opacity(0.7);
  947. transition: filter 0.2s ease;
  948. }
  949.  
  950. .action-item:hover iframe {
  951. filter: none;
  952. }
  953.  
  954. .tumblr-btn-wrapper iframe {
  955. position: absolute;
  956. top: 0;
  957. left: 0;
  958. width: 100%;
  959. height: 100%;
  960. opacity: 0.0001;
  961. z-index: 2;
  962. cursor: pointer;
  963. }
  964.  
  965. .popover-details {
  966. position: relative;
  967. }
  968.  
  969. .popover-details summary {
  970. list-style: none;
  971. cursor: pointer;
  972. }
  973.  
  974. .popover-details summary::-webkit-details-marker {
  975. display: none;
  976. }
  977.  
  978. .ipados-tag-popover {
  979. position: absolute;
  980. bottom: calc(100% + 10px);
  981. right: 0;
  982. width: 240px;
  983. padding: 12px;
  984. border-radius: 12px;
  985. box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  986. z-index: 20;
  987. }
  988.  
  989. .popover-header {
  990. font-size: 0.75rem;
  991. font-weight: 700;
  992. text-transform: uppercase;
  993. color: var(--text-muted);
  994. margin-bottom: 8px;
  995. }
  996.  
  997. .card-tags {
  998. font-size: 0.85rem;
  999. line-height: 1.5;
  1000. display: flex;
  1001. flex-wrap: wrap;
  1002. gap: 4px;
  1003. }
  1004.  
  1005. .card-tags a {
  1006. font-family: var(--second-font);
  1007. color: var(--tag-color);
  1008. }
  1009.  
  1010. /* ====================================
  1011. NOTES
  1012. ==================================== */
  1013. #notes {
  1014. padding: 16px;
  1015. }
  1016.  
  1017. .notes-content{
  1018. width: 100%;
  1019. }
  1020.  
  1021. /* ------------------------------------
  1022. TAB BAR
  1023. ------------------------------------ */
  1024.  
  1025. .notes-tabs {
  1026. display: flex;
  1027. gap: 8px;
  1028. padding-bottom: 12px;
  1029. margin-bottom: 16px;
  1030. border-bottom: 1px solid var(--border-color);
  1031. }
  1032.  
  1033. .notes-tabs .action-btn {
  1034. font-family: var(--second-font);
  1035. font-size: 0.85rem;
  1036. font-weight: 600;
  1037. display: flex;
  1038. align-items: center;
  1039. gap: 6px;
  1040. padding: 6px 12px;
  1041. border: none;
  1042. border-radius: 20px;
  1043. color: var(--text-muted);
  1044. background: transparent;
  1045. cursor: pointer;
  1046. transition:
  1047. color 0.2s ease,
  1048. background-color 0.2s ease;
  1049. }
  1050.  
  1051. .notes-tabs .action-btn:hover,
  1052. .notes-tabs .action-btn.active {
  1053. color: var(--post-header-link);
  1054. background-color: var(--ask-bg);
  1055. }
  1056.  
  1057. .notes-content ol.notes {
  1058. margin: 0;
  1059. padding: 0;
  1060. list-style: none;
  1061. }
  1062.  
  1063. .notes-content ol.notes li.note {
  1064. margin: 0;
  1065. padding: 12px 0;
  1066. list-style: none;
  1067. border-bottom: 1px solid var(--border-color);
  1068. }
  1069.  
  1070. .notes-content ol.notes li.note:last-child {
  1071. border-bottom: none;
  1072. }
  1073.  
  1074. .notes-content ol.notes li.note img.avatar {
  1075. width: 22px;
  1076. height: 22px;
  1077. margin: 0 8px 0 0;
  1078. border-radius: 50%;
  1079. object-fit: cover;
  1080. }
  1081.  
  1082. /* Keep the notes list readable */
  1083. .notes-content ol.notes li.note a {
  1084. color: var(--post-header-link);
  1085. }
  1086.  
  1087. /* ------------------------------------
  1088. ALWAYS HIDE LIKES
  1089. ------------------------------------ */
  1090.  
  1091. .notes-content ol.notes > li.note.like {
  1092. display: none !important;
  1093. }
  1094.  
  1095.  
  1096. /* ------------------------------------
  1097. COMMENTS / REPLIES
  1098. ------------------------------------ */
  1099.  
  1100. .notes-content.show-comments ol.notes > li.note:not(.reply) {
  1101. display: none;
  1102. }
  1103.  
  1104. .notes-content.show-comments ol.notes > li.note.reply {
  1105. display: block;
  1106. }
  1107.  
  1108. /* ------------------------------------
  1109. REBLOGS
  1110. ------------------------------------ */
  1111.  
  1112. .notes-content.show-reblogs ol.notes > li.note:not(.reblog) {
  1113. display: none;
  1114. }
  1115.  
  1116. .notes-content.show-reblogs ol.notes > li.note.reblog {
  1117. display: block;
  1118. }
  1119.  
  1120.  
  1121. /* ------------------------------------
  1122. REPLY CONTENT
  1123. ------------------------------------ */
  1124.  
  1125. .notes-content ol.notes li.note.reply .answer_content {
  1126. display: block;
  1127. margin-top: 8px;
  1128. padding: 10px 12px;
  1129. border-radius: 10px;
  1130. background: var(--ask-bg);
  1131. color: var(--text-main);
  1132. }
  1133.  
  1134. /* ------------------------------------
  1135. NOTE LINKS
  1136. ------------------------------------ */
  1137.  
  1138. .notes-content ol.notes li.note a {
  1139. color: var(--post-header-link);
  1140. }
  1141.  
  1142.  
  1143. /* ------------------------------------
  1144. MORE NOTES
  1145. ------------------------------------ */
  1146.  
  1147. .notes-content ol.notes li.more_notes_link_container {
  1148. display: block;
  1149. padding-top: 16px;
  1150. text-align: center;
  1151. border-bottom: none;
  1152. }
  1153.  
  1154. /* ====================================
  1155. NEW FLOATING NAV & PAGINATION ADDITIONS
  1156. ==================================== */
  1157.  
  1158. /* ====================================
  1159. FLOATING PAGINATION
  1160. ==================================== */
  1161.  
  1162. .sticky-pagination-capsule {
  1163. position: fixed;
  1164. top: 30%;
  1165. right: 20px;
  1166. transform: translateY(-50%);
  1167. z-index: 9998;
  1168. display: flex;
  1169. flex-direction: column;
  1170. align-items: center;
  1171. gap: 8px;
  1172. width: 44px;
  1173. padding: 8px 6px;
  1174. border-radius: 24px;
  1175. box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  1176. font-weight: 700;
  1177. font-size: 0.9rem;
  1178. }
  1179.  
  1180. .sticky-pagination-capsule .page-arrow {
  1181. display: flex;
  1182. align-items: center;
  1183. justify-content: center;
  1184.  
  1185. width: 32px;
  1186. height: 28px;
  1187.  
  1188. color: var(--accent-color);
  1189. font-size: 1rem;
  1190.  
  1191. border-radius: 50%;
  1192.  
  1193. transition:
  1194. background-color 0.2s ease,
  1195. opacity 0.2s ease;
  1196. }
  1197.  
  1198. .sticky-pagination-capsule .page-arrow:hover {
  1199. background-color: var(--ask-bg);
  1200. }
  1201.  
  1202. .sticky-pagination-capsule .page-arrow.disabled {
  1203. color: var(--text-muted);
  1204. opacity: 0.35;
  1205. pointer-events: none;
  1206. }
  1207.  
  1208. .sticky-pagination-capsule .page-number {
  1209. color: var(--text-main);
  1210. font-family: var(--second-font);
  1211. font-size: 0.8rem;
  1212. line-height: 1;
  1213. }
  1214.  
  1215. /* ====================================
  1216. FLOATING NAVIGATION
  1217. ==================================== */
  1218.  
  1219. #floating-nav-container {
  1220. position: fixed;
  1221. right: 20px;
  1222. bottom: 20px;
  1223. z-index: 9999;
  1224. }
  1225.  
  1226. .glass-circle-btn {
  1227. width: 44px;
  1228. height: 44px;
  1229.  
  1230. border-radius: 50%;
  1231.  
  1232. background: var(--card-bg);
  1233.  
  1234. backdrop-filter: blur(16px) saturate(140%);
  1235. -webkit-backdrop-filter: blur(16px);
  1236.  
  1237. border: 1px solid var(--border-color);
  1238.  
  1239. display: flex;
  1240. align-items: center;
  1241. justify-content: center;
  1242.  
  1243. box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  1244.  
  1245. color: var(--text-main);
  1246. }
  1247.  
  1248. #popup-nav-menu {
  1249. position: absolute;
  1250.  
  1251. bottom: calc(100% + 10px);
  1252. right: 0;
  1253.  
  1254. width: 44px;
  1255. min-width: 44px;
  1256. max-width: 44px;
  1257.  
  1258. padding: 6px;
  1259.  
  1260. border-radius: 24px;
  1261.  
  1262. display: flex;
  1263. flex-direction: column;
  1264. gap: 4px;
  1265.  
  1266. box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  1267.  
  1268. transform-origin: bottom right;
  1269.  
  1270. animation: menuPopupFade 0.2s ease;
  1271. }
  1272.  
  1273. @keyframes menuPopupFade {
  1274. from { opacity: 0; transform: scale(0.95) translateY(10px); }
  1275. to { opacity: 1; transform: scale(1) translateY(0); }
  1276. }
  1277.  
  1278. #popup-nav-menu .nav-item {
  1279. position: relative;
  1280.  
  1281. width: 32px;
  1282. min-width: 32px;
  1283. height: 32px;
  1284.  
  1285. padding: 0;
  1286.  
  1287. display: flex;
  1288. align-items: center;
  1289. justify-content: center;
  1290.  
  1291. border-radius: 50%;
  1292.  
  1293. color: var(--text-main);
  1294. background: transparent;
  1295. border: none;
  1296.  
  1297. cursor: pointer;
  1298.  
  1299. transition:
  1300. background-color 0.2s ease,
  1301. color 0.2s ease;
  1302. }
  1303.  
  1304. #popup-nav-menu .nav-icon {
  1305. flex-shrink: 0;
  1306.  
  1307. width: 20px;
  1308.  
  1309. display: flex;
  1310. align-items: center;
  1311. justify-content: center;
  1312.  
  1313. font-size: 1.1rem;
  1314.  
  1315. color: var(--accent-color);
  1316. }
  1317.  
  1318. #popup-nav-menu .nav-label {
  1319. position: absolute;
  1320.  
  1321. right: calc(100% + 8px);
  1322.  
  1323. white-space: nowrap;
  1324.  
  1325. padding: 5px 9px;
  1326.  
  1327. border-radius: 15px;
  1328.  
  1329. background: var(--card-bg);
  1330. border: 1px solid var(--border-color);
  1331.  
  1332. box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  1333.  
  1334. color: var(--text-main);
  1335.  
  1336. opacity: 0;
  1337. pointer-events: none;
  1338.  
  1339. transform: translateX(5px);
  1340.  
  1341. transition:
  1342. opacity 0.2s ease,
  1343. transform 0.2s ease;
  1344. }
  1345.  
  1346. #popup-nav-menu .nav-item:hover .nav-label,
  1347. #popup-nav-menu .nav-item:focus-visible .nav-label {
  1348. opacity: 1;
  1349. transform: translateX(0);
  1350. }
  1351.  
  1352. #popup-nav-menu .nav-item:hover,
  1353. #popup-nav-menu .nav-item.active-nav {
  1354. background: var(--ask-bg);
  1355. color: var(--accent-color);
  1356. }
  1357.  
  1358. /* Liquid Glass Search Modal Overlay */
  1359. .glass-modal-overlay {
  1360. position: fixed;
  1361. top: 0;
  1362. left: 0;
  1363. width: 100vw;
  1364. height: 100vh;
  1365. background: rgba(0, 0, 0, 0.3);
  1366. backdrop-filter: blur(8px);
  1367. -webkit-backdrop-filter: blur(8px);
  1368. display: flex;
  1369. align-items: center;
  1370. justify-content: center;
  1371. z-index: 10000;
  1372. opacity: 0;
  1373. pointer-events: none;
  1374. transition: opacity 0.25s ease;
  1375. }
  1376.  
  1377. .glass-modal-overlay.is-active {
  1378. opacity: 1;
  1379. pointer-events: auto;
  1380. }
  1381.  
  1382. .liquid-search-card {
  1383. width: 90%;
  1384. max-width: 500px;
  1385. border-radius: 16px;
  1386. padding: 16px;
  1387. box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  1388. transform: scale(0.95);
  1389. transition: transform 0.25s ease;
  1390. }
  1391.  
  1392. .glass-modal-overlay.is-active .liquid-search-card {
  1393. transform: scale(1);
  1394. }
  1395.  
  1396. .search-modal-header {
  1397. display: flex;
  1398. align-items: center;
  1399. gap: 10px;
  1400. padding-bottom: 12px;
  1401. border-bottom: 1px solid var(--border-color);
  1402. }
  1403.  
  1404. .search-modal-icon {
  1405. font-size: 1.2rem;
  1406. color: var(--accent-color);
  1407. }
  1408.  
  1409. .search-modal-form {
  1410. flex: 1;
  1411. }
  1412.  
  1413. #search-modal-input {
  1414. width: 100%;
  1415. border: none;
  1416. background: transparent;
  1417. font-family: var(--second-font);
  1418. font-size: 1rem;
  1419. color: var(--text-main);
  1420. outline: none;
  1421. }
  1422.  
  1423. #search-modal-input::placeholder {
  1424. color: var(--text-muted);
  1425. }
  1426.  
  1427. .close-modal-btn {
  1428. background: transparent;
  1429. border: none;
  1430. cursor: pointer;
  1431. color: var(--text-muted);
  1432. font-size: 1.1rem;
  1433. padding: 4px;
  1434. border-radius: 50%;
  1435. display: flex;
  1436. align-items: center;
  1437. justify-content: center;
  1438. transition: background-color 0.2s, color 0.2s;
  1439. }
  1440.  
  1441. .close-modal-btn:hover {
  1442. background: var(--border-color);
  1443. color: var(--text-main);
  1444. }
  1445.  
  1446. .search-recommendations {
  1447. padding-top: 12px;
  1448. }
  1449.  
  1450. .recommendations-title {
  1451. font-size: 0.75rem;
  1452. text-transform: uppercase;
  1453. letter-spacing: 0.5px;
  1454. color: var(--text-muted);
  1455. font-weight: 700;
  1456. margin-bottom: 8px;
  1457. }
  1458.  
  1459. .recommendations-list {
  1460. display: flex;
  1461. flex-direction: column;
  1462. gap: 4px;
  1463. }
  1464.  
  1465. .rec-item {
  1466. display: flex;
  1467. align-items: center;
  1468. gap: 8px;
  1469. padding: 8px 10px;
  1470. border-radius: 6px;
  1471. font-size: 0.88rem;
  1472. font-family: var(--second-font);
  1473. color: var(--text-main);
  1474. transition: background-color 0.2s, color 0.2s;
  1475. }
  1476.  
  1477. .rec-item:hover {
  1478. background: var(--ask-bg);
  1479. color: var(--accent-color);
  1480. }
  1481.  
  1482. .site-footer-card {
  1483. width: 100%;
  1484. max-width: calc(290px + var(--post-width) + 30px);
  1485. background: var(--card-bg);
  1486. border: 1px solid var(--border-color);
  1487. border-radius: 12px;
  1488. padding: 18px 24px;
  1489. text-align: center;
  1490. font-size: 0.85rem;
  1491. color: var(--text-muted);
  1492. font-family: var(--second-font);
  1493. line-height: 1.5;
  1494. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  1495. }
  1496.  
  1497. /* ====================================
  1498. RESPONSIVE (MOBILE) VIEWPORT
  1499. ==================================== */
  1500. @media (max-width: 820px) {
  1501. .app-layout, .site-footer-card {
  1502. width: 100% !important;
  1503. max-width: 100% !important;
  1504. margin-right: 0 !important;
  1505. }
  1506.  
  1507. .app-layout {
  1508. flex-direction: column;
  1509. align-items: center;
  1510. }
  1511.  
  1512. .sidebar-wrapper, .feed {
  1513. width: 100% !important;
  1514. max-width: 100% !important;
  1515. }
  1516.  
  1517. .sidebar-wrapper {
  1518. position: relative;
  1519. margin-right: 0 !important;
  1520. min-width: 100% !important;
  1521. margin-bottom: 44px !important;
  1522. }
  1523.  
  1524. /* Convert desktop vertical pagination into horizontal pill attached next to floating button */
  1525. .sticky-pagination-capsule {
  1526. position: fixed;
  1527. top: auto;
  1528. left: 11%;
  1529. bottom: 20px;
  1530. transform: none;
  1531. z-index: 9998;
  1532. display: inline-flex;
  1533. flex-direction: row;
  1534. align-items: center;
  1535. justify-content: center;
  1536. gap: 2px;
  1537. padding: 4px;
  1538. border-radius: 40px;
  1539. width: fit-content;
  1540. height: fit-content;
  1541. }
  1542.  
  1543. .sticky-pagination-capsule .page-arrow {
  1544. width: 28px;
  1545. height: 28px;
  1546. padding: 0;
  1547. display: flex;
  1548. align-items: center;
  1549. justify-content: center;
  1550. font-size: 1rem;
  1551. flex-shrink: 0;
  1552. }
  1553.  
  1554. .sticky-pagination-capsule .page-number {
  1555. min-width: 20px;
  1556. height: 30px;
  1557. display: flex;
  1558. align-items: center;
  1559. justify-content: center;
  1560. text-align: center;
  1561. }
  1562. }
  1563.  
  1564. /* ====================================
  1565. LANDSCAPE MOBILE NAVIGATION
  1566. Horizontal popup beside the button
  1567. ==================================== */
  1568.  
  1569. @media (max-width: 820px) and (orientation: landscape) {
  1570.  
  1571. #popup-nav-menu {
  1572. bottom: 0;
  1573. right: calc(100% + 10px);
  1574.  
  1575. width: auto;
  1576. min-width: 0;
  1577. max-width: none;
  1578.  
  1579. height: 40px;
  1580.  
  1581. padding: 4px 6px;
  1582.  
  1583. display: flex;
  1584. flex-direction: row;
  1585. align-items: center;
  1586. justify-content: center;
  1587.  
  1588. gap: 2px;
  1589.  
  1590. border-radius: 22px;
  1591.  
  1592. transform-origin: right center;
  1593. }
  1594.  
  1595. #popup-nav-menu .nav-item {
  1596. width: 32px;
  1597. min-width: 32px;
  1598. height: 32px;
  1599.  
  1600. flex-shrink: 0;
  1601. }
  1602.  
  1603. #popup-nav-menu .nav-label {
  1604. right: auto;
  1605. bottom: calc(100% + 8px);
  1606.  
  1607. transform: translateY(5px);
  1608. }
  1609.  
  1610. #popup-nav-menu .nav-item:hover .nav-label,
  1611. #popup-nav-menu .nav-item:focus-visible .nav-label {
  1612. transform: translateY(0);
  1613. }
  1614. }
  1615. </style>
  1616. </head>
  1617. <body>
  1618.  
  1619. <div class="app-layout">
  1620.  
  1621. <!-- Sidebar Wrapper -->
  1622. <div class="sidebar-wrapper">
  1623. <aside class="sidebar-card glass-card">
  1624.  
  1625. <header class="card-header ipados-header">
  1626. <div class="header-left">
  1627. <div class="dot-menu-indicator">
  1628. <span class="dot dot-close"></span>
  1629. <span class="dot dot-minimize"></span>
  1630. <span class="dot dot-maximize"></span>
  1631. </div>
  1632. </div>
  1633.  
  1634. <details class="header-dropdown-details">
  1635. <summary class="title-pill">
  1636. <span class="title-text user-info">
  1637. <a href="{BlogURL}">{Name}</a>
  1638. </span>
  1639. </summary>
  1640. </details>
  1641.  
  1642. <div class="header-right">
  1643. <div class="header-btn tool-btn" aria-hidden="true">
  1644. <span class="ti ti-dots tool-icon"></span>
  1645. </div>
  1646. </div>
  1647. </header>
  1648.  
  1649. <div class="sidebar-banner"></div>
  1650.  
  1651. <div class="sidebar-profile">
  1652. <div class="sidebar-avatar">
  1653. <img src="{PortraitURL-96}" alt="{Title}">
  1654. </div>
  1655. <h1 class="sidebar-title">{Title}</h1>
  1656. {block:Description}
  1657. <div class="sidebar-desc">{Description}</div>
  1658. {/block:Description}
  1659. </div>
  1660.  
  1661. <div class="sidebar-content-body">
  1662.  
  1663. <!-- Pages List inside Sidebar (Standard Nav & Search moved to Floating Nav) -->
  1664. {block:HasPages}
  1665. <nav class="sidebar-pages-nav">
  1666. {block:Pages}
  1667. <a href="{URL}" class="nav-item"><span class="ti ti-info-circle"></span> {Label}</a>
  1668. {/block:Pages}
  1669. </nav>
  1670. {/block:HasPages}
  1671.  
  1672. {block:IfInstagramURL}
  1673. <div class="sidebar-divider"></div>
  1674. {/block:IfInstagramURL}
  1675.  
  1676. <div class="sidebar-socials">
  1677. {block:IfInstagramURL}
  1678. <a href="{text:Instagram URL}" target="_blank" rel="noopener noreferrer" class="social-link">
  1679. <span class="icon ti ti-brand-instagram"></span>
  1680. <span class="username">{block:IfInstagramUsername}{text:Instagram Username}{/block:IfInstagramUsername}{block:IfNotInstagramUsername}Instagram{/block:IfNotInstagramUsername}</span>
  1681. </a>
  1682. {/block:IfInstagramURL}
  1683.  
  1684. {block:IfThreadsURL}
  1685. <a href="{text:Threads URL}" target="_blank" rel="noopener noreferrer" class="social-link">
  1686. <span class="icon ti ti-brand-threads"></span>
  1687. <span class="username">{block:IfThreadsUsername}{text:Threads Username}{/block:IfThreadsUsername}{block:IfNotThreadsUsername}Threads{/block:IfNotThreadsUsername}</span>
  1688. </a>
  1689. {/block:IfThreadsURL}
  1690.  
  1691. {block:IfTwitterURL}
  1692. <a href="{text:Twitter URL}" target="_blank" rel="noopener noreferrer" class="social-link">
  1693. <span class="icon ti ti-brand-x"></span>
  1694. <span class="username">{block:IfTwitterUsername}{text:Twitter Username}{/block:IfTwitterUsername}{block:IfNotTwitterUsername}X / Twitter{/block:IfNotTwitterUsername}</span>
  1695. </a>
  1696. {/block:IfTwitterURL}
  1697.  
  1698. {block:IfTikTokURL}
  1699. <a href="{text:TikTok URL}" target="_blank" rel="noopener noreferrer" class="social-link">
  1700. <span class="icon ti ti-brand-tiktok"></span>
  1701. <span class="username">{block:IfTikTokUsername}{text:TikTok Username}{/block:IfTikTokUsername}{block:IfNotTikTokUsername}TikTok{/block:IfNotTikTokUsername}</span>
  1702. </a>
  1703. {/block:IfTikTokURL}
  1704.  
  1705. {block:IfYouTubeURL}
  1706. <a href="{text:YouTube URL}" target="_blank" rel="noopener noreferrer" class="social-link">
  1707. <span class="icon ti ti-brand-youtube"></span>
  1708. <span class="username">{block:IfYouTubeUsername}{text:YouTube Username}{/block:IfYouTubeUsername}{block:IfNotYouTubeUsername}YouTube{/block:IfNotYouTubeUsername}</span>
  1709. </a>
  1710. {/block:IfYouTubeURL}
  1711.  
  1712. {block:IfGitHubURL}
  1713. <a href="{text:GitHub URL}" target="_blank" rel="noopener noreferrer" class="social-link">
  1714. <span class="icon ti ti-brand-github"></span>
  1715. <span class="username">{block:IfGitHubUsername}{text:GitHub Username}{/block:IfGitHubUsername}{block:IfNotGitHubUsername}GitHub{/block:IfNotGitHubUsername}</span>
  1716. </a>
  1717. {/block:IfGitHubURL}
  1718. </div>
  1719.  
  1720. {block:IfCustomSidebarWidgetHTML}
  1721. <div class="sidebar-divider"></div>
  1722. <div class="custom-html-block">
  1723. {text:Custom Sidebar Widget HTML}
  1724. </div>
  1725. {/block:IfCustomSidebarWidgetHTML}
  1726.  
  1727. </div>
  1728. </aside>
  1729. </div>
  1730.  
  1731. <!-- Feed Section -->
  1732. <main class="feed">
  1733.  
  1734. {block:Posts}
  1735. <article class="ig-card glass-card ipados-card" id="post-{PostID}">
  1736.  
  1737. <!-- iPadOS Window Header Bar -->
  1738. <header class="card-header ipados-header">
  1739.  
  1740. <div class="header-left">
  1741. <div class="dot-menu-indicator">
  1742. <span class="dot dot-close"></span>
  1743. <span class="dot dot-minimize"></span>
  1744. <span class="dot dot-maximize"></span>
  1745. </div>
  1746. {block:PermalinkPage}
  1747. <button type="button"
  1748. class="header-btn tool-btn permalink-back-btn"
  1749. aria-label="Go back"
  1750. title="Go back">
  1751. <span class="ti ti-chevron-left tool-icon"></span>
  1752. </button>
  1753. {/block:PermalinkPage}
  1754. </div>
  1755.  
  1756. <!-- Username Title Pill + Pure CSS Date Dropdown Popover -->
  1757. <details class="header-dropdown-details">
  1758. <summary class="title-pill">
  1759. <span class="title-text user-info">
  1760. {block:RebloggedFrom}
  1761. <a href="{BlogURL}">{Name}</a>
  1762. <span class="ti ti-chevron-right reblog-arrow"></span>
  1763. <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1764. {/block:RebloggedFrom}
  1765.  
  1766. {block:NotReblog}
  1767. <a href="{BlogURL}">{Name}</a>
  1768. {/block:NotReblog}
  1769. </span>
  1770. <span class="ti ti-chevron-down chevron-icon"></span>
  1771. </summary>
  1772.  
  1773. <!-- Date Dropdown Popover -->
  1774. <div class="header-popover glass-card">
  1775. <span class="popover-label">Posted</span>
  1776. {block:Date}
  1777. <a href="{Permalink}" class="post-date custom-date-format"
  1778. data-timestamp="{Timestamp}"
  1779. data-short="{DayOfMonth} {ShortMonth}"
  1780. data-slashed="{DayOfMonthWithZero}/{ShortMonth}/{Year}"
  1781. data-full="{Month} {DayOfMonthWithZero}{DayOfMonthSuffix}, {Year}">
  1782. {DayOfMonth} {ShortMonth}
  1783. </a>
  1784. {/block:Date}
  1785. </div>
  1786. </details>
  1787.  
  1788. <div class="header-right">
  1789. <button class="header-btn share-btn tool-btn"
  1790. type="button"
  1791. aria-label="Share Post"
  1792. title="Share">
  1793. <span class="ti ti-share-2 tool-icon"></span>
  1794. </button>
  1795. </div>
  1796. </header>
  1797.  
  1798. <!-- Main Post Content -->
  1799. <div class="card-content ipados-body">
  1800.  
  1801. {block:Photo}
  1802. <img src="{PhotoURL-500}" alt="{PhotoAlt}">
  1803. {block:NotReblog}
  1804. {block:Caption}
  1805. <div class="card-text-body">{Caption}</div>
  1806. {/block:Caption}
  1807. {/block:NotReblog}
  1808. {/block:Photo}
  1809.  
  1810. {block:Photoset}
  1811. {Photoset}
  1812. {block:NotReblog}
  1813. {block:Caption}
  1814. <div class="card-text-body">{Caption}</div>
  1815. {/block:Caption}
  1816. {/block:NotReblog}
  1817. {/block:Photoset}
  1818.  
  1819. {block:Quote}
  1820. <div class="quote-body">
  1821. <p class="quote-text">"{Quote}"</p>
  1822. {block:Source}
  1823. <p class="quote-source">{Source}</p>
  1824. {/block:Source}
  1825. </div>
  1826. {/block:Quote}
  1827.  
  1828. {block:Link}
  1829. <div class="card-text-body">
  1830. <h3 class="post-title"><a href="{URL}" {Target}>{Name}</a></h3>
  1831. {block:NotReblog}
  1832. {block:Description}
  1833. {Description}
  1834. {/block:Description}
  1835. {/block:NotReblog}
  1836. </div>
  1837. {/block:Link}
  1838.  
  1839. {block:Video}
  1840. <div class="tumblr_video_container">
  1841. {Video-500}
  1842. </div>
  1843. {block:NotReblog}
  1844. {block:Caption}
  1845. <div class="card-text-body">{Caption}</div>
  1846. {/block:Caption}
  1847. {/block:NotReblog}
  1848. {/block:Video}
  1849.  
  1850. {block:Audio}
  1851. {AudioPlayer}
  1852. {block:NotReblog}
  1853. {block:Caption}
  1854. <div class="card-text-body">{Caption}</div>
  1855. {/block:Caption}
  1856. {/block:NotReblog}
  1857. {/block:Audio}
  1858.  
  1859. {block:Answer}
  1860. <div class="ask-box">
  1861. <div class="asker-info">
  1862. <img src="{AskerPortraitURL-64}">
  1863. {Asker} <span>asked:</span>
  1864. </div>
  1865. <p class="ask-question">{Question}</p>
  1866. </div>
  1867.  
  1868. <div class="ask-answer">
  1869. {Answer}
  1870. </div>
  1871. {/block:Answer}
  1872.  
  1873. {block:Reblogs}
  1874. <div class="reblog-list">
  1875. <div class="reblog-item">
  1876. <div class="reblog-item-header">
  1877. <div class="reblog-user">
  1878. {block:IsActive}
  1879. <img src="{PortraitURL-64}" alt="{Username}">
  1880. <a href="{Permalink}">{Username}</a>
  1881. {/block:IsActive}
  1882. {block:IsDeactivated}
  1883. <span class="deactivated">{Username} (deactivated)</span>
  1884. {/block:IsDeactivated}
  1885. </div>
  1886. </div>
  1887. <div class="reblog-content-body">
  1888. {Body}
  1889. </div>
  1890. </div>
  1891. </div>
  1892. {/block:Reblogs}
  1893.  
  1894. {block:Text}
  1895. <div class="card-text-body fallback-text-body">
  1896. {block:Title}
  1897. <h3 class="post-title">{Title}</h3>
  1898. {/block:Title}
  1899. {Body}
  1900. </div>
  1901. {/block:Text}
  1902.  
  1903. {block:More}
  1904. <div class="read-more-wrapper">
  1905. <a href="{Permalink}" class="read-more-btn">Read More</a>
  1906. </div>
  1907. {/block:More}
  1908.  
  1909. </div>
  1910.  
  1911. <!-- iPadOS Floating Toolbar Footer Capsule -->
  1912. <div class="ipados-toolbar-wrapper">
  1913. <footer class="card-actions ipados-toolbar">
  1914.  
  1915. <!-- Left Action Group -->
  1916. <div class="action-group-left tool-group">
  1917.  
  1918. <!-- Like Button -->
  1919. <div class="action-item tumblr-btn-wrapper tool-btn like-wrapper" title="Like">
  1920. <button class="action-btn" aria-label="Like">
  1921. <span class="ti ti-heart tool-icon"></span>
  1922. </button>
  1923. {LikeButton}
  1924. </div>
  1925.  
  1926. <!-- Reblog Button -->
  1927. <div class="action-item tumblr-btn-wrapper tool-btn" title="Reblog">
  1928. <a href="{ReblogURL}" class="action-btn" aria-label="Reblog">
  1929. <span class="ti ti-repeat tool-icon"></span>
  1930. </a>
  1931. </div>
  1932.  
  1933. <!-- Comment / Permalink Notes Button -->
  1934. <div class="action-item tool-btn" title="Notes">
  1935. <a href="{Permalink}#notes"
  1936. class="action-btn"
  1937. aria-label="Notes">
  1938. <span class="ti ti-message-circle tool-icon"></span>
  1939. </a>
  1940. </div>
  1941.  
  1942. </div>
  1943.  
  1944. <!-- Right Action Group -->
  1945. <div class="action-group-right tool-group">
  1946.  
  1947. {block:HasTags}
  1948. <details class="popover-details">
  1949. <summary class="action-btn tool-btn tag-trigger-btn"
  1950. aria-label="Tags"
  1951. title="Tags">
  1952. <span class="ti ti-hash tool-icon"></span>
  1953. </summary>
  1954.  
  1955. <div class="ipados-tag-popover glass-card">
  1956. <div class="popover-header">Tags</div>
  1957.  
  1958. <div class="tags-cloud card-tags">
  1959. {block:Tags}
  1960. <a href="{TagURL}">#{Tag}</a>
  1961. {/block:Tags}
  1962. </div>
  1963. </div>
  1964. </details>
  1965. {/block:HasTags}
  1966.  
  1967. </div>
  1968.  
  1969. </footer>
  1970. </div>
  1971.  
  1972. </article>
  1973. {/block:Posts}
  1974.  
  1975. {block:PermalinkPage}
  1976. {block:PostNotes}
  1977. <section class="ig-card glass-card" id="notes">
  1978.  
  1979. <!-- NOTES FILTERS -->
  1980. <div class="notes-tabs">
  1981. <button class="action-btn active" type="button" data-tab="comments">
  1982. <span class="ti ti-message-circle"></span>
  1983. Comments
  1984. </button>
  1985.  
  1986. <button class="action-btn" type="button" data-tab="reblogs">
  1987. <span class="ti ti-repeat"></span>
  1988. Reblogs
  1989. </button>
  1990. </div>
  1991.  
  1992. <div class="notes-content">
  1993. {PostNotes}
  1994. </div>
  1995.  
  1996. </section>
  1997. {/block:PostNotes}
  1998. {/block:PermalinkPage}
  1999.  
  2000. </main>
  2001.  
  2002. </div>
  2003.  
  2004. <!-- Middle-Right Sticky Pagination Capsule (Desktop: Vertical / Mobile: Horizontal) -->
  2005. {block:Pagination}
  2006. <nav class="sticky-pagination-capsule glass-card">
  2007.  
  2008. {block:PreviousPage}
  2009. <a href="{PreviousPage}" class="page-arrow" title="Previous Page" aria-label="Previous Page">
  2010. <span class="ti ti-chevron-left"></span>
  2011. </a>
  2012. {/block:PreviousPage}
  2013.  
  2014. {block:IfNotPreviousPage}
  2015. <span class="page-arrow disabled" aria-hidden="true">
  2016. <span class="ti ti-chevron-left"></span>
  2017. </span>
  2018. {/block:IfNotPreviousPage}
  2019.  
  2020. <span class="page-number">{CurrentPage}</span>
  2021.  
  2022. {block:NextPage}
  2023. <a href="{NextPage}" class="page-arrow" title="Next Page" aria-label="Next Page">
  2024. <span class="ti ti-chevron-right"></span>
  2025. </a>
  2026. {/block:NextPage}
  2027.  
  2028. {block:IfNotNextPage}
  2029. <span class="page-arrow disabled" aria-hidden="true">
  2030. <span class="ti ti-chevron-right"></span>
  2031. </span>
  2032. {/block:IfNotNextPage}
  2033.  
  2034. </nav>
  2035. {/block:Pagination}
  2036.  
  2037. <!-- Sticky Lower Right Floating Navigation Menu -->
  2038. <details id="floating-nav-container">
  2039. <summary class="glass-circle-btn" aria-label="Toggle Navigation" title="Menu">
  2040. <span class="ti ti-menu-2 trigger-icon"></span>
  2041. </summary>
  2042.  
  2043. <!-- Popup Menu directly above the button -->
  2044. <nav id="popup-nav-menu" class="glass-card">
  2045.  
  2046. <a href="/" class="nav-item">
  2047. <span class="ti ti-home nav-icon"></span>
  2048. <span class="nav-label">Home</span>
  2049. </a>
  2050.  
  2051. <a href="/archive" class="nav-item">
  2052. <span class="ti ti-archive nav-icon"></span>
  2053. <span class="nav-label">Archive</span>
  2054. </a>
  2055.  
  2056. {block:AskEnabled}
  2057. <a href="/ask" class="nav-item">
  2058. <span class="ti ti-message nav-icon"></span>
  2059. <span class="nav-label">Ask</span>
  2060. </a>
  2061. {/block:AskEnabled}
  2062.  
  2063. {block:SubmissionsEnabled}
  2064. <a href="/submit" class="nav-item">
  2065. <span class="ti ti-paperclip nav-icon"></span>
  2066. <span class="nav-label">Submit</span>
  2067. </a>
  2068. {/block:SubmissionsEnabled}
  2069.  
  2070. <button type="button" id="theme-toggle-btn" class="nav-item">
  2071. <span class="ti ti-moon nav-icon" id="theme-icon"></span>
  2072. <span class="nav-label">Dark Mode</span>
  2073. </button>
  2074.  
  2075. <button type="button" id="open-search-modal" class="nav-item">
  2076. <span class="ti ti-search nav-icon"></span>
  2077. <span class="nav-label">Search</span>
  2078. </button>
  2079.  
  2080. </nav>
  2081. </details>
  2082.  
  2083. <!-- Liquid Glass Search Window Modal -->
  2084. <div id="liquid-glass-search-modal" class="glass-modal-overlay">
  2085. <div class="liquid-search-card glass-card">
  2086. <header class="search-modal-header">
  2087. <span class="ti ti-search search-modal-icon"></span>
  2088. <form action="/search" method="get" class="search-modal-form">
  2089. <input type="text" name="q" id="search-modal-input" placeholder="Search blog..." autocomplete="off">
  2090. </form>
  2091. <button type="button" id="close-search-modal" class="close-modal-btn">
  2092. <span class="ti ti-x"></span>
  2093. </button>
  2094. </header>
  2095.  
  2096. <!-- Liquid Glass Recommendations Container -->
  2097. <div class="search-recommendations" id="search-recommendations">
  2098. <div class="recommendations-title">Suggested Searches</div>
  2099. <div class="recommendations-list">
  2100. <a href="/archive" class="rec-item"><span class="ti ti-history"></span> Recent Archives</a>
  2101. {block:HasPages}
  2102. {block:Pages}
  2103. <a href="{URL}" class="rec-item"><span class="ti ti-link"></span> {Label}</a>
  2104. {/block:Pages}
  2105. {/block:HasPages}
  2106. </div>
  2107. </div>
  2108. </div>
  2109. </div>
  2110.  
  2111. <footer class="site-footer-card">
  2112. {block:IfCustomFooterText}
  2113. {text:Custom Footer Text}
  2114. {/block:IfCustomFooterText}
  2115. {block:IfNotCustomFooterText}
  2116. {Title}. Powered by Tumblr.
  2117. {/block:IfNotCustomFooterText}
  2118. </footer>
  2119.  
  2120. <script>
  2121. document.addEventListener("DOMContentLoaded", function() {
  2122.  
  2123. // 1. WALLPAPER
  2124. const wallpaperUrl = "{text:Wallpaper Image URL}".trim();
  2125.  
  2126. if (wallpaperUrl) {
  2127. document.body.classList.add("has-wallpaper");
  2128. }
  2129.  
  2130. // 2. HOME BUTTON AND NAVIGATION HIGHLIGHTING
  2131. const currentPath = window.location.pathname;
  2132. const navLinks = document.querySelectorAll("#popup-nav-menu .nav-item");
  2133.  
  2134. navLinks.forEach(function(link) {
  2135. const linkPath = link.getAttribute("href");
  2136.  
  2137. if (
  2138. currentPath === "/" ||
  2139. currentPath === "" ||
  2140. currentPath.startsWith("/page/")
  2141. ) {
  2142. if (linkPath === "/") {
  2143. link.classList.add("active-nav");
  2144. }
  2145. } else if (linkPath && currentPath === linkPath) {
  2146. link.classList.add("active-nav");
  2147. }
  2148. });
  2149.  
  2150. // 3. LIQUID GLASS SEARCH MODAL TOGGLE
  2151. const searchModal = document.getElementById("liquid-glass-search-modal");
  2152. const openSearchBtn = document.getElementById("open-search-modal");
  2153. const closeSearchBtn = document.getElementById("close-search-modal");
  2154. const navDetails = document.getElementById("floating-nav-container");
  2155.  
  2156. if (openSearchBtn && searchModal) {
  2157. openSearchBtn.addEventListener("click", function(e) {
  2158. e.preventDefault();
  2159.  
  2160. if (navDetails) {
  2161. navDetails.removeAttribute("open");
  2162. }
  2163.  
  2164. searchModal.classList.add("is-active");
  2165.  
  2166. const input = document.getElementById("search-modal-input");
  2167. if (input) input.focus();
  2168. });
  2169. }
  2170.  
  2171. if (closeSearchBtn && searchModal) {
  2172. closeSearchBtn.addEventListener("click", function() {
  2173. searchModal.classList.remove("is-active");
  2174. });
  2175. }
  2176.  
  2177. // 4. DAY / NIGHT TOGGLE SWITCH
  2178. const themeToggleBtn = document.getElementById("theme-toggle-btn");
  2179. const themeIcon = document.getElementById("theme-icon");
  2180.  
  2181. function updateThemeIcon() {
  2182. if (!themeIcon) return;
  2183.  
  2184. if (document.body.classList.contains("night-mode")) {
  2185. themeIcon.className = "ti ti-sun nav-icon";
  2186. } else {
  2187. themeIcon.className = "ti ti-moon nav-icon";
  2188. }
  2189. }
  2190.  
  2191. if (localStorage.getItem("theme") === "night") {
  2192. document.body.classList.add("night-mode");
  2193. }
  2194.  
  2195. updateThemeIcon();
  2196.  
  2197. if (themeToggleBtn) {
  2198. themeToggleBtn.addEventListener("click", function() {
  2199. document.body.classList.toggle("night-mode");
  2200.  
  2201. const isNight =
  2202. document.body.classList.contains("night-mode");
  2203.  
  2204. localStorage.setItem(
  2205. "theme",
  2206. isNight ? "night" : "day"
  2207. );
  2208.  
  2209. updateThemeIcon();
  2210. });
  2211. }
  2212.  
  2213. // 5. RELIABLE DATE FORMATTING
  2214. const selectedDateFormat = "{select:Date Format}";
  2215.  
  2216. function getRelativeTime(timestamp) {
  2217. const now = Math.floor(Date.now() / 1000);
  2218. const diff = now - parseInt(timestamp, 10);
  2219.  
  2220. if (isNaN(diff) || diff < 0) {
  2221. return "just now";
  2222. }
  2223.  
  2224. const seconds = diff;
  2225. const minutes = Math.floor(seconds / 60);
  2226. const hours = Math.floor(minutes / 60);
  2227. const days = Math.floor(hours / 24);
  2228. const weeks = Math.floor(days / 7);
  2229.  
  2230. if (seconds < 60) return `${seconds}s ago`;
  2231. if (minutes < 60) return `${minutes}m ago`;
  2232. if (hours < 24) return `${hours}h ago`;
  2233. if (days === 1) return "Yesterday";
  2234. if (days < 7) return `${days}d ago`;
  2235.  
  2236. return `${weeks}w ago`;
  2237. }
  2238.  
  2239. document.querySelectorAll(".custom-date-format").forEach(function(el) {
  2240. if (selectedDateFormat === "slashed") {
  2241. el.textContent = el.getAttribute("data-slashed");
  2242. } else if (selectedDateFormat === "full") {
  2243. el.textContent = el.getAttribute("data-full");
  2244. } else if (selectedDateFormat === "relative") {
  2245. const ts = el.getAttribute("data-timestamp");
  2246.  
  2247. if (ts) {
  2248. el.textContent = getRelativeTime(ts);
  2249. }
  2250. } else {
  2251. el.textContent = el.getAttribute("data-short");
  2252. }
  2253. });
  2254.  
  2255. // 6. SHARE BUTTON LOGIC
  2256. document.querySelectorAll(".share-btn").forEach(function(btn) {
  2257. btn.addEventListener("click", function() {
  2258. const url = window.location.href;
  2259.  
  2260. if (navigator.share) {
  2261. navigator.share({
  2262. title: document.title,
  2263. url: url
  2264. }).catch(() => {});
  2265. } else if (navigator.clipboard) {
  2266. navigator.clipboard.writeText(url).then(function() {
  2267. alert("Link copied to clipboard!");
  2268. });
  2269. }
  2270. });
  2271. });
  2272.  
  2273. // 7. PERMALINK BACK BUTTON
  2274. // Return to the exact page the visitor came from instead of always going home.
  2275. document.querySelectorAll(".permalink-back-btn").forEach(function(btn) {
  2276. btn.addEventListener("click", function() {
  2277. const referrer = document.referrer;
  2278.  
  2279. if (referrer) {
  2280. try {
  2281. const referrerURL = new URL(referrer);
  2282.  
  2283. if (
  2284. referrerURL.protocol === "http:" ||
  2285. referrerURL.protocol === "https:"
  2286. ) {
  2287. window.location.href = referrerURL.href;
  2288. return;
  2289. }
  2290. } catch (error) {}
  2291. }
  2292.  
  2293. if (window.history.length > 1) {
  2294. window.history.back();
  2295. } else {
  2296. window.location.href = "{BlogURL}";
  2297. }
  2298. });
  2299. });
  2300.  
  2301. // 8. PERMALINK BACK BUTTON
  2302.  
  2303. document.querySelectorAll("#notes").forEach(function(notesSection) {
  2304.  
  2305. const tabs = notesSection.querySelectorAll(".notes-tabs .action-btn");
  2306. const notesContent = notesSection.querySelector(".notes-content");
  2307.  
  2308. if (!tabs.length || !notesContent) return;
  2309.  
  2310. function filterNotes(tab) {
  2311.  
  2312. // Remove previous state
  2313. notesContent.classList.remove("show-comments", "show-reblogs");
  2314.  
  2315. // Apply selected filter
  2316. if (tab === "comments") {
  2317. notesContent.classList.add("show-comments");
  2318. }
  2319.  
  2320. if (tab === "reblogs") {
  2321. notesContent.classList.add("show-reblogs");
  2322. }
  2323. }
  2324.  
  2325. tabs.forEach(function(button) {
  2326.  
  2327. button.addEventListener("click", function() {
  2328.  
  2329. tabs.forEach(function(tabButton) {
  2330. tabButton.classList.remove("active");
  2331. });
  2332.  
  2333. button.classList.add("active");
  2334.  
  2335. filterNotes(button.dataset.tab);
  2336. });
  2337.  
  2338. });
  2339.  
  2340. // Default to Comments
  2341. filterNotes("comments");
  2342.  
  2343. });
  2344.  
  2345. });
  2346. </script>
  2347.  
  2348. </body>
  2349. </html>
Advertisement
Comments
  • User was banned
Add Comment
Please, Sign In to add comment