Update site style

assets/scss/asciidoctor.scss

@@ -2,7 +2,10 @@
 @import "roles";
 
 :root {
-  --mark-border-style: 0.5em var(--base05) solid;
+  --side-accent-color: var(--base05);
+  --side-accent-color-text: var(--base00);
+  --border-style: 1px var(--side-accent-color) solid;
+  --mark-border-style: 0.5em var(--side-accent-color) solid;
 }
 
 .anchor {
@@ -59,8 +62,8 @@ p.tableblock {
 *:not(.listingblock, .literalblock, .openblock) {
   > .attribution,
   > .title {
-    background: var(--foreground);
-    color: var(--base00);
+    background: var(--side-accent-color);
+    color: var(--side-accent-color-text);
     font-size: 0.9em;
     padding: 0.5em;
     word-break: break-word;
@@ -76,8 +79,8 @@ p.tableblock {
   position: relative;
 
   > .title {
-    background: var(--foreground);
-    color: var(--background);
+    background: var(--side-accent-color);
+    color: var(--side-accent-color-text);
     font-size: 0.9em;
     padding: 0.5em;
     word-wrap: break-word;
@@ -241,17 +244,15 @@ p {
 
 // Custom Asciidoctor components.
 .dialogblock {
-  &__box {
-    align-items: center;
-    border: var(--border-style);
-    border-left: var(--mark-border-style);
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 1em;
-    padding: 0.5em;
-    max-width: 55ch;
-    width: fit-content;
-  }
+  align-items: center;
+  border: var(--border-style);
+  border-left: var(--mark-border-style);
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 1em;
+  padding: 0.5em;
+  max-width: 60ch;
+  width: fit-content;
 
   &__avatar {
     --size: 4em;
@@ -279,10 +280,6 @@ p {
     }
   }
 
-  &__avatar-name {
-    font-weight: bolder;
-  }
-
   // Roles/modifiers.
   &.reversed {
     flex-direction: row-reverse;
@@ -290,6 +287,11 @@ p {
     border-left: var(--border-style);
     border-right: var(--mark-border-style);
   }
+
+  &.full {
+    max-width: unset;
+    width: unset;
+  }
 }
 
 @media all and (max-width: 860px) {

assets/scss/extend.scss

@@ -18,6 +18,8 @@ table tr td > p {
   margin-top: 1em;
 }
 
+a:hover { color: var(--base0B); }
+
 ul,
 ol {
   margin: 1em 0 0;
@@ -27,10 +29,6 @@ pre {
   margin-bottom: 0;
 }
 
-a:hover {
-  color: var(--base0B);
-}
-
 button {
   border: var(--border-style);
 }
@@ -48,18 +46,13 @@ main > article {
 }
 
 // Layouts
-.site__title {
-  --size: 2rem;
-  margin-bottom: unset;
-  font-size: var(--size);
-  line-height: unset;
-}
-
 .site__socials {
   list-style: none;
   padding-left: 0;
 }
 
+.site__social-icon:hover { color: var(--base0B); }
+
 .site__links--content,
 .site__socials--content {
   margin: 1em 0 0;
@@ -74,9 +67,6 @@ main > article {
 .site__links--content > * {
   flex-basis: 20;
 }
-.site__socials--content > * {
-  flex-basis: 15%;
-}
 
 article.post {
   padding: 0.5em;

assets/scss/roles.scss

@@ -1,4 +1,10 @@
 // Asciidoctor roles (e.g., [.text-center]) on a block.
+.error {
+  --side-accent-color: var(--base08);
+  --side-accent-color-text: var(--base05);
+  --border-style: 2px var(--side-accent-color) solid;
+}
+
 .inline-block {
   display: inline-block;
 }