fix: scrolling issue with global css

src/lib/page/article_page.svelte

@@ -7,7 +7,7 @@
 	import FormattedDate from '$lib/components/formatted_date.svelte';
 	import Head from '$lib/components/head.svelte';
 
-  import type { Article } from '$lib/article';
+	import type { Article } from '$lib/article';
 	export let data: Article;
 </script>
 
@@ -31,38 +31,49 @@
     <img src={data.image} alt="" />
 </div> -->
 <div class="container">
-	<div class="title">
-		<h1>{data.title}</h1>
-		<div class="meta">
-			<span>
-				released <FormattedDate date={data.released_at} />
-				{#if data.updated_at}<br />
-					updated <FormattedDate date={data.updated_at} />
-				{/if}
-			</span>
-			<span>
-				<a href="/category/{data.category}"
-					>{data.category[0].toUpperCase() + data.category.slice(1)}</a
-				>
-				{#each data.tags as tag}
-					<a href={`/search?tag=${tag}`}>{tag}</a>
-				{/each}
-			</span>
+	<main>
+		<div class="title">
+			<h1>{data.title}</h1>
+			<div class="meta">
+				<span>
+					released <FormattedDate date={data.released_at} />
+					{#if data.updated_at}<br />
+						updated <FormattedDate date={data.updated_at} />
+					{/if}
+				</span>
+				<span>
+					<a href="/category/{data.category}"
+						>{data.category[0].toUpperCase() + data.category.slice(1)}</a
+					>
+					{#each data.tags as tag}
+						<a href={`/search?tag=${tag}`}>{tag}</a>
+					{/each}
+				</span>
+			</div>
 		</div>
-	</div>
-	<div class="panel">
-		<main>
+		<div class="panel">
 			<div class="document">
 				<slot />
 			</div>
-		</main>
-		<Footer />
-	</div>
+			<Footer />
+		</div>
+	</main>
 </div>
 
 <style lang="scss">
 	:global(body) {
+		overflow: hidden;
 		background-color: var(--background-primary);
+		background-size: cover;
+		background-blend-mode: overlay;
+	}
+	.container {
+		overflow: hidden;
+		width: 100vw;
+		height: 100dvh;
+		backdrop-filter: blur(2px);
+		overflow-y: auto;
+		overflow-x: hidden;
 	}
 	.back {
 		position: fixed;
@@ -80,15 +91,19 @@
 		height: 100%;
 		object-fit: cover;
 	}
-	.container {
+	main {
+		border: 1px solid var(--line-primary);
+		border-top: none;
+		border-bottom: none;
+		box-sizing: border-box;
 		color: white;
 		min-height: 100%;
+		padding: 20px;
 		padding-top: 100px;
 		width: 1000px;
 		margin: 0 auto;
 		display: flex;
 		flex-direction: column;
-		box-sizing: border-box;
 	}
 	.title {
 		h1 {
@@ -138,14 +153,6 @@
 		justify-content: space-between;
 		align-items: center;
 	}
-	main {
-		padding: 20px;
-		box-sizing: border-box;
-		width: 1000px;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-	}
 	@media (max-width: 1000px) {
 		.container {
 			width: 100%;
@@ -155,8 +162,5 @@
 				padding: 8px 20px;
 			}
 		}
-		main {
-			max-width: 100%;
-		}
 	}
 </style>

src/lib/server/database.ts

@@ -1,5 +1,5 @@
 import pg from 'pg';
-import { Pool } from 'pg';
+const { Pool } = pg;
 import { getConnection } from './database/get_connection';
 
 export class Postgres {

src/lib/server/database/init_db.ts

@@ -1,5 +1,4 @@
 // initialize
-import PG from '$lib/server/database';
 import type { Postgres } from '$lib/server/database';
 import fs from 'fs';
 import { compile } from 'mdsvex';
@@ -108,6 +107,7 @@ export default async function init(db: Postgres) {
     for (const { path, id } of articleFiles) {
       const res = await db.query('select * from article where id = $1', [id]);
       const compiled = await compile(fs.readFileSync(path, 'utf-8'));
+      
       const title = compiled.data.fm.title;
       const category = path.split('/')[3];
       const tags: string[] = compiled.data.fm.tags;
@@ -127,8 +127,8 @@ export default async function init(db: Postgres) {
       } else if (res.rows[0].updated_at < updated_at) {
         console.log(`Update article: ${id}`);
         await db.query(
-          'update article set title = $2, updated_at = $4, tags = $5, content = $6 where id = $1',
-          [id, title, updated_at, tags, content]
+          'update article set title = $2, category = $3, released_at = $4, updated_at = $5, tags = $6, image = $7, publish = $8, content = $9 where id = $1',
+          [id, title, category, released_at, updated_at, tags, image, publish, content]
         );
       } else {
         console.log(`Article ${id} is already up-to-date`);

src/routes/+error.svelte

@@ -41,7 +41,10 @@
 
 <style lang="scss">
   :global(body) {
-    background-color: var(--background-primary);
+		overflow: hidden;
+		background-color: var(--background-primary);
+		background-size: cover;
+		background-blend-mode: overlay;
   }
     .back {
         position: fixed;

src/routes/+page.svelte

@@ -114,8 +114,8 @@
 		</div>
 		<Footer />
 	</main>
-	<Cursor />
 </div>
+<Cursor />
 
 <style lang="scss">
 	:global(body) {
@@ -129,7 +129,8 @@
 		width: 100vw;
 		height: 100dvh;
 		backdrop-filter: blur(2px);
-		overflow: hidden;
+		overflow-y: auto;
+    overflow-x: hidden;
 	}
 	.controls {
 		position: fixed;
@@ -146,12 +147,10 @@
 		box-sizing: border-box;
 		width: 100%;
 		max-width: 1000px;
-		height: 100dvh;
 		color: white;
 		display: flex;
 		flex-direction: column;
-		overflow-x: hidden;
-		overflow-y: auto;
+		overflow: visible;
 		> div {
 			margin: 10px 0;
 		}