Make navigation in portrait mode more compact.

 - Moves secondary navigation items to the footer.
 - Reduces primary navigation items to two lines.

Change-Id: Id104bb051c48bcd1f8ff97b0ecd3e198a7531cd1

1 files changed, 93 insertions, 6 deletions

diff --git a/src/main/resources/META-INF/resources/cms2/base.css b/src/main/resources/META-INF/resources/cms2/base.css
index f3a49fb..920e5a0 100644
--- a/src/main/resources/META-INF/resources/cms2/base.css
+++ b/src/main/resources/META-INF/resources/cms2/base.css
@@ -76,6 +76,65 @@ body {
   body > main {
     border-top: 1px solid lightgray
   }
+
+  .landscape-only, body > nav ol > li.landscape-only {
+    display: none;
+  }
+
+  .login-box > * {
+    display: inline;
+  }
+
+  li.submenu > a {
+    display: inline !important;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
+
+  body > nav ol > li > * {
+    padding-left: 0.5em !important;
+    padding-right: 0.5em !important;
+  }
+
+  ol.submenu > li {
+    display: inline;
+  }
+
+  ol.submenu > li > a {
+    display: inline;
+    padding-left: 0.2em;
+    padding-right: 0.2em;
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+  }
+
+  ol.submenu > li:first-child > a {
+    margin-left: 0;
+  }
+
+  ol.submenu > li:last-child > a {
+    margin-right: 0;
+  }
+
+  ol.submenu > li::before {
+    content: '|';
+  }
+
+  ol.submenu > li:first-child::before {
+    content: none;
+  }
+
+  li.submenu {
+    display: block;
+  }
+
+  ol.submenu li:first-child::before {
+    content: '(';
+  }
+
+  ol.submenu li:last-child::after {
+    content: ')';
+  }
 }
 
 @media (min-width: 30em) {
@@ -90,9 +149,13 @@ body {
         "footer footer";
   }
 
-  body > nav > ol > li.this-page {
+  body > nav ol > li.this-page {
     width: calc(100% + 3px);
   }
+
+  body > nav ol > li.this-page > a {
+    border-right: 1px solid var(--main-bg-color);
+  }
 }
 
 body > header {
@@ -131,22 +194,21 @@ body > nav > ol {
   flex-direction: column;
 }
 
-body > nav > ol > li {
+body > nav ol > li {
   flex: auto;
 }
 
-body > nav > ol > li.indented {
+body > nav ol.submenu > li {
   text-indent: 1em;
 }
 
-body > nav > ol > li.this-page {
+body > nav ol > li.this-page > a {
   background-color: var(--main-bg-color);
   border: 1px solid lightgray;
-  border-right: 1px solid var(--main-bg-color);
   z-index: 1;
 }
 
-body > nav > ol > li > * {
+body > nav ol > li > * {
   text-decoration: none;
   display: block;
   padding: 5px;
@@ -161,6 +223,10 @@ body > nav li[data-site-section="About"], body > nav li[data-site-section="Login
   margin-top: 1em;
 }
 
+.submenu {
+    display: contents;
+}
+
 .login-text {
   font-style: italic;
 }
@@ -383,3 +449,24 @@ elix-expandable-section .expandable-section-title {
   margin-top: 0;
   margin-bottom: 0;
 }
+
+
+/* Footer */
+.footer-nav {
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    align-items: flex-end;
+    justify-content: flex-end;
+}
+
+.footer-nav li {
+    list-style: none;
+    flex: auto;
+    flex-grow: 0;
+}
+
+.footer-nav a {
+    text-decoration: none;
+    padding: 0.5em;
+}