chore: switch two-column list styles to be opt-in (#5110)

* style: closes #3702

- Adds the two-column class with the expected style for two-column unordered lists, making sure to keep the two-column style at Features and Table of Contents
- Removes column style from ul element scope

* refactor: add two-column class to the toc

Use the class two-column instead of applying the style by using its id.

* refactor: move styles that are overwritten within other classes

Move margin-top and padding inside two-column as they are overwritten
within single-column.

docs/css/style.css

@@ -180,6 +180,9 @@ a.direct-link {
 
 ul {
   box-sizing: content-box;
+}
+
+ul.two-column {
   column-count: 2;
   column-gap: 30px;
   margin-top: 20px;
@@ -188,9 +191,8 @@ ul {
 
 ul.single-column,
 ul.single-column > li > ul {
-  column-count: 1;
   margin-top: 0;
-  padding-right: 0;
+  padding: 0 0 0 15px;
 }
 
 ul li {

docs/index.md

@@ -44,10 +44,12 @@ Mocha is a feature-rich JavaScript test framework running on [Node.js][] and in
 - [before, after, before each, after each hooks](#hooks)
 - [arbitrary transpiler support (coffee-script etc)](#-compilers)
 - [TextMate bundle](#textmate)
+  {:.two-column}
 
 ## Table of Contents
 
 {{ toc }}
+{:.two-column}
 
 ## Installation