HTML: pass tidy

vEnhance · vEnhance · commit 91def99b1f69 · 2023-07-24T14:47:48.000-07:00
diff --git a/css/extras.css b/css/extras.css
@@ -0,0 +1,72 @@
+/* From mop.md */
+
+a img.tshirt {
+  width: 150px;
+  border: 2px grey solid;
+  border-radius: 5px;
+  margin: 7px 7px;
+}
+a img:hover {
+  box-shadow: 0px 0px 35px #dddd33;
+  background-color: #eeee88;
+}
+div.hidden {
+  display: none;
+  border: 2px solid #660000;
+  border-radius: 8px;
+  padding: 5px 5px;
+  background-color: #e4fbf9;
+  padding: 6px;
+}
+
+.chooser {
+  text-align: center;
+}
+div.chooser {
+  margin-top: -5px;
+  margin-bottom: 5px;
+}
+.chooser ul {
+  list-style: none;
+  padding: 0 10px 0 10px;
+  margin-bottom: 0px;
+  border-radius: 4px;
+}
+.list-chooser ul {
+  border: 2px dotted #0033dd;
+}
+.empty-chooser ul {
+  border: 2px dotted #990099;
+}
+.empty-chooser a:link {
+  color: #af2f2f;
+}
+.chooser ul > li {
+  display: inline;
+}
+.chooser ul > li:not(:last-child)::after {
+  content: " • ";
+}
+
+/* From photos.md */
+
+@keyframes glow-yellow {
+  from {
+    box-shadow: 0px 0px 35px #bbbb33;
+  }
+  to {
+    box-shadow: 0px 0px 45px #eeeecc;
+  }
+}
+
+div.photo-gallery a > img {
+  height: 96px;
+  width: 96px;
+  object-fit: cover;
+  margin: 6px 6px 6px 6px;
+  box-shadow: 0px 0px 15px #6666dd;
+}
+div.photo-gallery a:hover > img {
+  animation-name: glow-yellow;
+  animation-duration: 2s;
+}
diff --git a/input/discord.md b/input/discord.md
@@ -8,15 +8,24 @@ menu-position: 52
 
 By using the link
 
-<center><a href="https://discord.gg/KzFXYwqRFX">https://discord.gg/KzFXYwqRFX</a></center>
+<p style="text-align:center">
+  <a href="https://discord.gg/KzFXYwqRFX">https://discord.gg/KzFXYwqRFX</a>
+</p>
 
 you can join vEnhance's Discord server.
 This Discord server is centered around my
 [_Twitch Solves ISL_ stream](videos.html),
 so it is usually most active while the stream is live, or around that time.
 However, you should feel welcome to post math questions or discussion at any time.
 
-<center><iframe src="https://discord.com/widget?id=780468665019269191&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></center>
+<iframe src="https://discord.com/widget?id=780468665019269191&amp;theme=dark"
+  width="350"
+  height="500"
+  allowtransparency="true"
+  frameborder="0"
+  sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
+  style="margin: 0 auto;">
+</iframe>
 
 ## {{ hl("rules", "Server rules") }}
 
diff --git a/input/excerpts.md b/input/excerpts.md
@@ -6,8 +6,9 @@ description: OTIS Excerpts, a mini-book based on OTIS lecture notes.
 ---
 
 <span style="float:right;padding:10px;">
-<img src="https://storage.googleapis.com/otisweb-static/static/img/otis-logo-v2018.svg"
-width="250px" />
+  <img src="https://storage.googleapis.com/otisweb-static/static/img/otis-logo-v2022.svg"
+  alt="OTIS logo, v2022"
+  width="250" />
 </span>
 
 ## {{ hl("download", "Download") }}
