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

View file

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

View file

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

View file

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