Refactor faciliators

Author: patmendoza6745

_config.yml

@@ -15,16 +15,16 @@ color_scheme: wider
 
 # Collections for website data
 collections:
-  staffers:
+  people:
     sort_by: name
 
 # Default layouts for each collection type
 defaults:
   - scope:
-      path: '_staffers'
-      type: staffers
+      path: '_people'
+      type: people
     values:
-      layout: staffer
+      layout: person
       height: 300
       width: 300
       subpath: '/assets/headshots/'

_layouts/person.html

@@ -0,0 +1,22 @@
+<div class="person">
+  {%- if page.photo -%}
+  <img class="person-image" src="{{ site.baseurl }}{{ page.subpath }}{{ page.photo }}" alt="{{ page.name }} profile photo">
+  {%- else -%}
+  <img class="person-image" src="{{ site.baseurl }}{{ page.subpath }}default_photo.svg" alt="{{ page.name }} profile photo">
+  {%- endif -%}
+  <div>
+    <h3 class="person-name" id="{{ page.name | slugify }}">
+      {%- if page.website -%}
+      <a href="{{ page.website }}">{{ page.name }}</a>
+      {%- else -%}
+      {{ page.name }}
+      {%- endif -%}
+    </h3>
+    
+    {%- if page.role -%}
+      <p class="person-role">{{ page.role }}</p>
+    {%- endif -%}
+    
+    {{ content }}
+  </div>
+</div>

_layouts/staffer.html

@@ -1,2 +1,76 @@
-// Custom styles for CRUP
-@import "staff";
+/* People layout inspired by Data 100 fa25 */
+.role {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
+}
+
+.person {
+  display: flex;
+  flex-basis: 45%;
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  background-color: #ffffff;
+  transition: box-shadow 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .person-image {
+    border-radius: 50%;
+    height: 60px;
+    width: 60px;
+    margin-right: 0.75rem;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+
+  .person-name {
+    margin: 0.25rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #24292e;
+
+    a {
+      color: #0366d6;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .person-role {
+    font-weight: 500;
+    color: #0366d6;
+    margin: 0.25rem 0;
+    font-size: 0.9rem;
+  }
+
+  p {
+    margin: 0.25rem 0;
+    line-height: 1.4;
+    font-size: 0.85rem;
+  }
+
+  // Responsive design
+  @media (max-width: 768px) {
+    flex-direction: column;
+    text-align: center;
+    padding: 0.75rem;
+    flex-basis: 100%;
+
+    .person-image {
+      margin-right: 0;
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+
+
+
+