Add blog pages for later

kubgus · Dec 7, 2023 · 88e396d · 88e396d
1 parent 0786f52
commit 88e396d
Show file tree

Hide file tree

Showing 3 changed files with 199 additions and 0 deletions.
diff --git a/src/layouts/blog.astro b/src/layouts/blog.astro
@@ -0,0 +1,33 @@
+---
+import "../styles/global.css"
+import "../styles/blog.css"
+
+import NightSky from '../components/night-sky.astro'
+
+const { frontmatter } = Astro.props;
+---
+
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+		<!-- TITLE -->
+		<title>Jakub Gustafik: { frontmatter.title }</title>
+	</head>
+	<body>
+		<NightSky />
+
+		<header>
+                <h1>{ frontmatter.title }</h1>
+                <h2>{ frontmatter.description }</h2>
+                <p>By { frontmatter.author } on { frontmatter.pubDate.slice(0,10) }</p>
+
+		</header>
+
+		<main>
+            <slot />
+		</main>
+	</body>
+</html>
diff --git a/src/pages/blog/1.md b/src/pages/blog/1.md
@@ -0,0 +1,64 @@
+---
+layout: "../../layouts/blog.astro"
+title: "First blog post"
+pubDate: 2023-12-08
+description: "I'm building a blog with Astro!"
+author: "Jakub Gustafik"
+image:
+    url: "https://docs.astro.build/assets/full-logo-light.png"
+    alt: "Astro logo"
+---
+
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+
+This is a paragraph.
+
+This is another paragraph.
+
+This is a paragraph with **bold** and *italic* text.
+
+This is a paragraph with a [link](https://astro.build).
+
+This is a paragraph with an image:
+
+![Astro logo](https://docs.astro.build/assets/full-logo-light.png)
+
+This is a paragraph with a code block:
+
+```js
+console.log('Hello world!')
+```
+
+This is a paragraph with a list:
+
+- Item 1
+- Item 2
+- Item 3
+
+This is a paragraph with a numbered list:
+
+1. Item 1
+2. Item 2
+3. Item 3
+
+This is a paragraph with a task list:
+
+- [x] Item 1
+- [ ] Item 2
+- [ ] Item 3
+
+This is a paragraph with a blockquote:
+
+> This is a blockquote.
+> It has multiple lines.
+
+This is a paragraph with a table:
+
+| Name | Age |
+| ---- | --- |
+| John | 20  |
+| Jane | 21  |
diff --git a/src/styles/blog.css b/src/styles/blog.css
@@ -0,0 +1,102 @@
+header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+header h1 {
+    font-size: 4rem;
+    margin-bottom: 1.5rem;
+    line-height: 4.5rem;
+}
+
+header h2 {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+header p {
+    opacity: 0.7;
+    font-size: 1rem;
+}
+
+main {
+    padding: 1.5rem;
+    background-color: rgba(255, 255, 255, .17);
+    backdrop-filter: blur(2px);
+    border-radius: 1rem;
+}
+
+main *:first-child {
+    margin-top: 0;
+}
+
+main * {
+    margin: 1rem 0;
+}
+
+main h1 {
+    font-size: 2.5rem;
+}
+
+main h2 {
+    font-size: 2rem;
+}
+
+main h3 {
+    font-size: 1.75rem;
+}
+
+main h4 {
+    font-size: 1.5rem;
+}
+
+main h5 {
+    font-size: 1.25rem;
+}
+
+main p {
+    font-size: 1.25rem;
+}
+
+main a {
+    color: rgb(236, 231, 246);
+}
+
+main img {
+    border-radius: 1rem;
+    text-shadow: 1px 1px 1px black;
+    width: clamp(10rem, 50vw, 45rem);
+}
+
+main pre {
+    padding: 1rem;
+    background-color: rgba(79, 79, 79, 0.17) !important;
+    backdrop-filter: blur(5px);
+    border-radius: 1rem;
+    overflow-x: scroll;
+}
+
+main li:not(.task-list-item) {
+    margin-left: 2rem;
+    list-style: initial;
+}
+
+main input[type="checkbox"] {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+}
+
+main blockquote {
+    color: #41af1caf;
+}
+
+main table {
+    border: 2px solid rgba(255, 255, 255, 1);
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+}