chadtmiller.com/knotless
git that lives in your Atmosphere account
1
10
A repository card's language sits at its foot
web/src/lib/organisms/RepoCards.svelte+8−6
| @@ -5,8 +5,8 @@ | ||
import PrivateTag from '#lib/atoms/PrivateTag.svelte'; | ||
/** | ||
* An account's repositories, a few, as cards by name, what each is and | ||
* what it is mostly written in; by owner and name too, unless they are | ||
* all `owned` by one account. | ||
* what it is mostly written in, at the card's foot; by owner and name | ||
* too, unless they are all `owned` by one account. | ||
*/ | ||
let { | ||
repos, | ||
| @@ -20,10 +20,12 @@ | ||
<ul class="cards"> | ||
{#each repos as r (`${r.owner.did}/${r.name}`)} | ||
<li> | ||
<a class="title" href={repoHref(r.owner.handle, r.name)} | ||
>{#if !owned}<span class="mute">{r.owner.handle}/</span>{/if}{r.name}</a | ||
>{#if r.private} | ||
<PrivateTag />{/if} | ||
<div> | ||
<a class="title" href={repoHref(r.owner.handle, r.name)} | ||
>{#if !owned}<span class="mute">{r.owner.handle}/</span>{/if}{r.name}</a | ||
>{#if r.private} | ||
<PrivateTag />{/if} | ||
</div> | ||
<p>{r.description ?? 'No description'}</p> | ||
{#if r.language}<div class="meta"><Language language={r.language} /></div>{/if} | ||
</li> | ||
web/src/app.css+7−0
| @@ -1693,6 +1693,8 @@ a.row:hover { | ||
margin-bottom: var(--space-8); | ||
} | ||
.cards li { | ||
display: flex; | ||
flex-direction: column; | ||
border: var(--border); | ||
border-radius: var(--radius-md); | ||
padding: var(--row-y) var(--pad-x); | ||
| @@ -1705,6 +1707,11 @@ a.row:hover { | ||
color: var(--mute); | ||
font-size: var(--text-sm); | ||
} | ||
/* What it is written in, at the foot, in line across a row of cards. */ | ||
.cards .meta { | ||
margin-top: auto; | ||
padding-top: var(--space-3); | ||
} | ||
.rollup-list { | ||
list-style: none; | ||
margin: 0 0 var(--space-2); | ||