Splash screen effect

src/app.scss

@@ -24,6 +24,35 @@
 	--code-color: hsl(205 30% 30%);
 }
 
+html {
+	min-height: 100vh;
+	background-image: url('/favicon.svg');
+	background-color: var(--card-sectionning-background-color);
+	background-size: min(20vw, 150px);
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	&[data-theme] {
+		background-image: none;
+	}
+
+	&.modal-is-open {
+		scrollbar-gutter: stable;
+	}
+}
+
+body {
+	background-color: var(--background-color);
+
+	html[data-theme] & {
+		min-height: 100vh;
+	}
+
+	&:has(.bytemd-fullscreen) {
+		overflow: hidden;
+	}
+}
+
 h1,
 h2,
 h3,
@@ -63,14 +92,6 @@ ol > li {
 	list-style: decimal;
 }
 
-html.modal-is-open {
-	scrollbar-gutter: stable;
-}
-
-body:has(.bytemd-fullscreen) {
-	overflow: hidden;
-}
-
 .bytemd {
 	--editor-bg: hsl(0 0% 100% / 0.1);
 	--editor-text: black;

src/routes/+page.svelte

@@ -28,6 +28,10 @@
 
 <style lang="scss">
 	main {
-		margin: 1.5rem 1.5rem 7.5rem;
+		padding: 1.5rem 1.5rem 7.5rem;
+	}
+
+	section:last-of-type {
+		margin: 0;
 	}
 </style>

static/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M128 96c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32V256H368c-26.5 0-48 21.5-48 48v80H160c-17.7 0-32-14.3-32-32V96zM446.2 288c-1.6 4.5-4.2 8.7-7.6 12.1l-74.5 74.5c-3.4 3.4-7.6 6-12.1 7.6V304c0-8.8 7.2-16 16-16h78.2zM96 96V352c0 35.3 28.7 64 64 64H341.5c17 0 33.3-6.7 45.3-18.7l74.5-74.5c12-12 18.7-28.3 18.7-45.3V96c0-35.3-28.7-64-64-64H160c-35.3 0-64 28.7-64 64zM320 496c0-8.8-7.2-16-16-16H128c-53 0-96-43-96-96l0-240c0-8.8-7.2-16-16-16s-16 7.2-16 16V384c0 70.7 57.3 128 128 128H304c8.8 0 16-7.2 16-16z" fill="#ead40b"/></svg>