List elements

6 files changed, 64 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>
diff --git a/templates/index.html b/templates/index.html
index a5a26bc..eae74b2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,14 +10,23 @@
     <body class="dark">
         <div id="menu" class="dark">
             <div class="control">
+                <a href="/"> 
+                    <img id="homeIcon" src="static/home.svg" height="40px" width="40px"> 
+                </a>
                 <button class="toggleBtn" onclick="ToggleMode()"> 
                     <img id="toggleIcon" src="static/toggle_dark.svg" height="48px" width="48px"> 
                 </button>
             </div>
+            <h2> Recent articles </h2>
+            <ul class="articleList dark">
+                <li> <a href="/"> xdx xdx xdx xdx xdx xdx xdx xdx xdx xdx xdx </a> </li>
+            </ul>
+            <hr />
         </div>
         <div id="content" class="dark">
             <h1> Physick.ru </h1>
             <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
+            <hr />
             <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
             <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
             <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>