diff --git a/scripts/new-post.js b/scripts/new-post.js index 5865603..b37265c 100644 --- a/scripts/new-post.js +++ b/scripts/new-post.js @@ -6,7 +6,10 @@ import { fileURLToPath } from 'url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); const title = process.argv[2] ?? 'New Blog Post'; -const slug = title.toLowerCase().replaceAll(' ', '-').slice(0, 60); +let slug = title.toLowerCase().replaceAll(' ', '-'); +while (slug.length > 60 && slug.includes('-')) { + slug = slug.substring(0, slug.lastIndexOf('-')); +} const filename = `${format(new Date(), 'yyyy.MM.dd')}.${slug}.md`; diff --git a/src/app.scss b/src/app.scss index 4b7bc38..2994523 100644 --- a/src/app.scss +++ b/src/app.scss @@ -81,6 +81,14 @@ body { flex-direction: column; } +@media print { + main code[class*='language-'], + main pre[class*='language-'] { + white-space: pre-wrap; + word-wrap: break-word; + } +} + /* Pagefind UI */ .pagefind-ui { --pagefind-ui-border-radius: 0; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 28d5b4a..e654ba0 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -13,6 +13,7 @@ import BlogPostList from './posts/[[page=integer]]/BlogPostList.svelte'; import Button from '$lib/Button.svelte'; import BlogPost from './posts/[[page=integer]]/BlogPost.svelte'; + import SocialButton from './SocialButton.svelte'; export let data; @@ -70,34 +71,34 @@ @@ -115,6 +116,7 @@
+
{/if} @@ -142,20 +144,30 @@ align-items: center; } + .print-link { + display: none; + } + + @media print { + .socials { + gap: 0; + } + + picture { + margin-top: -200px; + margin-left: 300px; + margin-bottom: -80px; + } + + .print-link { + display: block; + } + } + .socials li { list-style-type: none; } - .socials a { - @include button($color-secondary, $color-secondary-text); - min-width: 8rem; - } - - h1 { - width: 100%; - text-align: center; - } - .all-posts-button { max-width: 12rem; margin: 2rem auto 0 auto; diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte index 6834c3d..24bb077 100644 --- a/src/routes/Header.svelte +++ b/src/routes/Header.svelte @@ -51,7 +51,7 @@
- +
@@ -128,6 +128,16 @@ } } + @media print { + #search { + display: none; + } + + .collapse-container { + display: none; + } + } + .logo { width: 12rem; height: 12rem; diff --git a/src/routes/SocialButton.svelte b/src/routes/SocialButton.svelte new file mode 100644 index 0000000..09bde6c --- /dev/null +++ b/src/routes/SocialButton.svelte @@ -0,0 +1,35 @@ + + + +
+ + +
+ + diff --git a/src/routes/posts/[[page=integer]]/BlogPost.svelte b/src/routes/posts/[[page=integer]]/BlogPost.svelte index 98a0281..9cc1b5d 100644 --- a/src/routes/posts/[[page=integer]]/BlogPost.svelte +++ b/src/routes/posts/[[page=integer]]/BlogPost.svelte @@ -5,9 +5,11 @@ export let showYear: boolean = false; export let showReadingTime: boolean = true; export let post: Post; + + const href = `/${post.path}`; - +
  • @@ -26,6 +28,7 @@ {/if}
  • +