update doc style

preview-src/ui-model.yml

-antoraVersion: '1.0.0'
+antoraVersion: "1.0.0"
 site:
   url: http://localhost:5252
   title: Brand Docs
   homeUrl: &home_url /xyz/5.2/index.html
   components:
-  - name: abc
-    title: Project ABC
-    url: '#'
-    versions:
-    - &latest_version_abc
-      url: '#'
-      version: '1.1'
-      displayVersion: '1.1'
-    - url: '#'
-      version: '1.0'
-      displayVersion: '1.0'
-    latestVersion: *latest_version_abc
-  - &component
-    name: xyz
-    title: &component_title Project XYZ
-    url: /xyz/6.0/index.html
-    versions:
-    - &latest_version_xyz
+    - name: abc
+      title: Project ABC
+      url: "#"
+      versions:
+        - &latest_version_abc
+          url: "#"
+          version: "1.1"
+          displayVersion: "1.1"
+        - url: "#"
+          version: "1.0"
+          displayVersion: "1.0"
+      latestVersion: *latest_version_abc
+    - &component
+      name: xyz
+      title: &component_title Project XYZ
       url: /xyz/6.0/index.html
-      version: '6.0'
-      displayVersion: '6.0'
-    - &component_version
-      title: *component_title
-      url: '#'
-      version: '5.2'
-      displayVersion: '5.2'
-    - url: '#'
-      version: '5.1'
-      displayVersion: '5.1'
-    - url: '#'
-      version: '5.0'
-      displayVersion: '5.0'
-    latestVersion: *latest_version_xyz
-  - name: '123'
-    title: Project 123
-    url: '#'
-    versions:
-    - &latest_version_123
-      url: '#'
-      version: '2.2'
-      displayVersion: '2.2'
-    - url: '#'
-      version: '2.1'
-      displayVersion: '2.1'
-    - url: '#'
-      version: '2.0'
-      displayVersion: '2.0'
-    latestVersion: *latest_version_123
+      versions:
+        - &latest_version_xyz
+          url: /xyz/6.0/index.html
+          version: "6.0"
+          displayVersion: "6.0"
+        - &component_version
+          title: *component_title
+          url: "#"
+          version: "5.2"
+          displayVersion: "5.2"
+        - url: "#"
+          version: "5.1"
+          displayVersion: "5.1"
+        - url: "#"
+          version: "5.0"
+          displayVersion: "5.0"
+      latestVersion: *latest_version_xyz
+    - name: "123"
+      title: Project 123
+      url: "#"
+      versions:
+        - &latest_version_123
+          url: "#"
+          version: "2.2"
+          displayVersion: "2.2"
+        - url: "#"
+          version: "2.1"
+          displayVersion: "2.1"
+        - url: "#"
+          version: "2.0"
+          displayVersion: "2.0"
+      latestVersion: *latest_version_123
 page:
   url: *home_url
   home: true
   title: Brand’s Hardware & Software Requirements
   component: *component
   componentVersion: *component_version
-  version: '5.2'
-  displayVersion: '5.2'
+  version: "5.2"
+  displayVersion: "5.2"
   module: ROOT
   relativeSrcPath: index.adoc
   editUrl: http://example.com/project-xyz/blob/main/index.adoc
@@ -67,60 +67,60 @@ page:
     private: false
   previous:
     content: Quickstart
-    url: '#'
-    urlType: 'internal'
+    url: "#"
+    urlType: "internal"
   next:
     content: Liber Recusabo
-    url: '#'
-    urlType: 'internal'
+    url: "#"
+    urlType: "internal"
   breadcrumbs:
-  - content: Quickstart
-    url: '#'
-    urlType: fragment
-  - content: Brand’s Hardware & Software Requirements
-    url: /xyz/5.2/index.html
-    urlType: internal
-  versions:
-  - version: '6.0'
-    displayVersion: '6.0'
-    url: '#'
-  - version: '5.2'
-    displayVersion: '5.2'
-    url: '#'
-  - version: '5.1'
-    displayVersion: '5.1'
-    url: '#'
-  - version: '5.0'
-    displayVersion: '5.0'
-    missing: true
-    url: '#'
-  navigation:
-  - root: true
-    items:
     - content: Quickstart
