fix: delete icon size, now smaller

delete.svg

@@ -15,14 +15,14 @@
      id="layer1">
     <g
        id="g9"
-       transform="matrix(0.92722798,0,0,0.927228,3.4949718,3.4949885)"
+       transform="matrix(0.90483231,0,0,0.90483233,6.4460046,6.446021)"
-       style="stroke-width:21.1225;stroke-dasharray:none">
+       style="stroke-width:21.6453;stroke-dasharray:none">
       <path
-         style="fill:#419a1d;stroke:#419a1d;stroke-width:21.1225;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6453;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
          d="M 3.6986761,3.6986637 131.768,131.76798"
          id="path7" />
       <path
-         style="fill:#419a1d;stroke:#419a1d;stroke-width:21.1225;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6453;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
          d="M 3.698678,131.76798 131.768,3.6986619"
          id="path8" />
     </g>

icons/source-files/delete.svg

@@ -74,14 +74,14 @@
     </g>
     <g
        id="g9"
-       transform="matrix(0.92722798,0,0,0.927228,3.4949718,3.4949885)"
+       transform="matrix(0.90483231,0,0,0.90483233,6.4460046,6.446021)"
-       style="stroke-width:21.1225;stroke-dasharray:none">
+       style="stroke-width:21.6453;stroke-dasharray:none">
       <path
-         style="fill:#419a1d;stroke:#419a1d;stroke-width:21.1225;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6453;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
          d="M 3.6986761,3.6986637 131.768,131.76798"
          id="path7" />
       <path
-         style="fill:#419a1d;stroke:#419a1d;stroke-width:21.1225;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6453;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
          d="M 3.698678,131.76798 131.768,3.6986619"
          id="path8" />
     </g>

index.html

