Styling and menu with rss and about.

marano · May 2, 2013 · e963c94 · e963c94
1 parent 42bc160
commit e963c94
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 7 deletions.
diff --git a/views/layout.slim b/views/layout.slim
@@ -13,9 +13,19 @@ html
   body
     .container
       .header
-        h1.title
-          a href="/"
-            | mara.nu
+        .title
+          h1
+            a href="/"
+              | mara.nu
+        .menu
+          ul
+            li
+              a href="/about"
+                | ABOUT
+            li
+              a href="/rss.xml"
+                | RSS
+
 
       .content
         == yield

diff --git a/views/style/my.less b/views/style/my.less
@@ -7,10 +7,48 @@ a:hover {
 }
 
 .header {
-  .title a {
-    color: @textColor;
-    &:hover {
-      color: @linkColorHover;
+  .title {
+    display: inline-block;
+    h1 {
+      a {
+        color: @textColor;
+
+        &:hover {
+          color: @linkColorHover;
+        }
+      }
+    }
+  }
+
+  .menu {
+    float: right;
+    margin-top: 10px;
+    display: inline-block;
+
+    ul {
+      margin: 0;
+      margin-left: 20px;
+
+      list-style: none;
+      li {
+        line-height: 50px;
+        display: inline-block;
+        font-size: 20px;
+        margin-right: 10px;
+        background-color: @textColor;
+        a {
+          display: inline-block;
+          height: 50px;
+          padding: 0 10px;
+
+          color: @white;
+
+          &:hover {
+            background-color: @linkColorHover;
+          }
+        }
+
+      }
     }
   }
 }
@@ -62,6 +100,11 @@ a:hover {
 
   .body {
     font-family: @serifFontFamily;
+
+    h2, h3, h4, h5, h6 {
+      font-family: @sansFontFamily;
+    }
+
     font-size: 16px;
     margin-top: 40px;