move list styles to new page

2 files changed, 84 insertions, 79 deletions

diff --git a/docs/modules/ROOT/pages/list-styles.adoc b/docs/modules/ROOT/pages/list-styles.adoc
new file mode 100644
index 0000000..f7fe6b5
--- /dev/null
+++ b/docs/modules/ROOT/pages/list-styles.adoc
@@ -0,0 +1,83 @@
+= List Styles
+ifndef::env-site,env-github[]
+include::_attributes.adoc[]
+endif::[]
+
+== Ordered list numeration
+
+The browser automatically numbers xref:antora:asciidoc:ordered-and-unordered-lists.adoc[ordered lists] and selects a numeration style by list depth in the following order: decimal, lower-alpha, lower-roman, upper-alpha, upper-roman.
+
+AsciiDoc allows the author to override the numeration style for an ordered list.
+Here's an example of that output:
+
+[source,html]
+----
+<div class="olist loweralpha">
+<ol class="loweralpha" type="a">
+<li><p>a</p></li>
+<li><p>b</p></li>
+<li><p>c</p></li>
+</ol>
+</div>
+----
+
+In order to support this customization, you must assign the list-style-type property to the following classes on the `<ol>` element in your stylesheet.
+
+|===
+|<ol> class |list-style-type property value
+
+|arabic
+|decimal
+
+|decimal
+|decimal-leading-zero
+
+|loweralpha
+|lower-alpha
+
+|lowergreek
+|lower-greek
+
+|lowerroman
+|lower-roman
+
+|upperalpha
+|upper-alpha
+
+|upperroman
+|upper-roman
+|===
+
+== Task list
+
+A xref:antora:asciidoc:task-lists.adoc[task list] is an unordered list with items that are prefixed with a checkbox marker (checked or unchecked).
+Here's an AsciiDoc source example that produces a task list:
+
+[source,asciidoc]
+----
+* [ ] todo
+* [x] done!
+----
+
+If font-based icons are enabled (`icons=font`), the checkbox gets inserted as the first element of the paragraph element that contains the list item text.
+
+[source,html]
+----
+<div class="ulist checklist">
+<ul class="checklist">
+<li>
+<p><i class="fa fa-square-o"> todo</p>
+</li>
+<li>
+<p><i class="fa fa-check-square-o"> done!</p>
+</li>
+</ul>
+</div>
+----
+
+The recommended approach is to hide the list markers (`list-style: none`), then add a checkbox glyph on the icon element using either a background image or a `before` pseudo element.
+
+Here's how it might appear:
+
+* [ ] todo
+* [*] done!
diff --git a/docs/modules/ROOT/pages/style-guide.adoc b/docs/modules/ROOT/pages/style-guide.adoc
index cea71c7..813664f 100644
--- a/docs/modules/ROOT/pages/style-guide.adoc
+++ b/docs/modules/ROOT/pages/style-guide.adoc
@@ -20,85 +20,7 @@ These elements include:
 
 * xref:inline-text-styles.adoc[Emphasized inline text, such as bold, italics, etc.]
 * xref:admonition-styles.adoc[Admonitions]
-
-=== Ordered List Numeration Styles
-
-The browser automatically numbers ordered lists and selects a numeration style by list depth in the following order: decimal, lower-alpha, lower-roman, upper-alpha, upper-roman.
-
-AsciiDoc allows the author to override the numeration style for an ordered list.
-Here's an example of that output:
-
-[source,html]
-----
-<div class="olist loweralpha">
-<ol class="loweralpha" type="a">
-<li><p>a</p></li>
-<li><p>b</p></li>
-<li><p>c</p></li>
-</ol>
-</div>
-----
-
-In order to support this customization, you must assign the list-style-type property to the following classes on the <ol> element in your stylesheet.
-
-|===
-|<ol> class |list-style-type property value
-
-|arabic
-|decimal
-
-|decimal
-|decimal-leading-zero
-
-|loweralpha
-|lower-alpha
-
-|lowergreek
-|lower-greek
-
-|lowerroman
-|lower-roman
-
-|upperalpha
-|upper-alpha
-
-|upperroman
-|upper-roman
-|===
-
-=== Task Lists
-
-A task list is an unordered list with items that are prefixed with a checkbox marker (checked or unchecked).
-Here's an AsciiDoc source example that produces a task list:
-
-[source,asciidoc]
-----
-* [ ] todo
-* [x] done!
-----
-
-If font-based icons are enabled (`icons=font`), the checkbox gets inserted as the first element of the paragraph element that contains the list item text.
-
-[source,html]
-----
-<div class="ulist checklist">
-<ul class="checklist">
-<li>
-<p><i class="fa fa-square-o"> todo</p>
-</li>
-<li>
-<p><i class="fa fa-check-square-o"> done!</p>
-</li>
-</ul>
-</div>
-----
-
-The recommended approach is to hide the list markers (`list-style: none`), then add a checkbox glyph on the icon element using either a background image or a `before` pseudo element.
-
-Here's how it might appear:
-
-* [ ] todo
-* [*] done!
+* xref:list-styles.adoc[Lists]
 
 === UI Elements