Fix menu bar and tweak styling of page header.

6 files changed, 62 insertions, 44 deletions

diff --git a/blog/_includes/header.html b/blog/_includes/header.html
index a5eab3d..c873fb1 100644
--- a/blog/_includes/header.html
+++ b/blog/_includes/header.html
@@ -1,7 +1,7 @@
 <header id="header">
   <div id="logo">
     <img src="{{ '/assets/images/header.png' | prepend: site.baseurl_root }}" alt="Norsk Urskog">
-    Norwegian Underground Metal Sampler
+    <p>Norwegian Underground Metal Sampler</p>
   </div>
   <div id="banner-pos-1">
     <a href="http://infernofestival.net">
diff --git a/blog/_includes/menubar.html b/blog/_includes/menubar.html
index 1242ca8..04b6834 100644
--- a/blog/_includes/menubar.html
+++ b/blog/_includes/menubar.html
@@ -1,7 +1,8 @@
 <nav class="site-nav">
+  <a class="page-link" href="{{ site.baseurl }}">{% t titles.home %}</a>
   {% for page in site.pages %}
     {% if page.title and page.hidden != true %}
-      <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
+      <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{% t {{ page.title }} %}</a>
     {% endif %}
   {% endfor %}
 </nav>
diff --git a/blog/_sass/_config.scss b/blog/_sass/_config.scss
index 4054059..68fb2b6 100644
--- a/blog/_sass/_config.scss
+++ b/blog/_sass/_config.scss
@@ -1,12 +1,13 @@
 $body-bg: black;
 $text-color: #aaa;
-$link-color: #666;
+$link-color: #686;
+$link-hover-color: lighten(#686, 5%);
 $side-bar-background: rgba(20, 20, 20, 0.7);
-$menu-bar-background: $side-bar-background;
+$menu-bar-background: rgba(128, 256, 128, 0.15);
 
 
 $nav-link-padding: 5px 10px;
-$nav-link-hover-bg: rgba(40, 70, 80, 0.7);
+$nav-link-hover-bg: rgba(128, 256, 128, 0.2);
 $nav-link-hover-color: #ccf;
 $nav-pills-active-link-hover-bg: $nav-link-hover-bg;
 $nav-pills-active-link-hover-color: $nav-link-hover-color;
diff --git a/blog/_sass/_header.scss b/blog/_sass/_header.scss
new file mode 100644
index 0000000..7998bb5
--- /dev/null
+++ b/blog/_sass/_header.scss
@@ -0,0 +1,20 @@
+#header {
+    width: 100%;
+    font-size: 110%;
+    font-weight: 600;
+
+    #logo {
+        position: relative;
+        width: 479px;
+        text-align: center;
+        p {
+            margin-top: 0;
+        }
+    }
+
+    #banner-pos-1 {
+        position: absolute;
+        top: 1.5em;
+        right: 0;
+    }
+}
diff --git a/blog/_sass/_navbar.scss b/blog/_sass/_navbar.scss
new file mode 100644
index 0000000..f5c46f5
--- /dev/null
+++ b/blog/_sass/_navbar.scss
@@ -0,0 +1,31 @@
+#header {
+    .site-nav {
+        background: {
+            color: $menu-bar-background;
+        }
+        @include round-corners;
+        width: 100%;
+        border: {
+            bottom: 1px solid darkgray;
+            top: 1px solid darkgray;
+        }
+
+        a {
+            text-decoration: none;
+            color: $link-color;
+            padding: {
+                top: 1.5mm;
+                bottom: 1.5mm;
+                left: 2mm;
+                right: 2mm;
+            }
+            &:hover {
+                background-color: $nav-link-hover-bg;
+                color: $nav-link-hover-color;
+            }
+        }
+        &.menu-flags {
+            float: right;
+        }
+    }
+}
diff --git a/blog/css/main.scss b/blog/css/main.scss
index 8180956..a6abce1 100644
--- a/blog/css/main.scss
+++ b/blog/css/main.scss
@@ -3,6 +3,8 @@
 ---
 @import "config";
 @import "common";
+@import "header";
+@import "navbar";
 
 body {
     background-color: black;
@@ -18,9 +20,9 @@ body {
 }
 
 a {
-    color: #686;
+    color: $link-color;
     &:hover {
-        color: lighten(#686, 5%);
+        color: $link-hover-color;
     }
 }
 
@@ -114,40 +116,3 @@ a {
         }
     }
 }
-
-#logo {
-    position: relative;
-    font-size: 110%;
-    font-weight: 600;
-    width: 479px;
-    text-align: center;
-}
-
-#menu-bar, #next_prev_article {
-    margin-bottom: 1em;
-    background: {
-        color: $menu-bar-background;
-    }
-    font-size: 110%;
-    font-weight: 600;
-    @include round-corners;
-    ul {
-        li {
-            a {
-                color: $link-color;
-            }
-        }
-        .selected {
-            background-color: $nav-pills-active-link-hover-bg;
-        }
-        &.menu-flags {
-            float: right;
-        }
-    }
-}
-
-#banner-pos-1 {
-    position: absolute;
-    top: 1.5em;
-    right: 0;
-}