Sync dev to main

docs/products/ESPHome-Starter-Kit/setup/first-steps.md

@@ -10,15 +10,15 @@ By the end you'll have your ESPHome Starter Kit flashed with a working configura
 
 [:material-cart: Buy the ESPHome Starter Kit](https://apolloautomation.com/products/esk-1-esphome-starter-kit){ .md-button .md-button--primary }
 
-!!! tip "Click the (+) for extra context"
+!!! tip "Click the Apollo dog for extra context"
 
     <div markdown class="annotate">
 
-    When you see a small **(+)** icon next to a step or word, give it a click (1). It opens a side note with tips, gotchas, or examples you don't need on first read.
+    When you see a small Apollo dog peeking over a step or word, give it a click (1). It opens a side note with tips, gotchas, or examples you don't need on first read.
 
     </div>
 
-    1.  Like this, you just opened your first annotation. Click outside the box to close it.
+    1.  Like this, you just opened your first annotation. Click outside the box to close it. Good dog.
 
 ---
 

docs/stylesheets/extra.css

@@ -234,3 +234,42 @@ article.md-typeset .md-button img {
   font-weight: 600;
   margin-bottom: 7px;
 }
+
+/* ===== Code annotation marker: full-color Apollo dog instead of the default (+) ===== */
+/* The theme draws the marker as a single-color CSS mask; drop the mask and
+   draw the colored image directly. Anchored to the bottom of the line so the
+   dog peeks over the text like the logo. */
+.md-annotation__index {
+  width: 3ch;
+  overflow: visible;
+}
+.md-annotation__index::before {
+  display: none; /* the theme's page-color backdrop circle behind the (+) */
+}
+.md-annotation__index::after {
+  -webkit-mask-image: none;
+  mask-image: none;
+  background: url("/assets/apollo-dog-annotation-color.png") center bottom / contain no-repeat;
+  width: 3ch;
+  height: 3.2ch;
+  top: auto;
+  bottom: -0.15ch;
+  transform-origin: bottom center;
+}
+/* Code lines are tighter than prose; cap the dog a bit shorter there so the
+   ears don't cover characters on the line above. */
+code .md-annotation__index {
+  width: 2.6ch;
+}
+code .md-annotation__index::after {
+  height: 2.6ch;
+  bottom: -0.2ch;
+}
+/* The theme tints the marker on hover/open and rotates it 45deg while open;
+   keep the image untinted and upright, and grow it a little instead so it
+   still reacts to the pointer. */
+:hover > .md-annotation__index::after,
+.md-tooltip--active + .md-annotation__index::after {
+  background-color: transparent;
+  transform: scale(1.2);
+}