the beacon
But I am constant as the northern star,
Of whose true-fix’d and resting quality
There is no fellow in the firmament.
Julius Caesar
In spirit, the beacon is a lighthouse. Lighthouses are good anywhere that you might get lost.
beacon (n.)
Old English beacen “sign, portent, lighthouse,” from West Germanic *baukna “beacon, signal"1
1 a homing device
If you see the web site as a set of documents, the beacon is just a typical “header”: a link at the top of every page that takes you home:
body <prepend>
<header>
<site_beacon id="willshake-beacon" to="entryway">
<p class="tty"><b>willshake.net</b></p>
</site_beacon>
</header>
</prepend>
Although I talk about “the beacon” as if it were a singleton like “the firmament” and “the exhibit,” it’s actually a reusable template. For reasons not relevant here, another copy of the beacon will be needed somewhere else (such as, you know, the play entryway). So it’s implemented as a shorthand.
<xsl:template match="site_beacon">
<div class="site-beacon">
<xsl:copy-of select="@id" />
<a class="ws-logo" href="/#{@to}">
<xsl:copy-of select="node()" />
</a>
</div>
</xsl:template>
In terms of space, the beacon is a wayfinding device, what Foltz calls a “landmark.” The beacon is designed to be the one item that is visible from the greatest extent of the domain. It won’t necessarily be visible everywhere; as you get further out, you may lose sight of it. (In such cases, we should be sure that it is displaced by a “regional” beacon that will in turn take you back to the entry point of that region, restoring the main beacon to view.)
In other words, the beacon is always visible in the “shallower” levels of the exhibit, that is, before you’ve gotten deep into a context.
The beacon is defined as one “thumb” in size. Since other things may want to know its size, we define this in a library:
@import thumb-metrics
$beaconMarginRems = 1rem
$beaconRems = $thumbRems
This is too large on small screens.
The beacon sits in the “sky,” at the top-left corner of the display. It never moves from that place.
@import order-of-main-layers
@import beacon-metrics
@import pointing
.site-beacon
position fixed
top $beaconMarginRems
left $beaconMarginRems
width $beaconRems
height $beaconRems
z-index $beaconLayer // see "the layers"
transition transform .2s
// EXP: The beacon is pellucid (unless you hover over it)
opacity .8
transition opacity .15s
+user_pointing_at()
opacity 1
Now, on really small screens (such as I hope you never need use), there’s no room for any kind of top-level fixture. This puts the beacon effectively behind the exhibit, at the expense of its being usable there. At this screen size, it wouldn’t be usable for much, anyway.
@media (max-height 20rem), (max-width 20rem)
.site-beacon
z-index $firmamentLayer + 1
2 the site logo
Okay, but what is the beacon?
It’s just the willshake “logo.”
: $(ROOT)/assets/images/logos/logo.svg |> !copy_to |> $(SITE_IMAGES)/logos/%b
I know the image assets are already shipped, but they’re done as symlinks, and don’t get copied as they change. I’ll probably move this back after it’s settled down.
It looks like this.
The logo used to be implemented as DOM/CSS. This isn’t quite cleaned up.
The logo is presented as a CSS background image so that it won’t show up as an
image on terminal browsers. I’m not sure why, really, it just seems that it
should be text. Hence the tty above.
@import signs
.ws-logo
display block // otherwise width/height won't work on link
circle(width: 100%)
background-image url('/static/images/logos/logo.svg')
background-size 100%
box-shadow 0 0 1em #111
So the logo just fills its container. It’s the container’s job to be square, if you want this to be a circle.