diff --git a/index.html b/index.html
index 79d5f73..6315ddc 100644
--- a/index.html
+++ b/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-padding: 30px;
+ --sidebar-width: 300px;
+ --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 {
- display: inline-block;
- width: 100%;
-}
-
-.sidebar > h2 > img {
+nav > section > div > h2 > img {
display: inline;
height: 1em;
vertical-align: sub;
@@ -154,24 +181,11 @@ main {
margin: 0px 2px;
}
-nav {
- float: left;
- left: 0;
-}
-
-#sidebar-right {
- margin-left: auto;
- margin-right: 0;
- text-align: right;
- right: 0;
-}
-
-.sidebar > input {
+nav > section > 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 {
-