New banner

This commit is contained in:
Midou36O 2024-08-02 01:44:27 +01:00
parent 3e581b0296
commit f076838154
Signed by: midou
GPG Key ID: 1D134A95FE521A7A
6 changed files with 63 additions and 33 deletions

View File

@ -12,43 +12,44 @@
"format": "prettier --plugin-search-dir . --write ." "format": "prettier --plugin-search-dir . --write ."
}, },
"devDependencies": { "devDependencies": {
"@iconify/json": "^2.2.174", "@iconify/json": "^2.2.233",
"@sveltejs/adapter-auto": "^3.1.1", "@sveltejs/adapter-auto": "^3.2.2",
"@sveltejs/adapter-node": "^4.0.1", "@sveltejs/adapter-node": "^4.0.1",
"@sveltejs/adapter-static": "^3.0.1", "@sveltejs/adapter-static": "^3.0.2",
"@sveltejs/kit": "^2.4.3", "@sveltejs/kit": "^2.5.19",
"@typescript-eslint/eslint-plugin": "^6.19.1", "@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.19.1", "@typescript-eslint/parser": "^6.21.0",
"@unocss/extractor-svelte": "^0.58.3", "@unocss/extractor-svelte": "^0.58.9",
"@unocss/preset-icons": "^0.58.3", "@unocss/preset-icons": "^0.58.9",
"@unocss/preset-web-fonts": "^0.58.3", "@unocss/preset-web-fonts": "^0.58.9",
"eslint": "^8.56.0", "eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"prettier": "^3.2.4", "prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.1.2", "prettier-plugin-svelte": "^3.2.6",
"svelte": "^4.2.9", "svelte": "^4.2.18",
"svelte-check": "^3.6.3", "svelte-check": "^3.8.5",
"svelte-time": "^0.8.2", "svelte-time": "^0.8.3",
"tslib": "^2.6.2", "tslib": "^2.6.3",
"typescript": "^5.3.3", "typescript": "^5.5.4",
"unocss": "^0.58.3", "unocss": "^0.58.9",
"vite": "^5.0.12" "vite": "^5.3.5"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@sveltejs/vite-plugin-svelte": "^3.0.1", "@sveltejs/vite-plugin-svelte": "^3.1.1",
"@unocss/reset": "^0.58.3", "@unocss/reset": "^0.58.9",
"dayjs": "^1.11.10", "dayjs": "^1.11.12",
"eslint-plugin-svelte": "^2.35.1", "eslint-plugin-svelte": "^2.43.0",
"github-markdown-css": "^5.5.0", "github-markdown-css": "^5.6.1",
"katex": "^0.16.9", "katex": "^0.16.11",
"mathjax": "^3.2.2", "mathjax": "^3.2.2",
"mdsvex": "^0.11.0", "mdsvex": "^0.11.2",
"ofetch": "^1.3.3", "ofetch": "^1.3.4",
"rehype-katex": "^7.0.0", "rehype-katex": "^7.0.0",
"rehype-mathjax": "^6.0.0", "rehype-mathjax": "^6.0.0",
"remark-math": "^6.0.0", "remark-math": "^6.0.0",
"remark-rehype": "^11.1.0", "remark-rehype": "^11.1.0",
"shiki": "^0.14.7" "shiki": "^0.14.7",
"unocss-preset-scrollbar-hide": "^1.0.1"
} }
} }

26
src/lib/banner.svelte Normal file
View File

@ -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}

View File

@ -1,3 +1,6 @@
<style>
</style>
<h1 class="text-5xl"> <h1 class="text-5xl">
<slot /> <slot />
</h1> </h1>

View File

@ -4,13 +4,13 @@
import Foote from '$lib/foote.svelte'; import Foote from '$lib/foote.svelte';
import '@unocss/reset/tailwind.css'; import '@unocss/reset/tailwind.css';
import Navi from '$lib/navi.svelte'; import Navi from '$lib/navi.svelte';
import Banner from '$lib/banner.svelte';
</script> </script>
<body> <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 /> <slot />
</main> </main>
</body> </body>
<style>
</style>

View File

@ -4,7 +4,7 @@
import { quintOut } from 'svelte/easing'; import { quintOut } from 'svelte/easing';
</script> </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 <div
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-25% md:h-screen" class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-25% md:h-screen"
> >

View File

@ -8,7 +8,7 @@
import { quintOut } from 'svelte/easing'; import { quintOut } from 'svelte/easing';
</script> </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"> <div class="min-h-screen">
<!-- Primary content (Left) --> <!-- Primary content (Left) -->
<div class="text-center"> <div class="text-center">