update latest ui

8bac7c66 · minseok.park · 8a58844c · 8a58844c · 8bac7c66 · 8bac7c66
Commit 8bac7c66 authored Jun 28, 2024 by minseok.park
46 changed files
--- a/.gitlab-ci.yml
+++ b/.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
--- a/.gulp.json
+++ b/.gulp.json
 {
-  "description": "Build tasks for the Antora default UI project",
+  "description": "Build tasks for the SWLab UI project",
  "flags.tasksDepth": 1
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
+{}
\ No newline at end of file
--- a/README.md
+++ b/README.md
+# SWLab UI
+이 프로젝트는 SWLab 문서의 UI를 관리합니다.
--- a/index.js
+++ b/index.js
--- a/package-lock.json
+++ b/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",

--- a/package.json
+++ b/package.json
 {
-  "name": "@antora/ui-default",
+  "name": "swlab-ui",
-  "description": "An archetype project that produces a UI for creating documentation sites with Antora",
+  "description": "swlab-ui",
-  "homepage": "https://gitlab.bwg.co.kr/test/antora-ui-default",
+  "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"
  }
 }
--- a/preview-src/index.adoc
+++ b/preview-src/index.adoc
-= Hardware and Software Requirements
+= Text Formatting
-Author Name
+Gildong Hong <email1@bwg.com>
-:idprefix:
+:description: The document's description. This document is about the text formatting.
-:idseparator: -
+include::./attributes/common_attrs.adoc[]
-:!example-caption:
+include::./attributes/dir_attrs.adoc[]
-:!table-caption:
-//:page-role: -toc
+[abstract]
-:page-pagination:
+.문서개요
-[.float-group]
 --
-image:multirepo-ssg.svg[Multirepo SSG,180,135,float=right,role=float-gap]
+This document has a header that specifies the {doctitle}.
-Platonem complectitur mediocritatem ea eos.
+This document is about the text formatting.
-Ei nonumy deseruisse ius.
-Mel id omnes verear.
-Vis no velit audiam, sonet <<dependencies,praesent>> eum ne.
-*Prompta eripuit* nec ad.
-Integer diam enim, dignissim eget eros et, ultricies mattis odio.
 --
-Vestibulum consectetur nec urna a luctus.
+== 굵게 (*)
-Quisque pharetra tristique arcu fringilla dapibus.
-https://example.org[Curabitur,role=unresolved] ut massa aliquam, cursus enim et, accumsan lectus.
-Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
-== Cu solet
-Nominavi luptatum eos, an vim hinc philosophia intellegebat.
-Lorem pertinacia `expetenda` et nec, [.underline]#wisi# illud [.line-through]#sonet# qui ea.
-H~2~0.
-E = mc^2^.
-*Alphabet* *алфавит* _алфавит_ *_алфавит_*.
-Eum an doctus <<liber-recusabo,maiestatis efficiantur>>.
-Eu mea inani iriure.footnote:[Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit.]
-[,json]
 ----
-{
+A bold *word*, and a bold *phrase of text*.
-  "name": "module-name",
+Bold c**hara**cter**s** within a word.
-  "version": "10.0.1",
-  "description": "An example module to illustrate the usage of package.json",
-  "author": "Author Name <author@example.com>",
-  "scripts": {
-    "test": "mocha",
-    "lint": "eslint"
-  }
-}
 ----
+====
+A bold *word*, and a bold *phrase of text*.
+Bold c**hara**cter**s** within a word.
+====
-.Example paragraph syntax
+== 기울임체 (_)
-[,asciidoc]
 ----
-.Optional title
+An italic _word_, and an italic _phrase of text_.
-[example]
+Italic c__hara__cter__s__ within a word.
-This is an example paragraph.
 ----
-.Optional title
-[example]
-This is an example paragraph.
-.Summary *Spoiler Alert!*
-[%collapsible]
 ====
-Details.
+An italic _word_, and an italic _phrase of text_.
+Italic c__hara__cter__s__ within a word.
-Loads of details.
 ====
