Add GitHub Pages homepage and README - #492
Closed
jackgranatowski wants to merge 9 commits into
Closed
Conversation
Correct stale facts on both surfaces: token count (685, was 840), cascade layer count (fifteen, was sixteen), hardcoded landing-page version, and the npm link (the 'slashed' npm package is an unrelated project). Label the staged component/utility layers honestly, point the WordPress plugin link at SLASHED-Plugins, and restructure both pages around a quick-start-first flow. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98
Restore the live README.md and index.md to their previous state and park the rewritten versions in copy-wip/ pending review. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98
|
Warning Review limit reached
Next review available in: 21 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: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds two new draft documentation files under copy-wip/: a GitHub Pages landing HTML page with inline styles, hero/feature/install/docs sections and a theme-toggle script, and a product README describing the SLASHED CSS framework. Updates _config.yml to exclude copy-wip from the Jekyll build. ChangesDocumentation drafts
Estimated code review effort: 2 (Simple) | ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
PR Summary by QodoAdd draft GitHub Pages homepage and repository README (copy-wip)
AI Description
Diagram
High-Level Assessment
Files changed (2)
|
Code Review by Qodo
Context used✅ Compliance rules (platform):
11 rules 1.
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@copy-wip/github-readme.md`:
- Around line 13-24: The links in the README section rendered from
copy-wip/github-readme.md are repo-relative but the file lives under copy-wip/,
so targets like LICENSE, CHANGELOG.md, CONTRIBUTING.md, and docs pages resolve
too deep and will break. Update the markdown in this file to use paths relative
to copy-wip/ (for example by prefixing those links with ../) or relocate the
generated README to the repository root, and apply the same fix consistently
across the referenced sections such as the navbar and documentation links.
🪄 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 Plus
Run ID: 4f739a45-908c-4782-9116-6f7266108b89
📒 Files selected for processing (2)
copy-wip/github-pages-index.mdcopy-wip/github-readme.md
The draft landing page in copy-wip/ carries Jekyll front matter and the site uses jekyll-optional-front-matter, so without the exclusion both drafts would be rendered and served publicly under /copy-wip/. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98
Replace the hand-styled copy-wip landing draft with a standalone page styled entirely by slashed.optimal.css: layout via sf-section / sf-container / sf-stack / sf-cluster / sf-grid, macros (sf-prose, sf-surface, sf-text-gradient, sf-divider), scroll-driven sf-entrance animations, and base element styling for code blocks and tables. The only page-specific rules live in the reserved slashed.overrides layer and compose framework tokens exclusively — no raw colors, sizes, or fonts. Dark mode, fluid type, and pre overflow all come from the framework; a small nav toggle demos data-theme. Now .html with layout:null front matter since the page carries its own document shell (the default layout's hardcoded styles would fight it). Verified with Playwright against a local build of badges/: light, dark, and 390px mobile all render clean with no console errors. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98
Add a 'name is the philosophy' section to the README draft and a matching manifesto band to the landing-page draft: one verifiable commitment per letter (Standalone, Lean, Agnostic, Structured, Hybrid, Explicit, Deterministic), each grounded in a documented framework behaviour rather than slogan-ware. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98
Make the philosophy the hero: the wordmark renders as S/L/A/S/H/E/D with gradient initials, and each letter unfolds into its manifesto word on hover (pure CSS — max-width/opacity transitions on framework motion tokens). Add a giant gradient slash watermark, a stats strip (685 tokens / 15 layers / 0 JS / 0 build steps), and rebuild the features section on the framework's own sf-bento grid with live token demos: the real --sf-color-primary 50–950 ramp, hover/active/status chips, side-by-side data-theme panels, the fluid type scale, and a layer-stack visual. The install band is forced dark via data-theme="dark" as a section-theming demo; its code blocks pin to surface/text tokens because code tokens don't yet follow scoped data-theme. Entrances stagger via the framework's scroll-timeline range knobs. Still token-only styling in the slashed.overrides layer. Verified with Playwright: light, dark, hero hover state, and 390px mobile (no horizontal overflow, no console errors). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@copy-wip/github-pages-index.html`:
- Around line 13-14: The stylesheet reference in the page head points to a
non-existent asset, so update the link in the HTML template to use the tracked
badges asset or the correct generated CSS path. Locate the <link
rel="stylesheet"> tag in github-pages-index.html and replace the bad href so the
page loads the intended framework styles instead of a missing file.
- Around line 537-556: The theme toggle script in the self-invoking block around
btn, states, current, and apply should guard localStorage access because
restricted browsers can throw and break initialization. Wrap the initial
localStorage.getItem('slashed-home-theme') and the click handler’s
localStorage.setItem call in try/catch, then fall back to the in-memory
default/current state if storage is unavailable. Keep the existing
apply(current) and btn.addEventListener logic intact, but ensure it still runs
even when persistence fails.
🪄 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 Plus
Run ID: 7a476974-3e65-4e48-af2c-2d0a450b0e93
📒 Files selected for processing (3)
_config.ymlcopy-wip/github-pages-index.htmlcopy-wip/github-readme.md
✅ Files skipped from review due to trivial changes (1)
- copy-wip/github-readme.md
Storage-restricted browsers can throw on localStorage reads/writes; fall back to in-memory state so the toggle still initializes and cycles without persistence. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98
Switch the stylesheet href from the site-local /badges/ build artifact to the dist-branch jsDelivr URL, matching the install instructions the page itself gives. Verified with Playwright that the page requests the exact CDN URL and renders correctly against the minified bundle. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98
The unfold interaction could hand the hover to a neighbouring letter: the centered row re-centers as a word expands, sliding letters under the stationary cursor and re-firing the effect in a cascade. Fix by expanding each word to an exact measured width (--w, in the row's own ch context, weight-inherited so the units agree) and counter-shifting the row by exactly --w/2 with the same duration/easing/delay, so the hovered letter never moves. Gate the interaction to any-hover devices, forbid wrapping mid-interaction with a viewport-capped font size, add a 120ms sweep-guard delay, and honour prefers-reduced-motion. Verified with Playwright: hovering each of the 7 letters keeps the cursor on the same letter through the full animation. In the forced-dark install band, wrap code lines (pre-wrap + overflow-wrap) instead of horizontal scrolling and extend the theme-safe token pinning to inline code chips, which rendered light-on-dark on real devices (same root cause as #496). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98
This was referenced Jul 3, 2026
Contributor
Author
|
Splitting this into two smaller, focused PRs — this one grew from a README/index copy fix into a full landing-page redesign plus several rounds of bugfixes, which is too much surface for one review:
Both carry over the fixes and reviewer discussion from this PR. Closing this one in favor of those two. Generated by Claude Code |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add landing page and repository README for the SLASHED CSS framework.
Summary
This PR introduces two new documentation files to improve project visibility and onboarding:
github-pages-index.md— A styled Jekyll homepage for the GitHub Pages site (slashed.codeslash.dev), featuring a hero section, feature cards, installation instructions, and documentation navigation.github-readme.md— A comprehensive README for the GitHub repository, covering the framework's core concepts, feature overview, bundle options, browser support, and development workflow.Key changes
data-themeattribute.Both files are ready for Jekyll rendering and serve as the primary entry points for new users discovering SLASHED.
https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98
Summary by CodeRabbit
New Features
Documentation
Chores