BOOKFACE BIG UPDATE!

First of all thank you for all the interest in this “Frio” theme scheme. I was concerned that people might have so much animosity toward Meta that a scheme to make Friendica look more like Facebook would be ill received. I originally made “Bookface” as a user content script just so I would feel more “at home” on Friendica. And I’m still using it that way myself because the instance I’m on does not offer this scheme as an option yet.
Version 1.3 represents a massive rewrite with the introduction of new features, like support for Profile Cover Photos and an “Auto” version that can detect if your operating system is set to Light Mode or Dark Mode and automatically apply the correct mode to Friendica, plus a completely New Mobile View for phones and tablets that aims to make it look and function a lot more like an mobile app. The user content stylesheets for client-side use have also been updated with the same changes, if that’s how you use Bookface. I have incorporated a ton of your feedback into this update, which I thank you for! There are also over 30 tweaks and fixes in this update.
While this is still a work-in-progress (but what on the web isn’t?) Bookface is already being used in production on some Friendica instances so I’d say it’s generally probably safe to use, but there could be issues I haven't anticipated, particularly with whatever add-ons are enabled on any given server.
Keep in mind “Bookface” is intended for recent browsers. By which I mean those that were released in the last year or two. Because I want to leverage some of the more advanced things CSS can now do. But if you have a mobile device that’s stuck running an old browser I’ve added some fallbacks so it’s still at least usable, but I’ve intentionally ignored any browser that nobody should really be using anymore for anything (like Internet Explorer). Presumably if you choose to roll with retro gear you probably don’t care about making Friendica look modern anyway.
I’ll do more detailed posts about each of these new features, but here’s an overview:
BETTER MOBILE MODE!
You may have noticed there isn’t an “official” Friendica mobile app and the webapp feels pretty clunky and outdated. You could, of course, use Relatica or Raccoon for an actual native mobile app experience, but I’ve notice a lot of people (myself included) are trying to use the webapp. And it needs improvement.

I redesigned the mobile view to look and function a lot more like people expect a mobile app to work these days. One specific thing that was asked for was a way to get the toolbars out of the way in landscape mode, particularly on phones with small screens. The mobile landscape view now hides the toolbars and presents you with a limited set of buttons down the left and right sides of the screen if, in landscape orientation, the viewport is less than 400 pixels high. That’s going to be the majority of phones on the market today. Need more controls? Just rotate your phone back to portrait.
I’ve extensively tested this new UI on more than a half a dozen actual mobile devices, including an iPhone 5s, iPhone 8, two different recent Samsung phones, and older iPad Mini, two Android tablets, and two old Android phones.
EDIT: Post with more details about the new Mobile UI
AUTO VERSION!
More than one of you specifically asked for a version that would automatically switch between Light or Dark depending on which mode you have set on your device. It was tricky to implement given all the colors that are set server-side in PHP variables, but I came up with a pure-CSS way of doing it. It doesn’t even need to set a browser cookie. Enjoy going over to the Dark Side. Or Light Side. Whichever.
Unfortunately there is no auto version of the user content stylesheets for the client-side. The client-side styles require the underlying “Frio” theme be set to Light, Dark, Black, or Custom (which is based on Light). There is no way for a client-side stylesheet to automatically switch the server-side theme scheme, so there will never be an auto version of the user stylesheets.
LOCALIZATION & CUSTOMIZATION
Under the Settings > Display > Theme Customization options you could previously only set the Accent Colors. There was a "Link Color" box below that but it didn't do anything. Well, now it does. You can set almost any color you please ("almost" because it does error-catching to make sure you don't set it to the same color as the background).
I’ve moved as much as possible into CSS variables at the top of the stylesheets, so modifying Bookface to your liking is easier than ever. Just change the variable in that one place and everything else follows suit.
One thing in particular I’ve noticed from people’s screenshots is the engagement counts on Action Buttons being changed to match the button color or made black, etc., to make them less distracting. Personally I like them being in my Accent Color so I can quickly see which posts/comments are getting engagement and check them out. But I can also understand that all those colored “dots” could be distracting while scrolling. So I added CSS variables for “count-color” and "count-bg" that let you change the engagement count tex and background color to whatever you want.
But I took it beyond just the colors. Bookface sets a bunch of labels as pseudo-elements, and they are in English because that’s the only language I know. I saw a comment the other day from a German user on a German server that has implemented Bookface note that the labels were in English and thought they should be localized. Well, yes, they *should* and now I made it super easy for server admins to do that!
Just change the CSS variables for the labels at the top of the stylesheets to your language!

