aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorValentin Popov <valentin@popov.link>2024-09-12 16:11:16 +0300
committerValentin Popov <valentin@popov.link>2024-09-12 16:11:16 +0300
commit4ba339984d239180a526a5ae8ffbb558f1b5642a (patch)
tree4dbc5e555c995842e6eea7348f467ef778318b9d /src
parent70fa9c2033dce305db154103bccb41d8124d42d6 (diff)
downloadpopov.link-4ba339984d239180a526a5ae8ffbb558f1b5642a.tar.xz
popov.link-4ba339984d239180a526a5ae8ffbb558f1b5642a.zip
Updated the main page and page structures
Diffstat (limited to 'src')
-rw-r--r--src/components/PostElement.astro46
-rw-r--r--src/layouts/BaseLayout.astro4
-rw-r--r--src/pages/blog/[...slug].astro34
-rw-r--r--src/pages/index.astro13
-rw-r--r--src/scss/_framework.scss63
-rw-r--r--src/scss/_navbar.scss10
-rw-r--r--src/scss/_variables.scss30
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>
- &nbsp;by&nbsp;{post.data.author}&nbsp;‐
- <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>
+ &nbsp;by&nbsp;{post.data.author}&nbsp;‐
+ <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;
Copyright © 2024 Valentin A. Popov. All Rights Reverse Engineered.