Pier's Edits along with Minor Improvements

src/components/AboutFooter.astro

@@ -121,7 +121,7 @@ const sortedSections = sectionsConfig
                 >
                   <img
                     src={contrib.avatar_url}
-                    class="w-14 rounded-full aspect-square"
+                    class="w-6 md:w-14 rounded-full aspect-square"
                   />
                 </a>
               </div>

src/components/EventMasonry.astro

@@ -14,12 +14,14 @@ const {
 } = Astro.props;
 ---
 
-<div class="middle-pane-big flex flex-wrap lg:flex-nowrap gap-[3px]">
+<div
+  class="middle-pane-big grid grid-cols-2 lg:flex lg:flex-nowrap gap-2 md:gap-[3px]"
+>
   {
     images.slice(0, 4).map((image, index) => (
-      <div class="flex-auto overflow-hidden" key={index}>
+      <div class="flex-auto overflow-hidden">
         <img
-          class="object-cover w-full max-h-[223px] cursor-pointer gallery-image"
+          class="object-cover w-full max-h-28 md:max-h-[223px] cursor-pointer gallery-image"
           src={image}
           alt={`Image ${index + 1}`}
           data-index={index}
@@ -29,12 +31,14 @@ const {
   }
 </div>
 
-<div class="middle-pane-big flex flex-wrap lg:flex-nowrap gap-[3px]">
+<div
+class="middle-pane-big grid grid-cols-2 lg:flex lg:flex-nowrap gap-2 md:gap-[3px]"
+>
   {
     images.slice(4).map((image, index) => (
-      <div class="flex-auto overflow-hidden" key={index + 4}>
+      <div class="flex-auto overflow-hidden">
         <img
-          class="object-cover w-full max-h-[223px] cursor-pointer gallery-image"
+          class="object-cover w-full max-h-28 md:max-h-[223px] cursor-pointer gallery-image"
           src={image}
           alt={`Image ${index + 5}`}
           data-index={index + 4}
@@ -49,8 +53,7 @@ const {
 >
   <div class="relative modal-content">
     <button class="absolute top-6 right-0 text-white close-modal z-100"
-      ></button
-    >
+    ></button>
   </div>
   <div class="flex flex-col" style="width: 54vw; height: 60vh;">
     <img
@@ -64,7 +67,6 @@ const {
     {
       images.map((image, index) => (
         <img
-          key={index}
           class="w-24 h-24 object-contain cursor-pointer thumbnail-image"
           src={image}
           alt={`Thumbnail ${index + 1}`}

src/components/MembersGrid.astro

@@ -86,42 +86,51 @@ let filteredPeople = [
 const limitedPeople = filteredPeople.slice(0, 12);
 
 function personLink(person) {
-  return person.refs?.twitter
-    ? `https://twitter.com/${person.refs.twitter}`
-    : person.refs?.bsky
-      ? `https://bsky.app/profile/${person.refs.bsky}`
-      : "#";
+  if (person.refs?.twitter) {
+    return `https://twitter.com/${person.refs.twitter}`;
+  } else if (person.refs?.bsky) {
+    return `https://bsky.app/profile/${person.refs.bsky}`;
+  } else if (person.refs?.linkedin) {
+    return `https://www.linkedin.com/in/${person.refs.linkedin}`;
+  } else if (person.refs?.github) {
+    return `https://github.com/${person.refs.github}`;
+  } else if (person.refs?.matrix) {
+    return `https://matrix.to/#/${person.refs.matrix}`;
+  } else if (person.refs?.email) {
+    return `mailto:${person.refs.email}`;
+  } else {
+    return "#";
+  }
 }
 
-function truncateCaption(caption) {
-  if (!caption) return "";
-  const words = caption.split(" ");
-  if (words.length > 10) {
-    return words.slice(0, 20).join(" ") + "...";
-  }
-  return caption;
-}
+
 ---
 
 <div
-  class="grid place-items-center grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2"
+  class="grid place-items-start grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2"
 >
   {
     limitedPeople.map((person) => (
-      <div class=" max-w-xs w-full h-[340px] bg-transparent overflow-hidden p-1 space-y-1 mb-2">
+    <div class="max-w-xs w-full max-h-[340px] bg-transparent overflow-hidden p-1 space-y-1 mb-2">
         <a href={personLink(person)}>
           <img
             src={person.imageUrl}
             alt={person.name}
-            class="w-full h-48 object-cover filter grayscale"
+            class="h-24 w-full md:h-48 object-cover object-center h-full grayscale"
           />
         </a>
-        <div class=" flex items-center justify-center  flex-col pt-8">
-          <h3 class="text-lg font-bold">{person.name}</h3>
-          {person.refs && person.refs.twitter && (
-            <p class="text-sm text-gray-500">@{person.refs.twitter}</p>
+        <div class="mt-4 flex items-center justify-center flex-col ">
+          <h3 class="text-xs md:text-lg font-bold leading-6">{person.name}</h3>
+          {person.refs && (
+            <p class="text-xs md:text-sm text-gray-500">
+              {person.refs.twitter && `@${person.refs.twitter}`}
+              {person.refs.bsky && ` | bsky: ${person.refs.bsky}`}
+              {person.refs.linkedin && ` | LinkedIn: ${person.refs.linkedin}`}
+              {person.refs.github && ` | GitHub: ${person.refs.github}`}
+              {person.refs.matrix && ` | Matrix: ${person.refs.matrix}`}
+              {person.refs.email && ` | Email: ${person.refs.email}`}
+            </p>
           )}
-          {/* <p class="text-sm">{truncateCaption(person.caption)}</p> */}
         </div>
       </div>
     ))

src/components/SpeakerGrid.astro

@@ -28,7 +28,7 @@ function personLink(person) {
 ---
 
 <div
-  class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 place-items-center md:place-items-start"
+  class="grid grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 md:gap-4 place-items-start"
 >
   {
     filteredPeople.map((person) => (
@@ -37,13 +37,13 @@ function personLink(person) {
           <img
             src={person.imageUrl}
             alt={person.name}
-            class="w-full h-48 object-cover"
+            class="h-24 w-full md:h-48 object-cover object-center h-full"
           />
         </a>
         <div class="mt-4">
-          <h3 class="text-lg font-bold leading-6">{person.name}</h3>
+          <h3 class="text-xs md:text-lg font-bold leading-6">{person.name}</h3>
           {person.refs && (
-            <p class="text-sm text-gray-500">
+            <p class="text-xs text-gray-500">
               {person.refs.twitter && `@${person.refs.twitter}`}
               {person.refs.bsky && ` | bsky: ${person.refs.bsky}`}
               {person.refs.linkedin && ` | LinkedIn: ${person.refs.linkedin}`}

src/config.yaml

@@ -22,7 +22,7 @@ header:
       link: news
     - name: Docs
       link: docs
-    - name: Membership
+    - name: Get Involved
       link: membership
       url: /membership
     #- name: Manifesto

src/layouts/base.astro

@@ -151,10 +151,12 @@ function genHeading(str) {
         banner && typeof banner !== "object" && (
           <div class="w-full flex mt-20 sm:mt-32 middle-pane-medium">
             <div>
-              {/* <div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96" /> */}
-              <h1 class="glitch-text-interval text-6xl">
+              <div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96" />
+           
+
+              {/* <h1 class="glitch-text-interval text-6xl">
                 web3privacy summit #1
-              </h1>
+              </h1> */}
               <div class="text-left mt-10">{config.hero.text}</div>
               <div class="mt-6">
                 <a class="button" href="/about">
@@ -172,7 +174,11 @@ function genHeading(str) {
           <>
             <div class="middle-pane-medium mt-8  sm:mt-14 sm:mb-8">
               <div class="leading-none flex justify-center mb-3 text-[4px] sm:text-[8px] text-white">
-                <pre>{genHeading(title)}</pre>
+                <pre>
+                  <code class="font-mono layout-heading  ">
+                    {genHeading(title)}
+                  </code>
+                </pre>
               </div>
               <div class="flex items-center justify-center w-full text-center">
                 <h3 class=" w-full max-w-[938px] glitch-text">{subtext}</h3>

src/pages/membership/index.astro

@@ -50,14 +50,14 @@ const sectionsConfig = [
         </p>
       </div>
 
-      <div class="flex gap-3 flex-wrap mb-4 justify-start mx-4">
+      <div class="flex gap-3 flex-wrap mb-4 justify-center md:justify-start mx-4">
         {
           contributors.items.map((contrib) => (
             <div>
               <a href={contrib.html_url} target="_blank" title={contrib.login}>
                 <img
                   src={contrib.avatar_url}
-                  class="w-14 rounded-full aspect-square"
+                  class="w-6 md:w-14 rounded-full aspect-square"
                 />
               </a>
             </div>