mirror of
https://git.acl.cool/al/pages.git
synced 2026-02-10 16:58:09 -05:00
99 lines
No EOL
3 KiB
HTML
99 lines
No EOL
3 KiB
HTML
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title> <!-- set automatically, see soupault.conf --> </title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="/css/fonts.css">
|
|
<link rel="stylesheet" href="/css/layout.css">
|
|
<link rel="stylesheet" href="/css/looks.css">
|
|
<link rel="stylesheet" href="/css/inverted_colors.css">
|
|
<link rel="stylesheet" href="/css/code.css">
|
|
<link rel="icon" type="image/png" href="/assets/favicon.png">
|
|
<script>
|
|
const class_ = `font-${window.devicePixelRatio > 1.5 ? 'hidpi' : 'lodpi'}`;
|
|
document.documentElement.className = class_;
|
|
// document.documentElement.className += ' invert'; // 'invert' to swap colors
|
|
</script>
|
|
<script defer>
|
|
function fitH1ToContainer(h1) {
|
|
const container = h1.closest(".container");
|
|
if (!container || window.devicePixelRatio > 2) return;
|
|
|
|
const minFontSize = 8;
|
|
const maxFontSize = parseFloat(h1.dataset.maxFontSize);
|
|
|
|
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;
|
|
|
|
h1.style.fontSize = maxFontSize + "px";
|
|
|
|
if (h1.scrollWidth <= containerWidth) return;
|
|
|
|
let low = minFontSize;
|
|
let high = maxFontSize;
|
|
let best = minFontSize;
|
|
|
|
while (high - low > 0.1) {
|
|
const mid = (low + high) / 2;
|
|
h1.style.fontSize = mid + "px";
|
|
|
|
if (h1.scrollWidth <= containerWidth) {
|
|
best = mid;
|
|
low = mid;
|
|
} else {
|
|
high = mid;
|
|
}
|
|
}
|
|
|
|
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(() => {
|
|
// 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>
|
|
<main class="container">
|
|
</main>
|
|
<!-- <footer class="invert">
|
|
<span class="container"
|
|
style="display: block; padding-top: 1rem; padding-bottom: 1rem; display: flex; justify-content: space-between">
|
|
<span><a href="/" class="er-color">take
|
|
me home</a></span><span style="text-align: right; flex: 1">Alexander Lucas — <a
|
|
href="mailto:iam@acl.cool" class="er-color">iam@acl.cool</a></span>
|
|
</span>
|
|
</footer> -->
|
|
</body>
|
|
|
|
</html> |