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.

Sign up for GitHub

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

Add some css decorations #38

Closed
wants to merge 20 commits into from
Closed

Add some css decorations #38

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
a43fea1
chore(dev): replace svg-background to css pattern
andrejsharapov Jan 28, 2023
6f7a463
Merge branch 'main' into change-design-elements
andrejsharapov Jan 30, 2023
3b636d6
chore(style): update background
andrejsharapov Jan 30, 2023
53b8b9b
chore(style): change header
andrejsharapov Jan 30, 2023
33b46ee
chore(style): align to edge and add some dynamic
andrejsharapov Jan 30, 2023
a926e7a
chore(style): add some decorations
andrejsharapov Jan 30, 2023
df7eafe
chore(fix): replace 1px
andrejsharapov Jan 30, 2023
98c61a0
Fix code with stylelint
andrejsharapov Jan 31, 2023
154461c
Rollback changes
andrejsharapov Jan 31, 2023
4031ea4
Rollback changes
andrejsharapov Jan 31, 2023
2e51363
Update components/Hero/Hero.module.scss
andrejsharapov Feb 1, 2023
4c760ff
Replace rem to px
andrejsharapov Feb 1, 2023
223f7c1
Replace rem to px
andrejsharapov Feb 1, 2023
a85f0d2
Merge branch 'main' into change-design-elements
andrejsharapov Feb 1, 2023
224e36c
Replace rem to px
andrejsharapov Feb 1, 2023
8fb9f25
Replace rem to px
andrejsharapov Feb 1, 2023
1852dd4
Remove CSS variables
andrejsharapov Feb 1, 2023
236cd2e
Remove `border-radius` and fix other styles
andrejsharapov Feb 1, 2023
d834cbf
Remove transition from images
andrejsharapov Feb 1, 2023
660b81f
Remove css transform
andrejsharapov Feb 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion components/Header/Header.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
.root {
align-items: center;
background-color: hsl(var(--secondary-color));
display: flex;
justify-content: space-between;
margin: 0 auto;
max-height: 100px;
max-height: 6.25rem;
andrejsharapov marked this conversation as resolved.
Show resolved Hide resolved
max-width: $width-max;
padding: 1.5rem;
}
Expand Down Expand Up @@ -67,6 +68,7 @@
.hamburger {
background-color: transparent;
border: 0;
cursor: pointer;
display: none;
height: 2.75rem;
margin: 0;
Expand Down
27 changes: 20 additions & 7 deletions components/Hero/Hero.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,23 @@
.root {
align-items: center;
background: url('../../public/images/hero-grid.svg') repeat-x;
background-position: bottom;
background-size: 1500px;
background-image: linear-gradient(hsl(var(--light-grey) / 50%) .125rem, transparent .125rem), linear-gradient(to right, hsl(var(--light-grey) / 50%) .125rem, transparent .125rem);
background-size: 1.5rem 1.5rem;
display: flex;
flex-direction: column;
height: 40vh;
justify-content: space-between;
position: relative;
text-align: center;

&::before {
background-image: linear-gradient(hsl(var(--secondary-color) / 100%) 20%, transparent);
block-size: 100%;
content: '';
inline-size: 100%;
left: 0;
position: absolute;
top: 0;
z-index: 0;
}
}

.full {
Expand All @@ -20,16 +30,19 @@
margin: 0 8rem;
max-width: 1080px;
padding-top: 2rem;
z-index: 1;
}

.heading {
font-size: clamp(1rem, 6vw, 5rem);
letter-spacing: -3px;
}

@media only screen and (max-width: $mobile-width) {
section:not(.full) {
background-position: 0 2rem;
@media ($mobile-width >= width) {
Copy link
Member

Choose a reason for hiding this comment

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

Please leave the media queries as they were written.

andrejsharapov marked this conversation as resolved.
Show resolved Hide resolved
section {
&:not(.full) {
background-position: 0 2rem;
}
}

.text {
Expand Down
26 changes: 18 additions & 8 deletions components/HomeSection/HomeSection.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,41 @@
margin: 0 auto;
max-width: 1080px;
padding: 0 1rem 1rem;
position: relative;
z-index: 2;
}
}

.container {
margin: 0 auto;
max-width: 1080px;
max-width: 67.5rem;
andrejsharapov marked this conversation as resolved.
Show resolved Hide resolved
padding: 0 2rem;
}

.wave {
padding-top: 2rem;

&::before,
&::after {
background-color: hsl(var(--white));
clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
content: '';
height: 200px;
left: 0;
pointer-events: none;
position: absolute;
top: -175px;
touch-action: none;
transform: scaleY(-1);
width: 100%;
}

&::before {
background-color: hsl(var(--white) / 50%);
clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
transform: scale(-1, -1);
}

&::after {
background-color: hsl(var(--white));
clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
transform: scaleY(-1);
}
}

.highlight {
Expand All @@ -48,7 +56,7 @@
&::after {
background-color: hsl(var(--primary-color));
content: '';
height: 100px;
height: 6.25rem;
position: absolute;
width: 100%;
z-index: 1;
Expand All @@ -60,8 +68,10 @@
}

&::after {
background-color: hsl(var(--light-grey));
bottom: -30px;
clip-path: ellipse(75% 100% at 50% 0%);
clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
transform: scale(-1, -1);
}
}

Expand Down
26 changes: 21 additions & 5 deletions components/LibraryCard/LibraryCard.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,25 @@
.root {
background-color: hsl(var(--white) / 12%);
border-radius: 20px;
box-shadow: var(--box-shadow);
border-radius: 1.25rem;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
margin: 0 1rem;
max-width: 400px;
margin-inline-end: auto;
margin-inline-start: auto;
padding: 2rem;
text-align: center;
transform: scale(1);

&:hover {
background-color: hsl(var(--white) / 12%);
box-shadow: var(--box-shadow);

.content {
.image {
transform: scale(.9);
}
}
}

h3 {
font-size: 1.8rem;
Expand All @@ -26,11 +36,17 @@
a {
text-decoration: none;
}

@media only screen and (max-width: $mobile-width) {
background-color: hsl(var(--white)/12%);
box-shadow: var(--box-shadow);
}
}

.content {
.image {
position: relative;
transition: all .2s linear;
Copy link
Member

Choose a reason for hiding this comment

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

Still need to remove this transition.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Transition smoothes the behavior of the icon when hovering over the card.

Copy link
Member

Choose a reason for hiding this comment

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

What I'm asking is to remove all transitions from those cards. Keep the style as you have proposed before hover, but make the buttons the only clickable areas. 😄

width: 100%;
}

Expand Down
10 changes: 4 additions & 6 deletions components/LibraryCard/LibraryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,14 @@ export interface LibraryCardProps {
}

const LibraryButton = styled(Button)(({ theme }) => ({
'&:hover': {
backgroundColor: 'white',
boxShadow: '0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.12)',
color: theme.palette.primary.main
},
backgroundColor: 'white',
borderBottom: 'none',
borderRadius: 24,
Copy link
Member

Choose a reason for hiding this comment

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

The pill shape of the button does not match any other button's style on the site, so let's remove this.

Suggested change
borderRadius: 24,

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The site navigation and the "Scroll to Learn More" button have a more circular shape.

Copy link
Member

Choose a reason for hiding this comment

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

Only on hover. The header follows that pattern to match the search box. The hero does it to match the header because of proximity. Neither area really "buttons." All elements that look like buttons should follow the Material guidelines as per the MUI <Button/> component.

color: theme.palette.primary.main,
fontSize: 16,
textTransform: 'none'
paddingBottom: 8,
paddingTop: 8,
textTransform: 'none',
}));

const LibraryCard: FunctionComponent<LibraryCardProps> = ({
Expand Down
1 change: 0 additions & 1 deletion public/images/hero-grid.svg
View file
Open in desktop

This file was deleted.

22 changes: 15 additions & 7 deletions styles/pages/index.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
.main {
section:nth-child(even) {
background-color: hsl(var(--light-grey));
section {
&:nth-child(even) {
background-color: hsl(var(--light-grey));
}
}
}

Expand All @@ -21,7 +23,7 @@
grid-gap: 3rem 5rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
justify-items: center;
max-width: 1080px;
max-width: 67.5rem;
andrejsharapov marked this conversation as resolved.
Show resolved Hide resolved
width: 100%;

svg {
Expand Down Expand Up @@ -57,13 +59,19 @@
}

.libraries {
--col-size: 25rem;

align-items: center;
display: grid;
grid-gap: 2rem 3rem;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
justify-items: center;
grid-gap: 3rem;
grid-template-columns: repeat(auto-fit, minmax(var(--col-size), 1fr));
Copy link
Member

Choose a reason for hiding this comment

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

Let's not use CSS variables here and be explicit here and in the media query. I get what you're doing here, but its just not a pattern we've done in this repo.

justify-content: space-between;
margin: 3rem auto;
max-width: 1080px;
max-width: 67.5rem;

@media only screen and (max-width: $mobile-width) {
--col-size: 20rem;
}
}

.join {
Expand Down