Featuring some people, small fixes

src/components/taCard.astro

@@ -4,9 +4,10 @@ export interface Props {
   title: string
   link: string
   image: string
+  user?: string
 }
 
-const { date, image, link, title } = Astro.props
+const { user, date, image, link, title } = Astro.props
 
 const options_date: Intl.DateTimeFormatOptions = {
   year: 'numeric',
@@ -16,6 +17,11 @@ const options_date: Intl.DateTimeFormatOptions = {
 
 const formatted_date = new Date(date).toLocaleDateString('de-DE', options_date)
 const icon: string = `background: url('/ta_icons/${image}.webp')`
+
+let hasuser = ''
+if (user !== undefined) {
+  hasuser = 'hasuser'
+}
 ---
 
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
@@ -24,12 +30,21 @@ const icon: string = `background: url('/ta_icons/${image}.webp')`
       <h2>{title}</h2>
     </div>
     <p>
+      <span class={hasuser}>
+        By {user}<br /> •
+      </span>
       {formatted_date}
     </p>
   </article>
 </a>
 
 <style>
+  span {
+    display: none;
+  }
+  .hasuser {
+    display: flex;
+  }
   a {
     text-decoration: none;
   }
@@ -73,6 +88,7 @@ const icon: string = `background: url('/ta_icons/${image}.webp')`
     display: flex;
     text-align: center;
     justify-content: center;
+    align-items: center;
     line-height: 100%;
     text-decoration: none;
     color: white;
@@ -80,5 +96,7 @@ const icon: string = `background: url('/ta_icons/${image}.webp')`
     font-weight: bold;
     padding-top: 0.5rem;
     margin: 0.5rem 0px;
+    flex-wrap: wrap;
+    flex-direction: column;
   }
 </style>