diff --git a/assets/css/content/admonition.css b/assets/css/content/admonition.css index e3d01c12c..e11f486eb 100644 --- a/assets/css/content/admonition.css +++ b/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)); diff --git a/assets/css/content/code.css b/assets/css/content/code.css index 9eda6a98a..67739c4e8 100644 --- a/assets/css/content/code.css +++ b/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); diff --git a/assets/css/content/epub-admonition.css b/assets/css/content/epub-admonition.css index be7cefe62..f83102ef7 100755 --- a/assets/css/content/epub-admonition.css +++ b/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); -} diff --git a/assets/css/content/general.css b/assets/css/content/general.css index bd2f7afc4..e7083205d 100644 --- a/assets/css/content/general.css +++ b/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)); diff --git a/assets/css/custom-props/common.css b/assets/css/custom-props/common.css index 6dda2f671..f9db03122 100644 --- a/assets/css/custom-props/common.css +++ b/assets/css/custom-props/common.css @@ -16,15 +16,17 @@ --baseLineHeight: 1.5em; /* Colours */ + --gray10: hsl(207, 43%, 98.5%); --gray25: hsl(207, 43%, 98%); --gray50: hsl(207, 43%, 96%); --gray100: hsl(212, 33%, 91%); --gray200: hsl(210, 29%, 88%); - --gray300: hsl(210, 26%, 84%); + --gray300: hsl(210, 26%, 76%); --gray400: hsl(210, 21%, 64%); --gray450: hsl(210, 21%, 49%); --gray500: hsl(210, 21%, 34%); --gray600: hsl(210, 27%, 26%); + --gray650: hsl(211, 32%, 22%); --gray700: hsl(212, 35%, 17%); --gray750: hsl(214, 46%, 14%); --gray800: hsl(216, 52%, 11%); @@ -46,12 +48,16 @@ --green-lightened-10: hsl(90, 100%, 45%); --green: hsl(90, 100%, 35%); --white: hsl(0, 0%, 100%); + --white-opacity-80: hsla(0, 0%, 100%, 80%); --white-opacity-50: hsla(0, 0%, 100%, 50%); --white-opacity-10: hsla(0, 0%, 100%, 10%); --white-opacity-0: hsla(0, 0%, 100%, 0%); --black: hsl(0, 0%, 0%); - --black-opacity-10: hsla(0, 0%, 0%, 10%); + --black-opacity-80: hsla(0, 0%, 0%, 80%); --black-opacity-50: hsla(0, 0%, 0%, 50%); + --black-opacity-30: hsla(0, 0%, 0%, 30%); + --black-opacity-10: hsla(0, 0%, 0%, 10%); + --black-opacity-0: hsla(0, 0%, 0%, 10%); --orangeDark: hsl(30, 90%, 40%); --orangeLight: hsl(30, 80%, 50%); diff --git a/assets/css/custom-props/theme-dark.css b/assets/css/custom-props/theme-dark.css index e13c47fd2..baf5330c7 100644 --- a/assets/css/custom-props/theme-dark.css +++ b/assets/css/custom-props/theme-dark.css @@ -15,36 +15,37 @@ body.dark { --tableHeadBorder: var(--gray600); --tableBodyBorder: var(--gray700); - --warningBackground: hsla( 33, 30%, 60%, 10%); - --warningHeadingBackground: hsla( 33, 66%, 35%, 80%); - --warningHeading: var(--white); - --errorBackground: hsla( 7, 30%, 60%, 10%); - --errorHeadingBackground: hsla( 6, 70%, 40%, 80%); - --errorHeading: var(--white); - --infoBackground: hsla(206, 30%, 60%, 10%); - --infoHeadingBackground: hsla(213, 55%, 35%, 80%); - --infoHeading: var(--white); - --neutralBackground: hsl(210, 30%, 60%, 10%); - --neutralHeadingBackground: var(--gray600); - --neutralHeading: var(--white); - --tipBackground: hsla(142, 30%, 60%, 10%); - --tipHeadingBackground: hsla(134, 45%, 30%, 80%); - --tipHeading: var(--white); + /* Admonition colors: optionally mixed with a particular color in order to create cohesive feel */ + --warningHue: 34; + --errorHue: 7; + --infoHue: 206; + --neutralHue: 212; + --tipHue: 142; + --admMixCol: var(--gray900); + --admMixAmt: 40%; + --warningBackground: color-mix(in xyz, var(--admMixCol) var(--admMixAmt), hsl(var(--warningHue), 40%, 14%) 100%); + --warningHeading: hsl(var(--warningHue), 100%, 50%); + --errorBackground: color-mix(in xyz, var(--admMixCol) var(--admMixAmt), hsl(var(--errorHue), 40%, 14%) 100%); + --errorHeading: hsl(var(--errorHue), 100%, 52%); + --infoBackground: color-mix(in xyz, var(--admMixCol) var(--admMixAmt), hsl(var(--infoHue), 60%, 15%) 100%); + --infoHeading: hsl(var(--infoHue), 100%, 52%); + --neutralBackground: color-mix(in xyz, var(--admMixCol) var(--admMixAmt), hsl(var(--neutralHue), 40%, 14%) 100%); + --neutralHeading: hsl(var(--neutralHue), 50%, 80%); + --tipBackground: color-mix(in xyz, var(--admMixCol) var(--admMixAmt), hsl(var(--tipHue), 40%, 14%) 100%); + --tipHeading: hsl(var(--tipHue), 55%, 48%); --fnSpecAttr: var(--gray400); --fnDeprecated: var(--yellowDark); --blink: var(--gray600); - --codeBackground: var(--gray750); - --codeBorder: var(--gray600); + --codeBackground: var(--gray800); + --codeBorder: var(--gray650); --codeScrollThumb: var(--gray500); --codeScrollBackground: var(--codeBorder); - --admCodeBackground: var(--gray750); - --admCodeBorder: var(--gray600); + + --admCodeBackground: var(--black-opacity-30); + --admCodeBorder: var(--white-opacity-10); --admCodeColor: var(--gray100); - --admInlineCodeColor: var(--gray100); - --admInlineCodeBackground: var(--gray750); - --admInlineCodeBorder: var(--gray600); --tabBorder: var(--gray700); --tabBorderTop: var(--gray700); diff --git a/assets/css/custom-props/theme-light.css b/assets/css/custom-props/theme-light.css index 28c087c71..971b3b784 100644 --- a/assets/css/custom-props/theme-light.css +++ b/assets/css/custom-props/theme-light.css @@ -15,36 +15,37 @@ --tableHeadBorder: var(--gray100); --tableBodyBorder: var(--gray50); - --warningBackground: hsl( 33, 100%, 97%); - --warningHeadingBackground: hsl( 33, 87%, 64%); - --warningHeading: var(--black); - --errorBackground: hsl( 7, 81%, 96%); - --errorHeadingBackground: hsl( 6, 80%, 60%); - --errorHeading: var(--white); - --infoBackground: hsl(206, 91%, 96%); - --infoHeadingBackground: hsl(213, 92%, 62%); - --infoHeading: var(--white); - --neutralBackground: hsl(212, 29%, 92%); - --neutralHeadingBackground: hsl(220, 43%, 11%); - --neutralHeading: var(--white); - --tipBackground: hsl(142, 31%, 93%); - --tipHeadingBackground: hsl(134, 39%, 36%); - --tipHeading: var(--white); + /* Admonition colors: optionally mixed with a particular color in order to create cohesive feel */ + --warningHue: 34; + --errorHue: 7; + --infoHue: 206; + --neutralHue: 212; + --tipHue: 142; + --admMixCol: var(--gray100); + --admMixAmt: 25%; + --warningBackground: color-mix(in xyz, var(--admMixCol) var(--admMixAmt), hsl(var(--warningHue), 100%, 96%) 100%); + --warningHeading: hsl(var(--warningHue), 95%, 38%); + --errorBackground: color-mix(in xyz, var(--admMixCol) var(--admMixAmt), hsl(var(--errorHue), 85%, 96%) 100%); + --errorHeading: hsl(var(--errorHue), 80%, 40%); + --infoBackground: color-mix(in xyz, var(--admMixCol) var(--admMixAmt), hsl(var(--infoHue), 90%, 96%) 100%); + --infoHeading: hsl(var(--infoHue), 60%, 30%); + --neutralBackground: color-mix(in xyz, var(--admMixCol) var(--admMixAmt), hsl(var(--neutralHue), 40%, 93%) 100%); + --neutralHeading: hsl(var(--neutralHue), 35%, 30%); + --tipBackground: color-mix(in xyz, var(--admMixCol) var(--admMixAmt), hsl(var(--tipHue), 40%, 93%) 100%); + --tipHeading: hsl(var(--tipHue), 55%, 25%); --fnSpecAttr: var(--coldGray); --fnDeprecated: var(--yellowLight); --blink: var(--yellowLight); - --codeBackground: var(--gray25); + --codeBackground: var(--gray10); --codeBorder: var(--gray100); --codeScrollThumb: var(--gray400); --codeScrollBackground: var(--codeBorder); - --admCodeBackground: var(--gray25); - --admCodeBorder: var(--gray100); + + --admCodeBackground: var(--white-opacity-80); + --admCodeBorder: var(--black-opacity-10); --admCodeColor: var(--black); - --admInlineCodeColor: var(--black); - --admInlineCodeBackground: var(--gray25); - --admInlineCodeBorder: var(--gray100); --tabBorder: var(--gray300); --tabBorderTop: var(--gray100); diff --git a/assets/css/print.css b/assets/css/print.css index cc579c3f3..305f2bd60 100644 --- a/assets/css/print.css +++ b/assets/css/print.css @@ -52,26 +52,8 @@ display: none; } - .content-inner section.admonition { - border: 2px solid var(--gray400); - } - - .content-inner section.admonition > .admonition-title { - color: var(--textHeaders); - border-bottom: 2px solid var(--gray400); - } - .content-inner pre code.makeup { - border-color: var(--gray400); white-space: break-spaces; break-inside: avoid; } - - .content-inner blockquote code.inline { - border-color: var(--gray400); - } - - .content-inner code.inline { - border-color: var(--gray400); - } } diff --git a/test/examples/admonition.md b/test/examples/admonition.md index 47a16af0a..32b023c07 100644 --- a/test/examples/admonition.md +++ b/test/examples/admonition.md @@ -2,7 +2,7 @@ ## Starting with header 3 -> ### Just a blockquote. +> ### Blockquote Header 3 [with link](#) > > Some `code` and a [link](#). > @@ -14,7 +14,7 @@ > no highlight > ``` -> ### Header 3 {: .info} +> ### Info Header 3 [with link](#) {: .info} > > #### Header 4 > @@ -28,7 +28,7 @@ > no highlight > ``` -> ### Header 3 {: .tip} +> ### Tip Header 3 [with link](#) {: .tip} > > #### Header 4 > @@ -43,7 +43,7 @@ > no highlight > ``` -> ### Header 3 {: .neutral} +> ### Neutral Header 3 [with link](#) {: .neutral} > > #### Header 4 > @@ -57,7 +57,7 @@ > no highlight > ``` -> ### Header 3 {: .warning} +> ### Warning Header 3 [with link](#) {: .warning} > > #### Header 4 > @@ -71,7 +71,7 @@ > no highlight > ``` -> ### Header 3 {: .error} +> ### Error Header 3 [with link](#) {: .error} > > #### Header 4 > @@ -87,7 +87,7 @@ ## Starting with header 4 -> #### Just a blockquote. +> #### Blockquote Header 4 [with link](#) > > Some `code` and a [link](#). > @@ -95,7 +95,7 @@ > Foo + Bar. > ``` -> #### Header 4 {: .info} +> #### Info Header 4 [with link](#) {: .info} > > Some `code` and a [link](#). > @@ -103,7 +103,7 @@ > Foo + Bar. > ``` -> #### Header 4 {: .tip} +> #### Tip Header 4 [with link](#) {: .tip} > > Some `code` and a [link](#). > @@ -111,7 +111,7 @@ > Foo + Bar. > ``` -> #### Header 4 {: .neutral} +> #### Neutral Header 4 [with link](#) {: .neutral} > > Some `code` and a [link](#). > @@ -119,7 +119,7 @@ > Foo + Bar. > ``` -> #### Header 4 {: .warning} +> #### Warning Header 4 [with link](#) {: .warning} > > Some `code` and a [link](#). > @@ -127,7 +127,7 @@ > Foo + Bar. > ``` -> #### Header 4 {: .error} +> #### Error Header 4 [with link](#) {: .error} > > Some `code` and a [link](#). >