style: squeeze text and center it on page

Reasoning
---------

The idea behind limiting the text's width is to make it easier for users
on large screens to read it.

Many professionals[1][2][3] recommend somewhere in the 60-80 words per
line, as such this commit adds a max width to text of 600px, which
should be roughly 60-70 words per line.

Technical implementation
------------------------

The technical implementation wraps every "text" content in a class, and
limits the width of that class's children. This is done as to not limit
the content of the whole page, and in particular the categories cards.

In addition the page's content is centered for aesthetic reasons.

[1]: https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html#:~:text=For%20people%20with%20some,80%20characters%20or%20glyphs
[2]: http://web-accessibility.carnegiemuseums.org/design/font/#:~:text=Line%20length,longer%20length
[3]: https://www.uutilsynet.no/veiledning/tekst-og-struktur/226#:~:text=For%20best%20mulig%20lesbarhet,inkludert%20mellomrom

Author: AnInternetTroll

generate.py

@@ -46,8 +46,10 @@ def read_section(path):
                 if row["Notes"] != "":
                     out += "<hr />"
                     out += mdspan(row["Notes"], "notes")
-                out += '</div>'
+                out += '</div>\n'
         out += '</div>'
+    else:
+        out = f"""<div class="content" markdown="block">{out}</div>"""
 
     return out
 
@@ -113,7 +115,7 @@ def generate_command_table():
     if not ent_path.endswith(".md"): continue
     md_str += read_section(ent_path[:-3])
 
-md = markdown.Markdown(extensions=['toc'])
+md = markdown.Markdown(extensions=['toc', 'md_in_html'])
 content = md.convert(md_str)
 
 with open("template.html", "r") as f:

out/style.css

@@ -78,6 +78,21 @@ nav a {
     display: block;
 }
 
+.title {
+    display: block;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.content {
+    & p, & ul, & li, & h1, & h2, & h3, & h4, & h5, & h6 {
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
 main {
     padding: 0 20px;
     margin-top: calc(30px + 48px); /* Offset the main content to appear under the menu on mobile */
@@ -193,6 +208,11 @@ p, li {
     margin: 1em 0 1em 0;
 }
 
+table.commands {
+    margin-left: auto;
+    margin-right: auto;
+}
+
 table.commands tbody {
     display: block;
 

template.html

@@ -17,7 +17,7 @@ <h2>Portal 2 Rules</h2>
             {{NAV_MENU}}
         </nav>
         <main>
-            <h1>Portal 2 Rules</h1>
+            <h1 class="title">Portal 2 Rules</h1>
             {{CONTENT}}
         </main>
     </body>