Done, just need to add first article
This commit is contained in:
parent
51d503aed4
commit
f1d0f9ea9d
7 changed files with 30 additions and 20 deletions
|
@ -2,18 +2,24 @@ export default Object.entries({
|
||||||
all: {
|
all: {
|
||||||
title: "All",
|
title: "All",
|
||||||
default: true,
|
default: true,
|
||||||
|
descriptionTitle: "Welcome to the blog!",
|
||||||
description:
|
description:
|
||||||
"Hello, and welcome to my blog. I post about Discord Bot Development, Web Development, Linux, and other Tech-related subjects. You can filter and search in the sidebar."
|
"Hello, and welcome to my blog. I post about Discord Bot Development, Web Development, Linux, and other tech-related subjects. You can filter and search in the sidebar, and click on an article to read more."
|
||||||
},
|
},
|
||||||
linux: {
|
linux: {
|
||||||
title: "Linux",
|
title: "Linux",
|
||||||
description:
|
description:
|
||||||
"Linux is an operating system that has existed since the 1990s, and is used extensively, from Android in your phones (which is linux-based), to the over 40% of websites running on linux."
|
"Linux is an operating system that has existed since the 1990s, and is what I use on my PC daily. Linux is used extensively, from Android (which is Linux-based) in your phones, to the over 40% of websites running on Linux."
|
||||||
|
},
|
||||||
|
web: {
|
||||||
|
title: "Web Development",
|
||||||
|
description:
|
||||||
|
"Web Development impacts all of our lives daily, from ordering a package from Amazon to looking at this blog. There are over 2 billion (2,000,000,000) websites in the world, and that number is only increasing. [You can order a custom website from me here](/#hire)."
|
||||||
},
|
},
|
||||||
web: { title: "Web Development", description: "Web Development" },
|
|
||||||
bot: {
|
bot: {
|
||||||
title: "Discord Bot Development",
|
title: "Discord Bot Development",
|
||||||
description: "Discord Bot Development"
|
description:
|
||||||
|
"Discord is a chat app which has over 300 million registered accounts. There are Discord Bots which can automate tasks or add new features to improve your experience. I post articles about Discord Bots here. I can also [make a discord bot for you](/discord-bot-developer)."
|
||||||
},
|
},
|
||||||
other: {
|
other: {
|
||||||
title: "Other",
|
title: "Other",
|
||||||
|
|
|
@ -5,12 +5,12 @@ import styles from "../styles/Nav.module.css"
|
||||||
|
|
||||||
<nav class={styles.nav}>
|
<nav class={styles.nav}>
|
||||||
<section>
|
<section>
|
||||||
<a href="/" id={styles.logo}
|
<a href="/">
|
||||||
><img src="/images/logo.svg" alt="Henry Hiles" /></a
|
<img src="/images/logo.svg" alt="Henry Hiles" />
|
||||||
>
|
</a>
|
||||||
<a href="/#" class={styles.home}>Home</a>
|
<a href="/#">Home</a>
|
||||||
<a href="/#portfolio">Projects</a>
|
<a href="/#portfolio" class={styles.hide}>Projects</a>
|
||||||
<a href="/#about">About</a>
|
<a href="/#about" class={styles.hide}>About</a>
|
||||||
<a href="/#hire">Hire</a>
|
<a href="/#hire">Hire</a>
|
||||||
<a href="/blog">Blog</a>
|
<a href="/blog">Blog</a>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: "Welcome to my blog!"
|
title: "Welcome to my blog!"
|
||||||
pubDate: 1687027268667
|
pubDate: 1687027268667
|
||||||
category: "other"
|
|
||||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
||||||
|
category: "other"
|
||||||
---
|
---
|
||||||
|
|
||||||
Lorem ipsum dolor sit **amet**, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Lorem ipsum dolor sit **amet**, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: "Welcome to my blog!"
|
title: "Welcome to my blog!"
|
||||||
pubDate: 1687027268667
|
pubDate: 1687027268667
|
||||||
category: "other"
|
|
||||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
||||||
|
category: "other"
|
||||||
---
|
---
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: "Welcome to my blog!"
|
title: "Welcome to my blog!"
|
||||||
pubDate: 1687027268667
|
pubDate: 1687027268667
|
||||||
category: "other"
|
|
||||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
||||||
|
category: "other"
|
||||||
---
|
---
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
|
|
@ -51,7 +51,12 @@ const { filteredPosts, categoryProperties } = Astro.props
|
||||||
</aside>
|
</aside>
|
||||||
<div class={styles.right}>
|
<div class={styles.right}>
|
||||||
<article class={styles.description}>
|
<article class={styles.description}>
|
||||||
<h1>Welcome to the blog!</h1>
|
<h1>
|
||||||
|
{
|
||||||
|
categoryProperties.descriptionTitle ||
|
||||||
|
categoryProperties.title
|
||||||
|
}
|
||||||
|
</h1>
|
||||||
<Divider />
|
<Divider />
|
||||||
<p>
|
<p>
|
||||||
<Fragment
|
<Fragment
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
.nav {
|
.nav {
|
||||||
|
position: sticky;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
@ -10,7 +11,7 @@
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: 1.2rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav section {
|
.nav section {
|
||||||
|
@ -46,14 +47,12 @@
|
||||||
color: var(--primary-text);
|
color: var(--primary-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 500px) {
|
@media (max-width: 510px) {
|
||||||
.nav {
|
.nav {
|
||||||
position: sticky;
|
position: unset;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 450px) {
|
.nav .hide {
|
||||||
a.home {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue