Fixed #18 - Improve page selection styling

src/static/css/main.css

@@ -52,3 +52,26 @@ body {
     margin: auto;
     text-align: center;
 }
+
+.spacer {
+    margin-bottom: 5vmin;
+}
+
+.page-item {
+    display: block;
+    background-color: #616161;
+    text-align: center;
+    border-radius: 1vh;
+    margin: 2vmin;
+    padding: 2vmin;
+
+    text-decoration: none;
+    color: white;
+    font-size: 1.5rem;
+}
+
+@media (max-width: 600px) {
+    .content {
+        width: 90%;
+    }
+}
\ No newline at end of file

src/templates/index.html

@@ -10,11 +10,10 @@
         <div class="main">
             <div class="content">
                 <h2>Available Pages</h2>
-                <ul>
+                <div class="spacer"></div>
                 {% for name in pageNames %}
-                        <li><a href="{{ url_for("routes.show_page", pageName=name) }}">{{ name }}</a></li>
+                    <a class="page-item" href="{{ url_for("routes.show_page", pageName=name) }}">{{ name }}</a>
                 {% endfor %}
-                </ul>
             </div>
         </div>
     </body>