make the lines more condensed

This commit is contained in:
Michael Zhang 2024-04-04 08:27:49 -05:00
parent 62b4c105a9
commit ea600b05f7
4 changed files with 16 additions and 12 deletions

View file

@ -5,11 +5,12 @@ import { sortBy } from "lodash-es";
import TagList from "./TagList.astro";
interface Props {
class: string;
basePath: string;
/** Whether or not to include drafts in this list */
drafts?: "exclude" | "include" | "only";
filteredPosts?: Post[];
timeFormat?: string;
class?: string | undefined;
timeFormat?: string | undefined;
}
type Post = CollectionEntry<"posts">;
@ -54,17 +55,17 @@ const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
return (
<>
<tr class="row">
<td class="info">
<span class="spacer" />
<Timestamp timestamp={post.data.date} format={timeFormat} />
</td>
<td>
<div class="title">
<a href={`${basePath}/${post.slug}`} class="brand-colorlink">
{post.data.title}
</a>
</div>
<div>
<Timestamp timestamp={post.data.date} format={timeFormat} />
&middot;
<TagList tags={post.data.tags} />
</div>
</td>
</tr>
</>
@ -76,11 +77,11 @@ const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
<style lang="scss">
.postListing {
width: 100%;
border-spacing: 6px 10px;
border-spacing: 6px 16px;
td {
// padding-bottom: 10px;
// line-height: 1;
line-height: 1;
.title {
font-size: 12pt;

View file

@ -7,10 +7,10 @@ const { extraFront, tags, extraBack } = Astro.props;
<div class="tags">
{extraFront}
{
tags.toSorted().map((tag) => (
tags.toSorted().map((tag: string) => (
<a href={`/tags/${tag}`} class="tag">
<i class="fa fa-tag" aria-hidden="true" />
<span class="text">{tag}</span>
<span class="text">#{tag}</span>
</a>
))
}

View file

@ -1,7 +1,7 @@
---
interface Props {
timestamp: Date;
format: string | undefined;
format?: string | undefined;
}
const { timestamp, format: customFormat } = Astro.props;

View file

@ -1,10 +1,13 @@
.home.postListing {
.timestamp {
font-family: var(--monofont);
color: var(--smaller-text-color);
font-size: 0.75em;
}
.tags {
gap: 4px;
display: inline-flex;
.tag {
background-color: inherit;