The library relies on these templates:
- Template:Library homepage
- Template:Library card
- Template:Library card mid
- Template:Library card mini
There is also a Module:Number of works to display the (X works) mention in the cards.
Library_homepage contains the overarching CSS for the div containers that will contain the cards on the library homepage in /style.css. It also sets up the library_card and library_card_mini css. It used to be that each template contained its own style, but I moved everything to Library_homepage.
There is also some CSS in MediaWiki:Citizen.css specifically for the built-in dark mode. It could probably be brought to the Library_homepage css.
It's otherwise pretty self-explanatory, especially when one looks at the user guide for the new library. Everything works with simple HTML and CSS.
The grayscale and scaling effect is realized in CSS in the library_homepage stylesheet, so you need to upload colorized pictures (we just did it with free AI tools online for older pictures). If you don't specify a picture for the big cards a placeholder image will be used instead, but it won't be centred properly. To fix this we should just upload a placeholder picture in the correct aspect ratio. Mini cards don't have a default placeholder image.
---
In the library page, we have div containers for every heading and subheading. .library-container is used for the big cards and .library-container-mini is used for the mini cards. You just open this div tag and put the appropriate templates inside it, one after the other. Each container can only be used for its appropriate card type. The CSS of these containers is controlled from the library_homepage template.
The big cards are simply flexboxes displays, but the mini cards had to be CSS grids to display properly.
---
Card picture sizes (height x length)
big cards: 600x400px
mid cards: 300x300px
mini cards: 100x200px
(all dimensions doubled to look good on smartphone [Retina] displays)
As much as possible, pictures for the cards should be cropped to this size. This is because HTML loads the full-size picture, which increases page time and size. In other words if we have a 1500x3000px image for a card, it will load the entire picture and then scale it down to the size we need for the card, loading possibly megabytes of data when we could just load the smaller, lighter picture.
The only solution to load properly-cropped picture is to crop them yourself on your device.
Library homepage template
This template styles the library-container and library-container-mini to be a flexbox and a grid respectively. It also does some mobile styling.
It also handles the more "frequently applied" stylings, such as the grayscale filters and zoom in effects. These used to be in every template but I feel it makes load times worse because you need to call the Library_card css file for every single card that appears on the page, right? I can't confirm it but I feel that's how mediawiki would work. So with this "parent" template, the entire CSS gets called only once, from Library_homepage.
This solution means that you need to call the Library homepage template on any page which is going to contain library cards (realistically we could use them for tons of stuff other than library). If you forget to call this template, you'll know right away because it will look atrocious on the page.
It used to be that each card template had its own entire CSS but I moved everything to the library homepage and the two templates don't call any CSS anymore. This should reduce load times which were sometimes a bit long (relatively speaking) on the library page due to how many cards there are.
This also means the grayscale effect gets repeated for both the library card and the mini card in the CSS, but it's the same filter for both cards (it goes from 100% grayscale to 3% on hover). This is because I organized the common CSS file with library card styling, mini styling, mobile styling in this order.
If you want to change the filters, you need to do it for both cards (look for img:hover clauses preceded by a class).
Mini cards don't have the scale-in effect applied because they're so small it would barely change anything.
Big cards
The images in the big cards have position:relative. This allows us to specify a top and left position in pixels in the template directly (it's a parameter).
It's pretty clever how it works. The card has a fixed size whether on mobile or desktop which makes things easier. There is first .library-card-TOC (table of contents), which is an <h6> tag, the lowliest of all headings. The only thing this does (it's set to a height and width of 0px so that it doesn't actually appear on the page but the HTML still gets parsed, whereas with display:none, the HTML would not get parsed) is make the card {{{name}}} parameter appear in the table of contents that MediaWiki creates, which makes the library browsable.
However, MediaWiki reorders HTML headings itself to create its table of content. That means it doesn't matter that it's an h6, it will still appear as the proper heading or subheading natively.
Next we specify an image file which will link to a category. The library card can only link to a category because in the template, the link looks like [[:Category:{{{link}}}. Note the colon before Category, which specifies in wikicode that it is meant to be treated like a hyperlink and not applying the category to the page!
Then we have another container for the content, which creates the white box with the card name and number of works displayed. The reason we have that is because this blank box needs to be filled in with a color, otherwise the picture (which has a z-index of -1 and is scaled at 1.1 so that it properly covers the entire area it was given) will overlap on the box a little bit. The image is in its own container for proper sizing.
Since we scale in at 1.1 by default we only scale to 1.2 on a hover which is a net 0.1 increase.
This is also where the night mode CSS comes in. You just specify your background-color as var(--color-surface-0) in the Citizen.css page and Citizen will automatically parse it. For other skins which have only a light mode, this bug doesn't happen and the box is plain white but I don't remember setting a color for it other than the Citizen variable. Weird!
The only parameters for the end user are the image path, card name, category name, and finally top and left offsets (hard-coded in pixel, you can change the unit in the Library_card template but there's no need because pixels are the most precise unit).
Mid cards
Mid cards are a subsection of big cards because they work exactly the same way (same HTML and CSS) except they look different. They also use the same container div in the library (.library-container).
I had to declare CSS specific to the mid cards though (which are contained in the .library-card-mid div) for it all to work properly. This CSS is still in the Template:Essays homepage/style.css page. There is only little overlap between the big cards and mid cards in the CSS.
They also don't take the top and left parameters but a scale parameter that zooms into (if >1) or out of (if <1). Can use decimals up to the third, so 1.344 is a valid scaling in.
Images are centred vertically and horizontally in the mid cards, if the "subject" of the picture (what you want to appear in the middle of the card) is not centred in the original picture, such as this one below, then it will be off-centred on the card and would require manually cropping the picture.
Mini cards
The mini card images repeat the same CSS, namely the grayscale filter (but no scale-in effect or box-shadow). They also use many more parameters in their template because you can type in any kind of text you want and add the links yourself. That is to say, the mini card doesn't need to link to a category.
They also use the same <h6> trick as the big cards.
Mini cards are in a flex display (previously grid -- we changed them a bit and grid didn't make sense any more).
Their parameters are an image path, text that appears next to the image (can contain links with [[ ]]), name in the table of contents, and link for when one clicks on the image. The parameters are different from the