format article browsing list

notes2web.py

@@ -332,11 +332,11 @@ def main(args):
 
         for entry in indexentries:
             html += (
-                    '<div class="article">'
+                    '<li class="article">'
                         f'<a href="{entry["path"]}">'
                             f'{entry["title"]}{"/" if entry["isdirectory"] else ""}'
                         '</a>'
-                    '</div>'
+                    '</li>'
             )
         html += INDEX_TEMPLATE_FOOT
 

styles.css

@@ -95,12 +95,15 @@ li {
 	color: #656565;
 }
 
-#toc li { list-style: none; }
-#toc ul { margin-left: 0.75em ; padding-left: 0.75em; }
-#toc ul { border-left: 1px solid #b3b3b3;}
+ul#articlelist li a { color: #454545 }
+
+#toc li, ul#articlelist { list-style: none; }
+#toc ul, ul#articlelist { margin-left: 0.75em ; padding-left: 0.75em; }
+#toc ul, ul#articlelist { border-left: 1px solid #b3b3b3;}
 #toc > ul { padding; none; padding: 0; margin: 0; border: none;max-width: 100%;}
 
-#toc li > a {
+#toc li > a,
+ul#articlelist li a {
 	text-decoration: none;
 	display: inline-block;
 	width: 100%;
@@ -108,7 +111,8 @@ li {
 	padding: 0.5em;
 	box-sizing: border-box;
 }
-#toc li > a:hover {
+#toc li > a:hover,
+ul#articlelist li a:hover {
 	background: #d9d9d9;
 	color: black;
 }

templates/indexfoot.html

@@ -1,3 +1,4 @@
+	</ul>
 	<p style="font-size: 0.7em;"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
 	</div>
 </body>

templates/indexhead.html

@@ -10,4 +10,5 @@
 	<div id="content">
 	<h1>$title$</h1>
 	$extra_content$
-	<div class="article"><a href="..">../</a></div>
+	<ul id="articlelist">
+	<li class="article"><a href="..">../</a></li>