1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 07:05:21 -04:00

fix repository card styling

This commit is contained in:
Jake Jarvis 2025-03-28 10:17:14 -04:00
parent 264fd92379
commit 6cbe1ee814
Signed by: jake
SSH Key Fingerprint: SHA256:nCkvAjYA6XaSPUqc4TfbBQTpzr8Xj7ritg/sGInCdkc
5 changed files with 33 additions and 28 deletions

View File

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

View File

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

View File

@ -19,51 +19,42 @@
} }
.card .name { .card .name {
display: inline-block;
margin-bottom: 0.4em;
font-size: 1.2em; font-size: 1.2em;
font-weight: 600; font-weight: 600;
} }
.card .description { .card .description {
margin-top: 0.7em; margin: 0;
margin-bottom: 0.5em;
line-height: 1.7; line-height: 1.7;
} }
.card .meta { .card .meta {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 0.4em;
} }
.card .metaItem { .card .metaItem {
margin-right: 1.5em; margin: 0.3em 1.5em 0.3em 0;
line-height: 2;
color: var(--colors-medium); color: var(--colors-medium);
white-space: nowrap;
} }
.card .metaLink { .card .metaLink {
color: inherit !important; color: inherit;
} }
.card .metaLink:hover, .card .metaLink:hover,
.card .metaLink:focus-visible { .card .metaLink:focus-visible {
color: var(--colors-link) !important; color: var(--colors-link);
} }
.card .metaIcon { .card .metaIcon {
display: inline-block; display: inline-block;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
vertical-align: -0.25em;
margin-right: 0.5em; margin-right: 0.5em;
} vertical-align: text-top;
.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;
} }

View File

@ -118,9 +118,12 @@ const Page = async () => {
{repo.language && ( {repo.language && (
<div className={styles.metaItem}> <div className={styles.metaItem}>
{repo.language.color && ( {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> </div>
)} )}
@ -133,7 +136,7 @@ const Page = async () => {
className={styles.metaLink} className={styles.metaLink}
> >
<StarIcon size="1.25em" className={styles.metaIcon} /> <StarIcon size="1.25em" className={styles.metaIcon} />
{commaNumber(repo.stars)} <span>{commaNumber(repo.stars)}</span>
</Link> </Link>
</div> </div>
)} )}
@ -147,13 +150,23 @@ const Page = async () => {
className={styles.metaLink} className={styles.metaLink}
> >
<GitForkIcon size="1.25em" className={styles.metaIcon} /> <GitForkIcon size="1.25em" className={styles.metaIcon} />
{commaNumber(repo.forks)} <span>{commaNumber(repo.forks)}</span>
</Link> </Link>
</div> </div>
)} )}
<div className={styles.metaItem}> <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> </div>
</div> </div>

View File

@ -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 // marking the library as a proper client component so that react doesn't complain about hydration whenever we use it in
// a server component. // a server component.
// see: https://react.dev/reference/rsc/use-client#using-third-party-libraries
export { default } from "react-countup"; export { default } from "react-countup";