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 ."
},
"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"
}
}

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">
<slot />
</h1>

View File

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

View File

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

View File

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