mirror of
https://git.acl.cool/al/pages.git
synced 2026-02-10 16:58:09 -05:00
okayer
This commit is contained in:
parent
c5583de2e1
commit
95281c5720
1 changed files with 15 additions and 12 deletions
|
|
@ -16,14 +16,12 @@
|
|||
// 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;
|
||||
const maxFontSize = parseFloat(h1.dataset.maxFontSize);
|
||||
|
||||
h1.style.whiteSpace = "nowrap";
|
||||
h1.style.display = "inline-block";
|
||||
|
|
@ -36,19 +34,23 @@
|
|||
container.getBoundingClientRect().width - paddingLeft - paddingRight;
|
||||
const containerWidth = availableWidth;
|
||||
|
||||
h1.style.fontSize = maxFontSize + "px";
|
||||
|
||||
if (h1.scrollWidth <= containerWidth) return;
|
||||
|
||||
let low = minFontSize;
|
||||
let high = maxFontSize;
|
||||
let best = minFontSize;
|
||||
|
||||
while (low <= high) {
|
||||
const mid = Math.floor((low + high) / 2);
|
||||
while (high - low > 0.1) {
|
||||
const mid = (low + high) / 2;
|
||||
h1.style.fontSize = mid + "px";
|
||||
|
||||
if (h1.scrollWidth <= containerWidth) {
|
||||
best = mid;
|
||||
low = mid + 1;
|
||||
low = mid;
|
||||
} else {
|
||||
high = mid - 1;
|
||||
high = mid;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,18 +68,19 @@
|
|||
|
||||
function start() {
|
||||
document.fonts.ready.then(() => {
|
||||
const firstH1 = document.querySelector("h1");
|
||||
if (firstH1) {
|
||||
maxH1FontSize = parseFloat(getComputedStyle(firstH1).fontSize);
|
||||
}
|
||||
// Store the original CSS font size on each h1
|
||||
document.querySelectorAll("h1").forEach(h1 => {
|
||||
h1.dataset.maxFontSize = getComputedStyle(h1).fontSize;
|
||||
});
|
||||
|
||||
runFitText();
|
||||
window.addEventListener("resize", runFitText);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", start);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue