Members: improve design

opensourcepledge · Dec 21, 2024 · e658f36 · e658f36
1 parent f7b45fe
commit e658f36
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 40 deletions.
diff --git a/src/components/GridMemberList.astro b/src/components/GridMemberList.astro
@@ -19,20 +19,16 @@ const members = filterInactiveMembers(await getMembers());
       <a class="member sneaky" href={`/members/${member.id}`}>
         <div class="main">
           <img src=`/images/members/${member.id}/logo.webp` alt=`The ${member.data.name} logo`>
-          <div class="metadata">
-            <h2>{member.data.name}</h2>
-            <span
-              >{(memberRoles as Map)[member.id]}
-              since
-              {dayjs(member.data.joinDate).format('DD MMM YYYY')}</span
-            >
-            <div class="numbers">
-              <span>{fmtDevs(member.data.annualReports[0].averageNumberOfDevs)}</span>
-              <span>{fmtCurrency(getDollarsPerDev(member.data.annualReports[0]))} / dev</span>
-            </div>
-          </div>
+          <h2>
+            <div>{member.data.name}</div>
+            <div class="label">{(memberRoles as Map)[member.id]}</div>
+          </h2>
         </div>
         <em>“{member.data.shortDescription}”</em>
+        <div class="numbers">
+          <span>{fmtDevs(member.data.annualReports[0].averageNumberOfDevs)}</span>
+          <span>{fmtCurrency(getDollarsPerDev(member.data.annualReports[0]))} / dev</span>
+        </div>
       </a>
     )}
   </div>
@@ -78,28 +74,31 @@ const members = filterInactiveMembers(await getMembers());
     .main {
       display: flex;
       gap: 1rem;
+      align-items: center;
       img {
         align-self: center;
         max-width: 4.5rem;
         @media (max-width: 450px) {
           max-width: 3.0rem;
         }
       }
-      .metadata {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        gap: 0.2rem;
-        .numbers {
-          display: flex;
-          justify-content: space-between;
-        }
-        h2 {
-          margin: 0;
-          font-size: 1.2rem;
-          line-height: 1.3;
+      h2 {
+        margin: 0;
+        font-size: 1.2rem;
+        line-height: 1.3;
+        .label {
+          margin-top: 0.5rem;
+          font-size: 0.8rem;
         }
       }
     }
+    em {
+      flex: 1 0;
+    }
+    .numbers {
+      flex: 0 1;
+      display: flex;
+      justify-content: space-between;
+    }
   }
 </style>
diff --git a/src/pages/members/[id].astro b/src/pages/members/[id].astro
@@ -47,7 +47,7 @@ export async function getStaticPaths() {
           <img src=`/images/members/${Astro.params.id}/logo.webp` alt=`The ${member.name} logo`>
           <h1>
             <div>{member.name}</div>
-            <small>{memberRole}</small>
+            <div class="label">{memberRole}</div>
           </h1>
         </div>
 
@@ -120,17 +120,8 @@ export async function getStaticPaths() {
       margin: 0;
       font-size: 2rem;
       line-height: 1;
-      small {
-        display: inline-block;
-        margin-top: 1.0rem;
-        padding: 0 0.5rem;
-        padding-top: 0.3rem;
-        padding-bottom: 0.4rem;
-        font-size: 0.9rem;
-        font-weight: normal;
-        border-radius: 0.2rem;
-        color: black;
-        background: #85c1e4;
+      .label {
+        margin-top: 1rem;
       }
       @media (max-width: 800px) {
         text-align: center;

diff --git a/src/pages/members/index.astro b/src/pages/members/index.astro
@@ -90,15 +90,14 @@ import svgList from '../../assets/icons/list.svg?raw';
   .member-list-container[data-mode='tabular'] .tabular-trigger,
   .member-list-container[data-mode='grid'] .grid-trigger {
     background: var(--color-primary);
-    color: var(--color-bg);
     .icon.icon--stroked svg {
       path, rect {
-        stroke: var(--color-bg);
+        stroke: black;
       }
     }
     .icon.icon--filled svg {
       path, rect {
-        fill: var(--color-bg);
+        fill: black;
       }
     }
   }

diff --git a/src/styles/common.css b/src/styles/common.css
@@ -475,6 +475,18 @@ img {
     height: 1rem;
   }
 }
+.label {
+  display: inline-block;
+  padding: 0 0.5rem;
+  padding-top: 0.3rem;
+  padding-bottom: 0.4rem;
+  font-size: 0.9rem;
+  font-weight: normal;
+  line-height: 1;
+  border-radius: 0.2rem;
+  color: black;
+  background: #85c1e4;
+}
 footer {
   margin: 4rem 0;
   text-align: center;