diff --git a/src/components/Heading/Heading.module.scss b/src/components/Heading/Heading.module.scss index f6f87e4..297f30f 100644 --- a/src/components/Heading/Heading.module.scss +++ b/src/components/Heading/Heading.module.scss @@ -1,3 +1,13 @@ +@keyframes drawRedLine { + from { + clip-path: inset(0 100% 0 0); + } + + to { + clip-path: inset(0 0% 0 0); + } +} + .headingAndUnderline { .headingWrapper { .heading { @@ -51,10 +61,17 @@ } } - .underline, + .underline { + width: 100%; + padding: 16px 0 24px 0; + } + .redUnderline { width: 100%; padding: 16px 0 24px 0; + animation: drawRedLine 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; + animation-delay: 0.1s; + clip-path: inset(0 100% 0 0); } .left { diff --git a/src/components/longevity/LongevitySubSection/LongevitySubSection.module.scss b/src/components/longevity/LongevitySubSection/LongevitySubSection.module.scss index bd60ff5..d0978a0 100644 --- a/src/components/longevity/LongevitySubSection/LongevitySubSection.module.scss +++ b/src/components/longevity/LongevitySubSection/LongevitySubSection.module.scss @@ -1,5 +1,15 @@ @import '@styles/fonts.scss'; +@keyframes drawRedLine { + from { + clip-path: inset(0 100% 0 0); + } + + to { + clip-path: inset(0 0% 0 0); + } +} + .subSection { max-width: 948px; padding-bottom: 40px; @@ -55,6 +65,9 @@ background-image: url('/keepsimple_/assets/longevity/red-short-line.png'); background-size: contain; background-repeat: no-repeat; + clip-path: inset(0 100% 0 0); + animation: drawRedLine 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; + animation-delay: 0.2s; } } @@ -204,6 +217,7 @@ } } } + .whyDoThisMobileModal { display: flex; flex-direction: column; @@ -216,9 +230,11 @@ 0% { filter: drop-shadow(0px 0px 18px rgba(53, 35, 13, 0.2)); } + 70% { filter: drop-shadow(0px 0px 18px rgba(255, 0, 0, 0.8)); } + 100% { filter: drop-shadow(0px 0px 18px rgba(53, 35, 13, 0.2)); } diff --git a/src/components/longevity/Navigation/Navigation.module.scss b/src/components/longevity/Navigation/Navigation.module.scss index dad92a4..3ec696f 100644 --- a/src/components/longevity/Navigation/Navigation.module.scss +++ b/src/components/longevity/Navigation/Navigation.module.scss @@ -22,8 +22,26 @@ &:hover { cursor: pointer; + } + } + + .item { + position: relative; + + &::after { + content: ''; + position: absolute; + inset: 0; background-image: url('/keepsimple_/assets/longevity/navbar-borders.svg'); background-color: #fff; + background-repeat: no-repeat; + background-size: cover; + opacity: 0; + transition: opacity 200ms ease; + } + + &:hover::after { + opacity: 1; } } @@ -51,6 +69,11 @@ cursor: pointer; background-image: url('/keepsimple_/assets/longevity/nav-hover-bg.png'); background-size: cover; + + &::after { + display: none; + } + .subLink, .link { color: #fff; @@ -64,7 +87,6 @@ &:hover { cursor: pointer; - background-image: url('/keepsimple_/assets/longevity/nav-hover-bg.png'); } } @@ -128,10 +150,12 @@ justify-content: center; align-items: center; gap: 4px; + transition: color 200ms ease; svg { path { fill: #bdbdbd; + transition: fill 200ms ease; } } } diff --git a/src/layouts/ArticleLayout/ArticleLayout.module.scss b/src/layouts/ArticleLayout/ArticleLayout.module.scss index b37d027..999c2d2 100644 --- a/src/layouts/ArticleLayout/ArticleLayout.module.scss +++ b/src/layouts/ArticleLayout/ArticleLayout.module.scss @@ -63,6 +63,7 @@ @media (max-width: 960px) { .footerImage { height: 50px; + width: 100%; } .main { display: block; diff --git a/src/layouts/ArticleLayout/ArticleLayout.tsx b/src/layouts/ArticleLayout/ArticleLayout.tsx index 0569869..79891c5 100644 --- a/src/layouts/ArticleLayout/ArticleLayout.tsx +++ b/src/layouts/ArticleLayout/ArticleLayout.tsx @@ -30,7 +30,6 @@ const ArticleLayout: FC = ({ children }) => { height={314} className={styles.coverImage} width={1920} - // unoptimized priority /> )} diff --git a/src/pages/articles/page.module.scss b/src/pages/articles/page.module.scss index 6859de4..bec5c48 100644 --- a/src/pages/articles/page.module.scss +++ b/src/pages/articles/page.module.scss @@ -1,3 +1,21 @@ .section { background-color: #ffffff; + + .coverImage, + .footerImage { + width: 100%; + object-position: center; + object-fit: cover; + } + + .footerImage { + margin-top: 64px; + } +} + +@media (max-width: 960px) { + .footerImage { + height: 50px; + width: 100%; + } }