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. |
|
Warning Review limit reached
More reviews will be available in 44 minutes and 46 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe PR updates website guidance, content structure, shared styling systems, and client-side behaviors across the site, while adding new Hugo pages, templates, and data to support the refreshed sections. ChangesSite foundations and content
Shared styles and page layouts
Interactive scripts and data flows
Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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
| for (var d = 1; d <= daysInMonth; d++) { | ||
| var day = new Date(year, month, d); | ||
| var key = dateKey(day); | ||
| var dayEvents = eventsForDay(day); | ||
| var btn = document.createElement("button"); | ||
| btn.type = "button"; | ||
| btn.className = "community-calendar__day"; | ||
| btn.setAttribute("role", "gridcell"); | ||
| btn.dataset.date = key; | ||
| btn.setAttribute( | ||
| "aria-label", | ||
| day.toLocaleDateString(undefined, { | ||
| weekday: "long", | ||
| month: "long", | ||
| day: "numeric", | ||
| year: "numeric", | ||
| }) + (dayEvents.length ? ", " + dayEvents.length + " event(s)" : "") | ||
| ); | ||
|
|
||
| if (key === todayKey) btn.classList.add("is-today"); | ||
| if (dayEvents.length) btn.classList.add("has-events"); | ||
| if (selected === key) btn.classList.add("is-selected"); | ||
|
|
||
| var num = document.createElement("span"); | ||
| num.className = "community-calendar__day-num"; | ||
| num.textContent = String(d); | ||
| btn.appendChild(num); | ||
|
|
||
| if (dayEvents.length) { | ||
| var dots = document.createElement("span"); | ||
| dots.className = "community-calendar__day-dots"; | ||
| dots.setAttribute("aria-hidden", "true"); | ||
| dayEvents.slice(0, 3).forEach(function () { | ||
| var dot = document.createElement("span"); | ||
| dot.className = "community-calendar__day-dot"; | ||
| dots.appendChild(dot); | ||
| }); | ||
| btn.appendChild(dots); | ||
| } | ||
|
|
||
| btn.addEventListener("click", function () { | ||
| selected = key; | ||
| if (hintEl) hintEl.hidden = true; | ||
| renderList(dayEvents, "No events on this day."); | ||
| renderMonth(); | ||
| }); | ||
|
|
||
| gridEl.appendChild(btn); | ||
| } |
There was a problem hiding this comment.
Critical closure bug: All day buttons reference the last day's data.
The for loop uses var to declare key and dayEvents (lines 185-186). Since var is function-scoped (not block-scoped), all iterations share the same variables. When the click handler on line 223 executes later, it captures references to these shared variables, which will hold the values from the final loop iteration. This means every day button will display the same events (those of the last day) when clicked.
🐛 Fix by changing `var` to `const`
for (var d = 1; d <= daysInMonth; d++) {
- var day = new Date(year, month, d);
- var key = dateKey(day);
- var dayEvents = eventsForDay(day);
- var btn = document.createElement("button");
+ const day = new Date(year, month, d);
+ const key = dateKey(day);
+ const dayEvents = eventsForDay(day);
+ const btn = document.createElement("button");Alternatively, wrap the button creation and listener attachment in an IIFE to create a new scope per iteration.
📝 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.
| for (var d = 1; d <= daysInMonth; d++) { | |
| var day = new Date(year, month, d); | |
| var key = dateKey(day); | |
| var dayEvents = eventsForDay(day); | |
| var btn = document.createElement("button"); | |
| btn.type = "button"; | |
| btn.className = "community-calendar__day"; | |
| btn.setAttribute("role", "gridcell"); | |
| btn.dataset.date = key; | |
| btn.setAttribute( | |
| "aria-label", | |
| day.toLocaleDateString(undefined, { | |
| weekday: "long", | |
| month: "long", | |
| day: "numeric", | |
| year: "numeric", | |
| }) + (dayEvents.length ? ", " + dayEvents.length + " event(s)" : "") | |
| ); | |
| if (key === todayKey) btn.classList.add("is-today"); | |
| if (dayEvents.length) btn.classList.add("has-events"); | |
| if (selected === key) btn.classList.add("is-selected"); | |
| var num = document.createElement("span"); | |
| num.className = "community-calendar__day-num"; | |
| num.textContent = String(d); | |
| btn.appendChild(num); | |
| if (dayEvents.length) { | |
| var dots = document.createElement("span"); | |
| dots.className = "community-calendar__day-dots"; | |
| dots.setAttribute("aria-hidden", "true"); | |
| dayEvents.slice(0, 3).forEach(function () { | |
| var dot = document.createElement("span"); | |
| dot.className = "community-calendar__day-dot"; | |
| dots.appendChild(dot); | |
| }); | |
| btn.appendChild(dots); | |
| } | |
| btn.addEventListener("click", function () { | |
| selected = key; | |
| if (hintEl) hintEl.hidden = true; | |
| renderList(dayEvents, "No events on this day."); | |
| renderMonth(); | |
| }); | |
| gridEl.appendChild(btn); | |
| } | |
| for (var d = 1; d <= daysInMonth; d++) { | |
| const day = new Date(year, month, d); | |
| const key = dateKey(day); | |
| const dayEvents = eventsForDay(day); | |
| const btn = document.createElement("button"); | |
| btn.type = "button"; | |
| btn.className = "community-calendar__day"; | |
| btn.setAttribute("role", "gridcell"); | |
| btn.dataset.date = key; | |
| btn.setAttribute( | |
| "aria-label", | |
| day.toLocaleDateString(undefined, { | |
| weekday: "long", | |
| month: "long", | |
| day: "numeric", | |
| year: "numeric", | |
| }) + (dayEvents.length ? ", " + dayEvents.length + " event(s)" : "") | |
| ); | |
| if (key === todayKey) btn.classList.add("is-today"); | |
| if (dayEvents.length) btn.classList.add("has-events"); | |
| if (selected === key) btn.classList.add("is-selected"); | |
| var num = document.createElement("span"); | |
| num.className = "community-calendar__day-num"; | |
| num.textContent = String(d); | |
| btn.appendChild(num); | |
| if (dayEvents.length) { | |
| var dots = document.createElement("span"); | |
| dots.className = "community-calendar__day-dots"; | |
| dots.setAttribute("aria-hidden", "true"); | |
| dayEvents.slice(0, 3).forEach(function () { | |
| var dot = document.createElement("span"); | |
| dot.className = "community-calendar__day-dot"; | |
| dots.appendChild(dot); | |
| }); | |
| btn.appendChild(dots); | |
| } | |
| btn.addEventListener("click", function () { | |
| selected = key; | |
| if (hintEl) hintEl.hidden = true; | |
| renderList(dayEvents, "No events on this day."); | |
| renderMonth(); | |
| }); | |
| gridEl.appendChild(btn); | |
| } |
🤖 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 183 - 231, The click handler is
closing over function-scoped vars so every button ends up using the last loop
values; update the loop to use block-scoped bindings (replace var with let/const
for day, key, dayEvents, btn, num, dots, dot as needed) inside the for loop that
creates buttons (the code that calls dateKey(), eventsForDay(), creates btn and
attaches the click listener which calls renderList() and renderMonth()), or
alternatively wrap the button creation and listener attachment in an IIFE to
capture per-iteration values so each button’s click uses its own key and
dayEvents.
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).
| {{- $endStr := .end | default .start -}} | ||
| {{- $end := time $endStr -}} | ||
| {{- if not ($end.Before now) }} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python -m pip install --quiet pyyaml
python - <<'PY'
from pathlib import Path
import datetime as dt
import sys
import yaml
path = Path("data/community_events.yaml")
data = yaml.safe_load(path.read_text()) or {}
events = data.get("events") or []
bad = []
for idx, event in enumerate(events, start=1):
start = event.get("start")
end = event.get("end", start)
if not start:
bad.append((idx, "start", start, "missing"))
for field, raw in (("start", start), ("end", end)):
if raw in (None, ""):
continue
value = str(raw).replace("Z", "+00:00")
try:
dt.datetime.fromisoformat(value)
except Exception:
bad.append((idx, field, raw, "unparseable"))
if bad:
print("Invalid calendar date fields:")
for row in bad:
print(f" event #{row[0]}: {row[1]}={row[2]!r} ({row[3]})")
sys.exit(1)
print(f"OK: validated {len(events)} events in {path}")
PY
rg -n "community_events|start|end|date" docs/common-tasks/update-community-calendar.mdRepository: OpenMS/OpenMS-website
Length of output: 854
🏁 Script executed:
cat -n layouts/partials/community-events-home.html | head -80Repository: OpenMS/OpenMS-website
Length of output: 4832
🏁 Script executed:
# Check for any schema validation files
find . -type f \( -name "*schema*" -o -name "*validate*" \) | head -20Repository: OpenMS/OpenMS-website
Length of output: 47
🏁 Script executed:
# Check for other templates that might handle error cases or use time function
rg -l "time \." layouts/ | head -10Repository: OpenMS/OpenMS-website
Length of output: 109
🏁 Script executed:
# Look at the maintainer guide more thoroughly to understand the contract
cat -n docs/common-tasks/update-community-calendar.mdRepository: OpenMS/OpenMS-website
Length of output: 2010
Add error handling or validation for date fields before direct time parsing.
Lines 14, 54, and 75 call time directly on start/end fields without error handling. Although the current 9 events in data/community_events.yaml are valid and the maintainer guide documents the required YYYY-MM-DD format, the template will fail cryptically during site generation if a future maintainer accidentally provides a malformed date. Consider either:
- Adding a YAML schema validator (pre-commit or CI check) to enforce format
- Using template guards like
{{ if $end := time .end }}...{{ end }}to handle parse failures gracefully - Adding a validation script to the maintainer workflow (e.g., in
make serveor CI)
🤖 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-events-home.html` around lines 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.
1 participant
Summary by CodeRabbit