Refactor docs

The selectors page was so large that MkDocs had issues like previewing
it. While it would deploy fine, this made it hard to develop with.
Selectors is now broken up. We also use a new dark theme.

docs/src/markdown/_snippets/selector_styles.txt

@@ -18,24 +18,30 @@ span.star::after {
   content: "\a0";
 }
 
+span.big-icon::after {
+  width: 3em;
+  height: 3em;
+  background-size: 3em;
+}
+
 .badge {
   float: right;
 }
 
 span.lab::after {
-  background-color: purple;
+  background-color: hsl(265, 89%, 78%);
   -webkit-mask-image: var(--svg-beaker);
   mask-image: var(--svg-beaker);
 }
 
 span.html5::after {
-  background-color: orange;
+  background-color: hsl(31, 100%, 71%);
   -webkit-mask-image: var(--svg-html5);
   mask-image: var(--svg-html5);
 }
 
 span.star::after {
-  background-color: green;
+  background-color: hsl(135, 94%, 65%);
   -webkit-mask-image: var(--svg-star);
   mask-image: var(--svg-star);
 }

docs/src/markdown/api.md

@@ -2,7 +2,7 @@
 
 Soup Sieve implements most of the selectors from the stable specification and even many from the latest draft
 specification. Selectors can be used to detect and filter elements. To learn more about which specific selectors are
-implemented, see [CSS Selectors](./selectors.md).
+implemented, see [CSS Selectors](./selectors/index.md).
 
 Soup Sieve will detect the document type being used from the Beautiful Soup object that is given to it, and depending on
 the document type, its behavior may be slightly different.

docs/src/markdown/faq.md

@@ -24,12 +24,13 @@ documents. For this reason, it seems to be more helpful to allow selector combin
 
 Soup Sieve isn't entirely unaware of `iframe` elements though. In Soup Sieve 1.9.1, it was noticed that some
 pseudo-classes behaved in unexpected ways without awareness to `iframes`, this was fixed in 1.9.1. Pseudo-classes such
-as [`:default`](./selectors.md#:default), [`:indeterminate`](./selectors.md#:indeterminate), [`:dir()`](
-./selectors.md#:dir), [`:lang()`](./selectors.md#:lang), [`:root`](./selectors.md#:root), and [`:contains()`](
-./selectors.md#:contains) where given awareness of `iframes` to ensure they behaved properly and returned the expected
-elements. This doesn't mean that `select` won't return elements in `iframes`, but it won't allow something like
-`:default` to select a `button` in an `iframe` whose parent `form` is outside the `iframe`. Or better put, a default
-`button` will be evaluated in the context of the document it is in.
+as [`:default`](./selectors/pseudo-classes.md#:default), [`:indeterminate`](./selectors/pseudo-classes.md#:indeterminate),
+[`:dir()`](./selectors/pseudo-classes.md#:dir), [`:lang()`](./selectors/pseudo-classes.md#:lang),
+[`:root`](./selectors/pseudo-classes.md#:root), and [`:contains()`](./selectors/pseudo-classes.md#:contains) where
+given awareness of `iframes` to ensure they behaved properly and returned the expected elements. This doesn't mean that
+`select` won't return elements in `iframes`, but it won't allow something like `:default` to select a `button` in an
+`iframe` whose parent `form` is outside the `iframe`. Or better put, a default `button` will be evaluated in the context
+of the document it is in.
 
 With all of this said, if your selectors have issues with `iframes`, it is most likely because `iframes` are handled
 differently by different parsers. `html.parser` will usually parse `iframe` elements as it sees them. `lxml` parser will

docs/src/markdown/index.md

@@ -24,7 +24,7 @@ do not match anything. Some of the supported selectors are:
 - `#!css :not(element.class, element2.class)`
 - `#!css :is(element.class, element2.class)`
 - `#!css parent:has(> child)`
-- and [many more](./selectors.md)
+- and [many more](./selectors/index.md)
 
 ## Installation