From f076838154c770a18c8fbcec15cc404336a6748f Mon Sep 17 00:00:00 2001
From: Midou36O <midou@midou.dev>
Date: Fri, 2 Aug 2024 01:44:27 +0100
Subject: [PATCH] New banner

---
 package.json                   | 57 +++++++++++++++++-----------------
 src/lib/banner.svelte          | 26 ++++++++++++++++
 src/lib/blog/components.svelte |  3 ++
 src/routes/+layout.svelte      |  6 ++--
 src/routes/+page.svelte        |  2 +-
 src/routes/about/+page.svelte  |  2 +-
 6 files changed, 63 insertions(+), 33 deletions(-)
 create mode 100644 src/lib/banner.svelte

diff --git a/package.json b/package.json
index a96e63e..96e1be1 100644
--- a/package.json
+++ b/package.json
@@ -12,43 +12,44 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@iconify/json": "^2.2.174",
-		"@sveltejs/adapter-auto": "^3.1.1",
+		"@iconify/json": "^2.2.233",
+		"@sveltejs/adapter-auto": "^3.2.2",
 		"@sveltejs/adapter-node": "^4.0.1",
-		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.4.3",
-		"@typescript-eslint/eslint-plugin": "^6.19.1",
-		"@typescript-eslint/parser": "^6.19.1",
-		"@unocss/extractor-svelte": "^0.58.3",
-		"@unocss/preset-icons": "^0.58.3",
-		"@unocss/preset-web-fonts": "^0.58.3",
-		"eslint": "^8.56.0",
+		"@sveltejs/adapter-static": "^3.0.2",
+		"@sveltejs/kit": "^2.5.19",
+		"@typescript-eslint/eslint-plugin": "^6.21.0",
+		"@typescript-eslint/parser": "^6.21.0",
+		"@unocss/extractor-svelte": "^0.58.9",
+		"@unocss/preset-icons": "^0.58.9",
+		"@unocss/preset-web-fonts": "^0.58.9",
+		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
-		"prettier": "^3.2.4",
-		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^4.2.9",
-		"svelte-check": "^3.6.3",
-		"svelte-time": "^0.8.2",
-		"tslib": "^2.6.2",
-		"typescript": "^5.3.3",
-		"unocss": "^0.58.3",
-		"vite": "^5.0.12"
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^4.2.18",
+		"svelte-check": "^3.8.5",
+		"svelte-time": "^0.8.3",
+		"tslib": "^2.6.3",
+		"typescript": "^5.5.4",
+		"unocss": "^0.58.9",
+		"vite": "^5.3.5"
 	},
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@unocss/reset": "^0.58.3",
-		"dayjs": "^1.11.10",
-		"eslint-plugin-svelte": "^2.35.1",
-		"github-markdown-css": "^5.5.0",
-		"katex": "^0.16.9",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@unocss/reset": "^0.58.9",
+		"dayjs": "^1.11.12",
+		"eslint-plugin-svelte": "^2.43.0",
+		"github-markdown-css": "^5.6.1",
+		"katex": "^0.16.11",
 		"mathjax": "^3.2.2",
-		"mdsvex": "^0.11.0",
-		"ofetch": "^1.3.3",
+		"mdsvex": "^0.11.2",
+		"ofetch": "^1.3.4",
 		"rehype-katex": "^7.0.0",
 		"rehype-mathjax": "^6.0.0",
 		"remark-math": "^6.0.0",
 		"remark-rehype": "^11.1.0",
-		"shiki": "^0.14.7"
+		"shiki": "^0.14.7",
+		"unocss-preset-scrollbar-hide": "^1.0.1"
 	}
 }
diff --git a/src/lib/banner.svelte b/src/lib/banner.svelte
new file mode 100644
index 0000000..af09a9e
--- /dev/null
+++ b/src/lib/banner.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export let message = "";
+  export let link = "#";
+ let show = true;
+
+  function hideBanner() {
+    show = false;
+  }
+</script>
+
+
+{#if show}
+  <div class="bg-[#1976D2] text-white text-center p-2.5 fixed bottom-0 left-0 w-full z-1000 md:top-0 md:bottom-auto md:text-xl md:p-4 flex items-center">
+    <!-- X button on the left -->
+    <button on:click={hideBanner} class="text-white font-bold flex items-center p-1 rounded hover:bg-[#0d47a1] focus:outline-none">
+      <div class="i-maki:cross w-6 h-6"></div> <!-- Cross icon -->
+    </button>
+    <!-- Spacer to push content to the center -->
+    <div class="flex-1 mx-4 text-center">
+      <a href={link} class="text-white no-underline font-bold flex items-center justify-center">
+        {message}
+        <div class="i-mdi:external-link w-8 h-8 ml-2"></div> <!-- External link icon -->
+      </a>
+    </div>
+  </div>
+{/if}
diff --git a/src/lib/blog/components.svelte b/src/lib/blog/components.svelte
index 81b4bb0..81014db 100644
--- a/src/lib/blog/components.svelte
+++ b/src/lib/blog/components.svelte
@@ -1,3 +1,6 @@
+<style>
+</style>
+
 <h1 class="text-5xl">
 	<slot />
 </h1>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 80d49a8..dd77e69 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,13 +4,13 @@
 	import Foote from '$lib/foote.svelte';
 	import '@unocss/reset/tailwind.css';
 	import Navi from '$lib/navi.svelte';
+	import Banner from '$lib/banner.svelte';
 </script>
 
 <body>
-	<main class="dark:bg-black bg-gray-300">
+	<Banner message="If you are an european, please save gaming by signing this initiative!" link="https://www.stopkillinggames.com/eci" />
+	<main class="dark:bg-black bg-gray-300 overflow-hidden">
 		<slot />
 	</main>
 </body>
 
-<style>
-</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a86f784..b1971d0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,7 +4,7 @@
 	import { quintOut } from 'svelte/easing';
 </script>
 
-<div class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans" id="content">
+<div class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans min-h-screen" id="content">
 	<div
 		class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-25% md:h-screen"
 	>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 92ff636..fd45b26 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -8,7 +8,7 @@
 	import { quintOut } from 'svelte/easing';
 </script>
 
-<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">
+<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:py-0 py-10% md:px-10%" id="content">
 	<div class="min-h-screen">
 		<!-- Primary content (Left) -->
 		<div class="text-center">