ninjin/Ninjin.Web.v2
1
0
Fork 0
mirror of https://github.com/DBNinjin/Ninjin.Web.v2.git synced 2025-06-27 10:21:56 +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.config.js.timestamp-*
vite.config.ts.timestamp-*
# Custom
/src/lib/assets/images/*.psd

4
src/app.html
View File

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="fr">
<head>
<meta charset="utf-8" />
<link
@ -38,7 +38,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.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>
</body>
</html>

2
src/components/Footer.svelte
View File

@ -25,7 +25,7 @@
<div class="mt-[5vh]">
<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">
<small>

4
src/components/Header.svelte
View File

@ -46,7 +46,7 @@
title={link.name}
rel="noopener"
target="_self"
class={`mx-1.5 sm:mx-6 ${
class={`mx-1.5 sm:mx-6 font-bold ${
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-neutral-300 hover:text-neutral-100'
@ -69,7 +69,7 @@
title={link.name}
rel="noopener"
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
? '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'

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 Header from '../components/Header.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>
<div class="container mx-auto px-4">
<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" />
<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 />
</section>
</main>
</div>
<Footer />
<div class="repeat-background">
<!-- Cette div couvre tout l'écran sous la première image de fond -->
</div>
<style lang="postcss">
:global(body) {
background-image: url('/assets/images/background.png'), url('/assets/images/background_end.png');
background-repeat: no-repeat, repeat;
background-size: contain;
font-family: 'Olney', Verdana, sans-serif;
color: white;
:global(.main-background) {
background-image: url('/assets/images/background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.repeat-background {
background-image: url('/assets/images/background_end.png');
background-repeat: repeat;
}
</style>

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

@ -7,5 +7,7 @@
Voici la map du serveur, les dimensions sont 10000x8000 blocks.
</p>
<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>