refactor: make view components more modular

fetchers/getAnswers.js

@@ -40,9 +40,9 @@ const getAnswers = async slug => {
       author: {
         uid: ansObj.node.answer.author.uid,
         isAnon: ansObj.node.answer.author.isAnon,
-        avatar: ansObj.node.answer.author.profileImageUrl,
+        image: ansObj.node.answer.author.profileImageUrl,
         isVerified: ansObj.node.answer.author.isVerified,
-        profile: ansObj.node.answer.author.profileUrl,
+        url: ansObj.node.answer.author.profileUrl,
         name: `${ansObj.node.answer.author.names[0].givenName} ${ansObj.node.answer.author.names[0].familyName}`,
         credential: ansObj.node.answer.authorCredential?.translatedString,
         // additionalCredentials: ansObj.node.answer?.credibilityFacts.map(),

fetchers/getTopic.js

@@ -35,7 +35,7 @@ const getTopic = async slug => {
       uid: author.user.uid,
       name: `${author.user.names[0].givenName} ${author.user.names[0].familyName}`,
       profile: author.user.profileUrl,
-      avatar: author.user.profileImageUrl,
+      image: author.user.profileImageUrl,
       isAnon: author.user.isAnon,
       isVerified: author.user.isVerified,
       numFollowers: author.user.followerCount,

views/pug/layout/_answer.pug

@@ -1,74 +0,0 @@
-//-//////////////////////////////////////////////////////
-//-                 INCLUDES/EXTENDS
-//-//////////////////////////////////////////////////////
-include ../mixins/_formatText.pug
-
-//-//////////////////////////////////////////////////////
-//-                LOCAL HELPER MIXINS
-//-//////////////////////////////////////////////////////
-//- mixin to format date and stuff
-mixin addDate(date)
-  - const dateObj = new Date(date / 1000);
-    time.answer__metadata-data(datetime= dateObj.toISOString(), title=dateObj.toUTCString())= Intl.DateTimeFormat('en-US', {year: '2-digit', month: 'short', day: 'numeric' }).format(dateObj)
-
-
-//-//////////////////////////////////////////////////////
-//-                 MAIN CONTENT
-//-//////////////////////////////////////////////////////
-article.answer
-  //- ABOUT AUTHOR
-  figure.answer__author
-    figcaption.answer__author-name
-      if answerObj.author.isAnon
-        span Anonymous
-      else
-        a.answers__link(href=answerObj.author.profile)= answerObj.author.name 
-      if answerObj.author.isVerified
-        svg.answer__icon
-          title verified
-          use(href='/misc/sprite.svg#icon-verified')
-    img.answer__author-image(src=answerObj.author.avatar.replace('https://', "/api/v1/image/"), alt=`${answerObj.author.name}'s profile photo`, loading='lazy')
-    p.answer__author-credentials(aria-label=`${answerObj.author.name}'s credentials`)= answerObj.author.credential || ''
-
-  //- ORIGINAL QUESTION
-  h3.answer__question.heading.heading__tertiary
-    span Originally answered to 
-    a.answer__link.answers__link(href=answerObj.originalQuestion.url)
-      +spansChecker(answerObj.originalQuestion.text[0].spans)
-
-  //- ANSWER
-  .answer__text
-    +formatText(answerObj.text)
-    //- for quora plus answers. since quora only shows half answer, we gotta warn viewer.
-    unless answerObj.isViewable
-      p.answer__unviewable
-        svg.answer__icon: use(href='/misc/sprite.svg#icon-danger')
-        | This is a Quora plus answer and hence full answer is not viewable.
-
-  //- ANSWER METADATA
-  .answer__metadata
-    p.answer__metadata-item
-      svg.answer__icon: use(href='/misc/sprite.svg#icon-clock')
-      +addDate(answerObj.creationTime)
-      span.answer__metadata-text  Answered
-    if answerObj.updatedTime
-      p.answer__metadata-item 
-        svg.answer__icon: use(href='/misc/sprite.svg#icon-clock-edit')
-        +addDate(answerObj.updatedTime)
-        span.answer__metadata-text  Edited
-    p.answer__metadata-item
-      svg.answer__icon: use(href='/misc/sprite.svg#icon-eye')
-      span.answer__metadata-data= answerObj.numViews
-      span.answer__metadata-text  Views
-    p.answer__metadata-item
-      svg.answer__icon: use(href='/misc/sprite.svg#icon-arrow-up')
-      span.answer__metadata-data= answerObj.numUpvotes
-      span.answer__metadata-text  Upvotes
-    p.answer__metadata-item
-      svg.answer__icon: use(href='/misc/sprite.svg#icon-comments')
-      span.answer__metadata-data= answerObj.numComments
-      span.answer__metadata-text  Comments
-    p.answer__metadata-item
-      svg.answer__icon: use(href='/misc/sprite.svg#icon-share')
-      span.answer__metadata-data= answerObj.numShares
-      span.answer__metadata-text  Shares

views/pug/mixins/_answer.pug

@@ -0,0 +1,50 @@
+//-//////////////////////////////////////////////////////
+//-                 INCLUDES/EXTENDS
+//-//////////////////////////////////////////////////////
+include ../mixins/_formatText
+include ../mixins/_metadata
+include ../mixins/_utils
+
+//-//////////////////////////////////////////////////////
+//-                 MAIN CONTENT
+//-//////////////////////////////////////////////////////
+mixin addAnswer(answer)
+  article.answer
+    //- ABOUT AUTHOR
+    figure.metadata-primary
+      figcaption.metadata-primary__heading
+        if answer.author.isAnon
+          span Anonymous
+        else
+          a.link.metadata-primary__link(href=answer.author.url)= answer.author.name
+        if answer.author.isVerified
+          svg.icon.metadata-primary__icon
+            title verified
+            use(href='/misc/sprite.svg#icon-verified')
+      img.metadata-primary__image(src=answer.author.image.replace('https://', "/api/v1/image/"), alt=`${answer.author.name}'s profile photo`, loading='lazy')
+      p.metadata-primary__misc(aria-label=`${answer.author.name}'s credentials`)= answer.author.credential || ''
+
+    //- ORIGINAL QUESTION
+    h3.answer__question.heading.heading__tertiary
+      span Originally answered to 
+      a.answer__link.answers__link(href=answer.originalQuestion.url)
+        +spansChecker(answer.originalQuestion.text[0].spans)
+
+    //- ANSWER
+    section.answer__text.text__container
+      +formatText(answer.text)
+      //- for quora plus answers. since quora only shows half answer, we gotta warn viewer.
+      unless answer.isViewable
+        p.answer__unviewable
+          svg.icon.answer__icon: use(href='/misc/sprite.svg#icon-danger')
+          | This is a Quora plus answer and hence full answer is not viewable.
+
+    //- ANSWER METADATA
+    section.answer__metadata-secondary.metadata-secondary
+      +addMetadataSecondary('clock', 'Answered', answer.creationTime, 'date')
+      if answer.updatedTime
+        +addMetadataSecondary('clock-edit', 'Updated', answer.updatedTime, 'date')
+      +addMetadataSecondary('eye', 'Views', answer.numViews)
+      +addMetadataSecondary('arrow-up', 'Upvotes', answer.numUpvotes)
+      +addMetadataSecondary('comments', 'Comments', answer.numComments)
+      +addMetadataSecondary('share', 'Shares', answer.numShares)

views/pug/mixins/_formatText.pug

@@ -8,28 +8,28 @@ mixin spansChecker(spans)
     - if(span.modifiers.math)
       //- setting that var in the base.pug value to true here, so that mathjax library is loaded in the end
       - someAnswerContainsMath = true;
-      span.answer__span-math= `\\(${span.text}\\)`
+      span.text__span-math= `\\(${span.text}\\)`
     //- handle small code text
     - else if (span.modifiers.code) 
-      code.answer__span-code= span.text
+      code.text__span-code= span.text
     //- handle misc. embedded content
     - else if (span.modifiers.embed)
-      a.answer__span-link.answers__link(href=span.modifiers.embed.url)= span.modifiers.embed.title || '(link to user embedded content)'
+      a.text__span-link.text__link(href=span.modifiers.embed.url)= span.modifiers.embed.title || '(link to user embedded content)'
     //- handle links
     - else if (span.modifiers.link) //- removing quora.com from the link in case it is a quora.com link.
-      a.answer__span-link.answers__link(href=span.modifiers.link.url.split('https://www.quora.com')[1] || span.modifiers.link.url)=span.text
+      a.text__span-link.text__link(href=span.modifiers.link.url.split('https://www.quora.com')[1] || span.modifiers.link.url)=span.text
     //- handle bold + italic text
     - else if (!!span.modifiers.bold && !!span.modifiers.italic)
-      strong.answer__span-bold: em.answer__span-italic= span.text
+      strong.text__span-bold: em.text__span-italic= span.text
     //- handle bold text
     - else if (!!span.modifiers.bold)
-      strong.answer__span-bold= span.text
+      strong.text__span-bold= span.text
     //- handle italic text
     - else if (!!span.modifiers.italic)
-      em.answer__span-italic= span.text
+      em.text__span-italic= span.text
     //- regular plain text
     - else 
-      span.answer__span-plain= span.text 
+      span.text__span-plain= span.text 
 
 //-//////////////////////////////////////////////////////
 //-           MAIN MIXIN TO FORMAT ANY TEXT
@@ -38,32 +38,33 @@ mixin formatText(text)
   each para in text
     //-  handle images
     -if(para.type ==='image')
-      img.answer__para.answer__image(src=para.spans[0].modifiers.master_url.replace('https://', "/api/v1/image/"), alt='User embedded image', loading='lazy')
+      .text__para.text__image-container
+        img.text__image(src=para.spans[0].modifiers.master_url.replace('https://', "/api/v1/image/"), alt='User embedded image', loading='lazy')
     //- handle code blocks
     - else if (para.type ==='code')
-      pre.answer__para.answer__code: code
+      pre.text__para.text__code: code
         +spansChecker(para.spans)
     //- handle quotes
     - else if(para.quoted)
-      blockquote.answer__para.answer__quote 
+      blockquote.text__para.text__quote 
         +spansChecker(para.spans)
     //- handling lists
     -else if(para.type.includes('-list'))
-      p(class=`answer__para answer__${para.type} answer__${para.type}--${para.indent}` role='listitem')
+      p(class=`text__para text__${para.type} text__${para.type}--${para.indent}` role='listitem')
         +spansChecker(para.spans)
     //- handling horizontal rule
     - else if(para.type === 'horizontal-rule')
-      hr.answer__para.answer__hr
+      hr.text__para.text__hr
     //- handling embedded youtube video
     - else if(para.type === 'yt-embed')
-        .answer__para.answer__embed
+        .text__para.text__embed
-          a.answer__span-link.answers__link(href=para.spans[0].modifiers.embed.url) (link to user-embedded YouTube video)
+          a.text__span-link.text__link(href=para.spans[0].modifiers.embed.url) (link to user-embedded YouTube video)
     //- handling embedded tweet
     - else if(para.type === 'tweet')
-        .answer__para.answer__embed.answer__embed-tweet
+        .text__para.text__embed.text__embed-tweet
           //- directly pasting raw HTML which pug will process just fine
           | !{para.spans[0].modifiers.embed.html}
     //- rest of the types that don't need/can't be put in a semantic html tag
     - else
-      p(class=`answer__para answer__${para.type}`)
+      p(class=`text__para text__${para.type}`)
         +spansChecker(para.spans)

views/pug/mixins/_metadata.pug

@@ -0,0 +1,19 @@
+//-//////////////////////////////////////////////////////
+//-                 INCLUDES/EXTENDS
+//-//////////////////////////////////////////////////////
+include ../mixins/_formatText
+include ../mixins/_utils
+
+mixin addMetadataSecondary(iconName, name, number, numberType='number')
+  p.metadata-secondary__item
+    svg.icon.metadata-secondary__icon: use(href=`/misc/sprite.svg#icon-${iconName}`)
+    case numberType
+      when 'number'
+        +formatNumber(number, 'metadata-secondary__data')
+      when 'date'
+        +addDate(number)
+      when 'empty'
+        span
+      default
+        span= number
+    span.metadata-secondary__text= name

views/pug/mixins/_utils.pug

@@ -0,0 +1,10 @@
+//-//////////////////////////////////////////////////////
+//-        SMALL MIXINS THAT ARE USED IN MANY PLACES
+//-//////////////////////////////////////////////////////
+
+mixin addDate(date, className='')
+  - const dateObj = new Date(date / 1000);
+    time(class= className, datetime= dateObj.toISOString(), title=dateObj.toUTCString())= Intl.DateTimeFormat('en-US', {year: '2-digit', month: 'short', day: 'numeric' }).format(dateObj)
+
+mixin formatNumber(number, className='')
+  span(class=className)= new Intl.NumberFormat().format(number)

views/pug/pages/answers.pug

@@ -3,6 +3,7 @@
 //-//////////////////////////////////////////////////////
 extends ../base
 include ../mixins/_formatText
+include ../mixins/_answer
 
 //-//////////////////////////////////////////////////////
 //-                   MAIN CONTENT
@@ -23,8 +24,8 @@ block content
     .answers-box.answers__answers-box
       h2.heading.heading__secondary.answers__answers-box-heading Answers
       .answers-box__list
-        each answerObj in data.answers 
+        each answer in data.answers
-          include ../layout/_answer
+          +addAnswer(answer) 
 
     //- TOPICS TAGGED WITH THIS QUESTION
     aside.topics.answers__topics 

views/pug/pages/topic.pug

@@ -2,13 +2,8 @@
 //-                 INCLUDES/EXTENDS
 //-//////////////////////////////////////////////////////
 extends ../base
-
+include ../mixins/_metadata
-//-//////////////////////////////////////////////////////
+include ../mixins/_utils
-//-                LOCAL HELPER MIXINS
-//-//////////////////////////////////////////////////////
-//- mixin to make number a bit more readable
-mixin formatNumber(number, ...classes)
-  span(class=classes.join(' '))= new Intl.NumberFormat().format(number)
 
 //-//////////////////////////////////////////////////////
 //-                   MAIN CONTENT
@@ -16,71 +11,52 @@ mixin formatNumber(number, ...classes)
 block content
   main#main.main.topic
     //- TOPIC NAME AND METADATA
-    .topic__stats.topic-stats
+    section.topic__stats.topic-stats
-      h1.heading.heading__primary.topic__heading.topic-stats__heading= data.name
+      .metadata-primary
-      img.topic-stats__image(src=data.image.replace('https://', "/api/v1/image/") alt=`image depicting ${data.name}`, loading='lazy')
+        h1.heading.heading__primary.metadata-primary__heading.topic__name= data.name
-      if data.aliases.length
+        img.metadata-primary__image(src=data.image.replace('https://', "/api/v1/image/") alt=`cover photo of '${data.name}' topic`, loading='lazy')
-        p.topic-stats__aliases
+        p.metadata-primary__misc
-          span.topic-stats__aliases-text Also known as: 
+          if data.aliases.length
-          span.topic-stats__aliases-list= data.aliases.join(', ')
+            span Also known as: 
-      .topic-stats__metadata
+            span= data.aliases.join(', ')
-        p.topic-stats__metadata-item
+      .metadata-secondary
-          svg.icon.topic-stats__icon: use(href='/misc/sprite.svg#icon-user')
+        +addMetadataSecondary('user','Followers', data.numFollowers)
-          +formatNumber(data.numFollowers, 'topic-stats__metadata-data')
+        +addMetadataSecondary('question','Questions', data.numQuestions)
-          span.topic-stats__metadata-text  Followers
-        p.topic-stats__metadata-item
-          svg.icon.topic-stats__icon: use(href='/misc/sprite.svg#icon-question')
-          +formatNumber(data.numQuestions, 'topic-stats__metadata-data')
-          span.topic-stats__metadata-text  Questions
         if data.isAdult
-          p.topic-stats__metadata-item
+          +addMetadataSecondary('danger', 'Adult Topic', '18+', true)
-            svg.icon.topic-stats__icon: use(href='/misc/sprite.svg#icon-danger')
+        a.link(href='https://www.quora.com' + data.url) View on Quora
-            span.topic-stats__metadata-data 18+
+
-            span.topic-stats__metadata-text  Adult Topic
-        a.topic__link(href='https://www.quora.com' + data.url) View on Quora
-    
     //- AUTHORS RELATED TO THE TOPIC AND METADATA
     .topic__famous-authors.famous-authors
-      h2.heading.heading__secondary.famous-authors__heading Most viewed authors
+      h2.heading.heading__secondary Most viewed authors
       .famous-authors__list
         each author in data.mostViewedAuthors
-          figure.famous-authors__author
+          .famous-authors__item
-            figcaption.famous-authors__author-name
+            figure.metadata-primary
-              if author.isAnon
+              figcaption.metadata-primary__heading
-                span Anonymous
+                if author.isAnon
-              else
+                  span Anonymous
-                a.topic__link(href=author.profile)= author.name 
+                else
-              if author.isVerified
+                  a.link(href=author.profile)= author.name 
-                svg.famous-authors__icon
+                if author.isVerified
-                  title verified
+                  svg.icon.metadata-primary__icon
-                  use(href='/misc/sprite.svg#icon-verified')
+                    title verified
-            img.famous-authors__author-image(src=author.avatar.replace('https://', "/api/v1/image/"), alt=`${author.name}'s profile photo`, loading='lazy')
+                    use(href='/misc/sprite.svg#icon-verified')
-            if author.credential
+              img.metadata-primary__image(src=author.image.replace('https://', "/api/v1/image/"), alt=`${author.name}'s profile photo`, loading='lazy')
-            p.famous-authors__author-credentials(aria-label=`${author.name}'s credentials`)= author.credential || ''
+              p.metadata-primary__misc(aria-label=`${author.name}'s credentials`)= author.credential || ''
-            .famous-authors__metadata
+            .metadata-secondary
-              p.famous-authors__metadata-item
+              +addMetadataSecondary('user', 'Followers', author.numFollowers)
-                svg.icon.famous-authors__icon: use(href='/misc/sprite.svg#icon-user')
+              +addMetadataSecondary('eye', 'Views', author.numViews)
-                +formatNumber(author.numFollowers, 'famous-authors__metadata-data')
+              +addMetadataSecondary('comments', 'Answers', author.numAnswers)
-                span.famous-authors__metadata-text  Followers
-              p.famous-authors__metadata-item
-                svg.icon.famous-authors__icon: use(href='/misc/sprite.svg#icon-eye')
-                +formatNumber(author.numViews, 'famous-authors__metadata-data')
-                span.famous-authors__metadata-text  Views
-              p.famous-authors__metadata-item
-                svg.icon.famous-authors__icon: use(href='/misc/sprite.svg#icon-comments')
-                +formatNumber(author.numAnswers, 'famous-authors__metadata-data')
-                span.famous-authors__metadata-text  Answers
 
     //- RELATED TOPICS
     .topic__related-topics.related-topics
-      h2.heading.heading__secondary.related-topics__heading Related Topics
+      h2.heading.heading__secondary Related Topics
       .related-topics__list
         each topic in data.relatedTopics
-          .related-topics__topic
+          .metadata-primary
-            a.topic__link.related-topics__topic-name(href=topic.url)= topic.name
+            a.link.metadata-primary__heading(href=topic.url)= topic.name
-            img.related-topics__image(src=topic.image.replace('https://', "/api/v1/image/") alt=`image depicting ${topic.name}`, loading='lazy')
+            img.metadata-primary__image(src=topic.image.replace('https://', "/api/v1/image/") alt=`cover photo of '${topic.name}' topic`, loading='lazy')
-            .related-topics__metadata
+            p.metadata-primary__misc
-              p.related-topics__metadata-item
+              +formatNumber(topic.numFollowers)
-                svg.icon.related-topics__icon: use(href='/misc/sprite.svg#icon-user')
+              | Followers
-                +formatNumber(topic.numFollowers, 'related-topics__metadata-data')
-                span.topic-stats__metadata-text  Followers

views/sass/_components.scss

@@ -3,28 +3,6 @@
 ////////////////////////////////////////////////////////
 @use 'mixins' as *;
 
-////////////////////////////////////////////////////////
-//             SKIP TO MAIN CONTENT LINK
-////////////////////////////////////////////////////////
-.skip-link {
-  position: absolute;
-  left: 50%;
-  // background: var(--clr-base-bg);
-  color: var(--clr-base-heading);
-  text-decoration: none;
-  text-align: center;
-  font-weight: 500;
-  padding: 0 var(--space-100);
-  border-radius: 0 0 5px 5px;
-  font-size: var(--fs-180);
-  transform: translate(-50%, -150%);
-
-  transition: transform 200ms ease;
-
-  &:is(:focus, :focus-visible) {
-    transform: translate(-50%, 0);
-  }
-}
 ////////////////////////////////////////////////////////
 //                   THEME CHANGER
 ////////////////////////////////////////////////////////
@@ -93,70 +71,178 @@
 .heading {
   color: var(--clr-base-heading);
   font-weight: 600;
+
+  &__primary {
+    font-size: var(--fs-300);
+
+    @include respond-to(bp-550) {
+      font-size: var(--fs-270);
+    }
+  }
 }
 
 ////////////////////////////////////////////////////////
-//                     FEATURES
+//                     LINKS
 ////////////////////////////////////////////////////////
-.features {
+.link {
+  @include format-link(var(--clr-base-link), var(--clr-base-link-alt-alpha));
+}
+
+.skip-link {
+  position: absolute;
+  left: 50%;
+  // background: var(--clr-base-bg);
+  color: var(--clr-base-heading);
+  text-decoration: none;
+  text-align: center;
+  font-weight: 500;
+  padding: 0 var(--space-100);
+  border-radius: 0 0 5px 5px;
+  font-size: var(--fs-180);
+  transform: translate(-50%, -150%);
+
+  transition: transform 200ms ease;
+
+  &:is(:focus, :focus-visible) {
+    transform: translate(-50%, 0);
+  }
+}
+
+////////////////////////////////////////////////////////
+//                     METADATA
+////////////////////////////////////////////////////////
+.metadata-primary {
   display: grid;
-  gap: var(--space-800);
+  gap: 0 var(--space-100);
+  grid-template-columns: auto 1fr;
+  grid-template-rows: repeat(2, min-content);
+  font-size: var(--fs-160);
 
   &__heading {
-    justify-self: center;
+    grid-column: 2 / -1;
-  }
+    align-self: end;
+    color: var(--clr-base-heading-alt-alpha);
+    font-weight: 600;
 
-  &__list {
+    // for verified icon
-    display: grid;
+    display: flex;
-    gap: var(--space-800);
+    gap: var(--space-050);
-    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
+    justify-items: start;
 
-    @include respond-to(bp-900) {
+    // for name linking to profile
-      gap: var(--space-500);
+    a {
-      grid-template-columns: auto;
+      font-size: 1.05em;
+      color: currentColor;
     }
   }
 
-  &__feature {
+  &__misc {
-    display: grid;
+    grid-column: 2 / -1;
-    gap: var(--space-100);
+    align-self: start;
-    grid-template-rows: repeat(3, min-content);
-    font-size: var(--fs-160);
-    // justify-items: center;
-    // text-align: center;
   }
 
-  &__feature-icon {
+  &__image {
+    grid-row: 1 / -1;
+    grid-column: 1 / span 1;
+    margin-block: auto;
+    max-height: var(--img-dim, --fs-600);
+    max-width: var(--img-dim, --fs-600);
+    // min-height: 100%;
+    // min-width: 100%;
+    object-fit: cover;
+
+    clip-path: circle(50% at 50% 50%);
+  }
+
+  &__icon {
+    grid-column: 1 / span 1;
+    justify-self: end;
+    align-self: center;
+
+    height: 1.3em;
+    width: 1.3em;
     fill: var(--clr-base-icon);
-    grid-row: 1 / 2;
+    flex: 0 0 auto;
+  }
+}
 
-    height: 3em;
+.metadata-secondary {
-    width: 3em;
+  justify-self: start;
 
-    @include respond-to(bp-750) {
+  display: flex;
-      height: 2em;
+  gap: var(--space-200);
-      width: 2em;
+  align-items: center;
-    }
+  flex-wrap: wrap;
+
+  &__item {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    gap: 0 var(--space-050);
   }
 
-  &__feature-heading {
+  &__icon {
-    grid-row: 2 / 3;
+    grid-column: 1 / span 1;
-    font-size: 1.3em;
+    justify-self: end;
-  }
+    align-self: center;
-  &__feature-text {
+
-    grid-row: 3 / 4;
+    height: 1.3em;
+    width: 1.3em;
+    fill: var(--clr-base-icon);
   }
 
-  @include respond-to(bp-900) {
+  &__data {
-    gap: var(--space-500);
+    grid-column: -2 / -1;
+    justify-self: start;
   }
-  @include respond-to(bp-750) {
+
-    gap: var(--space-200);
+  &__text {
+    grid-row: 2 / span 1;
+    grid-column: 1 / -1;
+    justify-self: center;
+
+    font-size: 0.9em;
+    color: var(--clr-base-text-alt-alpha);
   }
 }
 
 ////////////////////////////////////////////////////////
-//                     FAQs
+//                     ANSWER
+////////////////////////////////////////////////////////
+.answer {
+  --img-dim: var(--fs-600);
+
+  display: grid;
+  gap: var(--space-200);
+
+  // question area
+  &__question {
+    font-size: 1.05em;
+  }
+
+  &__unviewable {
+    // for aligning both text and svg
+    display: grid;
+    align-content: center;
+    justify-content: start;
+    grid-auto-flow: column;
+    gap: var(--space-100);
+    align-items: center;
+
+    margin-top: var(--space-200);
+    color: var(--clr-base-heading-alt-alpha);
+    font-weight: 500;
+    // border: 1px solid var(--clr-base-icon-alt-alpha);
+    // padding: var(--space-100);
+  }
+
+  &__icon {
+    height: 1.3em;
+    width: 1.3em;
+  }
+}
+
+////////////////////////////////////////////////////////
+//                       FAQs
 ////////////////////////////////////////////////////////
 .faqs {
   display: grid;
@@ -230,7 +316,67 @@
 }
 
 ////////////////////////////////////////////////////////
-//                     ANSWERS
+//               ABOUT PAGE COMPONENTS
+////////////////////////////////////////////////////////
+.features {
+  display: grid;
+  gap: var(--space-800);
+
+  &__heading {
+    justify-self: center;
+  }
+
+  &__list {
+    display: grid;
+    gap: var(--space-800);
+    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
+
+    @include respond-to(bp-900) {
+      gap: var(--space-500);
+      grid-template-columns: auto;
+    }
+  }
+
+  &__feature {
+    display: grid;
+    gap: var(--space-100);
+    grid-template-rows: repeat(3, min-content);
+    font-size: var(--fs-160);
+    // justify-items: center;
+    // text-align: center;
+  }
+
+  &__feature-icon {
+    fill: var(--clr-base-icon);
+    grid-row: 1 / 2;
+
+    height: 3em;
+    width: 3em;
+
+    @include respond-to(bp-750) {
+      height: 2em;
+      width: 2em;
+    }
+  }
+
+  &__feature-heading {
+    grid-row: 2 / 3;
+    font-size: 1.3em;
+  }
+  &__feature-text {
+    grid-row: 3 / 4;
+  }
+
+  @include respond-to(bp-900) {
+    gap: var(--space-500);
+  }
+  @include respond-to(bp-750) {
+    gap: var(--space-200);
+  }
+}
+
+////////////////////////////////////////////////////////
+//                ANSWER PAGE COMPONENTS
 ////////////////////////////////////////////////////////
 .answers-box {
   display: grid;
@@ -242,120 +388,6 @@
   }
 }
 
-.answer {
-  display: grid;
-  gap: var(--space-200);
-
-  // author area
-  &__author {
-    display: grid;
-    gap: 0 var(--space-100);
-    grid-template-columns: auto 1fr;
-    grid-template-rows: repeat(2, min-content);
-    font-size: var(--fs-160);
-  }
-
-  &__author-name {
-    grid-column: 2 / -1;
-    align-self: end;
-
-    color: var(--clr-base-heading-alt-alpha);
-    font-weight: 500;
-
-    // for verified icon
-    display: flex;
-    gap: var(--space-050);
-
-    // for name linking to profile
-    a {
-      font-size: 1.05em;
-      color: currentColor;
-    }
-  }
-
-  &__author-credentials {
-    grid-column: 2 / -1;
-    align-self: start;
-  }
-
-  &__author-image {
-    grid-row: 1 / -1;
-    grid-column: 1 / span 1;
-
-    max-height: var(--fs-600);
-    max-width: var(--fs-600);
-    min-height: 100%;
-    min-width: 100%;
-    object-fit: cover;
-
-    clip-path: circle(50% at 50% 50%);
-  }
-
-  // question area
-  &__question {
-    font-size: 1.05em;
-  }
-
-  &__unviewable {
-    // for aligning both text and svg
-    display: grid;
-    align-content: center;
-    justify-content: start;
-    grid-auto-flow: column;
-    gap: var(--space-100);
-    align-items: center;
-
-    margin-top: var(--space-200);
-    color: var(--clr-base-heading-alt-alpha);
-    font-weight: 500;
-    // border: 1px solid var(--clr-base-icon-alt-alpha);
-    // padding: var(--space-100);
-  }
-
-  // metadata(likes, shares, etc)
-  &__metadata {
-    justify-self: start;
-
-    display: flex;
-    gap: var(--space-200);
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
-  &__metadata-item {
-    display: grid;
-    grid-template-columns: repeat(2, auto);
-    gap: 0 var(--space-050);
-  }
-
-  &__icon {
-    grid-column: 1 / span 1;
-    justify-self: end;
-    align-self: center;
-
-    height: 1.3em;
-    width: 1.3em;
-    fill: var(--clr-base-icon);
-  }
-
-  &__metadata-data {
-    grid-column: -2 / -1;
-    justify-self: start;
-  }
-
-  &__metadata-text {
-    grid-row: 2 / span 1;
-    grid-column: 1 / -1;
-    justify-self: center;
-
-    font-size: 0.9em;
-    color: var(--clr-base-text-alt-alpha);
-  }
-}
-
-////////////////////////////////////////////////////////
-//                     TOPICS
-////////////////////////////////////////////////////////
 .topics {
   display: grid;
   gap: var(--space-200);
@@ -364,19 +396,13 @@
     list-style: none;
     display: grid;
     gap: var(--space-100);
-    // display: flex;
-    // flex-wrap: wrap;
   }
 
   &__item {
-    // flex: 0 1 auto
     font-weight: 500;
   }
 }
 
-////////////////////////////////////////////////////////
-//                     RELATED
-////////////////////////////////////////////////////////
 .related {
   display: grid;
   align-content: start;
@@ -394,281 +420,29 @@
 }
 
 ////////////////////////////////////////////////////////
-//                   TOPIC STATS
+//                TOPIC PAGE COMPONENTS
 ////////////////////////////////////////////////////////
 .topic-stats {
+  --img-dim: var(--fs-1000);
+
   display: grid;
-  gap: var(--space-050) var(--space-200);
+  gap: var(--space-200);
-  grid-template-columns: auto 1fr;
-  grid-template-rows: repeat(3, auto);
-
-  &__heading {
-    grid-column: 2 / -1;
-    align-self: end;
-    line-height: 1;
-
-    @include respond-to(bp-450) {
-      align-self: center;
-    }
-  }
-
-  &__image {
-    grid-row: 1 / -1;
-    grid-column: 1 / span 1;
-
-    max-height: var(--fs-1000);
-    max-width: var(--fs-1000);
-    margin-block: auto;
-    object-fit: contain;
-
-    @include respond-to(bp-450) {
-      max-height: var(--fs-800);
-      max-width: var(--fs-800);
-    }
-  }
-
-  &__aliases {
-    @include respond-to(bp-450) {
-      grid-column: 1 / -1;
-    }
-  }
-
-  &__metadata {
-    display: flex;
-    gap: var(--space-500);
-    align-items: center;
-    flex-wrap: wrap;
-
-    @include respond-to(bp-750) {
-      // margin-top: var(--space-100);
-      grid-column: 1 / -1;
-    }
-
-    @include respond-to(bp-650) {
-      gap: var(--space-200);
-    }
-  }
-
-  &__metadata-item {
-    display: grid;
-    grid-template-columns: repeat(2, auto);
-    gap: 0 var(--space-050);
-  }
-
-  &__icon {
-    grid-column: 1 / span 1;
-    justify-self: end;
-    align-self: center;
-
-    height: 1.3em;
-    width: 1.3em;
-    fill: var(--clr-base-icon);
-  }
-
-  &__metadata-data {
-    grid-column: -2 / -1;
-    justify-self: start;
-  }
-
-  &__metadata-text {
-    grid-row: 2 / span 1;
-    grid-column: 1 / -1;
-    justify-self: center;
-    font-size: 0.9em;
-    color: var(--clr-base-text-alt-alpha);
-  }
-
-  @include respond-to(bp-750) {
-    grid-template-rows: repeat(2, auto);
-    row-gap: var(--space-100);
-  }
-  @include respond-to(bp-450) {
-    grid-template-rows: auto;
-  }
 }
 
-////////////////////////////////////////////////////////
+.famous-authors,
-//                   FAMOUS AUTHORS
-////////////////////////////////////////////////////////
-.famous-authors {
-  display: grid;
-  gap: var(--space-300);
-
-  &__list {
-    display: grid;
-    gap: var(--space-500);
-  }
-
-  &__author {
-    display: grid;
-    gap: var(--space-050) var(--space-100);
-    grid-template-columns: auto 1fr;
-    grid-template-rows: repeat(3, min-content);
-    font-size: var(--fs-160);
-
-    @include respond-to(bp-750) {
-      grid-template-rows: repeat(2, min-content);
-    }
-  }
-
-  &__author-name {
-    grid-column: 2 / -1;
-    line-height: 1;
-    align-self: center;
-    color: var(--clr-base-heading-alt-alpha);
-    font-weight: 500;
-
-    // for verified icon
-    display: flex;
-    gap: var(--space-050);
-
-    // for name linking to profile
-    a {
-      font-size: 1.05em;
-      color: currentColor;
-    }
-  }
-
-  &__author-credentials {
-    grid-column: 2 / -1;
-    word-break: break-word;
-  }
-
-  &__author-image {
-    margin-block: auto;
-
-    grid-row: 1 / -1;
-    grid-column: 1 / span 1;
-
-    max-height: var(--fs-800);
-    max-width: var(--fs-800);
-    object-fit: cover;
-
-    clip-path: circle(50% at 50% 50%);
-
-    @include respond-to(bp-750) {
-      max-height: var(--fs-600);
-      max-width: var(--fs-600);
-    }
-  }
-
-  &__metadata {
-    display: flex;
-    gap: var(--space-200);
-    align-items: center;
-    flex-wrap: wrap;
-
-    @include respond-to(bp-750) {
-      margin-top: var(--space-100);
-      grid-column: 1 / -1;
-    }
-  }
-
-  &__metadata-item {
-    display: grid;
-    grid-template-columns: repeat(2, auto);
-    gap: 0 var(--space-050);
-  }
-
-  &__icon {
-    grid-column: 1 / span 1;
-    justify-self: end;
-    align-self: center;
-
-    height: 1em;
-    width: 1em;
-    fill: var(--clr-base-icon);
-  }
-
-  &__metadata-data {
-    grid-column: -2 / -1;
-    justify-self: start;
-  }
-
-  &__metadata-text {
-    grid-row: 2 / span 1;
-    grid-column: 1 / -1;
-    justify-self: center;
-    line-height: 1;
-    font-size: 0.9em;
-    color: var(--clr-base-text-alt-alpha);
-  }
-}
-
-////////////////////////////////////////////////////////
-//                   RELATED TOPICS
-////////////////////////////////////////////////////////
 .related-topics {
+  --img-dim: var(--fs-600);
+
   display: grid;
   gap: var(--space-300);
 
   &__list {
     display: grid;
-    gap: var(--space-500);
+    gap: var(--space-400);
   }
 
-  &__topic {
+  &__item {
     display: grid;
-    gap: 0 var(--space-200);
+    gap: var(--space-100);
-    grid-template-columns: auto 1fr;
-    grid-template-rows: repeat(2, min-content);
-  }
-
-  &__topic-name {
-    grid-column: 2 / -1;
-    justify-self: start;
-
-    font-weight: 500;
-    font-size: 1.05em;
-  }
-
-  &__image {
-    grid-row: 1 / -1;
-
-    max-height: var(--fs-800);
-    max-width: var(--fs-800);
-    min-height: 100%;
-    min-width: 100%;
-    object-fit: contain;
-
-    @include respond-to(bp-750) {
-      max-height: var(--fs-600);
-      max-width: var(--fs-600);
-    }
-  }
-
-  &__metadata {
-    grid-row: -2 / -1;
-    justify-self: start;
-  }
-
-  &__metadata-item {
-    display: grid;
-    grid-template-columns: repeat(2, auto);
-    gap: 0 var(--space-050);
-  }
-
-  &__icon {
-    grid-column: 1 / span 1;
-    justify-self: end;
-    align-self: center;
-
-    height: 1em;
-    width: 1em;
-    fill: var(--clr-base-icon);
-  }
-
-  &__metadata-data {
-    grid-column: -2 / -1;
-    justify-self: start;
-  }
-
-  &__metadata-text {
-    grid-row: 2 / span 1;
-    grid-column: 1 / -1;
-    justify-self: center;
-    line-height: 1;
-    font-size: 0.9em;
-    color: var(--clr-base-text-alt-alpha);
   }
 }

views/sass/_layouts.scss

@@ -6,7 +6,6 @@
 ////////////////////////////////////////////////////////
 //                     HEADER
 ////////////////////////////////////////////////////////
-
 .header {
   background-color: var(--clr-hf-bg);
 
@@ -181,11 +180,11 @@
 }
 
 ////////////////////////////////////////////////////////
-//                     ANSWER
+//                      TEXT
 ////////////////////////////////////////////////////////
-.answer {
+.text {
-  // main answer formatting
+  // main text formatting
-  &__text {
+  &__container {
     border-block: 1px solid var(--clr-base-icon-alt-alpha);
     padding: var(--space-100);
 
@@ -207,6 +206,7 @@
   }
 
   &__image {
+    display: inline-block;
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
@@ -303,7 +303,8 @@
     font-style: italic;
   }
 
-  &__span-link {
+  &__span-link,
+  &__link {
     @include format-link(
       var(--clr-base-link),
       var(--clr-base-link-alt-alpha),

views/sass/_pages.scss

@@ -202,9 +202,8 @@
 }
 
 ////////////////////////////////////////////////////////
-//                     ANSWERED
+//                     ANSWERS
 ////////////////////////////////////////////////////////
-
 .answers {
   // justify-self: center;
   padding: var(--space-800);
@@ -285,7 +284,6 @@
 //                     TOPIC
 ////////////////////////////////////////////////////////
 .topic {
-  // justify-self: center;
   padding: var(--space-800);
 
   display: grid;
@@ -295,11 +293,7 @@
   align-items: start;
   gap: var(--space-800);
 
-  &__stats {
+  &__name {
-    grid-column: 1 / -1;
-  }
-
-  &__heading {
     font-size: var(--fs-300);
 
     @include respond-to(bp-550) {
@@ -307,14 +301,13 @@
     }
   }
 
-  &__link {
+  &__stats {
-    @include format-link(var(--clr-base-link), var(--clr-base-link-alt-alpha));
+    grid-column: 1 / -1;
   }
 
   @include respond-to(bp-1200) {
     display: flex;
     flex-direction: column;
-    // gap: var(--space-800);
   }
 
   @include respond-to(bp-900) {