data-active > - - - +

data-active > + + + +

+ +

+ <%@include file="../jspf/navmenu.jspf" %> +

+ +

data-active > - - - -

- -

- <%@include file="../jspf/navmenu.jspf" %> -

- -

class="sidebar-spacing"> - -

diff -r 6357d2fd84f2 -r a5ad7cd5d000 src/main/webapp/lightpit.css --- 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 {