New Site

2008-12-08T22:27:10-05:00

I was getting tired of my old blog and wanted to play with CSS and code a lil’ bit. So here’s the result. I must say, I’m pretty happy with the result. 3 new tools, I’ve never (heavily) used before, helped me with that. The code is here.

Webby

First, Webby, a static site generator. I’m pretty sure blog engines like Typo, Mephisto and the like are gonna disappear pretty quickly from the blogosphere in favour of static sites. Any good blog engine caches all pages, which ends up being a static website generator. You just don’t need a dynamic app for your blog. Except for the comments, but now there’s Disqus and IntenseDebate.

The only annoying thing about Webby is that I didn’t want my URLs to end with .html. But, that was pretty easy to patch.

# Monkey patch Webby to have nicer URLs.
      # Generate each html pages in a <page_name>/index.html file.
      # So the URL will look like /<page_name>
      module Webby::Resources
        class Page < Resource
          def destination
            dest = super
            if prettify?
              File.join(File.dirname(dest),
                        File.basename(dest, ".*"),
                        "index.html")
            else
              dest
            end
          end
      
          def url
            if prettify?
              super.gsub(/index\.html$/, "")
            else
              super
            end
          end
      
          private
            def prettify?
              filename != "index" && extension == "html"
            end
        end
      end

Compass

I also wanted to give a second try to Haml and Sass and found Compass in the process. It’s Blueprint CSS without the copy-pasting. Sass makes it easy to reuse some chunks of code, like this one, that makes the footer stick to the bottom.

=attach_footer( !footer_height )
        body
          :margin 0
          :padding 0 0 !footer_height 0
        #footer
          :position absolute
          :bottom 0
          :left 0
          :width 100%
          :height !footer_height
        body > #footer
          :position fixed
        * html
          body
            :overflow hidden
          #content
            :height 100%
            :overflow auto

I also took the time to align everything to the grid, that was pretty hard for me.

Finally, I should mentioned that my logo was heavily inspired by Jon Tan’s. I found the idea to make it all with CSS so awesome, I had to (try to) copy it!

Let me know what you think of my new design/site!

Marc-Andre Cournoyer's Awesome Feed

New Site

Webby

Compass