[LukasWallrich]

Resource entries are the site's largest page family (1,473 pages), and often the page people land on from search. In the first round under the new design guide (#1135), Sol and Opus scored them 7 and 6. The main problems they found:

• A resource with many creators pushed "Open this resource" more than a screen down on a phone.
• The button didn't say it leaves forrt.org.
• The cluster was plain text, not a link.
• Phones showed the details twice.
• On desktop the details card came before the title in reading order.

What changes for visitors:

• Long creator lists show six names and then "and N more", which opens the full list. Every name stays on the page.
• The main button shows an external-link icon and the destination site beside it, such as "youtube.com" or "doi.org".
• The cluster in the details card links to its cluster page. This applies to 1,445 resources. The 10 resources with only old cluster names keep them as text.
• The type label ("Video", "Reading") is plain text instead of a grey chip, because the guide keeps pills for controls.
• On phones, the details appear once, after the keywords and before Previous and Next. The "Type" row is dropped there, because the label above the title already shows it.
• On desktop, the title and content come first in the page's reading order. The details card still sits in the left column.

Decisions to review

• The "and N more" disclosure appears only when a resource has more than seven creators, so it never says "and 1 more".
• The links to forrt.org (about 30 resources) show the site name but no external-link icon.
• Not changed, though the reviewers suggested them:
  • Breadcrumbs: the same pattern runs site-wide.
  • Previous and Next: they could be replaced with related resources, a larger change for a later PR.
  • A citation block: no resource has a stored reference, and 835 of 1,486 have a DOI.

Checks: check_seo_html.py and the source rules pass, and the unit tests pass. The page audit (overflow, text under 15 px, contrast, line length) is clean on the four sample pages at 390 and 1440 px. CI runs the full design check and axe.

Based on rebrand-doors, which now includes the latest main.

199 creators, phone: six names, then "and 96 more". The button is now in the first screen, with its destination beside it. (This build lists 102 creators, so the disclosure says 96 more.)

199 creators, desktop

Short entry, phone: a plain type label, the destination beside the button, and one details card before Previous and Next instead of a summary line plus the card

Short entry, desktop: a plain type label and the destination beside the button

Details card, desktop: the cluster links to its cluster page

Created with Claude Opus 5.5 in Claude Code; reviewed by GPT-6.1 Sol and Claude Opus 5.5.

🤖 Generated with Claude Code

---

Summary by cubic

Reworks resource entry pages so the main button stays in the first phone screen and reading order puts the entry before the details card.

• Long creator lists show six names and "and N more" to reveal the rest, so long lists no longer push the button off screen.
• The main button shows the destination host and, for external sites, an external-link icon, making it clear the link leaves forrt.org.
• Clusters in the details card now link to their cluster pages; the 10 resources with only legacy cluster names keep them as text.
• On phones the details card appears once, before Previous and Next, replacing the old duplicated summary line; on desktop the content comes first in source order with the card still in the left column.
• The type label is plain text rather than a chip.

Decisions to review

• The "and N more" disclosure appears only past seven creators, so it never says "and 1 more".
• forrt.org links show the site name without the external-link icon.
• SEO check, source rules, and unit tests pass; the page audit is clean on the four sample pages.

^{Written for commit da89a98. Summary will update on new commits.}

[github-actions]

👍 All image files/references (if any) are in webp format, in line with our policy.

[github-actions]

✅ Spell Check Passed

No spelling issues found when checking 1 changed file(s)! 🎉

[cubic-dev-ai]

1 issue found across 2 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="assets/css/doors/article.css">

<violation number="1" location="assets/css/doors/article.css:168">
P3: The resource keyword spacing rule is overridden by the later generic margin shorthand, so resource pages do not receive the intended 24px gap above Keywords. Increase the selector specificity or move this override below the generic rule.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

View guided diff | Turn on auto-fix | Re-trigger cubic</sub>

[cubic-dev-ai]

P3: The resource keyword spacing rule is overridden by the later generic margin shorthand, so resource pages do not receive the intended 24px gap above Keywords. Increase the selector specificity or move this override below the generic rule.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At assets/css/doors/article.css, line 168:

<comment>The resource keyword spacing rule is overridden by the later generic margin shorthand, so resource pages do not receive the intended 24px gap above Keywords. Increase the selector specificity or move this override below the generic rule.</comment>

<file context>
@@ -154,8 +154,31 @@ main:lang(ar) .article-layout .article-style,main:lang(ar) .article-layout .arti
+.article-layout .byline-more>summary{display:inline-block;margin-inline-start:.3em;color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
+.article-layout .byline-more>summary:hover{color:var(--ink)}
+.article-layout .byline-more>p{margin:6px 0 0}
+.article-layout-resource .resource-keywords{margin-top:24px}
+.article-layout-resource .article-card dd a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
+.article-layout-resource>.article-foot{margin-top:0}
</file context>

Suggested change

	.article-layout-resource .resource-keywords{margin-top:24px}
	.article-layout.article-layout-resource .resource-keywords{margin-top:24px}