Skip to content

Style: Responsive Images/Figures & SCSS/Content Cleanup #551

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 12, 2025

Conversation

zihanKuang
Copy link
Contributor

Description:

This PR solves #547.

  • SCSS (_styles_project.scss):

    • Both general image styles and figure elements within .td-content now use a responsive max-width of clamp(320px, 100%, 700px). This allows them to adapt fluidly to parent container widths, maintaining a 320px minimum and adhering to the specified maximum.
    • Image & Figure Refactoring:
      Established a new general style rule for images (img, .md__image img, img.md-image-responsive) within .td-content to centralize common image properties and provide consistent base styling.
    • Code Cleanup: Removed a duplicate clip-path declaration and several redundant CSS properties, as these are now correctly inherited from the new general rules.
  • Content:

    • performance/index.md: Minor text corrections.
    • comments/index.md: Removed inline width styles from <figure> tags, deferring to global SCSS.

zihanKuang added 7 commits May 7, 2025 18:05
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
Signed-off-by: Zihan Kuang <[email protected]>
Copy link

netlify bot commented May 7, 2025

Deploy Preview for bejewelled-pegasus-b0ce81 ready!

Name Link
🔨 Latest commit f117d0f
🔍 Latest deploy log https://app.netlify.com/sites/bejewelled-pegasus-b0ce81/deploys/6821df3c8c95ef00088f8d8c
😎 Deploy Preview https://deploy-preview-551--bejewelled-pegasus-b0ce81.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@zihanKuang zihanKuang added the area/docs Improvements or additions to documentation label May 7, 2025
@leecalcote
Copy link
Member

Awesome. Nice job.

@leecalcote leecalcote merged commit 0e329df into layer5io:master May 12, 2025
6 checks passed
@zihanKuang zihanKuang deleted the improve-css branch May 12, 2025 22:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/docs Improvements or additions to documentation component/cloud-docs component/kanvas-docs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants