update people page size

templates/partials/filter_bar.html

@@ -7,11 +7,11 @@
 
 
 
-<div class="left-0 z-50 mb-5 h-16 bg-gray-200 mt-6 w-full rounded shadow">
+<div class="left-0 z-50 bg-gray-100 my-3 w-full rounded-md">
-    <header class="flex flex-wrap container mx-auto pt-1 pb-0 sm:px-0 transition-all transition-500">
+    <header class="flex flex-wrap container mx-auto pb-0 sm:px-0 transition-all transition-500">
         <div class="flex justify-between px-4 sm:p-0">
             <div class="ml-8 inline-flex flex-shrink-0">
-                <span class="flex text-xl p-3 capitalize tracking-tight">
+                <span class="flex text-base items-center capitalize">
                     Filter:
                 </span>
             </div>
@@ -20,8 +20,8 @@
             <ul class="list-none sm:flex justify-left capitalize transition-all transition-500 ">
                 <li class="flex items-center">
                     <div class="relative">
-                        <button id="filter-btn" class="rounded border-0 px-5 !shadow-none flex flex-row items-center w-full md:w-auto md:inline md:mt-0 mb-0 animated-link bg-gray-300">
+                        <button id="filter-btn" class="rounded border-0 px-5 !shadow-none flex flex-row items-center w-full md:w-auto md:inline md:mt-0 mb-0 animated-link">
-                            <span class="capitalize">{{category | replace(from='-', to=' ' ) | title}}</span>
+                            <span class="text-base capitalize">{{category | replace(from='-', to=' ' ) | title}}</span>
                             <svg data-v-21fd5df0="" fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1 rotate-180"><path data-v-21fd5df0="" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                         </button>
                         <div id="filter-menu" x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="hidden absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30">

templates/partials/intro.html

@@ -1,6 +1,6 @@
 {% block content %}
-<div class="my-10 md:my-16">
+<div class="mb-6 mt-14">
-    <h2 class="mb-4 text-center  text-gray-900 md:mb-6">{{ section.title }}</h2>
+    <h2 class="mb-4 text-center text-5xl text-gray-900 md:mb-6">{{ section.title }}</h2>
     <p class="mx-auto max-w-5xl text-center text-gray-900 md:text-lg">
         {{ section.description }}
     </p>

templates/partials/person_card.html

@@ -1,17 +1,17 @@
 <div class="flex flex-col px-0 sm:px-4 pb-2">
     <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left">
         {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
-        <img src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
+        <img class="aspect-[14/13] w-full rounded-2xl object-cover" src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
-        <div>
+        <div class="text-center">
-            <h2 class="text-2xl">{{page.title}}</h2>
+            <h2 class="text-xl">{{page.title}}</h2>
-            <div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis">
+            <div class="text-base text-gray-700 line-clamp-3 text-ellipsis">
                 {% if page.description %}
                     {{page.description}}
                 {% else %}
                     {{page.content | safe}}
                 {% endif %}
             </div>
-            <div class="my-2 flex flex-row items-start flex-wrap">
+            {# <div class="my-2 flex flex-row items-start flex-wrap">
             {% if page.taxonomies.memberships %}
             {% for tag in page.taxonomies.memberships %}
                 <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 text-xs font-light bg-transparent hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
@@ -19,7 +19,7 @@
                 </a>
             {% endfor %}
             {% endif %}
-            </div>
+            </div> #}
         </div>
     </a>
 </div>

templates/people/list.html

@@ -2,17 +2,17 @@
 {% block content %}
 {%- set section = get_section(path="people/_index.md") %}
 {% include "partials/intro.html" %}
-<div class="container mx-auto">
+<div class="mx-auto max-w-7xl px-6 lg:px-8">
     {% include "partials/filter_bar.html" %}
     <div class="text-center main-title px-0 md:w-full">
-        <h1 class="tracking-tight text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10">
+        {# <h1 class="tracking-tight text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10">
             {% set path_array = current_path | split(pat="/") %}
       {% set taxonomy = path_array[1] %}
       {% set category = path_array[2] %}
         {{category | replace(from='-', to=' ' ) | title}}
-        </h1>
+        </h1> #}
         <div>
-            <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-4 lg:max-w-none">
+            <div class="text-center mx-auto mt-4 grid max-w-2xl grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 xl:grid-cols-4">
                 {% for person in section.pages %} 
             {% set page_path = person.path ~ 'index.md' | replace(from='-', to='_') | trim_start_matches(pat="/") %}
             {% set people = get_section(path="people/_index.md") %}