Amélioration du style de la page

This commit is contained in:
EpicKiwi 2026-02-15 11:50:32 +01:00
parent 1f8f93b411
commit 8aac03e6df
Signed by: epickiwi
GPG key ID: C4B28FD2729941CE
4 changed files with 66 additions and 3 deletions

View file

@ -3,6 +3,44 @@ body, html {
margin: 0; margin: 0;
} }
/* HEADER and NAV */
#main-header {
display: flex;
justify-content: start;
align-items: stretch;
flex-direction: row;
background: radial-gradient(black, transparent 50%);
background-size: 40rem 20rem;
background-repeat: no-repeat;
background-position: -15rem -10rem;
padding: 15px;
padding-bottom: 30px;
pointer-events: none;
& > * {
pointer-events: all;
}
}
@media screen and (max-width: 600px) {
#main-header {
flex-direction: column;
align-items: center;
background: linear-gradient(to bottom, black, transparent);
}
}
#main-header #logo {
max-height: clamp(2rem, 10vh, 5rem);
}
/* MAP */
#map { #map {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@ -15,4 +53,16 @@ body, html {
#search-section { #search-section {
margin-left: 50px; margin-left: 50px;
margin-top: 15px; margin-top: 15px;
}
.leaflet-container .leaflet-control-attribution {
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px;
border-bottom-left-radius: 5px;
& a {
color: inherit;
text-decoration: underline;
}
} }

View file

@ -4,14 +4,19 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carte Interhack Camp 2026</title> <title>Carte Interhack Camp 2026</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./js/lib/leaflet/leaflet.css"> <link rel="stylesheet" href="./js/lib/leaflet/leaflet.css">
<link rel="stylesheet" href="./css/style.css">
<script type="module" src="./js/index.js"></script> <script type="module" src="./js/index.js"></script>
</head> </head>
<body> <body>
<header id="main-header">
<img src="./logo.png" alt="Interhack Camp" id="logo">
</header>
<section id="map"></section> <section id="map"></section>
<section id="search-section"> <section id="search-section">
<form id="search-area"> <form id="search-area" hidden>
<label for="search-area-query">Rechercher une zone</label> <label for="search-area-query">Rechercher une zone</label>
<input type="search" name="query" id="search-area-query" /> <input type="search" name="query" id="search-area-query" />
<button>Rechercher</button> <button>Rechercher</button>

View file

@ -2,7 +2,15 @@ import * as L from "./lib/leaflet/leaflet-src.esm.js"
import { PlaceDatabase } from "./places.js"; import { PlaceDatabase } from "./places.js";
/** La carte */ /** La carte */
const map = L.map(document.getElementById("map")) const map = L.map(document.getElementById("map"), {
attributionControl: false,
zoomControl: false
})
L.control.attribution({
position: 'topright'
}).addTo(map)
/** La base de données de lieux @type {PlaceDatabase|null} */ /** La base de données de lieux @type {PlaceDatabase|null} */
let places = null let places = null
/** Le centre de la carte */ /** Le centre de la carte */

BIN
logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB