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

35
src/global.css
View File

@@ -19,8 +19,8 @@
background-color: var(--highlight); background-color: var(--highlight);
color: var(--black); color: var(--black);
} }
html,
body { body {
font-family: 'Roboto Mono', monospace;
margin: auto; margin: auto;
padding: 20px; padding: 20px;
max-width: 65ch; max-width: 65ch;
@@ -30,6 +30,11 @@ body {
line-height: 1.8; line-height: 1.8;
color: var(--black); color: var(--black);
} }
html,
body,
button {
font-family: "Roboto Mono", monospace;
}
h1, h1,
h2, h2,
h3, h3,
@@ -40,6 +45,16 @@ strong,
b { b {
color: var(--black); 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 { a {
color: var(--pink); color: var(--pink);
} }
@@ -54,6 +69,24 @@ nav a:not(:last-child) {
padding: 0 12px 0 0; 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 { textarea {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;

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

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