From 3a42b219873f2ba78be183ecea8d8e4a1836d118 Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Sun, 5 Jun 2016 21:46:57 +0200
Subject: [PATCH] client/css: refactor <nav> css

---
 client/css/main.styl             | 113 +++++++++++++++----------------
 client/html/help.tpl             |   2 +-
 client/html/help_search.tpl      |   2 +-
 client/html/manual_pager_nav.tpl |   2 +-
 client/html/tag.tpl              |   2 +-
 client/html/top_nav.tpl          |   2 +-
 client/html/user.tpl             |   2 +-
 client/html/user_summary.tpl     |   4 +-
 8 files changed, 64 insertions(+), 65 deletions(-)

diff --git a/client/css/main.styl b/client/css/main.styl
index 8fd92f96..cbfda7f9 100644
--- a/client/css/main.styl
+++ b/client/css/main.styl
@@ -73,72 +73,71 @@ hr
     margin: 1em 0
     padding: 0
 
-nav ul
-    list-style-type: none
-    padding: 0
-    margin: 0
-    display: inline-block
-    li
-        display: inline-block
+nav
+    ul
+        list-style-type: none
         padding: 0
         margin: 0
-        a
-            display: inline-block
-        img
+        display: inline-block
+        li
+            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
-    display: block
-    a
-        display: inline
+    &.buttons
+        margin: 1em 0
+        line-height: 2.3em
+        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
-    margin: 1em 0
-    line-height: 2.3em
-    vertical-align: middle
-    ul
-        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
+    &#top-nav
+        background: $top-nav-color
+        margin: 0
+        ul
+            display: block
+            text-align: right
+            li
+                display: inline-block
+                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
 
 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
diff --git a/client/html/help.tpl b/client/html/help.tpl
index c187a293..5e80725e 100644
--- a/client/html/help.tpl
+++ b/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><!--
diff --git a/client/html/help_search.tpl b/client/html/help_search.tpl
index 8771e6b2..8c22d73e 100644
--- a/client/html/help_search.tpl
+++ b/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><!--
diff --git a/client/html/manual_pager_nav.tpl b/client/html/manual_pager_nav.tpl
index 75309368..67c995bc 100644
--- a/client/html/manual_pager_nav.tpl
+++ b/client/html/manual_pager_nav.tpl
@@ -1,4 +1,4 @@
-<nav class='text-nav'>
+<nav class='buttons'>
     <ul>
         <li>
             <% if (ctx.prevLinkActive) { %>
diff --git a/client/html/tag.tpl b/client/html/tag.tpl
index f1260637..63bd9da1 100644
--- a/client/html/tag.tpl
+++ b/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) { %><!--
diff --git a/client/html/top_nav.tpl b/client/html/top_nav.tpl
index a997df47..75a7ad1b 100644
--- a/client/html/top_nav.tpl
+++ b/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) { %><!--
diff --git a/client/html/user.tpl b/client/html/user.tpl
index 7360eecb..d2c02576 100644
--- a/client/html/user.tpl
+++ b/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) { %><!--
diff --git a/client/html/user_summary.tpl b/client/html/user_summary.tpl
index 9d45ae8e..436eddc0 100644
--- a/client/html/user_summary.tpl
+++ b/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>