Update admonition block and its styling

assets/scss/asciidoctor.scss

@@ -32,25 +32,51 @@
         max-height: var(--code-block-size);
         overflow: auto;
 
-    & > :first-child {
+        &> :first-child {
             margin-top: 0;
         }
     }
 }
 
-#footnotes > :not(hr) {
+#footnotes> :not(hr) {
     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;
 
-  .title > code {
+    .title>code {
         background: unset;
     }
 
-  .content > :first-child {
+    .content> :first-child {
         margin-top: 0;
     }
 }
@@ -60,8 +86,9 @@ p.tableblock {
 }
 
 *:not(.listingblock, .literalblock, .openblock) {
-  > .attribution,
+
-  > .title {
+    >.attribution,
+    >.title {
         background: var(--side-accent-color);
         color: var(--side-accent-color-text);
         font-size: 0.9em;
@@ -69,7 +96,7 @@ p.tableblock {
         word-break: break-word;
     }
 
-  > .content {
+    >.content {
         border: var(--border-style);
         padding: 0.5em;
     }
@@ -78,7 +105,7 @@ p.tableblock {
 .listingblock {
     position: relative;
 
-  > .title {
+    >.title {
         background: var(--side-accent-color);
         color: var(--side-accent-color-text);
         font-size: 0.9em;
@@ -90,7 +117,7 @@ p.tableblock {
         }
     }
 
-  > .content pre {
+    >.content pre {
         margin-top: unset;
     }
 }
@@ -98,7 +125,7 @@ p.tableblock {
 .literalblock {
     position: relative;
 
-  > .content pre {
+    >.content pre {
         background: var(--base00);
         font-size: 0.9em;
     }
@@ -106,7 +133,7 @@ p.tableblock {
 
 .literalblock,
 .listingblock {
-  > .listingblock__btn-row {
+    >.listingblock__btn-row {
         $gap: 0.3em;
 
         display: flex;
@@ -120,7 +147,7 @@ p.tableblock {
         top: 0;
         right: 0;
 
-    > button {
+        >button {
             background: var(--base01);
             padding: $gap;
 
@@ -139,7 +166,7 @@ p.tableblock {
     &:fullscreen {
         border: unset;
 
-    .content > pre {
+        .content>pre {
             max-height: 100vh;
             border: unset;
         }
@@ -148,7 +175,7 @@ p.tableblock {
             display: none;
         }
 
-    > .listingblock__btn-row {
+        >.listingblock__btn-row {
             top: 0;
         }
 
@@ -157,26 +184,25 @@ 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));
-      );
         }
     }
 }
 
 .admonitionblock {
-  > table {
+    >table {
         border: unset;
         margin: unset;
         table-layout: fixed;
         width: 100%;
 
         tbody {
-      tr + tr,
+
+            tr+tr,
             tr:first-child {
                 border-top: unset;
             }
@@ -198,12 +224,12 @@ p.tableblock {
         width: var(--size);
         padding: 0.25em;
 
-    > .title {
+        >.title {
             display: flex;
             justify-content: center;
         }
 
-    > svg.icon {
+        >svg.icon {
             width: 100%;
             height: var(--size);
         }
@@ -211,12 +237,12 @@ p.tableblock {
 }
 
 .imageblock {
-  > .content {
+    >.content {
         display: flex;
         justify-content: center;
     }
 
-  > .title {
+    >.title {
         text-align: center;
     }
 }
@@ -226,12 +252,12 @@ p {
 }
 
 .sidebarblock {
-  > .content {
+    >.content {
         background: var(--base01);
         border: unset;
         padding: var(--vertical-rhythm);
 
-    > .title {
+        >.title {
             background: unset;
             color: unset;
             font-family: var(--header-family);
@@ -296,7 +322,7 @@ p {
 
 @media all and (max-width: 860px) {
     .imageblock {
-    > .content {
+        >.content {
             width: 100% !important;
         }
     }

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>
+  </div>
-    </tr>
+</aside>
-  </table>
-</div>