Add javascript to adapt design to Tumblr ADS.

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 }}">

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 {

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();