diff --git a/public/fonts/Geist-mono/GeistMono-Black.woff2 b/public/fonts/Geist-mono/GeistMono-Black.woff2 new file mode 100644 index 0000000..44b4582 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-Black.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-BlackItalic.woff2 b/public/fonts/Geist-mono/GeistMono-BlackItalic.woff2 new file mode 100644 index 0000000..c754d5c Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-BlackItalic.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-Bold.woff2 b/public/fonts/Geist-mono/GeistMono-Bold.woff2 new file mode 100644 index 0000000..d8ed52d Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-Bold.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-BoldItalic.woff2 b/public/fonts/Geist-mono/GeistMono-BoldItalic.woff2 new file mode 100644 index 0000000..d7ca574 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-BoldItalic.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-ExtraBold.woff2 b/public/fonts/Geist-mono/GeistMono-ExtraBold.woff2 new file mode 100644 index 0000000..410a931 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-ExtraBold.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-ExtraBoldItalic.woff2 b/public/fonts/Geist-mono/GeistMono-ExtraBoldItalic.woff2 new file mode 100644 index 0000000..7567ed4 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-ExtraBoldItalic.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-ExtraLight.woff2 b/public/fonts/Geist-mono/GeistMono-ExtraLight.woff2 new file mode 100644 index 0000000..5730816 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-ExtraLight.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-ExtraLightItalic.woff2 b/public/fonts/Geist-mono/GeistMono-ExtraLightItalic.woff2 new file mode 100644 index 0000000..885be50 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-ExtraLightItalic.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-Italic.woff2 b/public/fonts/Geist-mono/GeistMono-Italic.woff2 new file mode 100644 index 0000000..2b6328b Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-Italic.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-Italic[wght].woff2 b/public/fonts/Geist-mono/GeistMono-Italic[wght].woff2 new file mode 100644 index 0000000..8795c26 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-Italic[wght].woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-Light.woff2 b/public/fonts/Geist-mono/GeistMono-Light.woff2 new file mode 100644 index 0000000..fd9ad48 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-Light.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-LightItalic.woff2 b/public/fonts/Geist-mono/GeistMono-LightItalic.woff2 new file mode 100644 index 0000000..373be05 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-LightItalic.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-Medium.woff2 b/public/fonts/Geist-mono/GeistMono-Medium.woff2 new file mode 100644 index 0000000..d16f229 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-Medium.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-MediumItalic.woff2 b/public/fonts/Geist-mono/GeistMono-MediumItalic.woff2 new file mode 100644 index 0000000..0bb5004 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-MediumItalic.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-Regular.woff2 b/public/fonts/Geist-mono/GeistMono-Regular.woff2 new file mode 100644 index 0000000..1b694fe Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-Regular.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-SemiBold.woff2 b/public/fonts/Geist-mono/GeistMono-SemiBold.woff2 new file mode 100644 index 0000000..e420d39 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-SemiBold.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-SemiBoldItalic.woff2 b/public/fonts/Geist-mono/GeistMono-SemiBoldItalic.woff2 new file mode 100644 index 0000000..24e32b7 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-SemiBoldItalic.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-Thin.woff2 b/public/fonts/Geist-mono/GeistMono-Thin.woff2 new file mode 100644 index 0000000..8104fa3 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-Thin.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono-ThinItalic.woff2 b/public/fonts/Geist-mono/GeistMono-ThinItalic.woff2 new file mode 100644 index 0000000..fc946f2 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono-ThinItalic.woff2 differ diff --git a/public/fonts/Geist-mono/GeistMono[wght].woff2 b/public/fonts/Geist-mono/GeistMono[wght].woff2 new file mode 100644 index 0000000..b96b7d4 Binary files /dev/null and b/public/fonts/Geist-mono/GeistMono[wght].woff2 differ diff --git a/public/fonts/Geist-mono/stylesheet.css b/public/fonts/Geist-mono/stylesheet.css new file mode 100644 index 0000000..e3eb0dd --- /dev/null +++ b/public/fonts/Geist-mono/stylesheet.css @@ -0,0 +1,180 @@ +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Italic.woff2') format('woff2'), + url('GeistMono-Italic.woff') format('woff'); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ThinItalic.woff2') format('woff2'), + url('GeistMono-ThinItalic.woff') format('woff'); + font-weight: 100; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ExtraLightItalic.woff2') format('woff2'), + url('GeistMono-ExtraLightItalic.woff') format('woff'); + font-weight: 200; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-SemiBold.woff2') format('woff2'), + url('GeistMono-SemiBold.woff') format('woff'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Regular.woff2') format('woff2'), + url('GeistMono-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-SemiBoldItalic.woff2') format('woff2'), + url('GeistMono-SemiBoldItalic.woff') format('woff'); + font-weight: 600; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Italic.woff2') format('woff2'), + url('GeistMono-Italic.woff') format('woff'); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-BoldItalic.woff2') format('woff2'), + url('GeistMono-BoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-MediumItalic.woff2') format('woff2'), + url('GeistMono-MediumItalic.woff') format('woff'); + font-weight: 500; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-BlackItalic.woff2') format('woff2'), + url('GeistMono-BlackItalic.woff') format('woff'); + font-weight: 900; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Thin.woff2') format('woff2'), + url('GeistMono-Thin.woff') format('woff'); + font-weight: 100; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Bold.woff2') format('woff2'), + url('GeistMono-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-LightItalic.woff2') format('woff2'), + url('GeistMono-LightItalic.woff') format('woff'); + font-weight: 300; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ExtraBoldItalic.woff2') format('woff2'), + url('GeistMono-ExtraBoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Black.woff2') format('woff2'), + url('GeistMono-Black.woff') format('woff'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ExtraBold.woff2') format('woff2'), + url('GeistMono-ExtraBold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ExtraLight.woff2') format('woff2'), + url('GeistMono-ExtraLight.woff') format('woff'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Regular.woff2') format('woff2'), + url('GeistMono-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Medium.woff2') format('woff2'), + url('GeistMono-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Light.woff2') format('woff2'), + url('GeistMono-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + diff --git a/public/js/afterLayout.js b/public/js/afterLayout.js index 3e0b592..066a46b 100644 --- a/public/js/afterLayout.js +++ b/public/js/afterLayout.js @@ -8,7 +8,225 @@ export default class after extends Handler { } afterPageLayout(pageElement, page, breakToken) { - + lines(pageElement, ".title, .subtitle, p"); + letters(pageElement, ".title, .subtitle, p"); + // applyFontSizes(pageElement, ".title, .subtitle"); + // grossiPara(pageElement, "p"); } } + +function getRandomLineLength() { + return Math.floor(Math.random() * (34 - 20 + 1)) + 20; +} + + +function letters(content, elements){ + console.log("letters"); + let selectedElements = content.querySelectorAll(elements); + selectedElements.forEach(function(element) { + console.log("Type:", element.tagName, element); + + // Vérifier si des span.line existent déjà + let lineSpans = element.querySelectorAll('.line'); + + if (lineSpans.length > 0) { + // Si des lignes existent, appliquer les lettres à chaque ligne + lineSpans.forEach(function(lineSpan) { + let text = lineSpan.textContent; + let chars = text.split(''); + + lineSpan.innerHTML = ''; + chars.forEach(function(char) { + let letterSpan = document.createElement('span'); + letterSpan.className = 'letter'; + letterSpan.textContent = char; + lineSpan.appendChild(letterSpan); + }); + }); + console.log("Caractères appliqués dans", lineSpans.length, "lignes"); + } else { + // Sinon, appliquer directement sur l'élément + let text = element.textContent; + let chars = text.split(''); + + element.innerHTML = ''; + chars.forEach(function(char) { + let letterSpan = document.createElement('span'); + letterSpan.className = 'letter'; + letterSpan.textContent = char; + element.appendChild(letterSpan); + }); + console.log("Caractères traités:", chars.length); + } + }); +} + + +function grossiPara(content, elements){ + console.log("grossiPara"); + let selectedElements = content.querySelectorAll(elements); + selectedElements.forEach(function(element) { + + // Trouver toutes les lignes + let lineSpans = element.querySelectorAll('.line'); + + if (lineSpans.length > 0) { + // Appliquer les tailles pour chaque ligne + lineSpans.forEach(function(lineSpan) { + let letterSpans = lineSpan.querySelectorAll('.letter'); + let length = letterSpans.length; + + letterSpans.forEach(function(letterSpan, i) { + // Progression linéaire de 10px à 28px + let ratio = i / (length - 1); + let fontSize = 10 + (28 - 10) * ratio; + + letterSpan.style.fontSize = fontSize + 'px'; + }); + }); + console.log("Progression appliquée sur", lineSpans.length, "lignes"); + } else { + // Sinon, appliquer directement sur les lettres de l'élément + let letterSpans = element.querySelectorAll('.letter'); + let length = letterSpans.length; + + letterSpans.forEach(function(letterSpan, i) { + // Progression linéaire de 10px à 28px + let ratio = i / (length - 1); + let fontSize = 10 + (28 - 10) * ratio; + + letterSpan.style.fontSize = fontSize + 'px'; + }); + console.log("Progression appliquée sur", length, "lettres"); + } + }); +} + +function applyFontSizes(content, elements){ + console.log("applyFontSizes"); + let selectedElements = content.querySelectorAll(elements); + selectedElements.forEach(function(element) { + + // Trouver toutes les lignes + let lineSpans = element.querySelectorAll('.line'); + + if (lineSpans.length > 0) { + // Appliquer les tailles pour chaque ligne + lineSpans.forEach(function(lineSpan) { + // Chaque ligne a son propre maxSize aléatoire + let maxSize = getRandomLineLength(); + console.log("Max size pour cette ligne:", maxSize); + + let letterSpans = lineSpan.querySelectorAll('.letter'); + let length = letterSpans.length; + + // Position aléatoire du pic entre 30% et 70% de la ligne + let peakPosition = Math.random() * (0.7 - 0.3) + 0.3; + let peak = length * peakPosition; + console.log("Pic à la position:", Math.round(peak), "sur", length); + + letterSpans.forEach(function(letterSpan, i) { + // Calculer la taille en fonction de la distance au pic + let distanceFromPeak = Math.abs(i - peak); + let maxDistance = Math.max(peak, length - peak); + let ratio = 1 - (distanceFromPeak / maxDistance); + let fontSize = 9 + (maxSize - 9) * ratio; + + letterSpan.style.fontSize = fontSize + 'px'; + }); + }); + console.log("Tailles appliquées sur", lineSpans.length, "lignes"); + } else { + // Sinon, appliquer directement sur les lettres de l'élément + let maxSize = getRandomLineLength(); + console.log("Max size pour cet élément:", maxSize); + + let letterSpans = element.querySelectorAll('.letter'); + let length = letterSpans.length; + + // Position aléatoire du pic entre 30% et 70% de la ligne + let peakPosition = Math.random() * (0.7 - 0.3) + 0.3; + let peak = length * peakPosition; + console.log("Pic à la position:", Math.round(peak), "sur", length); + + letterSpans.forEach(function(letterSpan, i) { + // Calculer la taille en fonction de la distance au pic + let distanceFromPeak = Math.abs(i - peak); + let maxDistance = Math.max(peak, length - peak); + let ratio = 1 - (distanceFromPeak / maxDistance); + let fontSize = 9 + (maxSize - 9) * ratio; + + letterSpan.style.fontSize = fontSize + 'px'; + }); + console.log("Tailles appliquées sur", length, "lettres"); + } + }); +} + + +function lines(content, elements){ + console.log("lines"); + let selectedElements = content.querySelectorAll(elements); + selectedElements.forEach(function(element) { + console.log("Type:", element.tagName, element); + + let text = element.textContent; + + // Créer des spans temporaires pour chaque mot afin de mesurer leur position + let words = text.split(/(\s+)/); // Garde les espaces + element.innerHTML = ''; + + let wordElements = []; + words.forEach(function(word) { + if (word.length > 0) { // Ignorer les chaînes vides + let span = document.createElement('span'); + span.textContent = word; + span.style.display = 'inline'; + element.appendChild(span); + + let rect = span.getBoundingClientRect(); + wordElements.push({ + element: span, + word: word, + top: Math.round(rect.top) + }); + } + }); + + // Grouper les mots par ligne avec une tolérance de 2px + let lines = []; + let currentLine = []; + let currentTop = null; + + wordElements.forEach(function(wordObj) { + if (currentTop === null || Math.abs(wordObj.top - currentTop) <= 2) { + currentLine.push(wordObj.word); + if (currentTop === null) { + currentTop = wordObj.top; + } + } else { + lines.push(currentLine.join('')); + currentLine = [wordObj.word]; + currentTop = wordObj.top; + } + }); + + if (currentLine.length > 0) { + lines.push(currentLine.join('')); + } + + // Reconstruire l'élément avec des span.line + element.innerHTML = ''; + lines.forEach(function(lineText) { + let lineSpan = document.createElement('span'); + lineSpan.className = 'line'; + lineSpan.style.display = 'block'; + lineSpan.textContent = lineText; + element.appendChild(lineSpan); + }); + + console.log("Lignes détectées:", lines.length); + }); +} + diff --git a/static/fonts/geist-mono/GeistMono-Black.woff2 b/static/fonts/geist-mono/GeistMono-Black.woff2 new file mode 100644 index 0000000..44b4582 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-Black.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-BlackItalic.woff2 b/static/fonts/geist-mono/GeistMono-BlackItalic.woff2 new file mode 100644 index 0000000..c754d5c Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-BlackItalic.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-Bold.woff2 b/static/fonts/geist-mono/GeistMono-Bold.woff2 new file mode 100644 index 0000000..d8ed52d Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-Bold.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-BoldItalic.woff2 b/static/fonts/geist-mono/GeistMono-BoldItalic.woff2 new file mode 100644 index 0000000..d7ca574 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-BoldItalic.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-ExtraBold.woff2 b/static/fonts/geist-mono/GeistMono-ExtraBold.woff2 new file mode 100644 index 0000000..410a931 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-ExtraBold.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-ExtraBoldItalic.woff2 b/static/fonts/geist-mono/GeistMono-ExtraBoldItalic.woff2 new file mode 100644 index 0000000..7567ed4 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-ExtraBoldItalic.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-ExtraLight.woff2 b/static/fonts/geist-mono/GeistMono-ExtraLight.woff2 new file mode 100644 index 0000000..5730816 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-ExtraLight.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-ExtraLightItalic.woff2 b/static/fonts/geist-mono/GeistMono-ExtraLightItalic.woff2 new file mode 100644 index 0000000..885be50 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-ExtraLightItalic.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-Italic.woff2 b/static/fonts/geist-mono/GeistMono-Italic.woff2 new file mode 100644 index 0000000..2b6328b Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-Italic.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-Italic[wght].woff2 b/static/fonts/geist-mono/GeistMono-Italic[wght].woff2 new file mode 100644 index 0000000..8795c26 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-Italic[wght].woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-Light.woff2 b/static/fonts/geist-mono/GeistMono-Light.woff2 new file mode 100644 index 0000000..fd9ad48 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-Light.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-LightItalic.woff2 b/static/fonts/geist-mono/GeistMono-LightItalic.woff2 new file mode 100644 index 0000000..373be05 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-LightItalic.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-Medium.woff2 b/static/fonts/geist-mono/GeistMono-Medium.woff2 new file mode 100644 index 0000000..d16f229 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-Medium.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-MediumItalic.woff2 b/static/fonts/geist-mono/GeistMono-MediumItalic.woff2 new file mode 100644 index 0000000..0bb5004 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-MediumItalic.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-Regular.woff2 b/static/fonts/geist-mono/GeistMono-Regular.woff2 new file mode 100644 index 0000000..1b694fe Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-Regular.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-SemiBold.woff2 b/static/fonts/geist-mono/GeistMono-SemiBold.woff2 new file mode 100644 index 0000000..e420d39 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-SemiBold.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-SemiBoldItalic.woff2 b/static/fonts/geist-mono/GeistMono-SemiBoldItalic.woff2 new file mode 100644 index 0000000..24e32b7 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-SemiBoldItalic.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-Thin.woff2 b/static/fonts/geist-mono/GeistMono-Thin.woff2 new file mode 100644 index 0000000..8104fa3 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-Thin.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono-ThinItalic.woff2 b/static/fonts/geist-mono/GeistMono-ThinItalic.woff2 new file mode 100644 index 0000000..fc946f2 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono-ThinItalic.woff2 differ diff --git a/static/fonts/geist-mono/GeistMono[wght].woff2 b/static/fonts/geist-mono/GeistMono[wght].woff2 new file mode 100644 index 0000000..b96b7d4 Binary files /dev/null and b/static/fonts/geist-mono/GeistMono[wght].woff2 differ diff --git a/static/fonts/geist-mono/stylesheet.css b/static/fonts/geist-mono/stylesheet.css new file mode 100644 index 0000000..e3eb0dd --- /dev/null +++ b/static/fonts/geist-mono/stylesheet.css @@ -0,0 +1,180 @@ +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Italic.woff2') format('woff2'), + url('GeistMono-Italic.woff') format('woff'); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ThinItalic.woff2') format('woff2'), + url('GeistMono-ThinItalic.woff') format('woff'); + font-weight: 100; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ExtraLightItalic.woff2') format('woff2'), + url('GeistMono-ExtraLightItalic.woff') format('woff'); + font-weight: 200; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-SemiBold.woff2') format('woff2'), + url('GeistMono-SemiBold.woff') format('woff'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Regular.woff2') format('woff2'), + url('GeistMono-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-SemiBoldItalic.woff2') format('woff2'), + url('GeistMono-SemiBoldItalic.woff') format('woff'); + font-weight: 600; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Italic.woff2') format('woff2'), + url('GeistMono-Italic.woff') format('woff'); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-BoldItalic.woff2') format('woff2'), + url('GeistMono-BoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-MediumItalic.woff2') format('woff2'), + url('GeistMono-MediumItalic.woff') format('woff'); + font-weight: 500; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-BlackItalic.woff2') format('woff2'), + url('GeistMono-BlackItalic.woff') format('woff'); + font-weight: 900; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Thin.woff2') format('woff2'), + url('GeistMono-Thin.woff') format('woff'); + font-weight: 100; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Bold.woff2') format('woff2'), + url('GeistMono-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-LightItalic.woff2') format('woff2'), + url('GeistMono-LightItalic.woff') format('woff'); + font-weight: 300; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ExtraBoldItalic.woff2') format('woff2'), + url('GeistMono-ExtraBoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Black.woff2') format('woff2'), + url('GeistMono-Black.woff') format('woff'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ExtraBold.woff2') format('woff2'), + url('GeistMono-ExtraBold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ExtraLight.woff2') format('woff2'), + url('GeistMono-ExtraLight.woff') format('woff'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Regular.woff2') format('woff2'), + url('GeistMono-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Medium.woff2') format('woff2'), + url('GeistMono-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Light.woff2') format('woff2'), + url('GeistMono-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + diff --git a/static/js/afterLayout.js b/static/js/afterLayout.js index 3e0b592..066a46b 100644 --- a/static/js/afterLayout.js +++ b/static/js/afterLayout.js @@ -8,7 +8,225 @@ export default class after extends Handler { } afterPageLayout(pageElement, page, breakToken) { - + lines(pageElement, ".title, .subtitle, p"); + letters(pageElement, ".title, .subtitle, p"); + // applyFontSizes(pageElement, ".title, .subtitle"); + // grossiPara(pageElement, "p"); } } + +function getRandomLineLength() { + return Math.floor(Math.random() * (34 - 20 + 1)) + 20; +} + + +function letters(content, elements){ + console.log("letters"); + let selectedElements = content.querySelectorAll(elements); + selectedElements.forEach(function(element) { + console.log("Type:", element.tagName, element); + + // Vérifier si des span.line existent déjà + let lineSpans = element.querySelectorAll('.line'); + + if (lineSpans.length > 0) { + // Si des lignes existent, appliquer les lettres à chaque ligne + lineSpans.forEach(function(lineSpan) { + let text = lineSpan.textContent; + let chars = text.split(''); + + lineSpan.innerHTML = ''; + chars.forEach(function(char) { + let letterSpan = document.createElement('span'); + letterSpan.className = 'letter'; + letterSpan.textContent = char; + lineSpan.appendChild(letterSpan); + }); + }); + console.log("Caractères appliqués dans", lineSpans.length, "lignes"); + } else { + // Sinon, appliquer directement sur l'élément + let text = element.textContent; + let chars = text.split(''); + + element.innerHTML = ''; + chars.forEach(function(char) { + let letterSpan = document.createElement('span'); + letterSpan.className = 'letter'; + letterSpan.textContent = char; + element.appendChild(letterSpan); + }); + console.log("Caractères traités:", chars.length); + } + }); +} + + +function grossiPara(content, elements){ + console.log("grossiPara"); + let selectedElements = content.querySelectorAll(elements); + selectedElements.forEach(function(element) { + + // Trouver toutes les lignes + let lineSpans = element.querySelectorAll('.line'); + + if (lineSpans.length > 0) { + // Appliquer les tailles pour chaque ligne + lineSpans.forEach(function(lineSpan) { + let letterSpans = lineSpan.querySelectorAll('.letter'); + let length = letterSpans.length; + + letterSpans.forEach(function(letterSpan, i) { + // Progression linéaire de 10px à 28px + let ratio = i / (length - 1); + let fontSize = 10 + (28 - 10) * ratio; + + letterSpan.style.fontSize = fontSize + 'px'; + }); + }); + console.log("Progression appliquée sur", lineSpans.length, "lignes"); + } else { + // Sinon, appliquer directement sur les lettres de l'élément + let letterSpans = element.querySelectorAll('.letter'); + let length = letterSpans.length; + + letterSpans.forEach(function(letterSpan, i) { + // Progression linéaire de 10px à 28px + let ratio = i / (length - 1); + let fontSize = 10 + (28 - 10) * ratio; + + letterSpan.style.fontSize = fontSize + 'px'; + }); + console.log("Progression appliquée sur", length, "lettres"); + } + }); +} + +function applyFontSizes(content, elements){ + console.log("applyFontSizes"); + let selectedElements = content.querySelectorAll(elements); + selectedElements.forEach(function(element) { + + // Trouver toutes les lignes + let lineSpans = element.querySelectorAll('.line'); + + if (lineSpans.length > 0) { + // Appliquer les tailles pour chaque ligne + lineSpans.forEach(function(lineSpan) { + // Chaque ligne a son propre maxSize aléatoire + let maxSize = getRandomLineLength(); + console.log("Max size pour cette ligne:", maxSize); + + let letterSpans = lineSpan.querySelectorAll('.letter'); + let length = letterSpans.length; + + // Position aléatoire du pic entre 30% et 70% de la ligne + let peakPosition = Math.random() * (0.7 - 0.3) + 0.3; + let peak = length * peakPosition; + console.log("Pic à la position:", Math.round(peak), "sur", length); + + letterSpans.forEach(function(letterSpan, i) { + // Calculer la taille en fonction de la distance au pic + let distanceFromPeak = Math.abs(i - peak); + let maxDistance = Math.max(peak, length - peak); + let ratio = 1 - (distanceFromPeak / maxDistance); + let fontSize = 9 + (maxSize - 9) * ratio; + + letterSpan.style.fontSize = fontSize + 'px'; + }); + }); + console.log("Tailles appliquées sur", lineSpans.length, "lignes"); + } else { + // Sinon, appliquer directement sur les lettres de l'élément + let maxSize = getRandomLineLength(); + console.log("Max size pour cet élément:", maxSize); + + let letterSpans = element.querySelectorAll('.letter'); + let length = letterSpans.length; + + // Position aléatoire du pic entre 30% et 70% de la ligne + let peakPosition = Math.random() * (0.7 - 0.3) + 0.3; + let peak = length * peakPosition; + console.log("Pic à la position:", Math.round(peak), "sur", length); + + letterSpans.forEach(function(letterSpan, i) { + // Calculer la taille en fonction de la distance au pic + let distanceFromPeak = Math.abs(i - peak); + let maxDistance = Math.max(peak, length - peak); + let ratio = 1 - (distanceFromPeak / maxDistance); + let fontSize = 9 + (maxSize - 9) * ratio; + + letterSpan.style.fontSize = fontSize + 'px'; + }); + console.log("Tailles appliquées sur", length, "lettres"); + } + }); +} + + +function lines(content, elements){ + console.log("lines"); + let selectedElements = content.querySelectorAll(elements); + selectedElements.forEach(function(element) { + console.log("Type:", element.tagName, element); + + let text = element.textContent; + + // Créer des spans temporaires pour chaque mot afin de mesurer leur position + let words = text.split(/(\s+)/); // Garde les espaces + element.innerHTML = ''; + + let wordElements = []; + words.forEach(function(word) { + if (word.length > 0) { // Ignorer les chaînes vides + let span = document.createElement('span'); + span.textContent = word; + span.style.display = 'inline'; + element.appendChild(span); + + let rect = span.getBoundingClientRect(); + wordElements.push({ + element: span, + word: word, + top: Math.round(rect.top) + }); + } + }); + + // Grouper les mots par ligne avec une tolérance de 2px + let lines = []; + let currentLine = []; + let currentTop = null; + + wordElements.forEach(function(wordObj) { + if (currentTop === null || Math.abs(wordObj.top - currentTop) <= 2) { + currentLine.push(wordObj.word); + if (currentTop === null) { + currentTop = wordObj.top; + } + } else { + lines.push(currentLine.join('')); + currentLine = [wordObj.word]; + currentTop = wordObj.top; + } + }); + + if (currentLine.length > 0) { + lines.push(currentLine.join('')); + } + + // Reconstruire l'élément avec des span.line + element.innerHTML = ''; + lines.forEach(function(lineText) { + let lineSpan = document.createElement('span'); + lineSpan.className = 'line'; + lineSpan.style.display = 'block'; + lineSpan.textContent = lineText; + element.appendChild(lineSpan); + }); + + console.log("Lignes détectées:", lines.length); + }); +} +