From 88e396dfdeb6307c1a73777017bf2d83941ad56b Mon Sep 17 00:00:00 2001 From: kubgus Date: Fri, 8 Dec 2023 00:51:41 +0100 Subject: [PATCH] Add blog pages for later --- src/layouts/blog.astro | 33 +++++++++++++ src/pages/blog/1.md | 64 ++++++++++++++++++++++++++ src/styles/blog.css | 102 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 199 insertions(+) create mode 100644 src/layouts/blog.astro create mode 100644 src/pages/blog/1.md create mode 100644 src/styles/blog.css diff --git a/src/layouts/blog.astro b/src/layouts/blog.astro new file mode 100644 index 0000000..04d9c30 --- /dev/null +++ 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; +--- + + + + + + + + + Jakub Gustafik: { frontmatter.title } + + + + +
+

{ frontmatter.title }

+

{ frontmatter.description }

+

By { frontmatter.author } on { frontmatter.pubDate.slice(0,10) }

+ +
+ +
+ +
+ + diff --git a/src/pages/blog/1.md b/src/pages/blog/1.md new file mode 100644 index 0000000..7693f3c --- /dev/null +++ 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 | \ No newline at end of file diff --git a/src/styles/blog.css b/src/styles/blog.css new file mode 100644 index 0000000..99ebd07 --- /dev/null +++ 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; +} \ No newline at end of file