fix repository card styling

app/projects/page.module.css

@@ -19,51 +19,42 @@
 }
 
 .card .name {
+  display: inline-block;
+  margin-bottom: 0.4em;
   font-size: 1.2em;
   font-weight: 600;
 }
 
 .card .description {
-  margin-top: 0.7em;
-  margin-bottom: 0.5em;
+  margin: 0;
   line-height: 1.7;
 }
 
 .card .meta {
   display: flex;
   flex-wrap: wrap;
+  margin-top: 0.4em;
 }
 
 .card .metaItem {
-  margin-right: 1.5em;
-  line-height: 2;
+  margin: 0.3em 1.5em 0.3em 0;
   color: var(--colors-medium);
+  white-space: nowrap;
 }
 
 .card .metaLink {
-  color: inherit !important;
+  color: inherit;
 }
 
 .card .metaLink:hover,
 .card .metaLink:focus-visible {
-  color: var(--colors-link) !important;
+  color: var(--colors-link);
 }
 
 .card .metaIcon {
   display: inline-block;
   width: 1.25em;
   height: 1.25em;
-  vertical-align: -0.25em;
   margin-right: 0.5em;
-}
-
-.card .metaLanguage {
-  display: inline-block;
-  position: relative;
-  width: 1.1em;
-  height: 1.1em;
-  line-height: 1;
-  margin-right: 0.5em;
-  border-radius: 50%;
-  vertical-align: -0.2em;
+  vertical-align: text-top;
 }

app/projects/page.tsx

@@ -118,9 +118,12 @@ const Page = async () => {
               {repo.language && (
                 <div className={styles.metaItem}>
                   {repo.language.color && (
-                    <span className={styles.metaLanguage} style={{ backgroundColor: repo.language.color }} />
+                    <span
+                      className={styles.metaIcon}
+                      style={{ backgroundColor: repo.language.color, borderRadius: "50%" }}
+                    />
                   )}
-                  {repo.language.name}
+                  <span>{repo.language.name}</span>
                 </div>
               )}
 
@@ -133,7 +136,7 @@ const Page = async () => {
                     className={styles.metaLink}
                   >
                     <StarIcon size="1.25em" className={styles.metaIcon} />
-                    {commaNumber(repo.stars)}
+                    <span>{commaNumber(repo.stars)}</span>
                   </Link>
                 </div>
               )}
@@ -147,13 +150,23 @@ const Page = async () => {
                     className={styles.metaLink}
                   >
                     <GitForkIcon size="1.25em" className={styles.metaIcon} />
-                    {commaNumber(repo.forks)}
+                    <span>{commaNumber(repo.forks)}</span>
                   </Link>
                 </div>
               )}
 
               <div className={styles.metaItem}>
-                Updated <RelativeTime date={repo.updatedAt} />
+                <span
+                  className={styles.metaIcon}
+                  style={{
+                    // invisible icon hack to fix line height
+                    width: 0,
+                    marginRight: 0,
+                  }}
+                />
+                <span>
+                  Updated <RelativeTime date={repo.updatedAt} />
+                </span>
               </div>
             </div>
           </div>