From 83ac1a83568cdb954e302c84f4c32beb765dd83a Mon Sep 17 00:00:00 2001 From: andr-ew Date: Wed, 12 Jul 2023 22:28:07 -0500 Subject: [PATCH] nav: style info & filters --- app/(home)/layout.js | 8 ++- app/(home)/styles.module.scss | 3 + app/layout.js | 6 +- app/styles.module.scss | 1 - components/home/index.js | 31 +++++++--- components/home/styles.module.scss | 31 ++++++++++ styles/_typography.scss | 92 ++++++++++++++++++++++++++++++ 7 files changed, 157 insertions(+), 15 deletions(-) create mode 100644 app/(home)/styles.module.scss create mode 100644 components/home/styles.module.scss create mode 100644 styles/_typography.scss diff --git a/app/(home)/layout.js b/app/(home)/layout.js index 5d8814599..51b304b96 100644 --- a/app/(home)/layout.js +++ b/app/(home)/layout.js @@ -1,14 +1,16 @@ -import { TypesNav } from '/components/home'; +import { HomeNav } from '/components/home'; + +import styles from './styles.module.scss'; export default function HomeLayout({ children }) { return ( <>
-
{children}
+
{children}
); } diff --git a/app/(home)/styles.module.scss b/app/(home)/styles.module.scss new file mode 100644 index 000000000..6326b3347 --- /dev/null +++ b/app/(home)/styles.module.scss @@ -0,0 +1,3 @@ +.main { + padding: 0 60px; +} diff --git a/app/layout.js b/app/layout.js index f61693c4e..6f20dbd86 100644 --- a/app/layout.js +++ b/app/layout.js @@ -7,16 +7,16 @@ const CenturyNovaSB = localFont({ src: [ { path: '../fonts/CenturyNovaSBRoman/font.woff', - weight: '400', + weight: '300', style: 'normal', }, { path: '../fonts/CenturyNovaSBItalic/font.woff', - weight: '400', + weight: '300', style: 'italic', }, ], - variable: '--font-century-nova-sb', + variable: '--font-century-nova', }); const Dia = localFont({ src: [ diff --git a/app/styles.module.scss b/app/styles.module.scss index 36032c2d3..a564d88ba 100644 --- a/app/styles.module.scss +++ b/app/styles.module.scss @@ -10,6 +10,5 @@ a, a:visited { color: colors.$black; - text-decoration: none; } } diff --git a/components/home/index.js b/components/home/index.js index a5bf76c0e..f14ab9988 100644 --- a/components/home/index.js +++ b/components/home/index.js @@ -6,6 +6,7 @@ import Image from 'next/image'; import { getCollectionProducts, getMenu } from 'lib/shopify'; import { PriceRanges } from '/components/price.js'; +import styles from './styles.module.scss'; export async function HomeProduct({ product }) { const featuredImage = product?.images?.[0]; @@ -65,15 +66,29 @@ export async function HomeProductsList({ collection }) { export async function TypesNav() { const typesMenu = await getMenu('types-nav'); - // console.log({ typesMenu }); - return ( - +

); } + +export const HomeNav = () => ( +
+ + Information + + +
+); diff --git a/components/home/styles.module.scss b/components/home/styles.module.scss new file mode 100644 index 000000000..6d2fa19a4 --- /dev/null +++ b/components/home/styles.module.scss @@ -0,0 +1,31 @@ +@use 'styles/_typography'; + +.homeNav { + padding: 51px 115px 22px 115px; + + display: grid; + grid-template-columns: 200px 1fr 200px; + align-items: baseline; + + :global .information { + @include typography.header-cta; + } +} + +.typesNav { + text-align: center; + + :global .filter { + @include typography.body; + } + + :global .not-link { + @include typography.body-cta; + + text-decoration-line: none; + } + + :global .link { + @include typography.body-cta; + } +} diff --git a/styles/_typography.scss b/styles/_typography.scss new file mode 100644 index 000000000..5d626ffa3 --- /dev/null +++ b/styles/_typography.scss @@ -0,0 +1,92 @@ +@mixin title { + font-family: var(--font-century-nova); + font-size: 95px; + font-style: normal; + font-weight: 300; + line-height: 90px; /* 94.737% */ + letter-spacing: -5.7px; +} + +@mixin header { + font-family: var(--font-century-nova); + font-size: 35px; + font-style: normal; + font-weight: 300; + line-height: 39px; /* 111.429% */ + letter-spacing: -1.4px; + + text-decoration-thickness: 5%; + text-underline-offset: 7%; +} + +@mixin subheader { + font-family: var(--font-dia); + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 100% */ + text-transform: uppercase; +} + +@mixin body { + font-family: var(--font-century-nova); + font-size: 25px; + font-style: normal; + font-weight: 300; + line-height: 30px; /* 120% */ + letter-spacing: -0.75px; +} + +@mixin list { + font-family: var(--font-dia); + font-size: 18px; + font-style: normal; + font-weight: 100; + line-height: 19px; +} + +@mixin caption { + font-family: var(--font-dia); + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: 10px; /* 100% */ + letter-spacing: 0.1px; + text-transform: uppercase; +} + +@mixin header-cta($decoration: underline) { + font-family: var(--font-century-nova); + font-size: 35px; + font-style: normal; + font-weight: 100; + line-height: 35px; /* 100% */ + letter-spacing: -1.4px; + text-decoration-line: $decoration; + + text-decoration-thickness: 5%; + text-underline-offset: 7%; +} + +@mixin body-cta($decoration: underline) { + font-family: var(--font-dia); + font-size: 25px; + font-style: normal; + font-weight: 100; + line-height: 30px; + letter-spacing: -0.25px; + text-decoration-line: $decoration; + + text-decoration-thickness: 4%; + text-underline-offset: 4%; +} + +@mixin list-cta($decoration: underline) { + font-family: var(--font-dia); + font-size: 18px; + font-style: normal; + font-weight: 100; + line-height: 20px; /* 111.111% */ + text-transform: uppercase; + text-decoration-line: $decoration; +}