diff --git a/_layouts/guide.html b/_layouts/guide.html index c824e40..6412d86 100644 --- a/_layouts/guide.html +++ b/_layouts/guide.html @@ -46,7 +46,7 @@ {{ topic_translation.title }}
-

+

{% include guide_avatar.html guide=page size="header" %} {{ page[site.lang].title }}

@@ -98,7 +98,7 @@

{% t was_article_helpful %}

{% include footer.html %} - + diff --git a/css/style.scss b/css/style.scss index 0ce8926..0215434 100644 --- a/css/style.scss +++ b/css/style.scss @@ -1612,13 +1612,23 @@ html[lang="es"] .home-hero h1 { .guide-heading h1 { min-width: 0; margin: 0; + position: relative; color: var(--indigo); font-family: var(--font-heading); font-size: 104px; font-weight: 600; line-height: 0.98; letter-spacing: -0.02em; - overflow-wrap: anywhere; + hyphens: none; + overflow-wrap: normal; + word-break: normal; +} + +.guide-heading__word-probe { + position: absolute; + visibility: hidden; + white-space: nowrap; + pointer-events: none; } @media (min-width: 1200px) { diff --git a/js/article-navigation.js b/js/article-navigation.js index fb73e67..fee60a6 100644 --- a/js/article-navigation.js +++ b/js/article-navigation.js @@ -1,4 +1,78 @@ (function () { + var guideTitle = document.querySelector("[data-fit-guide-title]"); + + if (guideTitle) { + var guideTitleWords = guideTitle.textContent.trim().split(/\s+/); + var guideTitleProbe = document.createElement("span"); + var guideTitleFitFrame = null; + + guideTitleProbe.className = "guide-heading__word-probe"; + guideTitleProbe.setAttribute("aria-hidden", "true"); + guideTitle.appendChild(guideTitleProbe); + + function fitGuideTitle() { + guideTitle.style.removeProperty("font-size"); + + var availableWidth = guideTitle.getBoundingClientRect().width; + var defaultFontSize = parseFloat(window.getComputedStyle(guideTitle).fontSize); + + if (!availableWidth || !defaultFontSize) { + return; + } + + var longestWordWidth = guideTitleWords.reduce(function (longestWidth, word) { + guideTitleProbe.textContent = word; + return Math.max(longestWidth, guideTitleProbe.getBoundingClientRect().width); + }, 0); + + guideTitleProbe.textContent = ""; + + if (longestWordWidth <= availableWidth) { + return; + } + + var fittedFontSize = defaultFontSize * ((availableWidth - 1) / longestWordWidth); + + guideTitle.style.fontSize = Math.max(1, fittedFontSize) + "px"; + } + + function scheduleGuideTitleFit() { + if (guideTitleFitFrame !== null) { + window.cancelAnimationFrame(guideTitleFitFrame); + } + + guideTitleFitFrame = window.requestAnimationFrame(function () { + guideTitleFitFrame = null; + fitGuideTitle(); + }); + } + + scheduleGuideTitleFit(); + window.addEventListener("pageshow", scheduleGuideTitleFit); + + if (document.fonts && document.fonts.ready) { + document.fonts.ready.then(scheduleGuideTitleFit); + } + + if (typeof window.ResizeObserver === "function") { + var previousGuideTitleWidth = 0; + var guideTitleResizeObserver = new ResizeObserver(function (entries) { + var nextGuideTitleWidth = entries[0].contentRect.width; + + if (Math.abs(nextGuideTitleWidth - previousGuideTitleWidth) < 0.5) { + return; + } + + previousGuideTitleWidth = nextGuideTitleWidth; + scheduleGuideTitleFit(); + }); + + guideTitleResizeObserver.observe(guideTitle.parentElement); + } else { + window.addEventListener("resize", scheduleGuideTitleFit); + } + } + var sidebar = document.querySelector("[data-article-sidebar]"); var sidebarToggle = sidebar && sidebar.querySelector("[data-sidebar-toggle]"); var sidebarNav = sidebar && sidebar.querySelector(".article-sidebar__nav"); diff --git a/netlify.toml b/netlify.toml index 6901ecd..9c9475c 100644 --- a/netlify.toml +++ b/netlify.toml @@ -14,4 +14,4 @@ for = "/*" [headers.values] - Content-Security-Policy = "default-src 'self'; base-uri 'self'; object-src 'none'; script-src 'self' 'sha256-KOs83E8sWN0ZSanqdvyKqXPbanqGOxQAEZPz+lkrVh4=' 'sha256-Cn9RZi6b09IrtHxo4SOhpbbX/E5ZK+VAFUrpZMFjghg=' 'sha256-n5SVYPnptA4t2JJaq3b+FC0eYX8KPygyM8jq7/XtIi0=' 'sha256-AlC35S17jo/t3ripYSesMGbb0n4TCpeu1H+vT7O2UnM=' 'strict-dynamic' https://www.googletagmanager.com https://static.hotjar.com https://script.hotjar.com; style-src 'self' 'unsafe-inline' https://static.hotjar.com https://script.hotjar.com; img-src 'self' https://*.google-analytics.com https://www.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://google.com https://www.google.com.uy https://www.googleadservices.com https://pagead2.googlesyndication.com https://googleads.g.doubleclick.net https://static.hotjar.com https://script.hotjar.com https://survey-images.hotjar.com; font-src 'self' https://script.hotjar.com; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://www.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://google.com https://www.google.com.uy https://www.googleadservices.com https://pagead2.googlesyndication.com https://googleads.g.doubleclick.net https://ad.doubleclick.net https://*.hotjar.com https://*.hotjar.io wss://*.hotjar.com; frame-src https://www.googletagmanager.com https://insights.hotjar.com; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests" + Content-Security-Policy = "default-src 'self'; base-uri 'self'; object-src 'none'; script-src 'self' 'sha256-KOs83E8sWN0ZSanqdvyKqXPbanqGOxQAEZPz+lkrVh4=' 'sha256-Cn9RZi6b09IrtHxo4SOhpbbX/E5ZK+VAFUrpZMFjghg=' 'sha256-wCYJmMu4lFJ6xS8zGIftK+/iSWhmPjnRowWepgy5lUQ=' 'sha256-AlC35S17jo/t3ripYSesMGbb0n4TCpeu1H+vT7O2UnM=' 'strict-dynamic' https://www.googletagmanager.com https://static.hotjar.com https://script.hotjar.com; style-src 'self' 'unsafe-inline' https://static.hotjar.com https://script.hotjar.com; img-src 'self' https://*.google-analytics.com https://www.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://google.com https://www.google.com.uy https://www.googleadservices.com https://pagead2.googlesyndication.com https://googleads.g.doubleclick.net https://static.hotjar.com https://script.hotjar.com https://survey-images.hotjar.com; font-src 'self' https://script.hotjar.com; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://www.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://google.com https://www.google.com.uy https://www.googleadservices.com https://pagead2.googlesyndication.com https://googleads.g.doubleclick.net https://ad.doubleclick.net https://*.hotjar.com https://*.hotjar.io wss://*.hotjar.com; frame-src https://www.googletagmanager.com https://insights.hotjar.com; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests" diff --git a/script/verify_security_headers.rb b/script/verify_security_headers.rb index d137a52..d090e4f 100644 --- a/script/verify_security_headers.rb +++ b/script/verify_security_headers.rb @@ -12,7 +12,7 @@ def integrity_for(path) script_integrities = { '/js/gtm.js' => 'sha256-KOs83E8sWN0ZSanqdvyKqXPbanqGOxQAEZPz+lkrVh4=', '/js/search.js' => 'sha256-Cn9RZi6b09IrtHxo4SOhpbbX/E5ZK+VAFUrpZMFjghg=', - '/js/article-navigation.js' => 'sha256-n5SVYPnptA4t2JJaq3b+FC0eYX8KPygyM8jq7/XtIi0=', + '/js/article-navigation.js' => 'sha256-wCYJmMu4lFJ6xS8zGIftK+/iSWhmPjnRowWepgy5lUQ=', '/js/article-feedback.js' => 'sha256-AlC35S17jo/t3ripYSesMGbb0n4TCpeu1H+vT7O2UnM=' }