From 1d6616214a2a61e79758fcdd3dc1bf1c6cf4497d Mon Sep 17 00:00:00 2001
From: Luca Matei Pintilie <luca@lucamatei.com>
Date: Mon, 16 Dec 2024 21:18:15 +0100
Subject: [PATCH] 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
---
 generate.py   |  6 ++++--
 out/style.css | 21 +++++++++++++++++++++
 template.html |  2 +-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/generate.py b/generate.py
index e22c5f3..cd7b838 100755
--- a/generate.py
+++ b/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:
diff --git a/out/style.css b/out/style.css
index 01cd641..b8dc609 100644
--- a/out/style.css
+++ b/out/style.css
@@ -17,6 +17,7 @@ body {
 
     font-family: 'Barlow Semi Condensed', sans-serif;
     font-size: 1.1em;
+    text-align: justify;
 }
 
 nav {
@@ -78,6 +79,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 +209,11 @@ p, li {
     margin: 1em 0 1em 0;
 }
 
+table.commands {
+    margin-left: auto;
+    margin-right: auto;
+}
+
 table.commands tbody {
     display: block;
 
diff --git a/template.html b/template.html
index 1728c97..c9959bd 100644
--- a/template.html
+++ b/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>