459 lines
15 KiB
Diff
459 lines
15 KiB
Diff
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
|