Merge pull request #9 from 42devops/feat/hero-handwritten-compass

feat: update hero section with centered compass handwritten annotations

Author: iasonliu

css/neat-annotations.css

@@ -34,13 +34,12 @@
   max-width: var(--ann-label-max-width);
   transform: rotate(var(--ann-rotate));
   font-family: var(--ann-font);
-  font-size: 0.92rem;
-  font-weight: 500;
+  font-size: var(--ann-font-size, 0.95rem);
+  font-weight: var(--ann-font-weight, 500);
   line-height: 1.1;
   color: var(--ann-color);
   opacity: .95;
-  white-space: normal;
-  overflow-wrap: anywhere;
+  white-space: nowrap;
   pointer-events: none;
 }
 
@@ -58,11 +57,13 @@
   pointer-events: none;
 }
 
-.ann:not([data-note])::before,
+.ann:not([data-note]):not(.ann-arrow-only)::before,
 .ann:not([data-note])::after,
-.ann[data-note=""]::before,
+.ann[data-note=""]:not(.ann-arrow-only)::before,
 .ann[data-note=""]::after { display: none; }
 
+.ann-arrow-only::before { display: block !important; }
+
 .ann-amber { --ann-color: #d97706; --ann-mark: light-dark(color-mix(in oklch, #ffb000 14%, transparent), color-mix(in oklch, #ffb000 22%, transparent)); }
 .ann-blue { --ann-color: #2563eb; }
 .ann-green { --ann-color: #16a34a; }

index.html

@@ -3,14 +3,20 @@
 title: "42DevOps | Infrastructure & Engineering Notes"
 ---
 
-<section class="hero-banner">
-  <h1 class="hero-title">
-    DevOps, Infrastructure <br/>
-    &amp; <span class="ann ann-n ann-amber" data-note="The Ultimate Answer">42</span> Engineering Notes
-  </h1>
-  <p class="hero-subtitle">
-    <span class="ann ann-blue">Don't Panic</span>. Building systems that are <span class="ann ann-green">Mostly Harmless</span> — <span class="ann ann-purple">Keep Walking</span>.
-  </p>
+<section class="hero-banner" style="text-align: center; padding: 6rem 0 5.5rem 0;">
+  <div style="display: inline-block; margin: 2rem 0;">
+    <span class="ann ann-s ann-amber ann-no-mark" data-note="42" style="--ann-font-size: 1.4rem; --ann-font-weight: 600; --ann-target-gap: 8px;">
+      <span class="ann ann-n ann-blue ann-no-mark" data-note="Don't Panic" style="--ann-font-size: 1.35rem; --ann-font-weight: 600; --ann-target-gap: 8px;">
+        <span class="ann ann-e ann-purple ann-no-mark" data-note="Keep Walking" style="--ann-font-size: 1.25rem; --ann-font-weight: 600; --ann-target-gap: 8px;">
+          <span class="ann ann-w ann-green ann-no-mark" data-note="Mostly Harmless" style="--ann-font-size: 1.25rem; --ann-font-weight: 600; --ann-target-gap: 8px;">
+            <span style="display: inline-flex; align-items: center; justify-content: center; font-size: 3.2rem; line-height: 1; user-select: none;">
+              🚶‍♂️
+            </span>
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
 </section>
 
 <section id="articles" style="margin-bottom: 3rem;">