diff --git a/src/components/Tags.astro b/src/components/Tags.astro
index 97aee7f..1882f70 100644
--- a/src/components/Tags.astro
+++ b/src/components/Tags.astro
@@ -1,12 +1,12 @@
---
-const { tags } = Astro.props
+const { tags } = Astro.props;
---
{
tags.sort().map((tag: string) => (
- {tag}
+ #{tag}
))
}
@@ -18,19 +18,8 @@ const { tags } = Astro.props
}
.tag {
- font-size: 0.8rem;
- color: white;
- padding: 4px 8px;
- border-radius: 25px;
- background: var(--blue);
+ font-size: 1rem;
line-height: 2rem;
- transition: filter 0.15s;
- text-decoration: none;
- }
-
- .tag:hover {
- text-decoration: none;
- filter: saturate(120%);
}
.tag:not(:last-child) {
diff --git a/src/components/icons/Calendar.astro b/src/components/icons/Calendar.astro
deleted file mode 100644
index 9be0d04..0000000
--- a/src/components/icons/Calendar.astro
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/components/icons/RSS.astro b/src/components/icons/RSS.astro
deleted file mode 100644
index 3f74346..0000000
--- a/src/components/icons/RSS.astro
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/components/icons/UserIcon.astro b/src/components/icons/UserIcon.astro
deleted file mode 100644
index 4b597b4..0000000
--- a/src/components/icons/UserIcon.astro
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/components/icons/Website.astro b/src/components/icons/Website.astro
deleted file mode 100644
index 55836d4..0000000
--- a/src/components/icons/Website.astro
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/layouts/About.astro b/src/layouts/About.astro
index 926536a..7c7e482 100644
--- a/src/layouts/About.astro
+++ b/src/layouts/About.astro
@@ -1,6 +1,6 @@
---
-export const prerender = true
-import Layout from '@layouts/Layout.astro'
+export const prerender = true;
+import Layout from '@layouts/Layout.astro';
const styles = {
img: {
@@ -10,7 +10,7 @@ const styles = {
marginBottom: '26px',
borderRadius: '200px',
},
-}
+};
---
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 80999a6..a77d6a7 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,16 +1,16 @@
---
-import '@styles/global.css'
+import '@styles/global.css';
-import Header from '@components/Header.astro'
-import Footer from '@components/Footer.astro'
+import Header from '@components/Header.astro';
+import Footer from '@components/Footer.astro';
export interface Props {
- title: string
+ title: string;
}
const title = Astro.props.frontmatter
? Astro.props.frontmatter.title
- : Astro.props.title
+ : Astro.props.title;
---
diff --git a/src/pages/about.md b/src/pages/about.md
index 6857806..d27b798 100644
--- a/src/pages/about.md
+++ b/src/pages/about.md
@@ -11,6 +11,6 @@ I also like writing about stuff, so I put together this site to share whatever's
If your interested in checking out my web dev projects, check out [my portfolio](https://ghall.dev/).
-If you want to get in touch, I'm on Mastodon.
+If you want to get in touch, I'm on Mastodon.
My portrait was drawn by [Natalia Vazquez](https://www.nataliavazquezgarcia.com).
diff --git a/src/pages/archive/[tag].astro b/src/pages/archive/[tag].astro
index 03bdcb9..8f8e359 100644
--- a/src/pages/archive/[tag].astro
+++ b/src/pages/archive/[tag].astro
@@ -1,33 +1,37 @@
---
-import { getCollection } from 'astro:content'
+import { getCollection } from 'astro:content';
-import Layout from '@layouts/Layout.astro'
-import FormattedDate from '@components/FormattedDate.astro'
+import Layout from '@layouts/Layout.astro';
+import FormattedDate from '@components/FormattedDate.astro';
-const { tag } = Astro.params
+const { tag } = Astro.params;
-const page = Number.parseInt(Astro.url.searchParams.get('page'))
-const prevPage = page - 1
-const nextPage = page + 1
+const page = Number.parseInt(Astro.url.searchParams.get('page'));
+const prevPage = page - 1;
+const nextPage = page + 1;
const posts = await getCollection('blog', ({ data }) => {
if (tag === 'all') {
- return true
+ return true;
}
- return data.tags.includes(tag)
-})
+ return data.tags.includes(tag);
+});
if (posts.length === 0) {
- return Astro.redirect('/404')
+ return Astro.redirect('/404');
}
-posts.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
-const totalPosts = posts.length
+posts.sort(
+ (a, b) =>
+ Date.parse(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate))
+);
-const start = (page - 1) * 10
-const end = page * 10
+const totalPosts = posts.length;
-const displayPosts = posts.slice(start, end)
+const start = (page - 1) * 10;
+const end = page * 10;
+
+const displayPosts = posts.slice(start, end);
---
@@ -41,22 +45,10 @@ const displayPosts = posts.slice(start, end)
}
- {
- end >= totalPosts ? null : (
-
- Next →
-
- )
- }
+ {end >= totalPosts ? null :
Next →}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 48fff0d..e2b4109 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,11 @@
---
-export const prerender = true
-import { getCollection } from 'astro:content'
+export const prerender = true;
+import { getCollection } from 'astro:content';
-import Layout from '@layouts/Layout.astro'
-import PostPreview from '@components/PostPreview.astro'
+import Layout from '@layouts/Layout.astro';
+import PostPreview from '@components/PostPreview.astro';
-const posts = await getCollection('blog')
+const posts = await getCollection('blog');
---
@@ -18,9 +18,7 @@ const posts = await getCollection('blog')
{
posts.length < 5 ? null : (
)
}
diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro
index a2d0c40..d02f6db 100644
--- a/src/pages/posts/[slug].astro
+++ b/src/pages/posts/[slug].astro
@@ -1,24 +1,24 @@
---
-export const prerender = true
-import { getCollection } from 'astro:content'
+export const prerender = true;
+import { getCollection } from 'astro:content';
-import Layout from '@layouts/Layout.astro'
-import BlogHeader from '@components/BlogHeader.astro'
-import Tags from '@components/Tags.astro'
+import Layout from '@layouts/Layout.astro';
+import BlogHeader from '@components/BlogHeader.astro';
+import Tags from '@components/Tags.astro';
export async function getStaticPaths() {
- const posts = await getCollection('blog')
+ const posts = await getCollection('blog');
return posts.map((post) => ({
params: { slug: post.slug },
props: { post },
- }))
+ }));
}
-const { post } = Astro.props
+const { post } = Astro.props;
-const { data } = post
+const { data } = post;
-const { Content } = await post.render()
+const { Content } = await post.render();
---
@@ -39,11 +39,10 @@ const { Content } = await post.render()
.no-shadow {
box-shadow: none;
}
- .footnotes li {
+ .footnotes {
font-size: 0.8rem;
}
.footnotes p {
- font-size: 0.8rem;
display: inline;
}
diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js
index 71e6f0a..2b6ae81 100644
--- a/src/pages/rss.xml.js
+++ b/src/pages/rss.xml.js
@@ -1,11 +1,11 @@
-import rss from '@astrojs/rss'
-import { getCollection } from 'astro:content'
-import sanitizeHtml from 'sanitize-html'
-import MarkdownIt from 'markdown-it'
-const parser = new MarkdownIt({ html: true })
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+import sanitizeHtml from 'sanitize-html';
+import MarkdownIt from 'markdown-it';
+const parser = new MarkdownIt({ html: true });
export async function get(context) {
- const blog = await getCollection('blog')
+ const blog = await getCollection('blog');
return rss({
title: 'ghall.blog',
description:
@@ -19,5 +19,5 @@ export async function get(context) {
link: `/posts/${post.slug}/`,
content: sanitizeHtml(parser.render(post.body)),
})),
- })
+ });
}
diff --git a/src/styles/fonts/CrimsonText-Regular.ttf b/src/styles/fonts/CrimsonText-Regular.ttf
new file mode 100755
index 0000000..f24bf2a
Binary files /dev/null and b/src/styles/fonts/CrimsonText-Regular.ttf differ
diff --git a/src/styles/fonts/JetBrainsMono-VariableFont_wght.ttf b/src/styles/fonts/JetBrainsMono-VariableFont_wght.ttf
new file mode 100755
index 0000000..d73994a
Binary files /dev/null and b/src/styles/fonts/JetBrainsMono-VariableFont_wght.ttf differ
diff --git a/src/styles/fonts/Manrope-Bold.ttf b/src/styles/fonts/Manrope-Bold.ttf
deleted file mode 100755
index 2f84ae3..0000000
Binary files a/src/styles/fonts/Manrope-Bold.ttf and /dev/null differ
diff --git a/src/styles/fonts/Manrope-ExtraBold.ttf b/src/styles/fonts/Manrope-ExtraBold.ttf
deleted file mode 100755
index 0192c9a..0000000
Binary files a/src/styles/fonts/Manrope-ExtraBold.ttf and /dev/null differ
diff --git a/src/styles/fonts/Manrope-ExtraLight.ttf b/src/styles/fonts/Manrope-ExtraLight.ttf
deleted file mode 100755
index cf7cea3..0000000
Binary files a/src/styles/fonts/Manrope-ExtraLight.ttf and /dev/null differ
diff --git a/src/styles/fonts/Manrope-Light.ttf b/src/styles/fonts/Manrope-Light.ttf
deleted file mode 100755
index 05ab753..0000000
Binary files a/src/styles/fonts/Manrope-Light.ttf and /dev/null differ
diff --git a/src/styles/fonts/Manrope-Medium.ttf b/src/styles/fonts/Manrope-Medium.ttf
deleted file mode 100755
index 00067fc..0000000
Binary files a/src/styles/fonts/Manrope-Medium.ttf and /dev/null differ
diff --git a/src/styles/fonts/Manrope-Regular.ttf b/src/styles/fonts/Manrope-Regular.ttf
deleted file mode 100755
index 2b8c03e..0000000
Binary files a/src/styles/fonts/Manrope-Regular.ttf and /dev/null differ
diff --git a/src/styles/fonts/Manrope-SemiBold.ttf b/src/styles/fonts/Manrope-SemiBold.ttf
deleted file mode 100755
index c556d42..0000000
Binary files a/src/styles/fonts/Manrope-SemiBold.ttf and /dev/null differ
diff --git a/src/styles/global.css b/src/styles/global.css
index 03bc24c..efea07b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,15 +1,13 @@
@font-face {
- font-family: Manrope;
- src: url(./fonts/Manrope-Regular.ttf) format('truetype');
- font-weight: normal;
+ font-family: CrimsonText;
+ src: url(./fonts/CrimsonText-Regular.ttf) format('truetype');
font-style: normal;
font-display: block;
}
@font-face {
- font-family: Manrope;
- src: url(./fonts/Manrope-Bold.ttf) format('truetype');
- font-weight: bold;
+ font-family: JetBrainsMono;
+ src: url(./fonts/JetBrainsMono-VariableFont_wght.ttf) format('truetype');
font-style: normal;
font-display: block;
}
@@ -19,25 +17,17 @@
--red: #ce3446;
--orange: #e56045;
--text: #444444;
- --background: white;
+ --background: #fffef5;
+ --flat-bg: white;
--radius: 5px;
--shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
- --border: 1px solid rgb(239, 239, 239);
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --blue: #5996e9;
- --red: #e75969;
- --orange: #e87c66;
- --text: white;
- --background: color(display-p3 0.141 0.149 0.216);
- --border: 1px solid rgb(102, 102, 102);
- }
+ --border: 1px solid #7f7f7f;
}
* {
- font-family: 'Manrope', sans-serif;
+ /* font-family: 'CrimsonText', serif; */
+ font-family: 'CrimsonText', serif;
+ font-size: 1.2rem;
color: var(--text);
letter-spacing: 0.03rem;
}
@@ -68,7 +58,7 @@ h4 {
}
p {
- font-size: 1.05rem;
+ line-height: 1.8rem;
}
blockquote {
@@ -83,6 +73,17 @@ hr {
margin: 2rem 0;
}
+kbd {
+ padding: 2px 8px;
+ font-size: 0.8rem;
+ font-family: sans-serif;
+ border: var(--border);
+ border-radius: var(--radius);
+ background: var(--flat-bg);
+ box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
+ rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
+}
+
/* Links */
a {
@@ -99,7 +100,8 @@ a:hover {
pre code,
code {
color: var(--orange);
- font-family: monospace;
+ font-family: 'JetBrainsMono', monospace;
+ font-size: 1rem;
padding: 2px 4px;
border-radius: var(--radius);
background: rgba(155, 155, 155, 0.2);
@@ -243,7 +245,7 @@ dialog {
}
.post-preview {
- padding: 0.1rem 1rem 2rem;
+ padding: 0.1rem 0rem 2rem;
margin: 0 0 1.5rem 0;
}