move ui macros to new page

2 files changed, 67 insertions, 62 deletions

diff --git a/docs/modules/ROOT/pages/style-guide.adoc b/docs/modules/ROOT/pages/style-guide.adoc
index 3c46973..0c0e72c 100644
--- a/docs/modules/ROOT/pages/style-guide.adoc
+++ b/docs/modules/ROOT/pages/style-guide.adoc
@@ -22,65 +22,4 @@ These elements include:
 * xref:admonition-styles.adoc[Admonitions]
 * xref:list-styles.adoc[Lists]
 * xref:sidebar-styles.adoc[Sidebars]
-
-=== UI Elements
-
-Asciidoctor supports three UI element representations out of the box, which are made from corresponding inline UI macros.
-
-* keybinding (kbd macro)
-* button (btn macro)
-* menu (menu macro)
-
-The UI elements are output using semantic HTML elements, so they inherit some default styling from the browser.
-However, to look proper, they require some additional styling.
-
-==== Keybinding
-
-A keybinding can be a single key (`+kbd:[F11]+`) or a sequence of keys (`+kbd:[Ctrl+F]`).
-Here's the HTML that's generated for these two forms.
-
-[source,html]
-----
-<kbd>F11</kbd>
-<span class="keyseq"><kbd>Ctrl</kbd>+<kbd>F</kbd></span>
-----
-
-Here's how these might appear:
-
-[%hardbreaks]
-kbd:[F11]
-kbd:[Ctrl+F]
-
-==== Button
-
-A button is meant to represent an on-screen button (`+btn:[Save]+`).
-However, it should not appear like an actual button as that could confuse the reader into thinking it's interactive.
-Therefore, a button is rendered as a bold text by default:
-
-[source,html]
-----
-<b class="button">Save</b>
-----
-
-Traditionally, a button reference is styled by surrounding the text with square brackets, as shown here:
-
-btn:[Save]
-
-==== Menu
-
-A menu can be a top-level menu reference (`+menu:File[]+`) or a nested selection (`+menu:File[Save]+`).
-Here's the HTML that's generated for these two forms.
-
-[source,html]
-----
-<b class="menuref">File</b>
-<span class="menuseq"><b class="menu">File</b>&#160;<b class="caret">&#8250;</b> <b class="menuitem">Save</b></span>
-----
-
-This might be rendered as:
-
-[%hardbreaks]
-menu:File[]
-menu:File[Save]
-
-The default styling applied to a menu reference is usually sufficient.
+* xref:ui-macro-styles.adoc[Button, Keybinding, and Menu UI Macros]
diff --git a/docs/modules/ROOT/pages/ui-macro-styles.adoc b/docs/modules/ROOT/pages/ui-macro-styles.adoc
new file mode 100644
index 0000000..7024165
--- /dev/null
+++ b/docs/modules/ROOT/pages/ui-macro-styles.adoc
@@ -0,0 +1,66 @@
+= UI Macro Styles
+ifndef::env-site,env-github[]
+include::_attributes.adoc[]
+endif::[]
+
+== UI macro elements
+
+Asciidoctor supports xref:antora:asciidoc:ui-macros.adoc[three UI element representations] out of the box, which are made from corresponding inline UI macros.
+
+* button (btn macro)
+* keybinding (kbd macro)
+* menu (menu macro)
+
+The UI elements are output using semantic HTML elements, so they inherit some default styling from the browser.
+However, to look proper, they require some additional styling.
+
+=== Button
+
+A xref:antora:asciidoc:ui-macros.adoc#button[button] is meant to represent an on-screen button (`+btn:[Save]+`).
+However, it should not appear like an actual button as that could confuse the reader into thinking it's interactive.
+Therefore, a button is rendered as a bold text by default:
+
+[source,html]
+----
+<b class="button">Save</b>
+----
+
+Traditionally, a button reference is styled by surrounding the text with square brackets, as shown here:
+
+btn:[Save]
+
+=== Keybinding
+
+A xref:antora:asciidoc:ui-macros.adoc#keybinding[keybinding] can be a single key (`+kbd:[F11]+`) or a sequence of keys (`+kbd:[Ctrl+F]`).
+Here's the HTML that's generated for these two forms.
+
+[source,html]
+----
+<kbd>F11</kbd>
+<span class="keyseq"><kbd>Ctrl</kbd>+<kbd>F</kbd></span>
+----
+
+Here's how these might appear:
+
+[%hardbreaks]
+kbd:[F11]
+kbd:[Ctrl+F]
+
+=== Menu
+
+A xref:antora:asciidoc:ui-macros.adoc#menu[menu] can be a top-level menu reference (`+menu:File[]+`) or a nested selection (`+menu:File[Save]+`).
+Here's the HTML that's generated for these two forms.
+
+[source,html]
+----
+<b class="menuref">File</b>
+<span class="menuseq"><b class="menu">File</b>&#160;<b class="caret">&#8250;</b> <b class="menuitem">Save</b></span>
+----
+
+This might be rendered as:
+
+[%hardbreaks]
+menu:File[]
+menu:File[Save]
+
+The default styling applied to a menu reference is usually sufficient.