Skip to content

Commit

Permalink
fix: learning path sliding animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@yld-weng
yld-weng committed Dec 3, 2021
1 parent 75ca6e6 commit d5df1a5
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 51 deletions.
72 changes: 24 additions & 48 deletions src/components/home/__tests__/__snapshots__/learningPath.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -131,12 +130,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -210,12 +208,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -289,12 +286,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -374,12 +370,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -453,12 +448,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -532,12 +526,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -611,12 +604,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -696,12 +688,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -775,12 +766,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -854,12 +844,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -933,12 +922,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -1068,12 +1056,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -1147,12 +1134,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -1226,12 +1212,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -1305,12 +1290,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -1390,12 +1374,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -1469,12 +1452,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -1548,12 +1530,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -1627,12 +1608,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -1712,12 +1692,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -1791,12 +1770,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -1870,12 +1848,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down Expand Up @@ -1949,12 +1926,11 @@ Object {
>
<div>
<div
class="py-4"
style="width: 100%; display: inline-block;"
tabindex="-1"
>
<div
class="sc-iqseJM jHzSlO"
class="sc-iqseJM fwvjzb"
style="min-height: 250px; background-position: center;"
tabindex="0"
>
Expand Down
5 changes: 4 additions & 1 deletion src/components/home/learningPath.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,10 @@ const LearningPath = () => {
let published = node.frontmatter.published !== false;

return (
<div key={node.id} className="py-4">
<div
key={node.id}
style={{ paddingTop: "1rem", paddingBottom: "1rem" }}
>
<CardWrapper
style={{
backgroundImage: `linear-gradient(155deg, rgba(0,0,0,.65) 50%, rgba(2,0,36,.4) 100%), url(${imagesrc})`,
Expand Down
2 changes: 1 addition & 1 deletion src/components/style/home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const CardWrapper = styled.div`
border-radius: 0.375rem;
&:hover {
transform: translateX(-0.5rem);
transform: translateY(-0.5rem);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
.frontCard {
Expand Down
2 changes: 1 addition & 1 deletion src/templates/blog/blogTemplate.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const blogTemplate = ({ data: { allMdx }, pageContext }) => {
<div className="mt-10">
<Link to="/blog#read">
<GreyButton className="text-sm bg-gray-700 text-white hover:bg-black">
Start reading
What&apos;s new?
</GreyButton>
</Link>
</div>
Expand Down

0 comments on commit d5df1a5

Please sign in to comment.