update latest ui

.gitlab-ci.yml

-image: node:10.14.2-stretch
-stages: [setup, verify, deploy]
-install:
-  stage: setup
-  cache:
-    paths:
-    - .cache/npm
-  script:
-  - &npm_install
-    npm install --quiet --no-progress --cache=.cache/npm
-lint:
-  stage: verify
-  cache: &pull_cache
-    policy: pull
-    paths:
-    - .cache/npm
-  script:
-  - *npm_install
-  - node_modules/.bin/gulp lint
-bundle-stable:
-  stage: deploy
-  only:
-  - master@test/antora-ui-default
-  cache: *pull_cache
-  script:
-  - *npm_install
-  - node_modules/.bin/gulp bundle
-  artifacts:
-    paths:
-    - build/ui-bundle.zip
-bundle-dev:
-  stage: deploy
-  except:
-  - master
-  cache: *pull_cache
-  script:
-  - *npm_install
-  - node_modules/.bin/gulp bundle
-  artifacts:
-    expire_in: 1 day # unless marked as keep from job page
-    paths:
-    - build/ui-bundle.zip
-pages:
-  stage: deploy
-  only:
-  - master@test/antora-ui-default
-  cache: *pull_cache
-  script:
-  - *npm_install
-  - node_modules/.bin/gulp preview:build
-  # FIXME figure out a way to avoid copying these files to preview site
-  - rm -rf public/_/{helpers,layouts,partials}
-  artifacts:
-    paths:
-    - public

.gulp.json

 {
-  "description": "Build tasks for the Antora default UI project",
+  "description": "Build tasks for the SWLab UI project",
   "flags.tasksDepth": 1
 }

.vscode/settings.json

+{}
\ No newline at end of file

README.md

+# SWLab UI
+
+이 프로젝트는 SWLab 문서의 UI를 관리합니다.

index.js

 'use strict'
-  
+
 // This placeholder script allows this package to be discovered using require.resolve.
 // It may be used in the future to export information about the files in this UI.

package-lock.json

 {
-  "name": "@antora/ui-default",
+  "name": "swlab-ui",
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
@@ -1068,6 +1068,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -2500,6 +2505,14 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "css-select": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
@@ -5374,6 +5387,15 @@
       "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
       "dev": true
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlescape": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/htmlescape/-/htmlescape-1.1.1.tgz",
@@ -11160,6 +11182,14 @@
         "uuid": "^3.0.1"
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -11885,6 +11915,14 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",

package.json

 {
-  "name": "@antora/ui-default",
-  "description": "An archetype project that produces a UI for creating documentation sites with Antora",
-  "homepage": "https://gitlab.bwg.co.kr/test/antora-ui-default",
+  "name": "swlab-ui",
+  "description": "swlab-ui",
+  "homepage": "https://gitlab.bwg.co.kr/swd/swlab-ui.git",
   "license": "MPL-2.0",
   "repository": {
     "type": "git",
-    "url": "https://gitlab.bwg.co.kr/test/antora-ui-default.git"
+    "url": "https://gitlab.bwg.co.kr/swd/swlab-ui.git"
   },
   "engines": {
     "node": ">= 8.0.0"
@@ -52,5 +52,8 @@
     "stylelint": "~13.3",
     "stylelint-config-standard": "~20.0",
     "vinyl-fs": "~3.0"
+  },
+  "dependencies": {
+    "html2canvas": "^1.4.1"
   }
 }

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/base.css

@@ -32,7 +32,7 @@ a {
 }
 
 a:hover {
-  text-decoration: underline;
+  text-decoration: none;
 }
 
 a:active {

src/css/breadcrumbs.css

 .breadcrumbs {
   display: none;
   flex: 1 1;
-  padding: 0 0.5rem 0 0.75rem;
+  padding: 0;
   line-height: var(--nav-line-height);
 }
 
@@ -12,20 +12,26 @@
 }
 
 a + .breadcrumbs {
-  padding-left: 0.05rem;
+  padding-left: 0;
 }
 
 .breadcrumbs ul {
   display: flex;
   flex-wrap: wrap;
   margin: 0;
-  padding: 0;
+  padding: 0 !important;
   list-style: none;
 }
 
 .breadcrumbs li {
   display: inline;
   margin: 0;
+  font-size: 0.75rem;
+}
+
+.breadcrumbs li:last-child {
+  color: var(--color-bwg-main);
+  font-weight: 600;
 }
 
 .breadcrumbs li::after {

src/css/doc.css

@@ -4,7 +4,6 @@
   hyphens: auto;
   line-height: var(--doc-line-height);
   margin: var(--doc-margin);
-  max-width: var(--doc-max-width);
   padding: 0 1rem 4rem;
 }
 
@@ -13,7 +12,6 @@
     flex: auto;
     font-size: var(--doc-font-size--desktop);
     margin: var(--doc-margin--desktop);
-    max-width: var(--doc-max-width--desktop);
     min-width: 0;
   }
 }
@@ -25,14 +23,38 @@
 .doc h5,
 .doc h6 {
   color: var(--heading-font-color);
-  font-weight: var(--heading-font-weight);
   hyphens: none;
   line-height: 1.3;
   margin: 1rem 0 0;
 }
 
+.doc h1 {
+  font-size: 32px;
+  font-weight: 600;
+}
+
+.doc h2 {
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.doc h3 {
+  font-weight: 600;
+}
+
+.doc h4 {
+  font-weight: 500;
+}
+
+.doc h5 {
+  font-weight: 500;
+}
+
+.doc h6 {
+  font-weight: 500;
+}
+
 .doc > h1.page:first-child {
-  font-size: calc(36 / var(--rem-base) * 1rem);
   margin: 1.5rem 0;
 }
 
@@ -50,6 +72,13 @@
   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;
@@ -63,10 +92,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),
@@ -85,9 +111,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,
@@ -138,7 +164,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;
@@ -258,6 +284,14 @@
   margin-top: 0.5rem;
 }
 
