Browse code

improved layout styling, added about page, added archive page link to footer

B Mathis authored on 21/10/2009 at 16:39:53
Showing 6 changed files
... ...
@@ -17,10 +17,14 @@ root_url:
17 17
     #header
18 18
       .page_width
19 19
         %a.title(href="/")=page.blog_title
20
-        %ul#header_nav.nav
20
+    #nav
21
+      .page_width
22
+        %ul
21 23
           %li.alpha
22
-            %a(href="#{page.root_url}/archives") Archives
24
+            %a(href="#{page.root_url}/") Blog
23 25
           %li.omega
26
+            %a(href="#{page.root_url}/about") About
27
+          %li.subscribe
24 28
             %a(href="#{page.root_url}/atom.xml") Subscribe
25 29
     #page
26 30
       .page_width
... ...
@@ -35,4 +39,4 @@ root_url:
35 35
     #footer
36 36
       .page_width
37 37
         = "Copyright © #{Time.now.strftime('%Y')} - #{page.blog_title} | "
38
-        %span.credit Powered by <a href="http://github.com/henrik/jekyll">Jekyll</a> & <a href="http://github.com/imathis/octopress/">Octopress</a>
39 38
\ No newline at end of file
39
+        %span.credit Powered by <a href="http://github.com/imathis/octopress/">Octopress</a>
40 40
\ No newline at end of file
41 41
new file mode 100644
... ...
@@ -0,0 +1,12 @@
0
+---
1
+layout: default
2
+title: About Me
3
+---
4
+:markdown
5
+  # About Me
6
+
7
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum.
8
+
9
+  Ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
10
+
11
+  Dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
0 12
\ No newline at end of file
1 13
new file mode 100644
2 14
Binary files /dev/null and b/source/images/rss.png differ
... ...
@@ -4,5 +4,8 @@ title: Blog
4 4
 ---
5 5
 .blog
6 6
   - site.posts.sort_by(&:date).reverse[0..9].each_with_index do |post,index|
7
-    %h2= link_to(post.title, post.url, {:class=>"title"})
8
-    .article= post.content
9 7
\ No newline at end of file
8
+    .article
9
+      %h2= link_to(post.title, post.url, {:class=>"title"})
10
+      = post.content
11
+  .footer
12
+    %a(href="/archives.html" title="archives") &laquo; Blog Archives
10 13
\ No newline at end of file
... ...
@@ -1,4 +1,5 @@
1 1
 !page_width = 560px
2
+!sidebar_width = 0
2 3
 !pad = 15px
3 4
 !default_border_radius = 4px
4 5
 
... ...
@@ -8,23 +9,63 @@ html body
8 8
   a
9 9
     color= !link_color
10 10
 
11
+#footer a
12
+  color= #ddd
13
+  &:hover
14
+    color = #fff
11 15
 #header
12 16
   background-color= !header_bg
13 17
   border-bottom= "1px solid" !header_border
14
-  padding: 20px 0
18
+  padding: 30px 0
15 19
   a.title
16
-    font-size= !h3
20
+    font-size= !h1
17 21
     +heading-font
18 22
     display: inline-block
19
-    color= !header_nav
23
+    color= !title_color
20 24
     text-decoration: none
21
-  #header_nav
22
-    float: right
25
+
26
+#nav
27
+  +clearfix
28
+  position: relative
29
+  z-index: 1
30
+  padding: 6px 0
31
+  background:
32
+    color= !nav_bg
33
+    image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#ddd), color-stop(0.3, #f4f4f4))
34
+    image: -moz-linear-gradient(left top, left bottom, from(#fcfcfc), to(#ddd), color-stop(0.3, #f4f4f4))
35
+  border:
36
+    top= "1px solid" !nav_border_top
37
+    bottom= "1px solid" !nav_border_bottom
38
+  ul
39
+    position: relative
23 40
     +horizontal-list
24
-    a
25
-      color: #ccc
26
-    li.alpha a
27
-      color: #f2f2f2
41
+    margin: 0 auto
42
+    overflow: visible
43
+    li
44
+      padding: 0 15px
45
+      border-left: 1px solid #d3d3d3
46
+      border-right: 1px solid #f4f4f4
47
+      &.alpha
48
+        border-left: none
49
+        padding-left: 0
50
+      &.omega
51
+        border-right: 0
52
+      &.subscribe
53
+        position: absolute
54
+        right: 0
55
+        //left= !page_width - 25px
56
+        border: none
57
+        a
58
+          display: inline-block
59
+          padding-left: 28px
60
+          background: url("/images/rss.png") left top no-repeat
61
+      a
62
+        display: inline-block
63
+        color= !nav_color
64
+        line-height: 150%
65
+        text-decoration: none
66
+        &:hover
67
+          color= !nav_color_hover
28 68
 
29 69
 .page_width
30 70
   width= !page_width
... ...
@@ -35,31 +76,27 @@ html body
35 35
 
36 36
 #page
37 37
   background-color= !page_bg
38
-  border-top= "1px solid" !page_border
39
-  padding: 25px 0
40 38
   .page_width
41
-    background-color= !page_bg
39
+    padding:
40
+      top: 25px
41
+      bottom: 25px
42
+    background-color= !content_bg
43
+    +box-shadow(#ccc)
44
+  .article
45
+    padding= !base_font_size * 1.5 0 !base_font_size * 1.5
46
+    border-bottom= "1px solid" !article_border
47
+    &:first-child
48
+      padding-top: 0
49
+  .blog .footer
50
+    padding-top= !base_font_size
42 51
 
43
-#subnav
44
-  +clearfix
45
-  margin: -25px 0 25px
46
-  padding: 10px 0
47
-  background-color= !subnav_bg
48
-  border-bottom= "1px solid" !subnav_border
49
-  font-size: 85%
50
-  #account
51
-    float: right
52
-    a
53
-      color= !subnav_logout_color
54
-      display: inline-block
55
-      padding-left: 10px
56
-      margin-left: 8px
57
-      border-left= "1px solid" #aaa
58 52
 
59 53
 #footer
54
+  position: relative
55
+  z-index: 2
60 56
   font-size= !base_font_size_small
61 57
   clear: both
62
-  padding: 15px 0
58
+  padding= !base_font_size * 1.5 0
63 59
   color= !footer_color
64 60
   +h-linear-gradient(darken(!body_bg, 25), !body_bg)
65
-  border-top= "4px solid" !footer_bg
66 61
\ No newline at end of file
62
+  border-top= "14px solid" !footer_bg
67 63
\ No newline at end of file
... ...
@@ -1,19 +1,24 @@
1 1
 // Main Section Colors
2 2
 !body_color = #333
3 3
 !body_bg = #323232
4
-!test = darken(!body_bg, 20)
4
+
5 5
 !header_bg = #323232
6 6
 !header_border = #181818
7
-!header_nav = #ddd
8
-!header_nav_hover = #fff
7
+!title_color = #ddd
8
+
9
+!nav_color = #555
10
+!nav_color_hover = #000
11
+!nav_bg = #e8e8e8
12
+!nav_border_top = #fff
13
+!nav_border_bottom = #aaa
14
+
9 15
 !page_border = #fff
10
-!page_bg = #ececec
16
+!page_bg = #f0f0f0
17
+!article_border = #eee
18
+!content_bg = #fff
19
+
11 20
 !footer_color = #999
12 21
 !footer_bg = #444
13
-!subnav_bg = #fff
14
-!subnav_border = #ccc
15
-!subnav_link_color = #333
16
-!subnav_logout_color = #777
17 22
 
18 23
 // Link Colors
19 24
 !link_color = #165B94