Fix spacing between words

Author: caspear

index.html

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

style.css

@@ -238,31 +238,33 @@ p a:hover {
   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 */
+  white-space: pre;
 }
-/* caret for the typewrite effect (moved from JS injection) */
 .typewrite > .wrap {
   border-right: 0.08em solid currentColor;
 }
-/* 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;
 }
+
+.section.section--hello .hello-text {
+  display: inline-block;
+  margin-right: 0.5rem;
+}
 @media (max-width: 520px) {
   .section.section--hello .block h1 {
     display: block;
-    white-space: normal; /* allow wrapping on small screens */
+    white-space: normal;
   }
 }
 @keyframes cursor {