client/css: refactor <nav> css

client/css/main.styl

@@ -73,72 +73,71 @@ hr
     margin: 1em 0
     padding: 0
 
-nav ul
+nav
-    list-style-type: none
+    ul
-    padding: 0
+        list-style-type: none
-    margin: 0
-    display: inline-block
-    li
-        display: inline-block
         padding: 0
         margin: 0
-        a
+        display: inline-block
-            display: inline-block
+        li
-        img
+            display: block
+            padding: 0
             margin: 0
-            vertical-align: top /* fix ghost margin under the image */
+            a
+                display: inline-block
+            img
+                margin: 0
+                vertical-align: top /* fix ghost margin under the image */
 
-nav.plain-nav ul li
+    &.buttons
-    display: block
+        margin: 1em 0
-    a
+        line-height: 2.3em
-        display: inline
+        vertical-align: middle
+        ul
+            li
+                display: inline-block
+            li a
+                padding: 0 1.2em
+            li:not(.active) a
+                color: $inactive-tab-text-color
+            li:hover:not(.active) a
+                color: $active-tab-text-color
+            li.active a
+                background: $active-tab-background-color
+                color: $active-tab-text-color
+            :focus
+                background: $focused-tab-background-color
+                outline: 0
 
-nav.text-nav
+    &#top-nav
-    margin: 1em 0
+        background: $top-nav-color
-    line-height: 2.3em
+        margin: 0
-    vertical-align: middle
+        ul
-    ul
+            display: block
-        li a
+            text-align: right
-            padding: 0 1.2em
+            li
-        li:not(.active) a
+                display: inline-block
-            color: $inactive-tab-text-color
+                float: left
-        li:hover:not(.active) a
+        ul li[data-name=account],
-            color: $active-tab-text-color
+        ul li[data-name=register],
-        li.active a
+        ul li[data-name=login],
-            background: $active-tab-background-color
+        ul li[data-name=logout],
-            color: $active-tab-text-color
+        ul li[data-name=settings],
-        :focus
+        ul li[data-name=help]
-            background: $focused-tab-background-color
+            float: none
-            outline: 0
+        .access-key
+            text-decoration: underline
+        .thumbnail
+            width: 1.5em
+            height: 1.5em
+            margin: calc((2.3em - 1.5em) / 2)
+            margin-right: 0.6em
+            margin-left: calc(0.6em - 1.2em)
+            float: left
 
 a .access-key
     text-decoration: underline
 
-#top-nav
-    background: $top-nav-color
-    margin: 0
-    ul
-        display: block
-        text-align: right
-        li
-            float: left
-    ul li[data-name=account],
-    ul li[data-name=register],
-    ul li[data-name=login],
-    ul li[data-name=logout],
-    ul li[data-name=settings],
-    ul li[data-name=help]
-        float: none
-    .access-key
-        text-decoration: underline
-    .thumbnail
-        width: 1.5em
-        height: 1.5em
-        margin: calc((2.3em - 1.5em) / 2)
-        margin-right: 0.6em
-        margin-left: calc(0.6em - 1.2em)
-        float: left
-
 .messages
     margin: 0 auto
     width: 30em

client/html/help.tpl

@@ -1,5 +1,5 @@
 <div class='content-wrapper' id='help'>
-    <nav class='text-nav primary'><!--
+    <nav class='buttons primary'><!--
         --><ul><!--
             --><li data-name='about'><a href='/help/about'>About</a></li><!--
             --><li data-name='keyboard'><a href='/help/keyboard'>Keyboard</a></li><!--

client/html/help_search.tpl

@@ -1,4 +1,4 @@
-<nav class='text-nav secondary'><!--
+<nav class='buttons secondary'><!--
     --><ul><!--
         --><li data-name='default'><a href='/help/search'>General</a></li><!--
         --><li data-name='posts'><a href='/help/search/posts'>Posts</a></li><!--

client/html/manual_pager_nav.tpl

@@ -1,4 +1,4 @@
-<nav class='text-nav'>
+<nav class='buttons'>
     <ul>
         <li>
             <% if (ctx.prevLinkActive) { %>

client/html/tag.tpl

@@ -1,6 +1,6 @@
 <div class='content-wrapper tag'>
     <h1><%= ctx.tag.names[0] %></h1>
-    <nav class='text-nav'><!--
+    <nav class='buttons'><!--
         --><ul><!--
             --><li data-name='summary'><a href='/tag/<%= ctx.tag.names[0] %>'>Summary</a></li><!--
             --><% if (ctx.canMerge) { %><!--

client/html/top_nav.tpl

@@ -1,4 +1,4 @@
-<nav id='top-nav' class='text-nav'>
+<nav id='top-nav' class='buttons'>
     <ul><!--
         --><% _.each(ctx.items, (item, key) => { %><!--
             --><% if (item.available) { %><!--

client/html/user.tpl

@@ -1,6 +1,6 @@
 <div class='content-wrapper' id='user'>
     <h1><%= ctx.user.name %></h1>
-    <nav class='text-nav'><!--
+    <nav class='buttons'><!--
         --><ul><!--
             --><li data-name='summary'><a href='/user/<%= ctx.user.name %>'>Summary</a></li><!--
             --><% if (ctx.canEditAnything) { %><!--

client/html/user_summary.tpl

@@ -7,7 +7,7 @@
     </ul>
 
     <div>
-        <nav class='plain-nav'>
+        <nav>
             <p><strong>Quick links</strong></p>
             <ul>
                 <li><a href='/posts/text=submit:<%= ctx.user.name %>'><%= ctx.user.uploadedPostCount %> uploads</a></li>
@@ -17,7 +17,7 @@
         </nav>
 
         <% if (ctx.isLoggedIn) { %>
-            <nav class='plain-nav'>
+            <nav>
                 <p><strong>Only visible to you</strong></p>
                 <ul>
                     <li><a href='/posts/text=special:liked'><%= ctx.user.likedPostCount %> liked posts</a></li>