iteration 3 of grid renderer

Author: haarer

src/_includes/grid.html

@@ -2,7 +2,7 @@
     <tr>
         <th></th>
         {% for asp in site.data.aspects | sort: AspectID %}
-        <th colspan="2">
+        <th>
             <A href="./userdoc/aspects.html#{{ asp.ID}}">Aspect<BR>{{ asp.Name }}</A>
         </th>
         {% endfor %}
@@ -23,9 +23,8 @@
         <td>
             {% if asp_vp_bb.size > 0 %}
             <div class="blackbox">
-                {% for vp in asp_vp_bb %}
-
                 {{ vp.Exposure }}
+                {% for vp in asp_vp_bb %}
                 <div class="tooltip">
                     {% if vp.Domain == "SAF Development" -%}
                     <A href="./devdoc/{{ vp.Domain }} Domain/{{ vp.Name }}.html">{{vp.VP_ID}}<span
@@ -41,8 +40,8 @@
 
             {% if asp_vp_wb.size > 0 %}
             <div class="whitebox">
-                {% for vp in asp_vp_wb %}
                 {{ vp.Exposure }}
+                {% for vp in asp_vp_wb %}
                 <div class="tooltip">
                     {% if vp.Domain == "SAF Development" -%}
                     <A href="./devdoc/{{ vp.Domain }} Domain/{{ vp.Name }}.html">{{vp.VP_ID}}<span
@@ -59,7 +58,6 @@
             {% if asp_vp_bbwb.size > 0 or asp_vp_na.size > 0 %}
             <div class="na_or_both">
                 {% for vp in asp_vp_bbwb  %}
-                {{ vp.Exposure }}
                 <div class="tooltip">
                     {% if vp.Domain == "SAF Development" -%}
                     <A href="./devdoc/{{ vp.Domain }} Domain/{{ vp.Name }}.html">{{vp.VP_ID}}<span
@@ -71,7 +69,6 @@
                 </div>
                 {% endfor %}
                 {% for vp in asp_vp_na  %}
-                {{ vp.Exposure }}
                 <div class="tooltip">
                     {% if vp.Domain == "SAF Development" -%}
                     <A href="./devdoc/{{ vp.Domain }} Domain/{{ vp.Name }}.html">{{vp.VP_ID}}<span

src/_sass/custom/custom.scss

@@ -28,11 +28,6 @@
   }
 }
 
-
-
-
-
-
 .flex-container {
   display: flex;
   padding: 20px;
@@ -77,7 +72,8 @@
 
 .tooltip {
   position: relative;
-  display: inline-block;
+  display: block;
+  width: fit-content;
 }
 
 .tooltip .tooltiptext {
@@ -92,15 +88,16 @@
   z-index: 1;
   bottom: 150%;
   left: 50%;
-  margin-left: -60px;
+  transform: translateX(-50%);
 }
 
 .tooltip .tooltiptext::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
-  margin-left: -5px;
+  transform: translateX(-50%);
+  margin-left: 0;
   border-width: 5px;
   border-style: solid;
   border-color: black transparent transparent transparent;
@@ -123,8 +120,6 @@
     white-space: nowrap;
   }
 
-
-
   tr th:nth-child(1) {
     width: fit-content;
     white-space: nowrap;
@@ -138,55 +133,76 @@ div.whitebox {
 
 div.blackbox {
   border: 5px dashed #333333;
-  color: #ffffff;
   padding: 20px;
 }
 
+div.na_or_both {
+  padding: 20px;
+}
+
+div.blackbox,
+div.whitebox div.na_or_both {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  /* optional: keeps left alignment */
+}
 
 .SAFGridTable {
   tr.SAF_Domain_C td {
     background-color: #A5A5A5;
     color: #000000;
+
     A {
       color: #000000;
       text-decoration-color: #000000;
     }
   }
+
   tr.SAF_Domain_F td {
     background-color: #00B0F0;
     color: #000000;
+
     A {
       color: #000000;
       text-decoration-color: #000000;
     }
   }
+
   tr.SAF_Domain_L td {
     background-color: #FFC000;
     color: #000000;
+
     A {
       color: #000000;
       text-decoration-color: #000000;
     }
   }
+
   tr.SAF_Domain_O td {
     background-color: #4472C4;
     color: #000000;
+
     A {
       color: #000000;
       text-decoration-color: #000000;
     }
   }
+
   tr.SAF_Domain_P td {
     background-color: #92D050;
     color: #000000;
+
     A {
       color: #000000;
       text-decoration-color: #000000;
     }
   }
+
   tr.SAF_Domain_D td {
     background-color: #C040C0;
     color: #000000;
+
     A {
       color: #000000;
       text-decoration-color: #000000;
@@ -195,18 +211,43 @@ div.blackbox {
 }
 
 
-:root { --control-height: 36px; --control-padding: 6px 10px; --gap: 8px; }
-#gallery-controls { display: inline-flex; gap: var(--gap); align-items: center; }
-#gallery-controls button, #gallery-controls select {
+:root {
+  --control-height: 36px;
+  --control-padding: 6px 10px;
+  --gap: 8px;
+}
+
+#gallery-controls {
+  display: inline-flex;
+  gap: var(--gap);
+  align-items: center;
+}
+
+#gallery-controls button,
+#gallery-controls select {
   height: var(--control-height);
   padding: var(--control-padding);
   line-height: 1;
   box-sizing: border-box;
   font: inherit;
 }
-#gallery-controls button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
-#gallery-controls select { min-width: 120px; }
-#gallery-container img { max-width: 100%; height: auto; display: block; }
+
+#gallery-controls button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+#gallery-controls select {
+  min-width: 120px;
+}
+
+#gallery-container img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
 
 
 #gallery-container {
@@ -240,4 +281,4 @@ div.blackbox {
 #prev-btn:focus,
 #next-btn:focus {
   outline: 2px solid #ffffff;
-}
+}