Make navigation in portrait mode more compact.

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

Change-Id: Id104bb051c48bcd1f8ff97b0ecd3e198a7531cd1

4 files changed, 18 insertions, 7 deletions

diff --git a/src/main/resources/templates/base.html b/src/main/resources/templates/base.html
index 45a2356..96de208 100644
--- a/src/main/resources/templates/base.html
+++ b/src/main/resources/templates/base.html
@@ -26,7 +26,7 @@
   </main>
 
   <footer>
-    <a href="/about">Contact Information</a>
+    {#footer /}
   </footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/benki/posts/postList.html b/src/main/resources/templates/benki/posts/postList.html
index 89cea69..5e9d24a 100644
--- a/src/main/resources/templates/benki/posts/postList.html
+++ b/src/main/resources/templates/benki/posts/postList.html
@@ -93,6 +93,8 @@
               <section class="bookmark-description post-content">
                 {descriptionHtml.raw}
               </section>
+
+              <section class="comment-box"></section>
             </article>
           {#else}
             <article class="lazychat-message">
diff --git a/src/main/resources/templates/tags/footer.html b/src/main/resources/templates/tags/footer.html
new file mode 100644
index 0000000..f185f1b
--- /dev/null
+++ b/src/main/resources/templates/tags/footer.html
@@ -0,0 +1,5 @@
+<ul class="footer-nav">
+  <li><a href="/newsletter">Newsletter</a></li>
+  <li><a href="/privacy">Privacy</a></li>
+  <li><a href="/about">Contact</a></li>
+</ul>
diff --git a/src/main/resources/templates/tags/navbar.html b/src/main/resources/templates/tags/navbar.html
index d79a952..565675e 100644
--- a/src/main/resources/templates/tags/navbar.html
+++ b/src/main/resources/templates/tags/navbar.html
@@ -1,18 +1,22 @@
 {@java.lang.String siteSection}
 
 <ol>
-  <li class='{#if siteSection == "All Posts"}this-page{/}' data-site-section="All Posts"><a href="/posts">All Posts</a></li>
-  <li class='{#if siteSection == "Bookmarks"}this-page{/} indented' data-site-section="Bookmarks"><a href="/bookmarks">Bookmarks</a></li>
-  <li class='{#if siteSection == "Lazy Chat"}this-page{/} indented' data-site-section="Lazy Chat"><a href="/lazychat">Lazy Chat</a></li>
+  <li class='{#if siteSection == "All Posts"}this-page{/} submenu' data-site-section="All Posts">
+    <a href="/posts">Posts</a>
+    <ol class="submenu">
+      <li class='{#if siteSection == "Bookmarks"}this-page{/}' data-site-section="Bookmarks"><a href="/bookmarks">Bookmarks</a></li>
+      <li class='{#if siteSection == "Lazy Chat"}this-page{/}' data-site-section="Lazy Chat"><a href="/lazychat">Lazy&nbsp;Chat</a></li>
+    </ol>
+  </li>
 
   {#if inject:LoginStatus.loggedIn}
   <li class='{#if siteSection == "Wiki"}this-page{/}' data-site-section="Wiki"><a href="/wiki/Home">Wiki</a></li>
   {/if}
 
-  <li class='{#if siteSection == "Newsletter"}this-page{/}' data-site-section="Newsletter"><a href="/newsletter">Newsletter</a></li>
+  <li class='{#if siteSection == "Newsletter"}this-page{/} landscape-only' data-site-section="Newsletter"><a href="/newsletter">Newsletter</a></li>
 
-  <li class='{#if siteSection == "About"}this-page{/}' data-site-section="About"><a href="/about">Contact Info</a></li>
-  <li class='{#if siteSection == "Privacy"}this-page{/}' data-site-section="Privacy"><a href="/privacy">Privacy Policy</a></li>
+  <li class='{#if siteSection == "About"}this-page{/} landscape-only' data-site-section="About"><a href="/about">Contact Info</a></li>
+  <li class='{#if siteSection == "Privacy"}this-page{/} landscape-only' data-site-section="Privacy"><a href="/privacy">Privacy Policy</a></li>
 
   {#if inject:LoginStatus.loggedIn}
   <li class='{#if siteSection == "Login"}this-page{/} login-box logged-in' data-site-section="Login">