From cff78eb681aa280235e9fc9e7d21d3fd284023ce Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Tue, 15 Jul 2025 08:03:54 -0700 Subject: [PATCH 1/7] Migrate from styled-components to SCSS module --- .../blog/RelatedPosts/RelatedPosts.module.scss | 14 ++++++++++++++ components/blog/RelatedPosts/index.js | 10 +++++----- components/blog/RelatedPosts/styles.js | 15 --------------- 3 files changed, 19 insertions(+), 20 deletions(-) create mode 100644 components/blog/RelatedPosts/RelatedPosts.module.scss delete mode 100644 components/blog/RelatedPosts/styles.js diff --git a/components/blog/RelatedPosts/RelatedPosts.module.scss b/components/blog/RelatedPosts/RelatedPosts.module.scss new file mode 100644 index 00000000..6bc665a4 --- /dev/null +++ b/components/blog/RelatedPosts/RelatedPosts.module.scss @@ -0,0 +1,14 @@ +.list { + text-align: left; + line-height: normal; + padding: 0; + list-style: none; + + li { + margin-top: 0.8rem; + } + + a { + font-size: 1.5rem; + } +} diff --git a/components/blog/RelatedPosts/index.js b/components/blog/RelatedPosts/index.js index dc04ec9b..6851f401 100644 --- a/components/blog/RelatedPosts/index.js +++ b/components/blog/RelatedPosts/index.js @@ -1,5 +1,5 @@ -import S from './styles'; import Container from '@/components/containers/Container'; +import styles from './RelatedPosts.module.scss'; export default function RelatedOrLatestPosts({ relatedPosts, latestPosts }) { return ( @@ -7,7 +7,7 @@ export default function RelatedOrLatestPosts({ relatedPosts, latestPosts }) { {relatedPosts.length != 0 ? ( <>

Related Posts

- + ) : ( <>

Latest Posts

- +
    {latestPosts && latestPosts.map(latestPost => { return ( @@ -33,7 +33,7 @@ export default function RelatedOrLatestPosts({ relatedPosts, latestPosts }) { ); })} - +
)} diff --git a/components/blog/RelatedPosts/styles.js b/components/blog/RelatedPosts/styles.js deleted file mode 100644 index d3c56c13..00000000 --- a/components/blog/RelatedPosts/styles.js +++ /dev/null @@ -1,15 +0,0 @@ -import styled from 'styled-components'; - -const List = styled.ul` - font-size: 1.5rem !important; - text-align: left; - line-height: normal; - padding: 0; - list-style: none; - li { - margin-top: 0.8rem; - } -`; -export default { - List, -}; From d3f460cfb97cc9ac6ed043b39881a801adff04d3 Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Tue, 15 Jul 2025 08:06:12 -0700 Subject: [PATCH 2/7] Update CHANGELOG --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 77b466e7..3e8d6c1c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -167,5 +167,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - SearchBar - BlogPostsContainer - RevealContentContainer + - RelatedPosts - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility -- Updated SearchInput width to 100% for better styling \ No newline at end of file +- Updated SearchInput width to 100% for better styling From 9c38b701318d81c6c074d25ed6916ef335238b34 Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Tue, 5 Aug 2025 17:33:32 -0700 Subject: [PATCH 3/7] Update font variables name and add font fallback --- styles/_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/_variables.scss b/styles/_variables.scss index ac3d97d8..42f830e7 100644 --- a/styles/_variables.scss +++ b/styles/_variables.scss @@ -11,5 +11,5 @@ $large-desktop-breakpoint: 1440px; $extra-large-breakpoint: 2560px; //Fonts -$copy-font: 'Assistant'; -$heading-font: 'Open Sans'; +$font-family-primary: 'Assistant', sans-serif; +$font-family-secondary: 'Open Sans', sans-serif; From 1300297b2a6af601fabf36efcd54d6af88abff38 Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Tue, 5 Aug 2025 20:15:44 -0700 Subject: [PATCH 4/7] Add Typography mixins and font variables --- styles/_typography.scss | 50 +++++++++++++++++++++++++++++++++++++++++ styles/_variables.scss | 20 +++++++++++++++-- 2 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 styles/_typography.scss diff --git a/styles/_typography.scss b/styles/_typography.scss new file mode 100644 index 00000000..6b446aba --- /dev/null +++ b/styles/_typography.scss @@ -0,0 +1,50 @@ +@use './variables' as *; +@use './mixins' as *; + +@mixin typography-header-page { + font-family: $font-family-primary; + font-size: $font-size-lg; + font-weight: $font-weight-bold; + line-height: $line-height-lg; +} + +@mixin typography-header-sub { + font-family: $font-family-primary; + font-size: $font-size-md; + font-weight: $font-weight-bold; + line-height: $line-height-md; +} + +@mixin typography-copy { + font-family: $font-family-secondary; + font-size: $font-size-sm; + font-weight: $font-weight-regular; + line-height: $line-height-sm; +} + +@mixin typography-label { + @include typography-copy; +} + +@mixin typography-input { + @include typography-copy; +} + +@mixin typography-placeholder { + @include typography-copy; +} + +@mixin typography-link { + font-family: $font-family-secondary; + font-size: $font-size-xs; + font-weight: $font-weight-regular; + line-height: $line-height-sm; + + @include desktop { + font-size: $font-size-sm; + } +} + +@mixin typography-button { + @include typography-copy; +} diff --git a/styles/_variables.scss b/styles/_variables.scss index 42f830e7..b67edb7e 100644 --- a/styles/_variables.scss +++ b/styles/_variables.scss @@ -10,6 +10,22 @@ $medium-desktop-breakpoint: 1250px; $large-desktop-breakpoint: 1440px; $extra-large-breakpoint: 2560px; -//Fonts +// Font Tokens +// Font Family $font-family-primary: 'Assistant', sans-serif; -$font-family-secondary: 'Open Sans', sans-serif; +$font-family-secondary: 'Opens Sans', sans-serif; + +// Font Size +$font-size-xs: 1.25rem; // 20px +$font-size-sm: 1.5rem; // 24px +$font-size-md: 2.25rem; // 36px +$font-size-lg: 4.5rem; // 72px + +// Font Weight +$font-weight-regular: 400; +$font-weight-bold: 700; + +// Line Height +$line-height-sm: 1.9375rem; // 31px +$line-height-md: 2.875rem; // 46px +$line-height-lg: 5rem; // 80px From 0c8654f538452ace35e626a42fe7cf00c545bd56 Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Tue, 5 Aug 2025 20:17:54 -0700 Subject: [PATCH 5/7] Update font styling on links on RelatedPosts component --- components/blog/RelatedPosts/RelatedPosts.module.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/blog/RelatedPosts/RelatedPosts.module.scss b/components/blog/RelatedPosts/RelatedPosts.module.scss index 6bc665a4..da8bbb32 100644 --- a/components/blog/RelatedPosts/RelatedPosts.module.scss +++ b/components/blog/RelatedPosts/RelatedPosts.module.scss @@ -1,3 +1,5 @@ +@use '@/styles/typography' as *; + .list { text-align: left; line-height: normal; @@ -9,6 +11,6 @@ } a { - font-size: 1.5rem; + @include typography-link; } } From 8544bef8474c1b653fe2e2df14d7061b7936385c Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Wed, 6 Aug 2025 21:29:36 -0700 Subject: [PATCH 6/7] Update typography-link mixin font family and font name on variables partial --- styles/_typography.scss | 2 +- styles/_variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/_typography.scss b/styles/_typography.scss index 6b446aba..4d7b8baf 100644 --- a/styles/_typography.scss +++ b/styles/_typography.scss @@ -35,7 +35,7 @@ } @mixin typography-link { - font-family: $font-family-secondary; + font-family: $font-family-primary; font-size: $font-size-xs; font-weight: $font-weight-regular; line-height: $line-height-sm; diff --git a/styles/_variables.scss b/styles/_variables.scss index b67edb7e..1120998a 100644 --- a/styles/_variables.scss +++ b/styles/_variables.scss @@ -13,7 +13,7 @@ $extra-large-breakpoint: 2560px; // Font Tokens // Font Family $font-family-primary: 'Assistant', sans-serif; -$font-family-secondary: 'Opens Sans', sans-serif; +$font-family-secondary: 'Open Sans', sans-serif; // Font Size $font-size-xs: 1.25rem; // 20px From 6b9a6b5c7b0e81eac7181a0fa09a4b2e6ce65db2 Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Sun, 10 Aug 2025 21:57:21 -0700 Subject: [PATCH 7/7] Update typography mixin and font variables. Update font styling on Member component --- components/containers/Member/Member.module.scss | 11 ++++------- styles/_typography.scss | 15 +++++++++++++++ styles/_variables.scss | 1 + 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/components/containers/Member/Member.module.scss b/components/containers/Member/Member.module.scss index 4fd8f0fb..3ccfadaa 100644 --- a/components/containers/Member/Member.module.scss +++ b/components/containers/Member/Member.module.scss @@ -1,4 +1,6 @@ @use '@/styles/index' as *; +@use '@/styles/typography' as *; +@use '@/styles/variables' as *; .card { margin: 1rem 1rem 0 0.5rem; @@ -24,20 +26,15 @@ } .name { - font-style: italic; - font-family: $heading-font; - font-size: 1.5rem; + @include typography-title; color: var(--color-primary-content); margin-bottom: 0px; - line-height: unset; } %headingStyle { - font-family: $heading-font; - font-size: 1rem; + @include typography-subtitle; color: var(--color-primary-content); text-align: left; - line-height: normal; margin: 0px; } diff --git a/styles/_typography.scss b/styles/_typography.scss index 4d7b8baf..c070d788 100644 --- a/styles/_typography.scss +++ b/styles/_typography.scss @@ -15,6 +15,21 @@ line-height: $line-height-md; } +@mixin typography-title { + font-family: $font-family-secondary; + font-size: $font-size-sm; + font-weight: $font-weight-bold; + font-style: italic; + line-height: normal; +} + +@mixin typography-subtitle { + font-family: $font-family-secondary; + font-size: $font-size-2xs; + font-weight: $font-weight-bold; + line-height: normal; +} + @mixin typography-copy { font-family: $font-family-secondary; font-size: $font-size-sm; diff --git a/styles/_variables.scss b/styles/_variables.scss index 1120998a..699d50df 100644 --- a/styles/_variables.scss +++ b/styles/_variables.scss @@ -16,6 +16,7 @@ $font-family-primary: 'Assistant', sans-serif; $font-family-secondary: 'Open Sans', sans-serif; // Font Size +$font-size-2xs: 1rem; // 16px $font-size-xs: 1.25rem; // 20px $font-size-sm: 1.5rem; // 24px $font-size-md: 2.25rem; // 36px