ninjin/Ninjin.Web.v2
1
0
Fork 0
mirror of https://github.com/DBNinjin/Ninjin.Web.v2.git synced 2025-06-27 18:31:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix background image & design

Browse Source
This commit is contained in:
CodeKyana 2024-07-31 16:47:13 +02:00
parent 3fb8df47cd
commit 5e3ce3d2a4
8 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -19,3 +19,6 @@ Thumbs.db
# Vite # Vite
vite.config.js.timestamp-* vite.config.js.timestamp-*
vite.config.ts.timestamp-* vite.config.ts.timestamp-*
# Custom
/src/lib/assets/images/*.psd

4
src/app.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="fr">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link <link
@ -38,7 +38,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" class="min-h-screen"> <body data-sveltekit-preload-data="hover" class="main-background text-neutral-200">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

2
src/components/Footer.svelte
View File

@ -25,7 +25,7 @@
<div class="mt-[5vh]"> <div class="mt-[5vh]">
<footer <footer
class="fixed bottom-0 left-0 z-20 w-full p-2 bg-[#191e14] text-neutral-200 shadow md:flex md:items-center md:justify-between md:p-2" class="bg-opacity-50 shadow fixed bottom-0 left-0 z-20 w-full p-2 bg-[#191e14] text-neutral-200 shadow md:flex md:items-center md:justify-between md:p-2"
> >
<span class="text-sm sm:text-center"> <span class="text-sm sm:text-center">
<small> <small>

4
src/components/Header.svelte
View File

@ -46,7 +46,7 @@
title={link.name} title={link.name}
rel="noopener" rel="noopener"
target="_self" target="_self"
class={`mx-1.5 sm:mx-6 ${ class={`mx-1.5 sm:mx-6 font-bold ${
link.url === $page.url.pathname link.url === $page.url.pathname
? 'text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-400 hover:from-red-300 hover:to-yellow-200' ? 'text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-400 hover:from-red-300 hover:to-yellow-200'
: 'text-neutral-300 hover:text-neutral-100' : 'text-neutral-300 hover:text-neutral-100'
@ -69,7 +69,7 @@
title={link.name} title={link.name}
rel="noopener" rel="noopener"
target="_self" target="_self"
class={`font-medium py-2 px-4 text-sm hover:bg-[#192809] ${ class={`font-medium py-2 px-4 text-sm hover:bg-[#192809] font-bold ${
link.url === $page.url.pathname link.url === $page.url.pathname
? 'text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-400 hover:from-red-300 hover:to-yellow-200' ? 'text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-400 hover:from-red-300 hover:to-yellow-200'
: 'text-neutral-300 hover:text-neutral-100' : 'text-neutral-300 hover:text-neutral-100'

BIN
src/lib/assets/images/logo_header.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 522 KiB

After

Width:  |  Height:  |  Size: 566 KiB

BIN
src/lib/assets/images/logo_header_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 566 KiB

26
src/routes/+layout.svelte
View File

@ -2,27 +2,35 @@
import '$lib/assets/css/tailwind.css'; import '$lib/assets/css/tailwind.css';
import Header from '../components/Header.svelte'; import Header from '../components/Header.svelte';
import Footer from '../components/Footer.svelte'; import Footer from '../components/Footer.svelte';
import logoHeader from '$lib/assets/images/logo_header.png'; import logoHeader from '$lib/assets/images/logo_header_2.png';
</script> </script>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<Header /> <Header />
<main class="text-center mt-4"> <main class="text-center mt-4 relative z-20">
<img src={logoHeader} alt="Ninjin Logo" class="w-full max-w-2xl mx-auto" draggable="false" /> <img src={logoHeader} alt="Ninjin Logo" class="w-full max-w-2xl mx-auto" draggable="false" />
<section class="bg-green-800 bg-opacity-70 border-8 border-black mx-10 my-4 p-6 rounded-lg"> <section
class="bg-[#192908] bg-opacity-70 border-4 border-black mx-10 my-4 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out"
>
<slot /> <slot />
</section> </section>
</main> </main>
</div> </div>
<Footer /> <Footer />
<div class="repeat-background">
<!-- Cette div couvre tout l'écran sous la première image de fond -->
</div>
<style lang="postcss"> <style lang="postcss">
:global(body) { :global(.main-background) {
background-image: url('/assets/images/background.png'), url('/assets/images/background_end.png'); background-image: url('/assets/images/background.png');
background-repeat: no-repeat, repeat; background-size: cover;
background-size: contain; background-position: center;
font-family: 'Olney', Verdana, sans-serif; background-repeat: no-repeat;
color: white; }
.repeat-background {
background-image: url('/assets/images/background_end.png');
background-repeat: repeat;
} }
</style> </style>

4
src/routes/map/+page.svelte
View File

@ -7,5 +7,7 @@
Voici la map du serveur, les dimensions sont 10000x8000 blocks. Voici la map du serveur, les dimensions sont 10000x8000 blocks.
</p> </p>
<div class="flex justify-center mt-6"> <div class="flex justify-center mt-6">
<img src={map} alt="map" draggable="false" class="w-full max-w-3xl h-auto rounded-lg" /> <a href={map} target="_blank" rel="noopener noreferrer" title="Voir la map en plein écran">
<img src={map} alt="map" draggable="false" class="w-full max-w-3xl h-auto rounded-lg" />
</a>
</div> </div>