-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add intersection observer + latest articles
- Loading branch information
Showing
10 changed files
with
133 additions
and
154 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 9 additions & 9 deletions
18
src/ui/components/molecules/testimonial/components/testimonialAuthor/testimonialAuthor.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,11 @@ | ||
| @layer testimonials.testimonial.author { | ||
| .testimonial__author { | ||
| font-size: 1.25rem; | ||
| grid-area: Testimonial-Author; | ||
| isolation: isolate; | ||
| text-transform: uppercase; | ||
| transition-duration: 450ms; | ||
| transition-property: translate; | ||
| transition-timing-function: ease-in; | ||
| } | ||
| .testimonial__author { | ||
| font-size: 1.25rem; | ||
| grid-area: Testimonial-Author; | ||
| isolation: isolate; | ||
| text-transform: uppercase; | ||
| transition-duration: 450ms; | ||
| transition-property: translate; | ||
| transition-timing-function: ease-in; | ||
| } | ||
| } |
16 changes: 8 additions & 8 deletions
16
...onents/molecules/testimonial/components/testimonialDescription/testimonialDescription.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,10 @@ | ||
| @layer testimonials.testimonial.description { | ||
| .testimonial__description { | ||
| color: var(--neutral-light-2); | ||
| grid-area: Testimonial-Description; | ||
| isolation: isolate; | ||
| transition-duration: 350ms; | ||
| transition-property: translate; | ||
| transition-timing-function: ease-in; | ||
| } | ||
| .testimonial__description { | ||
| color: var(--neutral-light-2); | ||
| grid-area: Testimonial-Description; | ||
| isolation: isolate; | ||
| transition-duration: 350ms; | ||
| transition-property: translate; | ||
| transition-timing-function: ease-in; | ||
| } | ||
| } |
8 changes: 4 additions & 4 deletions
8
src/ui/components/molecules/testimonial/components/testimonialImage/testimonialImage.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| @layer testimonials.testimonial.image { | ||
| .testimonial__image { | ||
| grid-area: Testimonial-Image; | ||
| isolation: isolate; | ||
| } | ||
| .testimonial__image { | ||
| grid-area: Testimonial-Image; | ||
| isolation: isolate; | ||
| } | ||
| } |
56 changes: 28 additions & 28 deletions
56
src/ui/components/molecules/testimonial/components/testimonialQuote/testimonialQuote.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,35 @@ | ||
| @layer testimonials.testimonial.quote { | ||
| .testimonial__quote__wrapper { | ||
| display: grid; | ||
| gap: 1rem 0; | ||
| grid: | ||
| 'Testimonial-Quotation Testimonial-Quotation' min-content | ||
| 'Testimonial-Quote Testimonial-Quote' min-content | ||
| / 1fr; | ||
| grid-area: Testimonial-Quote; | ||
| isolation: isolate; | ||
| padding-inline-end: 1rem; | ||
| } | ||
| .testimonial__quote__wrapper { | ||
| display: grid; | ||
| gap: 1rem 0; | ||
| grid: | ||
| 'Testimonial-Quotation Testimonial-Quotation' min-content | ||
| 'Testimonial-Quote Testimonial-Quote' min-content | ||
| / 1fr; | ||
| grid-area: Testimonial-Quote; | ||
| isolation: isolate; | ||
| padding-inline-end: 1rem; | ||
| } | ||
|
|
||
| .testimonial__quote { | ||
| grid-area: Testimonial-Quote; | ||
| transition-duration: 350ms; | ||
| transition-property: translate; | ||
| transition-timing-function: ease-in; | ||
| .testimonial__quote { | ||
| grid-area: Testimonial-Quote; | ||
| transition-duration: 350ms; | ||
| transition-property: translate; | ||
| transition-timing-function: ease-in; | ||
|
|
||
| @supports (text-wrap: pretty) { | ||
| text-wrap: pretty; | ||
| } | ||
| @supports (text-wrap: pretty) { | ||
| text-wrap: pretty; | ||
| } | ||
|
|
||
| @supports not (text-wrap: pretty) { | ||
| text-wrap: balance; | ||
| @supports not (text-wrap: pretty) { | ||
| text-wrap: balance; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .testimonial__quote-symbol { | ||
| grid-area: Testimonial-Quotation; | ||
| height: 4rem; | ||
| transition: opacity 200ms linear 400ms; | ||
| width: 4rem; | ||
| } | ||
| .testimonial__quote-symbol { | ||
| grid-area: Testimonial-Quotation; | ||
| height: 4rem; | ||
| transition: opacity 200ms linear 400ms; | ||
| width: 4rem; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,32 @@ | ||
| @layer testimonials.testimonial { | ||
| .testimonial__content { | ||
| background-color: var(--white); | ||
| cursor: grab; | ||
| display: grid; | ||
| gap: 0 1rem; | ||
| grid: | ||
| 'Testimonial-Image Testimonial-Image . . ' 1rem | ||
| 'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' min-content | ||
| 'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' calc(100% - 7rem) | ||
| 'Testimonial-Image Testimonial-Image Testimonial-Author Testimonial-Author' 1.5rem | ||
| 'Testimonial-Image Testimonial-Image Testimonial-Description Testimonial-Description' min-content | ||
| / calc(100% / 4) calc(100% / 4) 1fr 1fr; | ||
| width: 100%; | ||
| .testimonial__content { | ||
| background-color: var(--white); | ||
| cursor: grab; | ||
| display: grid; | ||
| gap: 0 1rem; | ||
| grid: | ||
| 'Testimonial-Image Testimonial-Image . . ' 1rem | ||
| 'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' min-content | ||
| 'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' calc(100% - 7rem) | ||
| 'Testimonial-Image Testimonial-Image Testimonial-Author Testimonial-Author' 1.5rem | ||
| 'Testimonial-Image Testimonial-Image Testimonial-Description Testimonial-Description' min-content | ||
| / calc(100% / 4) calc(100% / 4) 1fr 1fr; | ||
| width: 100%; | ||
|
|
||
| &:not(.--is-active) { | ||
| opacity: 0.25; | ||
| &:not(.--is-active) { | ||
| opacity: 0.25; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .swiper-slide-prev { | ||
| .testimonial__content { | ||
| grid: | ||
| '. . Testimonial-Image Testimonial-Image ' 1rem | ||
| 'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' min-content | ||
| 'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' calc(100% - 7rem) | ||
| 'Testimonial-Author Testimonial-Author Testimonial-Image Testimonial-Image' 1.5rem | ||
| 'Testimonial-Description Testimonial-Description Testimonial-Image Testimonial-Image' min-content | ||
| / 1fr 1fr calc(100% / 4) calc(100% / 4); | ||
| .swiper-slide-prev { | ||
| .testimonial__content { | ||
| grid: | ||
| '. . Testimonial-Image Testimonial-Image ' 1rem | ||
| 'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' min-content | ||
| 'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' calc(100% - 7rem) | ||
| 'Testimonial-Author Testimonial-Author Testimonial-Image Testimonial-Image' 1.5rem | ||
| 'Testimonial-Description Testimonial-Description Testimonial-Image Testimonial-Image' min-content | ||
| / 1fr 1fr calc(100% / 4) calc(100% / 4); | ||
| } | ||
| } | ||
| } | ||
| } |
26 changes: 13 additions & 13 deletions
26
...molecules/testimonialsSlider/components/testimonialsNavigation/testimonialsNavigation.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,20 @@ | ||
| @layer testimonials.navigation { | ||
| .testimonials__navigation { | ||
| gap: 0 1rem; | ||
| position: absolute; | ||
| right: 0; | ||
| z-index: 10; | ||
| .testimonials__navigation { | ||
| gap: 0 1rem; | ||
| position: absolute; | ||
| right: 0; | ||
| z-index: 10; | ||
|
|
||
| img { | ||
| width: 3rem; | ||
| img { | ||
| width: 3rem; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .testimonials__navigation__button { | ||
| cursor: pointer; | ||
| .testimonials__navigation__button { | ||
| cursor: pointer; | ||
|
|
||
| &.--right { | ||
| rotate: 180deg; | ||
| &.--right { | ||
| rotate: 180deg; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters