feature: add basic card layout styles

Author: bencodezen

src/.vitepress/components/TeamCard.vue

@@ -20,31 +20,45 @@ const imageAlt = computed(() => {
 <template>
   <div class="team-card">
     <img :src="`../../about/images/${imageFileName}`" :alt="imageAlt" />
-    <p>{{ imageFileName }}</p>
-    <h3>{{ profile.name }}</h3>
-    <p>
-      {{ profile.title }}
-      <span v-if="profile.company">@ {{ profile.company }}</span>
-    </p>
-    <address>{{ profile.location.label }}</address>
-    <ul>
-      <li v-for="language in profile.languageList">
-        {{ language }}
-      </li>
-    </ul>
-    <a :href="profile.website.url">{{ profile.website.label }}</a>
-    <ul>
-      <li
-        v-for="(handle, platform) in profile.social"
-        :key="`${platform}-${handle}`"
-      >
-        <a :href="`https://www.${platform}.com/${handle}`">
-          {{ platform }}: {{ handle }}
-        </a>
-      </li>
-    </ul>
-    <pre>{{ profile }}</pre>
+    <section>
+      <h3 class="member-name">{{ profile.name }}</h3>
+      <p>
+        {{ profile.title }}
+        <span v-if="profile.company">@ {{ profile.company }}</span>
+      </p>
+      <address>{{ profile.location.label }}</address>
+      <ul>
+        <li v-for="language in profile.languageList">
+          {{ language }}
+        </li>
+      </ul>
+      <a :href="profile.website.url">{{ profile.website.label }}</a>
+      <ul>
+        <li
+          v-for="(handle, platform) in profile.social"
+          :key="`${platform}-${handle}`"
+        >
+          <a :href="`https://www.${platform}.com/${handle}`">
+            {{ platform }}: {{ handle }}
+          </a>
+        </li>
+      </ul>
+    </section>
   </div>
 </template>
 
-<style></style>
+<style scoped>
+.team-card {
+  display: grid;
+  grid-template-columns: 32px 1fr;
+  grid-column-gap: 32px;
+  margin-bottom: 16px;
+  padding: 32px;
+  border-radius: 8px;
+  background-color: #f8f8f8;
+}
+
+.team-card .member-name {
+  margin-top: 0;
+}
+</style>