tenkuma/web
tenkuma/web
Watch
1
0
Fork
You've already forked web
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add javascript to adapt design to Tumblr ADS.

Browse source
This commit is contained in:
天クマ 2026-07-08 19:50:01 -03:00
commit c8eb82b8e1
3 changed files with 36 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
site/_includes/base.njk
View file

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

12
static/main.css
View file

@ -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 {

23
static/scripts/tumblr-adapt.js Normal file
View file

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