diff --git a/app/(home)/layout.js b/app/(home)/layout.js index d34d6b952..4fb135efd 100644 --- a/app/(home)/layout.js +++ b/app/(home)/layout.js @@ -1,11 +1,16 @@ -import { HomeNav, HomeFooter } from '/components/home'; +import { HomeNav, HomeFooter, CartLink } from '/components/home'; import styles from './styles.module.scss'; export default function HomeLayout({ children }) { return ( <> -
+ {/*
*/} +
+
+ +
+
@@ -14,6 +19,7 @@ export default function HomeLayout({ children }) {
+ {/*
*/} ); } diff --git a/app/(home)/styles.module.scss b/app/(home)/styles.module.scss index da58e8cde..9dd5f5e02 100644 --- a/app/(home)/styles.module.scss +++ b/app/(home)/styles.module.scss @@ -1,5 +1,24 @@ @use 'styles/_spacing'; +.scrollContainer { + position: absolute; + height: calc(100% - 822px); + right: spacing.$page-margin-x; + // float: right; +} + +.spacer { + height: spacing.$home-spacer-y; +} + +.header { + overflow: visible; + + > nav { + overflow: visible; + } +} + .main { padding: 0 spacing.$page-margin-x; } diff --git a/app/styles.module.scss b/app/styles.module.scss index a564d88ba..a4d13a3f4 100644 --- a/app/styles.module.scss +++ b/app/styles.module.scss @@ -2,6 +2,7 @@ .body { background-color: colors.$grey-tint; + // isolation: isolate; font-family: var(--font-dia); diff --git a/components/home/index.js b/components/home/index.js index cd255698e..7b372436d 100644 --- a/components/home/index.js +++ b/components/home/index.js @@ -102,6 +102,14 @@ export async function TypesNav() { ); } +export const CartLink = () => ( + /*
*/ + + Cart ( 0 ) + + //
+); + export const HomeNav = () => (
diff --git a/components/home/styles.module.scss b/components/home/styles.module.scss index 5c7a212a3..f21fe93e3 100644 --- a/components/home/styles.module.scss +++ b/components/home/styles.module.scss @@ -9,7 +9,9 @@ } .homeNav { - padding: 51px 115px 22px 115px; + padding: (51px - spacing.$home-spacer-y) 115px 22px 115px; + + overflow: visible; display: grid; grid-template-columns: 200px 1fr 200px; @@ -38,6 +40,24 @@ } } +.cartLink { + position: sticky; + overflow: visible; + + top: 12px; + + @include typography.subheader; + + text-align: right; + word-wrap: none; + text-decoration-line: none; + mix-blend-mode: difference; + // mix-blend-mode: exclusion; + z-index: 10; + + color: #fff !important; +} + .homeProductsList { @include home-grid; @@ -140,6 +160,7 @@ > div { display: flex; align-items: flex-end; + justify-content: flex-end; } button { diff --git a/styles/_spacing.scss b/styles/_spacing.scss index ca9fe6450..f4233362b 100644 --- a/styles/_spacing.scss +++ b/styles/_spacing.scss @@ -1 +1,2 @@ $page-margin-x: 60px; +$home-spacer-y: 13px + 12px; diff --git a/styles/global.scss b/styles/global.scss index 1c607b6e0..db8814ce7 100644 --- a/styles/global.scss +++ b/styles/global.scss @@ -1 +1,8 @@ @use 'scss-reset/reset'; + +html, +body { + // overflow: hidden; + + // height: 100%; +}