+.doc table.tableblock thead th {
+  color: #64696c;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  background: var(--color-blue-10);
+}
+
 .doc table.tableblock pre {
   font-size: inherit;
 }
@@ -280,6 +314,14 @@
   border: 0 solid var(--table-border-color);
 }
 
+.doc table.tableblock h2 {
+  margin: 0;
+}
+
+.doc table.tableblock h2 + .sectionbody {
+  padding: 0 1rem;
+}
+
 .doc table.grid-all > * > tr > * {
   border-width: 1px;
 }
@@ -292,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;
 }
@@ -366,6 +403,8 @@
 
 .doc .admonitionblock {
   margin: 1.4rem 0 0;
+  border-radius: var(--content-border-radius);
+  border: 1px solid var(--color-smoke-90);
 }
 
 .doc .admonitionblock p,
@@ -390,11 +429,30 @@
 
 .doc .admonitionblock td.content {
   padding: 1rem 1rem 0.75rem;
-  background: var(--admonition-background);
   width: 100%;
   word-wrap: anywhere;
 }
 
+.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;
@@ -501,22 +559,18 @@
 }
 
 #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;
+  padding-left: 1.5em;
 }
 
-.doc .quoteblock,
-.doc .verseblock {
-  background: var(--quote-background);
-  border-left: 5px solid var(--quote-border-color);
-  color: var(--quote-font-color);
-}
-
-.doc .quoteblock {
-  padding: 0.25rem 2rem 1.25rem;
+.doc .quoteblock .title {
+  color: var(--caption-font-color);
+  font-size: 15px;
+  font-weight: var(--caption-font-weight);
+  hyphens: none;
+  letter-spacing: 0.01em;
+  margin-bottom: -15px;
 }
 
 .doc .quoteblock .attribution {
@@ -529,10 +583,6 @@
   margin-top: 1rem;
 }
 
-.doc .quoteblock .paragraph {
-  font-style: italic;
-}
-
 .doc .quoteblock cite {
   padding-left: 1em;
 }
@@ -639,6 +689,11 @@
   content: "\274f";
 }
 
+.doc .olist li > .admonitionblock,
+.doc .ulist li > .admonitionblock {
+  margin-left: 1em;
+}
+
 .doc .dlist .dlist,
 .doc .dlist .olist,
 .doc .dlist .ulist,
