Tidied up hello text - fixed wrapping, shifting on hover, etc.

Author: caspear

index.html

@@ -27,9 +27,9 @@
             <img src="LOGO-DIGITALCIRCLE.png" alt="The Digital Circle">
         <div class="block">
             <h1>
-              We love <a href="" class="typewrite" data-period="2000" data-type='[ "permaculture. ", "open source. " ]'>
-                <span class="wrap"></span>
-              </a>
+                            We love <span class="typewrite" data-period="2000" data-type='[ "permaculture. ", "open source. " ]' aria-live="polite">
+                                <span class="wrap" aria-hidden="true"></span>
+                            </span>
             </h1>
         </div>
     </div>

style.css

@@ -5,7 +5,7 @@ html {
   font-style: normal;
   color: #222;
   font-size: 16px;
-  font-size: clamp(18px, 3.0vw, 40px);
+  font-size: clamp(18px, 2.2vw, 40px);
 }
 
 *, *::before, *::after {
@@ -237,6 +237,30 @@ p a:hover {
   animation: cursor 1s ease-in-out infinite;
   font-weight: bold;
 }
+
+/* Prevent the typewriter/typewrite text from wrapping unexpectedly */
+.typewrite {
+  display: inline-block;
+  white-space: nowrap;
+}
+.typewrite > .wrap {
+  white-space: pre; /* preserve intentional spaces */
+}
+/* Keep the hello heading (and its typewrite content) on one line when space allows */
+/* keep the hello heading on one line when there's room; use flex to avoid inline wrapping glitches */
+.section.section--hello .block h1 {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+@media (max-width: 520px) {
+  .section.section--hello .block h1 {
+    display: block;
+    white-space: normal; /* allow wrapping on small screens */
+  }
+}
 @keyframes cursor {
   from { border-color: #ffe509; }
   to { border-color: transparent; }