List elements

1 files changed, 50 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;