Bookface Action Button labels localized (if the translation is laughably wrong blame Google Translate, I don't know any other languages)
COVER PHOTOS!

Every other social media platform seems to have a “Cover Photo/Header Picture” for your profile page. But not Friendica. 🙁 Until now! You can add images to your profile description and/or custom profile fields. You can also put things inside “class” containers. So I coded Bookface to detect a class container named “coverphoto” and treat whatever image(s) are in it as your big, bold cover picture.
You can also decide, depending on where you place it, whether it’s only visible on your actual “Profile” page or if it’s visible on all your profile pages, or if you want to show different cover photos on your profile and the other profile pages. If you’re really indecisive you can place up to 4 images in the container and Bookface will turn them into a striped collage.
As for what that looks like to other people who aren’t using Bookface? Well, they still see a thumbnail of your image(s) in your profile, it just won’t look really cool to them.
EDIT: Post with more details about Cover Photos
PRETTY TAGS!
What is social media without hashtags right? And it’s cool that in the Fediverse you can follow a hashtag like you follow a person. But Friendica’s tags look...kinda bad. A bit distracting. Too small. Too hard to read. And some people really go wild with a wall of tags in their posts. I’m apparently not the only one who thinks they could use some improvements. There are discussions about this in Friendica’s GitHub issues going back several years.
First of all, I don’t think we need the little lightning bolt or person icons on them anymore. It’s 2025, people know what a tag and a mention are. I also replaced the “(x)” on categories with an “X” icon. Next I made the tags the same size they are on Mastodon, which is also makes much better touch-targets on mobile devices. To make them less distracting I gave them an “open” design, and recoded them so only the tag you are hovering/focused on switches to a “filled” design. For consistency I kept similar colors to the existing “Frio” tags, but adjusted them for better contrast against either the Light or Dark mode versions.

The image shows how the tags appear in both Light and Dark modes and against the different background colors for posts and comments. The first row for each background color is how they normally appear, the second is the rollover effect when you hover on them.
GO GET IT!
12 Feb 25: LINKS BELOW UPDATED FOR VERSION 1.4
Server-side: If you run a Friendica instance.
Bookface v1.4 Scheme Files (gitlab.com/randompenguin/bookf…)
Client-side: If the Friendica instance you're on doesn't offer Bookface.
Bookface v1.4 Userstyless (gitlab.com/randompenguin/users…)
Everything is well-documented in the README files.
Bytebro 🇬🇧 🇺🇦 🇬🇱
in reply to Charlie Stross • • •flaeky pancako
in reply to Charlie Stross • • •Weekend Editor
in reply to Charlie Stross • • •The obvious next step is to run Doom.
Whoops, never mind: they've got that covered, too.
github.com/ading2210/doompdf
GitHub - ading2210/doompdf: A port of Doom (1993) that runs inside a PDF file
GitHubreshared this
Pseudo Nym and @reiver ⊼ (Charles) reshared this.
Geoff 🏴
in reply to Charlie Stross • • •Mazzo
in reply to Geoff 🏴 • • •github.com/ading2210/doompdf
👌
What's next, Crysis-in-a-CSV? 🤣
GitHub - ading2210/doompdf: A port of Doom (1993) that runs inside a PDF file
GitHubDavid J. Atkinson
in reply to Charlie Stross • • •Also, I’ll bet there are many packages out there to do cross-compilation from #RISC-V to other machines. Remind me never to use Adobe Acrobat.
karman
in reply to Charlie Stross • • •karman
in reply to Charlie Stross • • •Yet another reason to add to the list of why friends don’t let friends open PDFs…
Crazy impressive and absolutely mind boggling though. 😅
Dervish
in reply to Charlie Stross • • •When I last worked with laser printers, there was a PostScript program that would run Doom - about 15 yrs ago. We never had the time to actually test it, but had to do some extra work to disable the ability to do arbitrary IO.
That said, amazing job and I'm wondering if I should replace my PC with a good printer!
adamrice
in reply to Charlie Stross • • •This reminds me of the guy who stuck an LLM inside a font. Actually, there is more than one guy who has done this.
youtube.com/watch?v=Y65FRxE7uM…
(this explains how he uses the LLM to rewrite your text using synonyms so as to achieve pleasing justified text without use of hyphenation).
fuglede.github.io/llama.ttf/
(this does more conventional predictive text stuff as you type.
I'm not sure what happens when you typeset your PDF-containing-Linux in a typeface-containing-an-LLM, but I'm pretty sure I don't want to be there when it happens.
llama.ttf
fuglede.github.ioEsko Arajärvi likes this.
Martin Vermeer FCD reshared this.
rk: it’s hyphen-minus actually
in reply to Charlie Stross • • •Charlie Stross
in reply to rk: it’s hyphen-minus actually • • •Mark T. Tomczak
in reply to Charlie Stross • • •Todd Knarr
in reply to Charlie Stross • • •2xfo
in reply to Charlie Stross • • •Charlie Stross
in reply to 2xfo • • •jgeorge
in reply to Charlie Stross • • •reshared this
Poul-Henning Kamp and Shannon Prickett reshared this.
Charlie Stross
in reply to jgeorge • • •@jgeorge @bsdphk Blame Adobe for adding JavaScript to PDF, back in the days when everyone wanted to slather world wide web special sauce on their products—like LLMs and "artificial intelligence" today or "crypto/blockchain" a decade ago.
It's a repeating dark pattern, dictated mostly by managers desperate to make Line Go Up by being latest-buzzword-compatible.
Kalle Hallivuori likes this.
reshared this
Poul-Henning Kamp and Shannon Prickett reshared this.
Seán Fenian
in reply to Charlie Stross • • •Sean Eric Fagan
in reply to Charlie Stross • • •@jgeorge @bsdphk There is a big advantage to adding (limited) javascript to a PDF: you can use it as a form, and control input and provide help.
Think of a 3720 terminal.
Poul-Henning Kamp
in reply to Sean Eric Fagan • • •@kithrup @jgeorge
Seriously ?
JavaScript and 3270 in the same toot ?
Are you trying to traumatize people like me ?
Sean Eric Fagan
in reply to Poul-Henning Kamp • • •Poul-Henning Kamp
in reply to jgeorge • • •@jgeorge
One of the events in computing that I have yet to see credibly researched and documented is what I call "The deluge":
How much did "The IT industry" grow during the 1990'ies in terms of persons, and what skills did they come in with ?
My guess is a factor of more than 1000, (ie: 100000+%) and that none of those people (-epsilon) had any professional IT experience, and knew nothing about the skill&craft of IT.
(Add the "Make Money Fast" incentive and...)
Charlie Stross
in reply to Poul-Henning Kamp • • •@bsdphk @jgeorge You can almost certainly chart it by graphing cumulative sales of personal computers, minus machines retired as broken/obsolete, which lags by a time period … and it was undergoing exponential growth throughout this period, so the retired cohort lagged new installs by a huge distance.
Computer use in business implies support personnel numbers (IIRC in the 90s it was 1 PC tech support per 40 installed base).
Since 2007 include smartphones/tablets as well. Different ratio, OFC.
Poul-Henning Kamp
in reply to Charlie Stross • • •@jgeorge
That's pretty much how I arrived at "a factor 1000".
But having somebody who know what they're doing, do the math with actual data would be better 😀
Allpoints
in reply to Charlie Stross • • •JoJaSciPo
in reply to Charlie Stross • • •Is this good?
Or very bad??🤔
Pseudo Nym
in reply to Charlie Stross • • •grob (teeth era) 🇺🇦🏳️🌈🏳️⚧️
in reply to Charlie Stross • • •Charlie Stross
in reply to grob (teeth era) 🇺🇦🏳️🌈🏳️⚧️ • • •GitHub - ading2210/doompdf: A port of Doom (1993) that runs inside a PDF file
GitHubLog 🪵
Unknown parent • • •Richard Johnson
in reply to Charlie Stross • • •Landwomble
in reply to Charlie Stross • • •Charlie Stross
Unknown parent • • •Charlie Stross
Unknown parent • • •