/* * scbt-blog.css — the category blog page as borderless cards, with circular * pagination. Part of plg_system_scbtbrand. Loaded only when the "Blog cards" * param is on; switch that off and every blog page returns to the template's * stock bordered boxes. * * --------------------------------------------------------------------------- * WHAT IT STYLES, AND WHY NO PHP WAS NEEDED * * Helix's blog_item.php renders the intro image BEFORE
, * which holds the title and then .article-introtext. The DOM order the design * asks for — picture, then title, then text — is therefore already what Joomla * emits, so this is a restyle and not an override. The markup is: * *
*
*
round(12 / num_columns) *
*
* *
*
*

Title

*

…

* * How many cards sit across a row is NOT set here: it is the menu item's * # Columns setting, which decides the col-md-* class. This sheet only makes * one card look right at whatever width it is given. * * SCOPE * * Every rule is prefixed .view-category, the body class Helix builds from the * request's view (plugins/system/helixultimate/core/helixultimate.php:49). The * featured and archive views carry different classes and different wrappers, so * nothing else on the site can be reached from here. If that body class were * ever missing, none of this applies and the page renders exactly as it does * today — a visible-but-harmless failure, and the first thing to check in * view-source if the design does not appear. * --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * 1. The card, which is not a card * * template.css:334-338 gives .article-list .article 20px of padding and a * 1px #f5f5f5 border, and the image then bleeds back out of that padding with * negative margins. That box is the thing the design does not want. Undoing the * padding and the border is most of this file's job; the negative margins have * to go with them, or the picture hangs 20px outside the column. * ------------------------------------------------------------------------- */ .view-category .article-list .article { padding: 0; border: 0; border-radius: 0; margin-bottom: var(--scbt-blog-gap, 48px); } /* --------------------------------------------------------------------------- * 2. The picture, held at one ratio * * Every article's image is a different shape, and a grid of differently-shaped * pictures does not read as a grid. The box is given a height with padding-top, * as a percentage of its own width, and the image is stretched over it with * object-fit: cover. * * padding-top, not aspect-ratio: the percentage resolves against the element's * own width, so each card's height is reserved BEFORE its picture has loaded and * the grid does not reflow as images arrive. aspect-ratio on an unpositioned * hands the height back to template.css:56-60's `img { height: auto }` * and the reservation disappears. Same reasoning as mod_scbt_news. * * height:100% and max-width:none on the image exist purely to beat that same * `img` rule — a class selector against an element selector, so no !important. * * float:none IS !important, and has to be: the div carries Bootstrap's * .float-none / .float-left / .float-right, which are themselves !important, and * a floated ratio box collapses out of the card. * ------------------------------------------------------------------------- */ .view-category .article-list .article .article-intro-image { position: relative; float: none !important; width: 100%; margin: 0; padding: 0; padding-top: var(--scbt-blog-ratio, 62.5%); border: 0; border-radius: var(--scbt-blog-radius, 24px); overflow: hidden; /* Safari paints a transformed or scaled child outside a rounded overflow:hidden parent. Inert everywhere else. */ -webkit-mask-image: -webkit-radial-gradient(#fff, #000); } /* Two authoring routes reach this markup and they nest differently. With the article's own Intro Image (what this site uses) the is INSIDE the box; with Helix's article image field the WRAPS the box. The first rule fills the box in the first case, the second stops the wrapper collapsing in the second. */ .view-category .article-list .article .article-intro-image > a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .view-category .article-list .article > a { display: block; } /* * object-fit is the whole difference between the two Picture fit settings. * `cover` fills the shape and crops whatever does not fit; `contain` shrinks the * picture until all of it is inside, leaving the rest of the box empty — which is * what a poster or a flyer needs, where cropping the top off is the same as * losing the headline. * * Both still resolve against the SAME padding-top box, so the cards line up * either way. That is the point of putting the choice here rather than removing * the ratio box for `contain`. */ .view-category .article-list .article .article-intro-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: var(--scbt-blog-fit, cover); } /* --------------------------------------------------------------------------- * 3. Title and intro text * * template.css:349-357 colours the title #252525 at (0,3,2) and its hover * #044cd0. The .view-category prefix puts these at (0,4,2), which wins without * !important — and this sheet loads after the merged bundle anyway. * * The title colour falls through two levels: the administrator's own choice * first, then the plugin's brand colour, then a literal. Leave "Title colour" * empty in the params and the headings follow any future rebrand on their own. * ------------------------------------------------------------------------- */ .view-category .article-list .article .article-header { margin: 1.125rem 0 0.5rem; } .view-category .article-list .article .article-header h1, .view-category .article-list .article .article-header h2 { margin: 0; font-size: var(--scbt-blog-title-size, 1.25rem); font-weight: 700; line-height: 1.25; color: var(--scbt-blog-title-color, var(--scbt-brand, #E6007E)); } .view-category .article-list .article .article-header h1 a, .view-category .article-list .article .article-header h2 a { color: var(--scbt-blog-title-color, var(--scbt-brand, #E6007E)); } .view-category .article-list .article .article-header h1 a:hover, .view-category .article-list .article .article-header h2 a:hover, .view-category .article-list .article .article-header h1 a:focus, .view-category .article-list .article .article-header h2 a:focus, .view-category .article-list .article .article-header h1 a:active, .view-category .article-list .article .article-header h2 a:active { color: var(--scbt-brand-hover, #B3005F); } .view-category .article-list .article .article-introtext { color: var(--scbt-blog-text-color, #555555); line-height: 1.6; } .view-category .article-list .article .article-introtext p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * 4. Circular pagination * * The rendering logic is untouched: which numbers appear, and how many, is * still Joomla's. Only the shape changes. * * What renders this row is templates/shaper_helixultimate/html/pagination.php — * the deprecated chrome file, which Pagination::getPagesLinks() checks BEFORE * any layout (libraries/src/Pagination/Pagination.php:335-365). The three * layouts/joomla/pagination/*.php overrides in the template never run on this * site, so their markup is not what is being styled here. The chrome emits: * *