From 0cb4ff33dd4f508fb555c9287ab9bc0960756611 Mon Sep 17 00:00:00 2001 From: Akemi Izuko Date: Fri, 29 Dec 2023 18:01:37 -0700 Subject: [PATCH] Markdown: extract stylesheet --- src/layouts/BlogPost.astro | 207 +---------------------------------- src/layouts/UnixPost.astro | 209 +----------------------------------- src/styles/markdown.css | 214 +++++++++++++++++++++++++++++++++++++ 3 files changed, 219 insertions(+), 411 deletions(-) create mode 100644 src/styles/markdown.css 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); +}