Done, just need to add first article

This commit is contained in:
Henry Hiles 2023-06-25 09:56:37 -04:00
parent 51d503aed4
commit f1d0f9ea9d
7 changed files with 30 additions and 20 deletions

View file

@ -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",

View file

@ -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>

View file

@ -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.

View file

@ -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.

View file

@ -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.

View file

@ -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

View file

@ -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;
} }
} }