-      url: '#'
-      urlType: fragment
-      items:
-      - content: Brand’s Hardware & Software Requirements
-        url: /xyz/5.2/index.html
-        urlType: internal
-      - content: Cu Solet
-        url: '/xyz/5.2/index.html#cu-solet'
-        urlType: internal
-      - content: English + 中文
-        url: '/xyz/5.2/index.html#english+中文'
-        urlType: internal
-    - content: Liber Recusabo
-      url: '#liber-recusabo'
+      url: "#"
       urlType: fragment
-    - content: Reference
+    - content: Brand’s Hardware & Software Requirements
+      url: /xyz/5.2/index.html
+      urlType: internal
+  versions:
+    - version: "6.0"
+      displayVersion: "6.0"
+      url: "#"
+    - version: "5.2"
+      displayVersion: "5.2"
+      url: "#"
+    - version: "5.1"
+      displayVersion: "5.1"
+      url: "#"
+    - version: "5.0"
+      displayVersion: "5.0"
+      missing: true
+      url: "#"
+  navigation:
+    - root: true
       items:
-      - content: Keyboard Shortcuts
-        url: '#'
-        urlType: fragment
-      - content: Importing and Exporting
-        url: '#'
-        urlType: fragment
-      - content: Some Code
-        url: '/xyz/5.2/index.html#some-code'
-        urlType: internal
+        - content: Quickstart
+          url: "#"
+          urlType: fragment
+          items:
+            - content: Brand’s Hardware & Software Requirements
+              url: /xyz/5.2/index.html
+              urlType: internal
+            - content: Cu Solet
+              url: "/xyz/5.2/index.html#cu-solet"
+              urlType: internal
+            - content: English + 中文
+              url: "/xyz/5.2/index.html#english+中文"
+              urlType: internal
+        - content: Liber Recusabo
+          url: "#liber-recusabo"
+          urlType: fragment
+        - content: Reference
+          items:
+            - content: Keyboard Shortcuts
+              url: "#"
+              urlType: fragment
+            - content: Importing and Exporting
+              url: "#"
+              urlType: fragment
+            - content: Some Code
+              url: "/xyz/5.2/index.html#some-code"
+              urlType: internal

src/css/doc.css

@@ -29,31 +29,32 @@
 }
 
 .doc h1 {
-  font-weight: var(--h1-font-weight);
+  font-size: 32px;
+  font-weight: 600;
 }
 
 .doc h2 {
-  font-weight: var(--h2-font-weight);
+  font-size: 28px;
+  font-weight: 600;
 }
 
 .doc h3 {
-  font-weight: var(--h3-font-weight);
+  font-weight: 600;
 }
 
 .doc h4 {
-  font-weight: var(--h4-font-weight);
+  font-weight: 500;
 }
 
 .doc h5 {
-  font-weight: var(--h5-font-weight);
+  font-weight: 500;
 }
 
 .doc h6 {
-  font-weight: var(--h6-font-weight);
+  font-weight: 500;
 }
 
 .doc > h1.page:first-child {
-  font-size: calc(36 / var(--rem-base) * 1rem);
   margin: 1.5rem 0;
 }
 
@@ -71,6 +72,14 @@
   margin-top: 1rem;
 }
 
+.doc .sect1 {
+  background: var(--color-white);
+  padding: 25px;
+  border-radius: var(--content-border-radius);
+  box-shadow: 0 1px 2px 1px rgba(47, 56, 61, 0.15),
+    0 1px 2px rgba(47, 56, 61, 0.2);
+}
+
 #preamble + .sect1,
 .doc .sect1 + .sect1 {
   margin-top: 2rem;
@@ -84,10 +93,7 @@
 }
 
 .doc h2:not(.discrete) {
-  border-bottom: 1px solid var(--section-divider-color);
-  margin-left: -1rem;
-  margin-right: -1rem;
-  padding: 0.4rem 1rem 0.1rem;
+  margin-top: 0;
 }
 
 .doc h3:not(.discrete),
