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 7 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
62 changes: 32 additions & 30 deletions components/Header/Header.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
.root {
align-items: center;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
max-height: 100px;
max-width: $width-max;
max-height: 6.25rem;
padding: 1.5rem;
background-color: hsl(var(--secondary-color));
Copy link
Member

Choose a reason for hiding this comment

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

It looks like you may not have had the stylelint plugin working when making these changes. A lot of rules are arbitrarily reordered when they should be alphabetical. Please make sure everything is passing npm run lint before committing. I'll get a pipeline job in place to address this shortly.

}

.options {
display: flex;
flex: 1;
flex-wrap: nowrap;

& > a {
&>a {
white-space: nowrap;
}
}
Expand All @@ -23,36 +24,36 @@
}

.logo {
align-items: center;
border: none;
display: flex;
align-items: center;
margin-right: 1rem;
border: none;

.wordmark {
display: none;
}

.monogram {
width: 35px;
width: 2.1875rem;
Copy link
Member

Choose a reason for hiding this comment

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

Is there a reason you converted many px values to rem? There's very specific places where px are preferred, namely around graphic sizing which, in this example, is the case. I'd prefer to see px to remain in px unless it directly affects font-size.


[id='keycap-top'] {
transform: translate(0, -2px);
transform: translate(0, -0.125rem);
transition: transform .1s;
}
}

&:hover {
.monogram {
[id='keycap-top'] {
transform: translate(0, 10px);
transform: translate(0, 0.625rem);
}
}
}
}

.nav {
align-items: center;
display: flex;
align-items: center;
width: 100%;

a {
Expand All @@ -65,28 +66,29 @@
}

.hamburger {
background-color: transparent;
border: 0;
margin: 0;
display: none;
width: 2.75rem;
height: 2.75rem;
margin: 0;
outline: 0;
width: 2.75rem;
cursor: pointer;
background-color: transparent;
border: 0;

svg {
fill: hsl(var(--primary-color));

path {
opacity: 1;
transition: transform .3s ease-in-out, opacity .2s ease-in-out;
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

[id='line-1'] {
transform-origin: .4rem .5rem;
transform-origin: 0.4rem 0.5rem;
}

[id='line-3'] {
transform-origin: .3rem 1rem;
transform-origin: 0.3rem 1rem;
}

&.active {
Expand Down Expand Up @@ -121,8 +123,8 @@

.wordmark {
display: block;
margin: 2px 0 0 -8px;
width: 140px;
margin: 0.125rem 0 0 -0.5rem;
width: 8.75rem;
}
}

Expand All @@ -137,29 +139,29 @@

&.open {
background-color: hsl(var(--white));
border-radius: 5px 5px 0 0;
border-radius: 0.3125rem 0.3125rem 0 0;
box-shadow: var(--box-shadow);
}
}

.options {
background-color: hsl(var(--white));
border-radius: 5px 0 5px 5px;
box-shadow: var(--box-shadow);
display: none;
flex-direction: column;
position: absolute;
top: 40px;
width: calc(100% + 44px);
top: 2.5rem;
z-index: 999;
display: none;
width: calc(100% + 2.75rem);
flex-direction: column;
background-color: hsl(var(--white));
border-radius: 0.3125rem 0 0.3125rem 0.3125rem;
box-shadow: var(--box-shadow);

& :not(:last-child) {
border-bottom: 1px solid hsl(var(--light-grey));
border-bottom: thin solid hsl(var(--light-grey));
Copy link
Member

Choose a reason for hiding this comment

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

No, please use exact values.

}

> * {
>* {
border-radius: 0 !important;
padding: .5rem 0;
padding: 0.5rem 0;
}

&.open {
Expand Down
29 changes: 21 additions & 8 deletions components/Hero/Hero.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,31 @@
.root {
align-items: center;
background: url('../../public/images/hero-grid.svg') repeat-x;
background-position: bottom;
background-size: 1500px;
position: relative;
display: flex;
align-items: center;
flex-direction: column;
height: 40vh;
justify-content: space-between;
text-align: center;
background-image: linear-gradient(hsl(var(--light-grey) / 50%) 0.125rem, transparent 0.125rem), linear-gradient(to right, hsl(var(--light-grey) / 50%) 0.125rem, transparent 0.125rem);
background-size: 1.5rem 1.5rem;

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

.full {
height: calc(100vh - 120px);
}

.text {
z-index: 1;
font-size: clamp(1rem, 1.75vw, 1.5rem);
line-height: 1.2;
margin: 0 8rem;
Expand All @@ -27,9 +38,11 @@
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
7 changes: 6 additions & 1 deletion components/Hero/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@ const ScrollButton = styled(Button)({
fontSize: 16,
marginBottom: '12rem',
padding: '.5rem 1rem',
textTransform: 'none'
textTransform: 'none',
transition: 'letter-spacing 200ms linear',

'&:hover': {
letterSpacing: 1.1,
},
Copy link
Member

Choose a reason for hiding this comment

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

Please revert this change.

});

interface HeroProps {
Expand Down
66 changes: 41 additions & 25 deletions components/HomeSection/HomeSection.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,52 @@
position: relative;

h2 {
font-size: 2.5rem;
font-weight: 600;
letter-spacing: -2px;
margin: 0 auto;
max-width: 1080px;
padding: 0 1rem 1rem;
position: relative;
z-index: 2;
max-width: 67.5rem;
margin: 0 auto 1rem;
padding: 0 2rem;
letter-spacing: -0.125rem;

font: {
size: 2.5rem;
weight: 600;
}
Copy link
Member

Choose a reason for hiding this comment

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

While I appreciate the ability to nest rules in this way, it makes using automatic alphabetizing more difficult and I would prefer we do not do this.

}
}

.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;
pointer-events: none;
top: -10.9375rem;
left: 0;
width: 100%;
height: 12.5rem;
content: '';
touch-action: none;
}

&::before {
transform: scale(-1, -1);
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%);
background-color: hsl(var(--white) / 50%);
}

&::after {
transform: scaleY(-1);
width: 100%;
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%);
background-color: hsl(var(--white));

}
}

Expand All @@ -46,26 +60,28 @@

&::before,
&::after {
background-color: hsl(var(--primary-color));
content: '';
height: 100px;
position: absolute;
width: 100%;
z-index: 1;
width: 100%;
height: 6.25rem;
background-color: hsl(var(--primary-color) / 100%);
Copy link
Member

Choose a reason for hiding this comment

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

The 100% isn't necessary here.

}

&::before {
top: -1.875rem;
clip-path: ellipse(75% 100% at 50% 100%);
top: -30px;
}

&::after {
bottom: -30px;
clip-path: ellipse(75% 100% at 50% 0%);
bottom: -1.875rem;
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);
background-color: hsl(var(--light-grey));
}
}

@media only screen and (max-width: $mobile-width) {
@media (46rem >=width) {
Copy link
Member

Choose a reason for hiding this comment

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

No magic numbers please. Where is 46rem coming from?

.root {
h2 {
line-height: 1.1;
Expand All @@ -75,13 +91,13 @@

.wave {
&::after {
height: 125px;
top: -120px;
height: 7.8125rem;
top: -7.5rem;
}
}

.container {
padding-top: .5rem;
padding-top: 0.5rem;
}

.highlight {
Expand Down
Loading