Home page layout#267
Conversation
Add sticky site header, news banner styling, brand typography, and hero stats animation while restructuring the navbar for tablet and mobile. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Add Trusted by and refined partners, projects, capabilities, and contact blocks; update nav links and keyfeatures spacing so design changes render correctly. Co-authored-by: Cursor <cursoragent@cursor.com>
Introduce dedicated contact, OpenMS-lib, partnerships, sponsor, and calendar pages; refresh navbar, publications, news layouts, and unified section spacing; add maintainer guides for updating site content without front-end changes. Co-authored-by: Cursor <cursoragent@cursor.com>
Apply 64rem content width and governance heroes across community pages, add a dedicated donate page with Zeffy config, refresh help and applications listings, and improve navbar mobile layout and search placement. Co-authored-by: Cursor <cursoragent@cursor.com>
Footer social links and partner logos now highlight via icon tint on hover rather than a blue fill behind the icon. Co-authored-by: Cursor <cursoragent@cursor.com>
…news banner. Migrate about, contact, governance, help, research partnerships, and sponsor pages to the openms-lib hero pattern, apply consistent pill button styling across sections, and improve the announcement banner for readability. Co-authored-by: Cursor <cursoragent@cursor.com>
…n layout. Co-authored-by: Cursor <cursoragent@cursor.com>
✅ Deploy Preview for openms ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis PR updates the OpenMS website’s docs, configuration, content, styling, navigation, and page-level scripts to support the redesigned homepage, new content pages, and dedicated layouts for news, publications, events, sponsor, contact, and library documentation. ChangesWebsite redesign rollout
Sequence Diagram(s)sequenceDiagram
participant Visitor
participant SearchToggle
participant navbar-search.js
participant SearchIndex
Visitor->>SearchToggle: click toggle / type query
SearchToggle->>navbar-search.js: open panel / input event
navbar-search.js->>SearchIndex: fetch data-search-index JSON
SearchIndex-->>navbar-search.js: page list
navbar-search.js->>navbar-search.js: filterPages(pages, query)
navbar-search.js-->>Visitor: renderResults(matches)
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
🟡 Minor comments (19)
config.yaml-65-68 (1)
65-68:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUpdate or disable outdated news banner.
The news banner mentions a workshop on "April 30th 2026", but the current date is June 9, 2026. This event is now in the past. Consider updating the banner to reference current/upcoming events or setting
enabled: false.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@config.yaml` around lines 65 - 68, The newsBanner configuration currently shows a past event; update or disable it by adjusting the newsBanner block: either set newsBanner.enabled to false to hide the banner, or update newsBanner.text (and optionally label) to reference a current or upcoming event and ensure the label remains relevant; modify the newsBanner object (fields: enabled, label, text) accordingly.config.yaml-426-427 (1)
426-427:⚠️ Potential issue | 🟡 MinorStandardize GitHub org link casing in footer
config.yaml(lines 426-427) useshttps://github.com/openMS; update it tohttps://github.com/OpenMSfor consistency with the rest of the site.- link: https://github.com/OpenMS icon: github🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@config.yaml` around lines 426 - 427, Update the GitHub footer link string from "https://github.com/openMS" to use the consistent casing "https://github.com/OpenMS" where the footer links are defined (the YAML entry with keys "link" and "icon" and value "https://github.com/openMS"); ensure the change is applied to that YAML list item so the "icon: github" entry still pairs with the corrected "link" value.data/community_events.yaml-9-9 (1)
9-9:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winVerify the Google Forms URL is correct.
The URL points to the edit view of a Google Form (
/edit). If this is meant for public registration, it should likely use/viewforminstead. If it's intentionally for maintainers to edit the form, consider adding a comment clarifying this.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@data/community_events.yaml` at line 9, The URL value under the url key in data/community_events.yaml points to the Google Form edit view (/edit) instead of the public form; if this entry is intended for public registration, replace the trailing path with /viewform (e.g., change the url value to the form's public view URL) otherwise leave it but add a short YAML comment next to the url key explaining that this edit link is intentional for maintainers so reviewers know it's not an accidental publishable link.docs/common-tasks/add-webapp-to-homepage.md-56-56 (1)
56-56:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winBroken documentation reference.
The link to
../reference/shortcodes.mdpoints to a file that is not present in this PR. Either add that documentation file or remove this reference until it's created.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/common-tasks/add-webapp-to-homepage.md` at line 56, The documentation reference to "../reference/shortcodes.md" in docs/common-tasks/add-webapp-to-homepage.md is broken because that target file isn't present in this PR; either add the missing documentation file named reference/shortcodes.md with the expected shortcodes content, or remove/replace the link in the sentence "See [Edit a page](edit-a-page.md) and [Shortcodes](../reference/shortcodes.md) for figures and notices" so it points to an existing page (or a placeholder) and update any related cross-references.docs/common-tasks/edit-a-page.md-64-64 (1)
64-64:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winBroken documentation reference.
The link to
../reference/shortcodes.mdpoints to a file that is not present in this PR. Either add that documentation file or remove this reference until it's created.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/common-tasks/edit-a-page.md` at line 64, The markdown link "Full list: [Shortcodes](../reference/shortcodes.md)." points to a missing file; either add the referenced documentation file (create reference/shortcodes.md with the shortcodes content) or update/remove the link so it doesn't point to a non-existent resource — edit the line "Full list: [Shortcodes](../reference/shortcodes.md)." in edit-a-page.md to reference the correct existing path or remove the sentence until reference/shortcodes.md is added.docs/README.md-28-30 (1)
28-30:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winBroken internal documentation references.
The task table and documentation map reference several files that are not present in this PR:
workflow/pull-requests.md(line 28)workflow/deployment.md(line 29)workflow/who-to-ask.md(line 30)reference/content-front-matter.md(line 58)reference/shortcodes.md(line 60)reference/file-locations.md(line 61)troubleshooting/common-errors.md(line 67)These broken links will confuse maintainers. Either add these files in this PR or remove/comment the references until they are created.
Also applies to: 58-67
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/README.md` around lines 28 - 30, The README contains links to missing docs that break navigation (references to workflow/pull-requests.md, workflow/deployment.md, workflow/who-to-ask.md and reference/content-front-matter.md, reference/shortcodes.md, reference/file-locations.md, troubleshooting/common-errors.md); either add the corresponding markdown files with at least a placeholder and front-matter, or remove/comment the table rows and link entries in docs/README.md that reference those paths so the README only points to existing files, ensuring any newly added placeholders include a short “TODO: add content” note to avoid future confusion.assets/css/hero-saas.css-210-213 (1)
210-213:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winFix CSS keyword casing: use lowercase
currentcolor.Per CSS spec, keyword values should be lowercase. Change
currentColortocurrentcoloron lines 210-213.🔧 Proposed fix
background-image: - linear-gradient(currentColor 0 0), - linear-gradient(currentColor 0 0), - linear-gradient(currentColor 0 0), - linear-gradient(currentColor 0 0); + linear-gradient(currentcolor 0 0), + linear-gradient(currentcolor 0 0), + linear-gradient(currentcolor 0 0), + linear-gradient(currentcolor 0 0);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/hero-saas.css` around lines 210 - 213, The CSS uses the keyword with incorrect casing in the gradient declarations; update each occurrence of "currentColor" inside the linear-gradient(...) calls (e.g., the lines containing linear-gradient(currentColor 0 0)) to the lowercase "currentcolor" to conform to the CSS spec and ensure consistent keyword usage across the gradient declarations.Source: Linters/SAST tools
assets/css/hero-saas.css-86-86 (1)
86-86:⚠️ Potential issue | 🟡 MinorFix browser-support claim for
text-wrap: prettyinassets/css/hero-saas.css
text-wrap: prettyis supported in Chrome 117+, but Firefox has no support. Safari support is not present in Safari 16.4; it only shows up in newer Safari/WebKit (caniuse lists Safari 26.0, i.e., newer WebKit/Safari Technology Preview). Remove/adjust the “Safari 16.4+” statement and ensure the Firefox fallback (default wrapping) matches your audience’s browser support.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/hero-saas.css` at line 86, Update the browser-support claim and fallback for the CSS rule using text-wrap: pretty in assets/css/hero-saas.css: remove the incorrect “Safari 16.4+” note (it’s only supported in much newer WebKit/Safari) and clarify that Firefox does not support it (Chrome 117+ only), and wrap the rule in a graceful `@supports` or feature-detection comment so that the default wrapping behavior (no special text-wrap) is used as the Firefox fallback; ensure the identifier to change is the CSS declaration text-wrap: pretty and the surrounding comment/feature-detection logic in assets/css/hero-saas.css.assets/css/heroitems.css-5-5 (1)
5-5:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winStylelint spacing rule is violated at Line 5.
declaration-empty-line-beforeis flagged here; please align formatting so lint remains clean.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/heroitems.css` at line 5, The padding declaration "padding: clamp(2.75rem, 5.5vh, 4rem) clamp(1.25rem, 4vw, 2.5rem);" violates the Stylelint declaration-empty-line-before rule; fix it by adding or removing the required empty line(s) before this declaration to match your project's Stylelint config (ensure consistent blank-line placement relative to the previous declaration or rule). Locate the padding declaration in heroitems.css and adjust surrounding blank lines so the declaration-empty-line-before rule is satisfied.Source: Linters/SAST tools
assets/css/heroitems.css-496-504 (1)
496-504:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAlternating developer panel order selector is targeting the wrong element.
The
:nth-child(even)is applied to.openms-step, but parity should be computed on the grid item wrapper. As written, the even-card reorder styles may never apply as intended.Suggested fix
-.openms-steps--developers .openms-step:nth-child(even) .openms-step__media { +.openms-steps--developers .openms-steps__item:nth-child(even) .openms-step__media { order: 2; border-bottom: none; border-top: 1px solid rgba(var(--openms-white-rgb), 0.12); } -.openms-steps--developers .openms-step:nth-child(even) .openms-step__content { +.openms-steps--developers .openms-steps__item:nth-child(even) .openms-step__content { order: 1; } @@ - .openms-steps--developers .openms-step:nth-child(even) .openms-step__media { + .openms-steps--developers .openms-steps__item:nth-child(even) .openms-step__media { order: 1; border-top: none; } - .openms-steps--developers .openms-step:nth-child(even) .openms-step__content { + .openms-steps--developers .openms-steps__item:nth-child(even) .openms-step__content { order: 2; }Also applies to: 617-624
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/heroitems.css` around lines 496 - 504, The parity selector is placed on .openms-step but must be applied to the grid item wrapper that is the direct child of .openms-steps--developers so the even/odd layout flips correctly; change the selectors so :nth-child(even) targets the grid item wrapper (the element that is a direct child of .openms-steps--developers) and then scope .openms-step__media and .openms-step__content inside that wrapper (update both the current .openms-step:nth-child(even) rules and the similar block at 617-624 accordingly).assets/css/home.css-18-18 (1)
18-18:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winStylelint declaration spacing errors need cleanup.
Lines 18, 910, and 1236 are flagged by
declaration-empty-line-before. Please fix these to avoid lint noise/failures.Also applies to: 910-910, 1236-1236
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/home.css` at line 18, The Stylelint rule is flagging the three "display: flex;" declarations for incorrect blank-line spacing; for each occurrence (the rule containing the "display: flex;" at the three flagged locations) remove the stray empty line immediately before the declaration so the declaration follows the previous token (or adjust to match the surrounding declarations) to satisfy declaration-empty-line-before; locate the "display: flex;" entries and make their pre-declaration spacing consistent with the file's existing declaration spacing style.Source: Linters/SAST tools
assets/css/keyfeatures-modern.css-242-242 (1)
242-242:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winStylelint spacing issue at Line 242.
declaration-empty-line-beforeis reported here; please align spacing with the lint rule.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/keyfeatures-modern.css` at line 242, The Stylelint error flags the declaration "padding-inline: clamp(1.25rem, 5vw, 1.85rem);" for declaration-empty-line-before; fix by aligning spacing with the project's lint rule — insert a single blank line immediately before that declaration (or remove any extra blank line if your rule forbids one) so the spacing around the "padding-inline" declaration matches the configured declaration-empty-line-before behavior in assets/css/keyfeatures-modern.css.Source: Linters/SAST tools
assets/css/hero-sponsors.css-97-97 (1)
97-97:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winHigh-contrast border override is currently a no-op.
Line 97 removes the border entirely, so changing only
border-colorat Line 196 does not render any visible border in high-contrast mode.Suggested fix
`@media` (prefers-contrast: more) { .hero-sponsors__label { color: var(--openms-dark); } .hero-sponsors__logo-link { - border-color: var(--openms-white); + border: 1px solid var(--openms-dark); }Also applies to: 195-197
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/hero-sponsors.css` at line 97, The rule that sets "border: none;" (the declaration at line with "border: none;") cancels any later "border-color" adjustments, so restore a visible border baseline instead of removing it; replace the "border: none" declaration with a neutral baseline like a transparent border (e.g., set an explicit border-width and border-style such as 1px solid transparent) so the high-contrast override that changes "border-color" (the rule that sets "border-color" around line 196) will actually render; update both the earlier "border: none" occurrence and the similar block around lines 195-197 to use the explicit border-width/style baseline rather than removing the border.assets/css/navbar-responsive.css-833-838 (1)
833-838:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winNormalize
currentcolorkeyword casing to satisfy stylelint.Line 837, Line 1112, Line 1120, and Line 1132 use
currentColor, which violates the configuredvalue-keyword-caserule.Suggested fix
- fill: currentColor; + fill: currentcolor; ... - fill: currentColor; + fill: currentcolor; ... - fill: currentColor; + fill: currentcolor; ... - fill: currentColor; + fill: currentcolor;Also applies to: 1110-1133
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/navbar-responsive.css` around lines 833 - 838, The CSS uses the `currentColor` keyword with incorrect casing which violates stylelint's value-keyword-case rule; update all occurrences (e.g., the `fill` property in rules for `.site-header `#nav.navbar.is-fresh` .navbar-menu .navbar-mobile-social svg.icon` and `#navbar-clone.navbar.is-fresh .navbar-menu .navbar-mobile-social svg.icon`, and the other occurrences around lines 1110–1133) to use the lowercased `currentcolor` so the `fill` declarations conform to the linter.Source: Linters/SAST tools
assets/css/navbar-responsive.css-375-383 (1)
375-383:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUnify fallback header-height values for overlay alignment.
Line 381 uses
var(--openms-header-height, 4.5rem)while Line 497 usesvar(--openms-header-height, 4.25rem). If the variable is unset, the backdrop and menu start at different offsets.Suggested fix
- top: var(--openms-header-height, 4.25rem); + top: var(--openms-header-height, 4.5rem);Also applies to: 487-499
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/navbar-responsive.css` around lines 375 - 383, The backdrop/menu offset fallbacks are inconsistent: replace the differing fallback value used with var(--openms-header-height, 4.25rem) so both selectors use the same fallback (or pick and apply one consistent fallback such as 4.5rem) — update the occurrences for .site-header `#nav.navbar.is-fresh.is-menu-open` .navbar-backdrop and `#navbar-clone.navbar.is-fresh.is-menu-open` .navbar-backdrop (and the matching rule in the 487-499 block) to use the identical var(--openms-header-height, <chosen-rem>) fallback so the overlay aligns when the CSS variable is unset.assets/css/navbar-search.css-66-76 (1)
66-76:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winReplace deprecated
clipin the visually-hidden label utility.Line 73 uses deprecated
clip, which is flagged by stylelint.Suggested fix
.navbar-search__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; - clip: rect(0, 0, 0, 0); + clip-path: inset(50%); white-space: nowrap; border: 0; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/navbar-search.css` around lines 66 - 76, Replace the deprecated clip usage in the .navbar-search__label rule by removing the clip property and adding a modern clipping rule: use clip-path: inset(50%) (and include -webkit-clip-path: inset(50%) for broader support) to achieve the same visually-hidden effect while keeping the existing position, size, overflow and accessibility-related properties; update the .navbar-search__label selector accordingly.Source: Linters/SAST tools
assets/css/openms-lib.css-1366-1368 (1)
1366-1368:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winFix the mismatched resource-card selector.
The sibling selector targets
.openms-resource-card, but the card class defined in this file is.openms-lib-resource-card, so this reset won’t apply.Suggested fix
.openms-lib-list--resource-grid .openms-lib-list__row + .openms-lib-list__row, -.openms-lib-list--resource-grid .openms-resource-card + .openms-resource-card { +.openms-lib-list--resource-grid .openms-lib-resource-card + .openms-lib-resource-card { border-top: none; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/openms-lib.css` around lines 1366 - 1368, The sibling selector currently targets .openms-resource-card but the actual card class in this stylesheet is .openms-lib-resource-card; update the selector in the rule that begins with .openms-lib-list--resource-grid so the second selector uses .openms-lib-resource-card (i.e., .openms-lib-list--resource-grid .openms-lib-resource-card + .openms-lib-resource-card) so the border-top reset applies to the real card elements.assets/css/openms-lib.css-253-253 (1)
253-253:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUse lowercase
currentcolorto satisfy the stylelint rule.
currentColorviolatesvalue-keyword-casein the current lint config.Suggested fix
-.openms-steps--lib-list .openms-steps__title-accent { +.openms-steps--lib-list .openms-steps__title-accent { color: var(--openms-blue); background: none; - -webkit-text-fill-color: currentColor; + -webkit-text-fill-color: currentcolor; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/openms-lib.css` at line 253, The CSS property -webkit-text-fill-color is using the keyword "currentColor" which violates the value-keyword-case lint rule; change the keyword to lowercase "currentcolor" in the -webkit-text-fill-color declaration (search for the -webkit-text-fill-color rule in openms-lib.css) so the value matches the stylelint configuration.Source: Linters/SAST tools
assets/js/community-calendar.js-74-76 (1)
74-76:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winSort may fail silently with invalid event dates.
If
parseDate(a.start)orparseDate(b.start)returnsnull(due to invalid date format), the subtraction will produceNaN, causing unpredictable sort ordering rather than throwing an error.🛡️ Add null guards to ensure stable sorting
.sort(function (a, b) { - return parseDate(a.start) - parseDate(b.start); + var aDate = parseDate(a.start); + var bDate = parseDate(b.start); + if (!aDate || !bDate) return 0; + return aDate - bDate; });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/js/community-calendar.js` around lines 74 - 76, The current sort callback uses parseDate(a.start) and parseDate(b.start) directly, which can return null and produce NaN; update the comparator used in the .sort(...) call to guard against nulls by converting parseDate(...) to a numeric timestamp with a safe fallback (e.g., treat invalid dates as +Infinity or a very large number so they sort to the end, or as -Infinity to sort to start), and then subtract those safe numeric values; reference the parseDate function and the anonymous comparator passed to .sort to locate and replace the comparison with a null-guarded timestamp comparison.
🧹 Nitpick comments (12)
config.yaml (2)
496-498: ⚡ Quick winHardcoded version in pyOpenMS documentation link.
The "Background" navigation link includes a hardcoded version path
release-3.5.0in the pyOpenMS ReadTheDocs URL. This will become outdated with new releases. Consider using/en/latest/instead of version-specific paths, or document that this link needs updating with each release.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@config.yaml` around lines 496 - 498, The nav entry with title "Background" contains a hardcoded pyOpenMS URL string "https://pyopenms.readthedocs.io/en/release-3.5.0/user_guide/background.html"; update that URL to use a non-versioned path such as "https://pyopenms.readthedocs.io/en/latest/user_guide/background.html" (or make the base docs path configurable) so the link won’t become stale on new releases—locate the "title: Background" entry and change the URL value accordingly.
194-196: ⚡ Quick winComplete or remove placeholder "Korean team" entry.
The "Korean team" entry appears to be a placeholder with a generic name and commented-out URL. Consider either:
- Adding the actual organization name and URL
- Removing this entry until complete information is available
Placeholder data in production config can confuse maintainers.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@config.yaml` around lines 194 - 196, The "Korean team" placeholder entry (name: "Korean team", abbr: KR, commented url) should be completed or removed: either replace "Korean team" and the commented-out url with the real organization name and its URL (uncomment and set url) ensuring abbr: KR is accurate, or delete the entire placeholder block to avoid shipping dummy data; update any related references that expect abbr: KR if you remove or rename it.content/en/about.md (1)
60-63: ⚡ Quick winVerify consistent button styling.
The two CTA buttons use different CSS class patterns:
- Donate button:
about-cta-btn about-cta-btn--donate- Sponsor button:
openms-step__cta openms-btn-primary about-cta-btn--sponsorThis mixing of class naming conventions (
about-cta-btnvsopenms-btn-primaryvsopenms-step__cta) may result in inconsistent button appearance. Verify this produces the intended visual design.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@content/en/about.md` around lines 60 - 63, Two CTA anchors use inconsistent class naming which can cause visual mismatch: one uses "about-cta-btn about-cta-btn--donate" while the other uses "openms-step__cta openms-btn-primary about-cta-btn--sponsor"; update the sponsor anchor to match the donate button pattern (e.g., use "about-cta-btn about-cta-btn--sponsor") or conversely refactor both to a single shared button component class, and then adjust CSS rules (or remove conflicting "openms-step__cta"/"openms-btn-primary" selectors) so both "about-cta-btn" variants render identically according to the design system.assets/css/community-calendar.css (1)
275-368: 🏗️ Heavy liftButton styling duplication (see comments in about.css and applications-page.css).
This is the third file with the same "Navbar-style CTA motion" button pattern. Consider centralizing as noted in earlier files.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/community-calendar.css` around lines 275 - 368, The community calendar CSS duplicates the shared "Navbar-style CTA motion" button patterns; extract the common rules from selectors like .community-calendar-layout .openms-lib-btn, .openms-lib-btn--primary, .openms-lib-btn--ghost, .community-calendar__nav and .community-calendar__today into a single shared utility (e.g., openms button base and modifiers) in the central shared stylesheet used by about.css and applications-page.css, then update this file to use those shared classes instead of repeating the full rule set and remove the duplicated blocks (keep only calendar-specific overrides such as width/padding in .community-calendar-layout .community-calendar__nav and any unique toolbar/action gaps like .openms-lib-hero__actions and .community-calendar__toolbar).assets/css/applications-page.css (1)
82-163: 🏗️ Heavy liftButton styling duplication (see comment in about.css).
This button styling block duplicates the pattern from
assets/css/about.csslines 267-368. Consider centralizing shared button styles as noted in the review of about.css.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/applications-page.css` around lines 82 - 163, The button rules in this diff duplicate styles already defined in assets/css/about.css; extract the shared rules (base button layout: .applications-page-layout .openms-lib-btn and shared state rules for .openms-lib-btn--primary, .openms-lib-btn--ghost and the selector for .applications-page__card .governance-card__link a) into a single shared stylesheet or a common class (e.g., .openms-btn-base and shared modifiers like .openms-lib-btn--primary/.openms-lib-btn--ghost), then replace the duplicated blocks in this file with references to those common classes and keep only page-specific overrides here; update/about.css to use the same shared classes so both pages consume the centralized styles and remove the duplicated declarations from this file.assets/css/about.css (2)
267-368: 🏗️ Heavy liftConsider centralizing button styling to reduce duplication.
The "Navbar-style CTA motion" button styles defined here (lines 267-368) are very similar to button styles in
assets/css/applications-page.css(lines 82-163) andassets/css/community-calendar.css(lines 275-368). This represents significant code duplication across ~100 lines per file.Consider extracting shared button styling (base structure, primary/ghost variants, hover/focus-visible states, focus rings, and reduced-motion handling) into a dedicated
assets/css/buttons.cssor adding these to an existing shared stylesheet, then importing it into page-specific files.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/about.css` around lines 267 - 368, The CSS duplicates shared CTA/button styles across pages; extract the common rules (base selector .about-page-layout .openms-lib-btn and variants .openms-lib-btn--primary, .openms-lib-btn--ghost, .about-cta-btn--donate, .openms-btn-primary plus their :hover/:focus-visible/:active and focus-ring box-shadow rules) into a single shared stylesheet (e.g., assets/css/buttons.css) and replace the page-specific blocks with imports or minimal overrides for page-specific colors/gaps; ensure reduced-motion/transition vars remain handled and keep only variant overrides in about.css, community-calendar.css and applications-page.css.
412-434: ⚡ Quick winSponsor tier badge colors could reference brand palette variables.
The sponsor tier badges use hard-coded gradient values and border colors. While these are intentionally distinct from the brand palette, consider defining them as CSS custom properties in
brand-palette.css(e.g.,--sponsor-platinum-gradient,--sponsor-gold-gradient, etc.) for consistency with the rest of the theming system and easier future adjustments.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/about.css` around lines 412 - 434, Replace the hard-coded gradient and border color values in the .sponsor-tier--platinum .sponsor-tier__badge, .sponsor-tier--gold .sponsor-tier__badge, .sponsor-tier--silver .sponsor-tier__badge, and .sponsor-tier--bronze .sponsor-tier__badge rules by defining CSS custom properties in your brand-palette.css (e.g., --sponsor-platinum-gradient, --sponsor-platinum-border, --sponsor-gold-gradient, --sponsor-gold-border, --sponsor-silver-gradient, --sponsor-silver-border, --sponsor-bronze-gradient, --sponsor-bronze-border) and then reference them with var(...) in these selectors so the badge gradients and borders are managed from the central theme file.assets/css/content_override.css (1)
9-12: ⚡ Quick winVerify negative margin behavior in all contexts.
The negative
margin-bottomonh4elements could cause unexpected layout issues or content overlap, especially with dynamic content. Ensure this behaves correctly across all page contexts where h4 appears.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/content_override.css` around lines 9 - 12, The negative margin-bottom on .content-container h4 (margin-bottom: -0.625rem) can cause overlap; change it to a non-negative spacing strategy and verify in all contexts by replacing the negative margin with a stable approach (e.g., remove negative margin and use positive margin or padding on the following element/container, or use a utility class for consistent spacing), then test .content-container h4 across pages (dynamic content, embedded widgets, and responsive breakpoints) to ensure no overlap or layout shifts occur; if any component relied on the negative offset, adjust that component’s spacing instead of using negative margins.assets/css/contact-area.css (1)
313-313: 💤 Low valueConsider refactoring to avoid
!important.The
!importantflag suggests specificity conflicts. Consider restructuring selectors or increasing specificity naturally to avoid this override.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/contact-area.css` at line 313, Replace the use of the hard override "color: var(--openms-white) !important;" by resolving the underlying specificity conflict: locate the CSS rule containing that declaration and either increase its natural specificity (e.g., by using a more specific selector chain or adding a contextual class) or move the rule later in the stylesheet so it naturally wins, or refactor competing selectors so they no longer collide; ensure you remove the "!important" token from the "color: var(--openms-white)" declaration after adjusting selectors so the intended color applies without forcing an override.assets/css/contact-page.css (1)
130-130: ⚡ Quick winReduce reliance on
!importantdeclarations.Multiple
!importantflags throughout this file suggest specificity conflicts. Consider restructuring selectors to achieve proper specificity without forcing overrides.Also applies to: 142-142, 313-313, 536-536, 543-543, 564-564, 573-573
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/contact-page.css` at line 130, The rule "color: var(--openms-blue) !important;" in assets/css/contact-page.css (and the other occurrences flagged) should not use !important; remove the !important and instead increase selector specificity or move the rule later in the cascade so it naturally overrides conflicting rules (e.g., change a selector to include the page root or a component class like .contact-page .<existing-selector> or add a modifier class such as .is-active to target elements). Alternatively, extract a utility class (e.g., .text-openms-blue) and apply it to the markup so you can keep a simple, specific selector without !important; repeat this change for the identical declarations flagged elsewhere in the file.assets/js/navbar.js (2)
5-5: VerifyMOBILE_MAXmatches CSS breakpoints.The mobile detection threshold is set to
1279px. Ensure this value matches the navbar breakpoints defined in the CSS files (particularlynavbar-responsive.cssfrom the earlier cohort) to prevent mismatches between JS behavior and visual layout.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/js/navbar.js` at line 5, The constant MOBILE_MAX in navbar.js is set to 1279 which may not match the CSS breakpoint; verify the breakpoint value used in the navbar CSS (e.g., navbar-responsive.css) and update MOBILE_MAX to the same pixel value (or derive it from a single source) so JS mobile detection aligns with the CSS breakpoint; confirm you adjust the value where MOBILE_MAX is declared and any dependent logic that uses MOBILE_MAX.
87-88: ⚖️ Poor tradeoff
stopImmediatePropagationsuggests tight coupling with theme.This workaround prevents the theme's
fresh.jsfrom also handling the burger click. While functional, it creates a brittle dependency on event handler registration order. If the theme updates its event handling or this script loads in a different order, the behavior could break.Consider coordinating with the theme to either disable its burger handler when custom logic is present, or extending the theme's handler instead of blocking it.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/js/navbar.js` around lines 87 - 88, You have a brittle stopImmediatePropagation() workaround in the burger click handler that couples this script to the theme's fresh.js; remove the e.stopImmediatePropagation() call and instead coordinate via an explicit guard/flag so both handlers won't double-toggle: before toggling the menu in your handler (the code referencing the burger element and the click event), set a short-lived flag (e.g., element.dataset.customBurgerHandled = "1" or window.__customBurgerHandling = true), perform your toggle logic, then clear the flag; update your handler to check that flag at the top and return early if set so the theme handler can check the same flag (or you can dispatch a custom event the theme can listen to), referencing the burger click handler and the fresh.js theme integration rather than using stopImmediatePropagation().
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b85811d2-0bf9-482b-8aa7-8bea43db07f2
⛔ Files ignored due to path filters (2)
assets/icons/linkedin.svgis excluded by!**/*.svgstatic/images/logos/immatics.pngis excluded by!**/*.png
📒 Files selected for processing (146)
.github/pull_request_template.mdREADME.mdarchetypes/news.mdassets/css/about.cssassets/css/applications-page.cssassets/css/brand-palette.cssassets/css/casestudies.cssassets/css/community-calendar.cssassets/css/contact-area.cssassets/css/contact-page.cssassets/css/content_override.cssassets/css/contribute-page.cssassets/css/donate-page.cssassets/css/governance.cssassets/css/help-page.cssassets/css/hero-saas.cssassets/css/hero-sponsors.cssassets/css/hero.cssassets/css/heroitems.cssassets/css/home.cssassets/css/keyfeatures-modern.cssassets/css/keyfeatures_override.cssassets/css/landing-page.cssassets/css/mailchimp.cssassets/css/members.cssassets/css/navbar-responsive.cssassets/css/navbar-search.cssassets/css/news-banner.cssassets/css/news-section.cssassets/css/openms-buttons.cssassets/css/openms-lib.cssassets/css/publications.cssassets/css/quick-facts.cssassets/css/research-partnerships-page.cssassets/css/shell.cssassets/css/shortcuts_override.cssassets/css/site-header.cssassets/css/sponsor-us-page.cssassets/css/styles_override.cssassets/css/tabs.cssassets/css/terminal.cssassets/css/trusted-by.cssassets/css/typography.cssassets/css/university-partners.cssassets/css/vars_override.cssassets/css/webapps.cssassets/js/back-to-top.jsassets/js/community-calendar.jsassets/js/hero-stats.jsassets/js/home-scroll-reveal.jsassets/js/navbar-search.jsassets/js/navbar.jsassets/js/news-year-filter.jsassets/js/publications-year-filter.jsassets/js/swiper.jsconfig.yamlcontent/en/about.mdcontent/en/applications/_index.mdcontent/en/calendar.mdcontent/en/contact.mdcontent/en/contribute.mdcontent/en/donate.mdcontent/en/governance.mdcontent/en/help.mdcontent/en/news/_index.mdcontent/en/news/gsoc2025.mdcontent/en/openms-lib.mdcontent/en/publications.mdcontent/en/research-partnerships.mdcontent/en/sponsor-us.mddata/community_events.yamldocs/README.mddocs/common-tasks/add-images.mddocs/common-tasks/add-news-post.mddocs/common-tasks/add-webapp-to-homepage.mddocs/common-tasks/configure-donate-zeffy.mddocs/common-tasks/edit-a-page.mddocs/common-tasks/edit-footer-or-navbar.mddocs/common-tasks/edit-homepage-hero.mddocs/common-tasks/update-community-calendar.mddocs/common-tasks/update-news-banner.mddocs/getting-started/edit-via-github.mddocs/getting-started/preview-locally.mddocs/reference/config-yaml-guide.mddocs/reference/content-front-matter.mddocs/reference/file-locations.mddocs/reference/shortcodes.mddocs/troubleshooting/common-errors.mddocs/workflow/deployment.mddocs/workflow/pull-requests.mddocs/workflow/who-to-ask.mdlayouts/_default/baseof.htmllayouts/_default/single.htmllayouts/applications/section.htmllayouts/index.htmllayouts/index.searchindex.jsonlayouts/news/section.htmllayouts/news/single.htmllayouts/partials/about-main.htmllayouts/partials/community-calendar-main.htmllayouts/partials/contact-alternatives.htmllayouts/partials/contact-area.htmllayouts/partials/contact-email-aside.htmllayouts/partials/contact-main.htmllayouts/partials/contact-support.htmllayouts/partials/contribute-main.htmllayouts/partials/css.htmllayouts/partials/donate-main.htmllayouts/partials/footer.htmllayouts/partials/governance-main.htmllayouts/partials/help-main.htmllayouts/partials/hero-sponsors.htmllayouts/partials/hero-stat-card.htmllayouts/partials/hero-stats.htmllayouts/partials/hero.htmllayouts/partials/heroitems.htmllayouts/partials/home-pathways.htmllayouts/partials/keyfeatures.htmllayouts/partials/navbar-clone.htmllayouts/partials/navbar-cta.htmllayouts/partials/navbar-mobile-ctas.htmllayouts/partials/navbar-search.htmllayouts/partials/navbar-social.htmllayouts/partials/navbar-sublinks.htmllayouts/partials/navbar.htmllayouts/partials/news-banner.htmllayouts/partials/news-date-badge.htmllayouts/partials/news-single-main.htmllayouts/partials/openms-lib-main.htmllayouts/partials/publications-main.htmllayouts/partials/publications-year-select.htmllayouts/partials/research-partnerships-main.htmllayouts/partials/single/content.htmllayouts/partials/sponsor-tiers.htmllayouts/partials/sponsor-us-main.htmllayouts/partials/tally-form-embed.htmllayouts/partials/trusted-by.htmllayouts/partials/university-partners.htmllayouts/partials/webapps-project-card.htmllayouts/partials/webapps.htmllayouts/shortcodes/heroitems.htmllayouts/shortcodes/keyfeatures.htmllayouts/shortcodes/partners.htmllayouts/shortcodes/publications-year-select.htmllayouts/shortcodes/sponsor-tiers.htmllayouts/shortcodes/sponsors.html
💤 Files with no reviewable changes (1)
- assets/css/vars_override.css
| .contact-page-layout .openms-lib-btn { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 0.35rem; | ||
| width: fit-content; | ||
| min-height: 2.75rem; | ||
| padding: var(--openms-btn-padding); | ||
| border-radius: var(--openms-btn-pill-radius); | ||
| font-family: var(--openms-font-body); | ||
| font-size: var(--openms-text-min); | ||
| font-weight: 600; | ||
| line-height: 1.3; | ||
| white-space: nowrap; | ||
| text-decoration: none; | ||
| box-shadow: 0 0 0 0 var(--openms-btn-glow); | ||
| transition: var(--openms-btn-motion); | ||
| } | ||
|
|
||
| .contact-page-layout .openms-lib-btn--primary { | ||
| gap: 0.5rem; | ||
| padding-inline: 1.15rem; | ||
| border: 2px solid var(--openms-navy); | ||
| background: var(--openms-navy); | ||
| color: var(--openms-white) !important; | ||
| } | ||
|
|
||
| .contact-page-layout .openms-lib-btn--ghost { | ||
| border: 2px solid var(--openms-blue); | ||
| background: transparent; | ||
| background-color: transparent; | ||
| color: var(--openms-blue) !important; | ||
| } | ||
|
|
||
| .contact-page-layout .openms-lib-hero__actions { | ||
| gap: 0.75rem; | ||
| } | ||
|
|
||
| .contact-page-layout .openms-lib-btn--primary:hover, | ||
| .contact-page-layout .openms-lib-btn--primary:focus-visible, | ||
| .contact-page-layout .openms-lib-btn--primary:active { | ||
| transform: scale(var(--openms-btn-hover-scale)); | ||
| box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); | ||
| outline: none; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .contact-page-layout .openms-lib-btn--primary:hover, | ||
| .contact-page-layout .openms-lib-btn--primary:focus-visible, | ||
| .contact-page-layout .openms-lib-btn--primary:active { | ||
| background: var(--openms-navy); | ||
| border-color: var(--openms-navy); | ||
| color: var(--openms-white) !important; | ||
| } | ||
|
|
||
| .contact-page-layout .openms-lib-btn--ghost:hover, | ||
| .contact-page-layout .openms-lib-btn--ghost:focus-visible, | ||
| .contact-page-layout .openms-lib-btn--ghost:active { | ||
| background: transparent; | ||
| background-color: transparent; | ||
| border-color: var(--openms-blue); | ||
| color: var(--openms-blue) !important; | ||
| transform: scale(var(--openms-btn-hover-scale)); | ||
| box-shadow: 0 0 0 var(--openms-btn-glow-size) var(--openms-btn-glow); | ||
| outline: none; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .contact-page-layout .openms-lib-btn--primary:focus-visible { | ||
| box-shadow: 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-blue), | ||
| 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); | ||
| } | ||
|
|
||
| .contact-page-layout .openms-lib-btn--ghost:focus-visible { | ||
| box-shadow: var(--openms-hero-focus-ring, 0 0 0 3px var(--openms-navy), 0 0 0 5px var(--openms-yellow)), | ||
| 0 0 0 calc(5px + var(--openms-btn-glow-size)) var(--openms-btn-glow); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | 🏗️ Heavy lift
Extract duplicated CTA button styles into a shared module.
The navbar-style CTA button definitions (lines 512-588) are duplicated across multiple page-specific stylesheets (contact-page.css, contribute-page.css, governance.css, help-page.css). This violates DRY principles and makes maintenance harder.
Consider extracting these common button styles into a shared CSS module (e.g., openms-buttons.css or a base CTA component file) and importing or referencing it across pages.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/contact-page.css` around lines 512 - 588, The CTA button styles
for .contact-page-layout .openms-lib-btn and its variants
.openms-lib-btn--primary, .openms-lib-btn--ghost and related rules are
duplicated across page CSS files; extract these common rules into a shared
stylesheet (e.g., openms-buttons.css or a base CTA component) containing the
base .openms-lib-btn, .openms-lib-btn--primary, .openms-lib-btn--ghost, and
.openms-lib-hero__actions rules plus hover/focus states and focus-ring
box-shadows, then remove the duplicated blocks from contact-page.css and replace
them with an import or reference to the shared module so all pages consume the
single source of truth.
| @media (max-width: 48rem) { | ||
| .hero-sponsors { | ||
| min-height: clamp(14rem, 36vh, 20rem); | ||
| padding-top: clamp(5.5rem, 20vw, 7rem); | ||
| padding-bottom: clamp(2rem, 4.5vh, 2.75rem); | ||
| } |
There was a problem hiding this comment.
Cross-component style leak: keyfeatures-modern.css is overriding .hero-sponsors.
Lines 233-237 style .hero-sponsors from within the keyfeatures stylesheet, which creates order-dependent behavior and can regress sponsor layout unexpectedly.
Suggested fix
`@media` (max-width: 48rem) {
- .hero-sponsors {
- min-height: clamp(14rem, 36vh, 20rem);
- padding-top: clamp(5.5rem, 20vw, 7rem);
- padding-bottom: clamp(2rem, 4.5vh, 2.75rem);
- }
-
.keyfeatures-modern {
--kf-section-pad-block: clamp(6.5rem, 13vh, 8.5rem);
--kf-layout-gap: clamp(2.25rem, 5vh, 3rem);
padding-inline: clamp(1.25rem, 5vw, 1.85rem);
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/keyfeatures-modern.css` around lines 232 - 237, The keyfeatures
stylesheet is unintentionally overriding the global .hero-sponsors rules causing
order-dependent regressions; update the selector or location so keyfeatures
styles no longer leak: either remove the .hero-sponsors block from
keyfeatures-modern.css and move those size/padding rules into the dedicated
sponsor stylesheet, or scope them to the keyfeatures component (e.g., prefix
with a keyfeatures-specific class such as .keyfeatures .hero-sponsors or use a
more specific selector) and ensure you adjust or remove the global
.hero-sponsors rules there to prevent cascading conflicts.
| .footer-socials svg.icon { | ||
| width: 1.4rem; | ||
| height: 1.4rem; | ||
| width: 1.5rem; | ||
| height: 1.5rem; | ||
| fill: currentColor; | ||
| } | ||
|
|
||
| /* ---- Copyright ---- */ | ||
| .footer-socials a svg, | ||
| .footer-socials a svg * { | ||
| fill: currentColor !important; | ||
| stroke: currentColor !important; | ||
| color: currentColor !important; | ||
| opacity: 1 !important; | ||
| transition: color 0.2s ease, fill 0.2s ease, stroke 0.2s ease; | ||
| } |
There was a problem hiding this comment.
Fix keyword-case lint violations for currentcolor.
Line 645 and Lines 650-652 use currentColor, but the configured rule expects lowercase currentcolor, which will fail style checks.
Proposed fix
.footer-socials svg.icon {
width: 1.5rem;
height: 1.5rem;
- fill: currentColor;
+ fill: currentcolor;
}
.footer-socials a svg,
.footer-socials a svg * {
- fill: currentColor !important;
- stroke: currentColor !important;
- color: currentColor !important;
+ fill: currentcolor !important;
+ stroke: currentcolor !important;
+ color: currentcolor !important;
opacity: 1 !important;
transition: color 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
}#!/bin/bash
# Expect no matches after the fix
rg -n 'currentColor' assets/css/styles_override.css🧰 Tools
🪛 Stylelint (17.12.0)
[error] 645-645: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
[error] 650-650: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
[error] 651-651: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
[error] 652-652: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/styles_override.css` around lines 642 - 655, The CSS uses the
value "currentColor" in the .footer-socials rules which violates the
keyword-case lint rule; update every occurrence of "currentColor" to lowercase
"currentcolor" in the selectors .footer-socials svg.icon and the .footer-socials
a svg, .footer-socials a svg * rule block (replace fill: currentColor, color:
currentColor, and stroke: currentColor with lowercase "currentcolor") so the
keyword-case rule passes.
| .uni-partners__item { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 5rem; | ||
| min-width: 8.5rem; | ||
| padding: 0.7rem 0.95rem; | ||
| border-radius: 0.6rem; | ||
|
|
||
|
|
||
| text-decoration: none; | ||
| transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; | ||
| } | ||
|
|
||
| .uni-partners__item:hover, | ||
| .uni-partners__item:focus-visible { | ||
| transform: translateY(-2px); | ||
|
|
||
| outline: none; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Quick visual verification around the affected block
nl -ba assets/css/university-partners.css | sed -n '127,151p'Repository: OpenMS/OpenMS-website
Length of output: 106
🏁 Script executed:
#!/bin/bash
python3 - <<'PY'
from pathlib import Path
p = Path("assets/css/university-partners.css")
lines = p.read_text(encoding="utf-8").splitlines()
start, end = 120, 160 # inclusive (1-based line numbers)
for i in range(start, min(end, len(lines))+1):
print(f"{i:4d}: {lines[i-1]}")
PYRepository: OpenMS/OpenMS-website
Length of output: 1115
Remove blank lines before CSS declarations (declaration-empty-line-before) in .uni-partners__item.
- There are blank/whitespace-only lines before
text-decoration: none;and beforeoutline: none;in the shown block (currently lines 135–136 and 144, respectively).
Proposed fix
.uni-partners__item {
display: inline-flex;
align-items: center;
justify-content: center;
height: 5rem;
min-width: 8.5rem;
padding: 0.7rem 0.95rem;
border-radius: 0.6rem;
-
-
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.uni-partners__item:hover,
.uni-partners__item:focus-visible {
transform: translateY(-2px);
-
outline: none;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .uni-partners__item { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 5rem; | |
| min-width: 8.5rem; | |
| padding: 0.7rem 0.95rem; | |
| border-radius: 0.6rem; | |
| text-decoration: none; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; | |
| } | |
| .uni-partners__item:hover, | |
| .uni-partners__item:focus-visible { | |
| transform: translateY(-2px); | |
| outline: none; | |
| } | |
| .uni-partners__item { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 5rem; | |
| min-width: 8.5rem; | |
| padding: 0.7rem 0.95rem; | |
| border-radius: 0.6rem; | |
| text-decoration: none; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; | |
| } | |
| .uni-partners__item:hover, | |
| .uni-partners__item:focus-visible { | |
| transform: translateY(-2px); | |
| outline: none; | |
| } |
🧰 Tools
🪛 Stylelint (17.12.0)
[error] 137-137: Expected no empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 145-145: Expected no empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/university-partners.css` around lines 127 - 146, Remove the
blank/whitespace-only lines within the .uni-partners__item rule and its
hover/focus rule so there are no empty lines immediately before the
declarations; specifically, inside the .uni-partners__item block (referenced by
the selector .uni-partners__item) remove the blank lines preceding
text-decoration: none; and any other declarations, and inside the
.uni-partners__item:hover, .uni-partners__item:focus-visible block remove the
blank line before outline: none; to satisfy the declaration-empty-line-before
rule.
Source: Linters/SAST tools
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (2)
layouts/partials/navbar.html (1)
8-10: ⚡ Quick winConsider making the logo path configurable.
The logo image path is hardcoded to
"logos/OpenMS_transparent_whiteFont.svg"in bothnavbar.htmlandnavbar-clone.html(lines 8-10). This duplication requires manual updates in multiple locations if the logo path ever changes. Consider extracting this to a site configuration variable.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@layouts/partials/navbar.html` around lines 8 - 10, The logo image path is hardcoded in the $logoImage variable as "logos/OpenMS_transparent_whiteFont.svg" and duplicated across navbar.html and navbar-clone.html. Instead of hardcoding this path, extract it to a site configuration variable (such as in the site params or config file) and reference that configuration value in both navbar.html and navbar-clone.html. This way, changing the logo path requires updating only one location in the site configuration rather than multiple template files.layouts/partials/navbar-clone.html (1)
8-10: ⚡ Quick winConsider making the logo path configurable.
The logo image path is hardcoded to
"logos/OpenMS_transparent_whiteFont.svg"in bothnavbar.htmlandnavbar-clone.html(lines 8-10). This duplication requires manual updates in multiple locations if the logo path ever changes. Consider extracting this to a site configuration variable.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@layouts/partials/navbar-clone.html` around lines 8 - 10, The logo image path is hardcoded as a string assigned to the variable $logoImage in navbar-clone.html. Extract this hardcoded path value to a site configuration variable instead of defining it locally. Replace the hardcoded string assignment for $logoImage with a reference to a configuration parameter from the site config (such as accessing it from the params or site object), then ensure this same configuration approach is applied to the navbar.html file to eliminate duplication and allow the logo path to be managed centrally from the site configuration.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@assets/css/contact-page.css`:
- Line 209: The `word-break: break-word` property is deprecated per CSS
specifications. Replace this property with `overflow-wrap: anywhere` which is
the modern and spec-compliant alternative. The `overflow-wrap: anywhere`
property provides better layout predictability, especially for flex containers,
while achieving the same word-breaking behavior needed for the contact page
styling.
In `@assets/css/navbar-responsive.css`:
- Around line 1172-1174: Change the CSS keyword `currentColor` to lowercase
`currentcolor` in the fill property at the specified location in
navbar-responsive.css. The Stylelint rule requires all CSS keyword values to be
in lowercase, so update `fill: currentColor;` to `fill: currentcolor;` to comply
with the linting configuration.
In `@assets/css/navbar-search.css`:
- Around line 27-35: The .navbar-search__toggle:focus-visible selector currently
removes the outline with outline: none, relying only on color changes for focus
indication which is insufficient for keyboard accessibility. Remove the outline:
none; declaration from the .navbar-search__toggle:focus-visible rule to restore
the default browser focus outline, ensuring keyboard users can clearly see focus
state. Apply the same fix to the equivalent focus-visible rule at lines 172-176
mentioned in the comment.
In `@assets/css/news-banner.css`:
- Around line 3-13: In the .news-banner rule, the stylelint
declaration-empty-line-before rule violation occurs because there is no empty
line separating the custom property declarations from the position property. Add
an empty line before the position: relative; declaration to separate the group
of custom properties (--news-banner-*) from the regular CSS properties.
In `@assets/css/styles_override.css`:
- Around line 201-210: The CSS rule for `.navbar-brand-link:focus-visible`
(which also applies to the related selectors including the `#navbar-clone`
variant) is currently removing all focus indicators by setting outline to none
and removing box-shadow, making keyboard navigation invisible. Replace this rule
with one that provides a visible focus indicator, such as adding a clear
outline, box-shadow, or background color change that creates sufficient contrast
to indicate when the navbar brand link has keyboard focus. The fix should apply
to all the selectors listed in the diff block (the main navbar and the
navbar-clone variants).
In `@layouts/partials/community-events-home.html`:
- Around line 13-15: The template directly calls the `time` function on the
`.start` and `.end` fields without error handling, which will cause cryptic
failures if a malformed date is provided. Wrap the `time` calls in conditional
checks using the pattern `{{ if $var := time .field }}...{{ end }}` for both the
`.end` field assignment on line 14 and the `.start` field assignment (also check
line 54 and 75 where similar direct `time` calls exist) to gracefully handle
parse failures and prevent template generation errors when invalid dates are
encountered.
---
Nitpick comments:
In `@layouts/partials/navbar-clone.html`:
- Around line 8-10: The logo image path is hardcoded as a string assigned to the
variable $logoImage in navbar-clone.html. Extract this hardcoded path value to a
site configuration variable instead of defining it locally. Replace the
hardcoded string assignment for $logoImage with a reference to a configuration
parameter from the site config (such as accessing it from the params or site
object), then ensure this same configuration approach is applied to the
navbar.html file to eliminate duplication and allow the logo path to be managed
centrally from the site configuration.
In `@layouts/partials/navbar.html`:
- Around line 8-10: The logo image path is hardcoded in the $logoImage variable
as "logos/OpenMS_transparent_whiteFont.svg" and duplicated across navbar.html
and navbar-clone.html. Instead of hardcoding this path, extract it to a site
configuration variable (such as in the site params or config file) and reference
that configuration value in both navbar.html and navbar-clone.html. This way,
changing the logo path requires updating only one location in the site
configuration rather than multiple template files.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0507c121-b9cc-421a-9ae2-f98502b1a69d
⛔ Files ignored due to path filters (4)
static/images/community/community-tech-bg.svgis excluded by!**/*.svgstatic/images/community/community-welcome.svgis excluded by!**/*.svgstatic/images/community/dev-meeting.jpgis excluded by!**/*.jpgstatic/images/logos/OpenMS_transparent_whiteFont.svgis excluded by!**/*.svg
📒 Files selected for processing (70)
assets/css/about.cssassets/css/applications-page.cssassets/css/brand-palette.cssassets/css/community-calendar.cssassets/css/community-events-home.cssassets/css/community-home.cssassets/css/contact-area.cssassets/css/contact-page.cssassets/css/contribute-page.cssassets/css/donate-page.cssassets/css/governance.cssassets/css/help-page.cssassets/css/hero-saas.cssassets/css/home.cssassets/css/navbar-responsive.cssassets/css/navbar-search.cssassets/css/navbar-surface.cssassets/css/news-banner.cssassets/css/news-section.cssassets/css/openms-buttons.cssassets/css/openms-lib.cssassets/css/publications.cssassets/css/research-partnerships-page.cssassets/css/shortcuts_override.cssassets/css/site-header.cssassets/css/sponsor-us-page.cssassets/css/styles_override.cssassets/css/university-partners.cssassets/css/webapps.cssassets/js/home-scroll-reveal.jsassets/js/navbar-search.jsassets/js/news-year-filter.jsassets/js/publications-year-filter.jsconfig.yamlcontent/en/about.mdcontent/en/applications/_index.mdcontent/en/help.mdcontent/en/openms-lib.mdcontent/en/publications.mddata/community_events.yamllayouts/applications/section.htmllayouts/index.htmllayouts/news/section.htmllayouts/partials/about-main.htmllayouts/partials/community-calendar-main.htmllayouts/partials/community-events-home.htmllayouts/partials/community-home.htmllayouts/partials/contact-alternatives.htmllayouts/partials/contact-area.htmllayouts/partials/contact-email-aside.htmllayouts/partials/contact-main.htmllayouts/partials/contact-support.htmllayouts/partials/donate-main.htmllayouts/partials/hero-stat-card.htmllayouts/partials/hero-stats.htmllayouts/partials/hero.htmllayouts/partials/heroitems.htmllayouts/partials/navbar-clone.htmllayouts/partials/navbar-search.htmllayouts/partials/navbar.htmllayouts/partials/news-banner.htmllayouts/partials/news-year-select.htmllayouts/partials/publications-main.htmllayouts/partials/publications-year-select.htmllayouts/partials/tally-form-embed.htmllayouts/partials/university-partner-item.htmllayouts/partials/university-partners.htmllayouts/partials/webapps-project-card.htmllayouts/partials/webapps.htmllayouts/shortcodes/partners.html
💤 Files with no reviewable changes (4)
- assets/css/contribute-page.css
- assets/css/sponsor-us-page.css
- assets/css/help-page.css
- assets/css/research-partnerships-page.css
✅ Files skipped from review due to trivial changes (1)
- content/en/about.md
🚧 Files skipped from review as they are similar to previous changes (10)
- assets/css/brand-palette.css
- assets/css/community-calendar.css
- assets/css/donate-page.css
- assets/css/shortcuts_override.css
- assets/js/home-scroll-reveal.js
- assets/css/university-partners.css
- assets/css/webapps.css
- assets/css/home.css
- config.yaml
- assets/css/openms-buttons.css
| text-decoration: underline; | ||
| text-underline-offset: 0.14em; | ||
| text-decoration-thickness: 0.08em; | ||
| word-break: break-word; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify no deprecated break-word usage remains in CSS
rg -n --type=css 'word-break:\s*break-word'Repository: OpenMS/OpenMS-website
Length of output: 123
🌐 Web query:
word-break: break-word deprecated CSS modern alternative overflow-wrap
💡 Result:
The CSS property value word-break: break-word is officially deprecated [1][2][3]. It is considered legacy and should not be used in modern development [1][4]. The modern and recommended alternative is to use the overflow-wrap property [1][5]. Specifically, word-break: break-word is treated by browsers as an alias for overflow-wrap: anywhere [3][6]. Key points regarding the transition: 1. Recommended Approach: Use overflow-wrap: break-word or overflow-wrap: anywhere depending on your specific requirements [5][7]. - overflow-wrap: break-word: Breaks lines at arbitrary points if no other break opportunities exist, but does not consider these breaks when calculating the min-content intrinsic size of the element [5][7]. - overflow-wrap: anywhere: Similar to break-word, but it does consider the introduced break opportunities when calculating min-content intrinsic sizes, often leading to more predictable layout behavior in flex or grid containers [3][5]. 2. Why it was deprecated: The behavior of word-break was historically intended for controlling line breaking in CJK (Chinese, Japanese, Korean) languages [8][9]. Using word-break: break-word for general overflow management conflated these purposes [8]. The CSS Working Group moved this functionality to the overflow-wrap property (formerly known as word-wrap) to clearly separate language-specific breaking rules from generic overflow protection [8][5][9]. 3. Legacy Status: While browsers continue to support word-break: break-word for backward compatibility, specifications now formally discourage its use [1][3][4]. New code should exclusively rely on the overflow-wrap property to handle text wrapping and overflow prevention [1][5].
Citations:
- 1: https://web-platform-dx.github.io/web-features-explorer/features/word-break-break-word/
- 2: https://www.w3schools.com/cssref/css3_pr_word-break.php
- 3: https://stackoverflow.com/questions/17259916/difference-between-overflow-wrap-and-word-break
- 4: [css-text-3] Normatively disallow break-word w3c/csswg-drafts#4087
- 5: https://github.com/mdn/content/blob/main/files/en-us/web/css/reference/properties/overflow-wrap/index.md
- 6: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break
- 7: https://unused-css.com/blog/text-wrapping/
- 8: https://stackoverflow.com/questions/66724509/overflow-wrap-break-word-vs-word-break-break-word
- 9: https://css-tricks.com/almanac/properties/o/overflow-wrap/
🏁 Script executed:
# Check context around line 209 in the CSS file
sed -n '190,220p' assets/css/contact-page.cssRepository: OpenMS/OpenMS-website
Length of output: 762
🏁 Script executed:
# Search for all word-break usage in the CSS files to understand the pattern
rg -n --type=css 'word-break:' assets/Repository: OpenMS/OpenMS-website
Length of output: 123
Replace deprecated word-break: break-word with overflow-wrap: anywhere.
The word-break: break-word property is officially deprecated per CSS specs. Use overflow-wrap: anywhere instead, which provides better layout predictability for flex containers.
Proposed fix
.contact-page__path-link {
display: inline-flex;
align-items: center;
width: fit-content;
margin-top: 0.15rem;
font-size: clamp(0.8rem, 2.2vw, var(--openms-text-min));
font-weight: 600;
line-height: 1.4;
color: var(--openms-blue);
text-decoration: underline;
text-underline-offset: 0.14em;
text-decoration-thickness: 0.08em;
- word-break: break-word;
+ overflow-wrap: anywhere;
transition: color 0.15s ease;
}🧰 Tools
🪛 Stylelint (17.13.0)
[error] 209-209: Deprecated keyword "break-word" for property "word-break" (declaration-property-value-keyword-no-deprecated)
(declaration-property-value-keyword-no-deprecated)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/contact-page.css` at line 209, The `word-break: break-word`
property is deprecated per CSS specifications. Replace this property with
`overflow-wrap: anywhere` which is the modern and spec-compliant alternative.
The `overflow-wrap: anywhere` property provides better layout predictability,
especially for flex containers, while achieving the same word-breaking behavior
needed for the contact page styling.
Source: Linters/SAST tools
| color: var(--openms-navbar-link-color); | ||
| fill: currentColor; | ||
| } |
There was a problem hiding this comment.
Normalize CSS keyword casing to satisfy Stylelint.
Line 1173 uses currentColor, but the configured lint rule expects lowercase keyword values.
🛠️ Proposed fix
- fill: currentColor;
+ fill: currentcolor;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| color: var(--openms-navbar-link-color); | |
| fill: currentColor; | |
| } | |
| color: var(--openms-navbar-link-color); | |
| fill: currentcolor; | |
| } |
🧰 Tools
🪛 Stylelint (17.13.0)
[error] 1173-1173: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/navbar-responsive.css` around lines 1172 - 1174, Change the CSS
keyword `currentColor` to lowercase `currentcolor` in the fill property at the
specified location in navbar-responsive.css. The Stylelint rule requires all CSS
keyword values to be in lowercase, so update `fill: currentColor;` to `fill:
currentcolor;` to comply with the linting configuration.
Source: Linters/SAST tools
| .navbar-search__toggle:hover, | ||
| .navbar-search.is-open .navbar-search__toggle { | ||
| color: var(--openms-navbar-link-hover-color, var(--openms-blue)); | ||
| outline: none; | ||
| } | ||
|
|
||
| .navbar-search__toggle:focus-visible { | ||
| color: var(--openms-navbar-link-hover-color, var(--openms-blue)); | ||
| outline: none; |
There was a problem hiding this comment.
Restore explicit keyboard focus indicators for search controls and results.
These :focus-visible rules remove outlines and rely on color-only changes, which makes keyboard focus easy to miss.
Proposed fix
.navbar-search__toggle:focus-visible {
color: var(--openms-navbar-link-hover-color, var(--openms-blue));
- outline: none;
+ outline: 2px solid var(--openms-blue);
+ outline-offset: 2px;
}
.navbar-search__result:hover,
.navbar-search__result:focus-visible {
color: var(--openms-blue);
- outline: none;
+}
+
+.navbar-search__result:focus-visible {
+ outline: 2px solid rgba(var(--openms-blue-rgb), 0.35);
+ outline-offset: 2px;
+ border-radius: 0.35rem;
}Also applies to: 172-176
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/navbar-search.css` around lines 27 - 35, The
.navbar-search__toggle:focus-visible selector currently removes the outline with
outline: none, relying only on color changes for focus indication which is
insufficient for keyboard accessibility. Remove the outline: none; declaration
from the .navbar-search__toggle:focus-visible rule to restore the default
browser focus outline, ensuring keyboard users can clearly see focus state.
Apply the same fix to the equivalent focus-visible rule at lines 172-176
mentioned in the comment.
| .news-banner { | ||
| --news-banner-max: min(92rem, calc(100% - 1.5rem)); | ||
| --news-banner-pad-x: clamp(0.75rem, 1.5vw, 1.35rem); | ||
| --news-banner-bg: var(--openms-chrome-banner-bg); | ||
| --news-banner-border: var(--openms-chrome-banner-border); | ||
| --news-banner-label-color: var(--openms-chrome-banner-label); | ||
| --news-banner-label-bg: var(--openms-chrome-banner-label-bg); | ||
| --news-banner-label-border: var(--openms-chrome-banner-label-border); | ||
| --news-banner-text-color: var(--openms-chrome-banner-text); | ||
| --news-banner-focus-ring: rgba(var(--openms-blue-secondary-rgb), 0.45); | ||
| position: relative; |
There was a problem hiding this comment.
Fix the stylelint declaration-empty-line-before violation in .news-banner.
Stylelint flags the declaration block at Line 13; add the required empty line before position.
Proposed fix
.news-banner {
--news-banner-text-color: var(--openms-chrome-banner-text);
--news-banner-focus-ring: rgba(var(--openms-blue-secondary-rgb), 0.45);
+
position: relative;
z-index: 100;
overflow: hidden;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .news-banner { | |
| --news-banner-max: min(92rem, calc(100% - 1.5rem)); | |
| --news-banner-pad-x: clamp(0.75rem, 1.5vw, 1.35rem); | |
| --news-banner-bg: var(--openms-chrome-banner-bg); | |
| --news-banner-border: var(--openms-chrome-banner-border); | |
| --news-banner-label-color: var(--openms-chrome-banner-label); | |
| --news-banner-label-bg: var(--openms-chrome-banner-label-bg); | |
| --news-banner-label-border: var(--openms-chrome-banner-label-border); | |
| --news-banner-text-color: var(--openms-chrome-banner-text); | |
| --news-banner-focus-ring: rgba(var(--openms-blue-secondary-rgb), 0.45); | |
| position: relative; | |
| .news-banner { | |
| --news-banner-max: min(92rem, calc(100% - 1.5rem)); | |
| --news-banner-pad-x: clamp(0.75rem, 1.5vw, 1.35rem); | |
| --news-banner-bg: var(--openms-chrome-banner-bg); | |
| --news-banner-border: var(--openms-chrome-banner-border); | |
| --news-banner-label-color: var(--openms-chrome-banner-label); | |
| --news-banner-label-bg: var(--openms-chrome-banner-label-bg); | |
| --news-banner-label-border: var(--openms-chrome-banner-label-border); | |
| --news-banner-text-color: var(--openms-chrome-banner-text); | |
| --news-banner-focus-ring: rgba(var(--openms-blue-secondary-rgb), 0.45); | |
| position: relative; |
🧰 Tools
🪛 Stylelint (17.13.0)
[error] 13-13: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/news-banner.css` around lines 3 - 13, In the .news-banner rule,
the stylelint declaration-empty-line-before rule violation occurs because there
is no empty line separating the custom property declarations from the position
property. Add an empty line before the position: relative; declaration to
separate the group of custom properties (--news-banner-*) from the regular CSS
properties.
Source: Linters/SAST tools
| .navbar.is-fresh .navbar-brand .navbar-brand-link:hover, | ||
| .navbar.is-fresh .navbar-brand .navbar-brand-link:focus-visible, | ||
| #navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:hover, | ||
| #navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:focus-visible { | ||
| background: transparent !important; | ||
| background-color: transparent !important; | ||
| color: inherit !important; | ||
| box-shadow: none !important; | ||
| outline: none; | ||
| } |
There was a problem hiding this comment.
Reintroduce a visible focus style for the navbar brand link.
The current :focus-visible styling removes all focus indication and doesn’t add a replacement, making keyboard focus on the logo link effectively invisible.
Proposed fix
.navbar.is-fresh .navbar-brand .navbar-brand-link:hover,
.navbar.is-fresh .navbar-brand .navbar-brand-link:focus-visible,
`#navbar-clone.navbar.is-fresh` .navbar-brand .navbar-brand-link:hover,
`#navbar-clone.navbar.is-fresh` .navbar-brand .navbar-brand-link:focus-visible {
background: transparent !important;
background-color: transparent !important;
color: inherit !important;
box-shadow: none !important;
- outline: none;
+ outline: none;
}
+
+.navbar.is-fresh .navbar-brand .navbar-brand-link:focus-visible,
+#navbar-clone.navbar.is-fresh .navbar-brand .navbar-brand-link:focus-visible {
+ outline: 2px solid var(--openms-blue-secondary);
+ outline-offset: 3px;
+}Also applies to: 212-217
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/styles_override.css` around lines 201 - 210, The CSS rule for
`.navbar-brand-link:focus-visible` (which also applies to the related selectors
including the `#navbar-clone` variant) is currently removing all focus
indicators by setting outline to none and removing box-shadow, making keyboard
navigation invisible. Replace this rule with one that provides a visible focus
indicator, such as adding a clear outline, box-shadow, or background color
change that creates sufficient contrast to indicate when the navbar brand link
has keyboard focus. The fix should apply to all the selectors listed in the diff
block (the main navbar and the navbar-clone variants).
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
config.yaml (1)
703-711: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winProjects sublinks all resolve to the same destination.
Featured Projects,Affiliated Projects, andArchived Projectseach link to/applications, so the three distinct labels are indistinguishable to users. If separate destinations (e.g. anchors or filtered pages) are intended, update the URLs; otherwise this looks like a placeholder left in.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@config.yaml` around lines 703 - 711, The Projects submenu currently maps all three labels to the same destination, so the entries in the navigation config are indistinguishable. Update the sublinks under Projects in the menu structure to point `Featured Projects`, `Affiliated Projects`, and `Archived Projects` to their intended unique destinations, or replace them with a single link if separate targets are not available. Use the existing Projects navigation entries as the location to adjust.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@assets/css/ecosystem-home.css`:
- Around line 239-244: The reduced-motion override for ecosystem-home only
disables the card hover transform, but the `.home-page--motion` reveal animation
for this section still runs. Update the reduced-motion handling in the
`ecosystem-home__card`/`home-page--motion` styles so reveal opacity and
translate transitions are also disabled when `prefers-reduced-motion: reduce` is
active, alongside the existing hover/focus transform reset.
In `@layouts/partials/ecosystem-home.html`:
- Line 37: The monogram fallback in the ecosystem home card should be made safe
for missing or very short names, since the current use of substr on .name can
fail during template rendering. Update the fallback logic in the ecosystem-home
card template so it only takes a substring when .name is present and long
enough, and otherwise falls back to a safe default monogram value; use the
existing .monogram and .name fields in this template to locate the change.
In `@layouts/partials/product-resources.html`:
- Line 27: The ARIA label in product-resources.html is hardcoded to a specific
product name, which makes the partial incorrect when reused. Update the label in
the openms-lib-developers__platforms/openms-lib-resource-card__platforms block
to use the existing product context or a template variable instead of
“pyOpenMS,” so the accessible text stays generic across products.
---
Outside diff comments:
In `@config.yaml`:
- Around line 703-711: The Projects submenu currently maps all three labels to
the same destination, so the entries in the navigation config are
indistinguishable. Update the sublinks under Projects in the menu structure to
point `Featured Projects`, `Affiliated Projects`, and `Archived Projects` to
their intended unique destinations, or replace them with a single link if
separate targets are not available. Use the existing Projects navigation entries
as the location to adjust.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 11bdd36f-3fdb-4cab-bd40-067b436ca992
📒 Files selected for processing (34)
assets/css/applications-page.cssassets/css/brand-palette.cssassets/css/ecosystem-home.cssassets/css/home.cssassets/css/navbar-responsive.cssassets/css/navbar-surface.cssassets/css/openms-buttons.cssassets/css/openms-lib.cssassets/css/site-header.cssassets/css/styles_override.cssassets/js/home-scroll-reveal.jsassets/js/navbar.jsconfig.yamlcontent/en/openms-lib.mdcontent/en/pyopenms-viz.mdcontent/en/pyopenms.mdcontent/en/webapps.mdlayouts/_default/single.htmllayouts/index.htmllayouts/partials/ecosystem-home.htmllayouts/partials/navbar-clone.htmllayouts/partials/navbar.htmllayouts/partials/openms-lib-developers.htmllayouts/partials/openms-lib-highlights.htmllayouts/partials/product-developers.htmllayouts/partials/product-highlights.htmllayouts/partials/product-resources.htmllayouts/partials/university-partners.htmllayouts/partials/webapps.htmllayouts/shortcodes/openms-lib-developers.htmllayouts/shortcodes/openms-lib-highlights.htmllayouts/shortcodes/pyopenms-developers.htmllayouts/shortcodes/pyopenms-getting-started.htmllayouts/shortcodes/pyopenms-highlights.html
✅ Files skipped from review due to trivial changes (4)
- content/en/webapps.md
- content/en/pyopenms.md
- content/en/pyopenms-viz.md
- content/en/openms-lib.md
🚧 Files skipped from review as they are similar to previous changes (8)
- assets/css/brand-palette.css
- assets/css/navbar-surface.css
- assets/js/navbar.js
- assets/css/openms-buttons.css
- assets/css/site-header.css
- assets/css/applications-page.css
- assets/css/styles_override.css
- assets/css/home.css
| @media (prefers-reduced-motion: reduce) { | ||
| .ecosystem-home__card:hover, | ||
| .ecosystem-home__card:focus-visible { | ||
| transform: none; | ||
| } | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Disable reveal motion in the reduced-motion override.
The reduced-motion block only removes card hover movement; the .home-page--motion reveal transitions above still animate opacity/translate for this section.
♿ Proposed fix
`@media` (prefers-reduced-motion: reduce) {
.ecosystem-home__card:hover,
.ecosystem-home__card:focus-visible {
transform: none;
}
+
+ .home-page--motion .home-page__block--ecosystem .ecosystem-home__header,
+ .home-page--motion .home-page__block--ecosystem .ecosystem-home__item {
+ opacity: 1;
+ transform: none;
+ transition: none;
+ transition-delay: 0s;
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @media (prefers-reduced-motion: reduce) { | |
| .ecosystem-home__card:hover, | |
| .ecosystem-home__card:focus-visible { | |
| transform: none; | |
| } | |
| } | |
| `@media` (prefers-reduced-motion: reduce) { | |
| .ecosystem-home__card:hover, | |
| .ecosystem-home__card:focus-visible { | |
| transform: none; | |
| } | |
| .home-page--motion .home-page__block--ecosystem .ecosystem-home__header, | |
| .home-page--motion .home-page__block--ecosystem .ecosystem-home__item { | |
| opacity: 1; | |
| transform: none; | |
| transition: none; | |
| transition-delay: 0s; | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/ecosystem-home.css` around lines 239 - 244, The reduced-motion
override for ecosystem-home only disables the card hover transform, but the
`.home-page--motion` reveal animation for this section still runs. Update the
reduced-motion handling in the `ecosystem-home__card`/`home-page--motion` styles
so reveal opacity and translate transitions are also disabled when
`prefers-reduced-motion: reduce` is active, alongside the existing hover/focus
transform reset.
| decoding="async" | ||
| /> | ||
| {{- else }} | ||
| <span class="ecosystem-home__card-monogram">{{ .monogram | default (substr .name 0 2) }}</span> |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
Guard monogram fallback against short or missing names.
Line 37 uses substr .name 0 2; if name is missing or shorter than 2 chars, template rendering can fail and break the page build.
Suggested fix
- <span class="ecosystem-home__card-monogram">{{ .monogram | default (substr .name 0 2) }}</span>
+ {{- $name := .name | default "" -}}
+ <span class="ecosystem-home__card-monogram">
+ {{- if .monogram -}}
+ {{ .monogram }}
+ {{- else if ge (len $name) 2 -}}
+ {{ substr $name 0 2 }}
+ {{- else -}}
+ {{ $name }}
+ {{- end -}}
+ </span>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <span class="ecosystem-home__card-monogram">{{ .monogram | default (substr .name 0 2) }}</span> | |
| {{- $name := .name | default "" -}} | |
| <span class="ecosystem-home__card-monogram"> | |
| {{- if .monogram -}} | |
| {{ .monogram }} | |
| {{- else if ge (len $name) 2 -}} | |
| {{ substr $name 0 2 }} | |
| {{- else -}} | |
| {{ $name }} | |
| {{- end -}} | |
| </span> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@layouts/partials/ecosystem-home.html` at line 37, The monogram fallback in
the ecosystem home card should be made safe for missing or very short names,
since the current use of substr on .name can fail during template rendering.
Update the fallback logic in the ecosystem-home card template so it only takes a
substring when .name is present and long enough, and otherwise falls back to a
safe default monogram value; use the existing .monogram and .name fields in this
template to locate the change.
| {{- with .text }} | ||
| <p class="openms-lib-list__text">{{ . }}</p> | ||
| {{- end }} | ||
| <div class="openms-lib-developers__platforms openms-lib-resource-card__platforms" role="group" aria-label="Try pyOpenMS online"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Avoid hardcoded product name in ARIA label.
aria-label="Try pyOpenMS online" is not generic in product-resources.html, so assistive text becomes incorrect when reused for other products.
Suggested fix
- <div class="openms-lib-developers__platforms openms-lib-resource-card__platforms" role="group" aria-label="Try pyOpenMS online">
+ {{- $platformLabel := .platformLabel | default "Try online" -}}
+ <div class="openms-lib-developers__platforms openms-lib-resource-card__platforms" role="group" aria-label="{{ $platformLabel }}">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div class="openms-lib-developers__platforms openms-lib-resource-card__platforms" role="group" aria-label="Try pyOpenMS online"> | |
| {{- $platformLabel := .platformLabel | default "Try online" -}} | |
| <div class="openms-lib-developers__platforms openms-lib-resource-card__platforms" role="group" aria-label="{{ $platformLabel }}"> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@layouts/partials/product-resources.html` at line 27, The ARIA label in
product-resources.html is hardcoded to a specific product name, which makes the
partial incorrect when reused. Update the label in the
openms-lib-developers__platforms/openms-lib-resource-card__platforms block to
use the existing product context or a template variable instead of “pyOpenMS,”
so the accessible text stays generic across products.
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (5)
assets/css/community-calendar.css (2)
322-332: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winFocus-visible removes outline with only a subtle color change as replacement.
outline: noneis applied unconditionally to both:hoverand:focus-visible, leaving only a text color shift as the visible focus indicator for keyboard users. This is a weaker signal than a focus ring and may be hard to notice, especially against similarly-colored backgrounds.♿ Suggested fix: add a visible focus indicator
.events-past-card__title-link:hover, .events-past-card__title-link:focus-visible { color: var(--events-past-accent); - outline: none; + outline: 2px solid var(--events-past-accent); + outline-offset: 2px; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/community-calendar.css` around lines 322 - 332, The .events-past-card__title-link hover/focus-visible styles remove the default outline and leave only a subtle color change, which weakens keyboard focus visibility. Update the .events-past-card__title-link rules so :focus-visible keeps or adds a clear visible focus indicator (such as an outline or similar ring) while preserving the hover color change, and avoid using outline: none unless it is replaced with an equally strong focus style.
655-730: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoffConsolidate the repeated
.openms-lib-btnpage rules
help-page.css,governance.css, andcommunity-calendar.cssall repeat the same base sizing/motion/focus-ring block for.openms-lib-btn.assets/css/openms-buttons.cssis a separate CTA system (.openms-btn-primary,.openms-step__cta), so this shared block belongs with the existing.openms-lib-btnprimitive inassets/css/openms-lib.css, leaving only true per-page overrides locally.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/community-calendar.css` around lines 655 - 730, The `.openms-lib-btn` base styling is duplicated in community-calendar and should be centralized with the shared primitive instead of kept as page-specific CSS. Move the common sizing, typography, motion, focus-ring, and reduced-motion rules from the `.community-calendar-layout .openms-lib-btn` block into `openms-lib.css`, using the existing `.openms-lib-btn` selector, and leave only community-calendar-specific overrides (such as the primary/ghost variants) in this file.assets/js/events-year-filter.js (1)
1-94: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoffConsider extracting a shared year-filter helper
assets/js/events-year-filter.js,assets/js/news-year-filter.js,assets/js/publications-year-filter.js— the events/news scripts are effectively the same, and publications only adds nav syncing. A small factory for selectors/ready-class hooks would reduce the duplicate maintenance surface.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/js/events-year-filter.js` around lines 1 - 94, The year-filter logic in events-year-filter.js is duplicated across the events/news/publications filters, so extract the shared behavior into a reusable helper or factory and have the existing scripts call it with their specific selectors and ready-class hooks. Preserve the current behavior in the events script by wiring its existing root/select/year-section setup through the shared helper, and keep publications’ extra nav syncing as an optional callback or extension point.assets/css/home-section-head.css (1)
73-79: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winStylelint:
currentColorkeyword casing.Two occurrences of
-webkit-text-fill-color: currentColor;should be lowercase per the configuredvalue-keyword-caserule.🧹 Proposed fix
-webkit-background-clip: unset; background-clip: unset; - -webkit-text-fill-color: currentColor; + -webkit-text-fill-color: currentcolor; }(apply to both flagged blocks)
Also applies to: 113-120
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/home-section-head.css` around lines 73 - 79, The stylesheet has `-webkit-text-fill-color: currentColor` using mixed-case keyword values that violate the configured `value-keyword-case` rule. Update both affected CSS blocks in `home-section-head.css` to use the lowercase keyword form, and verify the same change is applied in the other flagged block referenced by the comment.Source: Linters/SAST tools
assets/css/ecosystem-home.css (1)
3-8: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueStylelint: missing blank line before regular declaration after custom property.
🧹 Proposed fix
.ecosystem-home { --ecosystem-max: min(100%, 96rem); + max-width: var(--ecosystem-max); margin: 0 auto; padding: var(--home-section-pad) var(--home-pad-x, clamp(1.25rem, 4vw, 2.5rem)); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/ecosystem-home.css` around lines 3 - 8, In the .ecosystem-home rule, add the required blank line separation between the custom property declaration and the regular declarations to satisfy the stylelint rule. Keep the custom property --ecosystem-max grouped first, then insert a blank line before max-width, margin, and padding.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@assets/css/community-events-home.css`:
- Around line 174-195: The focus state for community event cards is too subtle
when motion is reduced because `.community-events-home__card-link:hover`,
`.community-events-home__card-link:focus-visible`, and the `--static` variant
rely on `transform`/low-contrast shadow plus `outline: none`. Update the
`community-events-home__card-link` focus styles to add a clear dedicated focus
ring for keyboard users (especially under reduced-motion), similar in strength
to `.ecosystem-home__card:focus-visible`, and keep the reduced-motion/static
variant from depending on movement for visibility.
In `@assets/css/ecosystem-home.css`:
- Around line 19-21: The ecosystem header width is defined twice for the same
selector, creating a cascade conflict between the styles in ecosystem-home.css
and the existing home-section-head.css rule. Update the ecosystem header styling
to use a single source of truth by either moving the ecosystem-specific width
into a block-level custom property on the home-page__block--ecosystem styles or
removing the duplicate .home-page .home-page__block--ecosystem
.ecosystem-home__header-main override if the shared 46rem width should remain.
Refer to .home-page .home-page__block--ecosystem and
.ecosystem-home__header-main when making the change.
In `@assets/css/hero-saas.css`:
- Around line 181-197: The .hero-home__title font sizing creates a breakpoint
dip because the base clamp() reaches a larger value just below 1200px than the
media-query override starts with. Adjust the `@media` (min-width: 1200px) rule for
.hero-home__title so its minimum size is at least the pre-breakpoint computed
size, or otherwise make the transition continuous, keeping the title size
monotonic across the 1200px threshold.
In `@layouts/partials/community-event-card.html`:
- Around line 74-77: The linked-card CTA in community-event-card.html is
hardcoding the text instead of using the caller-provided label. Update the
community event card markup so the whole-card link branch uses the same
read-more value as the rest of the component, reusing readMoreLabel (or the
equivalent existing label variable) alongside the
community-events-home__card-cta and community-events-home__card-cta-icon
elements. Keep the visible CTA text driven by the passed-in label so calendar
pages can localize/customize it consistently.
In `@layouts/partials/events-year-select.html`:
- Around line 5-6: The default year derivation in the events-year-select
template is indexing the fallback slice before confirming it has any entries.
Update the logic around $years and $defaultYear so the first element is only
accessed when the slice is non-empty, and otherwise leave the default unset or
use a safe fallback. Use the existing $years and $defaultYear variables in
layouts/partials/events-year-select.html to keep the fix localized.
In `@layouts/partials/hero.html`:
- Around line 26-33: The primary CTA in hero.html is currently gated only by
buttonText, so it can render with an empty href when buttonLink is missing.
Update the same conditional around the hero-home__btn markup to require both
fields, mirroring the secondary button guard, and keep the existing rel handling
inside that block.
---
Nitpick comments:
In `@assets/css/community-calendar.css`:
- Around line 322-332: The .events-past-card__title-link hover/focus-visible
styles remove the default outline and leave only a subtle color change, which
weakens keyboard focus visibility. Update the .events-past-card__title-link
rules so :focus-visible keeps or adds a clear visible focus indicator (such as
an outline or similar ring) while preserving the hover color change, and avoid
using outline: none unless it is replaced with an equally strong focus style.
- Around line 655-730: The `.openms-lib-btn` base styling is duplicated in
community-calendar and should be centralized with the shared primitive instead
of kept as page-specific CSS. Move the common sizing, typography, motion,
focus-ring, and reduced-motion rules from the `.community-calendar-layout
.openms-lib-btn` block into `openms-lib.css`, using the existing
`.openms-lib-btn` selector, and leave only community-calendar-specific overrides
(such as the primary/ghost variants) in this file.
In `@assets/css/ecosystem-home.css`:
- Around line 3-8: In the .ecosystem-home rule, add the required blank line
separation between the custom property declaration and the regular declarations
to satisfy the stylelint rule. Keep the custom property --ecosystem-max grouped
first, then insert a blank line before max-width, margin, and padding.
In `@assets/css/home-section-head.css`:
- Around line 73-79: The stylesheet has `-webkit-text-fill-color: currentColor`
using mixed-case keyword values that violate the configured `value-keyword-case`
rule. Update both affected CSS blocks in `home-section-head.css` to use the
lowercase keyword form, and verify the same change is applied in the other
flagged block referenced by the comment.
In `@assets/js/events-year-filter.js`:
- Around line 1-94: The year-filter logic in events-year-filter.js is duplicated
across the events/news/publications filters, so extract the shared behavior into
a reusable helper or factory and have the existing scripts call it with their
specific selectors and ready-class hooks. Preserve the current behavior in the
events script by wiring its existing root/select/year-section setup through the
shared helper, and keep publications’ extra nav syncing as an optional callback
or extension point.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2c9d5091-806b-4b79-91bd-e74ff3a6bfc4
⛔ Files ignored due to path filters (8)
static/images/hero/hero-brand-visual.svgis excluded by!**/*.svgstatic/images/hero/hero-spectrum-mark.svgis excluded by!**/*.svgstatic/images/logos/logo-compomics.pngis excluded by!**/*.pngstatic/images/logos/logo-fullseeomics.pngis excluded by!**/*.pngstatic/images/logos/logo-stockholm-university.pngis excluded by!**/*.pngstatic/images/logos/logo-university-cambridge.pngis excluded by!**/*.pngstatic/images/logos/logo-university-groningen.pngis excluded by!**/*.pngstatic/images/logos/logo-vib-ghent.pngis excluded by!**/*.png
📒 Files selected for processing (30)
assets/css/community-calendar.cssassets/css/community-events-home.cssassets/css/community-home.cssassets/css/contact-area.cssassets/css/ecosystem-home.cssassets/css/hero-saas.cssassets/css/home-metrics.cssassets/css/home-section-head.cssassets/css/home.cssassets/css/news-banner.cssassets/js/events-year-filter.jsassets/js/home-scroll-reveal.jsconfig.yamlcontent/en/calendar.mddocs/common-tasks/update-community-calendar.mdlayouts/index.htmllayouts/partials/community-calendar-main.htmllayouts/partials/community-event-card.htmllayouts/partials/community-event-entry.htmllayouts/partials/community-events-home.htmllayouts/partials/contact-area.htmllayouts/partials/ecosystem-home.htmllayouts/partials/events-year-select.htmllayouts/partials/hero-logo-diagram.htmllayouts/partials/hero-spectrum-bg.htmllayouts/partials/hero.htmllayouts/partials/home-metric-card.htmllayouts/partials/home-metrics.htmllayouts/partials/university-partners.htmllayouts/partials/webapps-project-card.html
✅ Files skipped from review due to trivial changes (2)
- content/en/calendar.md
- assets/css/community-home.css
🚧 Files skipped from review as they are similar to previous changes (5)
- assets/js/home-scroll-reveal.js
- assets/css/news-banner.css
- assets/css/contact-area.css
- config.yaml
- assets/css/home.css
| .community-events-home__card-link:hover, | ||
| .community-events-home__card-link:focus-visible { | ||
| border-color: color-mix(in srgb, var(--events-accent) 34%, var(--events-card-border)); | ||
| border-top-color: var(--events-accent); | ||
| background: linear-gradient( | ||
| 145deg, | ||
| var(--events-accent-soft) 0%, | ||
| var(--events-card-bg) 55% | ||
| ); | ||
| box-shadow: 0 0.65rem 1.65rem rgba(var(--openms-navy-rgb), 0.08); | ||
| transform: translateY(-3px); | ||
| outline: none; | ||
| } | ||
|
|
||
| .community-events-home__card-link--static:hover, | ||
| .community-events-home__card-link--static:focus-visible { | ||
| transform: none; | ||
| border-color: var(--events-card-border); | ||
| border-top-color: var(--events-accent); | ||
| box-shadow: 0 0.15rem 0.75rem rgba(var(--openms-navy-rgb), 0.05); | ||
| background: var(--events-card-bg); | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Focus indicator becomes too subtle once motion is reduced.
outline: none is paired mainly with transform: translateY(-3px) for focus prominence. With prefers-reduced-motion: reduce, the transform is removed but no dedicated focus ring replaces it — keyboard focus is left to a faint border-color blend and a low-alpha box-shadow, similar to the existing dedicated ring added for .ecosystem-home__card:focus-visible elsewhere in this layer.
♿ Proposed fix
.community-events-home__card-link:hover,
.community-events-home__card-link:focus-visible {
border-color: color-mix(in srgb, var(--events-accent) 34%, var(--events-card-border));
border-top-color: var(--events-accent);
background: linear-gradient(
145deg,
var(--events-accent-soft) 0%,
var(--events-card-bg) 55%
);
box-shadow: 0 0.65rem 1.65rem rgba(var(--openms-navy-rgb), 0.08);
transform: translateY(-3px);
outline: none;
}
+
+.community-events-home__card-link:focus-visible {
+ box-shadow:
+ 0 0 0 2px rgba(var(--openms-blue-rgb), 0.35),
+ 0 0.65rem 1.65rem rgba(var(--openms-navy-rgb), 0.08);
+}Also applies to: 444-449
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/community-events-home.css` around lines 174 - 195, The focus state
for community event cards is too subtle when motion is reduced because
`.community-events-home__card-link:hover`,
`.community-events-home__card-link:focus-visible`, and the `--static` variant
rely on `transform`/low-contrast shadow plus `outline: none`. Update the
`community-events-home__card-link` focus styles to add a clear dedicated focus
ring for keyboard users (especially under reduced-motion), similar in strength
to `.ecosystem-home__card:focus-visible`, and keep the reduced-motion/static
variant from depending on movement for visibility.
| .home-page .home-page__block--ecosystem .ecosystem-home__header-main { | ||
| max-width: min(100%, 58rem); | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n "ecosystem-home__header-main" -C2
rg -n "ecosystem-home\.css|home-section-head\.css" -g '*.html' -g '*.toml' -g '*.yaml' -g '*.go'Repository: OpenMS/OpenMS-website
Length of output: 159
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## files\n'
git ls-files 'assets/css/*home*.css' 'assets/**/*home*' | sed -n '1,200p'
printf '\n## selector occurrences\n'
rg -n "ecosystem-home__header-main|home-section-head-max|max-width: min\\(100%, 58rem\\)|max-width: var\\(--home-section-head-max\\)" assets/css -C 3
printf '\n## stylesheet references\n'
rg -n "ecosystem-home\\.css|home-section-head\\.css" . -g '*.html' -g '*.toml' -g '*.yaml' -g '*.yml' -g '*.go' -g '*.ts' -g '*.js' -g '*.md' -C 2Repository: OpenMS/OpenMS-website
Length of output: 2298
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## file sizes\n'
wc -l assets/css/ecosystem-home.css assets/css/home-section-head.css
printf '\n## relevant slices\n'
sed -n '1,80p' assets/css/ecosystem-home.css
printf '\n---\n'
sed -n '1,80p' assets/css/home-section-head.cssRepository: OpenMS/OpenMS-website
Length of output: 4852
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## direct references\n'
rg -n "home-section-head\.css|ecosystem-home\.css" . -g '!**/.git/**' -C 2
printf '\n## linked stylesheets\n'
rg -n "<link[^>]+stylesheet|stylesheets?" layouts content data assets static . -g '!**/.git/**' -C 1Repository: OpenMS/OpenMS-website
Length of output: 181
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## candidate template files\n'
git ls-files 'layouts/**' 'content/**' 'data/**' 'config.*' 'hugo.*' | sed -n '1,200p'
printf '\n## css bundle/import references\n'
rg -n "home-section-head\.css|ecosystem-home\.css|home\.css|`@import`" layouts content data config.* hugo.* -C 2Repository: OpenMS/OpenMS-website
Length of output: 5820
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## css entrypoints and imports\n'
sed -n '1,220p' assets/css/home.css
printf '\n---\n'
rg -n "`@import`|home-section-head|ecosystem-home" assets/css -C 2Repository: OpenMS/OpenMS-website
Length of output: 19143
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## css partial\n'
sed -n '1,220p' layouts/partials/css.html
printf '\n## home page template references\n'
rg -n "css.html|home.css|ecosystem-home.css|home-section-head.css" layouts -C 2
printf '\n## asset pipeline hints\n'
rg -n "resources\\.Concat|toCSS|PostCSS|fingerprint|minify|resources\\.Get" assets layouts -C 2Repository: OpenMS/OpenMS-website
Length of output: 5842
Use a single source of truth for the ecosystem header width
assets/css/ecosystem-home.css repeats .home-page .home-page__block--ecosystem .ecosystem-home__header-main, which is already styled in assets/css/home-section-head.css and included via layouts/partials/css.html. The two max-width values now compete in the cascade; move the ecosystem-specific width to a block-level custom property or remove this override if 46rem is intended.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/ecosystem-home.css` around lines 19 - 21, The ecosystem header
width is defined twice for the same selector, creating a cascade conflict
between the styles in ecosystem-home.css and the existing home-section-head.css
rule. Update the ecosystem header styling to use a single source of truth by
either moving the ecosystem-specific width into a block-level custom property on
the home-page__block--ecosystem styles or removing the duplicate .home-page
.home-page__block--ecosystem .ecosystem-home__header-main override if the shared
46rem width should remain. Refer to .home-page .home-page__block--ecosystem and
.ecosystem-home__header-main when making the change.
| .hero-home__title { | ||
| margin: 0 0 1rem; | ||
| font-family: var(--openms-font-heading); | ||
| font-size: clamp(2rem, 5vw, 3.75rem); | ||
| font-weight: 800; | ||
| line-height: 1.08; | ||
| letter-spacing: -0.035em; | ||
| color: var(--openms-navy); | ||
| text-align: left; | ||
| text-wrap: balance; | ||
| } | ||
|
|
||
| @media (min-width: 1200px) { | ||
| .hero-home__title { | ||
| font-size: clamp(3.5rem, 4.5vw, 4.5rem); | ||
| } | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Font-size briefly shrinks at the 1200px breakpoint.
clamp(2rem, 5vw, 3.75rem) yields ~3.75rem just below 1200px, but the override clamp(3.5rem, 4.5vw, 4.5rem) floors at 3.5rem right at 1200px — a visible dip before it grows again past ~1244px.
📐 Proposed fix
`@media` (min-width: 1200px) {
.hero-home__title {
- font-size: clamp(3.5rem, 4.5vw, 4.5rem);
+ font-size: clamp(3.75rem, 4.5vw, 4.5rem);
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .hero-home__title { | |
| margin: 0 0 1rem; | |
| font-family: var(--openms-font-heading); | |
| font-size: clamp(2rem, 5vw, 3.75rem); | |
| font-weight: 800; | |
| line-height: 1.08; | |
| letter-spacing: -0.035em; | |
| color: var(--openms-navy); | |
| text-align: left; | |
| text-wrap: balance; | |
| } | |
| @media (min-width: 1200px) { | |
| .hero-home__title { | |
| font-size: clamp(3.5rem, 4.5vw, 4.5rem); | |
| } | |
| } | |
| .hero-home__title { | |
| margin: 0 0 1rem; | |
| font-family: var(--openms-font-heading); | |
| font-size: clamp(2rem, 5vw, 3.75rem); | |
| font-weight: 800; | |
| line-height: 1.08; | |
| letter-spacing: -0.035em; | |
| color: var(--openms-navy); | |
| text-align: left; | |
| text-wrap: balance; | |
| } | |
| `@media` (min-width: 1200px) { | |
| .hero-home__title { | |
| font-size: clamp(3.75rem, 4.5vw, 4.5rem); | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/hero-saas.css` around lines 181 - 197, The .hero-home__title font
sizing creates a breakpoint dip because the base clamp() reaches a larger value
just below 1200px than the media-query override starts with. Adjust the `@media`
(min-width: 1200px) rule for .hero-home__title so its minimum size is at least
the pre-breakpoint computed size, or otherwise make the transition continuous,
keeping the title size monotonic across the 1200px threshold.
| <span class="community-events-home__card-cta"> | ||
| View details | ||
| <span class="community-events-home__card-cta-icon" aria-hidden="true">→</span> | ||
| </span> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Use the caller-provided read-more label here too.
This branch hardcodes View details, so readMoreLabel is ignored whenever the whole card is linked. That breaks the calendar page’s ability to customize or localize the CTA.
♻️ Proposed fix
- View details
+ {{ $readMore }}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <span class="community-events-home__card-cta"> | |
| View details | |
| <span class="community-events-home__card-cta-icon" aria-hidden="true">→</span> | |
| </span> | |
| <span class="community-events-home__card-cta"> | |
| {{ $readMore }} | |
| <span class="community-events-home__card-cta-icon" aria-hidden="true">→</span> | |
| </span> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@layouts/partials/community-event-card.html` around lines 74 - 77, The
linked-card CTA in community-event-card.html is hardcoding the text instead of
using the caller-provided label. Update the community event card markup so the
whole-card link branch uses the same read-more value as the rest of the
component, reusing readMoreLabel (or the equivalent existing label variable)
alongside the community-events-home__card-cta and
community-events-home__card-cta-icon elements. Keep the visible CTA text driven
by the passed-in label so calendar pages can localize/customize it consistently.
| {{- $years := .years | default (slice) -}} | ||
| {{- $defaultYear := .defaultYear | default (index $years 0) -}} |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
Avoid indexing the fallback year before checking the list.
index $years 0 will fail when .years is empty, which breaks template rendering for pages with no event years. Guard the length first or only derive the default when the slice is non-empty.
Suggested fix
-{{- $years := .years | default (slice) -}}
-{{- $defaultYear := .defaultYear | default (index $years 0) -}}
+{{- $years := .years | default (slice) -}}
+{{- $defaultYear := .defaultYear -}}
+{{- if and (not $defaultYear) (gt (len $years) 0) -}}
+ {{- $defaultYear = index $years 0 -}}
+{{- end -}}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {{- $years := .years | default (slice) -}} | |
| {{- $defaultYear := .defaultYear | default (index $years 0) -}} | |
| {{- $years := .years | default (slice) -}} | |
| {{- $defaultYear := .defaultYear -}} | |
| {{- if and (not $defaultYear) (gt (len $years) 0) -}} | |
| {{- $defaultYear = index $years 0 -}} | |
| {{- end -}} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@layouts/partials/events-year-select.html` around lines 5 - 6, The default
year derivation in the events-year-select template is indexing the fallback
slice before confirming it has any entries. Update the logic around $years and
$defaultYear so the first element is only accessed when the slice is non-empty,
and otherwise leave the default unset or use a safe fallback. Use the existing
$years and $defaultYear variables in layouts/partials/events-year-select.html to
keep the fix localized.
| {{- if $buttonText }} | ||
| <a | ||
| class="hero-home__btn hero-home__btn--primary openms-btn-primary" | ||
| href="{{ $buttonLink }}" | ||
| {{- if in $buttonLink "://" }} | ||
| rel="noopener noreferrer" | ||
| {{- end }} | ||
| >{{ $buttonText }}</a> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Gate the primary CTA on both text and URL.
The primary button renders whenever buttonText exists, even if buttonLink is unset, which leaves an empty href and a dead CTA. Mirror the secondary-button guard here so the link only renders when both fields are present.
Suggested fix
- {{- if $buttonText }}
+ {{- if and $buttonText $buttonLink }}
<a
class="hero-home__btn hero-home__btn--primary openms-btn-primary"
href="{{ $buttonLink }}"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {{- if $buttonText }} | |
| <a | |
| class="hero-home__btn hero-home__btn--primary openms-btn-primary" | |
| href="{{ $buttonLink }}" | |
| {{- if in $buttonLink "://" }} | |
| rel="noopener noreferrer" | |
| {{- end }} | |
| >{{ $buttonText }}</a> | |
| {{- if and $buttonText $buttonLink }} | |
| <a | |
| class="hero-home__btn hero-home__btn--primary openms-btn-primary" | |
| href="{{ $buttonLink }}" | |
| {{- if in $buttonLink "://" }} | |
| rel="noopener noreferrer" | |
| {{- end }} | |
| >{{ $buttonText }}</a> |
🧰 Tools
🪛 HTMLHint (1.9.2)
[error] 27-27: Special characters must be escaped : [ < ].
(spec-char-escape)
[error] 33-33: Special characters must be escaped : [ > ].
(spec-char-escape)
[error] 33-33: Tag must be paired, no start tag: [ ]
(tag-pair)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@layouts/partials/hero.html` around lines 26 - 33, The primary CTA in
hero.html is currently gated only by buttonText, so it can render with an empty
href when buttonLink is missing. Update the same conditional around the
hero-home__btn markup to require both fields, mirroring the secondary button
guard, and keep the existing rel handling inside that block.
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
layouts/partials/hero.html (1)
30-38: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winPrimary CTA still renders with empty
hrefwhenbuttonLinkis unset.This was flagged in a previous review and remains unresolved: the gate is
{{- if $buttonText }}only, so ifbuttontextis configured withoutbuttonlink, the anchor renders withhref=""(a dead/self-referencing link). The secondary CTA below correctly guards on both fields ({{- if and $secondaryText $secondaryLink }}).Proposed fix
- {{- if $buttonText }} + {{- if and $buttonText $buttonLink }} <a class="hero-home__btn hero-home__btn--primary openms-btn-primary" href="{{ $buttonLink }}"🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@layouts/partials/hero.html` around lines 30 - 38, The primary CTA in hero.html is still gated only by $buttonText, which allows an anchor with an empty href when $buttonLink is missing. Update the hero template block around the primary button so it renders only when both $buttonText and $buttonLink are set, matching the secondary CTA guard pattern and keeping the href from being empty.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@assets/css/community-events-news-home.css`:
- Around line 66-70: The focus styles on .community-news-events__view-all and
.news-home__card-link remove the outline on :focus-visible without providing a
replacement ring, leaving keyboard users with only a color change. Update the
focus-visible rules for these selectors to keep a clear visible focus indicator
by replacing outline: none with an equivalent accessible indicator such as an
outline or box-shadow while preserving the hover/focus color change.
In `@assets/css/home.css`:
- Around line 32-46: The home-page__hero rule mixes custom properties with
standard declarations without the required empty line, which triggers
stylelint’s declaration-empty-line-before check. Update the .home-page__hero
block so the first regular declaration (margin) is separated from the
custom-property definitions by a blank line, keeping the rest of the rule
unchanged.
In `@assets/css/styles_override.css`:
- Around line 170-182: In the navbar dropdown rule inside the `@media` block, the
regular declaration immediately follows the custom-property declaration and
triggers the same declaration-empty-line-before stylelint violation; update the
.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown and
`#navbar-clone.navbar.is-fresh` .navbar-item.has-dropdown .navbar-dropdown block
so the first standard property after --openms-navbar-dropdown-width is separated
by a blank line, matching the existing style convention used elsewhere.
---
Duplicate comments:
In `@layouts/partials/hero.html`:
- Around line 30-38: The primary CTA in hero.html is still gated only by
$buttonText, which allows an anchor with an empty href when $buttonLink is
missing. Update the hero template block around the primary button so it renders
only when both $buttonText and $buttonLink are set, matching the secondary CTA
guard pattern and keeping the href from being empty.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2de32b78-ffc9-4ed8-a2aa-50d3fa4ac72c
📒 Files selected for processing (12)
assets/css/brand-palette.cssassets/css/community-events-news-home.cssassets/css/hero-saas.cssassets/css/home.cssassets/css/navbar-responsive.cssassets/css/styles_override.cssconfig.yamllayouts/index.htmllayouts/partials/community-events-home.htmllayouts/partials/hero-logo-diagram.htmllayouts/partials/hero.htmllayouts/partials/news-home.html
🚧 Files skipped from review as they are similar to previous changes (3)
- assets/css/brand-palette.css
- assets/css/navbar-responsive.css
- config.yaml
| .community-news-events__view-all:hover, | ||
| .community-news-events__view-all:focus-visible { | ||
| color: var(--openms-blue-secondary); | ||
| outline: none; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Don't strip focus outline on :focus-visible without a replacement indicator.
Both .community-news-events__view-all and .news-home__card-link set outline: none on :focus-visible, relying only on a color change for feedback. Keyboard users lose a clear focus indicator — color alone is a weak substitute for an outline/box-shadow ring.
♿ Proposed fix
.community-news-events__view-all:hover,
.community-news-events__view-all:focus-visible {
color: var(--openms-blue-secondary);
- outline: none;
+ outline: 2px solid var(--openms-blue);
+ outline-offset: 2px;
} .news-home__card-link:hover,
.news-home__card-link:focus-visible {
- outline: none;
+ outline: 2px solid var(--openms-blue);
+ outline-offset: 2px;
}Also applies to: 108-111
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/community-events-news-home.css` around lines 66 - 70, The focus
styles on .community-news-events__view-all and .news-home__card-link remove the
outline on :focus-visible without providing a replacement ring, leaving keyboard
users with only a color change. Update the focus-visible rules for these
selectors to keep a clear visible focus indicator by replacing outline: none
with an equivalent accessible indicator such as an outline or box-shadow while
preserving the hover/focus color change.
| .home-page__hero { | ||
| --hero-space-sm: clamp(0.75rem, 1.5vh, 1rem); | ||
| --hero-space-md: clamp(1.15rem, 2.2vh, 1.65rem); | ||
| --hero-space-lg: clamp(2rem, 4.5vh, 3.25rem); | ||
| --hero-col-gap: clamp(2rem, 5vw, 4.5rem); | ||
| --hero-diagram-max: clamp(20rem, 44vw, 40rem); | ||
| --hero-diagram-min-h: clamp(11rem, 24vw, 16rem); | ||
| --hero-diagram-max-h: min(48vh, 24rem); | ||
| --hero-diagram-inset-right: clamp(1.25rem, 3.5vw, 2.75rem); | ||
| margin: 0; | ||
| padding: 0; | ||
| position: relative; | ||
| z-index: 3; | ||
| background: var(--openms-chrome-bg); | ||
| } |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add blank line before regular declaration after custom properties (stylelint).
Stylelint's declaration-empty-line-before flags line 41 (margin: 0;) immediately following the custom-property block.
Proposed fix
--hero-diagram-inset-right: clamp(1.25rem, 3.5vw, 2.75rem);
+
margin: 0;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .home-page__hero { | |
| --hero-space-sm: clamp(0.75rem, 1.5vh, 1rem); | |
| --hero-space-md: clamp(1.15rem, 2.2vh, 1.65rem); | |
| --hero-space-lg: clamp(2rem, 4.5vh, 3.25rem); | |
| --hero-col-gap: clamp(2rem, 5vw, 4.5rem); | |
| --hero-diagram-max: clamp(20rem, 44vw, 40rem); | |
| --hero-diagram-min-h: clamp(11rem, 24vw, 16rem); | |
| --hero-diagram-max-h: min(48vh, 24rem); | |
| --hero-diagram-inset-right: clamp(1.25rem, 3.5vw, 2.75rem); | |
| margin: 0; | |
| padding: 0; | |
| position: relative; | |
| z-index: 3; | |
| background: var(--openms-chrome-bg); | |
| } | |
| .home-page__hero { | |
| --hero-space-sm: clamp(0.75rem, 1.5vh, 1rem); | |
| --hero-space-md: clamp(1.15rem, 2.2vh, 1.65rem); | |
| --hero-space-lg: clamp(2rem, 4.5vh, 3.25rem); | |
| --hero-col-gap: clamp(2rem, 5vw, 4.5rem); | |
| --hero-diagram-max: clamp(20rem, 44vw, 40rem); | |
| --hero-diagram-min-h: clamp(11rem, 24vw, 16rem); | |
| --hero-diagram-max-h: min(48vh, 24rem); | |
| --hero-diagram-inset-right: clamp(1.25rem, 3.5vw, 2.75rem); | |
| margin: 0; | |
| padding: 0; | |
| position: relative; | |
| z-index: 3; | |
| background: var(--openms-chrome-bg); | |
| } |
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 41-41: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/home.css` around lines 32 - 46, The home-page__hero rule mixes
custom properties with standard declarations without the required empty line,
which triggers stylelint’s declaration-empty-line-before check. Update the
.home-page__hero block so the first regular declaration (margin) is separated
from the custom-property definitions by a blank line, keeping the rest of the
rule unchanged.
Source: Linters/SAST tools
| @media (min-width: 1280px) { | ||
| .navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown, | ||
| #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown { | ||
| --openms-navbar-dropdown-width: 18.5rem; | ||
| width: var(--openms-navbar-dropdown-width); | ||
| min-width: var(--openms-navbar-dropdown-width); | ||
| max-width: var(--openms-navbar-dropdown-width); | ||
| box-sizing: border-box; | ||
| margin-top: 0; | ||
| padding-top: 0.45rem; | ||
| padding-bottom: 0.35rem; | ||
| overflow: hidden; | ||
| } |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add blank line before regular declaration after custom property (stylelint).
Same declaration-empty-line-before violation as flagged elsewhere — line 174 (width: var(--openms-navbar-dropdown-width);) immediately follows the custom-property declaration.
Proposed fix
--openms-navbar-dropdown-width: 18.5rem;
+
width: var(--openms-navbar-dropdown-width);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @media (min-width: 1280px) { | |
| .navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown, | |
| #navbar-clone.navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown { | |
| --openms-navbar-dropdown-width: 18.5rem; | |
| width: var(--openms-navbar-dropdown-width); | |
| min-width: var(--openms-navbar-dropdown-width); | |
| max-width: var(--openms-navbar-dropdown-width); | |
| box-sizing: border-box; | |
| margin-top: 0; | |
| padding-top: 0.45rem; | |
| padding-bottom: 0.35rem; | |
| overflow: hidden; | |
| } | |
| `@media` (min-width: 1280px) { | |
| .navbar.is-fresh .navbar-item.has-dropdown .navbar-dropdown, | |
| `#navbar-clone.navbar.is-fresh` .navbar-item.has-dropdown .navbar-dropdown { | |
| --openms-navbar-dropdown-width: 18.5rem; | |
| width: var(--openms-navbar-dropdown-width); | |
| min-width: var(--openms-navbar-dropdown-width); | |
| max-width: var(--openms-navbar-dropdown-width); | |
| box-sizing: border-box; | |
| margin-top: 0; | |
| padding-top: 0.45rem; | |
| padding-bottom: 0.35rem; | |
| overflow: hidden; | |
| } |
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 174-174: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/styles_override.css` around lines 170 - 182, In the navbar
dropdown rule inside the `@media` block, the regular declaration immediately
follows the custom-property declaration and triggers the same
declaration-empty-line-before stylelint violation; update the .navbar.is-fresh
.navbar-item.has-dropdown .navbar-dropdown and `#navbar-clone.navbar.is-fresh`
.navbar-item.has-dropdown .navbar-dropdown block so the first standard property
after --openms-navbar-dropdown-width is separated by a blank line, matching the
existing style convention used elsewhere.
Source: Linters/SAST tools
1 participant
Summary by CodeRabbit
New Features
Documentation
Style