From c8eb82b8e16a9d24366525210422ae6088a0335c Mon Sep 17 00:00:00 2001
From: Adrian Victor <adrianvictor@disroot.org>
Date: Wed, 8 Jul 2026 19:50:01 -0300
Subject: [PATCH] Add javascript to adapt design to Tumblr ADS.

---
 site/_includes/base.njk        |  1 +
 static/main.css                | 12 ++++++++++++
 static/scripts/tumblr-adapt.js | 23 +++++++++++++++++++++++
 3 files changed, 36 insertions(+)
 create mode 100644 static/scripts/tumblr-adapt.js

diff --git a/site/_includes/base.njk b/site/_includes/base.njk
index 27cee06..af70069 100644
--- a/site/_includes/base.njk
+++ b/site/_includes/base.njk
@@ -20,6 +20,7 @@
     <script type="module" src="{{ '/static/scripts/88x31.js' | url }}" defer></script>
     <script type="module" src="{{ '/static/scripts/tips.js' | url }}" defer></script>
     <script type="module" src="{{ '/static/scripts/click.js' | url }}" defer></script>
+    <script type="module" src="{{ '/static/scripts/tumblr-adapt.js' | url }}" defer></script>
     <link rel="apple-touch-icon" sizes="180x180" href="{{ '/static/apple-touch-icon.png' | url }}">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ '/static/favicon-32x32.png' | url }}">
     <link rel="icon" type="image/png" sizes="16x16" href="{{ '/static/favicon-16x16.png' | url }}">
diff --git a/static/main.css b/static/main.css
index e423005..d522bc9 100644
--- a/static/main.css
+++ b/static/main.css
@@ -70,6 +70,17 @@ header {
     background-color: rgba(0, 0, 0, 0.15);
 }
 
+header.tumblr {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: "9999";
+    border-top: thick solid rgba(255, 255, 255, 0.1);
+    border-bottom: "none";
+    background-color: rgb(0,0,0,0.8);
+}
+
 header div {
     padding: 1rem;
 }
@@ -719,6 +730,7 @@ article {
 
 #everythingHelper {
     position: relative;
+    margin-bottom: var(--header-height, 0);
 }
 
 #everythingHelper .bg {
diff --git a/static/scripts/tumblr-adapt.js b/static/scripts/tumblr-adapt.js
new file mode 100644
index 0000000..408e27f
--- /dev/null
+++ b/static/scripts/tumblr-adapt.js
@@ -0,0 +1,23 @@
+const isTumblr = new URLSearchParams(location.search).get("tumblr") == "true";
+console.log(isTumblr);
+
+function adaptToTumblrLayout() {
+    const header = document.querySelector('header');
+    header.classList.add("tumblr");
+
+    const setHeaderOffset = () => {
+      const height = header.offsetHeight + "px";
+      document.documentElement.style.setProperty('--header-height', height);
+    };
+
+    setHeaderOffset();
+    window.addEventListener('resize', setHeaderOffset);
+  
+    document.querySelectorAll("a").forEach(link => {
+        const u = new URL(link.href);
+        u.searchParams.set("tumblr", "true");
+        link.href = u.toString();
+    });
+}
+
+if (isTumblr) adaptToTumblrLayout();