Update broken span

assets/scss/_components.scss

@@ -22,6 +22,7 @@
 @import "components/page-header";
 @import "components/posts";
 @import "components/overlaypost";
+@import "components/resource";
 @import "components/store";
 @import "components/team";
 @import "components/team_card";

assets/scss/components/_article-question.scss

@@ -28,7 +28,7 @@
   &__title {
     font-size: 2.5rem;
     font-weight: 700;
-    margin-bottom: 2rem;
+    margin-bottom: 1.75rem;
   }
 
   &__contributors {
@@ -52,7 +52,7 @@
 
   &__summary {
     font-size: 1.5rem;
-    margin-bottom: 2rem;
+    margin-bottom: 2.25rem;
   }
 
   &__last-updated {

assets/scss/components/_faq-question.scss

@@ -36,6 +36,7 @@
   &__body {
     font-size: 1.15rem;
     margin: 3rem 0;
+    margin-bottom: 4rem;
   }
 
   &__sources {

assets/scss/components/_resource.scss

@@ -0,0 +1,91 @@
+.resource__updated-at {
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+  color: rgb(46, 46, 46);
+  padding: 1rem 0;
+  margin-top: -1rem;
+}
+
+.resource__separator {
+  margin: 1.2em 0;
+  width: 5rem;
+  opacity: 0.25;
+
+  &--full {
+    margin: 1.2em 0;
+    opacity: 0.25;
+    width: 100%;
+  }
+}
+
+.resource__contributors {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+
+  i {
+    margin-right: 0.4rem;
+    color: #666;
+    font-size: 1.1em;
+  }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+
+    i {
+      margin-right: 0;
+      margin-bottom: 0.3rem;
+    }
+
+    span:first-of-type {
+      margin-right: 0;
+      margin-bottom: 0.3rem;
+    }
+  }
+}
+
+.resource__contributors-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.resource__contributor-pill {
+  display: inline-block;
+  background: #ebebeb;
+  border-radius: 0.75rem;
+  padding: 0.125rem 0.7rem;
+  font-size: 0.875em;
+  color: #313131;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.resource__sources {
+  margin-top: 1rem;
+
+  i {
+    color: #666 !important;
+  }
+
+  a {
+    color: #c40729;
+  }
+
+  a:hover {
+    color: #ff1f48;
+  }
+
+  a:visited {
+    color: #c40729;
+  }
+
+  &__heading {
+    margin-left: 0.4rem;
+  }
+}

content/resources/articles/should-you-take-z-section-2000-level-comp.md

@@ -6,7 +6,8 @@ draft: false
 layout: article-question
 summary: ""
 contributors: 
--  
+- Matthew MacRae-Bovell
+- Aditya "Jacc" Padmakar
 sources:
   - name: 
     link:

content/resources/articles/why-you-should-consider-a-minor.md

@@ -7,6 +7,7 @@ layout: article-question
 summary: "Instead of just filling elective credits with bird courses, using them toward a minor can help you stand out, deepen your skills, and explore a second area of interest."
 contributors: 
 - Matthew MacRae-Bovell
+- Aditya "Jacc" Padmakar
 sources:
   - name: SCS Program Requirements
     link: https://calendar.carleton.ca/undergrad/undergradprograms/computerscience/#Computer_Science__BCS_Honours:~:text=Statistical%20Modeling%20I-,6.%C2%A0%C2%A05.0%20credits%20in%20Breadth%20Electives,4.0,-Total%20Credits

layouts/_default/article-question.html

@@ -6,30 +6,46 @@ <h1 class="article-question__title">{{ .Title }}</h1>
       <div class="article-question__summary">
         <i>{{ .Params.summary }}</i>
       </div>
-      {{ with .Params.contributors }}
-        <div class="article-question__contributors">
-          <strong>Written by:</strong> {{ delimit . ", " }}
-        </div>
-      {{ end }}
-      <div class="article-question__last-updated">
-        Last Updated:
+      <div class="resource__updated-at">
+        <i class="far fa-clock" aria-hidden="true"></i>
+        Updated:
         {{ .Params.last_updated | time | dateFormat "January 2, 2006" }}
       </div>
-      <hr />
+      <hr class="resource__separator" style="margin-bottom: -0.7rem;" />
       <div class="article-question__body">
         {{ .Content }}
       </div>
-      <hr class="end-line" />
+      <hr class="resource__separator" />
+      <div style="height: 0.5rem"></div>
+      {{ with .Params.contributors }}
+        <div class="resource__contributors">
+          <span><i class="far fa-user" aria-hidden="true"></i></span>
+          <span class="resource__contributors-list">
+          {{ range $index, $contributor := . }}
+            <span
+              class="resource__contributor-pill"
+            >
+              {{ $contributor }}
+            </span>
+          {{ end }}
+          </span>
+        </span>
+        </div>
+      {{ end }} 
+      <div style="height: 0.2rem"></div>
       {{ with .Params.sources }}
-        <details class="faq-question__sources">
-          <summary><b>View Links and Sources</b></summary>
+        <div class="resource__sources">
+          <div>
+            <i class="fas fa-external-link-alt" aria-hidden="true"></i>
+            <span class="resource__sources__heading"></span>Links and Sources</span>
+          </div>
           {{ range $index, $source := . }}
             <p>
               ({{ add $index 1 }})
               <a href="{{ $source.link }}">{{ $source.name }}</a>
             </p>
           {{ end }}
-        </details>
+        </div>
       {{ end }}
       <div class="article-question__related-content">
         {{ partial "resources-related-content.html" . }}

layouts/_default/faq-question.html

@@ -6,30 +6,45 @@ <h1 class="faq-question__title">{{ .Title }}</h1>
       <p class="faq-question__summary">
         <i><b>Summary:</b> {{ .Params.summary }}</i>
       </p>
-      {{ with .Params.contributors }}
-        <p class="faq-question__contributors">
-          <strong>Contributors:</strong> {{ delimit . ", " }}
-        </p>
-      {{ end }}
-      <div class="faq-question__last-updated">
-        Last Updated:
+      <div class="resource__updated-at" style="margin-top: -1rem;">
+        <i class="far fa-clock" aria-hidden="true"></i>
+        Updated:
         {{ .Params.last_updated | time | dateFormat "January 2, 2006" }}
       </div>
-      <hr />
+      <hr class="resource__separator" />
       <div class="faq-question__body">
         {{ .Content }}
       </div>
-      <hr class="end-line" />
+      <hr class="resource__separator" />
+      <div style="height: 0.5rem"></div>
+      {{ with .Params.contributors }}
+        <div class="resource__contributors">
+          <span><i class="far fa-user" aria-hidden="true"></i></span>
+          <span class="resource__contributors-list">
+          {{ range $index, $contributor := . }}
+            <span
+              class="resource__contributor-pill"
+            >
+              {{ $contributor }}
+            </span>
+          {{ end }}
+          </span>
+        </div>
+      {{ end }}
+      <div style="height: 0.2rem"></div>
       {{ with .Params.sources }}
-        <details class="faq-question__sources">
-          <summary><b>View Links and Sources</b></summary>
+        <div class="resource__sources">
+          <div>
+            <i class="fas fa-external-link-alt" aria-hidden="true"></i>
+            <span class="resource__sources__heading"></span>Links and Sources</span>
+          </div>
           {{ range $index, $source := . }}
             <p>
               ({{ add $index 1 }})
               <a href="{{ $source.link }}">{{ $source.name }}</a>
             </p>
           {{ end }}
-        </details>
+        </div>
       {{ end }}
       <div class="faq-question__related">
         {{ partial "resources-related-content.html" . }}