Skip to content
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

Home Page: Convert bottom 2 components to Rhombus on Desktop #155

Merged
merged 5 commits into from
Jun 7, 2023

Conversation

machikoyasuda
Copy link
Member

closes #96

This is the last Rhombus ticket!

image image image image image

@machikoyasuda machikoyasuda requested a review from a team as a code owner June 6, 2023 21:07
@netlify
Copy link

netlify bot commented Jun 6, 2023

Deploy Preview for cal-itp-website ready!

Name Link
🔨 Latest commit 7f070e3
🔍 Latest deploy log https://app.netlify.com/sites/cal-itp-website/deploys/6480e99cc760d40008184e1a
😎 Deploy Preview https://deploy-preview-155--cal-itp-website.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 settings.

@machikoyasuda machikoyasuda self-assigned this Jun 6, 2023
@machikoyasuda machikoyasuda added this to the Calitp.org redesign milestone Jun 6, 2023
@machikoyasuda
Copy link
Member Author

@segacy1 Should the 2 links in the Stay up to date bubble also be bolded?

@@ -382,6 +382,14 @@ p.important {
.rhombus-1 {
clip-path: polygon(0 3%, 100% 0, 96% 98%, 3% 100%);
}

.rhombus-2 {
clip-path: polygon(8% 10%, 91% 0, 100% 100%, 0 100%);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing 91% 0 to 91% 2.5% will better align the two top-most corners:

Before:

image

After:
image

Copy link
Member

@thekaveman thekaveman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In tablet mode, I'm seeing a slight difference in the starting point of the two (un-rhombused) boxes -- should these be aligned at the top rather than the bottom?

image

@machikoyasuda
Copy link
Member Author

@thekaveman great catch!

have to remove mt-2 from the 2nd div

src/index.html Outdated Show resolved Hide resolved
Copy link
Member

@thekaveman thekaveman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

@machikoyasuda machikoyasuda merged commit f0db079 into staging Jun 7, 2023
@machikoyasuda machikoyasuda deleted the feat/home-rhombus branch June 7, 2023 21:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CSS to support converting rounded squares to rhombus
2 participants