“This website exists as an ongoing collaborative experiment in digital publishing and information sharing. Because this website functions as a wiki, all members of the School of Art community—graduate students, faculty, staff, and alums—have the ability to add new content and pages, and to edit most of the site’s existing content.”
I would have expected some of the most creative minds at Yale, to have come up with something better. Surely the “experiment” to allow “graduate students, faculty, staff, and alums” to login and change the site should have come to an end.
It’s a nice showcase for CSS grid: lots of overlapping and crossing, but still fundamentally a mass of rectangles doing rectangular things. Does it do much more than this? (And the typography is very art-studenty — I can enjoy its youthful energy and its naive rule-breaking and its retro web 1.0 references, but I don‘t actually like the effect). I’d struggle to make a home in a site like this.
And I’m tempted to compare it with glyphsapp.com, which is also uber-gridded, but is doing really interesting things with animations and variable fonts (it’s all one variable font) and romances type design in a way that the Yale site fails to do for the visual arts. It‘s possible to show off, and show something, at the same time.
To a large and discouraging degree, a very bankrupt contemporary art practice revels in a bad-boy, anti-art “aesthetic”. Skill, artistry, technique is disparaged. Beauty is a dirty word. Epater la bourgeoisie, if that is even possible anymore, is everything. Snark rules.
Printed Matter, in NYC, is one of the most prestigious art book distributors. This is their website, built with the same software as the Yale site:
Why not just put the span tag into a paragraph stack directly?
You could then benefit from all the other settings in the stack but just add the CSS for you bg color. It would be better to give the span a class as well so that you could just add the CSS once for wherever you need it on the site.
Don’t forget that paragraph stacks are (almost always) just containers for RapidWeaver Styled Text (yes - like the page type). This means that you can put HTML in there (it is also how the styling buttons at the top of the text editor work; they just insert spans with an inline style for color: or whatever.
Funnily enough, although not a paragraph, HeaderPro has exactly the functionality that you have replicated here. It has extensive options for the “Text Background” for making these sort of brutalist designs.