-[,asciidoc]
+== 고정 폭 (`)
 ----
-Voila!
+"`Wait!`" Indigo plucked a small vial from her desk's top drawer
+and held it toward us.
+The vial's label read: `E=mc^2^`; the `E` represents _energy_,
+but also pure _genius!_
 ----
-.Result
-[%collapsible.result]
 ====
-Voila!
+"`Wait!`" Indigo plucked a small vial from her desk's top drawer
+and held it toward us.
+The vial's label read: `E=mc^2^`; the `E` represents _energy_,
+but also pure _genius!_
 ====
-=== Some Code
+== 강조 표시 (#)
-How about some code?
-[,js]
 ----
-vfs
+Mark my words, #automation is essential#.
-  .src('js/vendor/*.js', { cwd: 'src', cwdbase: true, read: false })
+Mark my words, auto##ma##tion is essential.
-  .pipe(tap((file) => { // <.>
-    file.contents = browserify(file.relative, { basedir: 'src', detectGlobals: false }).bundle()
-  }))
-  .pipe(buffer()) // <.>
-  .pipe(uglify())
-  .pipe(gulp.dest('build'))
 ----
-<.> The `tap` function is used to wiretap the data in the pipe.
+====
-<.> Wrap each streaming file in a buffer so the files can be processed by uglify.
+Mark my words, #automation is essential#.
-Uglify can only work with buffers, not streams.
+Mark my words, auto##ma##tion is essential.
+====
-Execute these commands to validate and build your site:
- $ podman run -v $PWD:/antora:Z --rm -t antora/antora \
-   version
- 3.0.0
- $ podman run -v $PWD:/antora:Z --rm -it antora/antora \
-   --clean \
-   antora-playbook.yml
-Cum dicat #putant# ne.
+== 스타일 구문 ([.]#)
-Est in <<inline,reque>> homero principes, meis deleniti mediocrem ad has.
+----
-Altera atomorum his ex, has cu elitr melius propriae.
+Do werewolves believe in [.small]#small print#?
-Eos suscipit scaevola at.
+[.big]##O##nce upon an infinite loop.
+----
+====
+Do werewolves believe in [.small]#small print#?
+[.big]##O##nce upon an infinite loop.
+====
+=== Text with custom role
 ....
-pom.xml
+This sentence contains [.userinput]*bold inline content* that's assigned a role.
-src/
+=> HTML:
-  main/
-    java/
-      HelloWorld.java
-  test/
-    java/
-      HelloWorldTest.java
-....
-Eu mea munere vituperata constituam.
-[%autowidth]
+[source,html]
-|===
-|Input | Output | Example
-m|"foo\nbar"
-l|foo
-bar
-a|
-[,ruby]
 ----
-puts "foo\nbar"
+<p>This sentence contains <strong class="userinput">bold inline content</strong> that&#8217;s assigned a role.</p>
 ----
-|===
+** See the link:Blocks_sample.adoc#blocks_sample[Blocks sample] for more details about the block usage.
+** See the link:Links_sample.adoc#links_sample[Links sample] for more details about the link usage.
-Here we just have some plain text.
+....
+====
+This sentence contains [.userinput]*bold inline content* that's assigned a role.
+=> HTML:
-[source]
+[source,html]
 ----
-plain text
+<p>This sentence contains <strong class="userinput">bold inline content</strong> that&#8217;s assigned a role.</p>
 ----
+** See the link:Blocks_sample.adoc#blocks_sample[Blocks sample] for more details about the block usage.
-[.rolename]
+** See the link:Links_sample.adoc#links_sample[Links sample] for more details about the link usage.
-=== Liber recusabo
-Select menu:File[Open Project] to open the project in your IDE.
-Per ea btn:[Cancel] inimicus.
-Ferri kbd:[F11] tacimates constituam sed ex, eu mea munere vituperata kbd:[Ctrl,T] constituam.
-.Sidebar Title
-****
-Platonem complectitur mediocritatem ea eos.
-Ei nonumy deseruisse ius.
-Mel id omnes verear.
-Altera atomorum his ex, has cu elitr melius propriae.
-Eos suscipit scaevola at.
-****
-No sea, at invenire voluptaria mnesarchum has.
-Ex nam suas nemore dignissim, vel apeirian democritum et.
-At ornatus splendide sed, phaedrum omittantur usu an, vix an noster voluptatibus.
---
-.Ordered list with customized numeration
-[upperalpha]
-. potenti donec cubilia tincidunt
-. etiam pulvinar inceptos velit quisque aptent himenaeos
-. lacus volutpat semper porttitor aliquet ornare primis nulla enim
-Natum facilisis theophrastus an duo.
-No sea, at invenire voluptaria mnesarchum has.
-.Unordered list with customized marker
-[square]
-* ultricies sociosqu tristique integer
-* lacus volutpat semper porttitor aliquet ornare primis nulla enim
-* etiam pulvinar inceptos velit quisque aptent himenaeos
-Eu sed antiopam gloriatur.
-Ea mea agam graeci philosophia.
-[circle]
-* circles
-** circles
-*** and more circles!
-At ornatus splendide sed, phaedrum omittantur usu an, vix an noster voluptatibus.
-* [ ] todo
-* [x] done!
-Vis veri graeci legimus ad.
-sed::
-splendide sed
-mea::
-tad::
-agam graeci
-Let's look at that another way.
-[horizontal]
-sed::
-splendide sed
-mea::
-agam graeci
-At ornatus splendide sed.
-.Library dependencies
-[#dependencies%autowidth%footer,stripes=hover]
-|===
-|Library |Version
-|eslint
-|^1.7.3
-|eslint-config-gulp
-|^2.0.0
-|expect
-|^1.20.2
-|istanbul
-|^0.4.3
-|istanbul-coveralls
-|^1.0.3
-|jscs
-|^2.3.5
-h|Total
-|6
-|===
-Cum dicat putant ne.
-Est in reque homero principes, meis deleniti mediocrem ad has.
-Altera atomorum his ex, has cu elitr melius propriae.
-Eos suscipit scaevola at.
-[TIP]
-This oughta do it!
-Cum dicat putant ne.
-Est in reque homero principes, meis deleniti mediocrem ad has.
-Altera atomorum his ex, has cu elitr melius propriae.
-Eos suscipit scaevola at.
-[NOTE]
 ====
-You've been down _this_ road before.
-====
-Cum dicat putant ne.
-Est in reque homero principes, meis deleniti mediocrem ad has.
-Altera atomorum his ex, has cu elitr melius propriae.
-Eos suscipit scaevola at.
-[WARNING]
+== 아래 첨자 (~), 위 첨자 (^)
+----
+"`Well the H~2~O formula written on their whiteboard could be part
+of a shopping list, but I don't think the local bodega sells
+E=mc^2^,`" Lazarus replied.
+----
 ====
-Watch out!
+"`Well the H~2~O formula written on their whiteboard could be part
+of a shopping list, but I don't think the local bodega sells
+E=mc^2^,`" Lazarus replied.
 ====
-[CAUTION]
+== 밑줄
+----
+The text pass:[<u>underline me</u>] is underlined.
+----
 ====
-[#inline]#I wouldn't try that if I were you.#
+The text pass:[<u>underline me</u>] is underlined.
 ====
-[IMPORTANT]
+== 권고 레이블
-====
+* 레이블은 대문자여야 함.
-Don't forget this step!
+* 단락일 경우 
-====
+** 레이블 바로 뒤에 콜론(:)이 온다.
+** 단락의 첫 번째 줄을 레이블에서 한 칸으로 구분
+* 블록일 경우
+** 속성 목록([ ])에서 레이블을 설정
+** 일반적으로 예제 블록(====)에 설정
+* 종류
+[cols="2*"]
+|===
+|소스 |결과
-.Key Points to Remember
+a|
+....
+. {blank}
+
+NOTE: 단락 
+      note1
+      note2
+. {blank}
+
 [TIP]
+.tips
 ====
-If you installed the CLI and the default site generator globally, you can upgrade both of them with the same command.
+* 블록
+* tip1
- $ npm i -g @antora/cli @antora/site-generator
+* tip2
-Or you can install the metapackage to upgrade both packages at once.
- $ npm i -g antora
 ====
-Nominavi luptatum eos, an vim hinc philosophia intellegebat.
+. {blank}
-Eu mea inani iriure.
+
+IMPORTANT: important
-[discrete]
+. {blank}
-== Voluptua singulis
+
+CAUTION: caution
-[discrete]
+. {blank}
-=== Nominavi luptatum
+
+WARNING: warning
+....
-Cum dicat putant ne.
+a|
-Est in reque homero principes, meis deleniti mediocrem ad has.
+. {blank}
-Ex nam suas nemore dignissim, vel apeirian democritum et.
+
+NOTE: 단락 
+      note1
+      note2
+. {blank}
+
+[TIP]
+.tips
+====
+* 블록
+* tip1
+* tip2
+====
-.Antora is a multi-repo documentation site generator
+. {blank}
-image::multirepo-ssg.svg[Multirepo SSG,3000,opts=interactive]
+
+IMPORTANT: important
-.Let's see that again, but a little smaller
+. {blank}
-image::multirepo-ssg.svg[Multirepo SSG,300,role=text-left]
+
+CAUTION: caution
+. {blank}
+
+WARNING: warning
+|===
-Make the switch today!
-.Full Circle with Jake Blauvelt
+NOTE: 단락 
-video::300817511[vimeo,640,360,align=left]
+      note1
+      note2
-[#english+中文]
+. {blank}
-== English + 中文
+
+NOTE: 단락 
+      note1
+      note2
-Altera atomorum his ex, has cu elitr melius propriae.
+. {blank}
-Eos suscipit scaevola at.
+
+note2
-[,'Famous Person. Cum dicat putant ne.','Cum dicat putant ne. https://example.com[Famous Person Website]']
+. {blank}
-____
+
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+NOTE: 단락 
-Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
+      note1
-Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
+      note2
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
-Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
-____
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+. {blank}
+
+[TIP]
+.tips
+====
+* 블록
+* tip1
+* tip2
+====
-[verse]
+. {blank}
-____
+
-The fog comes
+IMPORTANT: important
-on little cat feet.
-____
-== Fin
+. {blank}
+
+CAUTION: caution
-That's all, folks!
+. {blank}
+
+WARNING: warning
\ No newline at end of file
--- a/preview-src/ui-model.yml
+++ b/preview-src/ui-model.yml
-antoraVersion: '1.0.0'
+antoraVersion: "1.0.0"
 site:
  url: http://localhost:5252
  title: Brand Docs
@@ -6,15 +6,15 @@ site:
  components:
    - name: abc
      title: Project ABC
-    url: '#'
+      url: "#"
      versions:
        - &latest_version_abc
-      url: '#'
+          url: "#"
-      version: '1.1'
+          version: "1.1"
-      displayVersion: '1.1'
+          displayVersion: "1.1"
-    - url: '#'
+        - url: "#"
-      version: '1.0'
+          version: "1.0"
-      displayVersion: '1.0'
+          displayVersion: "1.0"
      latestVersion: *latest_version_abc
    - &component
      name: xyz
@@ -23,34 +23,34 @@ site:
      versions:
        - &latest_version_xyz
          url: /xyz/6.0/index.html
-      version: '6.0'
+          version: "6.0"
-      displayVersion: '6.0'
+          displayVersion: "6.0"
        - &component_version
          title: *component_title
-      url: '#'
+          url: "#"
-      version: '5.2'
+          version: "5.2"
-      displayVersion: '5.2'
+          displayVersion: "5.2"
-    - url: '#'
+        - url: "#"
-      version: '5.1'
+          version: "5.1"
-      displayVersion: '5.1'
+          displayVersion: "5.1"
-    - url: '#'
+        - url: "#"
-      version: '5.0'
+          version: "5.0"
-      displayVersion: '5.0'
+          displayVersion: "5.0"
      latestVersion: *latest_version_xyz
-  - name: '123'
+    - name: "123"
      title: Project 123
-    url: '#'
+      url: "#"
      versions:
        - &latest_version_123
-      url: '#'
+          url: "#"
-      version: '2.2'
+          version: "2.2"
-      displayVersion: '2.2'
+          displayVersion: "2.2"
-    - url: '#'
+        - url: "#"
-      version: '2.1'
+          version: "2.1"
-      displayVersion: '2.1'
+          displayVersion: "2.1"
-    - url: '#'
+        - url: "#"
-      version: '2.0'
+          version: "2.0"
-      displayVersion: '2.0'
+          displayVersion: "2.0"
      latestVersion: *latest_version_123
 page:
  url: *home_url
@@ -58,8 +58,8 @@ page:
  title: Brand&#8217;s Hardware &amp; Software Requirements
  component: *component
  componentVersion: *component_version
-  version: '5.2'
+  version: "5.2"
-  displayVersion: '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: '#'
+    url: "#"
-    urlType: 'internal'
+    urlType: "internal"
  next:
    content: Liber Recusabo
-    url: '#'
+    url: "#"
-    urlType: 'internal'
+    urlType: "internal"
  breadcrumbs:
    - content: Quickstart
-    url: '#'
+      url: "#"
      urlType: fragment
    - content: Brand&#8217;s Hardware &amp; Software Requirements
      url: /xyz/5.2/index.html
      urlType: internal
  versions:
-  - version: '6.0'
+    - version: "6.0"
-    displayVersion: '6.0'
+      displayVersion: "6.0"
-    url: '#'
+      url: "#"
-  - version: '5.2'
+    - version: "5.2"
-    displayVersion: '5.2'
+      displayVersion: "5.2"
-    url: '#'
+      url: "#"
-  - version: '5.1'
+    - version: "5.1"
-    displayVersion: '5.1'
+      displayVersion: "5.1"
-    url: '#'
+      url: "#"
-  - version: '5.0'
+    - version: "5.0"
-    displayVersion: '5.0'
+      displayVersion: "5.0"
      missing: true
-    url: '#'
+      url: "#"
  navigation:
    - root: true
      items:
        - content: Quickstart
-      url: '#'
+          url: "#"
          urlType: fragment
          items:
            - content: Brand&#8217;s Hardware &amp; Software Requirements
              url: /xyz/5.2/index.html
              urlType: internal
            - content: Cu Solet
-        url: '/xyz/5.2/index.html#cu-solet'
+              url: "/xyz/5.2/index.html#cu-solet"
              urlType: internal
            - content: English + 中文
-        url: '/xyz/5.2/index.html#english+中文'
+              url: "/xyz/5.2/index.html#english+中文"
              urlType: internal
        - content: Liber Recusabo
-      url: '#liber-recusabo'
+          url: "#liber-recusabo"
          urlType: fragment
        - content: Reference
          items:
            - content: Keyboard Shortcuts
-        url: '#'
+              url: "#"
              urlType: fragment
            - content: Importing and Exporting
-        url: '#'
+              url: "#"
              urlType: fragment
            - content: Some Code
-        url: '/xyz/5.2/index.html#some-code'
+              url: "/xyz/5.2/index.html#some-code"
              urlType: internal
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -32,7 +32,7 @@ a {
 }
 a:hover {
-  text-decoration: underline;
+  text-decoration: none;
 }
 a:active {

--- a/src/css/breadcrumbs.css
+++ b/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 {

--- a/src/css/doc.css
+++ b/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-top: 0;
-  margin-left: -1rem;
-  margin-right: -1rem;
-  padding: 0.4rem 1rem 0.1rem;
 }
 .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(--color-blue-70);
-  border-left: 5px solid var(--abstract-border-color);
  color: var(--abstract-font-color);
-  font-size: calc(16 / var(--rem-base) * 1rem);
+  padding-left: 1.5em;
-  padding: 0.75em 1em;
 }
-.doc .quoteblock,
+.doc .quoteblock .title {
-.doc .verseblock {
+  color: var(--caption-font-color);
-  background: var(--quote-background);
+  font-size: 15px;
-  border-left: 5px solid var(--quote-border-color);
+  font-weight: var(--caption-font-weight);
-  color: var(--quote-font-color);
+  hyphens: none;
-}
+  letter-spacing: 0.01em;
+  margin-bottom: -15px;
-.doc .quoteblock {
-  padding: 0.25rem 2rem 1.25rem;
 }
 .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-size: 15px;
-  font-style: var(--caption-font-style);
  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);
+  background: var(--color-blue-10);
-  border: 0.25rem solid var(--example-border-color);
+  border-radius: var(--content-border-radius);
-  border-radius: 0.5rem;
+  padding: var(--content-padding);
-  padding: 0.75rem;
 }
 .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);
+  color: var(--color-smoke-40);
-  box-shadow: inset 0 0 1.75px var(--pre-border-color);
+  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);
+}
--- a/src/css/footer.css
+++ b/src/css/footer.css
 footer.footer {
-  background-color: var(--footer-background);
+  /* background-color: var(--footer-background); */
-  color: var(--footer-font-color);
+  /* color: var(--footer-font-color); */
-  font-size: calc(15 / var(--rem-base) * 1rem);
+  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 {

--- a/src/css/header.css
+++ b/src/css/header.css
@@ -9,20 +9,59 @@ body {
 }
 .navbar {
-  background: var(--navbar-background);
+  background: var(--nav-background);
-  color: var(--navbar-font-color);
+  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);
+  background: var(--color-bwg-main);
-  border: 1px solid var(--navbar-button-border-color);
+  border-radius: 28px;
-  border-radius: 0.15rem;
  height: 1.75rem;
-  color: var(--navbar-button-font-color);
+  color: var(--color-white);
-  padding: 0 0.75em;
+  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);
+    box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.16);
-    border-top: none;
    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;
  }
 }
--- a/src/css/highlight.css
+++ b/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;
+  color: #383a42;
-  background: #282c34 !important;
+  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 {

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

--- a/src/css/nav.css
+++ b/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);

--- a/src/css/page-versions.css
+++ b/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;
+  align-items: flex-start;
-  background: linear-gradient(to bottom, var(--page-version-menu-background) 0%, var(--page-version-menu-background) 100%) no-repeat;
+  /* 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;
+  background-color: white;
+  padding: 0.25rem;
  position: absolute;
-  top: 0;
+  top: 45px;
-  right: 0;
+  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 {

--- a/src/css/pagination.css
+++ b/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,

--- a/src/css/toc.css
+++ b/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 {
+/* .toc .toc-menu a:hover {
-  color: var(--link-font-color);
+  color: var(--color-bwg-main);
-}
+} */
 .toc .toc-menu a.is-active {
-  border-left-color: var(--link-font-color);
+  border-left: 3px solid var(--color-bwg-main);
-  color: var(--doc-font-color);
+  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 {
+.sidebar .capture-btn {
-  background: var(--panel-background);
+  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;
 }
--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
 .toolbar {
  color: var(--toolbar-font-color);
  align-items: center;
-  background-color: var(--toolbar-background);
+  background-color: var(--color-white);
-  box-shadow: 0 1px 0 var(--toolbar-border-color);
  display: flex;
  font-size: calc(15 / var(--rem-base) * 1rem);
  height: var(--toolbar-height);
  justify-content: flex-start;
-  position: sticky;
+  margin: 1rem 0;
-  top: var(--navbar-height);
-  z-index: var(--z-index-toolbar);
 }
 .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;
+}
--- a/src/css/vars.css
+++ b/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-background: var(--color-blue-10);
-  --toolbar-border-color: var(--panel-border-color);
+  --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-background: var(--color-jet-50);
-  --footer-font-color: var(--color-gray-70);
+  --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);

--- a/src/img/caret_white.svg
+++ b/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>
--- a/src/img/favicon.ico
+++ b/src/img/favicon.ico
--- a/src/img/ico_download.svg
+++ b/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
--- a/src/img/logo.png
+++ b/src/img/logo.png
--- a/src/img/logo_color.png
+++ b/src/img/logo_color.png
--- a/src/js/02-on-this-page.js
+++ b/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')
+  // var title = document.createElement('h3')
-  title.textContent = sidebar.dataset.title || 'Contents'
+  // title.textContent = sidebar.dataset.title || 'Contents'
-  menu.appendChild(title)
+  // menu.appendChild(title)
  menu.appendChild(list)
  var startOfContent = !document.getElementById('toc') && article.querySelector('h1.page ~ :not(.is-before-toc)')

--- a/src/js/03-fragment-jumper.js
+++ b/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)
  }

--- a/src/js/04-page-versions.js
+++ b/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')
  })
 })()
--- a/src/js/07-header.js
+++ b/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')
+    }
+  })
+})()
--- a/src/js/08-capture.js
+++ b/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'
+    }
+  })
+})()
--- a/src/layouts/default.hbs
+++ b/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>
--- a/src/partials/article.hbs
+++ b/src/partials/article.hbs
-<article class="doc">
+<article id="capture" class="doc">
+{{> toolbar}}
 {{#with page.title}}
 <h1 class="page">{{{this}}}</h1>
 {{/with}}

--- a/src/partials/footer-content.hbs
+++ b/src/partials/footer-content.hbs
 <footer class="footer">
-  <p>This page was built using the Antora default UI.</p>
+  <p>Copyright© Bankwareglobal All Rights Reserved.</p>
-  <p>The source code for this UI is licensed under the terms of the MPL-2.0 license.</p>
 </footer>
--- a/src/partials/head-meta.hbs
+++ b/src/partials/head-meta.hbs
    {{!-- Add additional meta tags here --}}
+<link rel="icon" href="{{{uiRootPath}}}/img/favicon.ico" type="image/x-icon" sizes="any">
--- a/src/partials/head.hbs
+++ b/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}}

--- a/src/partials/header-content.hbs
+++ b/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="https://swlab.bwg.co.kr/docs/bxm/swlab-docs-bxm/1.0/concepts/overview.html">BXM</a>
-            <a class="navbar-item" href="#">Product B</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="#">Product C</a>
+            <a class="navbar-item" href="https://swlab.bwg.co.kr/docs/bxcp/swlab-docs-bxcp/1.0/concepts/overview.html">BXCP</a>
-          </div>
+            <a class="navbar-item" href="https://swlab.bwg.co.kr/docs/bxcm/swlab-docs-bxcm/1.0/concepts/overview.html">BXCM</a>
-        </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>
          </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>

--- a/src/partials/main.hbs
+++ b/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>
--- a/src/partials/nav-menu.hbs
+++ b/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>
+    {{!-- <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button> --}}
-    {{#with @root.page.componentVersion}}
+    {{!-- {{#with @root.page.componentVersion}}
    <h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
-    {{/with}}
+    {{/with}} --}}
 {{> nav-tree navigation=this}}
  </nav>
 </div>

--- a/src/partials/nav-tree.hbs
+++ b/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)}}

--- a/src/partials/nav.hbs
+++ b/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>
--- a/src/partials/page-versions.hbs
+++ b/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 (eq ./version @root.page.version)}} is-current{{/if~}} --}}
-      {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
+      {{~#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}} --}}
--- a/src/partials/toc.hbs
+++ b/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>
--- a/src/partials/toolbar.hbs
+++ b/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>
--- a/yarn.lock
+++ b/yarn.lock