Refactor/to-scss-related-posts

CHANGELOG.md

@@ -180,6 +180,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Decorations/Bracket
   - Decorations/Stick
   - TwoColumn
+  - RelatedPosts
 - Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling

components/blog/RelatedPosts/RelatedPosts.module.scss

@@ -0,0 +1,16 @@
+@use '@/styles/typography' as *;
+
+.list {
+  text-align: left;
+  line-height: normal;
+  padding: 0;
+  list-style: none;
+
+  li {
+    margin-top: 0.8rem;
+  }
+
+  a {
+    @include typography-link;
+  }
+}

components/blog/RelatedPosts/index.js

@@ -1,13 +1,13 @@
-import S from './styles';
 import Container from '@/components/containers/Container';
+import styles from './RelatedPosts.module.scss';
 
 export default function RelatedOrLatestPosts({ relatedPosts, latestPosts }) {
   return (
     <Container>
       {relatedPosts.length != 0 ? (
         <>
           <h3>Related Posts</h3>
-          <S.List>
+          <ul className={styles.list}>
             {relatedPosts.map(relatedPost => {
               return (
                 <li key={relatedPost.id}>
@@ -17,12 +17,12 @@ export default function RelatedOrLatestPosts({ relatedPosts, latestPosts }) {
                 </li>
               );
             })}
-          </S.List>
+          </ul>
         </>
       ) : (
         <>
           <h3>Latest Posts</h3>
-          <S.List>
+          <ul className={styles.list}>
             {latestPosts &&
               latestPosts.map(latestPost => {
                 return (
@@ -33,7 +33,7 @@ export default function RelatedOrLatestPosts({ relatedPosts, latestPosts }) {
                   </li>
                 );
               })}
-          </S.List>
+          </ul>
         </>
       )}
     </Container>

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;
 }
 

styles/_typography.scss

@@ -0,0 +1,65 @@
+@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-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;
+  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-primary;
+  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;
+}

styles/_variables.scss

@@ -10,6 +10,23 @@ $medium-desktop-breakpoint: 1250px;
 $large-desktop-breakpoint: 1440px;
 $extra-large-breakpoint: 2560px;
 
-//Fonts
-$copy-font: 'Assistant';
-$heading-font: 'Open Sans';
+// Font Tokens
+// Font Family
+$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
+$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