mirror of
https://git.acl.cool/al/pages.git
synced 2026-02-10 16:58:09 -05:00
okay
This commit is contained in:
parent
3b9030c128
commit
c5583de2e1
1 changed files with 64 additions and 1 deletions
|
|
@ -15,6 +15,69 @@
|
|||
document.documentElement.className = class_;
|
||||
// document.documentElement.className += ' invert'; // 'invert' to swap colors
|
||||
</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>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue