Updated the main page and page structures
This commit is contained in:
parent
70fa9c2033
commit
4ba339984d
GPG Key ID:
AE3CE523DAAA8401
7
package-lock.json
generated
7
package-lock.json
generated
@ -14,6 +14,7 @@
|
||||
"astro": "^4.15.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"cssnano": "^7.0.6",
|
||||
"dayjs": "^1.11.13",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
"reading-time": "^1.5.0",
|
||||
"sass": "^1.78.0",
|
||||
@ -2894,6 +2895,12 @@
|
||||
"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
|
||||
"license": "CC0-1.0"
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.13",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
|
||||
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"astro": "^4.15.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"cssnano": "^7.0.6",
|
||||
"dayjs": "^1.11.13",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
"reading-time": "^1.5.0",
|
||||
"sass": "^1.78.0",
|
||||
|
||||
46
src/components/PostElement.astro
Normal file
46
src/components/PostElement.astro
Normal file
@ -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>
|
||||
@ -11,8 +11,8 @@ const { title, description } = Astro.props;
|
||||
|
||||
<body>
|
||||
<Header />
|
||||
<article>
|
||||
<main>
|
||||
<slot />
|
||||
</article>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user