diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/PostElement.astro | 46 | ||||
| -rw-r--r-- | src/layouts/BaseLayout.astro | 4 | ||||
| -rw-r--r-- | src/pages/blog/[...slug].astro | 34 | ||||
| -rw-r--r-- | src/pages/index.astro | 13 | ||||
| -rw-r--r-- | src/scss/_framework.scss | 63 | ||||
| -rw-r--r-- | src/scss/_navbar.scss | 10 | ||||
| -rw-r--r-- | src/scss/_variables.scss | 30 |
7 files changed, 124 insertions, 76 deletions
diff --git a/src/components/PostElement.astro b/src/components/PostElement.astro new file mode 100644 index 0000000..889cc47 --- /dev/null +++ b/src/components/PostElement.astro @@ -0,0 +1,46 @@ +--- +import dayjs from "dayjs"; + +const { post } = Astro.props; +--- + +<style lang="scss"> + @import "../scss/_variables.scss"; + + /* Post */ + .post { + padding-bottom: 3rem; + } + + .link { + color: $colorText; + } + + /* Meta */ + .meta { + padding-bottom: 1.5rem; + } + + .date { + opacity: 0.5; + } + + .tag { + display: none; + } +</style> + +<article class="post"> + <h2><a class="link" href={`/blog/${post.slug}`}>{post.data.title}</a></h2> + <div class="meta"> + <time class="date" datetime={post.data.pubDate.toISOString()}> + {dayjs(post.data.pubDate.toString()).format("YYYY-MM-DD")} + </time> + <ul class="tag"> + <li><a href="#">tag1</a></li> + <li><a href="#">tag2</a></li> + </ul> + </div> + <p>{post.data.description}</p> + <a href={`/blog/${post.slug}`}>Read More</a> +</article> diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index af0d20e..54c9128 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -11,8 +11,8 @@ const { title, description } = Astro.props; <body> <Header /> - <article> + <main> <slot /> - </article> + </main> </body> </html> diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index f99ef21..4ecb1e1 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -23,17 +23,25 @@ const { Content, remarkPluginFrontmatter } = await post.render(); </style> <Layout title={post.data.title} description={post.data.description}> - <div class="header"> - <h1>{post.data.title}</h1> - <p> - <small> - Posted - <time datetime={post.data.pubDate.toISOString()}>{post.data.pubDate.toDateString()}</time> - by {post.data.author} ‐ - <strong>{remarkPluginFrontmatter.minutesRead}</strong> - </small> - </p> - </div> - <Content /> - <Comments /> + <article> + <section class="header"> + <h1>{post.data.title}</h1> + <p> + <small> + Posted + <time datetime={post.data.pubDate.toISOString()}>{post.data.pubDate.toDateString()}</time> + by {post.data.author} ‐ + <strong>{remarkPluginFrontmatter.minutesRead}</strong> + </small> + </p> + </section> + + <section> + <Content /> + </section> + + <section> + <Comments /> + </section> + </article> </Layout> diff --git a/src/pages/index.astro b/src/pages/index.astro index c4f5577..4380bbc 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,18 +1,13 @@ --- import { getCollection } from "astro:content"; +import Element from "../components/PostElement.astro"; import Layout from "../layouts/PageLayout.astro"; const posts = await getCollection("blog"); --- <Layout> - <ul> - { - posts.map((post) => ( - <li> - <a href={`/blog/${post.slug}`}>{post.data.title}</a> - </li> - )) - } - </ul> + <section> + {posts.map((post) => <Element post={post} />)} + </section> </Layout> diff --git a/src/scss/_framework.scss b/src/scss/_framework.scss index 0b80359..e1e0c13 100644 --- a/src/scss/_framework.scss +++ b/src/scss/_framework.scss @@ -6,16 +6,29 @@ } html { - font-family: $font-family-base; + font-family: + "Jost", + -apple-system, + blinkmacsystemfont, + "Segoe UI", + roboto, + "Helvetica Neue", + arial, + "Noto Sans", + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji"; font-size: 62.5%; min-height: 100%; overflow-y: scroll; } body { - background-color: $color-bg; - color: $color-text; - font-size: $font-size-base; + background-color: $colorBg; + color: $colorText; + font-size: $fontSizeBase; font-synthesis: weight style small-caps; font-weight: 400; line-height: 1.5; @@ -28,7 +41,7 @@ body { @media (width <=684px) { body { - font-size: $font-size-base * 0.85; + font-size: $fontSizeBase * 0.85; padding: 4em 1em 2em; } } @@ -84,16 +97,16 @@ sup { } hr { - border-color: $color-blossom; + border-color: $colorBlossom; } a { - color: $color-blossom; + color: $colorBlossom; text-decoration: inherit; transition: color 0.25s; &:visited { - color: $color-blossom; + color: $colorBlossom; } &:active, @@ -114,8 +127,8 @@ li { } blockquote { - background-color: $color-bg-alt; - border-left: 5px solid $color-blossom; + background-color: $colorBgAlt; + border-left: 5px solid $colorBlossom; margin-bottom: 2.5rem; margin-left: 0; margin-right: 0; @@ -136,9 +149,9 @@ video { } pre { - background-color: $color-bg-alt; + background-color: $colorBgAlt; border-radius: 4px; - border: 1px solid $color-bg-alt; + border: 1px solid $colorBgAlt; display: block; font-size: 0.9em; margin-bottom: 2.5rem; @@ -150,7 +163,7 @@ pre { code, kbd, samp { - background-color: $color-bg-code; + background-color: $colorBgCode; border-radius: 4px; font-size: 0.9em; padding: 0 0.2em; @@ -172,7 +185,7 @@ table { td, th { - border-bottom: 1px dashed $color-blossom; + border-bottom: 1px dashed $colorBlossom; padding: 0.5em; } @@ -185,11 +198,11 @@ button, input[type="submit"], input[type="reset"], input[type="button"] { - background-color: $color-blossom; - border: 1px solid $color-blossom; + background-color: $colorBlossom; + border: 1px solid $colorBlossom; border-radius: 1px; box-sizing: border-box; - color: $color-bg; + color: $colorBg; cursor: pointer; display: inline-block; padding: 5px 10px; @@ -204,9 +217,9 @@ input[type="button"] { &:focus:enabled, &:hover:enabled { - background-color: $color-fade; - border-color: $color-fade; - color: $color-bg; + background-color: $colorFade; + border-color: $colorFade; + color: $colorBg; outline: 0; } } @@ -214,23 +227,23 @@ input[type="button"] { textarea, select, input { - background-color: $color-bg-alt; - border: 1px solid $color-bg-alt; + background-color: $colorBgAlt; + border: 1px solid $colorBgAlt; border-radius: 4px; box-shadow: none; box-sizing: border-box; - color: $color-text; + color: $colorText; margin-bottom: 10px; padding: 6px 10px; &:focus { - border: 1px solid $color-blossom; + border: 1px solid $colorBlossom; outline: 0; } } input[type="checkbox"]:focus { - outline: 1px dotted $color-blossom; + outline: 1px dotted $colorBlossom; } label, diff --git a/src/scss/_navbar.scss b/src/scss/_navbar.scss index ee07ae4..9dea596 100644 --- a/src/scss/_navbar.scss +++ b/src/scss/_navbar.scss @@ -1,7 +1,7 @@ header { - background-color: $color-bg; - border-bottom: 1px solid $color-header; - box-shadow: 0 5px 5px $color-bg; + background-color: $colorBg; + border-bottom: 1px solid $colorHeader; + box-shadow: 0 5px 5px $colorBg; left: 0; line-height: 3.5em; opacity: 0.975; @@ -17,11 +17,11 @@ nav { text-align: right; a { - color: $color-text; + color: $colorText; padding: 0 1em; &:visited { - color: $color-text; + color: $colorText; } } } diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 9c69c8f..5b65f2a 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,22 +1,8 @@ -$color-bg: #212529; -$color-bg-alt: hwb(0deg 0% 100% / 20%); -$color-bg-code: #3b3d42; -$color-blossom: #6da13f; -$color-fade: #598332; -$color-header: #1b1f22; -$color-text: #dee2e6; -$font-family-base: - "Jost", - -apple-system, - blinkmacsystemfont, - "Segoe UI", - roboto, - "Helvetica Neue", - arial, - "Noto Sans", - sans-serif, - "Apple Color Emoji", - "Segoe UI Emoji", - "Segoe UI Symbol", - "Noto Color Emoji"; -$font-size-base: 1.8rem; +$colorBg: #212529; +$colorBgAlt: hwb(0deg 0% 100% / 20%); +$colorBgCode: #3b3d42; +$colorBlossom: #6da13f; +$colorFade: #598332; +$colorHeader: #1b1f22; +$colorText: #dee2e6; +$fontSizeBase: 1.8rem; |