From 7a894f4f6aecf3d6dcf103cf8cd51c52ab6f2655 Mon Sep 17 00:00:00 2001
From: jomo <github@jomo.tv>
Date: Sat, 1 Jun 2013 02:51:54 +0200
Subject: [PATCH] header stlye

---
 app/assets/images/arrow-darkred.png    | Bin 0 -> 265 bytes
 app/assets/images/arrow-midgrey.png    | Bin 0 -> 283 bytes
 app/assets/stylesheets/screen.css.scss |  66 +++++++++++++++++++++----
 app/assets/stylesheets/style.css.scss  |   2 +-
 app/views/layouts/_head.html.erb       |  13 ++++-
 5 files changed, 70 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/images/arrow-darkred.png
 create mode 100644 app/assets/images/arrow-midgrey.png

diff --git a/app/assets/images/arrow-darkred.png b/app/assets/images/arrow-darkred.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d7e2ce58f5f9a62e87f575e17c7eecf2a026f24
GIT binary patch
literal 265
zcmeAS@N?(olHy`uVBq!ia0y~yU=U(pU=ZhEV_;xlW0rryz`(##?Bp53!NI{%!;#X#
zz`$_8)5S5wqId1pjl72p1RO5r?{Qe6k;u~G(y4TaDaYZgfJll^SOSyRF%Kh#ATBMf
zRSO<iY^>d;eOrC+x%;acKJke6ggO_u{*~4$PK(~vbe#K(*r$IA%{jcs)$iC}uu^Og
zneonS<BWImNd~!b9vc}|j;@)&BHik=(Nlw^*lFJk@hgek7HbkRlZtPgsaeQ$N~Y{t
zE$>-gzf<CcwmIrgqT4++R16mfWGr7ZL8Xk@BkGL3hT3j>jcs?eSeX_C{Z)#eE6~gS
Ude-Z&3=9kmp00i_>zopr0NbZu9smFU

literal 0
HcmV?d00001

diff --git a/app/assets/images/arrow-midgrey.png b/app/assets/images/arrow-midgrey.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc42ff92979e4ca369fce1e43365f13ea2e64179
GIT binary patch
literal 283
zcmeAS@N?(olHy`uVBq!ia0y~yU=U(pU=ZhEV_;xlW0rryz`(##?Bp53!NI{%!;#X#
zz`$_H)5S5wqId08UB1H#5)BXgl~y`j)yoWW7qC9C&F9)%mfa^O#j)*WRw(Pf71|WF
zN=s|mu97e9@gg5o`yaCwo}0aEoqU4M+EVqF9Xy9Wn5AcPYcGwfy`LT$I`=uV6Nm2U
zPuI4+EtWanFUrK=(fBY^xclKxMYhAwTs5{eIBg8oV7c8=voZDr`(~$gGlWeNr(DVo
z6k!)W{rS&~olbK;w;7fhz2ACm?vzh`F@m=bZ*y8#dZV>QXfx-}vMf=q&bv%py3gcA
pCf}78xt%wKiIKr!W!*&m?M2E?qM@%+7#J8BJYD@<);T3K0RSY$ZZ7};

literal 0
HcmV?d00001

diff --git a/app/assets/stylesheets/screen.css.scss b/app/assets/stylesheets/screen.css.scss
index 18f730f..4d61af2 100644
--- a/app/assets/stylesheets/screen.css.scss
+++ b/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;
-    background: #ccc;
-    border-bottom: 2px solid #aaa;
+    height: 50px;
+    background: $lightgrey;
+    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 {
diff --git a/app/assets/stylesheets/style.css.scss b/app/assets/stylesheets/style.css.scss
index 82d020d..e731ee6 100644
--- a/app/assets/stylesheets/style.css.scss
+++ b/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
diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb
index 29e70f3..b8b8b5d 100644
--- a/app/views/layouts/_head.html.erb
+++ b/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>