michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

mobile layout for card header

Browse source
This commit is contained in:
Tony Sullivan 2023-09-18 13:37:12 -05:00
parent 6800e399ed
commit 9addc2cbf1
2 changed files with 17 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
examples/social-feed/src/components/Card.astro
View file

@ -75,9 +75,9 @@ const postUrl = `/post/${post.slug}/`;
header {
display: grid;
grid-template-columns: auto auto 1fr;
grid-template-areas: 'avatar name nickname' 'avatar tags tags';
grid-template-areas: 'avatar name' 'avatar nickname' 'tags tags';
align-items: center;
row-gap: var(--theme-space-2xs);
row-gap: var(--theme-space-3xs);
column-gap: var(--theme-space-sm);
}
.h-card .u-photo {
@ -99,12 +99,16 @@ const postUrl = `/post/${post.slug}/`;
}
.tags {
grid-area: tags;
margin-block-start: var(--theme-space-2xs);
}
article > img {
article > .u-photo {
aspect-ratio: 21/9;
object-fit: cover;
border-radius: var(--theme-radius-lg);
}
.e-content > :global(* + *) {
margin-block-start: 1em;
}
footer {
display: flex;
align-items: center;
@ -113,4 +117,13 @@ const postUrl = `/post/${post.slug}/`;
footer > *:only-child {
margin-inline-start: auto;
}
@media (min-width: 50em) {
header {
grid-template-areas: 'avatar name nickname' 'avatar tags tags';
}
.tags {
margin-block-start: 0;
}
}
</style>

23
examples/social-feed/src/layouts/Feed.astro
View file

@ -12,26 +12,5 @@ export interface Props extends LayoutProps {}
<div>
<slot />
</div>
</SplitLayout>
</SplitLayout>
</Layout>
<style>
.flex-col {
display: flex;
flex-direction: column;
}
.wrapper {
gap: var(--theme-size-xl);
margin: 0 auto;
width: 100%;
max-width: var(--theme-content-width);
}
@media (min-width: 50em) {
.wrapper {
display: grid;
grid-template-columns: 12rem 1fr;
}
}
</style>