From 6db43fa0bf4a839d95d20f4ac2cb54a24780db2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Contreras?= Date: Fri, 28 Jun 2024 02:50:46 -0500 Subject: [PATCH] style: Refactor CSS to improve readability and maintainability --- css/style.css | 78 +++++++++++++++++++++++++++++ index.html | 133 +------------------------------------------------- js/text.js | 49 +++++++++++++++++++ 3 files changed, 129 insertions(+), 131 deletions(-) create mode 100644 css/style.css create mode 100644 js/text.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..515eaf2 --- /dev/null +++ b/css/style.css @@ -0,0 +1,78 @@ +* { + margin: 0; + padding: 0; + background-color: #1f1f1f; +} +body{ + overflow:hidden; +} +.container { + background-color: #fff; + border: 1px solid #ababab; + height: 500px; + width: 500px; + margin: 0; + padding: 0 20px; + box-sizing: border-box; + display: flex; + align-items: flex-start; + justify-content: center; + overflow: hidden; + margin: 20px 0; + -webkit-user-select: none; + -webkit-user-drag: none; + -webkit-app-region: no-drag; + cursor: default; +} + +.text { + background-color: #fff; + text-align: justify; + text-justify: inter-word; + font-size: 60px; + filter: blur(2px); + font-family: Arial; + font-stretch: ultra-condensed; + margin: 20px; +} +h1 { + color: #ece8e8; + text-align: justify; + text-justify: inter-word; + font-size: 60px; + font-family: Arial; + font-stretch: ultra-condensed; + margin: 0; +} +h3{ + color:#696969; + font-size:12px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + padding-bottom: 20px; +} +input { + color: #ece8e8; + background-color: #2e2e2e; + border: 0; + outline: none; + height: 30px; + width: 500px; +} +.center { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; +} +.social-networks { + display: flex; + justify-content: center; + margin-top: 20px; +} +.social-networks i { + font-size: 40px; + color: #ece8e8; + margin: 0 10px; + cursor: pointer; +} \ No newline at end of file diff --git a/index.html b/index.html index 27e1fe0..5c607aa 100644 --- a/index.html +++ b/index.html @@ -1,86 +1,7 @@ - + @@ -106,56 +27,6 @@

(screenshot to save the image)

- + diff --git a/js/text.js b/js/text.js new file mode 100644 index 0000000..ee95041 --- /dev/null +++ b/js/text.js @@ -0,0 +1,49 @@ +function adjustTextSize() { + const container = document.getElementById("container"); + const text = document.getElementById("text"); + + text.style.fontSize = "50px"; + text.style.lineHeight = "normal"; + + const textClone = text.cloneNode(true); + textClone.style.visibility = "hidden"; + textClone.style.position = "absolute"; + textClone.style.lineHeight = "normal"; + textClone.style.width = container.clientWidth + "px"; + container.appendChild(textClone); + + let fontSize = parseInt(window.getComputedStyle(text).fontSize, 10); + const containerHeight = container.clientHeight; + const containerWidth = container.clientWidth; + let textHeight, textWidth; + + do { + textHeight = textClone.scrollHeight; + textWidth = textClone.scrollWidth; + + if (textHeight > containerHeight || textWidth > containerWidth) { + fontSize -= 1; + textClone.style.fontSize = fontSize + "px"; + } else { + break; + } + } while (fontSize > 0); + + text.style.fontSize = fontSize + "px"; + textClone.style.fontSize = fontSize + "px"; + textHeight = textClone.scrollHeight; + const newLineHeight = containerHeight / (textHeight / fontSize); + text.style.lineHeight = (newLineHeight > fontSize ? newLineHeight : fontSize) + "px"; + container.removeChild(textClone); +} + +function updateText() { + const textInput = document.getElementById("textInput"); + const text = document.getElementById("text"); + + text.textContent = textInput.value; + adjustTextSize(); +} + +window.onload = adjustTextSize; +window.onresize = adjustTextSize; \ No newline at end of file