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>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>La Banquise</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">La Banquise</h1>
|
||||
<div class="grid-container">
|
||||
|
||||
<!-- Bureau -->
|
||||
<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">
|
||||
<!-- 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>
|
||||
<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>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>La Banquise</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="title">La Banquise</h1>
|
||||
<div class="grid-container">
|
||||
|
||||
<a class="grid-item" href="localhost">
|
||||
<object data="assets/iceberg.svg" type="image/svg+xml"></object>
|
||||
<p class="item-name">Placeholder</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="wave hidden">
|
||||
<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 parent = tile.parentNode;
|
||||
tile.remove();
|
||||
|
||||
const tiles = [
|
||||
{ name: "Notre wiki", href: "https://wiki.la-banquise.fr" },
|
||||
{ name: "Notre git", href: "https://git.la-banquise.fr" },
|
||||
const tile = document.querySelectorAll(".grid-container > *")[0];
|
||||
const parent = tile.parentNode;
|
||||
tile.remove();
|
||||
|
||||
const tiles = [
|
||||
{ name: "Notre wiki", href: "https://wiki.la-banquise.fr" },
|
||||
{ name: "Notre git", href: "https://git.la-banquise.fr" },
|
||||
{ name: "Panel jeux", href: "https://panel.la-banquise.fr" },
|
||||
{ name: "Discord", href: "https://discord.gg/QQWwzX5ptY" },
|
||||
]
|
||||
|
||||
tiles.forEach((info) => {
|
||||
const newTile = tile.cloneNode(true);
|
||||
newTile.querySelectorAll("p")[0].innerHTML = info.name;
|
||||
newTile.href = info.href;
|
||||
parent.appendChild(newTile);
|
||||
});
|
||||
]
|
||||
|
||||
tiles.forEach((info) => {
|
||||
const newTile = tile.cloneNode(true);
|
||||
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');
|
||||
|
||||
/* Réinitialisation et styles généraux */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(45deg, #001e6c, #5dadc2, #001e6c);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 100s ease infinite;
|
||||
}
|
||||
@keyframes gradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
/* Exemple de contenu */
|
||||
.content {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding-top: 20vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Style de la vague en bas de page */
|
||||
.wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
}
|
||||
.wave svg {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: calc(100% + 1.3px);
|
||||
height: 150px;
|
||||
}
|
||||
.wave .shape-fill {
|
||||
fill: rgba(255,255,255,0.2);
|
||||
}
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* En-tête du site */
|
||||
header {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Container en flexbox pour agencer les éléments dans une "grid" */
|
||||
.grid-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
gap: 20px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Chaque élément de la grid */
|
||||
.grid-item {
|
||||
background: rgba(255,255,255,0);
|
||||
padding: 2px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* 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 */
|
||||
max-width: calc(10% - 40px);
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.grid-item:hover {
|
||||
transform: scale(1.05);
|
||||
background: rgba(255,255,255,0.1);
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.grid-item img,
|
||||
.grid-item svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto 10px;
|
||||
/* Pour donner une vue isométrique */
|
||||
transform: rotateX(0deg) rotateZ(0deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.grid-item p {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 0rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
@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');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(45deg, #001e6c, #5dadc2, #001e6c);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 100s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
h1.title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Style de la vague en bas de page */
|
||||
.wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.wave svg {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: calc(100% + 1.3px);
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.wave .shape-fill {
|
||||
fill: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* En-tête du site */
|
||||
header {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Container en flexbox pour agencer les éléments dans une "grid" */
|
||||
.grid-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
gap: 20px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Chaque élément de la grid */
|
||||
.grid-item {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
padding: 2px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* 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 */
|
||||
max-width: calc(10% - 40px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.grid-item:hover {
|
||||
transform: scale(1.05);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.grid-item img,
|
||||
.grid-item object {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto 10px;
|
||||
/* Pour donner une vue isométrique */
|
||||
transform: rotateX(0deg) rotateZ(0deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.grid-item p {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 0rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@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