Update admonition block styling

assets/css/content/admonition.css

@@ -1,32 +1,12 @@
+/* See general.css for base admonition styles - they are shared with blockquote */
+
 .content-inner section.admonition {
   border-radius: var(--borderRadius-base);
-  border-left: 0;
-}
-
-.content-inner section.admonition.warning {
-  background-color: var(--warningBackground);
-}
-
-.content-inner section.admonition.error {
-  background-color: var(--errorBackground);
-}
-
-.content-inner section.admonition.info {
-  background-color: var(--infoBackground);
-}
-
-.content-inner section.admonition.neutral {
-  background-color: var(--neutralBackground);
-}
-
-.content-inner section.admonition.tip {
-  background-color: var(--tipBackground);
 }
 
 .content-inner section.admonition > .admonition-title {
   color: var(--contrast);
-  margin: 0 -1.2rem;
-  padding: .7rem 1.2rem .7rem 3.3rem;
+  padding-left: 2.2rem;
   font-weight: 700;
   font-style: normal;
 }
@@ -41,72 +21,104 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.content-inner section.admonition > .admonition-title.warning {
-  background-color: var(--warningHeadingBackground);
-  color: var(--warningHeading);
-}
-.content-inner section.admonition > .admonition-title.warning::before {
-  content: var(--icon-error-warning);
-  color: var(--warningHeading);
-}
-
-.content-inner section.admonition > .admonition-title.error {
-  background-color: var(--errorHeadingBackground);
-  color: var(--errorHeading);
-}
-.content-inner section.admonition > .admonition-title.error::before {
-  content: var(--icon-error-warning);
-  color: var(--errorHeading);
-}
-
-.content-inner section.admonition > .admonition-title.info {
-  background-color: var(--infoHeadingBackground);
-  color: var(--infoHeading);
-}
-.content-inner section.admonition > .admonition-title.info::before {
-  content: var(--icon-information);
-  color: var(--infoHeading);
-}
+.content-inner section.admonition {
+  /* Default icon */
+  & .admonition-title::before {
+    content: var(--icon-error-warning);
+  }
 
-.content-inner section.admonition > .admonition-title.neutral {
-  background-color: var(--neutralHeadingBackground);
-  color: var(--neutralHeading);
-}
-.content-inner section.admonition > .admonition-title.neutral::before {
-  content: var(--icon-double-quotes-l);
-  color: var(--neutralHeading);
+  &.warning {
+    background-color: var(--warningBackground);
+    & .admonition-title {
+      &, &::before {
+        color: var(--warningHeading);
+      }
+    }
+  }
+  &.error {
+    background-color: var(--errorBackground);
+    & .admonition-title {
+      &, &::before {
+        color: var(--errorHeading);
+      }
+    }
+  }
+  &.info {
+    background-color: var(--infoBackground);
+    & .admonition-title {
+      &, &::before {
+        color: var(--infoHeading);
+      }
+    }
+  }
+  &.neutral {
+    background-color: var(--neutralBackground);
+    & .admonition-title {
+      &, &::before {
+        content: var(--icon-double-quotes-l);
+        color: var(--neutralHeading);
+      }
+    }
+  }
+  &.tip {
+    background-color: var(--tipBackground);
+    & .admonition-title {
+      &, &::before {
+        color: var(--tipHeading);
+      }
+    }
+  }
 }
 
-.content-inner section.admonition > .admonition-title.tip {
-  background-color: var(--tipHeadingBackground);
-  color: var(--tipHeading);
-}
-.content-inner section.admonition > .admonition-title.tip::before {
-  content: var(--icon-information);
-  color: var(--tipHeading);
+@media print {
+  .content-inner section.admonition {
+    &.warning {
+      border-color: hsl(from var(--warningHeading) h s l / 15%);
+      & .admonition-title {
+        &, &::before {
+          color: hsl(var(--warningHue), 90%, 40%);
+        }
+      }
+    }
+    &.error {
+      border-color: hsl(from var(--errorHeading) h s l / 15%);
+      & .admonition-title {
+        &, &::before {
+          color: hsl(var(--errorHue), 80%, 40%);
+        }
+      }
+    }
+    &.info {
+      border-color: hsl(from var(--infoHeading) h s l / 15%);
+      & .admonition-title {
+        &, &::before {
+          color: hsl(var(--infoHue), 80%, 40%);
+        }
+      }
+    }
+    &.neutral {
+      border-color: hsl(from var(--neutralHeading) h s l / 15%);
+      & .admonition-title {
+        &, &::before {
+          color: hsl(var(--neutralHue), 30%, 40%);
+        }
+      }
+    }
+    &.tip {
+      border-color: hsl(from var(--tipHeading) h s l / 15%);
+      & .admonition-title {
+        &, &::before {
+          color: hsl(var(--tipHue), 50%, 40%);
+        }
+      }
+    }
+  }
 }
 
 .content-inner section.admonition > .admonition-title code {
   margin: 0 0.5ch;
 }
 
-.content-inner section.admonition code {
-  background-color: var(--admInlineCodeBackground);
-  border: 1px solid var(--admInlineCodeBorder);
-  color: var(--admInlineCodeColor);
-}
-
-.content-inner section.admonition  pre code {
-  background-color: var(--admCodeBackground);
-  border: 1px solid var(--admCodeBorder);
-  color: var(--admCodeColor);
-}
-
-.content-inner section.admonition > .admonition-title :is(a, a:visited) {
-  color: inherit;
-  text-decoration-color: currentColor;
-}
-
 @media screen and (max-width: 768px) {
   .content-inner section.admonition {
     margin-left: calc(-1 * var(--content-gutter));

assets/css/content/code.css

@@ -16,7 +16,16 @@
   color: var(--link-visited-color);
 }
 
+.content-inner strong > code {
+  font-weight: bold;
+}
+
 .content-inner code {
+  font-family: var(--monoFontFamily);
+  font-style: normal;
+  line-height: 24px;
+  font-weight: 400;
+  font-size: var(--text-sm);
   background-color: var(--codeBackground);
   vertical-align: baseline;
   border-radius: var(--borderRadius-sm);

assets/css/content/epub-admonition.css

@@ -11,27 +11,27 @@
 
 .content-inner section.admonition.warning {
   background-color: var(--warningBackground);
-  border-left-color: var(--warningHeadingBackground);
+  border-left-color: var(--warningHeading);
 }
 
 .content-inner section.admonition.error {
   background-color: var(--errorBackground);
-  border-left-color: var(--errorHeadingBackground);
+  border-left-color: var(--errorHeading);
 }
 
 .content-inner section.admonition.info {
   background-color: var(--infoBackground);
-  border-left-color: var(--infoHeadingBackground);
+  border-left-color: var(--infoHeading);
 }
 
 .content-inner section.admonition.neutral {
   background-color: var(--neutralBackground);
-  border-left-color: var(--neutralHeadingBackground);
+  border-left-color: var(--neutralHeading);
 }
 
 .content-inner section.admonition.tip {
   background-color: var(--tipBackground);
-  border-left-color: var(--tipHeadingBackground);
+  border-left-color: var(--tipHeading);
 }
 
 .content-inner section.admonition > .admonition-title {
@@ -42,33 +42,21 @@
 }
 
 .content-inner section.admonition > .admonition-title.warning {
-  color: var(--warningHeadingBackground);
+  color: var(--warningHeading);
 }
 .content-inner section.admonition > .admonition-title.error {
-  color: var(--errorHeadingBackground);
+  color: var(--errorHeading);
 }
 .content-inner section.admonition > .admonition-title.info {
-  color: var(--infoHeadingBackground);
+  color: var(--infoHeading);
 }
 .content-inner section.admonition > .admonition-title.neutral {
-  color: var(--neutralHeadingBackground);
+  color: var(--neutralHeading);
 }
 .content-inner section.admonition > .admonition-title.tip {
-  color: var(--tipHeadingBackground);
+  color: var(--tipHeading);
 }
 
 .content-inner section.admonition > .admonition-title code {
   margin: 0 0.5ch;
 }
-
-.content-inner section.admonition code {
-  background-color: var(--admInlineCodeBackground);
-  border: 1px solid var(--admInlineCodeBorder);
-  color: var(--admInlineCodeColor);
-}
-
-.content-inner section.admonition pre code {
-  background-color: var(--admCodeBackground);
-  border: 1px solid var(--admCodeBorder);
-  color: var(--admCodeColor);
-}

assets/css/content/general.css

@@ -132,18 +132,54 @@
   font-weight: normal;
 }
 
-.content-inner blockquote, .content-inner section.admonition {
-  border-left: 3px solid var(--blockquoteBorder);
-  position: relative;
-  margin: 1.5625em 0;
-  padding: 0 1.2rem;
-  overflow: auto;
-  background-color: var(--blockquoteBackground);
-  border-radius: var(--borderRadius-base);
+.content-inner {
+  & :is(blockquote, section.admonition) {
+    position: relative;
+    margin: 1.5625em 0;
+    padding: 0 1.2rem;
+    overflow: auto;
+    border-radius: var(--borderRadius-base);
+
+    & :is(code, pre code) {
+      background-color: var(--admCodeBackground);
+      border: 1px solid var(--admCodeBorder);
+      color: var(--admCodeColor);
+    }
+
+    & :is(a, a:visited) {
+      color: inherit;
+    }
+
+    & :is(h1, h2, h3, h4, h5, h6):first-child {
+      padding-bottom: 1em;
+      border-bottom: 2px solid hsl(from currentColor h s l / 15%);
+    }
+
+    & p:last-child {
+      padding-bottom: 1em;
+      margin-bottom: 0;
+    }
+  }
+
+  & blockquote {
+    border-left: 3px solid var(--blockquoteBorder);
+    background-color: var(--blockquoteBackground);
+  }
 }
-.content-inner blockquote p:last-child, .content-inner section.admonition p:last-child  {
-  padding-bottom: 1em;
-  margin-bottom: 0;
+
+@media print {
+  .content-inner :is(blockquote, section.admonition) {
+    border: 2px solid hsl(from var(--textBody) h s l / 15%);
+
+    & :is(code, pre code) {
+      border-color: var(--gray400);
+    }
+
+    & pre code.makeup {
+      white-space: break-spaces;
+      break-inside: avoid;
+    }
+  }
 }
 
 .content-inner table {
@@ -240,18 +276,6 @@
   max-width: 100%;
 }
 
-.content-inner strong > code {
-  font-weight: bold;
-}
-
-.content-inner code {
-  font-family: var(--monoFontFamily);
-  font-style: normal;
-  line-height: 24px;
-  font-weight: 400;
-  font-size: var(--text-sm);
-}
-
 @media screen and (max-width: 768px) {
   .content-inner :is(ol, ul) {
     padding-left: calc(1.5 * var(--content-gutter));