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:
parent
264fd92379
commit
6cbe1ee814
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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";
|
||||||
|
Loading…
x
Reference in New Issue
Block a user