@@ -106,9 +112,9 @@
   width: 1.75ex;
   margin-left: -1.5ex;
   visibility: hidden;
-  font-size: 0.8em;
+  font-size: 0.6em;
   font-weight: normal;
-  padding-top: 0.05em;
+  padding-top: 0.3em;
 }
 
 .doc h1 .anchor::before,
@@ -159,7 +165,7 @@
 .doc thead code,
 .doc .colist > table code {
   color: var(--code-font-color);
-  background: var(--code-background);
+  background: var(--color-smoke-40);
   border-radius: 0.25em;
   font-size: 0.95em;
   padding: 0.125em 0.25em;
@@ -279,6 +285,13 @@
   margin-top: 0.5rem;
 }
 
+.doc table.tableblock thead th {
+  color: #64696c;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
 .doc table.tableblock pre {
   font-size: inherit;
 }
@@ -298,7 +311,7 @@
 
 .doc table.tableblock,
 .doc table.tableblock > * > tr > * {
-  border: 0 solid var(--table-border-color);
+  border-bottom: 0 solid var(--table-border-color);
 }
 
 .doc table.tableblock h2 {
@@ -321,11 +334,6 @@
   border-width: 1px 0;
 }
 
-.doc table.grid-all > thead th,
-.doc table.grid-rows > thead th {
-  border-bottom-width: 2.5px;
-}
-
 .doc table.frame-all {
   border-width: 1px;
 }
@@ -419,11 +427,35 @@
 
 .doc .admonitionblock td.content {
   padding: 1rem 1rem 0.75rem;
-  background: var(--admonition-background);
   width: 100%;
   word-wrap: anywhere;
 }
 
+.doc .admonitionblock {
+  border-radius: var(--content-border-radius);
+  border: 1px solid var(--color-smoke-90);
+}
+
+.doc .admonitionblock.note {
+  background-color: #f6fafd;
+}
+
+.doc .admonitionblock.tip {
+  background-color: #f7f9fa;
+}
+
+.doc .admonitionblock.important {
+  background-color: #faf1f0;
+}
+
+.doc .admonitionblock.caution {
+  background-color: #faf1f0;
+}
+
+.doc .admonitionblock.warning {
+  background-color: #fff4e3;
+}
+
 .doc .admonitionblock td.icon {
   font-size: calc(15 / var(--rem-base) * 1rem);
   left: 0;
@@ -530,22 +562,13 @@
 }
 
 #preamble .abstract blockquote {
-  background: var(--abstract-background);
-  border-left: 5px solid var(--abstract-border-color);
+  border-left: 5px solid var(--color-blue-70);
   color: var(--abstract-font-color);
-  font-size: calc(16 / var(--rem-base) * 1rem);
-  padding: 0.75em 1em;
-}
-
-.doc .quoteblock,
-.doc .verseblock {
-  background: var(--quote-background);
-  border-left: 5px solid var(--quote-border-color);
-  color: var(--quote-font-color);
+  padding-left: 1.5em;
 }
 
