Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-10 23:01:26 -05:00
Code Issues Activity

a few styling fixes

Browse source
This commit is contained in:
Tony Sullivan 2023-09-18 12:01:07 -05:00
parent d77bd5d447
commit 1d9faff6fe
3 changed files with 14 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
examples/social-feed/src/components/Article.astro
View file

@ -1,6 +1,5 @@
--- ---
import ArticleHeader from './ArticleHeader.astro'; import ArticleHeader from './ArticleHeader.astro';
import SplitLayout from './SplitLayout.astro';
import type { Article, Post } from '../content/config.js'; import type { Article, Post } from '../content/config.js';
export interface Props { export interface Props {
@ -9,31 +8,14 @@ export interface Props {
const { article } = Astro.props; const { article } = Astro.props;
const { Content, headings } = await article.render(); const { Content } = await article.render();
--- ---
<article> <article>
<ArticleHeader {article} class="header" /> <ArticleHeader {article} class="header" />
<SplitLayout reverse>
<div class="e-content"> <div class="e-content">
<Content /> <Content />
</div> </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> </article>
<style> <style>
@ -60,30 +42,7 @@ const { Content, headings } = await article.render();
margin-inline: auto; 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) { @media (min-width: 50em) {
aside {
display: block;
}
.e-content > :global(* + *) { .e-content > :global(* + *) {
margin-block-start: 1.5em; margin-block-start: 1.5em;
} }

3
examples/social-feed/src/components/Pagination.astro
View file

@ -99,12 +99,13 @@ if (max < lastPage) items.push(makeItem(lastPage));
} }
a { a {
text-decoration: none; text-decoration: none;
color: var(--theme-text);
} }
.pagination-item > * { .pagination-item > * {
border: 1.5px solid var(--theme-accent-dark); border: 1.5px solid var(--theme-accent-dark);
border-radius: var(--theme-radius-base); border-radius: var(--theme-radius-base);
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
background-color: var(--theme-accent-light); background-color: var(--theme-bg-accent);
font-size: var(--theme-text-sm); font-size: var(--theme-text-sm);
font-weight: 700; font-weight: 700;
box-shadow: var(--theme-shadow-sm); box-shadow: var(--theme-shadow-sm);

18
examples/social-feed/src/components/TagList.astro
View file

@ -9,11 +9,15 @@ const { tags, ...attrs } = Astro.props;
--- ---
<ul {...attrs}> <ul {...attrs}>
{tags.map((tag) => ( {
<li> tags.map((tag) => (
<a href={`/category/${tag}/`} rel="category tag" class="p-category">{tag}</a> <li>
</li> <a href={`/category/${tag}/`} rel="category tag" class="p-category">
))} {tag}
</a>
</li>
))
}
</ul> </ul>
<style> <style>
@ -23,7 +27,7 @@ const { tags, ...attrs } = Astro.props;
display: flex; display: flex;
gap: var(--theme-space-3xs); gap: var(--theme-space-3xs);
} }
li { .p-category {
padding: var(--theme-space-3xs) var(--theme-space-2xs); padding: var(--theme-space-3xs) var(--theme-space-2xs);
border-radius: var(--theme-radius-full); border-radius: var(--theme-radius-full);
background-color: var(--theme-accent-dark); background-color: var(--theme-accent-dark);
@ -31,7 +35,7 @@ const { tags, ...attrs } = Astro.props;
font-size: var(--theme-text-sm); font-size: var(--theme-text-sm);
font-weight: 500; font-weight: 500;
} }
li::before { .p-category::before {
content: '#'; content: '#';
} }
</style> </style>