al/pages
1
0
Fork 0
mirror of https://git.acl.cool/al/pages.git synced 2026-02-10 16:58:09 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

okay

Browse source
This commit is contained in:
dembim 2026-02-01 10:43:37 -05:00
parent 3b9030c128
commit c5583de2e1
1 changed files with 64 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

63
shared_templates/main.html
View file

@ -15,6 +15,69 @@
document.documentElement.className = class_; document.documentElement.className = class_;
// document.documentElement.className += ' invert'; // 'invert' to swap colors // document.documentElement.className += ' invert'; // 'invert' to swap colors
</script> </script>
<script defer>
let maxH1FontSize = null;
function fitH1ToContainer(h1) {
const container = h1.closest(".container");
if (!container || window.devicePixelRatio > 2) return;
const maxFontSize = maxH1FontSize;
const minFontSize = 8;
h1.style.whiteSpace = "nowrap";
h1.style.display = "inline-block";
const style = getComputedStyle(container);
const paddingLeft = parseFloat(style.paddingLeft);
const paddingRight = parseFloat(style.paddingRight);
const availableWidth =
container.getBoundingClientRect().width - paddingLeft - paddingRight;
const containerWidth = availableWidth;
let low = minFontSize;
let high = maxFontSize;
let best = minFontSize;
while (low <= high) {
const mid = Math.floor((low + high) / 2);
h1.style.fontSize = mid + "px";
if (h1.scrollWidth <= containerWidth) {
best = mid;
low = mid + 1;
} else {
high = mid - 1;
}
}
h1.style.fontSize = best + "px";
if (h1.scrollWidth > containerWidth) {
h1.style.whiteSpace = "normal";
h1.style.display = "block";
}
}
function runFitText() {
document.querySelectorAll("h1").forEach(fitH1ToContainer);
}
function start() {
document.fonts.ready.then(() => {
const firstH1 = document.querySelector("h1");
if (firstH1) {
maxH1FontSize = parseFloat(getComputedStyle(firstH1).fontSize);
}
runFitText();
window.addEventListener("resize", runFitText);
});
}
window.addEventListener("DOMContentLoaded", start);
</script>
</head> </head>
<body> <body>