header stlye

app/assets/stylesheets/screen.css.scss

@@ -1,19 +1,35 @@
 /* CSS for PCs only */
+
+
+$lightgrey: #D1D1D1;
+$midgrey: #787878;
+$darkgrey: #434343;
+$darkred: #AB0000;
+
+
 @media only screen
 and (min-width: 1000px)
 {
 
-
-
-
   a {
     transition: color 0.25s;
-    color: #700;
+    color: $darkred;
     text-decoration: none;
     &:hover {
       color: #F00;
     }
   }
+  a.arrow {
+    background: url('/assets/arrow-midgrey.png') no-repeat left;
+    color: $midgrey;
+    padding-left: 0.7em;
+    margin: 0.6em;
+    &:hover {
+      background: url('/assets/arrow-darkred.png') no-repeat left;
+      color: $darkred;
+      padding-left: 0.7em;
+    }
+  }
   #notice {
     background: #8e8;
     text-align: center;
@@ -30,22 +46,48 @@ and (min-width: 1000px)
   }
   #head {
     width: 100%;
-    height: 40px;
+    height: 50px;
-    background: #ccc;
+    background: $lightgrey;
-    border-bottom: 2px solid #aaa;
+    border-bottom: 10px solid $darkgrey;
     vertical-align: middle;
+    font-weight: bold;
+    box-shadow: 0 0 2px;
+    z-index: 99;
+    position: relative;
+    text-shadow: 1px 1px #555;
     #logo {
-      margin: 4px;
+      margin: 9px;
       margin-left: 20px;
       height: 32px;
       width: 32px;
       float: left;
       background: url('/assets/logo.png');
     }
+    a {
+      color: $midgrey;
+      &:hover {
+        color: $darkred;
+      }
+    }
+    #menu {
+      margin: auto;
+      display: table;
+      ul {
+        float: left;
+        margin-top: 0;
+        li {
+          float: left;
+          height: 100%;
+          margin: auto 10px;
+          display: block;
+          font-size: 2.3em;
+        }
+      }
+    }
     #userinfo {
       float: right;
       padding: 0 10px;
-      margin-top: 2px;
+      margin-top: 6px;
       img.avatar {
         border: 1px solid #000;
         border-radius: 16px;
@@ -54,6 +96,12 @@ and (min-width: 1000px)
           box-shadow: 0 0 2px;
         }
       }
+      #userinfo-box {
+        float: left;
+        text-align: right;
+        margin: 5px;
+        line-height: 1em;
+      }
     }
   }
   img.user-avatar {

app/assets/stylesheets/style.css.scss

@@ -2,7 +2,7 @@
 body {
   margin: 0;
   padding: 0;
-  font: 14px/1.6 "Open Sans","Lucida Sans","Lucida Grande","Lucida Sans Unicode",Calibri,sans-serif;
+  font: 14px/1.6 'Oswald','Calibri','Arial','DejaVu Sans', 'Open Sans','Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;
 }
 
 // use screen.css

app/views/layouts/_head.html.erb

@@ -4,10 +4,21 @@
   <% end %>
   <div id="userinfo">
     <% if !current_user.nil? %>
-      <%= link_to image_tag(Tools.avatar_url(current_user.id, 32), :class => "avatar"), current_user %>
+    <span id="userinfo-box">
+      <%= link_to current_user.name.truncate(14), current_user %><br/>
       <%= link_to image_tag("logout.png"), logout_path %>
+    </span>
+      <%= link_to image_tag(Tools.avatar_url(current_user.id, 32), :class => "avatar"), current_user %>
     <% else %>
       <%= link_to "Log in", login_path, :action => "new" %>
     <% end %>
   </div>
+  <div id="menu">
+    <ul>
+      <li><%= link_to "HOME", root_path, :class => "arrow" %></li>
+      <li><%= link_to "FORUM", nil, :class => "arrow" %></li>
+      <li><%= link_to "INFO", nil, :class => "arrow" %></li>
+      <li><%= link_to "DONATE", nil, :class => "arrow" %></li>
+    </ul>
+  </div>
 </div>