diff options
Diffstat (limited to 'examples')
25 files changed, 319 insertions, 82 deletions
diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs index 3b2f75c84..40e75a89e 100644 --- a/examples/blog/astro.config.mjs +++ b/examples/blog/astro.config.mjs @@ -7,4 +7,4 @@ import sitemap from '@astrojs/sitemap'; export default defineConfig({ site: 'https://example.com', integrations: [mdx(), sitemap()], -}); +});
\ No newline at end of file diff --git a/examples/blog/public/blog-placeholder-1.jpg b/examples/blog/public/blog-placeholder-1.jpg Binary files differnew file mode 100644 index 000000000..b4c20543e --- /dev/null +++ b/examples/blog/public/blog-placeholder-1.jpg diff --git a/examples/blog/public/blog-placeholder-2.jpg b/examples/blog/public/blog-placeholder-2.jpg Binary files differnew file mode 100644 index 000000000..a819b59c2 --- /dev/null +++ b/examples/blog/public/blog-placeholder-2.jpg diff --git a/examples/blog/public/blog-placeholder-3.jpg b/examples/blog/public/blog-placeholder-3.jpg Binary files differnew file mode 100644 index 000000000..067802c0f --- /dev/null +++ b/examples/blog/public/blog-placeholder-3.jpg diff --git a/examples/blog/public/blog-placeholder-4.jpg b/examples/blog/public/blog-placeholder-4.jpg Binary files differnew file mode 100644 index 000000000..947e7eaab --- /dev/null +++ b/examples/blog/public/blog-placeholder-4.jpg diff --git a/examples/blog/public/blog-placeholder-5.jpg b/examples/blog/public/blog-placeholder-5.jpg Binary files differnew file mode 100644 index 000000000..1a59ad9b6 --- /dev/null +++ b/examples/blog/public/blog-placeholder-5.jpg diff --git a/examples/blog/public/blog-placeholder-about.jpg b/examples/blog/public/blog-placeholder-about.jpg Binary files differnew file mode 100644 index 000000000..7b4aafbec --- /dev/null +++ b/examples/blog/public/blog-placeholder-about.jpg diff --git a/examples/blog/public/fonts/atkinson-bold.woff b/examples/blog/public/fonts/atkinson-bold.woff Binary files differnew file mode 100644 index 000000000..e7f8977ec --- /dev/null +++ b/examples/blog/public/fonts/atkinson-bold.woff diff --git a/examples/blog/public/fonts/atkinson-regular.woff b/examples/blog/public/fonts/atkinson-regular.woff Binary files differnew file mode 100644 index 000000000..bbe09c584 --- /dev/null +++ b/examples/blog/public/fonts/atkinson-regular.woff diff --git a/examples/blog/public/placeholder-hero.jpg b/examples/blog/public/placeholder-hero.jpg Binary files differdeleted file mode 100644 index 66c86497e..000000000 --- a/examples/blog/public/placeholder-hero.jpg +++ /dev/null diff --git a/examples/blog/public/placeholder-social.jpg b/examples/blog/public/placeholder-social.jpg Binary files differdeleted file mode 100644 index e8844fed3..000000000 --- a/examples/blog/public/placeholder-social.jpg +++ /dev/null diff --git a/examples/blog/src/components/BaseHead.astro b/examples/blog/src/components/BaseHead.astro index e11d11149..344124012 100644 --- a/examples/blog/src/components/BaseHead.astro +++ b/examples/blog/src/components/BaseHead.astro @@ -11,7 +11,7 @@ interface Props { const canonicalURL = new URL(Astro.url.pathname, Astro.site); -const { title, description, image = '/placeholder-social.jpg' } = Astro.props; +const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props; --- <!-- Global Metadata --> @@ -20,6 +20,10 @@ const { title, description, image = '/placeholder-social.jpg' } = Astro.props; <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <meta name="generator" content={Astro.generator} /> +<!-- Font preloads --> +<link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin /> +<link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin /> + <!-- Canonical URL --> <link rel="canonical" href={canonicalURL} /> diff --git a/examples/blog/src/components/Footer.astro b/examples/blog/src/components/Footer.astro index 08395a4d1..8c5e2f871 100644 --- a/examples/blog/src/components/Footer.astro +++ b/examples/blog/src/components/Footer.astro @@ -3,11 +3,37 @@ const today = new Date(); --- <footer> - © {today.getFullYear()} YOUR NAME HERE. All rights reserved. + © {today.getFullYear()} Your name here. All rights reserved. + <div class="social-links"> + <a href="https://m.webtoo.ls/@astro" target="_blank"> + <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/mastodon"><path fill="currentColor" d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path></svg> + </a> + <a href="https://twitter.com/astrodotbuild" target="_blank"> + <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/twitter"><path fill="currentColor" d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path></svg> + </a> + <a href="https://github.com/withastro/astro" target="_blank"> + <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg> + </a> + </div> </footer> <style> footer { - padding: 25px; + padding: 2em 1em 6em 1em; + background: linear-gradient(var(--gray-gradient)) no-repeat; + color: rgb(var(--gray)); text-align: center; } + .social-links { + display: flex; + justify-content: center; + gap: 1em; + margin-top: 1em; + } + .social-links a { + text-decoration: none; + color: rgb(var(--gray)); + } + .social-links a:hover { + color: rgb(var(--gray-dark)); + } </style> diff --git a/examples/blog/src/components/Header.astro b/examples/blog/src/components/Header.astro index 4d3da1fcf..d559509ae 100644 --- a/examples/blog/src/components/Header.astro +++ b/examples/blog/src/components/Header.astro @@ -4,22 +4,65 @@ import { SITE_TITLE } from '../consts'; --- <header> - <h2> - {SITE_TITLE} - </h2> <nav> - <HeaderLink href="/">Home</HeaderLink> - <HeaderLink href="/blog">Blog</HeaderLink> - <HeaderLink href="/about">About</HeaderLink> - <HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink> - <HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink> + <h2><a href="/">{SITE_TITLE}</a></h2> + <div class="internal-links"> + <HeaderLink href="/">Home</HeaderLink> + <HeaderLink href="/blog">Blog</HeaderLink> + <HeaderLink href="/about">About</HeaderLink> + </div> + <div class="social-links"> + <a href="https://m.webtoo.ls/@astro" target="_blank"> + <span class="sr-only">Follow Astro on Mastodon</span> + <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"><path fill="currentColor" d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path></svg> + </a> + <a href="https://twitter.com/astrodotbuild" target="_blank"> + <span class="sr-only">Follow Astro on Twitter</span> + <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"-><path fill="currentColor" d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path></svg> + </a> + <a href="https://github.com/withastro/astro" target="_blank"> + <span class="sr-only">Go to Astro's GitHub repo</span> + <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg> + </a> + </div> </nav> </header> <style> header { - margin: 0em 0 2em; + margin: 0; + padding: 0 1em; + background: white; + box-shadow: 0 2px 8px rgba(var(--black), 5%); } h2 { - margin: 0.5em 0; + margin: 0;; + font-size: 1em; + } + + h2 a, h2 a.active { + text-decoration: none; + } + nav { + display: flex; + align-items: center; + justify-content: space-between; + } + nav a { + padding: 1em .5em; + color: var(--black); + border-bottom: 4px solid transparent; + text-decoration: none; + } + nav a.active { + text-decoration: none; + border-bottom-color: var(--accent); + } + .social-links, .social-links a { + display: flex; + } + @media (max-width: 720px) { + .social-links { + display: none; + } } </style> diff --git a/examples/blog/src/consts.ts b/examples/blog/src/consts.ts index 1d5dbf632..b42411da8 100644 --- a/examples/blog/src/consts.ts +++ b/examples/blog/src/consts.ts @@ -1,5 +1,5 @@ // Place any global data in this file. // You can import this data from anywhere in your site by using the `import` keyword. -export const SITE_TITLE = 'My personal website.'; -export const SITE_DESCRIPTION = 'Welcome to my website!'; +export const SITE_TITLE = 'Astro Blog'; +export const SITE_DESCRIPTION = 'Welcome to my website!';
\ No newline at end of file diff --git a/examples/blog/src/content/blog/first-post.md b/examples/blog/src/content/blog/first-post.md index eb5e250f8..3066715be 100644 --- a/examples/blog/src/content/blog/first-post.md +++ b/examples/blog/src/content/blog/first-post.md @@ -2,7 +2,7 @@ title: 'First post' description: 'Lorem ipsum dolor sit amet' pubDate: 'Jul 08 2022' -heroImage: '/placeholder-hero.jpg' +heroImage: '/blog-placeholder-3.jpg' --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. diff --git a/examples/blog/src/content/blog/markdown-style-guide.md b/examples/blog/src/content/blog/markdown-style-guide.md index bb7bb2daa..e7cede3d3 100644 --- a/examples/blog/src/content/blog/markdown-style-guide.md +++ b/examples/blog/src/content/blog/markdown-style-guide.md @@ -2,7 +2,7 @@ title: 'Markdown Style Guide' description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.' pubDate: 'Jul 01 2022' -heroImage: '/placeholder-hero.jpg' +heroImage: '/blog-placeholder-1.jpg' --- Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro. @@ -31,7 +31,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap ## Images - + ## Blockquotes diff --git a/examples/blog/src/content/blog/second-post.md b/examples/blog/src/content/blog/second-post.md index b5a067938..19a910598 100644 --- a/examples/blog/src/content/blog/second-post.md +++ b/examples/blog/src/content/blog/second-post.md @@ -2,7 +2,7 @@ title: 'Second post' description: 'Lorem ipsum dolor sit amet' pubDate: 'Jul 22 2022' -heroImage: '/placeholder-hero.jpg' +heroImage: '/blog-placeholder-4.jpg' --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. diff --git a/examples/blog/src/content/blog/third-post.md b/examples/blog/src/content/blog/third-post.md index a2bc343bd..463cd253d 100644 --- a/examples/blog/src/content/blog/third-post.md +++ b/examples/blog/src/content/blog/third-post.md @@ -2,7 +2,7 @@ title: 'Third post' description: 'Lorem ipsum dolor sit amet' pubDate: 'Jul 15 2022' -heroImage: '/placeholder-hero.jpg' +heroImage: '/blog-placeholder-2.jpg' --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. diff --git a/examples/blog/src/content/blog/using-mdx.mdx b/examples/blog/src/content/blog/using-mdx.mdx index 036209d3b..d976693e7 100644 --- a/examples/blog/src/content/blog/using-mdx.mdx +++ b/examples/blog/src/content/blog/using-mdx.mdx @@ -2,7 +2,7 @@ title: 'Using MDX' description: 'Lorem ipsum dolor sit amet' pubDate: 'Jul 02 2022' -heroImage: '/placeholder-hero.jpg' +heroImage: '/blog-placeholder-5.jpg' --- This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file. diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index a9526d0d4..da1cafe58 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -14,13 +14,39 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; <head> <BaseHead title={title} description={description} /> <style> + main { + width: calc(100% - 2em); + max-width: 100%; + margin: 0; + } + .hero-image { + width: 100%; + } + .hero-image img { + display: block; + margin: 0 auto; + border-radius: 12px; + box-shadow: var(--box-shadow); + } + .prose { + width: 720px; + max-width: calc(100% - 2em); + margin: auto; + padding: 1em; + color: rgb(var(--gray-dark)); + } .title { - font-size: 2em; - margin: 0.25em 0 0; + margin-bottom: 1em; + padding: 1em 0; + text-align: center; + line-height: 1; + } + .title h1 { + margin: 0 0 .5em 0; } - hr { - border-top: 1px solid #ddd; - margin: 1rem 0; + .date { + margin-bottom: .5em; + color: rgb(var(--gray)); } .last-updated-on { font-style: italic; @@ -32,20 +58,26 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; <Header /> <main> <article> - {heroImage && <img width={720} height={360} src={heroImage} alt="" />} - <h1 class="title">{title}</h1> - <FormattedDate date={pubDate} /> - { - updatedDate && ( - <div class="last-updated-on"> - Last updated on <FormattedDate date={updatedDate} /> + <div class="hero-image">{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}</div> + <div class="prose"> + <div class="title"> + <div class="date"> + <FormattedDate date={pubDate} /> + { + updatedDate && ( + <div class="last-updated-on"> + Last updated on <FormattedDate date={updatedDate} /> + </div> + ) + } </div> - ) - } - <hr /> - <slot /> + <h1>{title}</h1> + <hr /> + </div> + <slot /> + </div> </article> </main> <Footer /> </body> -</html> +</html>
\ No newline at end of file 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> )) } diff --git a/examples/blog/src/styles/global.css b/examples/blog/src/styles/global.css index 999782ff2..5ec3e0013 100644 --- a/examples/blog/src/styles/global.css +++ b/examples/blog/src/styles/global.css @@ -3,33 +3,84 @@ https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md */ + + :root { + --accent: #2337FF; + --accent-dark: #000D8A; + --black: 15, 18, 25; + --gray: 96, 115, 159; + --gray-light: 229, 233, 240; + --gray-dark: 34, 41, 57; + --gray-gradient: rgba(var(--gray-light), 50%), #fff; + --box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%), 0 16px 32px rgba(var(--gray), 33%); +} + @font-face { + font-family: 'Atkinson'; + src: url('/fonts/atkinson-regular.woff') format('woff'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + @font-face { + font-family: 'Atkinson'; + src: url('/fonts/atkinson-bold.woff') format('woff'); + font-weight: 700; + font-style: normal; + font-display: swap; +} body { - font-family: Verdana, sans-serif; - margin: auto; - padding: 20px; - max-width: 65ch; + font-family: 'Atkinson', sans-serif; + margin: 0; + padding: 0; text-align: left; - background-color: #fff; + background: linear-gradient(var(--gray-gradient)) no-repeat; + background-size: 100% 600px; word-wrap: break-word; overflow-wrap: break-word; - line-height: 1.5; - color: #444; -} -h1, -h2, -h3, -h4, -h5, -h6, -strong, -b { - color: #222; + color: rgb(var(--gray-dark)); + font-size: 20px; + line-height: 1.7; +} +main { + width: 720px; + max-width: calc(100% - 2em); + margin: auto; + padding: 3em 1em; +} +h1, h2, h3, h4, h5, h6 { + margin: 0 0 .5rem 0; + color: rgb(var(--black)); + line-height: 1.2; +} +h1 { + font-size: 3.052em; +} +h2 { + font-size: 2.441em; +} +h3 { + font-size: 1.953em; +} +h4 { + font-size: 1.563em; +} +h5 { + font-size: 1.25em; +} +strong, b { + font-weight: 700; } a { - color: #3273dc; + color: var(--accent); +} +a:hover { + color: var(--accent); +} +p { + margin-bottom: 1em; } -nav a { - margin-right: 10px; +.prose p { + margin-bottom: 2em; } textarea { width: 100%; @@ -38,30 +89,59 @@ textarea { input { font-size: 16px; } -content { - line-height: 1.6; -} table { width: 100%; } img { max-width: 100%; height: auto; + border-radius: 8px; } code { padding: 2px 5px; - background-color: #f2f2f2; + background-color: rgb(var(--gray-light)); + border-radius: 2px; } pre { - padding: 1rem; + padding: 1.5em; + border-radius: 8px; } pre > code { all: unset; } blockquote { - border: 1px solid #999; - color: #222; - padding: 2px 0px 2px 20px; + border-left: 4px solid var(--accent); + padding: 0 0 0 20px; margin: 0px; - font-style: italic; + font-size: 1.333em; +} +hr { + border: none; + border-top: 1px solid rgb(var(--gray-light)); +} +@media (max-width: 720px) { + body { + font-size: 18px; + } + main { + padding: 1em; + } +} + +.sr-only { + border: 0; + padding: 0; + margin: 0; + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */ + clip: rect(1px 1px 1px 1px); + /* maybe deprecated but we need to support legacy browsers */ + clip: rect(1px, 1px, 1px, 1px); + /* modern browsers, clip-path works inwards from each corner */ + clip-path: inset(50%); + /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ + white-space: nowrap; } |
