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

This commit is contained in:
B Mathis 2009-10-21 11:39:53 -05:00
parent f17271f6e2
commit 77bb406a93
6 changed files with 103 additions and 42 deletions

View File

@ -17,10 +17,14 @@ root_url:
#header #header
.page_width .page_width
%a.title(href="/")=page.blog_title %a.title(href="/")=page.blog_title
%ul#header_nav.nav #nav
.page_width
%ul
%li.alpha %li.alpha
%a(href="#{page.root_url}/archives") Archives %a(href="#{page.root_url}/") Blog
%li.omega %li.omega
%a(href="#{page.root_url}/about") About
%li.subscribe
%a(href="#{page.root_url}/atom.xml") Subscribe %a(href="#{page.root_url}/atom.xml") Subscribe
#page #page
.page_width .page_width
@ -35,4 +39,4 @@ root_url:
#footer #footer
.page_width .page_width
= "Copyright © #{Time.now.strftime('%Y')} - #{page.blog_title} | " = "Copyright © #{Time.now.strftime('%Y')} - #{page.blog_title} | "
%span.credit Powered by <a href="http://github.com/henrik/jekyll">Jekyll</a> & <a href="http://github.com/imathis/octopress/">Octopress</a> %span.credit Powered by <a href="http://github.com/imathis/octopress/">Octopress</a>

12
source/about.haml Normal file
View File

@ -0,0 +1,12 @@
---
layout: default
title: About Me
---
:markdown
# About Me
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.
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.
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.

BIN
source/images/rss.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -4,5 +4,8 @@ title: Blog
--- ---
.blog .blog
- site.posts.sort_by(&:date).reverse[0..9].each_with_index do |post,index| - site.posts.sort_by(&:date).reverse[0..9].each_with_index do |post,index|
.article
%h2= link_to(post.title, post.url, {:class=>"title"}) %h2= link_to(post.title, post.url, {:class=>"title"})
.article= post.content = post.content
.footer
%a(href="/archives.html" title="archives") &laquo; Blog Archives

View File

@ -1,4 +1,5 @@
!page_width = 560px !page_width = 560px
!sidebar_width = 0
!pad = 15px !pad = 15px
!default_border_radius = 4px !default_border_radius = 4px
@ -8,23 +9,63 @@ html body
a a
color= !link_color color= !link_color
#footer a
color= #ddd
&:hover
color = #fff
#header #header
background-color= !header_bg background-color= !header_bg
border-bottom= "1px solid" !header_border border-bottom= "1px solid" !header_border
padding: 20px 0 padding: 30px 0
a.title a.title
font-size= !h3 font-size= !h1
+heading-font +heading-font
display: inline-block display: inline-block
color= !header_nav color= !title_color
text-decoration: none text-decoration: none
#header_nav
float: right #nav
+clearfix
position: relative
z-index: 1
padding: 6px 0
background:
color= !nav_bg
image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#ddd), color-stop(0.3, #f4f4f4))
image: -moz-linear-gradient(left top, left bottom, from(#fcfcfc), to(#ddd), color-stop(0.3, #f4f4f4))
border:
top= "1px solid" !nav_border_top
bottom= "1px solid" !nav_border_bottom
ul
position: relative
+horizontal-list +horizontal-list
margin: 0 auto
overflow: visible
li
padding: 0 15px
border-left: 1px solid #d3d3d3
border-right: 1px solid #f4f4f4
&.alpha
border-left: none
padding-left: 0
&.omega
border-right: 0
&.subscribe
position: absolute
right: 0
//left= !page_width - 25px
border: none
a a
color: #ccc display: inline-block
li.alpha a padding-left: 28px
color: #f2f2f2 background: url("/images/rss.png") left top no-repeat
a
display: inline-block
color= !nav_color
line-height: 150%
text-decoration: none
&:hover
color= !nav_color_hover
.page_width .page_width
width= !page_width width= !page_width
@ -35,31 +76,27 @@ html body
#page #page
background-color= !page_bg background-color= !page_bg
border-top= "1px solid" !page_border
padding: 25px 0
.page_width .page_width
background-color= !page_bg padding:
top: 25px
bottom: 25px
background-color= !content_bg
+box-shadow(#ccc)
.article
padding= !base_font_size * 1.5 0 !base_font_size * 1.5
border-bottom= "1px solid" !article_border
&:first-child
padding-top: 0
.blog .footer
padding-top= !base_font_size
#subnav
+clearfix
margin: -25px 0 25px
padding: 10px 0
background-color= !subnav_bg
border-bottom= "1px solid" !subnav_border
font-size: 85%
#account
float: right
a
color= !subnav_logout_color
display: inline-block
padding-left: 10px
margin-left: 8px
border-left= "1px solid" #aaa
#footer #footer
position: relative
z-index: 2
font-size= !base_font_size_small font-size= !base_font_size_small
clear: both clear: both
padding: 15px 0 padding= !base_font_size * 1.5 0
color= !footer_color color= !footer_color
+h-linear-gradient(darken(!body_bg, 25), !body_bg) +h-linear-gradient(darken(!body_bg, 25), !body_bg)
border-top= "4px solid" !footer_bg border-top= "14px solid" !footer_bg

View File

@ -1,19 +1,24 @@
// Main Section Colors // Main Section Colors
!body_color = #333 !body_color = #333
!body_bg = #323232 !body_bg = #323232
!test = darken(!body_bg, 20)
!header_bg = #323232 !header_bg = #323232
!header_border = #181818 !header_border = #181818
!header_nav = #ddd !title_color = #ddd
!header_nav_hover = #fff
!nav_color = #555
!nav_color_hover = #000
!nav_bg = #e8e8e8
!nav_border_top = #fff
!nav_border_bottom = #aaa
!page_border = #fff !page_border = #fff
!page_bg = #ececec !page_bg = #f0f0f0
!article_border = #eee
!content_bg = #fff
!footer_color = #999 !footer_color = #999
!footer_bg = #444 !footer_bg = #444
!subnav_bg = #fff
!subnav_border = #ccc
!subnav_link_color = #333
!subnav_logout_color = #777
// Link Colors // Link Colors
!link_color = #165B94 !link_color = #165B94