diff --git a/README.md b/README.md index 2a7dfc8..5fdadf5 100644 --- a/README.md +++ b/README.md @@ -38,3 +38,7 @@ PDF can be generated thanks to `pandoc` and the good old `curl` this way: ```sh curl -s https://md.interhacker.space/u2VNUSO6S36xx5Ensc3FCw/download | pandoc -V geometry:margin=3cm -o assets/Camp-Interhack_Statuts.pdf ``` + +## Generation de la page Guide. + +La page Guide est générée depuis un Hedgedocs, en markdown, via le fichier update-guide.sh qui utilise le fichier guide.template.html. Le contenu de la page est donc un HTML basique in fine. \ No newline at end of file diff --git a/css/base.css b/css/base.css index d3886d5..6e2fe0f 100644 --- a/css/base.css +++ b/css/base.css @@ -18,22 +18,28 @@ html, body { margin: 0; } +img { + max-width: 100%; +} + a { text-decoration: none; color: black; } 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 { @@ -55,6 +61,7 @@ nav a, footer a, aside a { font-family: Dymo; font-size: 3em; display: inline-block; + margin-right: 1em; } nav a.current { @@ -72,10 +79,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/css/home.css b/css/home.css index eb9d863..e938d3c 100644 --- a/css/home.css +++ b/css/home.css @@ -38,6 +38,5 @@ section { font-family: Erika; margin: auto; margin-bottom: 100px; - columns: 560px; padding: 2%; } diff --git a/guide.html b/guide.html new file mode 100644 index 0000000..1769a3c --- /dev/null +++ b/guide.html @@ -0,0 +1,190 @@ + + + + + + + + + + Guide Interhack Camp 2026 + + + +
+ + + + + + + + + + + + + + + + + +

Camp Interhack 2026 +Infos pratiques

+

Le Camp Interhack 2026 se déroulera du jeudi 2 Juillet au +dimanche 5 Juillet 2026 à l’Antenne Paulette +(47.541451, +-2.091871). L’Antenne Paulette est un hackerspace qui se trouve à +Sévérac en Loire Atlantique (44) entre Nantes et Redon, au sein d’un ancien centre +de vacances de la Poste avec dortoir, hangard, champs et forêts…

+
+ + +
+
+ + +
+

Tickets

+

Nous attendons au maximum 200 personnes au Camp. Prenez votre ticket +pour réserver votre place. Nous préfèrons ne pas dépasser la jauge de +200 personnes pour éviter de surcharger les personnes qui organisent +l’événement.

+

Le ticket pour venir au Camp est à prix libre. Vous pouvez donner ce +que vous pouvez ou voulez donner. Le prix des billet permet de financer +la réservation du lieu, la nourriture sur place, la location du materiel +et les autres frais de l’èvénement.

+

Nous n’avons pas encore finalisé le système de réservation. Il est +pas encore possible de prendre votre ticket.

+

Dormir sur place

+

Il est possible de dormir sur place. Les dortoirs peuvent accueillir +jusqu’a 54 personnes dasn un lit. Un espace camping est prévu pour poser +une tente et un parking à l’ombre pour poser votre camion si vous dormez +dedans.

+ +

Proposer une activité

+ +

Participer a l’organisation

+

Le Camp est auto-organisé et tourne grâce aux personnes qui y +participent, dans une ambiance joyeuse et démocratique. Vous pouvez +également participer en proposant votre aide sur diverses choses, que +vous soyez forte en organisation ou juste envie de passer dire coucou et +nous donner de la force !

+

Rendez-vous sur le groupe Matrix du camp : +https://matrix.to/#/#camp-space:matrix.interhacker.space

+

Comment ?

+ +

qui ?

+ +

Autre

+ +
+ + + diff --git a/guide.template.html b/guide.template.html new file mode 100644 index 0000000..c8822ae --- /dev/null +++ b/guide.template.html @@ -0,0 +1,65 @@ + + + + + + + + + + + + + Guide Interhack Camp 2026 + + + +
+ + + + + + + + + + + + + + + + + +
+ + + diff --git a/index.html b/index.html index d3b628e..f991bbf 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,7 @@
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///; + r guide.tmp.html + }' \ + | sed -e "/DATE/{ + s///; + n; + e $DATE_CMD + }" \ + > guide.html + +rm guide.tmp.md guide.tmp.html \ No newline at end of file