Natural Shadows

Norr Film

My pal Vanessa sent me a link to Norr Film (historical feature filmmakers). She thought that I might like the look of their site. She was right! It's a standard Squarespace site so it's simple and clean, and me likey lots. It looks fairly new cuz there's not a lot of content yet, but what makes the site really shine for me are the collages. This one is a historical biopic about the Brontë sisters.

Shadows

Also, Vanessa had a question about the drop shadows and how they might have been accomplished. In other words, were the drop shadows Photoshopped or photographed? I vote the latter. There is a way to create realistic drop shadows by way of warping them, but I think the one in this example wasn't manufactured, and that the items with prominent shadows were photographed with the backgrounds removed either with the erase tool or via layer masks. But then again, I wouldn't be surprised if these shadows were in fact created in Photoshop!

Here are a couple of related tutorials to check out:

Layout Engine

or... linear vs. non-linear blog layouts. This video is a comparison between linear (posts initially published to a WordPress blog) and non-linear blog post layouts (after a migration to Squarespace and manually edited with the Layout Engine).

I also discuss why I've minimized my use of Photoshop (tho, hey --- I still have a lotta love for PS). Links mentioned:

Blackout

Today I'm gonna share with you why and how I styled PuglyPixel's main page with inverted styles on a random post. Here's some links to pages and resources I mentioned in the screencast:


Attempt No.1

Hard-coded number of post per page (value for max).

/*
  style random post 
*/

var min = 0;
var max = NUMBER_OF_POSTS_PER_PAGE_MINUS_ONE;
var random_post = Math.floor(Math.random() * (max - min + 1)) + min;
$("#your-blog-collection-id-here .article-list article:eq( " + random_post + " )").addClass('YOUR_CLASS_NAME');

Attempt No.2

Added jQuery's helper function, getJSON() to calculate the number of posts per page dynamically.

/*
  style random post AND have json read the var pageSize 
*/

$.getJSON("//YOUR_SITE_URL_HERE?format=json",function(json){
    var minIndex = 0;
    var maxIndex = json.collection.pageSize - 1;
    var random_post = Math.floor(Math.random() * (maxIndex - minIndex + 1)) + minIndex;
    $("#your-blog-collection-id-here .article-list article:eq( " + random_post + " )").addClass('YOUR_CLASS_NAME');
});

Multiple Blogs

If you have multiple blogs on the same domain of your Squarespace site, and you wanna try this on one of those blogs, you would need to target that specific blog (aka collection). Use Inspect Element to find it.

A Squarespace Site from Scratch

This site was fun to make. Well, fun and frustrating --- telltale signs of a rewarding project, I guess. :) This is my first Squarespace layout. It's based on the design of my first Wordpress theme, Space No.1. It was a great place to start cuz it gave me the chance to compare both CMSs. Okay, I don't compare Wordpress and Squarespace in this video, but if you're curious about developing Squarespace sites of your own from scratch,  I share links to resources that were very helpful to me. I still have lots to learn, and I plan to share my progress as I go along. Stay tuned.

If you wanna check out Space No.1 on Squarespace, visit this page, then click Visitor Access and then match the captcha. By the way, if you're a Squarespace designer or developer and have advice to give, please, by all means, I'm all ears. Solicit away!

References to websites that were of enormous help

Space No.1 @Wordpress