txarli/txarli.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update tag and post styling

Browse Source
This commit is contained in:
Cassidy Williams
2022-10-18 17:09:54 -05:00
parent 23d2e2eeff
commit 94f1d7a0fe
3 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Post.astro
View File

@@ -3,7 +3,7 @@
const { slug, title, tags, description, date } = Astro.props;
---
<li>
<li class="post">
<a href={`/post/${slug}/`} class="title">{title}</a>
<time datetime={date}>
{new Date(date).toLocaleDateString('en-us', {
@@ -14,11 +14,11 @@ const { slug, title, tags, description, date } = Astro.props;
</time>
<br />
{description && <span class="excerpt">{description}</span>}
<ul>
<div>
{tags && tags.map(tag => (
<li class="tag">
<a href={`/tag/${tag}`}>{tag}</a>
</li>
<>
<a class="tag" href={`/tag/${tag}`}>#{tag}</a>
</>
))}
</ul>
</div>
</li>

35
src/global.css
View File

@@ -19,8 +19,8 @@
background-color: var(--highlight);
color: var(--black);
}
html,
body {
font-family: 'Roboto Mono', monospace;
margin: auto;
padding: 20px;
max-width: 65ch;
@@ -30,6 +30,11 @@ body {
line-height: 1.8;
color: var(--black);
}
html,
body,
button {
font-family: "Roboto Mono", monospace;
}
h1,
h2,
h3,
@@ -40,6 +45,16 @@ strong,
b {
color: var(--black);
}
body.dark-mode,
body.dark-mode button,
body.dark-mode .go-home,
button.dark-mode,
button.dark-mode button {
background: var(--black);
color: var(--white);
}
a {
color: var(--pink);
}
@@ -54,6 +69,24 @@ nav a:not(:last-child) {
padding: 0 12px 0 0;
}
.post {
margin: 0 0 30px 0;
}
.post .title {
font-size: 1.3em;
}
.tag {
margin-right: 20px;
color: var(--gray);
font-size: 0.8rem;
}
.tag:hover {
cursor: pointer;
font-weight: bold;
}
textarea {
width: 100%;
font-size: 16px;

3
src/pages/tag/[tag].astro
View File

@@ -47,9 +47,6 @@ const { tag: currentTag } = Astro.params;
ul li {
display: flex;
}
ul li a:visited {
color: #8e32dc;
}
</style>
</head>
<body>