Add error page and update styles

src/content/blog/markdown-style-guide.md

@@ -0,0 +1,60 @@
+---
+title: "Markdown style guide"
+publicationDate: 2023-05-20
+description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
+---
+
+## Headings
+
+### H3
+
+#### H4
+
+## Inline styles
+
+hello **bold** the brown fox jumps _italicized text_ over the `code` high fence [link](https://example.com) and ~~the world is flat~~.
+
+## Blockquote
+
+> Be courteous to all, but intimate with few, and let those few be well tried before you give them your confidence. True friendship is a plant of slow growth, and must undergo and withstand the shocks of adversity before it is entitled to the appellation.<br>
+> — <cite>George Washington</cite>
+## Lists
+
+### Ordered list
+
+1. First item
+2. Second item
+3. Third item
+
+### Unordered list
+
+- First item
+- Second item
+- Third item
+
+## Horizontal rule
+
+---
+
+## Image
+
+![A deer with its head resting on its back. The animal has a brown fur coat and long ears, and it appears to be standing in an outdoor setting. Its snout is visible, as well as the white markings around its eyes.](../../assets/blog/markdown-style-guide/example-image.jpg)
+
+## Table
+
+This is technically not a table anymore. To make it completely responsive, I applied `display: block` and `overflow-x: auto` on the `table` element.
+
+| Syntax    | Description |
+| --------- | ----------- |
+| Header    | Title       |
+| Paragraph | Text        |
+
+## Fenced code block
+
+```json
+{
+  "firstName": "John",
+  "lastName": "Smith",
+  "age": 25
+}
+```

src/pages/404.astro

@@ -0,0 +1,9 @@
+---
+import PageLayout from "../layouts/PageLayout.astro";
+
+const description = "Oops! We could not find the page you are looking for. It seems like the content you are seeking has taken a detour or is temporarily unavailable."
+---
+
+<PageLayout title="404 - Page not found" {description}>
+  <p>{description}</p>
+</PageLayout>

src/styles/global.css

@@ -39,6 +39,9 @@ body {
   font-family: "Roboto", sans-serif;
   background-color: var(--background-color);
   color: var(--text-color);
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100vh;
 }
 
 nav,
@@ -48,6 +51,10 @@ footer {
   padding-inline: 1rem;
 }
 
+main {
+  margin-block-end: auto;
+}
+
 .container {
   max-inline-size: 65ch;
   margin-inline: auto;
@@ -132,3 +139,9 @@ ol {
 a {
   color: var(--accent-color);
 }
+
+blockquote {
+  margin-inline-start: 0;
+  padding-inline-start: 1rem;
+  border-inline-start: var(--standard-border);
+}