My recent review of Beyond Survival included a long but necessary footnote in the first sentence, which made me want to install fancy inline popover footnotes ¹ akin to what I’ve seen on some technology blogs.

This blog runs on Squarespace, so I set up Bigfoot by following the instructions on this 512 Pixels post (including Anthony Craig’s modification for properly resetting numerical footnotes). Overall, the biggest issue I encountered was that despite the stipulation that “the Bigfoot site has all of the various options you can set in Javascript outlined,” the Bigfoot site has a BIG RED (FAUX) SPLASH SCREEN with THREE BIG BUTTONS on it, making it unclear (to me) that you should not click one of the buttons but instead should scroll further down to get to the documentation. I spent an inordinate amount of time poking around in the Bigfoot files and on Github trying to find the documentation, long enough that I was like “I guess the references to ‘website documentation’ are outdated and perhaps outmoded.”

(It was also unclear that to download bigfoot-number.zip ² —to get numeric footnotes—one should go to the demo, apply the numeric style, then download.)

I write these things here in case anyone else runs into the same silly hangups. It is possible to be too precious about interface design, y’all. Anyway, you can now see footnotes in action, here and on the full review!

I’m also trying out Quotebacks, a cute snippet-to-embeddable-blockquote feature, available as a Chrome extension:

The ultimate goal is to encourage and activate a deeper cross-blogger discusson space. To promote diverse voices and encourage networked writing to flourish.
@tomcritchlow https://tomcritchlow.com/2020/06/09/quotebacks/

Here’s to more (and prettier) blogging in 2022!

Update (June 14, 2022): “Bring to Front”

I noticed on a recent blog post that Bigfoot footnotes don’t play well with Squarespace image blocks, by default displaying “underneath” them as in the screenshot below.

A blog post in which the text in an expanded footnote is covered up by one of the images in the post. — Screenshot of a post on this blog, showing the expanded footnote covered up by an image in the post.

To resolve this, I updated bigfoot-number.css to change the z-index of .bigfoot-footnote from the default value 10 to something higher:

.bigfoot-footnote {
  position: absolute;
  z-index: 20;

I’ll continue to keep any further notes about my Bigfoot modifications in this post as a record for myself and anyone else who stumbles across the same issues.

As of today I also noticed that Nathan Cashion on Medium has written a helpful walkthrough about using Bigfoot and Squarespace (as well as a jQuery-less fork of Bigfoot called Littlefoot). I probably won’t bother with Littlefoot for now, but it’s good to know about as an option.

Update (September 20, 2024): Properly Styled Links and Bigfoot Buttons

When writing my recent Brave the Dreamer design diary series, I noticed that links are not properly styled (colored) in the footnote popover, making them difficult to notice among the rest of the text. The footnotes are implemented in a code block at the bottom of the blog post’s body, and I noticed the links aren’t properly styled there, either.

I therefore added the following custom CSS in Squarespace’s Custom CSS editor (Website > Pages > Utilities > Website Tools > Custom CSS):

.code-block a, .bigfoot-footnote__content a {

  color: hsl(30, 89%, 40%);

}

These are the HSL values for the particular ochre brown I’m using for links on this site. I don’t have any hover effects, but if I did, I would replicate those here, too.

It’s not ideal to hard-code the HSL values. According to my research, it seems that in some layout families, Squarespace uses/respects CSS variables. There’s a website called Applet Studio that has scraped all of Squarespace’s CSS variables into an Airtable database. The pertinent one here is paragraphLinkColor, and I’m using a layout family that supports CSS variables, so I thought setting color: var(--paragraphLinkColor); would work, but it didn’t. I’m not sure why, so for now I’m just hard-coding the values, and I’ll need to remember to update them if I ever change my website’s link styles.

Update (September 27, 2024): Well, I scratched an itch to have the default gray Bigfoot buttons match the rest of my site’s link styles.

The previous statement about hard-coding HSL values (and that not being ideal) still applies, but I’m just rolling with it. Note that instead of further editing bigfoot-number.css, I’m adding my modifications to the Squarespace Custom CSS editor, so if I ever change my link styles in Squarespace and need to manually propagate those changes, I’ll be going to a Squarespace tool instead of an auxiliary CSS file.

This time around, I’m using CSS variables and hsla() to define light, medium, and dark versions of my stylesheet’s ochre brown link color. Then I’m overwriting that in the appropriate locations to achieve the desired effect:

Normal button: Dark text on light background
Hover over/focus on button: White text on medium background
Active button: White text on dark background

The resulting custom CSS looks like this:

:root {
  --post-link-color: hsl(30, 89%, 40%);
  --post-link-color-light: hsla(30, 89%, 40%, 0.2);
  --post-link-color-medium: hsla(30, 89%, 40%, 0.5);
  --post-link-color-dark: hsla(30, 89%, 40%, 0.8);
}

.code-block a, .bigfoot-footnote__content a {
  color: var(--post-link-color);
}

.bigfoot-footnote__button {
  background-color: var(--post-link-color-light) !important;
}

.bigfoot-footnote__button:hover, .bigfoot-footnote__button:focus, .bigfoot-footnote__button:active {
  background-color: var(--post-link-color-medium) !important;
}

.bigfoot-footnote__button.is-active {
  background-color: var(--post-link-color-dark) !important;
}

.bigfoot-footnote__button:after {
  color: var(--post-link-color-dark) !important;
}

.bigfoot-footnote__button:hover:after, .bigfoot-footnote__button.is-active:after {
  color: white !important;
}

Like these! ↩
Hunh. And here I’ve just learned that putting backticks around text in Squarespace’s WYSIWYG text editor can get you inline code/monospace formatting, which isn’t documented anywhere. I swear, mostly Squarespace is much less of a headache for me than rolling my own, but fighting for the customizations I do want does get tiring. ↩