diff --git a/input/games.md b/input/games.md
@@ -12,7 +12,7 @@ You can find my page on
 [Board Game Geek profile](https://boardgamegeek.com/user/vEnhance/);
 here are some of the games I like.
 
-<script language="javascript" src="https://boardgamegeek.com/jswidget.php?username=vEnhance&numitems=5&text=title&images=small-fixed&show=random&imagesonly=1&imagepos=left&domains%5B%5D=boardgame"></script>
+<script language="javascript" src="https://boardgamegeek.com/jswidget.php?username=vEnhance&amp;numitems=5&amp;text=title&amp;images=small-fixed&amp;show=random&amp;imagesonly=1&amp;imagepos=left&amp;domains%5B%5D=boardgame"></script>
 
 ## {{ hl("steam", "Steam") }}
 
diff --git a/input/mop.md b/input/mop.md
@@ -6,7 +6,7 @@ indent: 1
 
 ---
 
-[![Not an official logo, but comedic](static/mop/abcde.png){width=150px}](static/mop/abcde.png)
+[![Not an official logo, but comedic](static/mop/abcde.png){width=150}](static/mop/abcde.png)
 {style="float:right;"}
 
 ## {{ hl("about", "About MOP") }}
@@ -382,56 +382,6 @@ Here are recent songs we performed:
 - William Yue: "That's just true by combo."
 </div>
 
-<style type="text/css">
-a img.tshirt {
-  width: 150px;
-  border: 2px grey solid;
-  border-radius: 5px;
-  margin: 7px 7px;
-}
-a img:hover {
-  box-shadow: 0px 0px 35px #dddd33;
-  background-color: #eeee88;
-}
-div.hidden {
-  display: none;
-  border: 2px solid #660000;
-  border-radius: 8px;
-  padding: 5px 5px;
-  background-color: #e4fbf9;
-  padding: 6px;
-}
-
-.chooser {
-  text-align: center;
-}
-div.chooser {
-  margin-top: -5px;
-  margin-bottom: 5px;
-}
-.chooser ul {
-  list-style: none;
-  padding: 0 10px 0 10px;
-  margin-bottom: 0px;
-  border-radius: 4px;
-}
-.list-chooser ul {
-  border: 2px dotted #0033dd;
-}
-.empty-chooser ul {
-  border: 2px dotted #990099;
-}
-.empty-chooser a:link {
-  color: #af2f2f;
-}
-.chooser ul > li {
-  display: inline;
-}
-.chooser ul > li:not(:last-child)::after {
-  content: " • ";
-}
-</style>
-
 <script type="text/javascript">
 $(() => {
   $('.list-chooser a').attr('target', '_blank');
diff --git a/input/otis.md b/input/otis.md
@@ -20,9 +20,9 @@ OTIS is a proof-based olympiad training program.
 
 Updated for 2023-2024:
 
-<center markdown="1">
+<div markdown="1" style="text-align: center;">
 [🗎 <b>DOWNLOAD SYLLABUS</b>](upload/otis-syllabus.pdf)
-</center>
+</div>
 
 ## {{ hl("docs", "Other documents") }}
 
@@ -56,9 +56,11 @@ This mini-book was named _The OTIS Excerpts_.
 It is designed to mostly be beginner-friendly
 though some of the chapters are more challenging.
 
-<center>
-<img src="static/otis-logo-v2022.svg" width="50%" alt="OTIS logo, v2022" />
-</center>
+<div style="margin: 0 auto;">
+<img src="static/otis-logo-v2022.svg"
+  width="50%"
+  alt="OTIS logo, v2022" />
+</div>
 
 ---
 
diff --git a/input/photos.md b/input/photos.md
@@ -8,25 +8,6 @@ indent: 1
 I guess here are some pictures of myself.
 Click to enlarge any of them.
 
-<style type="text/css">
-@keyframes glow-yellow {
-  from { box-shadow: 0px 0px 35px #bbbb33 }
-  to  { box-shadow: 0px 0px 45px #eeeecc }
-}
-
-div.photo-gallery a > img {
-  height: 96px;
-  width: 96px;
-  object-fit: cover;
-  margin: 6px 6px 6px 6px;
-  box-shadow: 0px 0px 15px #6666dd;
-}
-div.photo-gallery a:hover > img {
-  animation-name: glow-yellow;
-  animation-duration: 2s;
-}
-</style>
-
 These images are licensed under
 [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/),
 essentially meaning you may use them freely provided attribution is given.
diff --git a/input/puzzlehunt.md b/input/puzzlehunt.md
@@ -16,7 +16,7 @@ See also [my devjoe page](http://devjoe.appspot.com/huntindex/author/chenevan).
 - [Nutrition Facts](https://web.mit.edu/puzzle/www/2021/puzzle/nutrition-facts/)
 - [Blind Calculation](https://web.mit.edu/puzzle/www/2021/puzzle/blind-calculation/)
 - [A Bit of Light](https://web.mit.edu/puzzle/www/2021/puzzle/a-bit-of-light/)
-- [Le chiffre indéchiffrable](https://web.mit.edu/puzzle/www/2021/puzzle/le-chiffre-indéchiffrable/)
+- [Le chiffre indéchiffrable](https://web.mit.edu/puzzle/www/2021/puzzle/le-chiffre-ind%E9chiffrable/)
 - [Clueless](https://web.mit.edu/puzzle/www/2021/puzzle/clueless/)
 - [Divided Is Us](https://web.mit.edu/puzzle/www/2021/puzzle/divided-is-us/), with Jakob Weisblat
 - [Escape From Life](https://web.mit.edu/puzzle/www/2021/puzzle/escape-from-life/)
diff --git a/input/quotes.md b/input/quotes.md
@@ -78,5 +78,5 @@ Alphabetical, does not include song lyrics.
 [^lander]: From the USAMO 2021 awards ceremony.
 
 ![I suppose if we couldn't laugh at things that don't make sense,
-we couldn't react to a lot of life.](static/calvin-hobbes-life.jpg){width=327px}
+we couldn't react to a lot of life.](static/calvin-hobbes-life.jpg){width=327}
 {style="text-align:center;"}
diff --git a/input/videos.md b/input/videos.md
@@ -5,10 +5,10 @@ menu-position: 50
 
 ---
 
-<p>
+<div>
 <table cellpadding="5">
 <tr>
-  <td align="center">
+  <td style="text-align: center;">
   <a href="https://youtube.com/c/vEnhance">
   <img src="static/logo-youtube.png" width="120" alt="YouTube logo" />
   </a>
@@ -22,7 +22,7 @@ menu-position: 50
   </td>
 </tr>
 <tr>
-  <td align="center">
+  <td style="text-align:center;">
   <a href="https://twitch.tv/vEnhance/">
   <img src="static/logo-twitch.png" width="70" alt="Twitch logo" />
   </a>
@@ -33,7 +33,7 @@ menu-position: 50
   </td>
 </tr>
 </table>
-</p>
+</div>
 
 Some Fridays I run a [Twitch stream](https://www.twitch.tv/vEnhance)
 which is informally titled **Twitch Solves ISL** (here ISL is IMO Shortlists).
@@ -67,11 +67,11 @@ Here is a picture of my physical setup (click to enlarge).
 Xiberia V22 headset, Havit HV-KB395L keyboard,
 Inateck MS 1001 mouse, MSI Codex XE Plus computer.
 
-<center>
-<a href="/static/twitch-setup.jpg">
-<img src="/static/twitch-setup-sm.jpg" width="250" alt="Evan's multi-monitor setup for Twitch." />
-</a>
-</center>
+<div style="margin: 0 auto;">
+  <a href="/static/twitch-setup.jpg">
+  <img src="/static/twitch-setup-sm.jpg" width="250" alt="Evan's multi-monitor setup for Twitch." />
+  </a>
+</div>
 
 ## {{ hl("archive", "Archive of past problems") }}
 
diff --git a/input/xfer.md b/input/xfer.md
@@ -13,11 +13,11 @@ Evan Chen is sending you a private file,
 <hr />
 
 <div class="form-group">
-<label for="xfer_filename"><h3>Filename</h3></label>
+<h3><label for="xfer_filename">Filename</label></h3>
 <input class="form-control" style="font-family:Inconsolata,monospace;" id="xfer_filename" />
 </div>
 <div>
-<label for="xfer_password"><h3>Password</h3></label>
+<h3><label for="xfer_password">Password</label></h3>
 <input type="password" class="form-control" id="xfer_password" />
 <hr />
 <button class="btn btn-primary">Unlock</button>
diff --git a/macros.py b/macros.py
@@ -1,6 +1,7 @@
 import csv
 import datetime
 import json
+from html import escape
 from pathlib import Path
 
 from git.repo import Repo
@@ -82,7 +83,7 @@ def get_twitch_table():
     for row in data:
         n = row["N"]
         key: str = row["Source"]
-        youtube = row["YouTube"]
+        youtube_url = row["YouTube"]
 
         if key.startswith("!"):  # coding problem
             pdf_url = None
@@ -128,15 +129,15 @@ def get_twitch_table():
         else:
             out += "<td>%s</td>" % key
         if pdf_url is not None:
-            out += f'<td><a href="{pdf_url}">(pdf)</a></td>'
+            out += f'<td><a href="{escape(pdf_url)}">(pdf)</a></td>'
         else:
             out += "<td></td>"
-        if src_type is not None:
-            out += f'<td><a href="{src_url}">({src_type})</a></td>'
+        if src_url is not None:
+            out += f'<td><a href="{escape(src_url)}">({src_type})</a></td>'
         else:
             out += "<td></td>"
-        if youtube:
-            out += '<td><a href="%s">(video)</a></td>' % youtube
+        if youtube_url:
+            out += f'<td><a href="{escape(youtube_url)}">(video)</a></td>'
         else:
             out += "<td></td>"
         out += "</tr>" + "\n"
diff --git a/page.html b/page.html
@@ -59,6 +59,7 @@
     <meta name="msapplication-config" content="icons/browserconfig.xml" />
     <meta name="theme-color" content="#ffffff" />
     <link type="text/css" rel="stylesheet" href="css/simple-53544.css" />
+    <link type="text/css" rel="stylesheet" href="css/extras.css" />
   </head>
   <body>
     <div class="container">
