diff options
| author |  Mark Peck <peck.mark@gmail.com>
| 2023-07-25 09:51:38 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-07-25 09:51:38 -0500 |
| commit | 8e14621659e86b4970f2486f13d8c7384f5ff9d9 (patch) | |
| tree | 26d90d70f01961367bfea9b93c632f73208464e8 /examples/blog/src/pages | |
| parent | 0c1a26adc8ec9d6009dc9062cbe5165f88203d5f (diff) | |
| download | astro-8e14621659e86b4970f2486f13d8c7384f5ff9d9.tar.gz astro-8e14621659e86b4970f2486f13d8c7384f5ff9d9.tar.zst astro-8e14621659e86b4970f2486f13d8c7384f5ff9d9.zip | |
Blog theme styling updates (#7768)
* whole lotta updates and including some new fonts
* update placeholders
* fix mobile first child
* remove experimental stuff
* adding accessible text to header icon links
* preloading font files
* i did dum things
---------
Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com>
Diffstat (limited to 'examples/blog/src/pages')
| -rw-r--r-- | examples/blog/src/pages/about.astro | 3 | ||||
| -rw-r--r-- | examples/blog/src/pages/blog/[...slug].astro | 1 | ||||
| -rw-r--r-- | examples/blog/src/pages/blog/index.astro | 76 |
3 files changed, 66 insertions, 14 deletions
diff --git a/examples/blog/src/pages/about.astro b/examples/blog/src/pages/about.astro index 2bed97845..c9d5b0292 100644 --- a/examples/blog/src/pages/about.astro +++ b/examples/blog/src/pages/about.astro @@ -6,8 +6,7 @@ import Layout from '../layouts/BlogPost.astro'; title="About Me" description="Lorem ipsum dolor sit amet" pubDate={new Date('August 08 2021')} - updatedDate={new Date('August 08 2022')} - heroImage="/placeholder-about.jpg" + heroImage="/blog-placeholder-about.jpg" > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut diff --git a/examples/blog/src/pages/blog/[...slug].astro b/examples/blog/src/pages/blog/[...slug].astro index 0d656a153..12436c2b2 100644 --- a/examples/blog/src/pages/blog/[...slug].astro +++ b/examples/blog/src/pages/blog/[...slug].astro @@ -16,6 +16,5 @@ const { Content } = await post.render(); --- <BlogPost {...post.data}> - <h1>{post.data.title}</h1> <Content /> </BlogPost> diff --git a/examples/blog/src/pages/blog/index.astro b/examples/blog/src/pages/blog/index.astro index 47126e7d3..f549d3e15 100644 --- a/examples/blog/src/pages/blog/index.astro +++ b/examples/blog/src/pages/blog/index.astro @@ -16,20 +16,71 @@ const posts = (await getCollection('blog')).sort( <head> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <style> + main { + width: 960px; + } ul { - list-style-type: none; - padding: unset; + display: flex; + flex-wrap: wrap; + gap: 2rem; + list-style-type: none; + margin: 0; + padding: 0; } ul li { - display: flex; + width: calc(50% - 1rem); + } + ul li * { + text-decoration: none; + transition: 0.2s ease; + } + ul li:first-child { + width: 100%; + margin-bottom: 1rem; + text-align: center; + } + ul li:first-child img { + width: 100%; + } + ul li:first-child .title { + font-size: 2.369rem; + } + ul li img { + margin-bottom: .5rem; + border-radius: 12px; + } + ul li a { + display: block; + } + .title { + margin: 0; + color: rgb(var(--black)); + line-height: 1; + } + .date { + margin: 0; + color: rgb(var(--gray)); + } + ul li a:hover h4, ul li a:hover .date { + color: rgb(var(--accent)); } - ul li :global(time) { - flex: 0 0 130px; - font-style: italic; - color: #595959; + ul a:hover img { + box-shadow: var(--box-shadow); } - ul li a:visited { - color: #8e32dc; + @media (max-width: 720px) { + ul { + gap: .5em; + } + ul li { + width: 100%; + text-align: center; + } + ul li:first-child { + margin-bottom: 0; + } + ul li:first-child .title { + font-size: 1.563em; + } } </style> </head> @@ -41,8 +92,11 @@ const posts = (await getCollection('blog')).sort( { posts.map((post) => ( <li> - <FormattedDate date={post.data.pubDate} /> - <a href={`/blog/${post.slug}/`}>{post.data.title}</a> + <a href={`/blog/${post.slug}/`}> + <img width={720} height={360} src={post.data.heroImage} alt="" /> + <h4 class="title">{post.data.title}</h4> + <p class="date"><FormattedDate date={post.data.pubDate} /></p> + </a> </li> )) } |