midou/midou36o.github.io
1
0
Fork 0
mirror of https://github.com/midou36o/midou36o.github.io synced 2025-06-04 00:41:01 +05:30
Code Actions Packages Projects Releases Activity

New banner

Browse Source
This commit is contained in:
Midou36O
2024-08-02 01:44:27 +01:00
parent 3e581b0296
commit f076838154
6 changed files with 63 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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}

3
src/lib/blog/components.svelte
View File

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

6
src/routes/+layout.svelte
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>

2
src/routes/+page.svelte
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"
>

2
src/routes/about/+page.svelte
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">