manual cherrypick of Matt's matfantinel#22

src/app.scss

@@ -37,4 +37,6 @@ html {
 #svelte-root {
  height: 100%;
  position: relative;
-}
+}
+
+@import './lib/scss/markdown.scss'; 

src/lib/layouts/article-layout.svelte

@@ -0,0 +1,54 @@
+<script>
+ import Header from '$lib/components/layout/header.svelte';
+ import Footer from '$lib/components/layout/footer.svelte';
+ import Image from '$lib/components/base/image.svelte';
+ import { siteBaseUrl } from '$lib/meta';
+ export let title;
+ export let image;
+ export let excerpt; 
+</script>
+
+<svelte:head>
+ {#if title}
+ <title>{title}</title>
+ <meta property="og:title" content={title} />
+ <meta name="twitter:title" content={title} />
+ {/if}
+
+ {#if excerpt}
+ <meta name="description" content={excerpt} />
+ <meta property="og:description" content={excerpt} />
+ <meta name="twitter:description" content={excerpt} />
+ {/if}
+
+ {#if image}
+ <meta property="og:image" content="{siteBaseUrl}/images/{image.path}/{image.filename}.png" />
+ <meta name="twitter:image" content="{siteBaseUrl}/images/{image.path}/{image.filename}.png" />
+ {/if}
+</svelte:head>
+
+<div class="markdown-layout">
+ <Header animated={false} />
+
+ <main>
+ <article id="markdown-content">
+ {#if title}
+ <div class="header">
+ <h1>{title}</h1>
+ </div>
+ {/if}
+
+ {#if image}
+ <div class="cover-image">
+ <Image path={image.path} filename={image.filename} alt="Cover Image" />
+ </div>
+ {/if}
+
+ <div class="content">
+ <slot />
+ </div>
+ </article>
+ </main>
+
+ <Footer />
+</div>

src/lib/layouts/waves-layout.svelte

@@ -0,0 +1,15 @@
+<script>
+ import Waves from '$lib/components/layout/waves.svelte';
+ import Header from '$lib/components/layout/header.svelte';
+ import Footer from '$lib/components/layout/footer.svelte';
+</script>
+
+<Waves />
+
+<Header />
+
+<main>
+ <slot />
+</main>
+
+<Footer />

src/lib/scss/markdown.scss

@@ -0,0 +1,149 @@
+.markdown-layout {
+ background-color: var(--post-page-background-color);
+ header {
+ background: var(--footer-background);
+ }
+ footer {
+ --body-background-color: var(--post-page-background-color);
+ }
+}
+
+@import '../../lib/scss/mixins.scss';
+
+// #region Layout styles
+#markdown-content {
+ position: relative;
+ padding-top: 40px;
+ padding-bottom: 80px;
+ padding-right: 15px;
+ padding-left: 15px;
+
+ @include for-iphone-se {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ @include for-tablet-portrait-up {
+ padding-right: 20px;
+ padding-left: 20px;
+ }
+
+ @include for-tablet-landscape-up {
+ padding-right: 30px;
+ padding-left: 30px;
+ }
+
+ display: grid;
+ grid-template-columns:
+ 1fr
+ min(65ch, 100%)
+ 1fr;
+ grid-row-gap: 30px;
+ > * {
+ grid-column: 2;
+ }
+ .full-bleed {
+ width: 100%;
+ grid-column: 1 / 4;
+
+ img {
+ object-fit: cover;
+ }
+ }
+
+ .header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ gap: 10px;
+
+ .note {
+ font-size: 90%;
+ color: rgba(var(--text-color-rgb), 0.8);
+ }
+ }
+
+ .cover-image {
+ width: 100%;
+ max-height: 400px;
+ box-shadow: var(--image-shadow);
+
+ img {
+ object-fit: cover;
+ }
+ }
+
+ .tags {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ flex-wrap: wrap;
+ }
+}
+// #endregion
+
+// #region Element styles
+
+#markdown-content {
+ .content {
+ p {
+ margin: 0.75rem 0;
+ line-height: 1.55em;
+ }
+
+ h2 {
+ margin: 3rem 0 0.5rem;
+ }
+
+ h3 {
+ font-size: 1.2rem;
+ margin: 2rem 0 0.3rem;
+ }
+
+ h4 {
+ font-size: 1.3rem;
+ margin: 2rem 0 0.3rem;
+ }
+
+ img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+
+ max-width: 100%;
+ height: auto;
+ width: auto;
+
+ box-shadow: var(--image-shadow);
+ }
+
+ figcaption {
+ font-size: 0.85rem;
+ text-align: center;
+ margin-bottom: 2rem;
+ color: rgba(var(--text-color-rgb), 0.8);
+ }
+
+ blockquote {
+ padding: 25px 25px 15px;
+ border-radius: 20px;
+ font-size: 1.1rem;
+ border-left: 4px solid var(--primary-color);
+ background: var(--callout-background-color);
+ }
+
+ code:not([class^='language-']) {
+ background: var(--inline-code-background-color);
+ padding: 5px 10px;
+ border-radius: 5px;
+ font-family: var(--mono-font);
+ }
+ }
+}
+
+// #endregion