more blog style fixes (#263)

* two-column blog landing page

* design tweaks

* tweak implementation

* tweak

* fixes

* tidy up fonts, use DM Serif italic

* fix

* fix blockquotes

* fix embed styles

* decorative separator for hr elements

* fix

---------

Co-authored-by: Simon H <[email protected]>

Author: Rich-Harris

apps/svelte.dev/content/blog/2023-10-01-hacktoberfest.md

@@ -5,7 +5,7 @@ author: Willow (GHOST) & Braden Wiggins
 authorURL: https://ghostdev.xyz
 ---
 
-# Sveltekit 🧡 Hacktoberfest
+## Sveltekit 🧡 Hacktoberfest
 
 We're excited to announce SvelteKit's participation in this year's Hacktoberfest! Hacktoberfest is a global event that takes place every October, during which developers are encouraged to contribute to open-source projects like SvelteKit. The goal is to foster a vibrant open-source community, celebrate shared knowledge, and make the world of coding more accessible to all. You can find other participating repositories by searching the [`hacktoberfest` topic](https://github.com/topics/hacktoberfest) on github.
 

apps/svelte.dev/src/routes/blog/[slug]/+page.svelte

@@ -110,6 +110,27 @@
 					color: var(--sk-text-4);
 				}
 			}
+
+			hr {
+				position: relative;
+				border: none;
+				height: 1px;
+				background: radial-gradient(circle at center, var(--sk-text-4), transparent);
+				margin: 7rem 0;
+				overflow: visible;
+
+				&::after {
+					content: '';
+					position: absolute;
+					width: 0.8rem;
+					height: 0.8rem;
+					left: 50%;
+					top: 2px;
+					transform: rotate(45deg) translate(-50%, -50%);
+					background: var(--sk-back-1);
+					border: 1px solid var(--sk-text-4);
+				}
+			}
 		}
 	}
 

packages/repl/src/lib/Repl.svelte

@@ -293,7 +293,7 @@
 
 <svelte:window on:beforeunload={before_unload} />
 
-<div class="container" class:toggleable={$toggleable} bind:clientWidth={width}>
+<div class="container" class:embedded class:toggleable={$toggleable} bind:clientWidth={width}>
 	<div class="viewport" class:output={show_output}>
 		<SplitPane
 			--color="var(--sk-text-4)"
@@ -338,6 +338,10 @@
 		background: var(--sk-back-1);
 		padding: 1rem 0 0 0;
 
+		&.embedded {
+			height: 100%;
+		}
+
 		:global {
 			section {
 				position: relative;