-.doc .quoteblock {
-  padding: 0.25rem 2rem 1.25rem;
+.doc .quoteblock .title {
+  font-weight: 500;
 }
 
 .doc .quoteblock .attribution {
@@ -558,10 +581,6 @@
   margin-top: 1rem;
 }
 
-.doc .quoteblock .paragraph {
-  font-style: italic;
-}
-
 .doc .quoteblock cite {
   padding-left: 1em;
 }
@@ -787,10 +806,9 @@
 
 .doc .exampleblock > .content,
 .doc details.result > .content {
-  background: var(--example-background);
-  border: 0.25rem solid var(--example-border-color);
-  border-radius: 0.5rem;
-  padding: 0.75rem;
+  background: var(--color-blue-10);
+  border-radius: var(--content-border-radius);
+  padding: var(--content-padding);
 }
 
 .doc .exampleblock > .content::after,
@@ -834,11 +852,13 @@
 .doc pre.highlight > code,
 .doc .listingblock pre:not(.highlight),
 .doc .literalblock pre {
-  background: var(--pre-background);
-  box-shadow: inset 0 0 1.75px var(--pre-border-color);
+  color: var(--color-smoke-40);
+  background: var(--color-jet-90);
+  border-radius: var(--content-border-radius);
+  font-size: 15px;
   display: block;
   overflow-x: auto;
-  padding: 0.875em;
+  padding: var(--content-padding);
 }
 
 .doc .listingblock > .content {
@@ -1038,7 +1058,8 @@
   background: var(--kbd-background);
   border: 1px solid var(--kbd-border-color);
   border-radius: 0.25em;
-  box-shadow: 0 1px 0 var(--kbd-border-color), 0 0 0 0.1em var(--body-background) inset;
+  box-shadow: 0 1px 0 var(--kbd-border-color),
+    0 0 0 0.1em var(--body-background) inset;
   padding: 0.25em 0.5em;
   vertical-align: text-bottom;
   white-space: nowrap; /* effectively ignores hyphens setting */
@@ -1124,3 +1145,7 @@
 .doc .userinput {
   color: red;
 }
+
+.doc mark {
+  background-color: var(--color-blue-90);
+}

src/css/vars.css

 :root {
   /* colors */
+  --color-bwg-main: #0072ce;
   --color-white: #fff;
   --color-smoke-10: #fefefe;
   --color-smoke-30: #fafafa;
+  --color-smoke-40: #f2f0f8;
   --color-smoke-50: #f5f5f5;
   --color-smoke-70: #f0f0f0;
+  --color-smoke-80: #eceded;
   --color-smoke-90: #e1e1e1;
   --color-gray-10: #c1c1c1;
   --color-gray-30: #9c9c9c;
@@ -16,10 +19,14 @@
   --color-jet-50: #333;
   --color-jet-70: #222;
   --color-jet-80: #12071f;
+  --color-jet-90: #28262e;
   --color-black: #000;
   --color-blue-10: #f8f9fd;
   --color-blue-30: #dee2e6;
-  --color-bwg-main: #0072ce;
+  --color-blue-50: #f4f8fc;
+  --color-blue-70: #d8def6;
+  --color-blue-80: #e3e6f3;
+  --color-blue-90: #c0d1fe;
   /* fonts */
   --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
   --body-font-size: 1.0625em; /* 17px */
@@ -86,12 +93,6 @@
   --doc-margin: 0 auto;
   --doc-margin--desktop: 0 2rem;
   --heading-font-color: var(--color-jet-80);
-  --h1-font-weight: var(--h-font-weight-bold);
-  --h2-font-weight: var(--h-font-weight-bold);
-  --h3-font-weight: var(--h-font-weight-bold);
-  --h4-font-weight: 500;
-  --h5-font-weight: 500;
-  --h6-font-weight: 500;
   --alt-heading-font-weight: var(--body-font-weight-bold);
   --section-divider-color: var(--panel-border-color);
   --link-font-color: #1565c0;
@@ -122,7 +123,13 @@
   --sidebar-background: var(--color-white);
   --table-border-color: var(--panel-border-color);
   --table-stripe-background: var(--panel-background);
-  --table-footer-background: linear-gradient(to bottom, var(--color-smoke-70) 0%, var(--color-white) 100%);
+  --table-footer-background: linear-gradient(
+    to bottom,
+    var(--color-smoke-70) 0%,
+    var(--color-white) 100%
+  );
+  --content-border-radius: 10px;
+  --content-padding: 15px 20px;
   /* toc */
   --toc-font-color: var(--nav-muted-color);
   --toc-heading-font-color: var(--doc-font-color);