auto resize title on char count

css/orlygenerator.css

@@ -6,7 +6,7 @@
 	--size: 700px;
 	--ratio: 1.41421356237; /* sqrt(2) */
 	/* Container dimensions */
-	--title-container: 25%;
+	--title-container: 8rem;
 	/* Text- dimensions */
 	--title: 3rem;
 	--subtitle: 1.4rem;
@@ -27,7 +27,7 @@ html, body {
 
 body {
 	align-items: center;
-	background-image: radial-gradient(#EEE 0, #EAEAEA 15%, #FFF 60%);
+	background-image: radial-gradient(#EEE 0, #EAEAEA 15%, #D0D0D0 60%);
 	display: flex;
 	flex-direction: column;
 	font-family: sans-serif;
@@ -106,7 +106,7 @@ h1 {
 	bottom: calc(var(--text) + (2 * var(--margin)) + var(--subtitle));
 	display: flex;
 	height: var(--title-container);
-	justify-content: center;
+	justify-content: left;
 	margin-bottom: calc(var(--margin) / 4);
 	padding: var(--padding) var(--margin);
 	position: absolute;
@@ -184,6 +184,7 @@ label, input, select {
 }
 
 label {
+	color: #3C405D;
 	font-size: .9rem;
 	font-style: italic;
 }
@@ -230,19 +231,21 @@ label + img {
 
 button {
 	background-color: transparent;
-	border: solid 1px rgb(142, 142, 142);
+	border: solid 2px rgb(142, 142, 142);
 	border-radius: .3rem;
+	color: #3C405D;
 	cursor: pointer;
 	padding: calc(var(--padding) / 2);
 	margin-top: var(--margin);
-	transition: background-color .3s ease;
+	transition: background-color .3s ease, color .3s ease;
 	width: 100%;
 }
 
 button:active,
 button:focus,
 button:hover {
-	background-color: rgb(235, 235, 235);
+	background-color: #7DE484;
+	color: #21252B;
 }
 
 /* Reponsive rules */

index.html

@@ -87,13 +87,13 @@ <h1>O'Rly Generator</h1>
 		<img src="img/icons/v-flip.svg" id="v-flip-image" alt="v-flip-image">
 		<br><br> <!-- Since inline block for flip img, we need to line break manually -->
 		<label for="input-header">Header:</label>
-		<input id="input-header" type="text" name="input-header" value="It's only a clever hack if you're the one who wrote it">
+		<input id="input-header" type="text" name="input-header" maxlength="66" value="It's only a clever hack if you're the one who wrote it">
 		<label for="input-title">Title:</label>
-		<input id="input-title" type="text" name="input-title" value="Hating Other People's Code">
+		<input id="input-title" type="text" name="input-title" maxlength="64" value="Hating Other People's Code">
 		<label for="input-subtitle">Subtitle:</label>
-		<input id="input-subtitle" type="text" name="input-subtitle" value="You ARE the alpha programmer">
+		<input id="input-subtitle" type="text" name="input-subtitle" maxlength="70" value="You ARE the alpha programmer">
 		<label for="input-signature">Signature:</label>
-		<input id="input-signature" type="text" name="input-signature" value="">		
+		<input id="input-signature" type="text" name="input-signature" maxlength="60" value="">
 		<button id="download">Download image</button>
 	</div>
 </div>

js/orlygenerator.js

@@ -1,7 +1,7 @@
 /*  -----  Text manipulation  -----  */
 
 // Method to init field in output and set listener on input
-const editTextListener = (value) => {
+const registerTextElement = (value) => {
   const element = document.getElementById(`preview-${value}`);
   const input = document.getElementById(`input-${value}`);
   const savedValue = localStorage.getItem(`input-${value}`);
@@ -15,13 +15,30 @@ const editTextListener = (value) => {
   input.addEventListener('input', () => {
     element.innerHTML = input.value;
     localStorage.setItem(`${input.name}`, input.value);
+    // Handle title container resize with letter count
+    if (element.id === 'preview-title') {
+      if (element.innerHTML.length > 50) {
+        document.body.style.setProperty('--title-container', '16rem');
+      } else if (element.innerHTML.length > 25) {
+        document.body.style.setProperty('--title-container', '12rem');
+      } else {
+        document.body.style.setProperty('--title-container', '8rem');
+      }
+    }
   });
 };
 // Make input fields interactive
-editTextListener('header'); // Header, italic on top of output
-editTextListener('title'); // Title, in colored jumbotron
-editTextListener('subtitle'); // Subtitle, right aligned under the jumbotron
-editTextListener('signature'); // Signature, right aligned under the subtitle
+registerTextElement('header'); // Header, italic on top of output
+registerTextElement('title'); // Title, in colored jumbotron
+registerTextElement('subtitle'); // Subtitle, right aligned under the jumbotron
+registerTextElement('signature'); // Signature, right aligned under the subtitle
+
+const element = document.getElementById('preview-title')
+if (element.innerHTML.length > 50) {
+  document.body.style.setProperty('--title-container', '16rem');
+} else if (element.innerHTML.length > 25) {
+  document.body.style.setProperty('--title-container', '12rem');
+}
 
 /*  -----  Color manipulation  -----  */