test callouts

Author: hartk1213

manual/40-callouts.md

@@ -1,7 +1,17 @@
 # Test 123
 
+<div class="test">
+  <p>Image with Dark Overlay</p>
+</div>
+<div class="test2">
+  <p>Text with some translucent background thing</p>
+</div>
+<div class="test3">
+  <p>Floor Fade Test</p>
+</div>
 
-| <object class="hardware_svg"> ![Micron_Hexagon](https://github.com/user-attachments/assets/8a5c4950-479c-495c-a214-503d3d23a65d) </object> |<object  class="hardware_svg"> ![Micron_Hexagon](https://github.com/user-attachments/assets/8a5c4950-479c-495c-a214-503d3d23a65d) </object> |<object class="hardware_svg"> ![Micron_Hexagon](https://github.com/user-attachments/assets/8a5c4950-479c-495c-a214-503d3d23a65d) </object> |<object class="hardware_svg"> ![Micron_Hexagon](https://github.com/user-attachments/assets/8a5c4950-479c-495c-a214-503d3d23a65d) </object> |
+
+| <div class="image-container"> <object class="hardware_svg"> ![Micron_Hexagon](https://github.com/user-attachments/assets/8a5c4950-479c-495c-a214-503d3d23a65d) </object>  <div class="text-bubble"> This is a hex bubble! </div> </div> |<object  class="hardware_svg"> ![Micron_Hexagon](https://github.com/user-attachments/assets/8a5c4950-479c-495c-a214-503d3d23a65d) </object> |<object class="hardware_svg"> ![Micron_Hexagon](https://github.com/user-attachments/assets/8a5c4950-479c-495c-a214-503d3d23a65d) </object> |<object class="hardware_svg"> ![Micron_Hexagon](https://github.com/user-attachments/assets/8a5c4950-479c-495c-a214-503d3d23a65d) </object> |
 | --- | --- | --- | --- |
 | **Test 123** | **Test 456** | **Test 789** | **Test ABC**|
 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor a mauris non pellentesque. Donec commodo libero risus, iaculis condimentum odio accumsan eu. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor a mauris non pellentesque. Donec commodo libero risus, iaculis condimentum odio accumsan eu. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor a mauris non pellentesque. Donec commodo libero risus, iaculis condimentum odio accumsan eu. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor a mauris non pellentesque. Donec commodo libero risus, iaculis condimentum odio accumsan eu. | Metric fastener with a cone shaped head and a flat top. | Metric fastener with a cylindrical head and hex drive. The most common fastener used on the Voron. |

manual/tool/template/screen.css

@@ -218,13 +218,34 @@ table thead tr {
 
 }
 
-.hardware_svg {
-    width: 50%; /* Scale the image to 50% of its container's width */
-    height: auto; /* Maintain the aspect ratio */
+.image-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .hardware_svg {
+    width: 100%; /* Adjust as needed */
+    height: auto; 
     fill: #54AB3D;
     stroke: #008cff;
     color: var(--accent)
-}
+  }
+
+  .text-bubble {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 12px 20px;
+    font-size: 14px;
+    white-space: nowrap;
+    text-align: center;
+
+    /* Hexagonal Shape */
+    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
+    width: 200px; /* Adjust width as needed */
+    position: absolute;
+    top: 50px; /* Adjust position */
+    left: 100px; /* Adjust position */
+  }
 
 .icon {
     width: 20%; /* Scale the image to 50% of its container's width */