feat: Add footnote backlinks with smooth-scroll functionality and implement related styles

TODO.md

@@ -6,7 +6,7 @@
 - [x] **Text Wrap Balancing** — Apply `text-wrap: balance` to headings and `text-wrap: pretty` to paragraphs to prevent awkward orphaned words.
 - [x] **Fluid Typography Scale** — Refactor font sizes to use CSS `clamp()` functions for perfectly smooth scaling across all devices without relying on breakpoints.
 - [ ] **Line Highlighting in Code Blocks** — Implement a custom shortcode or modify the syntax highlighter to allow highlighting specific lines of code (vital for exploit tutorials).
-- [ ] **Footnote Backlinks** — Add a smooth-scroll return link (e.g., `[↩]`) inside the expanded footnote tooltip or at the bottom of the article to jump back to the reading position.
+- [x] **Footnote Backlinks** — Add a smooth-scroll return link (e.g., `[↩]`) inside the expanded footnote tooltip or at the bottom of the article to jump back to the reading position.
 
 ## UI / UX Polish
 

content/posts/hello-world.md

@@ -13,3 +13,4 @@ Welcome to **pwnforfunandprofit**, your new home for all things binary exploitat
 In a world increasingly built on code, understanding its vulnerabilities is not just a niche skill; it's a superpower. Here, we're not just reading about exploits; we're _crafting_ them. We're not just looking at binaries; we're _disassembling_ them. And we're not just talking about offensive security; we're _doing_ it.
 
 My mission is simple yet ambitious: to transform the daunting landscapes of low-level security into accessible, engaging, and ultimately, empowering knowledge. Whether you're aiming to land that dream cybersecurity role, dominate CTF leaderboards, uncover critical bugs, or satisfy a deep intellectual curiosity, we're here to guide you.
+

sass/_typography.scss

@@ -47,6 +47,59 @@ p {
   text-wrap: pretty;
 }
 
+// Footnotes
+.footnote-reference {
+  font-size: 0.75em;
+  vertical-align: super;
+  line-height: 0;
+
+  a {
+    color: var(--accent-color);
+    font-family: var(--font-mono);
+    padding: 0 0.15em;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.footnote-definition {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  border-left: 2px solid var(--border-color);
+  padding-left: 1rem;
+
+  p {
+    margin: 0;
+    max-width: none;
+  }
+}
+
+.footnote-definition-label {
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+  color: var(--accent-color);
+  font-size: 0.8em;
+  margin-top: 0.1em;
+}
+
+.footnote-backref {
+  font-family: var(--font-mono);
+  color: var(--accent-color);
+  font-size: 0.9em;
+  text-decoration: none;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 code,
 pre {
   font-family: var(--font-mono);

static/js/footnotes.js

@@ -0,0 +1,32 @@
+(function () {
+  'use strict';
+
+  const refs = document.querySelectorAll('sup.footnote-reference');
+  if (!refs.length) return;
+
+  refs.forEach(function (sup) {
+    const a = sup.querySelector('a');
+    if (!a) return;
+
+    const targetId = a.getAttribute('href').replace(/^#/, '');
+    const refId = 'fnref-' + targetId;
+    sup.id = refId;
+
+    const def = document.getElementById(targetId);
+    if (!def) return;
+
+    // Append ↩ to the last <p> inside the definition
+    const paras = def.querySelectorAll('p');
+    const lastPara = paras[paras.length - 1];
+    if (!lastPara) return;
+
+    const backlink = document.createElement('a');
+    backlink.href = '#' + refId;
+    backlink.className = 'footnote-backref';
+    backlink.setAttribute('aria-label', 'Back to reference');
+    backlink.textContent = '↩';
+
+    lastPara.appendChild(document.createTextNode('\u00a0'));
+    lastPara.appendChild(backlink);
+  });
+})();

templates/page.html

@@ -82,6 +82,9 @@
   <!-- Reading Progress Bar -->
   <script defer src="{{ get_url(path="js/progress.js") }}"></script>
 
+  <!-- Footnote backlinks -->
+  <script defer src="{{ get_url(path="js/footnotes.js") }}"></script>
+
   <!-- Sticky TOC active-section highlighting -->
   {% if page.toc %}
   <script defer src="{{ get_url(path="js/toc.js") }}"></script>