diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index a56be37..85e695c 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -6,6 +6,8 @@ import Footer from '../components/Footer.astro';
import FormattedDate from '../components/FormattedDate.astro';
import { Code } from 'astro:components';
+import '../styles/markdown.css';
+
type Props = CollectionEntry<'blog'>['data'];
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
@@ -14,211 +16,6 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
-
diff --git a/src/layouts/UnixPost.astro b/src/layouts/UnixPost.astro
index 8322637..94eba4f 100644
--- a/src/layouts/UnixPost.astro
+++ b/src/layouts/UnixPost.astro
@@ -6,219 +6,16 @@ import Footer from '../components/Footer.astro';
import FormattedDate from '../components/FormattedDate.astro';
import { Code } from 'astro:components';
+import '../styles/markdown.css';
+
type Props = CollectionEntry<'unix'>['data'];
-const { title, description, updateDate, updatedDate, heroImage } = Astro.props;
+const { title, description, updateDate, heroImage } = Astro.props;
---
-
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
new file mode 100644
index 0000000..8485048
--- /dev/null
+++ b/src/styles/markdown.css
@@ -0,0 +1,214 @@
+/*
+ * >>>> Markdown Styles <<<<
+ *
+ * This stylesheet is meant for the blog and unix notes, and can be generally
+ * used for anything getting rendered largely from markdown.
+ *
+ * The parent div where the markdown gets inserted must have class "prose".
+ *
+ *
+ */
+
+/**** Outer body (not part of the markdown) ****/
+main {
+ max-width: 900px;
+ margin: auto;
+}
+div.markdown-title {
+ text-align: center;
+ margin-bottom: 20px;
+}
+h1.markdown-title {
+ font-family: var(--font-title);
+ font-size: 40px;
+}
+.hero-image {
+ width: 100%;
+}
+.hero-image img {
+ display: block;
+ margin: 30px auto;
+ border-radius: 22px;
+ filter: drop-shadow(0 4px 6px #000);
+}
+
+/**** Headings ****/
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 {
+ margin: calc(var(--font-size) / 3) 0;
+ font-family: var(--font-title);
+ text-align: left;
+ padding-left: 20px;
+ margin-left: -20px;
+}
+.prose h1 a,
+.prose h2 a,
+.prose h3 a,
+.prose h4 a,
+.prose h5 a,
+.prose h6 a {
+ width: 16px;
+ height: 64px;
+ position: absolute;
+ float: left;
+ margin-top: -2px;
+ margin-left: -20px;
+ visibility: hidden;
+}
+.prose h1:hover a svg.icon-link,
+.prose h2:hover a svg.icon-link,
+.prose h3:hover a svg.icon-link,
+.prose h4:hover a svg.icon-link,
+.prose h5:hover a svg.icon-link,
+.prose h6:hover a svg.icon-link {
+ visibility: visible;
+}
+.prose h1 a svg.icon-link,
+.prose h2 a svg.icon-link,
+.prose h3 a svg.icon-link,
+.prose h4 a svg.icon-link,
+.prose h5 a svg.icon-link,
+.prose h6 a svg.icon-link {
+ display: inline-block;
+}
+.prose h1 {
+ font-size: 40px;
+ margin-bottom: calc(var(--font-size) / 3);
+}
+.prose h1:after { /* Psuedo-element prevents extending to padding */
+ content: "";
+ display: block;
+ border-bottom: 2px solid #000;
+}
+.prose h2 {
+ font-size: 30px;
+}
+.prose h2:after { /* Psuedo-element prevents extending to padding */
+ content: "";
+ display: block;
+ border-bottom: 1px solid #aaa;
+}
+.prose h3 {
+ font-size: 26px;
+}
+.prose h4 {
+ font-size: 22px;
+}
+.prose h5 {
+ font-size: 20px;
+}
+.prose h6 {
+ color: #888;
+ font-size: 18px;
+}
+
+/**** Paragraphs ****/
+.prose p {
+ line-height: 1.5;
+ font-family: var(--font-sans);
+ margin: 16px 0;
+}
+
+/**** URLs ****/
+.prose a {
+ text-decoration: none;
+ color: var(--accent-color);
+}
+.prose a:hover {
+ text-decoration: underline;
+}
+
+/**** Lists ****/
+.prose ul {
+ padding-left: 30px;
+}
+.prose ul li {
+ list-style-type: disc;
+}
+.prose ol {
+ padding-left: 30px;
+}
+.prose ol li {
+ list-style-type: decimal;
+}
+
+/**** Images ****/
+.prose img {
+ display: block;
+ margin: 30px auto;
+ border-radius: 22px;
+ filter: drop-shadow(0 4px 6px #444);
+}
+
+/**** Tables ****/
+.prose table {
+ border-radius: 20px;
+ margin: calc(var(--font-size) / 3) 0;
+}
+.prose table th {
+ text-align: center;
+}
+.prose table thead {
+ border-bottom: 2px solid black;
+}
+.prose table th, .prose table td {
+ padding: 6px 14px;
+ margin: 1px;
+ border: 1px solid black;
+}
+
+/**** Block quotes ****/
+.prose blockquote {
+ margin-left: 3px; /* Needs to be equal to border-left width */
+ padding-left: 15px;
+ border-left: 3px solid black;
+}
+
+/**** Code block ****/
+.prose code:not(pre > code) {
+ background-color: #f6f6f6;
+ /*border-radius: 6px;*/
+ border-radius: 6px;
+ /*padding: 16px;*/
+ padding: 2px 4px;
+ margin: 16px 0;
+ font-family: var(--font-mono);
+ /*filter: drop-shadow(0 2px 6px #ddd);*/
+}
+.prose pre {
+ background-color: #f6f6f6;
+ border-radius: 6px;
+ padding: 16px;
+ margin: 32px 0;
+ font-family: var(--font-mono);
+ filter: drop-shadow(0 2px 6px #ddd);
+}
+.prose pre > code[data-line-numbers] {
+ counter-reset: line;
+}
+.prose pre > code[data-line-numbers] > .line::before {
+ counter-increment: line;
+ content: counter(line);
+ display: inline-block;
+ margin-right: 2rem;
+ width: 1rem;
+ text-align: left;
+ color: #7ca2dfad;
+}
+.prose pre > code > .line::before {
+ content: "";
+ display: inline-block;
+ width: 1rem;
+ text-align: right;
+}
+
+/**** Other elements ****/
+.prose mark {
+ background-color: white;
+ font-style: italic;
+ color: var(--accent-color);
+}