Merge pull request 'merge-fixed' (#5) from merge-fixed into main
Reviewed-on: #5
This commit is contained in:
commit
3a6de8d774
24
la-banquise/assets/iceberg.svg
Normal file
24
la-banquise/assets/iceberg.svg
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<svg width="1800" height="1000" viewBox="0 -300 1800 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Mât du drapeau -->
|
||||||
|
<rect x="910" y="-220" width="50" height="220" fill="#1F5078"/>
|
||||||
|
<!-- Petit drapeau -->
|
||||||
|
<polygon points="960,-220 1250,-110 960,0" fill="#F2F2F2" stroke="#1F5078" stroke-width="1"/>
|
||||||
|
<!-- Fond + contour -->
|
||||||
|
<polygon fill="#34A6FC" points="0,676 0,725 1779,725 1778,675 1470,675
|
||||||
|
1380,600 1275,350 1273,346 1268,338 1263,335 1257,332 1245,338
|
||||||
|
1239,341 1131,384 1080,300 1073,260 1020,120 956,15 957,14.7431
|
||||||
|
950,6 950,3 935,0 923,0 915,10 913,15 850,200 796.5,256
|
||||||
|
730,200 728,200 710,178 697,178 350,676" />
|
||||||
|
<!-- Autres conversions en polygon identiques aux points du SVG d'origine -->
|
||||||
|
<polygon fill="#F2F2F2" points="775,300 707.5,239.5 646,552.5 656.5,548.5 775,300" />
|
||||||
|
<polygon fill="#F2F2F2" points="750.5,663 641.5,603.5 938.5,494.5 750.5,663" />
|
||||||
|
<polygon fill="#F2F2F2" points="1271,576.5 1277,442 1391.5,637 1271,576.5" />
|
||||||
|
<polygon fill="#F2F2F2" points="1366.5,675 1267.5,625.5 1303,675 1366.5,675" />
|
||||||
|
<polygon fill="#76BEEE" points="644.5,316.5 592.5,570.5 398,645.5 644.5,316.5" />
|
||||||
|
<polygon fill="#76BEEE" points="832,481.5 717.5,523.5 884.5,180.5 832,481.5" />
|
||||||
|
<polygon fill="#76BEEE" points="1047.5,458.5 803.5,675 1036.5,675.5 1155.5,562.5 1047.5,458.5" />
|
||||||
|
<polygon fill="#76BEEE" points="1230.5,395 1205.5,404.833 1154.9,424.8 1152.5,426 1206.5,543 1227.5,553.5 1230.5,395" />
|
||||||
|
<polygon fill="#A0ECF9" points="1021.5,412.5 881.5,463.5 946.5,101.5 1113.5,458.5" />
|
||||||
|
<polygon fill="#A0ECF9" points="584.5,622.5 443,676 677.5,676 584.5,622.5" />
|
||||||
|
<polygon fill="#A0ECF9" points="1188,596.5 1161.17,621.667 1106.8,672.8 1104,676 1246,676 1188,596.5" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -1,53 +1,31 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta charset="UTF-8" />
|
||||||
<title>La Banquise</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" href="style.css" />
|
<title>La Banquise</title>
|
||||||
</head>
|
<link rel="stylesheet" href="style.css" />
|
||||||
<body>
|
</head>
|
||||||
<h1 class="title">La Banquise</h1>
|
|
||||||
<div class="grid-container">
|
<body>
|
||||||
|
<h1 class="title">La Banquise</h1>
|
||||||
<!-- Bureau -->
|
<div class="grid-container">
|
||||||
<a class="grid-item" href="/bureau">
|
|
||||||
<svg width="1800" height="1000" viewBox="0 -300 1800 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<a class="grid-item" href="localhost">
|
||||||
<!-- Mât du drapeau -->
|
<object data="assets/iceberg.svg" type="image/svg+xml"></object>
|
||||||
<rect x="910" y="-220" width="50" height="220" fill="#1F5078"/>
|
<p class="item-name">Placeholder</p>
|
||||||
<!-- Petit drapeau -->
|
</a>
|
||||||
<polygon points="960,-220 1250,-110 960,0" fill="#F2F2F2" stroke="#1F5078" stroke-width="1"/>
|
</div>
|
||||||
<!-- Fond + contour -->
|
|
||||||
<polygon fill="#34A6FC" points="0,676 0,725 1779,725 1778,675 1470,675
|
<div class="wave hidden">
|
||||||
1380,600 1275,350 1273,346 1268,338 1263,335 1257,332 1245,338
|
<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
|
||||||
1239,341 1131,384 1080,300 1073,260 1020,120 956,15 957,14.7431
|
<path d="M0,0 C600,100 600,100 1200,0 V120 H0 V0 Z" class="shape-fill"></path>
|
||||||
950,6 950,3 935,0 923,0 915,10 913,15 850,200 796.5,256
|
</svg>
|
||||||
730,200 728,200 710,178 697,178 350,676" />
|
</div>
|
||||||
<!-- Autres conversions en polygon identiques aux points du SVG d'origine -->
|
|
||||||
<polygon fill="#F2F2F2" points="775,300 707.5,239.5 646,552.5 656.5,548.5 775,300" />
|
<script src="./script.js"></script>
|
||||||
<polygon fill="#F2F2F2" points="750.5,663 641.5,603.5 938.5,494.5 750.5,663" />
|
|
||||||
<polygon fill="#F2F2F2" points="1271,576.5 1277,442 1391.5,637 1271,576.5" />
|
</body>
|
||||||
<polygon fill="#F2F2F2" points="1366.5,675 1267.5,625.5 1303,675 1366.5,675" />
|
|
||||||
<polygon fill="#76BEEE" points="644.5,316.5 592.5,570.5 398,645.5 644.5,316.5" />
|
</html>
|
||||||
<polygon fill="#76BEEE" points="832,481.5 717.5,523.5 884.5,180.5 832,481.5" />
|
|
||||||
<polygon fill="#76BEEE" points="1047.5,458.5 803.5,675 1036.5,675.5 1155.5,562.5 1047.5,458.5" />
|
|
||||||
<polygon fill="#76BEEE" points="1230.5,395 1205.5,404.833 1154.9,424.8 1152.5,426 1206.5,543 1227.5,553.5 1230.5,395" />
|
|
||||||
<polygon fill="#A0ECF9" points="1021.5,412.5 881.5,463.5 946.5,101.5 1113.5,458.5" />
|
|
||||||
<polygon fill="#A0ECF9" points="584.5,622.5 443,676 677.5,676 584.5,622.5" />
|
|
||||||
<polygon fill="#A0ECF9" points="1188,596.5 1161.17,621.667 1106.8,672.8 1104,676 1246,676 1188,596.5" />
|
|
||||||
</svg>
|
|
||||||
<p>Le bureau</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="wave">
|
|
||||||
<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
|
|
||||||
<path d="M0,0 C600,100 600,100 1200,0 V120 H0 V0 Z" class="shape-fill"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="./script.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,17 +1,21 @@
|
|||||||
const tile = document.querySelectorAll("a")[0];
|
const tile = document.querySelectorAll(".grid-container > *")[0];
|
||||||
const parent = tile.parentNode;
|
const parent = tile.parentNode;
|
||||||
tile.remove();
|
tile.remove();
|
||||||
|
|
||||||
const tiles = [
|
const tiles = [
|
||||||
{ name: "Notre wiki", href: "https://wiki.la-banquise.fr" },
|
{ name: "Notre wiki", href: "https://wiki.la-banquise.fr" },
|
||||||
{ name: "Notre git", href: "https://git.la-banquise.fr" },
|
{ name: "Notre git", href: "https://git.la-banquise.fr" },
|
||||||
{ name: "Panel jeux", href: "https://panel.la-banquise.fr" },
|
{ name: "Panel jeux", href: "https://panel.la-banquise.fr" },
|
||||||
{ name: "Discord", href: "https://discord.gg/QQWwzX5ptY" },
|
{ name: "Discord", href: "https://discord.gg/QQWwzX5ptY" },
|
||||||
]
|
|
||||||
|
|
||||||
tiles.forEach((info) => {
|
]
|
||||||
const newTile = tile.cloneNode(true);
|
|
||||||
newTile.querySelectorAll("p")[0].innerHTML = info.name;
|
tiles.forEach((info) => {
|
||||||
newTile.href = info.href;
|
const newTile = tile.cloneNode(true);
|
||||||
parent.appendChild(newTile);
|
newTile.querySelectorAll(".item-name").forEach((el) => {
|
||||||
});
|
el.innerText = info.name;
|
||||||
|
});
|
||||||
|
newTile.href = info.href;
|
||||||
|
parent.appendChild(newTile);
|
||||||
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,125 +1,136 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
|
||||||
|
|
||||||
/* Réinitialisation et styles généraux */
|
* {
|
||||||
* {
|
margin: 0;
|
||||||
margin: 0;
|
padding: 0;
|
||||||
padding: 0;
|
box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
font-family: Roboto, sans-serif;
|
||||||
font-family: Roboto, sans-serif;
|
}
|
||||||
}
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: linear-gradient(45deg, #001e6c, #5dadc2, #001e6c);
|
background: linear-gradient(45deg, #001e6c, #5dadc2, #001e6c);
|
||||||
background-size: 400% 400%;
|
background-size: 400% 400%;
|
||||||
animation: gradient 100s ease infinite;
|
animation: gradient 100s ease infinite;
|
||||||
}
|
}
|
||||||
@keyframes gradient {
|
|
||||||
0% { background-position: 0% 50%; }
|
@keyframes gradient {
|
||||||
50% { background-position: 100% 50%; }
|
0% {
|
||||||
100% { background-position: 0% 50%; }
|
background-position: 0% 50%;
|
||||||
}
|
}
|
||||||
/* Exemple de contenu */
|
|
||||||
.content {
|
50% {
|
||||||
color: #fff;
|
background-position: 100% 50%;
|
||||||
text-align: center;
|
}
|
||||||
padding-top: 20vh;
|
|
||||||
}
|
100% {
|
||||||
|
background-position: 0% 50%;
|
||||||
h1 {
|
}
|
||||||
display: flex;
|
}
|
||||||
justify-content: center;
|
|
||||||
}
|
h1.title {
|
||||||
|
display: flex;
|
||||||
/* Style de la vague en bas de page */
|
justify-content: center;
|
||||||
.wave {
|
}
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
.hidden {
|
||||||
left: 0;
|
visibility: hidden;
|
||||||
width: 100%;
|
}
|
||||||
overflow: hidden;
|
|
||||||
line-height: 0;
|
/* Style de la vague en bas de page */
|
||||||
}
|
.wave {
|
||||||
.wave svg {
|
position: absolute;
|
||||||
position: relative;
|
bottom: 0;
|
||||||
display: block;
|
left: 0;
|
||||||
width: calc(100% + 1.3px);
|
width: 100%;
|
||||||
height: 150px;
|
overflow: hidden;
|
||||||
}
|
line-height: 0;
|
||||||
.wave .shape-fill {
|
}
|
||||||
fill: rgba(255,255,255,0.2);
|
|
||||||
}
|
.wave svg {
|
||||||
.title {
|
position: relative;
|
||||||
font-size: 2.5rem;
|
display: block;
|
||||||
margin-bottom: 2rem;
|
width: calc(100% + 1.3px);
|
||||||
}
|
height: 150px;
|
||||||
|
}
|
||||||
/* En-tête du site */
|
|
||||||
header {
|
.wave .shape-fill {
|
||||||
text-align: center;
|
fill: rgba(255, 255, 255, 0.2);
|
||||||
color: #fff;
|
}
|
||||||
padding: 1rem;
|
|
||||||
}
|
.title {
|
||||||
|
font-size: 2.5rem;
|
||||||
/* Container en flexbox pour agencer les éléments dans une "grid" */
|
margin-bottom: 2rem;
|
||||||
.grid-container {
|
}
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
/* En-tête du site */
|
||||||
flex-wrap: wrap;
|
header {
|
||||||
justify-content: center;
|
text-align: center;
|
||||||
align-items: stretch;
|
color: #fff;
|
||||||
gap: 20px;
|
padding: 1rem;
|
||||||
padding: 1rem;
|
}
|
||||||
}
|
|
||||||
|
/* Container en flexbox pour agencer les éléments dans une "grid" */
|
||||||
/* Chaque élément de la grid */
|
.grid-container {
|
||||||
.grid-item {
|
flex: 1;
|
||||||
background: rgba(255,255,255,0);
|
display: flex;
|
||||||
padding: 2px;
|
flex-wrap: wrap;
|
||||||
border-radius: 8px;
|
justify-content: center;
|
||||||
color: #fff;
|
align-items: stretch;
|
||||||
text-align: center;
|
gap: 20px;
|
||||||
/* Permet de s'étendre sur au moins 300px et de grandir si besoin */
|
padding: 1rem;
|
||||||
flex: 0 1 calc(10% - 40px); /* 3 items par ligne avec 20px de gap */
|
}
|
||||||
max-width: calc(10% - 40px);
|
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0);
|
/* Chaque élément de la grid */
|
||||||
transition: transform 0.3s;
|
.grid-item {
|
||||||
}
|
background: rgba(255, 255, 255, 0);
|
||||||
|
padding: 2px;
|
||||||
.grid-item:hover {
|
border-radius: 8px;
|
||||||
transform: scale(1.05);
|
color: #fff;
|
||||||
background: rgba(255,255,255,0.1);
|
text-align: center;
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
|
/* Permet de s'étendre sur au moins 300px et de grandir si besoin */
|
||||||
}
|
flex: 0 1 calc(10% - 40px);
|
||||||
|
/* 3 items par ligne avec 20px de gap */
|
||||||
.grid-item img,
|
max-width: calc(10% - 40px);
|
||||||
.grid-item svg {
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0);
|
||||||
max-width: 100%;
|
transition: transform 0.3s;
|
||||||
height: auto;
|
}
|
||||||
display: block;
|
|
||||||
margin: 0 auto 10px;
|
.grid-item:hover {
|
||||||
/* Pour donner une vue isométrique */
|
transform: scale(1.05);
|
||||||
transform: rotateX(0deg) rotateZ(0deg);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
transform-origin: center;
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-item p {
|
.grid-item img,
|
||||||
font-size: 1.5rem;
|
.grid-item object {
|
||||||
margin-top: 0rem;
|
max-width: 100%;
|
||||||
font-weight: bold;
|
height: auto;
|
||||||
}
|
display: block;
|
||||||
|
margin: 0 auto 10px;
|
||||||
@media (max-width: 900px) {
|
/* Pour donner une vue isométrique */
|
||||||
.grid-item {
|
transform: rotateX(0deg) rotateZ(0deg);
|
||||||
flex: 0 1 calc(25% - 40px);
|
transform-origin: center;
|
||||||
max-width: calc(25% - 40px);
|
}
|
||||||
}
|
|
||||||
}
|
.grid-item p {
|
||||||
|
font-size: 1.5rem;
|
||||||
@media (max-width: 600px) {
|
margin-top: 0rem;
|
||||||
.grid-item {
|
font-weight: bold;
|
||||||
flex: 0 1 calc(50% - 40px);
|
}
|
||||||
max-width: calc(50% - 40px);
|
|
||||||
}
|
@media (max-width: 900px) {
|
||||||
}
|
.grid-item {
|
||||||
|
flex: 0 1 calc(25% - 40px);
|
||||||
|
max-width: calc(25% - 40px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.grid-item {
|
||||||
|
flex: 0 1 calc(50% - 40px);
|
||||||
|
max-width: calc(50% - 40px);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user