make the lines more condensed
This commit is contained in:
parent
62b4c105a9
commit
ea600b05f7
4 changed files with 16 additions and 12 deletions
|
@ -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} />
|
||||||
|
·
|
||||||
|
<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;
|
||||||
|
|
|
@ -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>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue