Styles for the knowledge base article page

[paul999]

Styles for the knowledge base article page moving to the website (phpbb/phpbb-website-private#21, branch issue-21/kb-article).

css/support_docs.css: the article page

• Header: the title, a lead description, the author · last modified · views line, and tags for the phpBB versions (filled slate, like the docs' active tab) and categories (linked).
• Status notice: a notice box on articles only the team and their author can see: new, or switched off.
• Footer panel:
  • the attachments that live on the forum, with their size;
  • the BBCode link to paste into a support topic, in a monospace field with a Copy button.
• Scope: every rule is under .kb-article*. No other page uses these classes.

css/markdown-editor.css

Markdown headings get text-transform: none. Otherwise prosilver's global h3 rule writes an author's ### Basics as "BASICS". Only the KB article and the Markdown demo render .markdown-body today.

Checked

• Colour contrast meets WCAG AA:
  • #5C4400 on #FFF7E0: 8.6:1
  • #626D76 on white: 5.3:1
  • white on #505C65: 6.9:1
• Previewed at desktop and 375px with a real imported article, including colour spans and code blocks. The page doesn't scroll sideways on a phone.

After this merges, composer update phpbb/website-assets goes into the #21 branch.

🤖 Generated with Claude Code

[Copilot]

🟡 Changes recommended

Several new KB selectors are likely overridden by existing #main defaults (and Markdown h3 by #main .panel h3), so intended styles may not apply reliably without specificity adjustments.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Adds styling for the Knowledge Base (KB) article page within the support docs section, and adjusts rendered Markdown heading casing to prevent unintended uppercase transforms from site-wide styling.

Changes:

• Introduces .kb-article* styles for the KB article header/meta/tags, status notice, and footer (attachments + BBCode copy field).
• Updates rendered Markdown heading styles so authored casing is preserved (not transformed to uppercase) where .markdown-body is used.

File summaries

File	Description
css/support_docs.css	Adds KB article page layout/styling for header/meta/tags, status notice, and footer panel UI.
css/markdown-editor.css	Updates Markdown heading rendering to preserve original text casing.

Review details

Suppressed comments (6)

css/support_docs.css:1253

• Same specificity issue as the description: #main p in website.css will override .kb-article p.kb-article-meta for alignment/sizing. Add a #main-scoped selector so this meta line reliably renders left-aligned with the intended font size.

.kb-article p.kb-article-meta {
	margin: 0 0 8px;
	color: #626D76;
	font-size: 1.1em;
	text-align: left;
}

css/support_docs.css:1262

• #main ul in website.css sets list indentation and font sizing with ID specificity, so this reset (margin: 0; padding: 0; list-style: none;) may not apply on the article page. Prefixing with #main (like other KB rules in this file) ensures the tag list renders unindented.

.kb-article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

css/support_docs.css:1284

• #main a applies text-decoration: underline with higher specificity than .kb-article-tags a, so the non-underlined tag links may not work inside #main. Add a #main-scoped selector so the base link style can override the global rule.

.kb-article-tags a {
	color: #105289;
	text-decoration: none;
}

css/support_docs.css:1289

• Once the base tag-link rule is made #main-specific, the hover/focus rule also needs #main specificity; otherwise the base #main ... { text-decoration: none; } will win and links may never underline on hover/focus.

.kb-article-tags a:hover,
.kb-article-tags a:focus {
	text-decoration: underline;
}

css/support_docs.css:1333

• #main ul adds a left margin with ID specificity, so this attachment list may still render indented even with margin: 0; padding: 0;. Consider adding a #main-scoped selector to ensure the list reset wins.

.kb-article-attachments ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

css/support_docs.css:1296

• This status notice is also a p and will be affected by #main p defaults (notably text-align: justify) unless you add a #main-scoped selector, similar to #main .kb-articles p earlier in this stylesheet.

.kb-article p.kb-article-status {
	margin: 4px 0 8px;
	padding: 8px 12px;
	border: 1px solid #E5C07B;
	border-radius: 5px;

• Files reviewed: 2/2 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.