From 11c1d090dbee792a305c0c8950b2fc838c1a9950 Mon Sep 17 00:00:00 2001 From: Neil Dewhurst Date: Tue, 18 Mar 2025 16:43:46 +0000 Subject: [PATCH 1/3] add icons to admonitions --- src/css/doc.css | 106 ++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 89 insertions(+), 17 deletions(-) diff --git a/src/css/doc.css b/src/css/doc.css index 93b7b47b..f6cfd5e7 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -11,6 +11,12 @@ body { font-weight: var(--body-font-weight); } +@media screen and (min-width: 1024px) { + .doc.research { + max-width: 2000px; + } +} + @media screen and (min-width: 1024px) { .doc { flex: auto; @@ -318,8 +324,8 @@ body { } .doc .admonitionblock { - margin: 0 0 1.5rem; - border-left: 4px solid var(--doc-font-color); + margin: 1.5rem 0 1.5rem; + /* border-left: 4px solid var(--doc-font-color); */ border-radius: 0.25rem; } @@ -345,7 +351,7 @@ body { } .doc .admonitionblock .content { - padding: 1rem 1rem 0.75rem; + padding: 1.5rem 1rem 0.75rem; /* background: var(--admonition-background); */ width: 100%; } @@ -354,19 +360,85 @@ body { padding: 0; } -.doc .admonitionblock .icon { - display: none; - /* position: absolute; - top: 0; +.doc .admonitionblock td.icon { left: 0; - font-size: calc(15 / var(--rem-base) * 1rem); - padding: 0 0.5rem; - height: 1.25rem; line-height: 1; + padding: 0; + position: absolute; + top: 0; + transform: translate(-0.75rem, -50%); +} + +.doc .admonitionblock td.icon i { + color: rgba(var(--colors-neutral-15)); + align-items: center; + border-radius: 1rem; + display: inline-flex; + filter: none; + height: 1.5rem; + padding: 0 0.5rem; + width: fit-content; +} + +.doc .admonitionblock td.icon i.fa::after { + content: attr(title); + font-family: var(--body-font-family); + font-style: normal; + font-weight: 600; font-weight: var(--admonition-label-font-weight); + padding-left: 0.5rem; text-transform: uppercase; - border-radius: 0.45rem; - transform: translate(-0.5rem, -50%); */ +} + +/* admonition icon and text backgrounds */ + +.doc .admonitionblock td.icon i.icon-note { + background-color: var(--note-color); +} + +.doc .admonitionblock td.icon i.icon-tip { + background-color: var(--tip-border-color); +} + +.doc .admonitionblock td.icon i.icon-important { + background-color: var(--important-border-color); +} + +.doc .admonitionblock td.icon i.icon-caution { + background-color: var(--caution-border-color); +} + +.doc .admonitionblock td.icon i.icon-warning { + background-color: var(--warning-border-color); +} + +/* admonition icon contents */ + +.fa.icon-note::before { + content: "\f05a"; + background: none; +} + +.fa.icon-tip::before { + content: "\f0eb"; +} + +.fa.icon-important::before { + content: "\f06a"; +} + +.fa.icon-caution::before { + content: "\f06d"; +} + +.fa.icon-warning::before { + content: "\f071"; +} + +.doc .admonitionblock td .content { + word-wrap: anywhere; + padding: 1rem 1rem 0.75rem; + width: 100%; } .doc .admonitionblock a.btn { @@ -384,7 +456,7 @@ body { .doc .admonitionblock.warning { background-color: var(--warning-background-color); color: var(--warning-color); - border-left-color: var(--warning-border-color); + /* border-left-color: var(--warning-border-color); */ } .doc .admonitionblock.warning a.btn { @@ -398,7 +470,7 @@ body { .doc .admonitionblock.caution { background-color: var(--caution-background-color); color: var(--caution-color); - border-left-color: var(--caution-border-color); + /* border-left-color: var(--caution-border-color); */ } .doc .admonitionblock.caution a { @@ -416,7 +488,7 @@ body { .doc .admonitionblock.tip { background-color: var(--tip-background-color); color: var(--tip-color); - border-left-color: var(--tip-color); + /* border-left-color: var(--tip-color); */ } .doc .admonitionblock.tip a { @@ -434,7 +506,7 @@ body { .doc .admonitionblock.note { background-color: var(--note-background-color); color: var(--note-color); - border-left-color: var(--note-border-color); + /* border-left-color: var(--note-border-color); */ } .doc .admonitionblock.note a { @@ -452,7 +524,7 @@ body { .doc .admonitionblock.important { background-color: var(--important-background-color); color: var(--important-color); - border-left-color: var(--important-border-color); + /* border-left-color: var(--important-border-color); */ } .doc .admonitionblock.important a { From c3168cfbde30485ff2bbbb0eb0523e1c3353d727 Mon Sep 17 00:00:00 2001 From: Neil Dewhurst Date: Tue, 18 Mar 2025 16:47:08 +0000 Subject: [PATCH 2/3] delete ux-research --- src/css/doc.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/css/doc.css b/src/css/doc.css index f6cfd5e7..e2f6b69e 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -11,12 +11,6 @@ body { font-weight: var(--body-font-weight); } -@media screen and (min-width: 1024px) { - .doc.research { - max-width: 2000px; - } -} - @media screen and (min-width: 1024px) { .doc { flex: auto; From 390a13d12b9f1271baa506c7b89cec6c69f6e9ec Mon Sep 17 00:00:00 2001 From: Neil Dewhurst Date: Fri, 21 Mar 2025 10:44:39 +0000 Subject: [PATCH 3/3] Use icons from ndl, set admon title size --- preview-src/admonitions.adoc | 55 +++++++++++++++++++++- src/css/doc.css | 48 +++++++++++++------ src/css/labels.css | 2 +- src/css/themes.css | 4 +- src/css/vars.css | 5 ++ src/img/ndl-icons/exclamation-circle.svg | 3 ++ src/img/ndl-icons/exclamation-triangle.svg | 3 ++ src/img/ndl-icons/fire.svg | 4 ++ src/img/ndl-icons/information-circle.svg | 3 ++ src/img/ndl-icons/light-bulb.svg | 3 ++ 10 files changed, 111 insertions(+), 19 deletions(-) create mode 100644 src/img/ndl-icons/exclamation-circle.svg create mode 100644 src/img/ndl-icons/exclamation-triangle.svg create mode 100644 src/img/ndl-icons/fire.svg create mode 100644 src/img/ndl-icons/information-circle.svg create mode 100644 src/img/ndl-icons/light-bulb.svg diff --git a/preview-src/admonitions.adoc b/preview-src/admonitions.adoc index 2f0a389d..e3fb0910 100644 --- a/preview-src/admonitions.adoc +++ b/preview-src/admonitions.adoc @@ -179,4 +179,57 @@ $ npm i -g @antora/cli @antora/site-generator-default ==== Nominavi luptatum eos, an vim hinc philosophia intellegebat. -Eu mea inani iriure. \ No newline at end of file +Eu mea inani iriure. + +== Admonition in a table + +[options="header",width="100%",cols="2,3a"] +|=== +| Parameter +| Explanation + + +| Parameter name +| Parameter explanation +Lorem ipsum + +Dolor sit est. + +[NOTE] +==== +Note text goes here. +Note should be nicely aligned and have no borders +==== + +|=== + + +== Admonition first element in an example block + + +[.tabbed-example] +===== +[.include-with-admonition-first] +====== + + +[WARNING] +==== +Admonition should be given enough margin if it is the first element in an example block. +==== + +====== + +[.include-with-admonition-not-first] +====== + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + +[TIP] +==== +Admonition should be given normal margin if it is not the first element in an example block. +==== + +===== diff --git a/src/css/doc.css b/src/css/doc.css index e2f6b69e..9db3f71c 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -200,6 +200,15 @@ body { .doc i.fa { font-style: normal; + font-size: var(--admonition-title-font-size); +} + +.doc i.fa::before { + width: 24px; + height: inherit; + background-size: 20px; + background-position-y: center; + filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(199deg) brightness(103%) contrast(103%); /* filter to white */ } .doc p code, @@ -286,7 +295,7 @@ body { padding: 0.5rem; } -.doc table.tableblock td, +.doc table.tableblock > tbody > tr > td, .doc table.tableblock > :not(thead) th { border-top: 1px solid var(--table-border-color); border-bottom: 1px solid var(--table-border-color); @@ -360,13 +369,18 @@ body { padding: 0; position: absolute; top: 0; - transform: translate(-0.75rem, -50%); + transform: translate(-1rem, -50%); +} + +.doc .tableblock .admonitionblock td.icon { + transform: translate(0, -50%); + border: none; } .doc .admonitionblock td.icon i { color: rgba(var(--colors-neutral-15)); align-items: center; - border-radius: 1rem; + border-radius: 9999px; display: inline-flex; filter: none; height: 1.5rem; @@ -380,7 +394,7 @@ body { font-style: normal; font-weight: 600; font-weight: var(--admonition-label-font-weight); - padding-left: 0.5rem; + /* padding-left: 0.5rem; */ text-transform: uppercase; } @@ -409,24 +423,28 @@ body { /* admonition icon contents */ .fa.icon-note::before { - content: "\f05a"; - background: none; + background: url(../img/ndl-icons/information-circle.svg) no-repeat; + content: ""; } .fa.icon-tip::before { - content: "\f0eb"; + background: url(../img/ndl-icons/light-bulb.svg) no-repeat; + content: ""; } .fa.icon-important::before { - content: "\f06a"; + background: url(../img/ndl-icons/exclamation-circle.svg) no-repeat; + content: ""; } .fa.icon-caution::before { - content: "\f06d"; + background: url(../img/ndl-icons/fire.svg) no-repeat; + content: ""; } .fa.icon-warning::before { - content: "\f071"; + background: url(../img/ndl-icons/exclamation-triangle.svg) no-repeat; + content: ""; } .doc .admonitionblock td .content { @@ -790,7 +808,7 @@ body { padding: 0.75rem; } */ -.doc .exampleblock > .content > :first-child { +.doc .exampleblock > .content > :first-child:not(.admonitionblock) { margin-top: 0; } @@ -1143,13 +1161,13 @@ body { /* table-layout: fixed; */ } -.doc table.tableblock.frame-all tr:last-child td, -.doc table.tableblock.frame-ends tr:last-child td { +.doc table.tableblock.frame-all > tbody > tr:last-child > td, +.doc table.tableblock.frame-ends > tbody > tr:last-child > td { border-bottom: 2.5px solid var(--table-border-color); } -.doc table.tableblock.frame-all tr:first-child td, -.doc table.tableblock.frame-ends tr:first-child td { +.doc table.tableblock.frame-all > tbody > tr:first-child > td, +.doc table.tableblock.frame-ends > tbody > tr:first-child > td { border-top: 2.5px solid var(--table-border-color); } diff --git a/src/css/labels.css b/src/css/labels.css index fea91721..72f926f1 100644 --- a/src/css/labels.css +++ b/src/css/labels.css @@ -93,7 +93,7 @@ h2 > .flex-label { background: rgba(var(--colors-baltic-50)); color: rgba(var(--colors-baltic-10)); font-weight: 600; - font-size: 0.7rem; + font-size: var(--label-title-font-size); font-style: normal; } diff --git a/src/css/themes.css b/src/css/themes.css index 403b374f..03acf785 100644 --- a/src/css/themes.css +++ b/src/css/themes.css @@ -102,7 +102,7 @@ body.docs #preamble .abstract blockquote { color: rgba(var(--colors-baltic-60)); } -body.docs .tableblock .icon i { +body.docs .tableblock .icon i:not(.fa) { color: var(--color-docs); } @@ -337,7 +337,7 @@ body.developer #preamble .abstract blockquote { border-left-color: var(--color-green-600); } -body.developer .tableblock .icon i { +body.developer .tableblock .icon i:not(.fa) { color: var(--color-green-600); } diff --git a/src/css/vars.css b/src/css/vars.css index 9cbbb086..32f5ca3c 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -380,6 +380,11 @@ --alpha-beta-color: var(--color-black); --alpha-beta-background-color: rgba(var(--colors-marigold-40)); + /* labels and admonitions */ + + --label-title-font-size: calc(0.8 * var(--font-size-label)); /* set label font size from ndl */ + --admonition-title-font-size: var(--font-size-label); /* set admonitino font size from ndl */ + /* footer */ --footer-font-size: var(--font-size-body-medium); --footer-line-height: var(--doc-line-height); diff --git a/src/img/ndl-icons/exclamation-circle.svg b/src/img/ndl-icons/exclamation-circle.svg new file mode 100644 index 00000000..a6180593 --- /dev/null +++ b/src/img/ndl-icons/exclamation-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/ndl-icons/exclamation-triangle.svg b/src/img/ndl-icons/exclamation-triangle.svg new file mode 100644 index 00000000..9b6ce924 --- /dev/null +++ b/src/img/ndl-icons/exclamation-triangle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/ndl-icons/fire.svg b/src/img/ndl-icons/fire.svg new file mode 100644 index 00000000..66b58644 --- /dev/null +++ b/src/img/ndl-icons/fire.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/img/ndl-icons/information-circle.svg b/src/img/ndl-icons/information-circle.svg new file mode 100644 index 00000000..7744caa4 --- /dev/null +++ b/src/img/ndl-icons/information-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/ndl-icons/light-bulb.svg b/src/img/ndl-icons/light-bulb.svg new file mode 100644 index 00000000..640d9a11 --- /dev/null +++ b/src/img/ndl-icons/light-bulb.svg @@ -0,0 +1,3 @@ + + +