fix repository card styling

app/notes/[slug]/page.module.css

@@ -13,7 +13,7 @@
 }
 
 .meta .metaLink {
-  color: inherit !important;
+  color: inherit;
 }
 
 .meta .metaIcon {
@@ -58,7 +58,7 @@
 }
 
 .title .link {
-  color: var(--colors-text) !important;
+  color: var(--colors-text);
 }
 
 .comments {

app/previously/page.mdx

@@ -17,10 +17,10 @@ export const PageStyles = () => (
     dangerouslySetInnerHTML={{
       __html: `
 body {
-  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZklEQVR4AWIAgn/uBT6A9uoAAwAQiIJo97/0Rgy0ANoJH8MPeEgtqwPQEACqCoQHAKECQKgAECoAhAoAoQJAqAAQxh1oPQfcW3kJpxHtL1AAHAwEwwdYiH8BIEgBTBRAAAEEEEAAG7mRt30hEhoLAAAAAElFTkSuQmCC") 2 1, auto;
+  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZklEQVR4AWIAgn/uBT6A9uoAAwAQiIJo97/0Rgy0ANoJH8MPeEgtqwPQEACqCoQHAKECQKgAECoAhAoAoQJAqAAQxh1oPQfcW3kJpxHtL1AAHAwEwwdYiH8BIEgBTBRAAAEEEEAAG7mRt30hEhoLAAAAAElFTkSuQmCC") 2 1, auto !important;
 }
-a {
-  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEVHcEwAAAD///8W1S+BAAAAAXRSTlMAQObYZgAAAEdJREFUeAFjoAVghTGkHIhghMAYmQEwxlIYYxlYlSiQMQEsELUKyli1ahWYwQZjMGIwGLKQGA4QA1EYEP0rGVAZrKGhSF4BAHw/HsVwshytAAAAAElFTkSuQmCC") 16 12, auto;
+a, button {
+  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEVHcEwAAAD///8W1S+BAAAAAXRSTlMAQObYZgAAAEdJREFUeAFjoAVghTGkHIhghMAYmQEwxlIYYxlYlSiQMQEsELUKyli1ahWYwQZjMGIwGLKQGA4QA1EYEP0rGVAZrKGhSF4BAHw/HsVwshytAAAAAElFTkSuQmCC") 16 12, auto !important;
 }
 main {
   font-family: ${ComicNeue.style.fontFamily}, var(--fonts-sans) !important;

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>

components/CountUp/index.ts

@@ -2,4 +2,5 @@
 
 // marking the library as a proper client component so that react doesn't complain about hydration whenever we use it in
 // a server component.
+// see: https://react.dev/reference/rsc/use-client#using-third-party-libraries
 export { default } from "react-countup";