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 new file mode 100644 index 000000000..b4c20543e Binary files /dev/null and b/examples/blog/public/blog-placeholder-1.jpg differ diff --git a/examples/blog/public/blog-placeholder-2.jpg b/examples/blog/public/blog-placeholder-2.jpg new file mode 100644 index 000000000..a819b59c2 Binary files /dev/null and b/examples/blog/public/blog-placeholder-2.jpg differ diff --git a/examples/blog/public/blog-placeholder-3.jpg b/examples/blog/public/blog-placeholder-3.jpg new file mode 100644 index 000000000..067802c0f Binary files /dev/null and b/examples/blog/public/blog-placeholder-3.jpg differ diff --git a/examples/blog/public/blog-placeholder-4.jpg b/examples/blog/public/blog-placeholder-4.jpg new file mode 100644 index 000000000..947e7eaab Binary files /dev/null and b/examples/blog/public/blog-placeholder-4.jpg differ diff --git a/examples/blog/public/blog-placeholder-5.jpg b/examples/blog/public/blog-placeholder-5.jpg new file mode 100644 index 000000000..1a59ad9b6 Binary files /dev/null and b/examples/blog/public/blog-placeholder-5.jpg differ diff --git a/examples/blog/public/blog-placeholder-about.jpg b/examples/blog/public/blog-placeholder-about.jpg new file mode 100644 index 000000000..7b4aafbec Binary files /dev/null and b/examples/blog/public/blog-placeholder-about.jpg differ diff --git a/examples/blog/public/fonts/atkinson-bold.woff b/examples/blog/public/fonts/atkinson-bold.woff new file mode 100644 index 000000000..e7f8977ec Binary files /dev/null and b/examples/blog/public/fonts/atkinson-bold.woff differ diff --git a/examples/blog/public/fonts/atkinson-regular.woff b/examples/blog/public/fonts/atkinson-regular.woff new file mode 100644 index 000000000..bbe09c584 Binary files /dev/null and b/examples/blog/public/fonts/atkinson-regular.woff differ diff --git a/examples/blog/public/placeholder-hero.jpg b/examples/blog/public/placeholder-hero.jpg deleted file mode 100644 index 66c86497e..000000000 Binary files a/examples/blog/public/placeholder-hero.jpg and /dev/null differ diff --git a/examples/blog/public/placeholder-social.jpg b/examples/blog/public/placeholder-social.jpg deleted file mode 100644 index e8844fed3..000000000 Binary files a/examples/blog/public/placeholder-social.jpg and /dev/null differ 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; --- @@ -20,6 +20,10 @@ const { title, description, image = '/placeholder-social.jpg' } = Astro.props; + + + + 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(); --- 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'; ---
-

- {SITE_TITLE} -

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 -![This is a placeholder image description](/placeholder-social.jpg) +![This is a placeholder image description](/blog-placeholder-1.jpg) ## 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; @@ -41,8 +92,11 @@ const posts = (await getCollection('blog')).sort( { posts.map((post) => (
  • - - {post.data.title} + + +

    {post.data.title}

    +

    +
    • )) } 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; + color: rgb(var(--gray-dark)); + font-size: 20px; + line-height: 1.7; } -h1, -h2, -h3, -h4, -h5, -h6, -strong, -b { - color: #222; +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); } -nav a { - margin-right: 10px; +a:hover { + color: var(--accent); +} +p { + margin-bottom: 1em; +} +.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; }