Simplified home page (Static) - #274
Conversation
…implified.css - Remove inline <style> blocks from page.html - Create public/css/home-simplified.css with all styles - Align mobile view with design file (440px): - Remove .ca-top-r wrapper, pill is direct child of .ca-top - Remove <span class=lbl> from pill - Add <br> in cue text (hidden on desktop, visible on mobile via CSS) - Swap footer link order to match design (email first, LinkedIn second) - Fix .ca-pill .dot: add flex: 0 0 auto - Fix svg.sicon: add flex: 0 0 auto at base level - Fix .ca-search input: add min-width: 0 - Fix .ca-foot mobile: align-items stretch, justify-content flex-start - Fix .ca-foot a: add display inline-flex, align-items center - Fix fadeUp: translateY 18px -> 14px - Fix .ca-row .ra: add display inline-block so rotate transform works correctly
|
Warning Review limit reached
Next review available in: 42 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?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 reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. 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, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
WalkthroughAdds and registers a new Apostrophe “Home - Simplified” page type. The page includes a static landing-page template with header, hero content, search form, navigation links, and footer. New CSS provides Poppins fonts, responsive layout, animations, gradients, and interactive states. Frontend JavaScript intercepts search-form submission and navigates to 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
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: 9
🤖 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 `@website/modules/home-simplified/public/css/home-simplified.css`:
- Around line 373-382: Rename the fadeUp keyframe to kebab-case and update every
animation declaration referencing it, preserving the existing fade and translate
behavior.
- Line 2: Remove the single quotes around the Poppins font-family name in every
`@font-face` declaration and the body rule in
website/modules/home-simplified/public/css/home-simplified.css, and in every
`@font-face` declaration in website/public/fonts/fonts.css. Preserve the existing
font-family values and declarations otherwise.
- Around line 261-289: The `.ca-search input` rule removes the native focus
outline without providing a sufficiently visible keyboard indicator. Update
`.ca-search:focus-within` to add a clear focus ring or border treatment while
preserving its existing arrow color change.
In `@website/modules/home-simplified/views/page.html`:
- Line 30: Add an explicit accessible label for the search input in the page
markup, associate it with a unique input id, and preserve the existing
placeholder and search behavior.
- Line 37: Update the Case Studies anchor in the page markup so its href points
to the registered /cases route instead of /careers, while preserving the
existing label and link styling.
- Line 43: Update the Privacy Policy anchor in the footer div so it uses the
actual privacy-policy route; if no destination exists, remove the link while
preserving the copyright element.
- Around line 28-32: Update the search form identified by id="search-form" so
the visible arrow control uses a button element with type="submit" instead of
the current span.sgo, preserving the arrow’s existing appearance and form
layout.
In `@website/public/fonts/fonts.css`:
- Around line 97-102: Update the Poppins 700 italic `@font-face` declaration to
reference the distinct asset UUID for the true 700 italic font instead of the
UUID used by the 400 italic face, while preserving font-weight: 700, font-style:
italic, and the existing loading behavior.
In `@website/public/js/modules/home-simplified/home-simplified.js`:
- Around line 1-9: Keep a single canonical implementation of the home-page
script by confirming the asset pipeline and either removing the duplicate or
configuring one copy as generated. Retain or load the canonical runtime
implementation in
website/public/js/modules/home-simplified/home-simplified.js#L1-L9; update
website/modules/home-simplified/public/js/home-simplified.js#L1-L9 to remove the
duplicate or explicitly make it generated, with no manual parallel maintenance.
🪄 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: ASSERTIVE
Plan: Pro Plus
Run ID: 8e08f9ff-1615-49e5-a1ed-bd0ccb17959c
⛔ Files ignored due to path filters (5)
website/modules/home-simplified/public/fonts/Poppins-500.ttfis excluded by!**/*.ttfwebsite/modules/home-simplified/public/fonts/Poppins-600.ttfis excluded by!**/*.ttfwebsite/modules/home-simplified/public/fonts/Poppins-700.ttfis excluded by!**/*.ttfwebsite/modules/home-simplified/public/fonts/Poppins-800.ttfis excluded by!**/*.ttfwebsite/modules/home-simplified/public/fonts/Poppins-900.ttfis excluded by!**/*.ttf
📒 Files selected for processing (8)
website/app.jswebsite/modules/@apostrophecms/page/index.jswebsite/modules/home-simplified/index.jswebsite/modules/home-simplified/public/css/home-simplified.csswebsite/modules/home-simplified/public/js/home-simplified.jswebsite/modules/home-simplified/views/page.htmlwebsite/public/fonts/fonts.csswebsite/public/js/modules/home-simplified/home-simplified.js
| <form class="ca-search" id="search-form"> | ||
| <svg class="sicon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.2" y2="16.2"></line></svg> | ||
| <input type="text" placeholder="Find case studies, testimonials, and more"> | ||
| <span class="sgo">→</span> | ||
| </form> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Make the search arrow a real submit control.
The visible arrow is a <span>, so clicking or keyboard-activating it cannot submit the form. Replace it with a <button type="submit">.
Proposed fix
- <span class="sgo">→</span>
+ <button type="submit" class="sgo" aria-label="Search">→</button>📝 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.
| <form class="ca-search" id="search-form"> | |
| <svg class="sicon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.2" y2="16.2"></line></svg> | |
| <input type="text" placeholder="Find case studies, testimonials, and more"> | |
| <span class="sgo">→</span> | |
| </form> | |
| <form class="ca-search" id="search-form"> | |
| <svg class="sicon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.2" y2="16.2"></line></svg> | |
| <input type="text" placeholder="Find case studies, testimonials, and more"> | |
| <button type="submit" class="sgo" aria-label="Search">→</button> | |
| </form> |
🧰 Tools
🪛 HTMLHint (1.9.2)
[warning] 30-30: No matching [ label ] tag found.
(input-requires-label)
🤖 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 `@website/modules/home-simplified/views/page.html` around lines 28 - 32, Update
the search form identified by id="search-form" so the visible arrow control uses
a button element with type="submit" instead of the current span.sgo, preserving
the arrow’s existing appearance and form layout.
|
|
||
| <div class="ca-foot"> | ||
| <div class="l"><a href="mailto:letschat@speedandfunction.com">letschat@speedandfunction.com</a><a href="https://www.linkedin.com/company/speed-and-function/posts/">LinkedIn</a></div> | ||
| <div class="r"><a href="#">Privacy Policy</a><a href="#">© 2026 S&F</a></div> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Replace the placeholder Privacy Policy link.
href="#" does not open a privacy policy and only jumps the page to the top. Use the actual policy route or remove the link until the destination exists.
🤖 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 `@website/modules/home-simplified/views/page.html` at line 43, Update the
Privacy Policy anchor in the footer div so it uses the actual privacy-policy
route; if no destination exists, remove the link while preserving the copyright
element.
| @font-face { | ||
| font-family: 'Poppins'; | ||
| src: url("f05b968c-c6f2-4492-8813-2970183ba46f.ttf") format('truetype'); | ||
| font-weight: 700; | ||
| font-style: italic; | ||
| font-display: swap; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
python -m pip install --quiet fonttools
python - <<'PY'
from fontTools.ttLib import TTFont
font = TTFont("website/public/fonts/f05b968c-c6f2-4492-8813-2970183ba46f.ttf")
print("usWeightClass:", font["OS/2"].usWeightClass)
PYRepository: speedandfunction/website
Length of output: 767
🏁 Script executed:
#!/bin/bash
set -e
printf 'Tracked font files:\n'
git ls-files | grep -E '(^|/)fonts/|\.ttf$|\.woff2?$' | sed -n '1,120p'
printf '\nfonts.css excerpt:\n'
if [ -f website/public/fonts/fonts.css ]; then
sed -n '45,112p' website/public/fonts/fonts.css | cat -n
fi
printf '\nRelevant references to Poppins and UUID:\n'
rg -n "Poppins|f05b968c-c6f2-4492-8813-2970183ba46f|font-weight|font-style" website/public 2>/dev/null | sed -n '1,160p'Repository: speedandfunction/website
Length of output: 7460
Point 700 italic at its actual font face.
This reuses the same UUID as the 400 italic face, so bold italic uses the regular italic font and renders false bold italic. Add a true Poppins 700 italic asset and wire it to font-weight: 700; font-style: italic.
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 98-98: Expected no quotes around "Poppins" (font-family-name-quotes)
(font-family-name-quotes)
🤖 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 `@website/public/fonts/fonts.css` around lines 97 - 102, Update the Poppins 700
italic `@font-face` declaration to reference the distinct asset UUID for the true
700 italic font instead of the UUID used by the 400 italic face, while
preserving font-weight: 700, font-style: italic, and the existing loading
behavior.
3 participants
See task https://app.clickup.com/t/90151491867/86carujn7
Added a simplified static home page in Apostrophe CMS with a new page type, module configuration, responsive landing-page template, and comprehensive styling. The implementation includes Poppins fonts, animated hero content, navigation, footer links, mobile layouts, and search form behavior that redirects submissions to
/search.