masonite v0.3.1

A Tumblr theme.
masonry + infinite-scroll = masonite.
Clever, huh?

Up for grabs in Tumblr's Theme Garden,
live at hellodirty.com.

Features

• Masonry-powered index page layout
  • infinite scrolling – automatic or user-triggered ("Twitter-style")
  • opt-out to a one-column layout
  • optional centered layout mode
  • defaults to 400 pixel wide posts with optional 500-pixel wide posts on index pages
    (permalink pages show 500 pixel wide content)
• one- or two-column navigation, left or right of the main content and on top or bottom of the viewport
• fully customizable colors thanks to using @font-face for all theme icons
• Vimeo-videos incorporating the "Accents"-color and pretty YouTube-videos
• FitVids.js to make videos always fit in the available width, even when nested in blockquotes or similar
• customizable fonts
  • via Tumblr's own custom fonts functionality
  • or by specifying a web font family (and style(s)) from Google Fonts
• optional
  • links to "Reblog" and "Like" and tag display on index pages
  • lightbox-view of high resolution images, including a (user-invoked) slideshow
  • hide Tumblr avatar and/or title
  • Disqus 2012 integration
  • Google Analytics and Clicky integration
  • Google Code Prettify syntax highlighting
• somewhat working, somewhat orphaned
  • show latest Likes and/or Tweets
  • show "People I follow"

Customization Options

Colors

• Background, Brights, Lights, Mids, Darks, Copy, Accents

Fonts

• Body, PostMeta, Quote, Title, Pre – Override the theme default font by choosing from Tumblr's "Customize" font-stacks.
• Google Web Font – Load one or multiple font families from Google Fonts using the Web Font Loader.
  The option accepts an array as defined here, e. g. 'Fruktur','Open Sans:400,700,400italic,700italic' would load the "Fruktur" font family and the normal (400), italic (400italic), bold (700) and bold italic (700italic) versions of "Open Sans". To make use of the loaded fonts you can write your own CSS-styles or put the name of the font into one of the five "Google Web Font …" option-fields – e. g. to use "Fruktur" as font for all quotes, put Fruktur into the "Google Web Font Quote"-field.

Images

• Avatar – Upload an image to replace the Tumblr avatar with a custom logo.
  Additionally, you can use Avatar HiDPI to provide a high-resolution version of the Avatar-image to display on HiDPI devices (such as iPad 3/4). Please make sure that this image is at least exactly twice as big as the original Avatar image.

Post Options

• 500px Posts – activate to switch post width from the default 400 to 500px
• Centered Content
• Custom trigger Infinite Scroll – enables user-triggered, "Twitter"-style infinite scrolling via a "Load more posts"-button
• Dog Ear Zoom Icon
• Enable Colorbox
• Enable Google Prettify – enables syntax highlighting via Google Code Prettify
• Enable Infinite Scrolling
• Enable Like Links on Index Pages
• Enable Reblog Links on Index Pages
• One Column Content – opt out of the default jQuery Masonry layout for index pages
• Show Album Art on Audio Posts
• Show Post Footer Border – for better distinction between posts
• Show Tags
• Show Tags on Index Page
• Use White Audio Player – use Tumblr's white audio player instead of the (default) black one

Header Options

• Header Left, Header Top – activate these to override the default (right- and bottom-aligned) header position
• Show Avatar – shows/hides the default Tumblr avatar (or the uploaded one)
• Show Title – shows/hides the blog title
• Show Description – shows/hides the blog description
• Show Archive – shows/hides "Archive" link
• Show Random – shows/hides "Random" link
• Show RSS – shows/hides "RSS" link
• Show Mobile – shows/hides the "Mobile" link
• Show Search – shows/hides the search input
• Fading Sidebar
• Two Column Navigation

Somewhat working, somewhat orphaned

These will work, but aren't really up-to-date:

• Show Copyright
• Show Likes
• Show People I Follow
• Show Twitter

