From 1d9faff6fe00e18a543fa413431f362ad57130a7 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 18 Sep 2023 12:01:07 -0500
Subject: [PATCH] a few styling fixes
---
.../social-feed/src/components/Article.astro | 43 +------------------
.../src/components/Pagination.astro | 3 +-
.../social-feed/src/components/TagList.astro | 18 +++++---
3 files changed, 14 insertions(+), 50 deletions(-)
diff --git a/examples/social-feed/src/components/Article.astro b/examples/social-feed/src/components/Article.astro
index 0b0829412..369f5c47c 100644
--- a/examples/social-feed/src/components/Article.astro
+++ b/examples/social-feed/src/components/Article.astro
@@ -1,6 +1,5 @@
---
import ArticleHeader from './ArticleHeader.astro';
-import SplitLayout from './SplitLayout.astro';
import type { Article, Post } from '../content/config.js';
export interface Props {
@@ -9,31 +8,14 @@ export interface Props {
const { article } = Astro.props;
-const { Content, headings } = await article.render();
+const { Content } = await article.render();
---
<article>
<ArticleHeader {article} class="header" />
- <SplitLayout reverse>
<div class="e-content">
<Content />
</div>
-
- {
- headings.length > 0 && (
- <aside>
- <h3>Table of contents</h3>
- <ul>
- {headings.map(({ slug, text }) => (
- <li>
- <a href={`${Astro.url.pathname}#${slug}`}>{text}</a>
- </li>
- ))}
- </ul>
- </aside>
- )
- }
- </SplitLayout>
</article>
<style>
@@ -60,30 +42,7 @@ const { Content, headings } = await article.render();
margin-inline: auto;
}
- aside {
- display: none;
- }
-
- aside ul {
- list-style: none;
- padding: 0;
- margin-top: var(--theme-space-sm);
- }
-
- aside ul > * + * {
- margin-block-start: var(--theme-space-xs);
- }
-
- aside a {
- font-weight: bold;
- text-decoration: none;
- }
-
@media (min-width: 50em) {
- aside {
- display: block;
- }
-
.e-content > :global(* + *) {
margin-block-start: 1.5em;
}
diff --git a/examples/social-feed/src/components/Pagination.astro b/examples/social-feed/src/components/Pagination.astro
index 8524702bd..497805b1e 100644
--- a/examples/social-feed/src/components/Pagination.astro
+++ b/examples/social-feed/src/components/Pagination.astro
@@ -99,12 +99,13 @@ if (max < lastPage) items.push(makeItem(lastPage));
}
a {
text-decoration: none;
+ color: var(--theme-text);
}
.pagination-item > * {
border: 1.5px solid var(--theme-accent-dark);
border-radius: var(--theme-radius-base);
padding: 0.375rem 0.75rem;
- background-color: var(--theme-accent-light);
+ background-color: var(--theme-bg-accent);
font-size: var(--theme-text-sm);
font-weight: 700;
box-shadow: var(--theme-shadow-sm);
diff --git a/examples/social-feed/src/components/TagList.astro b/examples/social-feed/src/components/TagList.astro
index bd718f61f..d79c2abe5 100644
--- a/examples/social-feed/src/components/TagList.astro
+++ b/examples/social-feed/src/components/TagList.astro
@@ -9,11 +9,15 @@ const { tags, ...attrs } = Astro.props;
---
<ul {...attrs}>
- {tags.map((tag) => (
- <li>
- <a href={`/category/${tag}/`} rel="category tag" class="p-category">{tag}</a>
- </li>
- ))}
+ {
+ tags.map((tag) => (
+ <li>
+ <a href={`/category/${tag}/`} rel="category tag" class="p-category">
+ {tag}
+ </a>
+ </li>
+ ))
+ }
</ul>
<style>
@@ -23,7 +27,7 @@ const { tags, ...attrs } = Astro.props;
display: flex;
gap: var(--theme-space-3xs);
}
- li {
+ .p-category {
padding: var(--theme-space-3xs) var(--theme-space-2xs);
border-radius: var(--theme-radius-full);
background-color: var(--theme-accent-dark);
@@ -31,7 +35,7 @@ const { tags, ...attrs } = Astro.props;
font-size: var(--theme-text-sm);
font-weight: 500;
}
- li::before {
+ .p-category::before {
content: '#';
}
</style>