Resources for Miles

Training Video by pb+j

Approximately 1.5 hours long. Best viewed in Chrome or Firefox.

Website Assets by pb+j

All parallax banners, photos, miscellaneous graphics, etc.


Typography for Miles

Big H1

Regular H1

REgular H2

Bolded H2

REgular H3

  • single bullet
  • single bullet
  • can't stop won't stop
  • bolded bullet heading
    BTW, bullets can have soft returns

 

You have many options when it comes to typography! Take note that we've hacked over a few of the Heading styles (using custom code) to give you a bit more flexibility.

 

Here's what we've tricked out:

  • Heading 1 + Bold + Italic = Big H1

  • Heading 2 (normally Red) + Bold = Black H2
  • Normal + Bullet + Bold = H3

Code Blocks for Miles

Text Boxes

Pick a Code Block, Neo

Morpheus gifts you with two colour options for text-based Code Blocks.

 

I'm Red!

Put some copy in me!

I'm Blue!

Put some copy in me!

 

Coloured H3 Headlines

These are tiny Code Blocks that will allow you to do coloured H3's!

 

I am Blue!

I am Green!

I am Yellow!

 

Table Reservations

Create a free, secure and instantly-confirmed online reservation for up to 14 people. For larger parties, please call the venue directly or see our Group Booking options below.

 

This Code Block allows you to embed OpenTable and/or Bookenda widgets into Venue pages.

As you know, widgets come in all shapes and sizes. Long/wide widgets look best on Desktop, while vertical/tall widgets look best on Mobile. In that case, why not use both?

Step 1

Inside the Code Block, you'll see two <divs> — one called book-desktop and another called book-mobile. Paste the embed script for the long/wide widget in the book-desktop <div>, and paste the embed script for the vertical/tall widget in the book-mobile <div>.

Step 2

Make sure the tail end of the embed script says iframe=false (instead of "true", which is the common default setting).

 

Group Bookings

Group Bookings are available all year round.

Events Package PDF

Corporate Events

Weddings /
Social Events

Download Now Book Now Book Now

Events Package PDF

Download Now

Corporate Events

Book Now

Weddings /
Social Events

Book Now

This Code Block allows you to 1) add download links for Event Package PDFs and 2) embed Gather widgets into Venue pages.

Step 1

Change the name of the <div> class so it matches the Venue page you're trying to build. Here are the correct class names you should use:

  • venue--bison
  • venue--maple
  • venue--chucks
  • venue--balkan
  • venue--park
  • venue--highrollers
  • venue--elpatio
  • venue--magpie
  • venue--bear
  • venue--sasquatch
  • venue--eddie
  • venue--hoodoo

Step 2

Inside the Code Block, you'll see two sets of <tables> — one called table-desktop and another called table-mobile. It's not as complicated as it looks! All you have to do is ensure that the links for table-desktop are identical to the links for table-mobile. (i.e. You'll have to paste the PDF URL twice and the Gather venue ID four times, but your hard work will pay off.)

You can upload Event Package PDFs directly to Squarespace. The steps are a little bizarre, so watch the tutorial video to find out how!

Screenshot 2018-02-02 00.47.15.png
 

Animated Counters

Need to update those really cool animated counters on the Our Community page? Easy as pie.

Step 1

Open up the Code Block(s) you want to change and update the data-count value. As shown in the example screencap, you'll want to change what's inside the quotation marks (i.e. "48779") and leave the 0 as-is.

Step 2

Please note, this step is only necessary if you want to change the criteria of the statistic (i.e. changing "hours volunteered since Dec 2017" to "hours volunteered since BHC was founded").

Open up the Custom CSS Editor in the backend of Squarespace, then scroll down to line 300 or so. Make your text changes, then hit Save. The Code Blocks should update once you refresh the page.

 

Control the Snow

Sometimes, you just don't want the snow. Like when it's summertime. It's cool, we totally understand. We're judging a little bit, but we understand.

Watch the tutorial video and learn how to control the snow like Storm.

Storm

Image / Video Blocks for Miles

Alt text goes here

Subtitle

Main Text

Image Block – Card Style

The height of this block depends on the cropping proportions of the photo. Have fun and experiment! Just make sure you don't put too much text inside the grey card area — otherwise, it will grow taller than the photo itself (which looks bad).

 

Image Block – Poster Style (Left)

We've added a hoverstate feature using custom code, but it only applies to the Main Text and not the Subtitle.

Video Block (Right)

Don't forget to choose/upload a Custom Thumbnail when using a Video Block! If you forget this step, the yellow Play icon will not show up. (It's another custom code hack.)

Alt text goes here

Hey There

Hover over me to see a surprise