From 47a9427a6e6ac2346b97675efd7fb99c57893059 Mon Sep 17 00:00:00 2001
From: Physcik <mynameisgennadiy@vk.com>
Date: Fri, 26 Dec 2025 14:31:37 +0500
Subject: List elements

---
 static/common.css    | 53 +++++++++++++++++++++++++++++++++++++++++++++++++---
 static/common.js     |  2 ++
 static/home.svg      |  1 +
 static/home_dark.svg |  1 +
 static/ul.svg        |  1 +
 templates/index.html |  9 +++++++++
 6 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 static/home.svg
 create mode 100644 static/home_dark.svg
 create mode 100644 static/ul.svg

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>
-- 
cgit v1.3