js: Remove align=center from main <div> and make it a <main>

Instead of an align=center HTML attribute, we now centre its contents
using CSS.  Also, this element contains all the important contents of
the page, so it seems appropriate to us the HTML5 <main> element for
this.
This commit is contained in:
Ben Harris
2022-12-03 15:29:53 +00:00
parent 83b504af27
commit db5d3bf10e

View File

@ -85,6 +85,10 @@ EOF
text-align: center text-align: center
} }
main {
text-align: center;
}
/* Inside that form, the main menu bar and every submenu inside it is a <ul> */ /* Inside that form, the main menu bar and every submenu inside it is a <ul> */
#gamemenu ul { #gamemenu ul {
list-style: none; /* get rid of the normal unordered-list bullets */ list-style: none; /* get rid of the normal unordered-list bullets */
@ -294,8 +298,7 @@ EOF
#resizable { #resizable {
position: relative; position: relative;
left: 0; margin: 0 auto;
top: 0;
} }
#puzzlecanvas { #puzzlecanvas {
@ -328,7 +331,7 @@ ${unfinishedheading}
${unfinishedpara} ${unfinishedpara}
<hr> <hr>
<div id="puzzle" style="display: none" align=center> <main id="puzzle" style="display: none">
<form id="gamemenu"><ul> <form id="gamemenu"><ul>
<li><div tabindex="0">Game<ul> <li><div tabindex="0">Game<ul>
<li><button type="button" id="specific">Enter game ID...</button></li> <li><button type="button" id="specific">Enter game ID...</button></li>
@ -366,7 +369,7 @@ ${unfinishedpara}
<a id="permalink-desc">by game ID</a> <a id="permalink-desc">by game ID</a>
<a id="permalink-seed">by random seed</a> <a id="permalink-seed">by random seed</a>
</p> </p>
</div> </main>
<div id="apology"> <div id="apology">
<p class="apology-title">If you've been reading this message for more <p class="apology-title">If you've been reading this message for more
than a second or two, then <strong>this WebAssembly puzzle doesn't than a second or two, then <strong>this WebAssembly puzzle doesn't