diff --git a/examples/blog/public/blog.css b/examples/blog/public/blog.css index 9264f4e02..1bd7479ce 100644 --- a/examples/blog/public/blog.css +++ b/examples/blog/public/blog.css @@ -90,31 +90,19 @@ body { } body { - display: flex; - flex-direction: column; - min-height: 100vh; font-family: var(--font-body); font-size: 1rem; font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem); line-height: 1.625; } -body { +.wrapper { + margin-left: auto; + margin-right: auto; + max-width: 65em; + padding-left: 2rem; + padding-right: 2rem; width: 100%; - display: grid; - --gutter: 0.5rem; - --doc-padding: 2rem; -} - -.layout { - display: grid; - grid-auto-flow: column; - grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr); - gap: 1em; -} - -.layout > :is(main, article) { - grid-column: 2; } nav ul { diff --git a/examples/blog/src/components/BlogHeader.astro b/examples/blog/src/components/BlogHeader.astro index 35ea272b7..92d0cbfb1 100644 --- a/examples/blog/src/components/BlogHeader.astro +++ b/examples/blog/src/components/BlogHeader.astro @@ -56,7 +56,7 @@ h1 a { } -
+
-
\ No newline at end of file +
diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro index 6a553366d..96d1190c7 100644 --- a/examples/blog/src/components/BlogPostPreview.astro +++ b/examples/blog/src/components/BlogPostPreview.astro @@ -26,13 +26,12 @@ const { post } = Astro.props; } header { + align-items: flex-start; display: flex; flex-direction: column; - text-align: left; - align-items: flex-start; justify-content: center; - padding-bottom: 2rem; + text-align: left; } .title, diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index 95ad97564..06bba074d 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -1,7 +1,7 @@ --- import BaseHead from '../components/BaseHead.astro'; -// import BlogHeader from '../components/BlogHeader.astro'; -// import BlogPost from '../components/BlogPost.astro'; +import BlogHeader from '../components/BlogHeader.astro'; +import BlogPost from '../components/BlogPost.astro'; const {content} = Astro.props; const {title, description, publishDate, author, heroImage, permalink, alt} = content; @@ -14,13 +14,12 @@ const {title, description, publishDate, author, heroImage, permalink, alt} = con -

Hello world!

-
- + +
+ + +
- - - diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro index 812897779..f96f5e049 100644 --- a/examples/blog/src/pages/index.astro +++ b/examples/blog/src/pages/index.astro @@ -30,14 +30,6 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(