update people page

templates/memberships/single.html

@@ -13,13 +13,13 @@
 {% set category = "All" %}
 {% endif %}
 
-<div class="mt-16">
+<div class="mt-16 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 mx-8 md:mx-12">
+    <div class="text-center main-title px-0 md:w-full">
         <div class="my-4 flex flex-col items-start">
-            <h1 class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal">
+            <h2 class="tracking-tight text-left text-3xl lg:text-5xl fw-500 leading-snug font-normal">
             {{category | replace(from='-', to=' ' ) | title}}
-            </h1>
+            </h2>
             <div class="text-xl text-gray-800">
                 {{ paginator.total_pages ~ " People"}}
             </div>
@@ -28,7 +28,7 @@
         <hr/>
 
         <div>
-            <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 xl:grid-cols-4 lg:max-w-none">
+            <div class="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 page in paginator.pages %} 
                     {% include "partials/person_card.html" %} 
                 {%- endfor %}

templates/partials/filter_bar.html

@@ -26,7 +26,7 @@
                         </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">
                             <div data-v-21fd5df0="" class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700">
-                                <a data-v-21fd5df0="" href="/people" class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                                <a data-v-21fd5df0="" href="/people" class="blue cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
                                     All
                                 </a>
                                 {% set taxonomy = get_taxonomy(kind="memberships") %}
@@ -34,7 +34,7 @@
                                 {% for category in categories %}
                                     {% set path = category.name | slugify %}
                                     {% set fullpath = "/memberships/" ~ path %}
-                                    <a href="{{fullpath}}" class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                                    <a href="{{fullpath}}" class="blue cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
                                         {{category.name}}
                                     </a>
                                 {% endfor %}

templates/partials/intro.html

@@ -1,6 +1,6 @@
 {% block content %}
 <div class="mb-6 mt-14">
-    <h2 class="mb-4 text-center text-5xl text-gray-900 md:mb-6">{{ section.title }}</h2>
+    <h2 class="mb-4 text-center text-4xl lg: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/memberships.html

@@ -11,11 +11,11 @@
 {% set category = "All" %}
 {% endif %}
 
-<div class="-mt-16">
+<div class="mt-16 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 mx-8 md:mx-12">
         <div class="my-4 flex flex-col items-start">
-            <h1 class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal">
+            <h1 class="tracking-tight text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal">
             {{category | replace(from='-', to=' ' ) | title}}
             </h1>
             test
@@ -27,7 +27,7 @@
         <hr/>
 
         <div>
-            <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 xl:grid-cols-4 lg:max-w-none">
+            <div class="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 page in paginator.pages %} 
                     {% include "partials/person_card.html" %} 
                 {%- endfor %}

templates/partials/person_card.html

@@ -4,7 +4,7 @@
         <img class="aspect-[14/13] w-full rounded-2xl object-cover" src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
         <div class="text-center">
             <h2 class="text-xl">{{page.title}}</h2>
-            <div class="text-base text-gray-700 line-clamp-3 text-ellipsis">
+            <div class="text-base text-gray-700 line-clamp-3 leading-5 text-ellipsis">
                 {% if page.description %}
                     {{page.description}}
                 {% else %}