/otletsshelf-for-siteleaf

Andrew LeClair & Rob Giampietro's Otlet's Shelf theme, ported to Siteleaf

Primary LanguageCSS

Otlet's Shelf theme for Siteleaf

Otlet's Shelf originated as a Tumblr theme and an Amazon bookmarklet, designed and developed by Andrew LeClair & Rob Giampietro. This is its Siteleaf port.

View demo

About Otlet's Shelf

Named for Paul Otlet — a librarian and visionary who popularized the 3x5 index card catalog and whose work in the early 1900’s prefigured the Internet — Otlet’s Shelf is a project in the spirit of free information exchange.

Share a summer reading list. Keep track of the books on your physical shelves. Organize references around a subject of interest. Publish a wishlist. However you use it, Otlet’s Shelf is a simple tool which aims to turn the private act of collection into something shared.

Improvements over original

  • HTML5
  • retina images
  • removed ID selectors in CSS
  • replaced fonts and colors with SASS variables
  • replaced pixels with ems
  • extracted reusable code into SASS mixins
  • replaced circular avatar image with CSS-based circle cropping
  • view books by author
  • bold headers on book sidebar
  • smaller type on book sidebar
  • shelf in single book view

Installation instructions

  1. Download the theme ZIP file.
  2. Upload the theme ZIP file to your Siteleaf site in the Theme section.
  3. Upload a 300x300px site asset avatar.jpg.
  4. Create a site meta field description.
  5. Create About and Library pages.
  6. Create a post with the description as the body, Tags and Author taxonomy, a link meta field to the Amazon page, and an asset to use as the cover.

Dev Instructions

  1. Download or fork this repo.
  2. Open Terminal in the directory.
  3. Run gem install bundler, if Bundler isn't installed.
  4. Run bundle install to install the required Ruby gems.
  5. Run bundle exec siteleaf config YOUR_DOMAIN to configure your site to this directory.
  6. Run bundle exec guard to watch and compile SASS and Coffeescript changes.
  7. Run bundle exec siteleaf server in a new tab to preview your theme locally.
  8. Open 0.0.0.0:9292 in your browser of choice.

Screenshots