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