@@ -7,9 +7,11 @@
 :root {
 	--back-color-0: #222;
 	--back-color-1: #333;
+	--back-color-2: #444;
 
 	--front-color-0: darkgray;
 	--front-color-1: darkgray;
+	--front-color-2: darkgray;
 
 	--links: #4A4F;
 	--input-back-color: #111;
@@ -20,10 +22,12 @@
 @media (prefers-color-scheme: light) {
 :root {
 	--back-color-0: #FFF;
-	--back-color-1: #DDDF;
+	--back-color-1: #DDD;
+	--back-color-2: #CCC;
 
 	--front-color-0: #555;
 	--front-color-1: #555;
+	--front-color-2: #555;
 
 	--links: #22D;
 	--links: #383;
@@ -34,8 +38,8 @@
 
 :root {
 	--interaction-outline: 2px dotted var(--links);
-	--sidebar-width: 250px;
+	--sidebar-width: 300px;
-	--sidebar-padding: 30px;
+	--sidebar-padding: 20px;
 	--border-width: 1px;
 	--sidebar-true-width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2.0 + var(--border-width));
 	--border-radius: 1px;
@@ -119,34 +123,57 @@ main {
 	justify-content: center;
 }
 
-.sidebar {
+nav {
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: stretch;
 	background-color: var(--back-color-1);
 	color: var(--front-color-1);
-	width: var(--sidebar-width);
+	width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2);
 	height: 100%;
-	padding: 10px var(--sidebar-padding);
+	max-height: 100%;
+	max-height: 100vh;
+	padding: 0;
 	position: fixed;
 	top: 0;
+	float: left;
+	left: 0;
+	border-right: var(--border-width) solid var(--front-color-1);
 }
 
-.sidebar > h2 {
+nav > section {
+	display: flex;
+	flex-flow: column nowrap;
+	height: 50%;
+	max-height: 50%;
+	overflow-y: hidden;
+	padding: 0px var(--sidebar-padding);
+	border-bottom: var(--border-width) solid var(--front-color-1);
+	padding-bottom: 0.5em;
+}
+
+nav > section > div {
+	overflow-y: scroll;
+	border: var(--border-width) solid var(--front-color-1);
+	height: 100%;
+	margin-top: 10px;
+	padding-left: 10px;
+	padding-right: 10px;
+}
+
+nav > section > div > h2 {
 	display: flex;
 	width: 100%;
 	padding: 5px 0px;
 	margin: 0px;
 }
 
-.sidebar > h2 > a {
+nav > section > div > h2 > a {
 	display: inline-block;
 	width: 100%;
 }
 
-.sidebar > h2 > div {
+nav > section > div > h2 > img {
-	display: inline-block;
-	width: 100%;
-}
-
-.sidebar > h2 > img {
 	display: inline;
 	height: 1em;
 	vertical-align: sub;
@@ -154,24 +181,11 @@ main {
 	margin: 0px 2px;
 }
 
-nav {
+nav > section > input {
-	float: left;
-	left: 0;
-}
-
-#sidebar-right {
-	margin-left: auto;
-	margin-right: 0;
-	text-align: right;
-	right: 0;
-}
-
-.sidebar > input {
 	--hpadd: 5px;
 
 	padding: 5px var(--hpadd);
 	width: calc(100% - var(--hpadd) * 2);
-	margin-top: 10px;
 	font-size: 110%;
 }
 
@@ -250,6 +264,7 @@ img.favicon-small {
 	width: 1em;
 	height: 1em;
 	margin-left: 0.5em;
+	margin-right: 0.5em;
 	vertical-align: sub;
 }
 
@@ -266,17 +281,63 @@ img.favicon-big {
 </head>
 <!---------------------- HERE BEGINS THE LAYOUT -------------------->
 <body>
-<nav id="sidebar-left" class="sidebar">
+<nav>
+	<section id="your-lists">
 		<h1>Your Lists</h1>
-	<h2><div>Home</div><img src="edit.svg"><img src="delete.svg"></h2>
+		<input placeholder="Add (List name or URL)" inputmode="verbatim" class="add-element">
+		<button>Add list</button>
+		<div>
+			<h2><a>Home</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html">Social</a><img src="edit.svg"><img src="delete.svg"></h2> <h2><a href="index.html">Tech</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html">News</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html">Gaming</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html">Recipes</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html">Makers</a><img src="edit.svg"><img src="delete.svg"></h2>
 			<h2><a href="index.html">Social</a><img src="edit.svg"><img src="delete.svg"></h2>
 			<h2><a href="index.html">Tech</a><img src="edit.svg"><img src="delete.svg"></h2>
 			<h2><a href="index.html">News</a><img src="edit.svg"><img src="delete.svg"></h2>
 			<h2><a href="index.html">Gaming</a><img src="edit.svg"><img src="delete.svg"></h2>
 			<h2><a href="index.html">Recipes</a><img src="edit.svg"><img src="delete.svg"></h2>
 			<h2><a href="index.html">Makers</a><img src="edit.svg"><img src="delete.svg"></h2>
-	<input placeholder="Add (List name or URL)" inputmode="verbatim" class="add-element">
+			<h2><a href="index.html">Social</a><img src="edit.svg"><img src="delete.svg"></h2>
-	<button>Add list</button>
+			<h2><a href="index.html">Tech</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html">News</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html">Gaming</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html">Recipes</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html">Makers</a><img src="edit.svg"><img src="delete.svg"></h2>
+		</div>
+	</section>
+	<section>
+		<h1>'Home' List</h1>
+		<input placeholder="Add (Feed or page URL)" inputmode="verbatim">
+		<button>Subscribe</button>
+		<div>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
+			<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
+		</div>
+	</section>
 </nav>
 <main>
 	<search>
@@ -378,16 +439,5 @@ img.favicon-big {
 		</article></a>
 	</section>
 </main>
-<section id="sidebar-right" class="sidebar">
-	<h1>'Home' List</h1>
-	<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Newspaper A<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
-	<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Blog Z<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
-	<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Podcast Y<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
-	<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Reviewer N<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
-	<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Chef V<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
-	<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Artist P<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
-	<input placeholder="Add (Feed or page URL)" inputmode="verbatim">
-	<button>Subscribe</button>
-</section>
 </body>
 </html>