[457] Create styles for Case Study card on summary page#84
Conversation
- Remove outdated case styles and padding - Add responsive styles for case study cards - Create responsive line-height mixin - Add font-weight-300 variable - Update case study card HTML structure
- Create reusable text-truncate mixin in _mixins.scss - Replace repetitive text truncation styles with mixin in case study cards - Add margin to cards container and remove box-shadow from cards - Remove border on large screens for case study cards
📝 WalkthroughWalkthroughThe changes update SCSS styling and HTML template markup for case study cards, introducing new responsive mixins, variables, and modular CSS class structures. The button styles are adjusted for responsive font sizing and overflow handling. The case studies page template is updated to reflect new class names and content structure. No JavaScript or control flow changes were made. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant Template (index.html)
participant SCSS
User->>Browser: Requests case studies page
Browser->>Template (index.html): Loads updated HTML template
Template (index.html)->>SCSS: Applies new class names and responsive styles
SCSS->>Browser: Provides updated modular and responsive styles
Browser->>User: Renders updated case study cards with new layout and typography
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (4)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
yuramax
changed the title
🔍 Vulnerabilities of
|
| digest | sha256:012220c4a26deaa9c3ed81857e96c1ccc43fffdbebf9f99480e86d9847388e6c |
| vulnerabilities |     |
| platform | linux/amd64 |
| size | 283 MB |
| packages | 934 |
📦 Base Image node:23-alpine
| also known as |
|
| digest | sha256:169ee1b69bd3f5c7c8508a9919e8b367bba9dc7fa9a03097ec9f85d2e8179631 |
| vulnerabilities |  |
Description
| ||||||||||||
Description
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
website/modules/asset/ui/src/scss/_mixins.scss (2)
17-23: Add SassDoc comments for clarity
Providing documentation for new mixins helps maintainability. Consider adding top-level comments describing parameters and usage forresponsive-font.
25-31: Documentresponsive-line-heightmixin parameters
A brief SassDoc above this mixin will clarify its purpose and the meaning of$mobile-line-heightvs$desktop-line-height.website/modules/asset/ui/src/scss/_buttons.scss (1)
133-133: Override inherited truncation styles for empty buttons
While you've resetoverflow, the inheritedwhite-space: nowrapandtext-overflow: ellipsiscan still constrain content. To fully restore natural flow, consider:.sf-button--empty { overflow: initial; + white-space: normal; + text-overflow: clip; }website/modules/asset/ui/src/scss/_cases.scss (1)
284-322: Namespace nested classes to prevent collisions
The generic class names.type,.industry, and.stackare scoped only by nesting under.cs_card .cs_details, but could still collide in a large stylesheet. Consider adopting a BEM-style or prefixed naming (e.g.,.cs-card__type) for clearer intent and to avoid unintended overrides.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
website/modules/asset/ui/src/scss/_buttons.scss(2 hunks)website/modules/asset/ui/src/scss/_cases.scss(1 hunks)website/modules/asset/ui/src/scss/_mixins.scss(2 hunks)website/modules/asset/ui/src/scss/_variables.scss(1 hunks)website/modules/case-studies-page/views/index.html(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: sonarqube
- GitHub Check: e2e-tests
- GitHub Check: security-scan
🔇 Additional comments (5)
website/modules/asset/ui/src/scss/_variables.scss (1)
13-17: New style tokens introduced correctly
The$whispercolor and$font-weight-300weight align with the existing naming conventions and support the updated card styles.website/modules/asset/ui/src/scss/_buttons.scss (1)
27-27: Responsive typography integrated
Using@include responsive-font(14px, 20px)here correctly replaces the static font sizes for buttons.website/modules/case-studies-page/views/index.html (3)
62-70: Image markup updated to match new styles
The<img class="image">correctly maps to the.imagerules in_cases.scss, preserving lazy loading and dimensions.
93-93: Portfolio title element updated
The<h4 class="portfolio-title">correctly uses the new class and conditional logic for dynamic portfolio titles.
97-97: Stack element mapping correct
Rendering<div class="stack">{{ article.stack }}</div>aligns with the new.stackstyles for truncation and font settings.
- Added display:block to the text-truncate mixin's non-multiline option for consistent rendering
|
|
The changes are already merged via other PRs. Closing this one. |
2 participants
Uh oh!
There was an error while loading. Please reload this page.