Application du patch de EpicKiwi

This commit is contained in:
Nono 2025-12-18 11:59:31 +01:00
parent 774f9b9218
commit f3e4293ff5
8 changed files with 660 additions and 1 deletions

View file

@ -75,10 +75,12 @@ footer {
text-align: center;
display: flex;
justify-content: space-evenly;
align-items: end;
}
@media (max-width: 600px) {
footer {
flex-direction: column;
align-items: center;
}
}

112
css/guide.css Normal file
View file

@ -0,0 +1,112 @@
body {
background-image: radial-gradient(at left top, #058C9E, #BC5180);
background-repeat: no-repeat;
background-attachment: fixed;
}
main {
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
background: none;
padding-bottom: 100px;
font-family: Erika;
line-height: 1.5;
}
main > * {
width: 100%;
background: linear-gradient(to top, rgba(255,255,255,0.5)), url(../assets/notebook.jpg), white;
box-sizing: border-box;
margin: 0;
background-size: 100% auto;
padding-bottom: 1em;
filter: drop-shadow(5px 3px 2px #000000b7);
padding-left: 15px;
padding-right: 15px;
z-index: 1;
position: relative;
max-width: 100%;
}
main > img {
object-fit: scale-down;
}
main > .sticker {
background: none;
z-index: 0;
}
main > *.draggable:not(.sticker) {
&:not(h2) {
width: 100%;
}
&:not(h1):not(h2):hover {
animation: none;
}
}
main ul,
main ol,
main dl {
padding-left: calc(1em + 15px);
}
main h1 {
text-align: center;
font-size: 4rem;
}
main h1,
main h2 {
background: none;
padding-top: 1.5em;
padding-left: 0;
padding-right: 0;
}
@media screen and (max-width: 800px) {
main h2 {
padding-left: 1em;
}
}
main h1 + *,
main h2 + * {
padding-top: 1em;
}
main h1 small {
display: block;
background: url(../assets/notebook.jpg);
color: black;
font-family: Erika;
font-size: 2.5rem;
width: fit-content;
max-width: 90%;
margin-left: auto;
margin-right: auto;
transform: translateY(-0.3em) rotate(-2deg);
}
main pre {
white-space: pre-wrap;
}
main a {
text-decoration: underline;
color: teal;
}
main a:visited {
color: rebeccapurple;
}
footer {
padding: 1em;
}

459
feat-infos-pratiques.patch Normal file
View file

@ -0,0 +1,459 @@
diff --git a/css/base.css b/css/base.css
index 12d4840..e00b4c1 100644
--- a/css/base.css
+++ b/css/base.css
@@ -24,16 +24,18 @@ a {
}
main {
- background-color: #413f43;
- background-image: url(../assets/background.jpg);
- background-repeat: no-repeat;
- background-size: cover;
+ /* background-color: #413f43;*/
+ background: #058C9E;
+ background: radial-gradient(at left top, #058C9E, #BC5180);
+ /* background-repeat: no-repeat;
+ background-size: cover; */
}
-main h1, main h2 {
+main h1, main h2, main h3 {
font-family: Banquise;
color: white;
+ z-index: 2;
}
main h1 {
@@ -73,10 +75,12 @@ footer {
text-align: center;
display: flex;
justify-content: space-evenly;
+ align-items: end;
}
@media (max-width: 600px) {
footer {
flex-direction: column;
+ align-items: center;
}
}
\ No newline at end of file
diff --git a/css/drag.css b/css/drag.css
index 6e97cd7..b3b3804 100644
--- a/css/drag.css
+++ b/css/drag.css
@@ -17,6 +17,28 @@ main img.draggable {
filter: drop-shadow(5px 3px 2px #000000b7);
}
+.draggable:hover {
+ /* Start the shake animation and make the animation last for 0.5 seconds */
+ animation: shake 3s;
+
+ /* When the animation is finished, start again */
+ animation-iteration-count: infinite;
+}
+
+@keyframes shake {
+ 0% { transform: translate(1px, 1px) rotate(0deg); }
+ 10% { transform: translate(-1px, -2px) rotate(-1deg); }
+ 20% { transform: translate(-2px, 0px) rotate(1deg); }
+ 30% { transform: translate(2px, 2px) rotate(0deg); }
+ 40% { transform: translate(1px, -1px) rotate(1deg); }
+ 50% { transform: translate(-1px, 2px) rotate(-1deg); }
+ 60% { transform: translate(-3px, 1px) rotate(0deg); }
+ 70% { transform: translate(2px, 1px) rotate(-1deg); }
+ 80% { transform: translate(-1px, -1px) rotate(1deg); }
+ 90% { transform: translate(1px, 2px) rotate(0deg); }
+ 100% { transform: translate(1px, -2px) rotate(-1deg); }
+}
+
span.draggable {
display: inline-block;
/* text-shadow: 1px 1px black, 0px 1px black, -1px 0px black, -1px -1px black; */
diff --git a/css/guide.css b/css/guide.css
new file mode 100644
index 0000000..d175b18
--- /dev/null
+++ b/css/guide.css
@@ -0,0 +1,112 @@
+body {
+ background-image: radial-gradient(at left top, #058C9E, #BC5180);
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+}
+
+main {
+ width: 100%;
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+ background: none;
+ padding-bottom: 100px;
+ font-family: Erika;
+ line-height: 1.5;
+}
+
+main > * {
+ width: 100%;
+ background: linear-gradient(to top, rgba(255,255,255,0.5)), url(../assets/notebook.jpg), white;
+ box-sizing: border-box;
+ margin: 0;
+ background-size: 100% auto;
+ padding-bottom: 1em;
+ filter: drop-shadow(5px 3px 2px #000000b7);
+ padding-left: 15px;
+ padding-right: 15px;
+ z-index: 1;
+ position: relative;
+ max-width: 100%;
+}
+
+main > img {
+ object-fit: scale-down;
+}
+
+main > .sticker {
+ background: none;
+ z-index: 0;
+}
+
+main > *.draggable:not(.sticker) {
+
+ &:not(h2) {
+ width: 100%;
+ }
+
+ &:not(h1):not(h2):hover {
+ animation: none;
+ }
+}
+
+
+main ul,
+main ol,
+main dl {
+ padding-left: calc(1em + 15px);
+}
+
+main h1 {
+ text-align: center;
+ font-size: 4rem;
+}
+
+main h1,
+main h2 {
+ background: none;
+ padding-top: 1.5em;
+ padding-left: 0;
+ padding-right: 0;
+}
+
+@media screen and (max-width: 800px) {
+ main h2 {
+ padding-left: 1em;
+ }
+}
+
+main h1 + *,
+main h2 + * {
+ padding-top: 1em;
+}
+
+main h1 small {
+ display: block;
+ background: url(../assets/notebook.jpg);
+ color: black;
+ font-family: Erika;
+ font-size: 2.5rem;
+ width: fit-content;
+ max-width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ transform: translateY(-0.3em) rotate(-2deg);
+}
+
+main pre {
+ white-space: pre-wrap;
+}
+
+main a {
+ text-decoration: underline;
+ color: teal;
+}
+
+main a:visited {
+ color: rebeccapurple;
+}
+
+footer {
+ padding: 1em;
+}
\ No newline at end of file
diff --git a/guide.template.html b/guide.template.html
new file mode 100644
index 0000000..53ad069
--- /dev/null
+++ b/guide.template.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="css/base.css">
+ <link rel="stylesheet" href="css/guide.css">
+ <link rel="stylesheet" href="css/drag.css">
+ <script src="js/drag.js" defer></script>
+ <title>Guide Interhack Camp 2026</title>
+</head>
+<body id="page-guide">
+ <nav>
+ <a href="index.html">home</a>
+ <a href="poster.html">poster</a>
+ <a href="guide.html" class="current">guide</a>
+ </nav>
+ <main>
+ <img class="draggable randomStart sticker" src="assets/stickers/arbre-hetre.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/bac-e2.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/clavier.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/clef.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/ecran.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/foin.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/machineacoudre.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/tracteur.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/arbre-hetre.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/bac-e2.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/clavier.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/clef.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/ecran.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/foin.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/machineacoudre.webp" alt="">
+ <img class="draggable randomStart sticker" src="assets/stickers/tracteur.webp" alt="">
+ <!-- EDGEDOC: A la place de ce commentaire, le contenu du Edgedoc https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA -->
+ </main>
+ <footer>
+ <div>
+ <h2>Association</h2>
+ <a href="assets/Camp-Interhack_Statuts.pdf">statuts</a>
+ </div>
+ <div>
+ <h2>Interhack</h2>
+ <a href="https://interhacker.space">accueil</a>
+ <a href="https://wiki.interhacker.space">wiki</a>
+ </div>
+ <div>
+ <h2>Site Web</h2>
+ <a href="https://git.interhacker.space/interhack/2026.camp.public.website">source</a>
+ </div>
+ <div>
+ Dernière mise à jour du guide: <!-- DATE: A la place de ce commentaire, la date et heure du jour -->
+ </div>
+ </footer>
+</body>
+</html>
diff --git a/index.html b/index.html
index cb211f1..f991bbf 100644
--- a/index.html
+++ b/index.html
@@ -13,8 +13,8 @@
<body>
<nav>
<a href="index.html" class="current">home</a>
- <a href="infos-pratiques.html" >infos pratiques</a>
<a href="poster.html">poster</a>
+ <a href="guide.html">guide</a>
</nav>
<main>
diff --git a/infos-pratiques.html b/infos-pratiques.html
deleted file mode 100644
index de63cc0..0000000
--- a/infos-pratiques.html
+++ /dev/null
@@ -1,136 +0,0 @@
-<html lang="en">
-
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="css/base.css">
- <link rel="stylesheet" href="css/home.css">
- <link rel="stylesheet" href="css/drag.css">
- <script src="js/drag.js" defer></script>
- <title>Camp Interhack 2026</title>
- </head>
-
- <body>
- <nav>
- <a href="index.html">home</a>
- <a href="infos-pratiques.html" class="current">infos pratiques</a>
- <a href="poster.html">poster</a>
- </nav>
- <main>
-
- <img class="draggable randomStart" src="assets/stickers/arbre-hetre.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/bac-e2.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/clavier.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/clef.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/ecran.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/foin.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/machineacoudre.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/tracteur.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/arbre-hetre.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/bac-e2.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/clavier.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/clef.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/ecran.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/foin.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/machineacoudre.webp" alt="">
- <img class="draggable randomStart" src="assets/stickers/tracteur.webp" alt="">
-
- <h1>
- <span class="draggable">Informations</span>
- <br>
- <span class="draggable">Pratiques</span>
- </h1>
-
- <h2>
- <span class="draggable">Quand ?</span>
- </h2>
-
- <section>
- <p class="draggable">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!</p>
- </section>
-
- <h2>
- <span class="draggable">Où ?</span>
- </h2>
-
- <section>
- <p class="draggable">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!</p>
- </section>
-
-
- <h2>
- <span class="draggable">Comment ?</span>
- </h2>
- <section>
- <p class="draggable">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!</p>
- </section>
-
- <h2>
- <span class="draggable">Quoi ?</span>
- </h2>
- <section>
- <p class="draggable">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!</p>
- </section>
-
- <h2>
- <span class="draggable">Venir ?</span>
- </h2>
- <section>
- <p class="draggable">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!</p>
- </section>
-
- <h2>
- <span class="draggable">Manger ?</span>
- </h2>
- <section>
- <p class="draggable">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!</p>
- </section>
-
- <h2>
- <span class="draggable">Dormir ?</span>
- </h2>
- <section>
- <p class="draggable">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!</p>
- </section>
-
- <h2>
- <span class="draggable">Le prix ?</span>
- </h2>
- <section>
- <p class="draggable">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!</p>
- </section>
-
- <h2>
- <span class="draggable">Le son ?</span>
- </h2>
- <section>
- <p class="draggable">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!</p>
- </section>
-
-
- <h2>
- <span class="draggable">Le réseau ?</span>
- </h2>
- <section>
- <p class="draggable">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!</p>
- </section>
-
- </main>
-
- <footer>
- <div>
- <h2>Association</h2>
- <a href="assets/Camp-Interhack_Statuts.pdf">statuts</a>
- </div>
- <div>
- <h2>Interhack</h2>
- <a href="https://interhacker.space">accueil</a>
- <a href="https://wiki.interhacker.space">wiki</a>
- </div>
- <div>
- <h2>Site Web</h2>
- <a href="https://git.interhacker.space/interhack/2026.camp.public.website">source</a>
- </div>
- </footer>
- </body>
-</html>
diff --git a/js/drag.js b/js/drag.js
index 55d68e5..7fdf564 100644
--- a/js/drag.js
+++ b/js/drag.js
@@ -1,5 +1,10 @@
const stepSize = 100;
const main = document.querySelector('main');
+
+for(let guideDraggable of document.querySelectorAll("#page-guide main > *")) {
+ guideDraggable.classList.add("draggable");
+}
+
const draggables = document.querySelectorAll(".draggable");
const randomStarts = document.querySelectorAll(".randomStart");
diff --git a/update-guide.sh b/update-guide.sh
new file mode 100755
index 0000000..f1c4990
--- /dev/null
+++ b/update-guide.sh
@@ -0,0 +1,25 @@
+#!/bin/bash
+
+GUIDE_EDGEDOC_URL="https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA"
+
+DATE_CMD="date --utc '+%d/%m/%Y %H:%I UTC'"
+
+echo "Mise a jour du guide dans guide.html a partir du edgedoc"
+echo "$GUIDE_EDGEDOC_URL"
+
+set -e
+curl --silent --fail-with-body "$GUIDE_EDGEDOC_URL/download" > guide.tmp.md
+pandoc --from markdown --to html guide.tmp.md > guide.tmp.html
+cat guide.template.html \
+ | sed '/EDGEDOC/{
+ s/<!-- *EDGEDOC[^-]*-->//;
+ r guide.tmp.html
+ }' \
+ | sed -e "/DATE/{
+ s/<!-- *DATE[^-]*-->//;
+ n;
+ e $DATE_CMD
+ }" \
+ > guide.html
+
+rm guide.tmp.md guide.tmp.html
\ No newline at end of file

0
guide.html Normal file
View file

56
guide.template.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/guide.css">
<link rel="stylesheet" href="css/drag.css">
<script src="js/drag.js" defer></script>
<title>Guide Interhack Camp 2026</title>
</head>
<body id="page-guide">
<nav>
<a href="index.html">home</a>
<a href="poster.html">poster</a>
<a href="guide.html" class="current">guide</a>
</nav>
<main>
<img class="draggable randomStart sticker" src="assets/stickers/arbre-hetre.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/bac-e2.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/clavier.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/clef.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/ecran.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/foin.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/machineacoudre.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/tracteur.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/arbre-hetre.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/bac-e2.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/clavier.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/clef.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/ecran.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/foin.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/machineacoudre.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/tracteur.webp" alt="">
<!-- EDGEDOC: A la place de ce commentaire, le contenu du Edgedoc https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA -->
</main>
<footer>
<div>
<h2>Association</h2>
<a href="assets/Camp-Interhack_Statuts.pdf">statuts</a>
</div>
<div>
<h2>Interhack</h2>
<a href="https://interhacker.space">accueil</a>
<a href="https://wiki.interhacker.space">wiki</a>
</div>
<div>
<h2>Site Web</h2>
<a href="https://git.interhacker.space/interhack/2026.camp.public.website">source</a>
</div>
<div>
Dernière mise à jour du guide: <!-- DATE: A la place de ce commentaire, la date et heure du jour -->
</div>
</footer>
</body>
</html>

View file

@ -13,8 +13,8 @@
<body>
<nav>
<a href="index.html" class="current">home</a>
<a href="infos-pratiques.html" >infos pratiques</a>
<a href="poster.html">poster</a>
<a href="guide.html">guide</a>
</nav>
<main>

View file

@ -1,5 +1,10 @@
const stepSize = 100;
const main = document.querySelector('main');
for(let guideDraggable of document.querySelectorAll("#page-guide main > *")) {
guideDraggable.classList.add("draggable");
}
const draggables = document.querySelectorAll(".draggable");
const randomStarts = document.querySelectorAll(".randomStart");

25
update-guide.sh Executable file
View file

@ -0,0 +1,25 @@
#!/bin/bash
GUIDE_EDGEDOC_URL="https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA"
DATE_CMD="date --utc '+%d/%m/%Y %H:%I UTC'"
echo "Mise a jour du guide dans guide.html a partir du edgedoc"
echo "$GUIDE_EDGEDOC_URL"
set -e
curl --silent --fail-with-body "$GUIDE_EDGEDOC_URL/download" > guide.tmp.md
pandoc --from markdown --to html guide.tmp.md > guide.tmp.html
cat guide.template.html \
| sed '/EDGEDOC/{
s/<!-- *EDGEDOC[^-]*-->//;
r guide.tmp.html
}' \
| sed -e "/DATE/{
s/<!-- *DATE[^-]*-->//;
n;
e $DATE_CMD
}" \
> guide.html
rm guide.tmp.md guide.tmp.html