From ab618e77c18d45641b2de245d47e9b7246ff12cf Mon Sep 17 00:00:00 2001
From: Alvie Rahman <alvierahman90@gmail.com>
Date: Wed, 22 Dec 2021 21:45:20 +0000
Subject: [PATCH] format article browsing list

---
 notes2web.py             |  4 ++--
 styles.css               | 14 +++++++++-----
 templates/indexfoot.html |  1 +
 templates/indexhead.html |  3 ++-
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/notes2web.py b/notes2web.py
index f11ce77..0344643 100755
--- a/notes2web.py
+++ b/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
 
diff --git a/styles.css b/styles.css
index 221e72d..1671c17 100644
--- a/styles.css
+++ b/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;
 }
diff --git a/templates/indexfoot.html b/templates/indexfoot.html
index 9ceded7..a52a4eb 100644
--- a/templates/indexfoot.html
+++ b/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>
diff --git a/templates/indexhead.html b/templates/indexhead.html
index 94f9a39..d8b9e7e 100644
--- a/templates/indexhead.html
+++ b/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>