Update site theme in line with Hal's mockup

[wu-lee]

There were some suggested theme alterations in a zoom meeting with Doug, Hal and Josh. Work on getting the theme in line with this.

@halphillips79 said in an email on 9/4/23:

Hey Nick,

Meant to send this to you a while back-- please pardon how crude this is, but this is my mockup of how Rushkoff wants the archive site to look. (I've confirmed that with him, and tweaked this to make sure it's consistent with what he's looking for.)

I thought the visual aid might be useful to have. Hope it is!

Best, Hal

With an attachment:

[wu-lee]

Note, the Videos, Categories and Misc collections can remain, but should be hidden. They might be revived later.

[wu-lee]

Ok, so I've made a number of changes.

Top-level summary is: I've attempted to follow the guides in the image above, whilst also taking some guesses to make the theme more like the chomsky.info site's theme. I've also tweaked some things, including:

• styling the search form better
• ensuring empty image: '' frontmatter tags in articles don't show up as broken images with "article image" text placeholder, as they were
• making sidebar fixed when the content scrolls (except on small displays)

Note that the "brand title" - the text saying "Rushkoff's Archive" is still in the Gelasio font. Changing that is still possible, but wanted to get feeback first, as I personally think it looks a bit more in-your-face using the font now used for titles, M PLUS 1.

Chomsky.info uses these fonts:

• M PLUS 1c for the titles and
• MS Trebuchet, falling back to [Arial][arial], then stock sans-serif for everything else.

Whereas the Monos theme the Rushkoff Archive is adapting used a wide range of Google fonts, many of them supporting Korean/Asian characters (because the author is Korean).

I made an executive decision to try to stick to fonts available on Google's font servers, since although this is an external dependency, this speeds up switching them around massively, as it's just a stylesheet link. The M PLUS 1c and Trebuchet aren't readily available on Google, and chomsky.info includes them directly on the site, which requires downloading and committing them to the codebase, which I can do, but takes time. Seems sensible to do it the quick and easy way whist the final choice isn't signed off, and then install the fonts in the site when that has been done.

Consequence of that is:

• [M PLUS 1][mbase1] is available (seems similar to M PLUS 1c), so using that for titles and navigation links, falling back to sans-serif.

• Trebuchet isn't on Google fonts, so using an alternative recommended here called Fira Sans for article content, falling back to sans-serif.

• Gelasio obvs. available as before, continuing to use on "brand title", falling back to serif.

• All other external fonts removed.

Next, we will need to see what it looks like in various OS/browsers, and decide whether the result is acceptable.

[wu-lee]

Also: made the "Everything" page the front page. (The old one is now deleted, it just had boilerplate links to help created by Jekyll on the original site creation step.)

[wu-lee]

Here are screenshots of the result. Feedback precis in next post.

Note, they are taken when two windows are tiled on my laptop, so the width is half the width I'd normally see it, and more like you'd see on a smaller device like a tablet.

[wu-lee]

This is my precis of Doug's feedback (sent via email)

Overall:

• Emulate the neatness of the Chomsky site, in terms of scale and size, but not the specific fonts. Make the thing look less "blocky/choppy".
• Reduce the amount of variation in formatting.
• Keep the layout simple.
• Put "Douglas Rushkoff [Archive?]" on every page, in a footer (as well as in the sidebar)
• Avoid fonts which are not widely usable.

Note, every page already has "Douglas Rushkoff Archive" in the sidebar title, so I infer you want something in addition to that. And as that is at the top, presumably it should be at the bottom, in a footer. The current fonts are not "standard" in that they are installed by default, but they do use web fonts, which can be loaded by most browsers.

Article and Publication lists:

• Make the size of the titles in lists smaller - it is currently ~1.5x the size we're aiming for.
• Make the size of the publication and date in lists smaller too.
• Keep the titles bold, and keep them underlined on hover.
• Keep, or shrink slightly the [Fira Sans] font on for the body above the lists ("Here is the full list of Douglas Rushkoff's published articles...")
• Keep the publication in italics.
• Keep the date regular text.
• Keep the subtitle in a smaller size of the same font.

Articles:

• Make the body text a notch smaller.
• Make the headline text a lot smaller.

Note, the headline font/size is the same on articles and article lists. So currently, making one smaller would make both smaller.

[wu-lee]

This is after committing these changes: e405bac8

Note, the screenshots here (and above) are in Firefox, on Linux. I've checked Chrome on Linux, and they look essentially identical as far as I can see.

I've borrowed a Mac, and compared FF and Safari there. I assume the FF version is essentially the same - looks it. But the Safari one of course is a bit different. The drop downs have a Mac look, and all the fonts are a bit bigger. As a Mac user, you may want to check this looks okay to you.

I have yet to check Windows (Edge) or iOS (Safari again, but IIRC things are different there).

[wu-lee]

I've had a quick look at an iPad. Broadly similar, so hopefully fine. But the drop-downs are different again, and what's really weird, is that the sidebar changes width - it's different on the article and articles-list pages. This is not written into the stylesheets as far as I understand them, suspect that iOS safari implements something differently, which would be par for the course.