Mercurial > hg > LightPIT / file diff

--- a/src/main/webapp/lightpit.css	Mon Aug 09 16:28:42 2021 +0200
+++ b/src/main/webapp/lightpit.css	Mon Aug 09 16:57:56 2021 +0200
@@ -64,6 +64,7 @@
     color: #1c204e;
     margin: 0;
     padding: 0;
+    height: 100vh;
 }
 
 body {
@@ -83,9 +84,16 @@
     text-decoration: none;
 }
 
+#body-area {
+    display: grid;
+    grid-template-columns: max-content auto;
+    grid-template-rows: max-content 1fr;
+    height: 100%;
+}
+
 #mainMenu {
-    position: fixed;
-    z-index: 2;
+    grid-row: 1;
+    grid-column: 1 / span 2;
     width: 100%;
     display: flex;
     flex-flow: row wrap;
@@ -93,35 +101,21 @@
     border-image-slice: 1;
     border-bottom-style: solid;
     border-bottom-width: thin;
+    font-size: 1.2rem;
+    background: #e0e0e5;
 }
 
 #sideMenu {
+    grid-row: 2;
+    grid-column: 1;
     display: flex;
-    z-index: 1;
     flex-flow: column;
-    position: fixed;
-    height: 100%;
-    width: 40ch; /* adjust with sidebar-spacing.margin-left */
-    padding-top: 2.25rem;
     color: #3060f8;
     border-image-source: linear-gradient(to bottom, #606060, rgba(60, 60, 60, .25));
     border-image-slice: 1;
     border-right-style: solid;
     border-right-width: thin;
-}
-
-#content-area.sidebar-spacing {
-    margin-left: 40ch; /* adjust with sideMenu.width */
-}
-
-#mainMenu {
-    font-size: 1.2rem;
-    background: #e0e0e5;
-}
-
-#sideMenu {
     background: #f7f7ff;
-    overflow-x: scroll;
 }
 
 #mainMenu .menuEntry {
@@ -132,6 +126,7 @@
 }
 
 #sideMenu .menuEntry {
+    padding-right: 1em;
     padding-top: .25em;
     padding-bottom: .25em;
     border-bottom-style: solid;
@@ -160,7 +155,9 @@
 }
 
 #content-area {
-    padding: 2.75rem 1em 1em;
+    grid-row: 2;
+    grid-column: 2;
+    padding: 1.5em;
 }
 
 button, a.button {