Update admonition block and its styling

assets/scss/asciidoctor.scss

@@ -42,6 +42,32 @@
     margin-top: 1rem;
 }
 
+.admonitionblock {
+    display: flex;
+    flex-direction: row;
+
+    font-family: initial;
+    color: unset;
+    font-size: unset;
+    padding: 0;
+    border: var(--border-style);
+
+    >.icon {
+        --size: 8em;
+        background: var(--foreground);
+        color: var(--background);
+        width: var(--size);
+        padding: 0.5em;
+    }
+
+    >.content {
+        align-content: center;
+        border: none !important;
+        line-height: initial;
+        padding: 0 0.5em;
+    }
+}
+
 [class$="block"],
 :where(.admonitionblock, .dialogblock, .listingblock, .literalblock) {
     margin: 1rem 0 0;
@@ -60,6 +86,7 @@ p.tableblock {
 }
 
 *:not(.listingblock, .literalblock, .openblock) {
+
     >.attribution,
     >.title {
         background: var(--side-accent-color);
@@ -157,13 +184,11 @@ p.tableblock {
             --color2: var(--base0C);
             --threshold1: 9px;
             --threshold2: 24px;
-      background: repeating-linear-gradient(
+            background: repeating-linear-gradient(45deg,
-        45deg,
                     var(--color1) 0px,
                     var(--color1) var(--threshold1),
                     var(--color2) var(--threshold1),
-        var(--color2) var(--threshold2)
+                    var(--color2) var(--threshold2));
-      );
         }
     }
 }
@@ -176,6 +201,7 @@ p.tableblock {
         width: 100%;
 
         tbody {
+
             tr+tr,
             tr:first-child {
                 border-top: unset;

templates/admonition.html.erb

@@ -1,17 +1,9 @@
-<div<%= @id && %( id="#{@id}") %> class="<%= ['admonitionblock',(attr :name),role].compact * ' ' %>">
+<aside <%= @id && %( id="#{@id}") %> class="<%= ['admonitionblock',(attr :name),role].compact * ' ' %>" data-admonition-type="<%= attr :name %>">
-  <table>
-    <tr>
-      <td class="icon" title="<%= @caption %>">
   <svg class="icon">
     <use href="<%= icon_uri(attr :name) %>#<%= attr :name %>" alt="<%= @caption %>"></use>
   </svg>
-      </td>
+  <div class="content">
-      <td class="content"><%
+    <% if title? %><div class="title"><%= title %></div><% end %>
-        if title? %>
-      <div class="title"><%= title %></div><%
-        end %>
     <%= content %>
-      </td>
-    </tr>
-  </table>
   </div>
+</aside>