replace line breaks with lists for releases page

2 files changed, 162 insertions, 128 deletions

diff --git a/static/grapheneos.css b/static/grapheneos.css
index 1a762cc9..ae990992 100644
--- a/static/grapheneos.css
+++ b/static/grapheneos.css
@@ -119,6 +119,12 @@ footer a:visited {
     margin-top: 2em;
 }
 
+#stable-channel ul, #beta-channel ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
 /* latin */
 @font-face {
     font-family: 'Roboto';
diff --git a/static/releases.html b/static/releases.html
index bff6bdba..88d547bb 100644
--- a/static/releases.html
+++ b/static/releases.html
@@ -62,137 +62,165 @@
             <noscript><strong>JavaScript is required to fetch the current list of releases from
             the update server.</strong></noscript>
 
-            <h2 id="stable-channel">
-                Stable channel
-                <a href="#stable-channel">¶</a>
-            </h2>
+            <section id="stable-channel">
+                <h2>
+                    Stable channel
+                    <a href="#stable-channel">¶</a>
+                </h2>
 
-            <div id="crosshatch-stable">
-                <h3>
-                    Pixel 3 XL
-                    <a href="#crosshatch-stable">¶</a>
-                </h3>
-                <p>Version: <a>loading...</a></p>
-                <a>Factory image url loading...</a><br/>
-                <a>Factory image signature loading...</a><br/>
-                <a>OTA update url loading...</a>
-            </div>
-            <div id="blueline-stable">
-                <h3>
-                    Pixel 3
-                    <a href="#blueline-stable">¶</a>
-                </h3>
-                <p>Version: <a>loading...</a></p>
-                <a>Factory image url loading...</a><br/>
-                <a>Factory image signature loading...</a><br/>
-                <a>OTA update url loading...</a>
-            </div>
-            <div id="taimen-stable">
-                <h3>
-                    Pixel 2 XL
-                    <a href="#taimen-stable">¶</a>
-                </h3>
-                <p>Version: <a>loading...</a></p>
-                <a>Factory image url loading...</a><br/>
-                <a>Factory image signature loading...</a><br/>
-                <a>OTA update url loading...</a>
-            </div>
-            <div id="walleye-stable">
-                <h3>
-                    Pixel 2
-                    <a href="#walleye-stable">¶</a>
-                </h3>
-                <p>Version: <a>loading...</a></p>
-                <a>Factory image url loading...</a><br/>
-                <a>Factory image signature loading...</a><br/>
-                <a>OTA update url loading...</a>
-            </div>
-            <div id="marlin-stable">
-                <h3>
-                    Pixel XL (legacy)
-                    <a href="#marlin-stable">¶</a>
-                </h3>
-                <p>Version: <a>loading...</a></p>
-                <a>Factory image url loading...</a><br/>
-                <a>Factory image signature loading...</a><br/>
-                <a>OTA update url loading...</a>
-            </div>
-            <div id="sailfish-stable">
-                <h3>
-                    Pixel (legacy)
-                    <a href="#sailfish-stable">¶</a>
-                </h3>
-                <p>Version: <a>loading...</a></p>
-                <a>Factory image url loading...</a><br/>
-                <a>Factory image signature loading...</a><br/>
-                <a>OTA update url loading...</a>
-            </div>
+                <div id="crosshatch-stable">
+                    <h3>
+                        Pixel 3 XL
+                        <a href="#crosshatch-stable">¶</a>
+                    </h3>
+                    <p>Version: <a>loading...</a></p>
+                    <ul>
+                        <li><a>Factory image url loading...</a></li>
+                        <li><a>Factory image signature loading...</a></li>
+                        <li><a>OTA update url loading...</a></li>
+                    </ul>
+                </div>
+                <div id="blueline-stable">
+                    <h3>
+                        Pixel 3
+                        <a href="#blueline-stable">¶</a>
+                    </h3>
+                    <p>Version: <a>loading...</a></p>
+                    <ul>
+                        <li><a>Factory image url loading...</a></li>
+                        <li><a>Factory image signature loading...</a></li>
+                        <li><a>OTA update url loading...</a></li>
+                    </ul>
+                </div>
+                <div id="taimen-stable">
+                    <h3>
+                        Pixel 2 XL
+                        <a href="#taimen-stable">¶</a>
+                    </h3>
+                    <p>Version: <a>loading...</a></p>
+                    <ul>
+                        <li><a>Factory image url loading...</a></li>
+                        <li><a>Factory image signature loading...</a></li>
+                        <li><a>OTA update url loading...</a></li>
+                    </ul>
+                </div>
+                <div id="walleye-stable">
+                    <h3>
+                        Pixel 2
+                        <a href="#walleye-stable">¶</a>
+                    </h3>
+                    <p>Version: <a>loading...</a></p>
+                    <ul>
+                        <li><a>Factory image url loading...</a></li>
+                        <li><a>Factory image signature loading...</a></li>
+                        <li><a>OTA update url loading...</a></li>
+                    </ul>
+                </div>
+                <div id="marlin-stable">
+                    <h3>
+                        Pixel XL (legacy)
+                        <a href="#marlin-stable">¶</a>
+                    </h3>
+                    <p>Version: <a>loading...</a></p>
+                    <ul>
+                        <li><a>Factory image url loading...</a></li>
+                        <li><a>Factory image signature loading...</a></li>
+                        <li><a>OTA update url loading...</a></li>
+                    </ul>
+                </div>
+                <div id="sailfish-stable">
+                    <h3>
+                        Pixel (legacy)
+                        <a href="#sailfish-stable">¶</a>
+                    </h3>
+                    <p>Version: <a>loading...</a></p>
+                    <ul>
+                        <li><a>Factory image url loading...</a></li>
+                        <li><a>Factory image signature loading...</a></li>
+                        <li><a>OTA update url loading...</a></li>
+                    </ul>
+                </div>
+            </section>
 
-            <h2 id="beta-channel">
-                Beta channel
-                <a href="#beta-channel">¶</a>
-            </h2>
+            <section id="beta-channel">
+                <h2 id="beta-channel">
+                    Beta channel
+                    <a href="#beta-channel">¶</a>
+                </h2>
 
-            <div id="crosshatch-beta">
-                <h3>
-                    Pixel 3 XL
-                    <a href="#crosshatch-beta">¶</a>
-                </h3>
-                <p>Version: <a>loading...</a></p>
-                <a>Factory image url loading...</a><br/>
-                <a>Factory image signature loading...</a><br/>
-                <a>OTA update url loading...</a>
-            </div>
-            <div id="blueline-beta">
-                <h3>
-                    Pixel 3
-                    <a href="#blueline-beta">¶</a>
-                </h3>
-                <p>Version: <a>loading...</a></p>
-                <a>Factory image url loading...</a><br/>
-                <a>Factory image signature loading...</a><br/>
-                <a>OTA update url loading...</a>
-            </div>
-            <div id="taimen-beta">
-                <h3>
-                    Pixel 2 XL
-                    <a href="#taimen-beta">¶</a>
-                </h3>
-                <p>Version: <a>loading...</a></p>
-                <a>Factory image url loading...</a><br/>
-                <a>Factory image signature loading...</a><br/>
-                <a>OTA update url loading...</a>
-            </div>
-            <div id="walleye-beta">
-                <h3>
-                    Pixel 2
-                    <a href="#walleye-beta">¶</a>
-                </h3>
-                <p>Version: <a>loading...</a></p>
-                <a>Factory image url loading...</a><br/>
-                <a>Factory image signature loading...</a><br/>
-                <a>OTA update url loading...</a>
-            </div>
-            <div id="marlin-beta">
-                <h3>
-                    Pixel XL (legacy)
-                    <a href="#marlin-beta">¶</a>
-                </h3>
-                <p>Version: <a>loading...</a></p>
-                <a>Factory image url loading...</a><br/>
-                <a>Factory image signature loading...</a><br/>
-                <a>OTA update url loading...</a>
-            </div>
-            <div id="sailfish-beta">
-                <h3>
-                    Pixel (legacy)
-                    <a href="#sailfish-beta">¶</a>
-                </h3>
-                <p>Version: <a>loading...</a></p>
-                <a>Factory image url loading...</a><br/>
-                <a>Factory image signature loading...</a><br/>
-                <a>OTA update url loading...</a>
-            </div>
+                <div id="crosshatch-beta">
+                    <h3>
+                        Pixel 3 XL
+                        <a href="#crosshatch-beta">¶</a>
+                    </h3>
+                    <p>Version: <a>loading...</a></p>
+                    <ul>
+                        <li><a>Factory image url loading...</a></li>
+                        <li><a>Factory image signature loading...</a></li>
+                        <li><a>OTA update url loading...</a></li>
+                    </ul>
+                </div>
+                <div id="blueline-beta">
+                    <h3>
+                        Pixel 3
+                        <a href="#blueline-beta">¶</a>
+                    </h3>
+                    <p>Version: <a>loading...</a></p>
+                    <ul>
+                        <li><a>Factory image url loading...</a></li>
+                        <li><a>Factory image signature loading...</a></li>
+                        <li><a>OTA update url loading...</a></li>
+                    </ul>
+                </div>
+                <div id="taimen-beta">
+                    <h3>
+                        Pixel 2 XL
+                        <a href="#taimen-beta">¶</a>
+                    </h3>
+                    <p>Version: <a>loading...</a></p>
+                    <ul>
+                        <li><a>Factory image url loading...</a></li>
+                        <li><a>Factory image signature loading...</a></li>
+                        <li><a>OTA update url loading...</a></li>
+                    </ul>
+                </div>
+                <div id="walleye-beta">
+                    <h3>
+                        Pixel 2
+                        <a href="#walleye-beta">¶</a>
+                    </h3>
+                    <p>Version: <a>loading...</a></p>
+                    <ul>
+                        <li><a>Factory image url loading...</a></li>
+                        <li><a>Factory image signature loading...</a></li>
+                        <li><a>OTA update url loading...</a></li>
+                    </ul>
+                </div>
+                <div id="marlin-beta">
+                    <h3>
+                        Pixel XL (legacy)
+                        <a href="#marlin-beta">¶</a>
+                    </h3>
+                    <p>Version: <a>loading...</a></p>
+                    <ul>
+                        <li><a>Factory image url loading...</a></li>
+                        <li><a>Factory image signature loading...</a></li>
+                        <li><a>OTA update url loading...</a></li>
+                    </ul>
+                </div>
+                <div id="sailfish-beta">
+                    <h3>
+                        Pixel (legacy)
+                        <a href="#sailfish-beta">¶</a>
+                    </h3>
+                    <p>Version: <a>loading...</a></p>
+                    <ul>
+                        <li><a>Factory image url loading...</a></li>
+                        <li><a>Factory image signature loading...</a></li>
+                        <li><a>OTA update url loading...</a></li>
+                    </ul>
+                </div>
+            </section>
 
             <h2 id="changelog">
                 Changelog