diff --git a/src/App/Home/index.js b/src/App/Home/index.js index 332c1242de..2eb3ec05f4 100644 --- a/src/App/Home/index.js +++ b/src/App/Home/index.js @@ -59,21 +59,23 @@ const Home = () => {
- {route.entryCardText} -
- {route.entryCardText} -
+ + {!route.wideCard ? route.title : route.entryCardText} + + {!route.wideCard && ( +
+ {route.entryCardText} +
+ )}
@@ -82,9 +84,9 @@ const Home = () => { ))}
- +
- +
Utilities
diff --git a/src/less/components/card.less b/src/less/components/card.less index a335695c9c..5f1f16b027 100644 --- a/src/less/components/card.less +++ b/src/less/components/card.less @@ -1,7 +1,6 @@ @import "../global.less"; // TODO: sera que el card title TIENE que llevar la clase .h4 ? or ponemos un title mas abstracto? -// provide fallback style pa support a los que no han hecho la migracion, chequeando si llevas unas de las nuevas clases (e.g. .cards-cta) -> pa ellos provide un fallback style as close as possible, until next Major release .cards:has(.cards-cta) { --border-radius: 16px; @@ -9,7 +8,6 @@ --cards-dark-gray: var(--base-2); --min-width: 240px; --max-width: 700px; - --transition-duration: 0.1s; --padding-outer: 1.5rem; --grid-min-gap: 0.5rem; @@ -33,12 +31,11 @@ text-decoration: none; background-color: var(--cards-light-gray); cursor: pointer; - transition: var(--transition-duration); overflow: clip; &:hover { .cards-cta span.arrow:before { - animation: scroll 0.5s ease-in-out; + animation: scroll 0.6s cubic-bezier(0.46, 0.06, 0, 1.02); } } @@ -289,11 +286,9 @@ &:hover { background-color: var(--cards-dark-gray); color: var(--white); - transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1); .h4 { color: inherit; - transition: inherit; } } @@ -318,7 +313,6 @@ & span.arrow { width: 40px; - transition: all 0.5s ease; display: grid; overflow: clip; @@ -345,7 +339,6 @@ font-family: var(--brand-headline); text-align: start; margin-block: 0; - transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1); } @keyframes scroll {