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

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

@ -12,26 +12,5 @@ export interface Props extends LayoutProps {}
<div> <div>
<slot /> <slot />
</div> </div>
</SplitLayout> </SplitLayout>
</Layout> </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>