ヘルプを Wiki から分離 (#424) (#430)

画面上でのテストは完了．
移行にす早さが求められるので，準備ができたらマージする．

Reviewed-on: #430
Co-authored-by: miteruzo <miteruzo@naver.com>

frontend/src/index.css

@@ -197,12 +197,244 @@ body
   background: var(--top-nav-root-bg-mobile);
 }
 
+.top-nav-bar
+{
+  padding-inline: 8px;
+  column-gap: 4px;
+}
+
+.top-nav-primary
+{
+  column-gap: 4px;
+}
+
+.top-nav-layout .top-nav-brand-link
+{
+  margin-inline: 4px;
+  font-size: 1rem;
+}
+
+.top-nav-desktop-menu,
+.top-nav-desktop-submenu,
+.top-nav-user-desktop
+{
+  display: none;
+}
+
+.top-nav-desktop-menu
+{
+  font-size: .875rem;
+}
+
+.top-nav-desktop-menu .top-nav-menu-link
+{
+  padding-inline: 8px;
+}
+
+.top-nav-user-desktop
+{
+  padding-right: 4px;
+  font-size: .875rem;
+}
+
+.top-nav-user-mobile
+{
+  overflow-wrap: anywhere;
+}
+
 @media (min-width: 768px)
 {
-  .top-nav-root
+  .top-nav-layout .top-nav-brand-link
+  {
+    font-size: 1.125rem;
+  }
+
+  .top-nav-layout[data-desktop='true'] .top-nav-root
   {
     background: var(--top-nav-root-bg-desktop);
   }
+
+  .top-nav-layout[data-desktop='true'] .top-nav-desktop-menu,
+  .top-nav-layout[data-measuring] .top-nav-desktop-menu
+  {
+    display: flex;
+  }
+
+  .top-nav-layout[data-desktop='true'] .top-nav-user-desktop,
+  .top-nav-layout[data-measuring] .top-nav-user-desktop,
+  .top-nav-layout[data-desktop='true'] .top-nav-desktop-submenu
+  {
+    display: block;
+  }
+
+  .top-nav-layout[data-desktop='true'] .top-nav-mobile-toggle,
+  .top-nav-layout[data-measuring] .top-nav-mobile-toggle,
+  .top-nav-layout[data-desktop='true'] .top-nav-mobile-menu,
+  .top-nav-layout[data-desktop='true'] .top-nav-user-mobile
+  {
+    display: none;
+  }
+
+  .top-nav-layout[data-measuring]
+  {
+    visibility: hidden;
+  }
+}
+
+@media (min-width: 1024px)
+{
+  .top-nav-bar
+  {
+    padding-inline: 12px;
+    column-gap: 8px;
+  }
+
+  .top-nav-primary
+  {
+    column-gap: 6px;
+  }
+
+  .top-nav-layout .top-nav-brand-link
+  {
+    margin-inline: 8px;
+    font-size: 1.25rem;
+  }
+
+  .top-nav-desktop-menu
+  {
+    column-gap: 2px;
+  }
+
+  .top-nav-desktop-menu,
+  .top-nav-user-desktop
+  {
+    font-size: .9375rem;
+  }
+
+  .top-nav-desktop-menu .top-nav-menu-link
+  {
+    padding-inline: 12px;
+  }
+
+  .top-nav-user-desktop
+  {
+    padding-right: 8px;
+  }
+}
+
+@media (min-width: 1280px)
+{
+  .top-nav-bar
+  {
+    column-gap: 12px;
+  }
+
+  .top-nav-primary
+  {
+    column-gap: 8px;
+  }
+
+  .top-nav-layout .top-nav-brand-link
+  {
+    margin-inline: 16px;
+  }
+
+  .top-nav-desktop-menu
+  {
+    column-gap: 4px;
+  }
+
+  .top-nav-desktop-menu,
+  .top-nav-user-desktop
+  {
+    font-size: 1rem;
+  }
+
+  .top-nav-desktop-menu .top-nav-menu-link
+  {
+    padding-inline: 20px;
+  }
+
+  .top-nav-user-desktop
+  {
+    padding-right: 16px;
+  }
+}
+
+.top-nav-layout[data-density='comfortable'] .top-nav-bar
+{
+  padding-inline: 12px;
+  column-gap: 8px;
+}
+
+.top-nav-layout[data-density='comfortable'] .top-nav-primary
+{
+  column-gap: 6px;
+}
+
+.top-nav-layout[data-density='comfortable'] .top-nav-brand-link
+{
+  margin-inline: 8px;
+  font-size: 1.25rem;
+}
+
+.top-nav-layout[data-density='comfortable'] .top-nav-desktop-menu
+{
+  column-gap: 2px;
+}
+
+.top-nav-layout[data-density='comfortable'] .top-nav-desktop-menu,
+.top-nav-layout[data-density='comfortable'] .top-nav-user-desktop
+{
+  font-size: .9375rem;
+}
+
+.top-nav-layout[data-density='comfortable'] .top-nav-desktop-menu .top-nav-menu-link
+{
+  padding-inline: 12px;
+}
+
+.top-nav-layout[data-density='comfortable'] .top-nav-user-desktop
+{
+  padding-right: 8px;
+}
+
+.top-nav-layout[data-density='compact'] .top-nav-bar
+{
+  padding-inline: 8px;
+  column-gap: 4px;
+}
+
+.top-nav-layout[data-density='compact'] .top-nav-primary
+{
+  column-gap: 4px;
+}
+
+.top-nav-layout[data-density='compact'] .top-nav-brand-link
+{
+  margin-inline: 4px;
+  font-size: 1.125rem;
+}
+
+.top-nav-layout[data-density='compact'] .top-nav-desktop-menu
+{
+  column-gap: 0;
+}
+
+.top-nav-layout[data-density='compact'] .top-nav-desktop-menu,
+.top-nav-layout[data-density='compact'] .top-nav-user-desktop
+{
+  font-size: .875rem;
+}
+
+.top-nav-layout[data-density='compact'] .top-nav-desktop-menu .top-nav-menu-link
+{
+  padding-inline: 8px;
+}
+
+.top-nav-layout[data-density='compact'] .top-nav-user-desktop
+{
+  padding-right: 4px;
 }
 
 .top-nav-brand-link,