List elements

5 files changed, 55 insertions, 3 deletions

diff --git a/static/common.css b/static/common.css
index 9abe81a..fe5531d 100644
--- a/static/common.css
+++ b/static/common.css
@@ -21,11 +21,30 @@ html, body {
     margin: 0px;
 }
 
-h1, p {
+h1, h2, p, li {
     margin: 5px;
     font-family: "Space Grotesk", sans-serif;
 }
 
+hr {
+    height: 2px;
+    border: none;
+    background-color: var(--colorscheme-cyan);
+}
+
+ul {
+    list-style-type: none;
+}
+
+ul li {
+    padding-left: 24px;
+    background-image: url(ul.svg);
+    background-position: 0 2px;
+    background-size: 16px 16px;
+    background-repeat: no-repeat;
+    color: var(--colorscheme-white);
+}
+
 body {
     height: 100%;
     background-color: var(--colorscheme-not-so-dark-gray);
@@ -41,16 +60,45 @@ body {
     margin: var(--menu-margin);
     padding: var(--menu-padding);
     min-width: var(--menu-width);
+    max-width: var(--menu-width);
     height: calc(100% - (2*var(--menu-border-width) + 3*var(--menu-margin) + 2*var(--menu-padding)));
     border: var(--colorscheme-white) var(--menu-border-width) solid;
     border-radius: 10px;
     scroll-snap-type: x mandatory;
 }
 
+#menu > h2 {
+    color: var(--colorscheme-red);
+}
+
+#menu.light > h2 {
+    text-shadow: 1px 1px 2px var(--colorscheme-gray);
+}
+
+.articleList {
+    padding-left: 10px;
+    max-width: 100%;
+    max-height: 60%;
+    overflow-x: hidden;
+}
+
+.articleList > li > a {
+    color: var(--colorscheme-white);
+}
+
+.articleList > li::marker {
+    color: var(--colorscheme-white);
+}
+
 .control {
     display: flex;
     width: 100%;
-    justify-content: end;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.articleList.light > li > a {
+    color: var(--colorscheme-dark-gray);
 }
 
 #content {
@@ -68,7 +116,6 @@ body {
     font-size: 18px;
 }
 
-
 .toggleBtn {
     background-color: transparent;
     border: 0px;
diff --git a/static/common.js b/static/common.js
index 1d6234b..e5a278e 100644
--- a/static/common.js
+++ b/static/common.js
@@ -11,12 +11,14 @@ function setLightMode() {
     swapClasses("dark", "light");
     isLightMode = true;
     document.getElementById("toggleIcon").src = "static/toggle.svg"
+    document.getElementById("homeIcon").src = "static/home_dark.svg"
 }
 
 function setDarkMode() {
     swapClasses("light", "dark");
     isLightMode = false;
     document.getElementById("toggleIcon").src = "static/toggle_dark.svg"
+    document.getElementById("homeIcon").src = "static/home.svg"
 }
 
 function swapClasses(baseClass, newClass) {
diff --git a/static/home.svg b/static/home.svg
new file mode 100644
index 0000000..04aaf87
--- /dev/null
+++ b/static/home.svg
@@ -0,0 +1 @@
+<svg width="64px" height="64px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0L0 6V8H1V15H4V10H7V15H15V8H16V6L14 4.5V1H11V2.25L8 0ZM9 10H12V13H9V10Z" fill="#fFFFFF"></path> </g></svg>
diff --git a/static/home_dark.svg b/static/home_dark.svg
new file mode 100644
index 0000000..537aa1a
--- /dev/null
+++ b/static/home_dark.svg
@@ -0,0 +1 @@
+<svg width="64px" height="64px" viewBox="0 0 16.00 16.00" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#1E1E1E00"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0L0 6V8H1V15H4V10H7V15H15V8H16V6L14 4.5V1H11V2.25L8 0ZM9 10H12V13H9V10Z" fill="#1E1E1E"></path> </g></svg>
diff --git a/static/ul.svg b/static/ul.svg
new file mode 100644
index 0000000..109148a
--- /dev/null
+++ b/static/ul.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="svg2" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" sodipodi:docname="minus.svg" inkscape:version="0.48.4 r9939" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 1200.00 1200.00" enable-background="new 0 0 1200 1200" xml:space="preserve" fill="#FF5722" stroke="#FF5722" stroke-width="0.012" transform="rotate(0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="4.8"></g><g id="SVGRepo_iconCarrier"> <path id="path14441" inkscape:connector-curvature="0" d="M0,430.078h1200v339.844H0V430.078z"></path> </g></svg>