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: Drop shadows + Layer masks.

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. Some links from the screencast: 

mulch, pink trees, pacific northwest, polaroid sx-70, british studs, home sweet home, groceries, envelopes from catalogs, leopard skin nails, vegan donuts, whipping cream, spring, zara coat, weekend warrior, pom pom

Blackout

Design life: 1/19/15 - 3/1/15

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: Tidbits, Sticky Sidebar, promoted blocks, Avenue template, getJSON, Javascript (Lynda), jQuery (Lynda).


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.1

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


$.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');
});

Attempt No.2

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

By the way, 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!