Improve intro figure

cg-spec/editors_draft.html

@@ -200,10 +200,21 @@
     .heavy { color:black; font-weight:bold }
     .small { font-size: smaller; }
 
+    #structure-map table {
+      background-image: url("visual-map-bg.svg");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    #structure-map table td {
+      width: 33.34%;
+    }
+
     #structure-map .box {
       display: block;
       border: thin solid gray;
       border-radius: 0.5em;
+      background-color: white;
       margin: 0.7em 1em;
       padding: 0.35em 0.5em;
       box-shadow: 0.25em 0.25em 0.5em darkgray;
@@ -373,36 +384,39 @@ <h2>Structure of this document</h2>
       <figure id="structure-map">
         <table>
           <tr>
-            <td rowspan=3>
-              <div class="box">
-                <strong>querying</strong><br>
-                <a href="#sparql-star"></a><br>
-              </div>
-              <div class="box">
-                <strong>updating</strong><br>
-                  <a href="#sparql-star-update"></a>
+            <td>
+            <td rowspan=2>
+              <div class="box" style="margin-bottom: 5em;">
+                <a href="#concepts"></a><br>
+                <strong>can be...</strong>
               </div>
+            <td>
+          <tr>
             <td>
               <div class="box">
-                <strong>reasoning</strong><br>
-                <a href="#rdf-star-semantics"></a>
+                <em>... serialized with</em><br>
+                <a href="#concrete-syntaxes"></a>
               </div>
             <td>
-            <td rowspan=3>
               <div class="box">
-                <strong>representing</strong><br>
+                <em>... represented by</em><br>
                 <a href="#rdf-star-vocabulary"></a>
               </div>
           <tr>
             <td>
               <div class="box">
-                <a href="#concepts"></a>
+                <em>... queried with</em><br>
+                <a href="#sparql-star"></a><br>
               </div>
-          <tr>
             <td>
               <div class="box">
-                <strong>serializing</strong><br>
-                <a href="#concrete-syntaxes"></a>
+                <em>... updated with</em><br>
+                <a href="#sparql-star-update"></a>
+              </div>
+            <td>
+              <div class="box">
+                <em>... interpreted through</em><br>
+                <a href="#rdf-star-semantics"></a>
               </div>
         </table>
         <figcaption>A visual map of the sections of this document</figcaption>