Analytics & User Tracking

masonite comes with two analytics options built in, Google Analytics and realtime user tracking with Clicky.

Google Analytics

To setup Google Analytics sign up for an account first; once you have your site information added, Google will provide you with both a Google Analytics ID and embed code. Just grab the ID (e. g. UA-000000-1) and paste it into Customize > Appearance > Google Analytics.

Clicky

Alternately (or in addition), you can use Clicky to see in realtime what people are doing on your site. Sign up for a Clicky account and paste your site ID into Customize > Appearance > Clicky Tracking.

Disqus Comments

To setup comments with your blog, you'll need to register a Disqus account for your site. After you're done, grab the Disqus Site Shortname you selected and paste it into Customize > Appearance > Disqus Shortname.

Social Links

Add URLs to display the following social site icons below your site description.
Please make sure you add the full URL, including “http://”.

Dribbble, Facebook, Github, Soundcloud, Twitter, Vimeo, Rdio, Yahoo, Skype, Evernote, Delicious, Behance, XING, LinkedIn, Picasa, YouTube, StumbleUpon, Last.fm, Google+, Forrst, Pinterest, Flickr, deviantART, Instagram, Blogger, Flattr

Credits

• originally based on Off Franklin, a Tumblr theme by P.J. Onori – License: CC BY-SA 3.0
• pretty YouTube- and Vimeo-videos scripts based on Matthew Buchanan’s and Hayden Hunter’s YouTube improvement script and Better Vimeo Embeds by Matthew Buchanan
• Modernizr v2.8.2 (via grunt-modernizr)
• jQuery v1.11.1
• Masonry v3.2.1
• imagesLoaded v3.1.8
• ColorBox v1.5.14
• Infinite Scroll v2.1.0
• spin.js v2.0.1
• FitVids.js v1.1.0
• HTML5 placeholder Polyfill v2.0.10
• jQuery WidowFix v1.3.2
• Google Code Prettify
• Web Font Loader v1.5.6
• jQuery Smartresize
• built on HTML5 Boilerplate v4.3.0 CSS and normalize.css v3.0.2
• An even better requestAnimationFrame v0.1.7
• query-string v1.0.0
• icon-font generated with IcoMoon, containing icons from
  • Typicons – License: CC BY-SA 3.0
  • Entypo – License: CC BY-SA 3.0
  • IcoMoon - Free – License: CC BY-SA 3.0
  • Broccolidry – License: Aribitrary
  • Iconic – License: CC BY-SA 3.0

Changelog

0.3.1

• Updated to Compass v1.0.3.
• Updated to jQuery v2.2.4.
• Updated to ColorBox v1.6.4.
• Updated to HTML5 placeholder polyfill v2.1.0.
• Updated to normalize.css v4.2.0.
• Updated to Infinite Scroll v2.1.0.
• Updated to Masonry v4.1.1 – which means no support for Internet Explorer 8 and 9 anymore.
• Updated to imagesLoaded v4.1.1.
• Updated to query-string v1.0.1.
• Updated all Grunt plugins to latest stable version, most notably grunt-modernizr to v1.0.2.
• Modernizr v3 does not come with yepnope/Modernizr.load anymore, so we included its version 1.5.4.
• Updated Modernizr configuration and adjust to changed test for touch devices: .no-touch became .no-touchevents.
• Removed npm and install devDependencies.
• Freezed versions in package.json.
• Removed overflow-x: hidden for .index .post – resolves #34.
• Reduced z-index for #header and #copyright so that they do not overlap Tumblrs "Never miss an update" box.
• Brute-forced the size of Tumblr's "Reblog"-button (as its "size"-option does not seem to work anymore below 20px).

0.3.0

• Replaced infinite-scroll loading image with spin.js (#10).
  • We now display the infinite-scroll loading indicator right below the posts as well as aside to the copyright.
• Switched to Tumblr's "new" HTML5 audio player ([#20](ht