@@ -671,8 +726,7 @@
 .doc .videoblock .title,
 .doc table.tableblock caption {
   color: var(--caption-font-color);
-  font-size: calc(16 / var(--rem-base) * 1rem);
-  font-style: var(--caption-font-style);
+  font-size: 15px;
   font-weight: var(--caption-font-weight);
   hyphens: none;
   letter-spacing: 0.01em;
@@ -753,10 +807,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,
@@ -774,7 +827,8 @@
 .doc .sidebarblock {
   background: var(--sidebar-background);
   border-radius: 0.75rem;
-  padding: 0.75rem 1.5rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 2px 1px rgba(47, 56, 61, 0.15), 0 1px 2px rgba(47, 56, 61, 0.2);
 }
 
 .doc .sidebarblock > .content > .title {
@@ -799,11 +853,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 {
@@ -1085,3 +1141,11 @@
   text-align: right;
   width: 1.5em;
 }
+
+.doc .userinput {
+  color: red;
+}
+
+.doc mark {
+  background-color: var(--color-blue-90);
+}

src/css/footer.css

 footer.footer {
-  background-color: var(--footer-background);
-  color: var(--footer-font-color);
-  font-size: calc(15 / var(--rem-base) * 1rem);
+  /* background-color: var(--footer-background); */
+  /* color: var(--footer-font-color); */
+  background-color: var(--color-white);
+  color: var(--color-bwg-main);
+  font-size: calc(15 / var(--rem-base) * 0.85rem);
   line-height: var(--footer-line-height);
-  padding: 1.5rem;
+  padding: 0.5rem 1.5rem;
+  text-align: left;
+  height: 50px;
 }
 
 .footer p {

src/css/header.css

@@ -9,20 +9,59 @@ body {
 }
 
 .navbar {
-  background: var(--navbar-background);
-  color: var(--navbar-font-color);
+  background: var(--nav-background);
+  color: var(--color-bwg-main);
+  height: 4.5rem;
   font-size: calc(16 / var(--rem-base) * 1rem);
-  height: var(--navbar-height);
   position: fixed;
   top: 0;
   width: 100%;
   z-index: var(--z-index-navbar);
+  max-height: 5rem;
+  border-bottom: 1px solid var(--color-blue-30);
+  transition: box-shadow .2s;
+}
+
+.navbar .active {
+  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1);
+}
+
+.navbar.active {
+  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1);
 }
 
 .navbar a {
   text-decoration: none;
 }
 
+.navbar-logo {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  background-image: url('../img/logo_color.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-right: 10px;
+}
+
+.navbar-title-contents {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.navbar-title-contents .navbar-title {
+  color: var(--color-bwg-main);
+  font-size: 29px;
+  font-weight: 600;
+}
+
+.navbar-title-contents .navbar-title.sub {
+  font-size: 12px;
+  font-weight: 300;
+}
+
 .navbar-brand {
   display: flex;
   flex: auto;
@@ -36,9 +75,10 @@ body {
 .navbar-brand .navbar-item:first-child {
   align-self: center;
   padding: 0;
-  font-size: calc(22 / var(--rem-base) * 1rem);
+  font-size: calc(22 / var(--rem-base) * 1.25rem);
   flex-wrap: wrap;
   line-height: 1;
+  font-weight: 700;
 }
 
 .navbar-brand .navbar-item:first-child a {
@@ -55,15 +95,28 @@ body {
   justify-content: flex-end;
 }
 
+#search-field {
+  position: relative;
+}
+
+#search-field > i {
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  color: #dbdbdb;
+}
+
 #search-input {
+  box-sizing: border-box;
   color: #333;
   font-family: inherit;
   font-size: 0.95rem;
   width: 150px;
+  height: 45px;
   border: 1px solid #dbdbdb;
-  border-radius: 0.1em;
+  border-radius: 28px;
   line-height: 1.5;
-  padding: 0 0.25em;
+  padding: 0 1rem !important;
 }
 
 #search-input:disabled {
@@ -79,6 +132,11 @@ body {
 
 #search-input:focus {
   outline: none;
+  border: 2px solid var(--color-bwg-main);
+}
+
+#search-input:focus + i {
+  color: var(--color-bwg-main);
 }
 
 .navbar-burger {
@@ -133,6 +191,7 @@ body {
   display: block;
   line-height: var(--doc-line-height);
   padding: 0.5rem 1rem;
+  margin: 0 0.5rem;
 }
 
 .navbar-item.has-dropdown {
@@ -181,15 +240,30 @@ body {
 .navbar .button {
   display: inline-flex;
   align-items: center;
-  background: var(--navbar-button-background);
-  border: 1px solid var(--navbar-button-border-color);
-  border-radius: 0.15rem;
+  background: var(--color-bwg-main);
+  border-radius: 28px;
   height: 1.75rem;
-  color: var(--navbar-button-font-color);
-  padding: 0 0.75em;
+  color: var(--color-white);
+  padding: 1.25rem 1.75rem 1.25rem 1.5rem;
   white-space: nowrap;
 }
 
+.download_icon {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  background-image: url('../img/ico_download.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-right: 7px;
+}
+
+.navbar .button:hover {
+  transition: 300ms ease;
+  background-color: rgba(0, 114, 206, 0.8);
+}
+
 @media screen and (max-width: 768.5px) {
   .navbar-brand .navbar-item.search {
     padding-left: 0;
@@ -199,7 +273,7 @@ body {
 
 @media screen and (min-width: 769px) {
   #search-input {
-    width: 200px;
+    width: 250px;
   }
 }
 
@@ -225,11 +299,6 @@ body {
   .navbar-menu:not(.is-active) {
     display: none;
   }
-
-  .navbar-menu a.navbar-item:hover,
-  .navbar-menu .navbar-link:hover {
-    background: var(--navbar-menu_hover-background);
-  }
 }
 
 @media screen and (min-width: 1024px) {
@@ -256,7 +325,26 @@ body {
   }
 
   .navbar-item.is-hoverable:hover .navbar-dropdown {
+    /* display: block; */
+    max-height: 300px; /* Adjust based on content */
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .navbar-link::before {
+    content: "";
     display: block;
+    position: absolute;
+    bottom: 1rem;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: var(--navbar-font-color);
+    transition: width 0.3s ease-in-out;
+  }
+
+  .navbar-link:hover::before {
+    width: 100%;
   }
 
   .navbar-link::after {
@@ -276,14 +364,30 @@ body {
 
   .navbar-end > .navbar-item,
   .navbar-end .navbar-link {
-    color: var(--navbar-font-color);
+    color: var(--color-jet-80);
   }
 
   .navbar-end > a.navbar-item:hover,
   .navbar-end .navbar-link:hover,
   .navbar-end .navbar-item.has-dropdown:hover .navbar-link {
-    background: var(--navbar_hover-background);
     color: var(--navbar-font-color);
+    font-weight: 600;
+  }
+
+  .navbar-end > a.navbar-item::after {
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: 1rem;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: var(--navbar-font-color);
+    transition: width 0.3s ease-in-out;
+  }
+
+  .navbar-end > a.navbar-item:hover::after {
+    width: 100%;
   }
 
   .navbar-end .navbar-link::after {
@@ -291,20 +395,26 @@ body {
   }
 
   .navbar-dropdown {
+    clear: both;
     background: var(--navbar-menu-background);
-    border: 1px solid var(--navbar-menu-border-color);
-    border-top: none;
+    box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.16);
     border-radius: 0 0 0.25rem 0.25rem;
-    display: none;
+    /* display: none; */
     top: 100%;
     left: 0;
     min-width: 100%;
     position: absolute;
+    display: block;
+    max-height: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0.5s;
   }
 
   .navbar-dropdown .navbar-item {
     padding: 0.5rem 3rem 0.5rem 1rem;
     white-space: nowrap;
+    margin: 0;
   }
 
   .navbar-dropdown .navbar-item small {
@@ -322,6 +432,8 @@ body {
   }
 
   .navbar-dropdown a.navbar-item:hover {
-    background: var(--navbar-menu_hover-background);
+    background: var(--color-bwg-main);
+    color: var(--color-white);
+    font-weight: 600;
   }
 }

src/css/highlight.css

-/*! Adapted from the GitHub style by Vasily Polovnyov <vast@whiteants.net> */
+/*
+
+Atom One Light by Daniel Gamage
+Original One Light Syntax theme from https://github.com/atom/one-light-syntax
+
+base:    #fafafa
+mono-1:  #383a42
+mono-2:  #686b77
+mono-3:  #a0a1a7
+hue-1:   #0184bb
+hue-2:   #4078f2
+hue-3:   #a626a4
+hue-4:   #50a14f
+hue-5:   #e45649
+hue-5-2: #c91243
+hue-6:   #986801
+hue-6-2: #c18401
+
+*/
+
 .hljs {
-  color: #abb2bf;
-  background: #282c34 !important;
+  color: #383a42;
+  background: #fafafa;
 }
 
 .hljs-comment,
 .hljs-quote {
-  color: #5c6370;
+  color: #a0a1a7;
   font-style: italic;
 }
 
 .hljs-doctag,
 .hljs-keyword,
 .hljs-formula {
-  color: #c678dd;
+  color: #a626a4;
 }
 
 .hljs-section,
@@ -21,11 +40,11 @@
 .hljs-selector-tag,
 .hljs-deletion,
 .hljs-subst {
-  color: #e06c75;
+  color: #e45649;
 }
 
 .hljs-literal {
-  color: #56b6c2;
+  color: #0184bb;
 }
 
 .hljs-string,
@@ -33,7 +52,7 @@
 .hljs-addition,
 .hljs-attribute,
 .hljs-meta .hljs-string {
-  color: #98c379;
+  color: #50a14f;
 }
 
 .hljs-attr,
@@ -44,7 +63,7 @@
 .hljs-selector-attr,
 .hljs-selector-pseudo,
 .hljs-number {
-  color: #d19a66;
+  color: #986801;
 }
 
 .hljs-symbol,
@@ -53,13 +72,13 @@
 .hljs-meta,
 .hljs-selector-id,
 .hljs-title {
-  color: #61aeee;
+  color: #4078f2;
 }
 
 .hljs-built_in,
 .hljs-title.class_,
 .hljs-class .hljs-title {
-  color: #e6c07b;
+  color: #c18401;
 }
 
 .hljs-emphasis {

src/css/main.css

@@ -20,6 +20,7 @@ body.-toc aside.toc.sidebar {
 
   main > .content {
     display: flex;
+    height: calc(100% - 50px);
   }
 
   aside.toc.embedded {

src/css/nav.css

@@ -16,7 +16,8 @@
 
 @media screen and (min-width: 769px) {
   .nav-container {
-    width: var(--nav-width);
+    /* width: var(--nav-width); */
+    width: 20.125rem;
   }
 }
 
@@ -35,10 +36,12 @@
 }
 
 .nav {
-  background: var(--nav-background);
+  /* background: var(--nav-background); */
+  background: var(--color-white);
   position: relative;
   top: var(--toolbar-height);
   height: var(--nav-height);
+  border-right: 1px solid var(--color-blue-30);
 }
 
 @media screen and (min-width: 769px) {
@@ -70,6 +73,8 @@
   overflow-y: scroll;
   overscroll-behavior: none;
   height: var(--nav-panel-menu-height);
+  padding: 1.25em;
+  padding-top: 0;
 }
 
 .nav-panel-menu:not(.is-active) .nav-menu {
@@ -89,9 +94,9 @@
 
 .nav-menu {
   min-height: 100%;
-  padding: 0.5rem 0.75rem;
-  line-height: var(--nav-line-height);
   position: relative;
+  padding: 0.5rem 0.5rem 0.5rem 0;
+  line-height: 1.375;
 }
 
 .nav-menu-toggle {
@@ -122,13 +127,13 @@
   font-size: inherit;
   font-weight: var(--body-font-weight-bold);
   margin: 0;
-  padding: 0.25em 0 0.125em;
+  padding: 0.25em 0 0.125em 0.75em;
 }
 
 .nav-list {
   list-style: none;
-  margin: 0 0 0 0.75rem;
   padding: 0;
+  margin: 0;
 }
 
 .nav-menu > .nav-list + .nav-list {
@@ -137,6 +142,24 @@
 
 .nav-item {
   margin-top: 0.5em;
+  position: relative;
+}
+
+.nav-item .nav-link {
+  padding: 0.5rem 0 0.35rem 0.25rem;
+  display: block;
+  border-bottom: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.nav-item .nav-link:hover {
+  border-bottom: 1px solid var(--color-bwg-main);
+  border-radius: 0;
+}
+
+.nav-item.is-current-page > a {
+  background: var(--color-bwg-main);
+  color: var(--color-white);
 }
 
 /* adds some breathing room below a nested list */
@@ -150,6 +173,38 @@
   margin: 0;
 }
 
+.nav-item[data-depth="0"] > .nav-link {
+  padding-left: 1.25rem;
+}
+
+.nav-item[data-depth="0"] > .nav-item-toggle {
+  left: 1rem;
+}
+
+.nav-item[data-depth="1"] > .nav-link {
+  padding-left: 1.75rem;
+}
+
+.nav-item[data-depth="1"] > .nav-item-toggle {
+  left: 1.5rem;
+}
+
+.nav-item[data-depth="2"] > .nav-link {
+  padding-left: 2.25rem;
+}
+
+.nav-item[data-depth="2"] > .nav-item-toggle {
+  left: 2rem;
+}
+
+.nav-item[data-depth="3"] > .nav-link {
+  padding-left: 2.75rem;
+}
+
+.nav-item[data-depth="3"] > .nav-item-toggle {
+  left: 2.5rem;
+}
+
 .nav-item:not(.is-active) > .nav-list {
   display: none;
 }
@@ -163,14 +218,19 @@
   position: absolute;
   height: calc(var(--nav-line-height) * 1em);
   width: calc(var(--nav-line-height) * 1em);
-  margin-top: -0.05em;
+  margin-top: 0.35em;
   margin-left: calc(var(--nav-line-height) * -1em);
+  top: 0.15rem;
 }
 
 .nav-item.is-active > .nav-item-toggle {
   transform: rotate(90deg);
 }
 
+.nav-item.is-current-page > .nav-menu-toggle {
+  background-image: url(../img/caret_white.svg);
+}
+
 .is-current-page > .nav-link,
 .is-current-page > .nav-text {
   font-weight: var(--body-font-weight-bold);

src/css/page-versions.css

 .page-versions {
-  margin: 0 0.2rem 0 auto;
+  /* margin: 0 0.2rem 0 auto; */
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   line-height: 1;
+  height: var(--toolbar-height);
+  margin: 1rem 0.7rem;
+  padding: 0 1.25em;
 }
 
-@media screen and (min-width: 1024px) {
+/* @media screen and (min-width: 1024px) {
   .page-versions {
     margin-right: 0.7rem;
   }
+} */
+
+.page-versions .backdrop {
+  display: none;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.backdrop.is-active {
+  display: block;
+}
+
+.page-versions h2.title {
+  color: var(--nav-heading-font-color);
+  font-size: inherit;
+  font-weight: var(--body-font-weight-bold);
+  margin: 0;
+  /* padding: 0.25em 0 0.125em 0.75em; */
 }
 
 .page-versions .version-menu-toggle {
-  color: inherit;
+  color: var(--color-bwg-main);
+  font-weight: 600;
   background: url(../img/chevron.svg) no-repeat;
   background-position: right 0.5rem top 50%;
   background-size: auto 0.75em;
-  border: none;
   outline: none;
   line-height: inherit;
-  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
+  padding: 0.5rem 2rem 0.5rem 1rem;
   position: relative;
+  border-radius: 0.5rem;
+  border: 2px solid var(--color-smoke-90);
+  transition: all 0.15s ease-in-out;
   z-index: var(--z-index-page-version-menu);
 }
 
+.page-versions .version-menu-toggle:hover {
+  border: 2px solid var(--color-bwg-main);
+}
+
 .page-versions .version-menu {
   display: flex;
-  min-width: 100%;
+  min-width: 85px;
   flex-direction: column;
-  align-items: flex-end;
-  background: linear-gradient(to bottom, var(--page-version-menu-background) 0%, var(--page-version-menu-background) 100%) no-repeat;
-  padding: 1.375rem 1.5rem 0.5rem 0.5rem;
+  align-items: flex-start;
+  /* background: linear-gradient(to bottom, var(--page-version-menu-background) 0%, var(--page-version-menu-background) 100%) no-repeat; */
+  background-color: white;
+  padding: 0.25rem;
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 45px;
+  right: 22px;
   white-space: nowrap;
+  z-index: var(--z-index-page-version-menu);
+  box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
+  border-radius: 0.5rem;
 }
 
 .page-versions:not(.is-active) .version-menu {
@@ -41,8 +80,15 @@
 }
 
 .page-versions .version {
+  color: var(--color-gray-50);
+  width: 100%;
   display: block;
-  padding-top: 0.5rem;
+  padding: 0.35rem 0 0.35rem 0.85rem;
+  border-radius: 0.5rem;
+}
+
+.page-versions .version:hover {
+  background-color: var(--color-blue-10);
 }
 
 .page-versions .version.is-current {

src/css/pagination.css

@@ -37,9 +37,15 @@ nav.pagination .next::before {
 }
 
 nav.pagination a {
-  font-weight: var(--body-font-weight-bold);
+  /* font-weight: var(--body-font-weight-bold); */
   line-height: 1.3;
   position: relative;
+  color: var(--color-bwg-main);
+}
+
+nav.pagination a:hover {
+  color: var(--color-bwg-main);
+  font-weight: var(--body-font-weight-bold);
 }
 
 nav.pagination a::before,

src/css/toc.css

 .toc-menu {
   color: var(--toc-font-color);
+  margin-top: 2.5rem;
 }
 
 .toc.sidebar .toc-menu {
@@ -20,7 +21,7 @@
 .toc.sidebar .toc-menu h3 {
   display: flex;
   flex-direction: column;
-  height: 2.5rem;
+  /* height: 2.5rem; */
   justify-content: flex-end;
 }
 
@@ -60,6 +61,7 @@
 }
 
 .toc .toc-menu li {
+  position: relative;
   margin: 0;
 }
 
@@ -75,7 +77,7 @@
   color: inherit;
   border-left: 2px solid var(--toc-border-color);
   display: inline-block;
-  padding: 0.25rem 0 0.25rem 0.5rem;
+  padding: 0.5rem 0 0.5rem 0.5rem;
   text-decoration: none;
 }
 
@@ -84,15 +86,79 @@
   outline: none;
 }
 
-.toc .toc-menu a:hover {
-  color: var(--link-font-color);
-}
+/* .toc .toc-menu a:hover {
+  color: var(--color-bwg-main);
+} */
 
 .toc .toc-menu a.is-active {
-  border-left-color: var(--link-font-color);
-  color: var(--doc-font-color);
+  border-left: 3px solid var(--color-bwg-main);
+  color: var(--color-bwg-main);
+  font-weight: 600;
+}
+
+.sidebar.toc .toc-menu a:hover {
+  background: var(--color-blue-10);
 }
 
-.sidebar.toc .toc-menu a:focus {
-  background: var(--panel-background);
+.sidebar .capture-btn {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: var(--color-bwg-main);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+}
+
+.sidebar .capture-btn:hover {
+  transition: transform 0.2s ease-in-out;
+  background-color: rgba(0, 114, 206, 0.8);
+  transform: scale(1.1);
+}
+
+.sidebar .capture-btn > i {
+  margin-top: -3px;
+  color: var(--color-white);
+  font-size: 25px;
+}
+
+.capture-modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.capture-modal-content {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  max-width: 500px;
+  text-align: center;
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
 }

src/css/toolbar.css

 .toolbar {
   color: var(--toolbar-font-color);
   align-items: center;
-  background-color: var(--toolbar-background);
-  box-shadow: 0 1px 0 var(--toolbar-border-color);
+  background-color: var(--color-white);
   display: flex;
   font-size: calc(15 / var(--rem-base) * 1rem);
   height: var(--toolbar-height);
   justify-content: flex-start;
-  position: sticky;
-  top: var(--navbar-height);
-  z-index: var(--z-index-toolbar);
+  margin: 1rem 0;
 }
 
 .toolbar a {
@@ -54,7 +51,7 @@
 
 .edit-this-page {
   display: none;
-  padding-right: 0.5rem;
+  /* padding-right: 0.5rem; */
 }
 
 @media screen and (min-width: 1024px) {
@@ -66,3 +63,8 @@
 .toolbar .edit-this-page a {
   color: var(--toolbar-muted-color);
 }
+
+.toolbar .edit-this-page a:hover {
+  color: var(--color-bwg-main);
+  font-weight: 600;
+}

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;
@@ -15,8 +18,15 @@
   --color-jet-30: #424242;
   --color-jet-50: #333;
   --color-jet-70: #222;
-  --color-jet-80: #191919;
+  --color-jet-80: #12071f;
+  --color-jet-90: #28262e;
   --color-black: #000;
+  --color-blue-10: #f8f9fd;
+  --color-blue-30: #dee2e6;
+  --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 */
@@ -28,39 +38,47 @@
   --body-font-weight-bold: 600;
   --monospace-font-family: "Roboto Mono", monospace;
   --monospace-font-weight-bold: 600;
+  --h-font-weight-bold: 800;
+  /* border */
+  --border-radius-fa: 0.5rem;
+  /* shadow */
+  --box-shadow-depth-fa: 0.385rem;
   /* base */
   --body-background: var(--color-white);
   --panel-background: var(--color-smoke-30);
   --panel-border-color: var(--color-smoke-90);
   --scrollbar-track-color: var(--color-smoke-30);
-  --scrollbar-thumb-color: var(--color-gray-10);
+  /* --scrollbar-thumb-color: var(--color-gray-10); */
+  --scrollbar-thumb-color: var(--color-blue-80);
   --scrollbar_hover-thumb-color: var(--color-gray-30);
   /* navbar */
   --navbar-background: var(--color-jet-80);
-  --navbar-font-color: var(--color-white);
+  --navbar-font-color: var(--color-bwg-main);
   --navbar_hover-background: var(--color-black);
   --navbar-button-background: var(--color-white);
-  --navbar-button-border-color: var(--panel-border-color);
+  --navbar-button-border-color: var(--color-blue-30);
   --navbar-button-font-color: var(--body-font-color);
-  --navbar-menu-border-color: var(--panel-border-color);
+  --navbar-menu-border-color: var(--color-blue-30);
   --navbar-menu-background: var(--color-white);
   --navbar-menu-font-color: var(--body-font-color);
   --navbar-menu_hover-background: var(--color-smoke-50);
   /* nav */
-  --nav-background: var(--panel-background);
+  --nav-background: var(--color-blue-10);
   --nav-border-color: var(--color-gray-10);
   --nav-line-height: 1.35;
   --nav-heading-font-color: var(--color-jet-30);
   --nav-muted-color: var(--color-gray-70);
   --nav-panel-divider-color: var(--color-smoke-90);
   --nav-secondary-background: var(--color-smoke-70);
+  --nav-logo-width: 30px;
+  --nav-logo-height: 30px;
   /* toolbar */
-  --toolbar-background: var(--panel-background);
-  --toolbar-border-color: var(--panel-border-color);
+  --toolbar-background: var(--color-blue-10);
+  --toolbar-border-color: var(--color-blue-30);
   --toolbar-font-color: var(--color-gray-70);
   --toolbar-muted-color: var(--color-gray-40);
   --page-version-menu-background: var(--color-smoke-70);
-  --page-version-missing-font-color: var(--color-gray-40);
+  --page-version-missing-font-color: var(--color-gray-30);
   /* admonitions */
   --caution-color: #a0439c;
   --caution-on-color: var(--color-white);
@@ -80,7 +98,6 @@
   --doc-margin: 0 auto;
   --doc-margin--desktop: 0 2rem;
   --heading-font-color: var(--color-jet-80);
-  --heading-font-weight: normal;
   --alt-heading-font-weight: var(--body-font-weight-bold);
   --section-divider-color: var(--panel-border-color);
   --link-font-color: #1565c0;
@@ -107,10 +124,13 @@
   --quote-border-color: var(--color-gray-70);
   --quote-font-color: var(--color-gray-70);
   --quote-attribution-font-color: var(--color-gray-40);
-  --sidebar-background: var(--color-smoke-90);
+  /* --sidebar-background: var(--color-smoke-90); */
+  --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%);
+  --content-border-radius: 10px;
+  --content-padding: 15px 20px;
   /* toc */
   --toc-font-color: var(--nav-muted-color);
   --toc-heading-font-color: var(--doc-font-color);
@@ -118,11 +138,11 @@
   --toc-line-height: 1.2;
   /* footer */
   --footer-line-height: var(--doc-line-height);
-  --footer-background: var(--color-smoke-90);
-  --footer-font-color: var(--color-gray-70);
+  --footer-background: var(--color-jet-50);
+  --footer-font-color: var(--color-white);
   --footer-link-font-color: var(--color-jet-80);
   /* dimensions and positioning */
-  --navbar-height: calc(63 / var(--rem-base) * 1rem);
+  --navbar-height: calc(63 / var(--rem-base) * 1.25rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
   --body-top: var(--navbar-height);
@@ -132,7 +152,7 @@
   --nav-panel-menu-height: calc(100% - var(--drawer-height));
   --nav-panel-explore-height: calc(50% + var(--drawer-height));
   --nav-width: calc(270 / var(--rem-base) * 1rem);
-  --toc-top: calc(var(--body-top) + var(--toolbar-height));
+  --toc-top: calc(var(--body-top) + (var(--toolbar-height) * 2));
   --toc-height: calc(100vh - var(--toc-top) - 2.5rem);
   --toc-width: calc(162 / var(--rem-base) * 1rem);
   --toc-width--widescreen: calc(216 / var(--rem-base) * 1rem);

src/img/caret_white.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="30"
+   viewBox="0 0 30 30"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="caret.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="31.65919"
+     inkscape:cy="23.730414"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="2688"
+     inkscape:window-height="1478"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1022.3622)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1.99999976;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 10.18745,1025.362 14.0001,12.0002 -14.0001,12.0001 z"
+       id="rect3338"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc"
+       inkscape:transform-center-x="-2.1875" />
+  </g>
+</svg>

src/img/ico_download.svg

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" stroke="#ffffff">
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="SVGRepo_iconCarrier"> <title/> <g id="Complete"> <g id="download"> <g> <path d="M3,12.3v7a2,2,0,0,0,2,2H19a2,2,0,0,0,2-2v-7" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> <g> <polyline data-name="Right" fill="none" id="Right-2" points="7.9 12.3 12 16.3 16.1 12.3" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="2.7" y2="14.2"/> </g> </g> </g> </g> </g>
+</svg>
\ No newline at end of file

src/js/02-on-this-page.js

@@ -40,9 +40,9 @@
   var menu = sidebar.querySelector('.toc-menu')
   if (!menu) (menu = document.createElement('div')).className = 'toc-menu'
 
-  var title = document.createElement('h3')
-  title.textContent = sidebar.dataset.title || 'Contents'
-  menu.appendChild(title)
+  // var title = document.createElement('h3')
+  // title.textContent = sidebar.dataset.title || 'Contents'
+  // menu.appendChild(title)
   menu.appendChild(list)
 
   var startOfContent = !document.getElementById('toc') && article.querySelector('h1.page ~ :not(.is-before-toc)')

src/js/03-fragment-jumper.js

@@ -3,7 +3,7 @@
 
   var article = document.querySelector('article.doc')
   if (!article) return
-  var toolbar = document.querySelector('.toolbar')
+  // var toolbar = document.querySelector('.toolbar')
   var supportsScrollToOptions = 'scrollTo' in document.documentElement
 
   function decodeFragment (hash) {
@@ -20,7 +20,8 @@
       window.location.hash = '#' + this.id
       e.preventDefault()
     }
-    var y = computePosition(this, 0) - toolbar.getBoundingClientRect().bottom
+    // var y = computePosition(this, 0) - toolbar.getBoundingClientRect().bottom
+    var y = computePosition(this, 0) - 95
     var instant = e === false && supportsScrollToOptions
     instant ? window.scrollTo({ left: 0, top: y, behavior: 'instant' }) : window.scrollTo(0, y)
   }

src/js/04-page-versions.js

@@ -5,13 +5,25 @@
   if (!toggle) return
 
   var selector = document.querySelector('.page-versions')
+  var backdrop = document.querySelector('.backdrop')
+  var versionMenu = document.querySelector('.version-menu')
+  var versions = versionMenu?.querySelectorAll('.version')
 
   toggle.addEventListener('click', function (e) {
+    if (!versions.length) return
+
     selector.classList.toggle('is-active')
+    backdrop.classList.toggle('is-active')
     e.stopPropagation() // trap event
   })
 
+  backdrop.addEventListener('click', function () {
+    selector.classList.remove('is-active')
+    backdrop.classList.remove('is-active')
+  })
+
   document.documentElement.addEventListener('click', function () {
     selector.classList.remove('is-active')
+    backdrop.classList.remove('is-active')
   })
 })()

src/js/07-header.js

+;(function () {
+  'use strict'
+
+  document.addEventListener('scroll', function () {
+    var navbar = document.querySelector('.navbar')
+
+    if (window.scrollY > 0) {
+      navbar.classList.add('active')
+    } else {
+      navbar.classList.remove('active')
+    }
+  })
+})()

src/js/08-capture.js

+;(function () {
+  'use strict'
+
+  var captureBody = document.querySelector('.doc')
+  var captureButton = document.querySelector('.sidebar .capture-btn')
+  var captureModal = document.querySelector('.sidebar .capture-modal')
+  var closeCaptureModalButton = document.querySelector('.sidebar .capture-modal .capture-modal-content .close')
+  var screenshotImg = document.getElementById('screenshot')
+
+  captureButton.addEventListener('click', () => {
+    html2canvas(captureBody).then(canvas => {
+      screenshotImg.src = canvas.toDataURL()
+      captureModal.style.display = 'block'
+    })
+  })
+
+  closeCaptureModalButton.addEventListener('click', () => {
+    captureModal.style.display = 'none'
+  })
+
+  window.addEventListener('click', (event) => {
+    if (event.target === captureModal) {
+      captureModal.style.display = 'none'
+    }
+  })
+})()

src/layouts/default.hbs

@@ -6,6 +6,6 @@
   <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
 {{> header}}
 {{> body}}
-{{> footer}}
+{{!-- {{> footer}} --}}
   </body>
 </html>

src/partials/article.hbs

-<article class="doc">
+<article id="capture" class="doc">
+{{> toolbar}}
 {{#with page.title}}
 <h1 class="page">{{{this}}}</h1>
 {{/with}}

src/partials/footer-content.hbs

 <footer class="footer">
-  <p>This page was built using the Antora default UI.</p>
-  <p>The source code for this UI is licensed under the terms of the MPL-2.0 license.</p>
+  <p>Copyright© Bankwareglobal All Rights Reserved.</p>
 </footer>

src/partials/head-meta.hbs

     {{!-- Add additional meta tags here --}}
+<link rel="icon" href="{{{uiRootPath}}}/img/favicon.ico" type="image/x-icon" sizes="any">

src/partials/head.hbs

+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 {{> head-prelude}}
 {{> head-title}}
 {{> head-info}}

src/partials/header-content.hbs

 <header class="header">
   <nav class="navbar">
     <div class="navbar-brand">
-      <a class="navbar-item" href="{{{or site.url siteRootPath}}}">{{site.title}}</a>
+      <a class="navbar-item" href="https://swlab.bwg.co.kr/">
+        <i class="navbar-logo"></i>
+        <div class="navbar-title-contents">
+          <span class="navbar-title">SWLab</span>
+          <span class="navbar-title sub">Bankware Global</span>
+        </div>
+      </a>
       {{#if env.SITE_SEARCH_PROVIDER}}
       <div class="navbar-item search hide-for-print">
         <div id="search-field" class="field">
-          <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}>
+          {{!-- <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}> --}}
+          <input id="search-input" type="text">
+          <i class="fas fa-search"></i>
         </div>
       </div>
       {{/if}}
@@ -17,26 +25,22 @@
     </div>
     <div id="topbar-nav" class="navbar-menu">
       <div class="navbar-end">
-        <a class="navbar-item" href="#">Home</a>
+        <a class="navbar-item" href="https://swlab.bwg.co.kr/docs/swlab-docs/2.0">Documentation</a>
         <div class="navbar-item has-dropdown is-hoverable">
           <a class="navbar-link" href="#">Products</a>
           <div class="navbar-dropdown">
-            <a class="navbar-item" href="#">Product A</a>
-            <a class="navbar-item" href="#">Product B</a>
-            <a class="navbar-item" href="#">Product C</a>
-          </div>
-        </div>
-        <div class="navbar-item has-dropdown is-hoverable">
-          <a class="navbar-link" href="#">Services</a>
-          <div class="navbar-dropdown">
-            <a class="navbar-item" href="#">Service A</a>
-            <a class="navbar-item" href="#">Service B</a>
-            <a class="navbar-item" href="#">Service C</a>
+            <a class="navbar-item" href="https://swlab.bwg.co.kr/docs/bxm/swlab-docs-bxm/1.0/concepts/overview.html">BXM</a>
+            <a class="navbar-item" href="https://swlab.bwg.co.kr/docs/bxi/swlab-docs-bxi/1.0/concepts/overview.html">BXI</a>
+            <a class="navbar-item" href="https://swlab.bwg.co.kr/docs/bxcp/swlab-docs-bxcp/1.0/concepts/overview.html">BXCP</a>
+            <a class="navbar-item" href="https://swlab.bwg.co.kr/docs/bxcm/swlab-docs-bxcm/1.0/concepts/overview.html">BXCM</a>
           </div>
         </div>
         <div class="navbar-item">
           <span class="control">
-            <a class="button is-primary" href="#">Download</a>
+            <a class="button download" href="#">
+              <i class="download_icon"></i>
+              Download
+            </a>
           </span>
         </div>
       </div>

src/partials/main.hbs

 <main class="article">
-{{> toolbar}}
+{{!-- {{> toolbar}} --}}
   <div class="content">
 {{#if (eq page.layout '404')}}
 {{> article-404}}
@@ -8,4 +8,5 @@
 {{> article}}
 {{/if}}
   </div>
+{{> footer}}
 </main>

src/partials/nav-menu.hbs

 {{#with page.navigation}}
 <div class="nav-panel-menu is-active" data-panel="menu">
   <nav class="nav-menu">
-    <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button>
-    {{#with @root.page.componentVersion}}
+    {{!-- <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button> --}}
+    {{!-- {{#with @root.page.componentVersion}}
     <h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
-    {{/with}}
+    {{/with}} --}}
 {{> nav-tree navigation=this}}
   </nav>
 </div>

src/partials/nav-tree.hbs

@@ -11,7 +11,8 @@
       {{~#if (eq ./urlType 'internal')}}{{{relativize ./url}}}
       {{~else}}{{{./url}}}{{~/if}}">{{{./content}}}</a>
     {{else}}
-    <span class="nav-text">{{{./content}}}</span>
+    {{!-- <span class="nav-text">{{{./content}}}</span> --}}
+    <a class="nav-link" href="#">{{{./content}}}</a>
     {{/if}}
     {{/if}}
 {{> nav-tree navigation=./items level=(increment ../level)}}

src/partials/nav.hbs

 <div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
   <aside class="nav">
     <div class="panels">
+{{> page-versions}}
 {{> nav-menu}}
-{{> nav-explore}}
+{{!-- {{> nav-explore}} --}}
     </div>
   </aside>
 </div>

src/partials/page-versions.hbs

-{{#with page.versions}}
+{{!-- {{#with page.versions}} --}}
+{{#if page.component}}
 <div class="page-versions">
-  <button class="version-menu-toggle" title="Show other versions of page">{{@root.page.componentVersion.displayVersion}}</button>
+  <div class="backdrop"></div>
+  <h2 class="title"><a href="{{{relativize ./url}}}">{{page.component.title}}</a></h2>
+  <button class="version-menu-toggle" title="Show other versions of page">{{#if (or page.componentVersion.version (ne page.componentVersion.displayVersion 'default'))}}v{{page.componentVersion.displayVersion}}{{/if}}</button>
+  {{#with site.components.[0]}}
   <div class="version-menu">
-    {{#each this}}
+    {{#each ./versions}}
     <a class="version
-      {{~#if (eq ./version @root.page.version)}} is-current{{/if~}}
-      {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
+      {{!-- {{~#if (eq ./version @root.page.version)}} is-current{{/if~}} --}}
+      {{~#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
+      {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">v{{./displayVersion}}</a>
     {{/each}}
   </div>
+  {{/with}}
 </div>
-{{/with}}
+{{/if}}
+{{!-- {{/with}} --}}

src/partials/toc.hbs

 <aside class="toc sidebar" data-title="{{{or page.attributes.toctitle 'Contents'}}}" data-levels="{{{or page.attributes.toclevels 2}}}">
   <div class="toc-menu"></div>
+  <div class="capture-btn"><i class="fas fa-camera"></i></div>
+  <div class="capture-modal">
+    <div class="capture-modal-content">
+      <span class="close">&times;</span>
+      <img id="screenshot" src="" alt="Screenshot">
+    </div>
+  </div>
 </aside>

src/partials/toolbar.hbs

 <div class="toolbar" role="navigation">
 {{> nav-toggle}}
-  {{#with site.homeUrl}}
+  {{!-- {{#with site.homeUrl}}
   <a href="{{{relativize this}}}" class="home-link{{#if @root.page.home}} is-current{{/if}}"></a>
-  {{/with}}
+  {{/with}} --}}
 {{> breadcrumbs}}
-{{> page-versions}}
+{{!-- {{> page-versions}} --}}
 {{> edit-this-page}}
 </div>